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

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  /* ☞ Brand palette — single source of truth */
  --pr:        #FF3D3D;
  --pr-d:      #D93030;
  --pr-l:      #FF6B6B;
  --pr-bg:     rgba(255,61,61,.07);
  --pr-shadow: 0 4px 18px rgba(255,61,61,.30);

  /* ☞ Semantic accents */
  --orange:  #FF8C00;
  --green:   #00B96B;
  --purple:  #7B2FBE;
  --yellow:  #FFB800;
  --blue:    #1677FF;

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

  /* ☞ Surfaces */
  --bg:     #F3F4F6;
  --white:  #FFFFFF;
  --bdr:    #E8E8E8;
  --bdr2:   #F0F0F0;

  /* ☞ Legacy aliases (DO NOT REMOVE — used in other pages) */
  --or:#FF8C00; --gr:#00B96B; --bl:#1677FF; --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:56px; --top-h:36px; --t:.18s ease;
  --bg2:#EFEFEF; --bg-gray:#F3F4F6; --bg-white:#fff;
  --border:#E8E8E8; --border2:#F0F0F0;
  --text:#1A1A1A; --text2:#555; --text3:#999;
  --shadow:0 2px 8px rgba(0,0,0,.07);
  --shadow2:0 4px 20px rgba(0,0,0,.12);
  --primary:#FF3D3D; --primary-d:#D93030; --primary-bg:rgba(255,61,61,.07);

  /* ☞ 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:rtl; 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      { display:grid; grid-template-columns:repeat(5,1fr); gap:12px }
@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:var(--pr) }

/* ════════════════════════════════════════════════════════════════
   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:var(--pr); 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:var(--pr-d) }
.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:var(--pr); 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:var(--pr); color:var(--pr) }

/* ── 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:var(--pr); 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:var(--pr); 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:var(--pr)!important; color:#fff!important; border-radius:var(--r)!important }
.ch-cart-action:hover { background:var(--pr-d)!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:var(--pr); 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:var(--pr); border-bottom-color:var(--pr) }
.ch-cat-nav-all  { color:var(--pr)!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:var(--pr) }
.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:var(--pr) }
.ch-mob-nav-center { background:var(--pr); 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,61,61,.4) }
.ch-mob-nav-center:hover { background:var(--pr-d) }
@media(max-width:768px){ .ch-mobile-bottom-nav{ display:block } body{ padding-bottom:72px } }

/* ════════════════════════════════════════════════════════════════
   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:var(--pr); 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:var(--pr);
  background:var(--pr-bg); padding:6px 14px;
  border-radius:var(--rx-pill); transition:all .18s; white-space:nowrap;
}
.ch-sec-link:hover { background:var(--pr); 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:var(--pr); 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:var(--pr); color:#fff; box-shadow:var(--pr-shadow) }
.ch-btn-primary:hover { background:var(--pr-d); box-shadow:0 6px 24px rgba(255,61,61,.42); 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:var(--pr); border:2px solid var(--pr) } .ch-btn-outline:hover{ background:var(--pr); color:#fff }
.ch-btn-success{ background:var(--green); color:#fff }
.ch-btn-danger { background:var(--pr); 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:var(--pr); color:#fff; margin-bottom:10px; box-shadow:0 4px 16px rgba(255,61,61,.28) }
.ch-add-to-cart-btn:hover { background:var(--pr-d) }
.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:var(--pr); box-shadow:0 4px 14px rgba(255,61,61,.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:var(--pr) }
.ch-qcat-all { background:linear-gradient(135deg,var(--pr),var(--orange))!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,#1A0808 0%,#2D1212 55%,#1A0808 100%);
  border-radius:var(--rx-xl); overflow:hidden;
  box-shadow:0 6px 28px rgba(0,0,0,.25);
}
.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:var(--pr); 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:var(--pr) }
.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,var(--orange),var(--pr)); 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:var(--pr);
}

/* ── 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:var(--pr) }

/* ── 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 }
/* Primary price: big red */
.ch-pnew,.ch-price-new,.ch-card-price b {
  font-size:17px; font-weight:900; color:var(--pr); line-height:1;
}
/* Old price: small strikethrough */
.ch-pold,.ch-old,del.ch-old {
  font-size:11px; color:#C0C0C0; text-decoration:line-through; font-style:normal;
}
/* Discount %: red pill */
.ch-pdis,.ch-disc-pct {
  font-size:10px; font-weight:800; color:var(--pr);
  background:rgba(255,61,61,.1); border-radius:4px;
  padding:1px 5px; font-style:normal;
}

/* ── Psychological triggers ── */
.ch-psych { font-size:10.5px; color:var(--t3); margin-bottom:4px; display:flex; align-items:center; gap:3px }
.ch-psych-hot    { color:var(--pr); font-weight:700 }
.ch-psych-urgent { color:#D84315; font-weight:700; animation:urgentPulse 2s infinite }
.ch-soc { font-size:10.5px; color:var(--t3) }
.ch-social-proof-card { display:flex; align-items:center; gap:4px; font-size:10px; color:#888 }

/* ──────────────────────────────────────────────────────────────
   ★★★  ADD TO CART + WISHLIST — Ultimate Version  ★★★
   High-contrast, accessible, satisfying micro-interactions.
────────────────────────────────────────────────────────────── */
.ch-card-foot,.ch-card-btns {
  display:flex; gap:6px;
  margin-top:auto; padding-top:8px;
}

/* — ATC button: the hero action — */
.ch-atc-btn,
.ch-card-btns button:first-child {
  flex:1;
  height:36px;
  padding:0 8px;
  background:var(--pr);
  color:#fff;
  border:none;
  border-radius:var(--rx-sm);
  font-size:11.5px;
  font-weight:800;
  cursor:pointer;
  transition:background .15s, transform .15s, box-shadow .15s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  white-space:nowrap;
  line-height:1;
  box-shadow:0 2px 8px rgba(255,61,61,.22);
  letter-spacing:.1px;
}
.ch-atc-btn:hover,
.ch-card-btns button:first-child:hover {
  background:var(--pr-d);
  transform:translateY(-1px);
  box-shadow:0 5px 16px rgba(255,61,61,.38);
}
.ch-atc-btn:active,
.ch-card-btns button:first-child:active {
  transform:scale(.96) translateY(0);
  box-shadow:none;
  background:var(--pr-d);
}
/* Success state after adding */
.ch-atc-btn.added,
.ch-card-btns button:first-child.added {
  background:var(--green);
  box-shadow:0 2px 8px rgba(0,185,107,.3);
}
/* Loading spinner */
.ch-atc-btn.loading,
.ch-card-btns button:first-child.loading {
  opacity:.75; pointer-events:none;
}

/* — Wishlist button: understated, reactive — */
.ch-wish-icon,
.ch-card-btns button:last-child {
  width:36px;
  height:36px;
  flex-shrink:0;
  background:#F5F5F5;
  border:1.5px solid #E4E4E4;
  border-radius:var(--rx-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .18s;
  color:#C8C8C8;
  font-size:15px;
  padding:0;
}
.ch-wish-icon:hover,
.ch-card-btns button:last-child:hover {
  background:#FFF0F0;
  border-color:#FFBBBB;
  color:var(--pr);
  transform:scale(1.06);
}
/* Active / wishlisted */
.ch-wish-icon.wishlisted,
.ch-card-btns button:last-child.wishlisted {
  background:#FFF0F0;
  border-color:var(--pr);
  color:var(--pr);
}
.ch-wish-icon.wishlisted svg,
.ch-card-btns button:last-child.wishlisted svg {
  fill:var(--pr);
  stroke:var(--pr);
}
/* Pop animation on toggle */
.ch-wish-icon.pop { animation:wishPop .32s cubic-bezier(.36,.07,.19,.97) }

/* Quick view slide-up overlay */
.ch-card-qv { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.7); color:#fff; font-size:11.5px; font-weight:700; padding:9px; text-align:center; opacity:0; transform:translateY(4px); transition:all .22s ease; cursor:pointer; border:none; width:100% }
.ch-card:hover .ch-card-qv { opacity:1; transform:translateY(0) }

/* ── Mobile card adjustments ── */
@media(max-width:768px){
  .ch-card-name,.ch-card-title  { font-size:12px; min-height:34px }
  .ch-pnew,.ch-card-price b     { font-size:15px }
  .ch-atc-btn,.ch-card-btns button:first-child { font-size:11px; height:34px }
  .ch-wish-icon,.ch-card-btns button:last-child { width:34px; height:34px }
}
@media(max-width:420px){
  .ch-card-body { padding:8px 8px 10px }
  .ch-pnew,.ch-card-price b { font-size:14px }
  .ch-atc-btn,.ch-card-btns button:first-child { font-size:10.5px; gap:2px }
}

/* ════════════════════════════════════════════════════════════════
   WHY SECTION
════════════════════════════════════════════════════════════════ */
.ch-why-sec { background:linear-gradient(135deg,#181818,#2A0D0D); padding:38px 0; margin-top:28px }
.ch-why-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px }
.ch-why-card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); border-radius:var(--rx-md); padding:18px; text-align:center; transition:background .2s }
.ch-why-card:hover { background:rgba(255,61,61,.1) }
.ch-why-icon { font-size:26px; margin-bottom:8px }
.ch-why-ttl  { font-size:14px; font-weight:800; color:#fff; margin-bottom:4px }
.ch-why-sub  { font-size:11px; color:rgba(255,255,255,.5); line-height:1.6 }
@media(max-width:640px){ .ch-why-grid{ grid-template-columns:repeat(2,1fr) } }

/* ════════════════════════════════════════════════════════════════
   REVIEWS
════════════════════════════════════════════════════════════════ */
.ch-reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
@media(max-width:900px){ .ch-reviews-grid{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:600px){ .ch-reviews-grid{ grid-template-columns:1fr } }
.ch-review-card { background:#fff; border:1px solid var(--bdr); border-radius:var(--rx-lg); padding:16px; transition:box-shadow .2s }
.ch-review-card:hover { box-shadow:var(--sx-md) }
.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-weight:700; font-size:13px; color:var(--t1) }
.ch-review-loc   { font-size:11px; color:var(--t3) }
.ch-review-stars { margin-right:auto; font-size:12px; color:var(--yellow) }
.ch-review-text  { font-size:13px; color:var(--t2); line-height:1.65; font-style:italic }
.ch-review-footer,.ch-review-meta-line { font-size:11px; color:var(--t3); margin-top:8px }
/* legacy */
.ch-review { padding:14px 0; border-bottom:1px solid var(--bdr2) }
.ch-review-header { display:flex; align-items:center; gap:10px; margin-bottom:8px }
.ch-review-date   { font-size:11px; color:var(--t3) }
.ch-review-meta   { display:flex; align-items:center; gap:8px; margin-top:2px }
.ch-review-review-stars { color:var(--yellow); font-size:13px }

/* ════════════════════════════════════════════════════════════════
   STATS
════════════════════════════════════════════════════════════════ */
.ch-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:12px 0 }
@media(max-width:640px){ .ch-stats-row{ grid-template-columns:repeat(2,1fr) } }
.ch-stat-box { background:#fff; border-radius:var(--rx-lg); padding:18px 14px; text-align:center; border:1px solid var(--bdr); box-shadow:var(--sx-xs); transition:transform .2s }
.ch-stat-box:hover { transform:translateY(-2px) }
.ch-stat-num,.ch-stat-box-num     { font-size:26px; font-weight:900; color:var(--pr); line-height:1 }
.ch-stat-lbl,.ch-stat-box-label   { font-size:11.5px; color:var(--t3); margin-top:4px }

/* ════════════════════════════════════════════════════════════════
   CTA / APP BANNER
════════════════════════════════════════════════════════════════ */
.ch-cta-sec { background:linear-gradient(135deg,var(--pr) 0%,var(--orange) 100%); border-radius:var(--rx-xl); padding:44px 28px; text-align:center; margin-bottom:16px; position:relative; overflow:hidden }
.ch-cta-sec::before { content:''; position:absolute; top:-40px; right:-40px; width:180px; height:180px; background:rgba(255,255,255,.07); border-radius:50% }
.ch-cta-sec::after  { content:''; position:absolute; bottom:-50px; left:-20px; width:220px; height:220px; background:rgba(255,255,255,.05); border-radius:50% }
@media(max-width:640px){ .ch-cta-sec{ padding:32px 16px } }
.ch-cta-sec h2 { font-size:clamp(20px,3vw,32px); font-weight:900; color:#fff; margin-bottom:10px; position:relative }
.ch-cta-sec p  { font-size:14px; color:rgba(255,255,255,.88); margin-bottom:24px; max-width:480px; margin-left:auto; margin-right:auto; position:relative }
.ch-cta-btns   { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative }
/* App banner */
.ch-app-banner { background:linear-gradient(135deg,#1A1A2E,#16213E); border-radius:18px; overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:32px; margin-bottom:16px }
@media(max-width:640px){ .ch-app-banner{ grid-template-columns:1fr; padding:20px } }
.ch-app-banner h2 { font-size:20px; font-weight:900; color:#fff; margin-bottom:8px }
.ch-app-banner p  { font-size:13px; color:rgba(255,255,255,.7); margin-bottom:16px }
.ch-app-btns   { display:flex; gap:10px; flex-wrap:wrap }
.ch-app-btn    { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:var(--r); padding:10px 16px; color:#fff; transition:var(--t) }
.ch-app-btn:hover { background:rgba(255,255,255,.2) }
.ch-app-btn-icon { font-size:22px }
.ch-app-btn-text small  { display:block; font-size:10px; color:rgba(255,255,255,.6) }
.ch-app-btn-text strong { display:block; font-size:14px; font-weight:700 }
.ch-app-visual { font-size:64px; line-height:1 }
@media(max-width:640px){ .ch-app-visual{ display:none } }

/* ════════════════════════════════════════════════════════════════
   CATEGORIES PAGE GRID
════════════════════════════════════════════════════════════════ */
.ch-cats-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:10px }
@media(max-width:900px){ .ch-cats-grid{ grid-template-columns:repeat(5,1fr) } }
@media(max-width:540px){ .ch-cats-grid{ grid-template-columns:repeat(4,1fr); gap:6px } }
.ch-cat-card { background:#fff; border:1px solid var(--bdr2); border-radius:var(--r2); padding:14px 8px; text-align:center; transition:var(--t); cursor:pointer; display:block }
.ch-cat-card:hover { border-color:var(--pr); transform:translateY(-2px); box-shadow:0 4px 16px rgba(255,61,61,.1) }
.ch-cat-icon  { font-size:28px; margin-bottom:6px }
.ch-cat-name  { font-size:11px; font-weight:700; color:var(--t1); line-height:1.3 }
.ch-cat-count { font-size:10px; color:var(--t3); margin-top:2px }

/* ════════════════════════════════════════════════════════════════
   MODAL / QUICK VIEW
════════════════════════════════════════════════════════════════ */
.ch-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000; display:none; align-items:center; justify-content:center; padding:20px }
.ch-modal-overlay.open { display:flex }
.ch-modal { background:#fff; border-radius:var(--r3); width:100%; max-width:700px; max-height:90vh; overflow-y:auto; box-shadow:var(--sh3); animation:slideUp .2s ease }
.ch-modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--bdr); position:sticky; top:0; background:#fff; z-index:2 }
.ch-modal-header h3 { font-size:16px; font-weight:700 }
.ch-modal-body { padding:20px }

/* ════════════════════════════════════════════════════════════════
   FORMS / BOXES / ALERTS / TAGS / STATES
════════════════════════════════════════════════════════════════ */
.ch-input,.ch-select,.ch-textarea { width:100%; padding:10px 14px; border:1.5px solid var(--bdr); border-radius:var(--r); font-size:14px; color:var(--t1); background:#fff; transition:border-color var(--t) }
.ch-input:focus,.ch-select:focus,.ch-textarea:focus { border-color:var(--pr); box-shadow:0 0 0 3px rgba(255,61,61,.1) }
.ch-input::placeholder,.ch-textarea::placeholder { color:var(--t3) }
.ch-textarea { resize:vertical; min-height:100px }
.ch-select { 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 12px center; padding-left:32px }
.ch-label { display:block; font-size:13px; font-weight:600; color:var(--t1); margin-bottom:6px }
.ch-form-group { margin-bottom:16px }
.ch-form-error { font-size:12px; color:var(--pr); margin-top:4px }
.ch-checkbox { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; color:var(--t2) }
.ch-checkbox input { width:16px; height:16px; accent-color:var(--pr) }
.ch-box    { background:#fff; border:1px solid var(--bdr2); border-radius:var(--r2); padding:20px }
.ch-box-sm { padding:14px }
.ch-alert { padding:12px 16px; border-radius:var(--r); font-size:14px; margin-bottom:14px; border:1px solid; display:flex; align-items:center; gap:8px }
.ch-alert-error   { background:#FFF5F5; border-color:#FFCDD2; color:#C62828 }
.ch-alert-success { background:#F0FFF4; border-color:#C8E6C9; color:#1B5E20 }
.ch-alert-info    { background:#E8F4FD; border-color:#BBDEFB; color:#0D47A1 }
.ch-alert-warning { background:#FFFDE7; border-color:#FFF9C4; color:#F57F17 }
.ch-tag { display:inline-flex; align-items:center; padding:3px 8px; border-radius:99px; font-size:11px; font-weight:700; border:1px solid var(--bdr); background:var(--bg); color:var(--t2) }
.ch-tag-success { background:#E8F5E9; border-color:#A5D6A7; color:#2E7D32 }
.ch-tag-error   { background:#FFEBEE; border-color:#FFCDD2; color:#C62828 }
.ch-tag-info    { background:#E3F2FD; border-color:#BBDEFB; color:#1565C0 }
.ch-tag-gold    { background:#FFF8E1; border-color:#FFD54F; color:#E65100 }
.ch-tag-muted   { background:var(--bg); color:var(--t3) }
.ch-featured-badge { display:inline-flex; align-items:center; gap:4px; background:#FFF8E1; border:1px solid #FFD54F; color:#E65100; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:700 }
.ch-status { display:inline-flex; align-items:center; padding:4px 10px; border-radius:99px; font-size:12px; font-weight:700 }
.ch-status-pending    { background:#FFF8E1; color:#F57F17 }
.ch-status-processing { background:#E3F2FD; color:#1565C0 }
.ch-status-shipped,.ch-status-delivered { background:#E8F5E9; color:#2E7D32 }
.ch-status-cancelled  { background:#FAFAFA; color:var(--t3) }

/* ════════════════════════════════════════════════════════════════
   TABLE / PAGINATION / BREADCRUMB / TABS
════════════════════════════════════════════════════════════════ */
.ch-table-wrap { overflow-x:auto; border:1px solid var(--bdr); border-radius:var(--r) }
.ch-table { width:100%; border-collapse:collapse; font-size:14px }
.ch-table th { background:var(--bg); padding:10px 14px; text-align:right; font-size:12px; font-weight:700; color:var(--t2); border-bottom:2px solid var(--bdr); white-space:nowrap }
.ch-table td { padding:12px 14px; border-bottom:1px solid var(--bdr2); vertical-align:middle }
.ch-table tr:hover td { background:#FAFAFA }
.ch-pagination { display:flex; gap:4px; align-items:center; flex-wrap:wrap; margin-top:28px }
.ch-page-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:var(--r); font-size:13px; font-weight:700; border:1.5px solid var(--bdr); background:#fff; color:var(--t2); cursor:pointer; transition:var(--t) }
.ch-page-btn:hover { border-color:var(--pr); color:var(--pr) }
.ch-page-btn.active { background:var(--pr); border-color:var(--pr); color:#fff }
.ch-breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--t3); margin-bottom:16px; flex-wrap:wrap }
.ch-breadcrumb a:hover { color:var(--pr) }
.ch-breadcrumb-sep { color:var(--t4) }
.ch-tabs { display:flex; gap:0; border-bottom:2px solid var(--bdr); margin-bottom:18px }
.ch-tab-btn { padding:10px 20px; font-size:14px; font-weight:600; color:var(--t2); border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; background:none; border-top:none; border-left:none; border-right:none; transition:var(--t) }
.ch-tab-btn:hover { color:var(--pr) }
.ch-tab-btn.active { color:var(--pr); border-bottom-color:var(--pr) }
.ch-tab-pane { display:none } .ch-tab-pane.active { display:block }

/* ════════════════════════════════════════════════════════════════
   TOAST / EMPTY / LOADING / SKELETON
════════════════════════════════════════════════════════════════ */
#ch-toasts { position:fixed; bottom:80px; left:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; max-width:300px }
@media(min-width:769px){ #ch-toasts{ bottom:20px } }
.ch-toast { background:#fff; border-right:4px solid var(--pr); border-radius:var(--r); padding:12px 16px; font-size:13px; box-shadow:var(--sh2); animation:slideUp .2s ease; display:flex; align-items:center; gap:8px }
.ch-toast.success { border-right-color:var(--green) }
.ch-toast.error   { border-right-color:var(--pr) }
.ch-toast.warn    { border-right-color:var(--orange) }
.ch-empty       { text-align:center; padding:48px 20px }
.ch-empty-icon  { font-size:52px; margin-bottom:12px; opacity:.5 }
.ch-empty-title { font-size:18px; font-weight:700; margin-bottom:8px }
.ch-empty-desc  { font-size:14px; color:var(--t2); max-width:320px; margin:0 auto 20px }
.ch-loading { display:flex; align-items:center; justify-content:center; padding:40px; color:var(--t3); gap:10px }
.ch-loading::before { content:''; width:20px; height:20px; border:2px solid var(--bdr); border-top-color:var(--pr); border-radius:50%; animation:spin .7s linear infinite }
.ch-skeleton { background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%); background-size:200% 100%; animation:skel 1.5s infinite; border-radius:var(--r) }

/* ════════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
════════════════════════════════════════════════════════════════ */
.ch-product-gallery { display:grid; grid-template-columns:80px 1fr; gap:12px }
@media(max-width:540px){ .ch-product-gallery{ grid-template-columns:1fr } }
.ch-product-thumbs { display:flex; flex-direction:column; gap:6px }
@media(max-width:540px){ .ch-product-thumbs{ flex-direction:row; overflow-x:auto } }
.ch-product-thumb { width:76px; height:76px; border:2px solid var(--bdr); border-radius:var(--r); overflow:hidden; cursor:pointer; flex-shrink:0 }
.ch-product-thumb.active,.ch-product-thumb:hover { border-color:var(--pr) }
.ch-product-thumb img { width:100%; height:100%; object-fit:cover }
.ch-product-main-img { aspect-ratio:1; overflow:hidden; border:1px solid var(--bdr2); border-radius:var(--r2); background:var(--bg) }
.ch-product-main-img img { width:100%; height:100%; object-fit:contain }
.ch-product-title { font-size:20px; font-weight:800; margin-bottom:8px; line-height:1.3 }
.ch-product-price-wrap { margin:12px 0 }
.ch-product-price { font-size:28px; font-weight:900; color:var(--pr) }
.ch-product-info-row { display:flex; align-items:center; gap:12px; margin:8px 0; font-size:13px; color:var(--t2) }
.ch-product-qty-wrap { display:flex; align-items:center; gap:10px; margin:14px 0 }
.ch-qty-input { display:flex; align-items:center; border:1.5px solid var(--bdr); border-radius:var(--r); overflow:hidden }
.ch-qty-btn { width:34px; height:38px; background:var(--bg); border:none; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; transition:background var(--t) }
.ch-qty-btn:hover { background:var(--bdr) }
.ch-qty-input input { width:50px; text-align:center; border:none; font-size:15px; font-weight:700 }
.ch-specs-table { width:100%; border-collapse:collapse; font-size:14px }
.ch-specs-table tr { border-bottom:1px solid var(--bdr2) }
.ch-specs-table td:first-child { padding:9px 12px; font-weight:600; color:var(--t2); background:var(--bg); width:35% }
.ch-specs-table td:last-child { padding:9px 12px }
.ch-product-compare { display:flex; align-items:center; gap:8px; font-size:13px; padding:10px 0; border-top:1px solid var(--bdr2) }

/* ════════════════════════════════════════════════════════════════
   CART / CHECKOUT
════════════════════════════════════════════════════════════════ */
.ch-checkout-grid { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start }
@media(max-width:900px){ .ch-checkout-grid{ grid-template-columns:1fr } }
.ch-checkout-sticky { position:sticky; top:calc(var(--nav-h) + 10px) }
.ch-order-summary-item { display:flex; justify-content:space-between; padding:8px 0; font-size:14px; border-bottom:1px solid var(--bdr2) }
.ch-cart-sidebar { position:fixed; top:0; left:-380px; width:380px; height:100%; background:#fff; z-index:1000; box-shadow:var(--sh3); transition:left .3s ease; display:flex; flex-direction:column }
.ch-cart-sidebar.open { left:0 }
.ch-cart-sidebar-header { padding:16px 20px; border-bottom:1px solid var(--bdr); display:flex; align-items:center; justify-content:space-between }
.ch-cart-sidebar-body   { flex:1; overflow-y:auto; padding:12px }
.ch-cart-sidebar-footer { padding:16px; border-top:1px solid var(--bdr) }
.ch-payment-options { display:flex; flex-direction:column; gap:10px; margin:16px 0 }
.ch-payment-option { border:2px solid var(--bdr); border-radius:var(--r); padding:12px 16px; cursor:pointer; transition:var(--t); display:flex; align-items:center; gap:10px }
.ch-payment-option.selected,.ch-payment-option:hover { border-color:var(--pr); background:var(--pr-bg) }

/* ════════════════════════════════════════════════════════════════
   FILTERS
════════════════════════════════════════════════════════════════ */
.ch-filters-wrap { background:#fff; border:1px solid var(--bdr2); border-radius:var(--r2); padding:14px }
.ch-filter-pill { display:inline-flex; align-items:center; gap:6px; background:var(--pr-bg); border:1px solid rgba(255,61,61,.2); color:var(--pr); padding:4px 10px; border-radius:99px; font-size:12px; font-weight:600; cursor:pointer }
.ch-filter-section { margin-bottom:18px }
.ch-filter-section-title { font-size:13px; font-weight:800; color:var(--t1); margin-bottom:10px }
.ch-filter-option { display:flex; align-items:center; gap:8px; padding:6px 0; cursor:pointer; font-size:13px; color:var(--t2) }
.ch-filter-option:hover { color:var(--pr) }
.ch-filter-option input[type="checkbox"] { accent-color:var(--pr) }
.ch-active-filters { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px }

/* ════════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════════ */
.ch-footer { background:#111; color:#888; padding:40px 0 20px; margin-top:32px }
.ch-footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px }
@media(max-width:900px){ .ch-footer-grid{ grid-template-columns:1fr 1fr } }
@media(max-width:540px){ .ch-footer-grid{ grid-template-columns:1fr } }
.ch-footer-brand-logo { font-size:22px; font-weight:900; color:#fff; margin-bottom:12px }
.ch-footer-desc { font-size:13px; color:#666; line-height:1.7; max-width:280px }
.ch-footer-title { font-size:14px; font-weight:800; color:#fff; margin-bottom:14px }
.ch-footer-links { display:flex; flex-direction:column; gap:8px }
.ch-footer-links a { font-size:13px; color:#777; transition:color var(--t) }
.ch-footer-links a:hover { color:#fff }
.ch-footer-bottom { border-top:1px solid #222; padding-top:20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px }
.ch-footer-copy { font-size:12px; color:#555 }
.ch-footer-social { display:flex; gap:10px }
.ch-footer-social a { width:34px; height:34px; border-radius:50%; background:#222; display:flex; align-items:center; justify-content:center; font-size:16px; color:#888; transition:var(--t) }
.ch-footer-social a:hover { background:var(--pr); color:#fff }
.ch-footer-pay-icons { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px }
.ch-footer-pay-icons img { height:26px; border-radius:4px; filter:grayscale(1) opacity(.5) }
.ch-footer-pay-icons img:hover { filter:none }
.ch-footer-trust { display:flex; flex-wrap:wrap; gap:14px; margin-top:8px }
.ch-footer-trust .ch-trust-item { font-size:12px; color:#555 }
.ch-live-dot { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; animation:ping 2s infinite }

/* ════════════════════════════════════════════════════════════════
   ANIMATIONS — single declaration, no duplicates
════════════════════════════════════════════════════════════════ */
@keyframes pulse       { 0%,100%{transform:scale(1)}  50%{transform:scale(1.18)} }
@keyframes blink       { 0%,100%{opacity:1}            50%{opacity:.2} }
@keyframes slideUp     { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes spin        { to{transform:rotate(360deg)} }
@keyframes ping        { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
@keyframes skel        { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes wishPop     { 0%{transform:scale(1)} 40%{transform:scale(1.4)} 70%{transform:scale(.9)} 100%{transform:scale(1)} }
@keyframes urgentPulse { 0%,100%{opacity:1} 50%{opacity:.65} }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  UI DESIGN v2 — FINAL COMPREHENSIVE POLISH                      ║
   ║  يُلغي ويُعيد تعريف كل ما سبقه — Single Source of Truth        ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════════
   §0 — CLEAN DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* Colors — exactly 1 primary, 1 secondary, 1 accent */
  --v2-red:     #FF3B3B;
  --v2-red-d:   #E53030;
  --v2-red-l:   #FF6B6B;
  --v2-red-bg:  rgba(255,59,59,.07);
  --v2-gold:    #FFB800;
  --v2-green:   #1DB954;
  --v2-orange:  #FF7A00;
  --v2-purple:  #6C3DD6;

  /* Surfaces */
  --v2-white:   #FFFFFF;
  --v2-bg:      #F4F4F4;
  --v2-card:    #FFFFFF;
  --v2-border:  #EBEBEB;

  /* Text */
  --v2-t1: #111111;
  --v2-t2: #555555;
  --v2-t3: #999999;

  /* Typography scale */
  --v2-fs10: 10px; --v2-fs11: 11px; --v2-fs12: 12px;
  --v2-fs13: 13px; --v2-fs14: 14px; --v2-fs16: 16px;
  --v2-fs18: 18px; --v2-fs20: 20px; --v2-fs22: 22px;

  /* 8-pt spacing */
  --v2-sp1: 4px;  --v2-sp2: 8px;  --v2-sp3: 12px;
  --v2-sp4: 16px; --v2-sp5: 20px; --v2-sp6: 24px; --v2-sp8: 32px;

  /* Radius */
  --v2-r4:  4px;  --v2-r6:  6px;  --v2-r8:  8px;
  --v2-r10: 10px; --v2-r12: 12px; --v2-r16: 16px; --v2-r99: 999px;

  /* Shadows */
  --v2-sh0: none;
  --v2-sh1: 0 1px 4px rgba(0,0,0,.06);
  --v2-sh2: 0 4px 16px rgba(0,0,0,.1);
  --v2-sh3: 0 8px 28px rgba(0,0,0,.14);
  --v2-sh-red: 0 4px 18px rgba(255,59,59,.32);

  /* Transitions */
  --v2-t-fast: .15s ease;
  --v2-t-med:  .22s ease;
  --v2-t-slow: .35s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   §1 — BASE
   ═══════════════════════════════════════════════════════════════════ */
body { background: var(--v2-bg); color: var(--v2-t1); font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════
   §2 — HERO (clean, breathable, 2-CTA)
   ═══════════════════════════════════════════════════════════════════ */
.ch-hero-wrap { overflow: hidden; position: relative; }
.ch-hero-slide-bg {
  filter: brightness(.22) saturate(1.2);
  background-position: center 40%;
  transition: transform 8s ease;
}
.ch-hero-slide.active .ch-hero-slide-bg { transform: scale(1.04); }

.ch-hero-slide-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: 360px;
  align-items: center;
  position: relative; z-index: 1;
}
@media (max-width: 900px) {
  .ch-hero-slide-inner { grid-template-columns: 1fr; min-height: 270px; }
}

.ch-hero-content { padding: 52px 40px 52px 0; }
@media (max-width: 900px) { .ch-hero-content { padding: 36px 20px; } }
@media (max-width: 540px) { .ch-hero-content { padding: 28px 16px; } }

.ch-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.13); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--v2-r99);
  color: #fff; padding: 6px 16px; font-size: 12px; font-weight: 700;
  letter-spacing: .4px; margin-bottom: 18px;
}
.ch-hero-title {
  font-size: clamp(26px, 4vw, 46px); font-weight: 900;
  color: #fff; line-height: 1.15; margin-bottom: 14px;
  letter-spacing: -.5px;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.ch-hero-title span { color: var(--v2-gold); display: block; }
.ch-hero-sub {
  font-size: 15px; color: rgba(255,255,255,.75);
  margin-bottom: 28px; line-height: 1.7; max-width: 420px;
}
.ch-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.ch-btn-lg { padding: 14px 30px; font-size: 15px; font-weight: 800; border-radius: var(--v2-r99); }

.ch-btn-primary {
  background: var(--v2-red); color: #fff; border: none;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: all var(--v2-t-med); box-shadow: var(--v2-sh-red);
  font-weight: 800;
}
.ch-btn-primary:hover {
  background: var(--v2-red-d); transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(255,59,59,.42);
}
.ch-btn-ghost {
  background: rgba(255,255,255,.1); backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.32); color: #fff;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: all var(--v2-t-med); font-weight: 700;
}
.ch-btn-ghost:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.6); }

.ch-hero-img-area { height: 360px; overflow: hidden; position: relative; }
.ch-hero-img-area img {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: luminosity; opacity: .82;
}
@media (max-width: 900px) { .ch-hero-img-area { display: none; } }

.ch-hero-dots {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%); display: flex; gap: 7px; z-index: 10;
}
.ch-hero-dot {
  width: 7px; height: 7px; border-radius: var(--v2-r99);
  background: rgba(255,255,255,.3); cursor: pointer;
  transition: all .25s; border: none; padding: 0;
}
.ch-hero-dot.active { width: 26px; background: #fff; }

.ch-hero-prev,.ch-hero-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.1); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.15); color: #fff;
  width: 42px; height: 42px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 20px; z-index: 10; transition: all .22s;
}
.ch-hero-prev:hover,.ch-hero-next:hover { background: rgba(255,255,255,.22); }
.ch-hero-prev { right: 16px; } .ch-hero-next { left: 16px; }
@media (max-width: 640px) { .ch-hero-prev,.ch-hero-next { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   §3 — TRUST STRIP
   ═══════════════════════════════════════════════════════════════════ */
.ch-trust-strip {
  background: var(--v2-white); border: 1px solid var(--v2-border);
  border-radius: var(--v2-r12); padding: var(--v2-sp4) var(--v2-sp5);
  display: grid; grid-template-columns: repeat(4,1fr); gap: var(--v2-sp3);
  margin: var(--v2-sp4) 0; box-shadow: var(--v2-sh1);
}
@media (max-width: 580px) {
  .ch-trust-strip { grid-template-columns: repeat(2,1fr); padding: var(--v2-sp3); }
}
.ch-trust-item  { display: flex; align-items: center; gap: var(--v2-sp3); }
.ch-trust-icon  {
  width: 40px; height: 40px; flex-shrink: 0;
  background: #FFF4F4; border-radius: var(--v2-r8);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.ch-trust-text strong { display: block; font-size: 13px; font-weight: 800; line-height: 1.3; }
.ch-trust-text span   { font-size: 11px; color: var(--v2-t3); }

/* ═══════════════════════════════════════════════════════════════════
   §4 — QUICK CATEGORIES
   ═══════════════════════════════════════════════════════════════════ */
.ch-quick-cats-scroll {
  display: flex; gap: var(--v2-sp3); overflow-x: auto;
  padding: var(--v2-sp3) 0 var(--v2-sp2); 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: 70px; text-decoration: none;
  transition: transform var(--v2-t-med);
}
.ch-quick-cat:hover { transform: translateY(-4px); }
.ch-quick-cat-icon {
  width: 62px; height: 62px; border-radius: var(--v2-r12);
  background: var(--v2-white); border: 1.5px solid var(--v2-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; transition: all var(--v2-t-med); box-shadow: var(--v2-sh1);
}
.ch-quick-cat:hover .ch-quick-cat-icon {
  border-color: var(--v2-red); box-shadow: 0 4px 14px rgba(255,59,59,.2);
  background: #FFF8F8;
}
.ch-quick-cat-name { font-size: 11px; font-weight: 700; color: var(--v2-t2); text-align: center; line-height: 1.3; }
.ch-quick-cat:hover .ch-quick-cat-name { color: var(--v2-red); }
.ch-qcat-all {
  background: linear-gradient(135deg, var(--v2-red), var(--v2-orange)) !important;
  border-color: transparent !important; color: #fff !important; font-size: 20px !important;
}
@media (max-width: 640px) {
  .ch-quick-cat-icon { width: 52px; height: 52px; font-size: 22px; }
  .ch-quick-cat { min-width: 58px; }
}

/* ═══════════════════════════════════════════════════════════════════
   §5 — SECTION HEADERS
   ═══════════════════════════════════════════════════════════════════ */
.ch-sec { margin-top: var(--v2-sp6); padding-bottom: 0; }
.ch-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--v2-sp4); padding-bottom: var(--v2-sp3);
  border-bottom: 2px solid #EFEFEF;
}
.ch-sec-title {
  font-size: 19px; font-weight: 900; color: var(--v2-t1);
  display: flex; align-items: center; gap: var(--v2-sp2); letter-spacing: -.3px;
}
.ch-sec-title::before {
  content: ''; display: inline-block; width: 4px; height: 20px;
  background: var(--v2-red); border-radius: var(--v2-r99); flex-shrink: 0;
}
.ch-sec-title span { font-size: 20px; line-height: 1; }
.ch-sec-link {
  font-size: 12px; font-weight: 700; color: var(--v2-red);
  background: var(--v2-red-bg); padding: 6px 14px;
  border-radius: var(--v2-r99); transition: all var(--v2-t-fast); white-space: nowrap;
}
.ch-sec-link:hover { background: var(--v2-red); color: #fff; }
@media (max-width: 640px) {
  .ch-sec { margin-top: var(--v2-sp5); }
  .ch-sec-title { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   §6 — PRODUCT CARDS (Final Design — Premium)
   ═══════════════════════════════════════════════════════════════════ */
.ch-card {
  background: var(--v2-card); border-radius: var(--v2-r12);
  overflow: hidden; border: 1px solid #EDEDED;
  box-shadow: var(--v2-sh1); transition: all var(--v2-t-med);
  display: flex; flex-direction: column; position: relative;
}
.ch-card:hover {
  box-shadow: var(--v2-sh2); border-color: #DEDEDE;
  transform: translateY(-3px);
}

/* — Image ——————————————————————————————————————————————————————— */
.ch-card-img {
  display: block; position: relative;
  aspect-ratio: 1 / 1; overflow: hidden;
  background: #F8F8F8; flex-shrink: 0;
}
.ch-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.ch-card:hover .ch-card-img img { transform: scale(1.07); }

/* — Overlay actions (top-left hover) ───────────────────────────── */
.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: all var(--v2-t-med);
}
.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,.96); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.14); transition: all var(--v2-t-fast);
}
.ch-act-btn:hover, .ch-card-act-btn:hover {
  background: #fff; transform: scale(1.12); box-shadow: 0 3px 12px rgba(0,0,0,.2);
}

/* Quick view bar */
.ch-card-qv {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(17,17,17,.78); color: #fff;
  font-size: 12px; font-weight: 700; padding: 9px; text-align: center;
  opacity: 0; transform: translateY(6px); transition: all var(--v2-t-med);
  cursor: pointer; border: none; width: 100%;
}
.ch-card:hover .ch-card-qv { opacity: 1; transform: translateY(0); }

/* — Badges ──────────────────────────────────────────────────────── */
.ch-badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; font-weight: 800; padding: 3px 8px;
  border-radius: var(--v2-r4); color: #fff; z-index: 2;
  line-height: 1.5; letter-spacing: .3px; white-space: nowrap;
}
.ch-badge-sale, .ch-badge.sale    { background: var(--v2-red); }
.ch-badge-trend, .ch-badge.hot   { background: var(--v2-orange); }
.ch-badge-best, .ch-badge.feat   { background: var(--v2-purple); }
.ch-badge-new, .ch-badge.new     { background: var(--v2-green); }
.ch-badge-deal                    { background: #E65100; }
.ch-badge.viral                   { background: #E91E63; }

/* — Card body ───────────────────────────────────────────────────── */
.ch-card-body {
  padding: 10px 10px 12px;
  flex: 1; display: flex; flex-direction: column;
}
/* Product name — 2 lines */
.ch-card-name, .ch-card-title {
  font-size: 12.5px; color: var(--v2-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: 5px; text-decoration: none;
  transition: color var(--v2-t-fast); flex: 1;
}
.ch-card-name:hover, .ch-card-title:hover { color: var(--v2-red); }

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

/* Price row */
.ch-card-price {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap; margin-bottom: 5px;
}
.ch-pnew, .ch-card-price b {
  font-size: 17px !important; font-weight: 900 !important;
  color: var(--v2-red) !important; line-height: 1;
}
.ch-pold, .ch-old {
  font-size: 11px; color: #BBBBBB !important;
  text-decoration: line-through; font-style: normal;
}
.ch-pdis {
  font-size: 10px; font-weight: 800; color: var(--v2-red);
  background: rgba(255,59,59,.1); border-radius: var(--v2-r4);
  padding: 1px 5px; font-style: normal; letter-spacing: .2px;
}

/* Psychological triggers */
.ch-psych {
  font-size: 10.5px; color: var(--v2-t3);
  margin-bottom: 5px; display: flex; align-items: center; gap: 3px;
  min-height: 16px;
}
.ch-psych-hot    { color: var(--v2-red); font-weight: 700; }
.ch-psych-urgent { color: #D84315; font-weight: 700; }
@keyframes psych-pulse { 0%,100%{opacity:1} 50%{opacity:.65} }
.ch-psych-urgent { animation: psych-pulse 2s infinite; }

/* — ATC + Wishlist buttons (FINAL PREMIUM DESIGN) ─────────────── */
.ch-card-foot, .ch-card-btns {
  display: flex; gap: 6px; margin-top: auto; padding-top: 7px;
}

/* Add to Cart button */
.ch-atc-btn,
.ch-card-btns button:first-child {
  flex: 1; min-width: 0;
  background: var(--v2-red); color: #fff; border: none;
  border-radius: var(--v2-r8); padding: 9px 8px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all var(--v2-t-med); white-space: nowrap;
  line-height: 1; display: flex; align-items: center;
  justify-content: center; gap: 5px;
  box-shadow: 0 2px 8px rgba(255,59,59,.25);
  position: relative; overflow: hidden;
}
.ch-atc-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 60%);
  pointer-events: none;
}
.ch-atc-btn:hover,
.ch-card-btns button:first-child:hover {
  background: var(--v2-red-d); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255,59,59,.38);
}
.ch-atc-btn:active,
.ch-card-btns button:first-child:active {
  transform: scale(.97); box-shadow: none;
}
/* Success state */
.ch-atc-btn.added {
  background: var(--v2-green) !important; box-shadow: 0 2px 8px rgba(29,185,84,.3) !important;
}
@keyframes atc-bounce { 0%,100%{transform:scale(1)} 40%{transform:scale(1.08)} 60%{transform:scale(.96)} }
.ch-atc-btn.bounce { animation: atc-bounce .4s ease; }

/* Wishlist heart button */
.ch-wish-icon,
.ch-card-btns button:last-child {
  background: #F5F5F5; border: 1.5px solid #E8E8E8;
  border-radius: var(--v2-r8); width: 36px; height: 36px;
  min-width: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--v2-t-fast);
  padding: 0; position: relative;
}
.ch-wish-icon svg,
.ch-card-btns button:last-child svg { stroke: #AAA; transition: all var(--v2-t-fast); }
.ch-wish-icon:hover,
.ch-card-btns button:last-child:hover {
  background: #FFF0F0; border-color: var(--v2-red-l);
}
.ch-wish-icon:hover svg,
.ch-card-btns button:last-child:hover svg { stroke: var(--v2-red); }
/* Wishlisted state */
.ch-wish-icon.wishlisted,
.ch-card-btns button:last-child.wishlisted {
  background: #FFF0F0; border-color: var(--v2-red);
}
.ch-wish-icon.wishlisted svg,
.ch-card-btns button:last-child.wishlisted svg {
  stroke: var(--v2-red); fill: var(--v2-red);
}
@keyframes heart-pop { 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} }
.ch-wish-icon.pop svg,
.ch-card-btns button:last-child.pop svg { animation: heart-pop .35s ease; }

/* no-img placeholder */
.ch-no-img {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; background: #F5F5F5; min-height: 160px;
}

/* ═══════════════════════════════════════════════════════════════════
   §7 — FLASH SALE
   ═══════════════════════════════════════════════════════════════════ */
.ch-flash {
  background: linear-gradient(135deg, #1A0808 0%, #2C0F0F 60%, #1A0808 100%);
  border-radius: var(--v2-r16); overflow: hidden;
  margin-bottom: var(--v2-sp5); box-shadow: 0 4px 24px rgba(0,0,0,.22);
}
.ch-flash-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--v2-sp4) var(--v2-sp5); flex-wrap: wrap; gap: var(--v2-sp3);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ch-flash-left { display: flex; align-items: center; gap: var(--v2-sp3); }
.ch-flash-bolt { font-size: 28px; line-height: 1; }
@keyframes bolt-pulse { 0%,100%{transform:scale(1)rotate(0)} 50%{transform:scale(1.2)rotate(-10deg)} }
.ch-flash-bolt { animation: bolt-pulse 1.8s ease-in-out infinite; }
.ch-flash-title { font-size: 19px; font-weight: 900; color: #fff; letter-spacing: -.3px; }
.ch-flash-ends  { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 2px; }
.ch-cdn {
  font-family: 'Courier New',monospace; font-weight: 900;
  color: var(--v2-gold); font-size: 14px; letter-spacing: 1px;
}
.ch-flash-link {
  color: var(--v2-gold); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
  transition: color var(--v2-t-fast);
}
.ch-flash-link:hover { color: #fff; }

/* Flash grid */
.ch-flash-grid {
  display: grid; grid-template-columns: repeat(6,1fr);
  gap: 1px; background: rgba(255,255,255,.04);
}
@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: var(--v2-white); display: block; text-decoration: none;
  position: relative; overflow: hidden; transition: var(--v2-t-med);
}
.ch-flash-card:hover { z-index: 2; box-shadow: 0 6px 24px rgba(0,0,0,.22); }
.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); }

/* Discount pill */
.ch-flash-disc {
  position: absolute; top: 7px; right: 7px;
  background: var(--v2-red); color: #fff;
  font-size: 10px; font-weight: 800; padding: 2px 7px;
  border-radius: var(--v2-r4); z-index: 2; line-height: 1.6;
}
/* Hot badge */
.ch-flash-top {
  position: absolute; bottom: 6px; left: 6px;
  background: var(--v2-gold); color: #1A1A1A;
  font-size: 9px; font-weight: 900; padding: 2px 7px;
  border-radius: var(--v2-r99); line-height: 1.6;
}
.ch-flash-hot { outline: 2px solid rgba(255,184,0,.4); }

/* Flash info */
.ch-flash-info { padding: 8px 9px 11px; }
.ch-flash-name {
  font-size: 11.5px; color: var(--v2-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-bottom: 5px; }
.ch-flash-price-now { font-size: 15px; font-weight: 900; color: var(--v2-red); }
.ch-flash-price-old { font-size: 10px; color: #AAA; text-decoration: line-through; }
.ch-flash-bar  { height: 4px; background: rgba(0,0,0,.08); border-radius: var(--v2-r99); overflow: hidden; }
.ch-flash-bar-fill, .ch-flash-fill { height: 100%; background: linear-gradient(90deg, var(--v2-orange), var(--v2-red)); border-radius: var(--v2-r99); }
.ch-flash-sold { font-size: 10px; color: rgba(0,0,0,.4); margin-top: 3px; }

/* ═══════════════════════════════════════════════════════════════════
   §8 — MINI BANNERS
   ═══════════════════════════════════════════════════════════════════ */
.ch-mini-banners {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: var(--v2-sp3); padding: var(--v2-sp3) 0;
}
@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(--v2-r16); display: flex; align-items: center;
  gap: var(--v2-sp3); padding: 16px 18px; text-decoration: none;
  overflow: hidden; position: relative; transition: all var(--v2-t-med);
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.ch-mini-banner::before {
  content: ''; position: absolute; top: -30px; left: -30px;
  width: 100px; height: 100px; background: rgba(255,255,255,.07); border-radius: 50%;
}
.ch-mini-banner:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.ch-mini-banner-icon  { font-size: 28px; flex-shrink: 0; z-index: 1; }
.ch-mini-banner-title { font-size: 14px; font-weight: 900; color: #fff; line-height: 1.2; z-index: 1; }
.ch-mini-banner-sub   { font-size: 11px; color: rgba(255,255,255,.8); margin-top: 2px; z-index: 1; }
.ch-mini-banner-text  { z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════
   §9 — WHY CHINAHUB
   ═══════════════════════════════════════════════════════════════════ */
.ch-why-sec { background: linear-gradient(135deg,#171717,#2A0C0C); padding: var(--v2-sp8) 0; margin-top: var(--v2-sp6); }
.ch-why-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(175px,1fr)); gap: var(--v2-sp4);
}
.ch-why-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--v2-r12); padding: var(--v2-sp5); text-align: center;
  transition: background var(--v2-t-med);
}
.ch-why-card:hover { background: rgba(255,59,59,.12); border-color: rgba(255,59,59,.2); }
.ch-why-icon { font-size: 28px; margin-bottom: var(--v2-sp2); }
.ch-why-ttl  { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: var(--v2-sp1); }
.ch-why-sub  { font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.6; }
@media (max-width: 640px) { .ch-why-grid { grid-template-columns: repeat(2,1fr); } }

/* ═══════════════════════════════════════════════════════════════════
   §10 — REVIEWS
   ═══════════════════════════════════════════════════════════════════ */
.ch-reviews-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--v2-sp4);
}
@media (max-width: 900px) { .ch-reviews-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .ch-reviews-grid { grid-template-columns: 1fr; } }
.ch-review-card {
  background: var(--v2-white); border: 1px solid var(--v2-border);
  border-radius: var(--v2-r12); padding: var(--v2-sp4);
  transition: box-shadow var(--v2-t-med);
}
.ch-review-card:hover { box-shadow: var(--v2-sh2); }
.ch-review-head   { display: flex; align-items: center; gap: var(--v2-sp3); margin-bottom: var(--v2-sp3); }
.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-weight: 700; font-size: 13px; color: var(--v2-t1); }
.ch-review-loc    { font-size: 11px; color: var(--v2-t3); margin-top: 1px; }
.ch-review-stars  { margin-right: auto; font-size: 13px; color: #FFB800; line-height: 1; }
.ch-review-text   { font-size: 13px; color: var(--v2-t2); line-height: 1.7; margin-bottom: var(--v2-sp2); font-style: italic; }
.ch-review-footer { font-size: 11px; color: var(--v2-t3); }

/* ═══════════════════════════════════════════════════════════════════
   §11 — STATS
   ═══════════════════════════════════════════════════════════════════ */
.ch-stats-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: var(--v2-sp3); margin: var(--v2-sp3) 0;
}
@media (max-width: 600px) { .ch-stats-row { grid-template-columns: repeat(2,1fr); } }
.ch-stat-box {
  background: var(--v2-white); border-radius: var(--v2-r12);
  padding: var(--v2-sp5) var(--v2-sp4); text-align: center;
  border: 1px solid var(--v2-border); box-shadow: var(--v2-sh1);
  transition: transform var(--v2-t-fast);
}
.ch-stat-box:hover { transform: translateY(-2px); }
.ch-stat-num { font-size: 27px; font-weight: 900; color: var(--v2-red); line-height: 1; }
.ch-stat-lbl { font-size: 12px; color: var(--v2-t3); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════
   §12 — CTA SECTION
   ═══════════════════════════════════════════════════════════════════ */
.ch-cta-sec {
  background: linear-gradient(135deg, var(--v2-red) 0%, #FF6B00 100%);
  border-radius: var(--v2-r16); padding: 52px 32px; text-align: center;
  margin-bottom: 24px; position: relative; overflow: hidden;
}
.ch-cta-sec::before { content:''; position:absolute; top:-50px; right:-50px; width:200px; height:200px; background:rgba(255,255,255,.07); border-radius:50%; }
.ch-cta-sec::after  { content:''; position:absolute; bottom:-60px; left:-20px; width:240px; height:240px; background:rgba(255,255,255,.05); border-radius:50%; }
@media (max-width: 640px) { .ch-cta-sec { padding: 36px 20px; } }
.ch-cta-sec h2 { font-size: clamp(20px,3vw,34px); font-weight:900; color:#fff; margin-bottom:10px; position:relative; }
.ch-cta-sec p  { font-size:15px; color:rgba(255,255,255,.88); margin-bottom:26px; max-width:480px; margin-left:auto; margin-right:auto; position:relative; }
.ch-cta-btns   { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative; }
.ch-btn-white  { background:#fff; color:var(--v2-red); font-weight:800; }
.ch-btn-white:hover { background:var(--v2-t1); color:#fff; }
.ch-btn-dark   { background:rgba(0,0,0,.25); backdrop-filter:blur(4px); color:#fff; border:1.5px solid rgba(255,255,255,.3); font-weight:700; }
.ch-btn-dark:hover { background:rgba(0,0,0,.4); }

/* ═══════════════════════════════════════════════════════════════════
   §13 — PRODUCT GRID
   ═══════════════════════════════════════════════════════════════════ */
.ch-grid {
  display: grid; grid-template-columns: repeat(6,1fr); gap: var(--v2-sp3);
}
@media (max-width: 1100px) { .ch-grid { grid-template-columns: repeat(5,1fr); } }
@media (max-width:  900px) { .ch-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width:  680px) { .ch-grid { grid-template-columns: repeat(3,1fr); gap: var(--v2-sp2); } }
@media (max-width:  460px) { .ch-grid { grid-template-columns: repeat(2,1fr); gap: var(--v2-sp2); } }

/* ═══════════════════════════════════════════════════════════════════
   §14 — MOBILE NAV
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { padding-bottom: 72px; }
  .ch-mobile-bottom-nav {
    background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
    box-shadow: 0 -1px 0 rgba(0,0,0,.07), 0 -4px 20px rgba(0,0,0,.08);
  }
  /* Mobile card tweaks */
  .ch-card-name, .ch-card-title { font-size: 12px; min-height: 34px; }
  .ch-pnew, .ch-card-price b    { font-size: 15px !important; }
  .ch-atc-btn, .ch-card-btns button:first-child { font-size: 11px; padding: 8px 5px; }
  .ch-flash-grid { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 380px) {
  .ch-grid { grid-template-columns: repeat(2,1fr) !important; }
  .ch-flash-grid { grid-template-columns: repeat(2,1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   §15 — ANIMATIONS (single declaration, no duplicates)
   ═══════════════════════════════════════════════════════════════════ */
@keyframes pulse     { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
@keyframes blink     { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes slideUp   { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes ping      { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }

/* ═══════════════════════════════════════════════════════════════════
   §16 — JS INTERACTIVITY HELPERS
   ═══════════════════════════════════════════════════════════════════ */
/* Cart toast animation */
.ch-toast { animation: slideUp .22s ease; }
.ch-toast.success { border-right-color: var(--v2-green); }

/* Loading state for ATC */
.ch-atc-btn.loading {
  pointer-events: none; opacity: .75;
  background: #999 !important; box-shadow: none !important;
}

/* Wishlist loading */
.ch-wish-icon.loading { pointer-events: none; opacity: .6; }


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  HEADER FIX — Missing CSS Classes (nav.php requirements)        ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── Header inner layout ─────────────────────────────────────────── */
.ch-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  width: 100%;
}

/* ── Logo ────────────────────────────────────────────────────────── */
.ch-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  gap: 4px;
}
.ch-logo img { height: 36px; width: auto; }
.ch-logo-text {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.5px;
}
.ch-logo-china { color: var(--pr, #FF4747); }
.ch-logo-hub   { color: var(--t1, #1A1A1A); }

/* ── Search form ─────────────────────────────────────────────────── */
.ch-search-form {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* ── Actions row ─────────────────────────────────────────────────── */
.ch-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Hamburger ───────────────────────────────────────────────────── */
.ch-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: background 0.18s;
}
.ch-hamburger:hover { background: var(--pr-bg, rgba(255,71,71,.08)); }
.ch-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--t1, #1A1A1A);
  border-radius: 2px;
  transition: all 0.22s ease;
}
@media (max-width: 900px) { .ch-hamburger { display: flex; } }

/* ── Hide on mobile ──────────────────────────────────────────────── */
.ch-hide-mobile {
  display: flex !important;
}
@media (max-width: 768px) {
  .ch-hide-mobile { display: none !important; }
}

/* ── Header responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .ch-header-inner { gap: 8px; }
  .ch-cat-nav { display: none; }
}
@media (max-width: 640px) {
  .ch-header-inner { height: 52px; }
  .ch-logo-text { font-size: 17px; }
  .ch-search-wrap { height: 38px; }
  .ch-search-input { font-size: 13px; padding: 0 10px; }
  .ch-search-btn { padding: 0 12px; }
  .ch-search-cat { display: none; }
}

/* ── Header action icons: ensure labels visible ──────────────────── */
.ch-header-action {
  position: relative;
  width: 42px; height: 42px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  color: var(--t2, #555);
  border-radius: 8px;
  transition: all 0.18s;
  cursor: pointer;
  border: none;
  background: transparent;
  text-decoration: none;
  flex-shrink: 0;
}
.ch-header-action:hover { color: var(--pr, #FF4747); background: var(--pr-bg, rgba(255,71,71,.08)); }
.ch-header-action-label { font-size: 9px; color: var(--t3, #999); line-height: 1; white-space: nowrap; }

/* Cart button special */
.ch-cart-action {
  background: var(--pr, #FF4747) !important;
  color: #fff !important;
  border-radius: 10px !important;
}
.ch-cart-action:hover { background: var(--pr-d, #E53935) !important; }
.ch-cart-action .ch-header-action-label { color: rgba(255,255,255,.85) !important; }
.ch-cart-count {
  position: absolute; top: -3px; left: -3px;
  background: #fff; color: var(--pr, #FF4747);
  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, #FF4747);
  line-height: 1;
}

/* ── Topbar clean ────────────────────────────────────────────────── */
.ch-topbar { background: #111; height: 36px; font-size: 11.5px; color: #AAA; }
.ch-topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.ch-topbar-start, .ch-topbar-end { display: flex; align-items: center; gap: 16px; }
.ch-topbar-link { color: #AAA; display: flex; align-items: center; gap: 4px; white-space: nowrap; transition: color .18s; text-decoration: none; }
.ch-topbar-link:hover { color: #fff; }
@media (max-width: 640px) { .ch-topbar { display: none; } }

/* ── Category nav clean ──────────────────────────────────────────── */
.ch-cat-nav { background: #fff; border-top: 1px solid #F2F2F2; border-bottom: 1px solid #EBEBEB; }
.ch-cat-nav-list { display: flex; list-style: none; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.ch-cat-nav-list::-webkit-scrollbar { display: none; }
.ch-cat-nav-list li a {
  display: flex; align-items: center; gap: 5px;
  padding: 9px 13px; font-size: 13px; font-weight: 600;
  color: var(--t2, #555); border-bottom: 2px solid transparent;
  transition: all .18s; white-space: nowrap; text-decoration: none;
}
.ch-cat-nav-list li a:hover { color: var(--pr, #FF4747); border-bottom-color: var(--pr, #FF4747); }
.ch-cat-nav-all { color: var(--pr, #FF4747) !important; font-weight: 700 !important; }
.ch-deals-link  { color: #FF8C00 !important; font-weight: 700 !important; }

/* ── Lang dropdown fix ───────────────────────────────────────────── */
.ch-lang-switch { position: relative; }
.ch-lang-btn {
  background: none; border: 1px solid #444; border-radius: 6px;
  color: #BBB; cursor: pointer; padding: 3px 10px;
  display: flex; align-items: center; gap: 5px; font-size: 11.5px;
  transition: all .18s;
}
.ch-lang-btn:hover { border-color: #777; color: #fff; }
.ch-lang-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: #fff; border: 1px solid #EBEBEB;
  border-radius: 10px; min-width: 150px;
  box-shadow: 0 4px 20px rgba(0,0,0,.12); z-index: 400;
  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: #1A1A1A;
  transition: background .15s; text-decoration: none;
}
.ch-lang-opt:hover, .ch-lang-opt.active { background: rgba(255,71,71,.07); color: #FF4747; }

/* ── Mobile menu panel ───────────────────────────────────────────── */
.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: -310px; width: 290px; height: 100%;
  background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.15);
  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 #F0F0F0; background: #111;
}
.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 #EBEBEB; border-radius: 99px; font-size: 14px;
  background: #fff; margin: 12px 16px; display: block;
  font-family: inherit;
}
.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 #F5F5F5; color: #1A1A1A;
  text-decoration: none; transition: background .15s;
}
.ch-mobile-nav a:hover { background: #FFF5F5; color: #FF4747; }
.ch-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.52); z-index: 999; display: none; }

/* ── RTL Slider Direction Fix ────────────────────────────────────── */
/* Force LTR on slider track so translateX works correctly in RTL pages */
.ch-hero-slider-track {
  direction: ltr;
  display: flex;
  transition: transform .65s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.ch-hero-slide {
  min-width: 100%;
  position: relative;
  direction: rtl; /* restore RTL for content inside each slide */
}

/* ── Card grid: ensure proper display in all sections ───────────── */
.ch-grid {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 12px;
}
@media (max-width:1100px){.ch-grid{grid-template-columns:repeat(5,1fr)}}
@media (max-width:900px) {.ch-grid{grid-template-columns:repeat(4,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}}

/* ── Flash Sale grid mobile override ────────────────────────────── */
@media (max-width:640px) {
  .ch-flash-grid { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width:400px) {
  .ch-flash-grid { grid-template-columns: repeat(2,1fr) !important; }
}

/* ╔════════════════════════════════════════════════════════════════╗
   ║  INDEX V2 — Complete New Component CSS                         ║
   ║  Classes used in the rewritten index.php                       ║
   ╚════════════════════════════════════════════════════════════════╝ */

/* ─── RESET animations ─────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulseScale { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }

/* ════════════════════════════════════════════════════════════════
   HERO  ─ Clean 2-column layout
════════════════════════════════════════════════════════════════ */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 24px;
  min-height: 420px;
  padding: 48px 0 44px;
  direction: rtl;
}
.hero-text { z-index: 2; position: relative; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.15); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 14px; border-radius: 99px;
  margin-bottom: 16px; letter-spacing: .3px;
}
.hero-h {
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 900; color: #fff; line-height: 1.2;
  margin: 0 0 12px; letter-spacing: -0.5px;
}
.hero-h span { color: #FFD600; display: block; }
.hero-p {
  font-size: clamp(13px, 1.6vw, 16px); color: rgba(255,255,255,.82);
  margin: 0 0 24px; line-height: 1.6;
}
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.hbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 13px 26px; border-radius: 12px; font-size: 15px;
  font-weight: 700; cursor: pointer; border: none;
  transition: all .2s; text-decoration: none; white-space: nowrap;
  font-family: inherit;
}
.hbtn-primary {
  background: #FF4747; color: #fff;
  box-shadow: 0 4px 18px rgba(255,71,71,.45);
}
.hbtn-primary:hover { background: #E53935; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(255,71,71,.5); }
.hbtn-ghost {
  background: rgba(255,255,255,.14); color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
}
.hbtn-ghost:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }

.hero-img {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 320px; overflow: hidden;
}
.hero-img img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

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

@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr; min-height: auto; padding: 30px 0 24px; gap: 16px; }
  .hero-img { height: 200px; border-radius: 12px; overflow: hidden; }
  .hero-h { font-size: 24px; }
  .hbtn { padding: 11px 20px; font-size: 14px; }
  .hero-arr { width: 32px; height: 32px; font-size: 18px; }
}

/* ════════════════════════════════════════════════════════════════
   TRUST BAR  ─ single compact row
════════════════════════════════════════════════════════════════ */
.trust-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 0; background: #fff; border-radius: 12px;
  border: 1px solid #EBEBEB; margin: 12px 0 0;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.trust-item {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 20px; font-size: 13px; font-weight: 600;
  color: #333; flex: 1; justify-content: center; white-space: nowrap;
}
.trust-item span:first-child { font-size: 18px; }
.trust-sep { width: 1px; height: 28px; background: #EBEBEB; flex-shrink: 0; }

@media (max-width: 600px) {
  .trust-bar { flex-wrap: wrap; border-radius: 10px; gap: 0; }
  .trust-item { flex: 1 1 45%; padding: 9px 12px; font-size: 12px; justify-content: flex-start; }
  .trust-sep:nth-child(4) { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   CATEGORIES SCROLL
════════════════════════════════════════════════════════════════ */
.cats-scroll {
  display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 8px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.cats-scroll::-webkit-scrollbar { display: none; }
.cat-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 64px; text-decoration: none; flex-shrink: 0;
  cursor: pointer; transition: transform .18s;
}
.cat-item:hover { transform: translateY(-3px); }
.cat-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: #fff; border: 1px solid #EBEBEB;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; transition: all .18s;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.cat-item:hover .cat-icon {
  border-color: #FF4747; background: rgba(255,71,71,.06);
  box-shadow: 0 3px 12px rgba(255,71,71,.2);
}
.cat-all .cat-icon { background: linear-gradient(135deg,#FF4747,#FF8C00); border-color: transparent; color: #fff; font-size: 20px; }
.cat-name { font-size: 11px; font-weight: 600; color: #555; text-align: center; line-height: 1.3; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════
   FLASH SALE
════════════════════════════════════════════════════════════════ */
.flash-wrap {
  background: linear-gradient(135deg, #1A0A00 0%, #2D1200 50%, #1A0A00 100%);
  border-radius: 16px; overflow: hidden; padding: 0 0 16px;
  box-shadow: 0 4px 24px rgba(255,71,71,.18);
}
.flash-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.flash-hd-l { display: flex; align-items: center; gap: 12px; }
.flash-bolt {
  font-size: 32px; animation: pulseScale 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,180,0,.6));
}
.flash-ttl { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: .5px; }
.flash-sub { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }
.flash-cd {
  display: inline-block; background: #FF4747; color: #fff;
  font-size: 16px; font-weight: 900; padding: 2px 6px; border-radius: 5px;
  font-variant-numeric: tabular-nums; min-width: 26px; text-align: center;
}
.flash-more {
  color: #FFB800; font-size: 13px; font-weight: 700;
  border: 1px solid rgba(255,184,0,.3); padding: 6px 14px;
  border-radius: 8px; text-decoration: none; white-space: nowrap;
  transition: all .18s;
}
.flash-more:hover { background: rgba(255,184,0,.12); }

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

.flash-card {
  flex-shrink: 0; width: 140px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  overflow: hidden; margin-left: 10px; text-decoration: none;
  transition: all .2s; cursor: pointer;
}
.flash-card:first-child { margin-right: 0; }
.flash-card:hover { transform: translateY(-3px); border-color: rgba(255,71,71,.4); background: rgba(255,255,255,.08); }
.flash-card-hot { width: 160px; border-color: rgba(255,71,71,.3); background: rgba(255,71,71,.08); }

.flash-img { position: relative; aspect-ratio: 1; overflow: hidden; }
.flash-img img { width: 100%; height: 100%; object-fit: cover; }
.flash-disc {
  position: absolute; top: 6px; right: 6px;
  background: #FF4747; color: #fff; font-size: 10px; font-weight: 900;
  padding: 2px 6px; border-radius: 5px; z-index: 2;
}
.flash-badge {
  position: absolute; bottom: 6px; left: 6px;
  background: rgba(0,0,0,.7); color: #FFB800; font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; backdrop-filter: blur(4px);
}
.flash-info { padding: 8px 8px 10px; }
.flash-name {
  font-size: 11px; color: rgba(255,255,255,.9); font-weight: 600;
  line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 5px;
}
.flash-prices { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.flash-now { font-size: 14px; font-weight: 900; color: #FF4747; }
.flash-old { font-size: 10px; color: rgba(255,255,255,.35); text-decoration: line-through; }
.flash-bar-wrap { display: flex; align-items: center; gap: 4px; }
.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,#FF4747,#FF8C00); border-radius: 99px; }
.flash-sold { font-size: 9px; color: rgba(255,255,255,.45); white-space: nowrap; }

@media (max-width: 480px) {
  .flash-card { width: 120px; }
  .flash-card-hot { width: 135px; }
}

/* ════════════════════════════════════════════════════════════════
   PRODUCT TABS
════════════════════════════════════════════════════════════════ */
.prd-tabs {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  border-bottom: 2px solid #F0F0F0; padding-bottom: 0; margin-bottom: 20px;
}
.prd-tab-btn {
  padding: 10px 18px; font-size: 14px; font-weight: 700; border: none;
  background: none; cursor: pointer; color: #888; border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: all .18s; white-space: nowrap; font-family: inherit;
}
.prd-tab-btn:hover { color: #FF4747; background: rgba(255,71,71,.05); }
.prd-tab-btn.active { color: #FF4747; border-bottom-color: #FF4747; background: rgba(255,71,71,.05); }
.prd-view-all {
  margin-right: auto; font-size: 13px; font-weight: 700; color: #FF4747;
  text-decoration: none; padding: 8px 14px;
  border: 1px solid rgba(255,71,71,.3); border-radius: 8px;
  transition: all .18s; white-space: nowrap;
}
.prd-view-all:hover { background: rgba(255,71,71,.07); }

.prd-tab-pane { display: none; animation: fadeInUp .25s ease; }
.prd-tab-pane.active { display: block; }

/* ════════════════════════════════════════════════════════════════
   PRODUCT GRID
════════════════════════════════════════════════════════════════ */
.prd-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { .prd-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .prd-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 560px)  { .prd-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* ════════════════════════════════════════════════════════════════
   PRODUCT CARD  ─ THE most important element
════════════════════════════════════════════════════════════════ */
.pc {
  background: #fff; border-radius: 14px; overflow: hidden;
  border: 1px solid #EBEBEB; transition: all .22s ease;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.pc:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  transform: translateY(-3px); border-color: #DDD;
}

/* Image area */
.pc-img {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 1 / 1; background: #F8F8F8; text-decoration: none;
  flex-shrink: 0;
}
.pc-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.pc:hover .pc-img img { transform: scale(1.06); }

/* Badge */
.cb {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-size: 10px; font-weight: 900; padding: 3px 7px; border-radius: 6px;
  letter-spacing: .2px; line-height: 1.3;
}
.cb-sale  { background: #FF4747; color: #fff; }
.cb-hot   { background: #FF8C00; color: #fff; }
.cb-best  { background: #7B2FBE; color: #fff; }
.cb-new   { background: #00B96B; color: #fff; }

/* Overlay hover buttons */
.pc-ov {
  position: absolute; top: 8px; left: 8px;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateX(-8px); transition: all .22s ease;
  z-index: 3;
}
.pc:hover .pc-ov { opacity: 1; transform: translateX(0); }
.pc-ov-btn {
  width: 32px; height: 32px; border-radius: 8px;
  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,.12); transition: all .18s;
}
.pc-ov-btn:hover { background: #FF4747; }
.pc-ov-btn:hover svg { stroke: #fff !important; }
.pc-ov-btn.wishlisted svg { fill: #FF4747; stroke: #FF4747 !important; }

/* Card body */
.pc-body {
  padding: 10px 11px 11px;
  display: flex; flex-direction: column; gap: 5px; flex: 1;
}
.pc-name {
  font-size: 13px; font-weight: 600; color: #1A1A1A;
  line-height: 1.4; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.pc-name:hover { color: #FF4747; }

/* Stars */
.pc-stars { display: flex; align-items: center; gap: 1px; font-size: 12px; }
.sf { color: #FFB800; font-style: normal; }
.sh { color: #FFB800; font-style: normal; opacity: .5; }
.se { color: #DDD; font-style: normal; }
.pc-rv { font-size: 11.5px; font-weight: 700; color: #555; margin-right: 3px; }
.pc-rc { font-size: 11px; color: #AAA; }

/* Price — PROMINENT */
.pc-price { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; margin: 2px 0; }
.cp-now {
  font-size: 18px; font-weight: 900; color: #FF4747; line-height: 1;
  font-style: normal;
}
.cp-old {
  font-size: 12px; color: #BBB; font-style: normal;
  text-decoration: line-through;
}
.cp-pct {
  font-size: 11px; font-weight: 800; color: #FF4747;
  background: rgba(255,71,71,.1); padding: 1px 5px; border-radius: 4px;
  font-style: normal;
}

/* Social proof */
.csoc {
  font-size: 11px; color: #666; font-weight: 600;
  display: flex; align-items: center; gap: 3px;
  padding: 2px 0;
}
.csoc.hot { color: #FF4747; }
.csoc.urg { color: #FF8C00; }

/* Footer: ATC + Wishlist */
.pc-foot {
  display: flex; gap: 6px; align-items: center; margin-top: auto; padding-top: 4px;
}
.pc-atc {
  flex: 1; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #FF4747, #FF6060);
  color: #fff; border: none; cursor: pointer; font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: all .2s; font-family: inherit; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(255,71,71,.3);
}
.pc-atc:hover { background: linear-gradient(135deg, #E53935, #FF4747); transform: translateY(-1px); box-shadow: 0 5px 15px rgba(255,71,71,.4); }
.pc-atc.loading { background: #999; pointer-events: none; }
.pc-atc.added { background: linear-gradient(135deg, #00B96B, #00D47E); box-shadow: 0 3px 10px rgba(0,185,107,.3); }

.pc-wl {
  width: 36px; height: 36px; border-radius: 10px;
  background: #F5F5F5; border: 1px solid #EBEBEB;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s; flex-shrink: 0;
}
.pc-wl:hover { border-color: #FF4747; background: rgba(255,71,71,.06); }
.pc-wl:hover svg { stroke: #FF4747 !important; }
.pc-wl.wishlisted { background: rgba(255,71,71,.08); border-color: #FF4747; }
.pc-wl.wishlisted svg { fill: #FF4747; stroke: #FF4747 !important; }

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

/* ════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
════════════════════════════════════════════════════════════════ */
#ch-toasts {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.ch-toast {
  background: #1A1A1A; color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 10px 20px; border-radius: 99px; white-space: nowrap;
  animation: fadeInUp .2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.ch-toast.success { background: #00B96B; }
.ch-toast.error   { background: #FF4747; }