/* ChinaHub — moved out of includes/sections/for-you.php so browsers keep it between pages (CH-SLIM v1) */
.chx{margin-top:14px;padding:12px 0 20px;background:#F5F5F6}
/* the striped orange bar — same family as the product page bars */
.chx-hd{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:14px;
  background:linear-gradient(100deg,#FF5A00 0%,#FB7701 60%,#FF9A3D 100%);box-shadow:0 6px 18px rgba(251,119,1,.22)}
.chx-hd::after{content:"";position:absolute;inset-inline-end:-10px;top:0;bottom:0;width:200px;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.14) 0 14px,transparent 14px 28px)}
.chx-ttl{position:relative;z-index:1;display:flex;align-items:center;gap:10px;min-width:0}
.chx-ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff;color:#FB7701;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.chx-ic svg{width:20px;height:20px}
.chx h2{margin:0;font-size:19px;font-weight:900;color:#fff;letter-spacing:-.2px;white-space:nowrap}
.chx-ttl p{margin:1px 0 0;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chx-all{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 13px;border-radius:999px;background:#fff;color:#E65100;font-size:13px;font-weight:900;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.12)}
/* tabs stay in reach while scrolling */
.chx-tabs{position:sticky;top:0;z-index:40;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0;margin-bottom:2px;background:#F5F5F6}
.chx-tabs::-webkit-scrollbar{display:none}
.chx-tab{flex:none;height:34px;padding:0 15px;border-radius:999px;border:1.5px solid #E8E8EB;background:#fff;color:#3A3F4A;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.chx-tab:hover{border-color:#FB7701;color:#E65100}
.chx-tab.on{background:#FB7701;border-color:#FB7701;color:#fff;box-shadow:0 4px 10px rgba(251,119,1,.28)}
/* 6 side by side on computers, like before */
#for-you-grid.chx-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important;background:none!important}
@media(max-width:1024px){#for-you-grid.chx-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media(max-width:880px){#for-you-grid.chx-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:680px){#for-you-grid.chx-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}}
@media(max-width:480px){#for-you-grid.chx-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
#for-you-grid.chx-grid > *{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(20,22,28,.05);animation:chxIn .35s ease both}
@keyframes chxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:980px){.chx-tabs{top:49px}html:has(.chv-tabs) .chx-tabs{top:91px}.chx{padding-top:10px}.chx-hd{border-radius:12px;padding:10px 12px}.chx h2{font-size:17px}.chx-ic{width:32px;height:32px}}
@media(max-width:400px){.chx-ttl p{display:none}}
.chx-skel{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:10px}
.chx-skel[hidden]{display:none}
.chx-skel i{display:block;aspect-ratio:3/4;border-radius:14px;background:linear-gradient(90deg,#EBEBED 25%,#F6F6F7 45%,#EBEBED 65%);background-size:200% 100%;animation:chxSk 1.1s linear infinite}
@media(max-width:1024px){.chx-skel{grid-template-columns:repeat(4,1fr)}.chx-skel i:nth-child(n+5){display:none}}
@media(max-width:480px){.chx-skel{grid-template-columns:repeat(2,1fr)}.chx-skel i:nth-child(n+3){display:none}}
@keyframes chxSk{0%{background-position:180% 0}100%{background-position:-80% 0}}
.chx-retry-w{text-align:center}
.chx-retry{display:inline-flex;align-items:center;gap:6px;margin:16px auto 2px;height:44px;padding:0 30px;border:1.5px solid #FB7701;border-radius:999px;background:#fff;color:#E65100;font:inherit;font-size:14.5px;font-weight:900;cursor:pointer;transition:background .15s,color .15s}
.chx-retry:hover{background:#FB7701;color:#fff}
.chx-retry[hidden]{display:none}
.chx-end{text-align:center;color:#6B7079;font-size:13.5px;font-weight:700;padding:18px 0 4px}
.chx-end a{color:#FB7701;text-decoration:none}
@media (prefers-reduced-motion:reduce){#for-you-grid.chx-grid > *{animation:none}.chx-skel i{animation:none}}
/* ═══ computer: one tidy white panel, slimmer bar, compact tabs, dense 6-up grid ═══ */
@media (min-width:981px){
  .chx{padding:14px 0 26px;background:none}
  .chx > .w{background:#fff;border:1px solid #EFEFF1;border-radius:16px;padding:12px 12px 16px;box-shadow:0 1px 2px rgba(20,22,28,.04)}
  .chx-hd{padding:8px 12px 8px 14px;border-radius:12px;box-shadow:none}
  .chx-ic{width:32px;height:32px;border-radius:10px}.chx-ic svg{width:18px;height:18px}
  .chx h2{font-size:17px}
  .chx-ttl{gap:9px}.chx-ttl > div{display:flex;align-items:baseline;gap:10px}
  .chx-ttl p{margin:0;font-size:12.5px}
  .chx-all{height:30px;font-size:12.5px}
  .chx-tabs{top:42px;background:#fff;padding:10px 0 8px;margin:0 0 4px;border-bottom:1px solid #F3F3F5;gap:4px}
  .chx-tab{height:30px;padding:0 13px;font-size:13px;border-width:1px;border-color:#ECECEE}
  #for-you-grid.chx-grid{gap:8px!important;margin-top:6px}
  #for-you-grid.chx-grid > *{border:1px solid #EFEFF1;border-radius:10px;box-shadow:none;transition:border-color .15s,box-shadow .15s,transform .15s}
  #for-you-grid.chx-grid > *:hover{border-color:#FFD2B0;box-shadow:0 8px 20px rgba(20,22,28,.08);transform:translateY(-2px)}
  /* denser cards: the per-card countdown / stock bars stay out of this feed */
  #for-you-grid .pc2-bar{display:none!important}
  #for-you-grid .pc2-body{padding-bottom:8px!important}
  .chx-skel{gap:8px}.chx-skel i{border-radius:10px}
}
@media (min-width:1500px){ .chx > .w{padding:14px 16px 18px} }

/* ═══════════ CH-DENSE v1 — «Explore more» on computers: a slimmer bar, the subtitle beside the title,
   smaller tabs, less space above the products ═══════════ */
@media (min-width:981px){
  .chx{padding:8px 0 22px!important;margin-top:4px!important}
  .chx > .w{padding:10px 10px 14px!important;border-radius:16px!important}
  .chx-hd{padding:6px 8px 6px 10px!important;border-radius:11px!important;min-height:0!important}
  .chx-hd::after{width:150px!important}
  .chx-ic{width:28px!important;height:28px!important;border-radius:8px!important}
  .chx-ic svg{width:16px!important;height:16px!important}
  .chx h2{font-size:16px!important}
  .chx-ttl p{font-size:12px!important}
  .chx-all{height:28px!important;padding:0 12px!important;font-size:12px!important}
  .chx-tabs{padding:8px 0 6px!important;gap:4px!important}
  .chx-tab{height:28px!important;padding:0 12px!important;font-size:12.5px!important}
  #for-you-grid.chx-grid{margin-top:4px!important}
}

/* ═══════════ CH-DENSE v2 — «Explore more» prettier: a rich orange bar with a soft light, a glass icon,
   a white «See all» pill whose arrow moves on hover, tabs as a calm segmented row ═══════════ */
@media (min-width:981px){
  .chx > .w{box-shadow:0 1px 2px rgba(20,22,28,.04),0 16px 32px -28px rgba(20,22,28,.25)!important}
  .chx-hd{background:linear-gradient(100deg,#F04E00 0%,#FF6A00 42%,#FF8A2A 100%)!important;box-shadow:0 10px 22px -16px rgba(240,78,0,.8)!important}
  .chx-hd::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(180px 70px at 8% 0%,rgba(255,255,255,.28),transparent 70%)}
  .chx-ic{background:rgba(255,255,255,.2)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)!important}
  .chx h2{letter-spacing:-.3px!important}
  .chx-all{transition:transform .2s,box-shadow .2s}
  .chx-all:hover{transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(0,0,0,.35)}
  .chx-tabs{border-bottom:0!important;padding:10px 0 8px!important}
  .chx-tab{background:#F6F6F8!important;border-color:transparent!important;color:#3A3F4A!important;transition:background .15s,color .15s,box-shadow .15s}
  .chx-tab:hover{background:#FFF1E6!important;color:#E65100!important}
  .chx-tab.on{background:linear-gradient(180deg,#FF7A1A,#F05A00)!important;color:#fff!important;box-shadow:0 6px 14px -8px rgba(240,90,0,.9)!important}
}