/* ChinaHub — moved out of includes/sections/desktop-categories.php so browsers keep it between pages (CH-SLIM v1) */
.dcat{position:relative;background:linear-gradient(180deg,#FFF8F2,#fff);border:1px solid #FBEADB;border-radius:16px;padding:14px 0 11px;margin:14px 0 0;overflow:hidden}
.dcat::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:linear-gradient(90deg,transparent,var(--or,#FF6A00) 25%,#FF8C2C 50%,var(--or,#FF6A00) 75%,transparent)}
@media(max-width:768px){.dcat{display:none}}              /* مخفي على الموبايل */

.dcat-w{max-width:1760px;margin:0 auto;padding:0 28px}
@media(min-width:2000px){.dcat-w{max-width:1920px}}

.dcat-hd{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dcat-hd .ic{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--or,#FF6A00),#FF8C2C);display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 4px 10px -3px rgba(255,106,0,.5);flex-shrink:0}
.dcat-hd .tx{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.dcat-hd .tx b{font-size:15px;font-weight:900;color:var(--ink,#2C2014);letter-spacing:-.2px}
.dcat-hd .tx small{font-size:10.5px;color:#A8998A;font-weight:600}
.dcat-hd .more{margin-inline-start:auto;flex-shrink:0;font-size:12px;font-weight:800;color:var(--or,#FF6A00);text-decoration:none;background:#FFF2E8;padding:6px 13px;border-radius:999px;transition:.15s}
.dcat-hd .more:hover{background:var(--or,#FF6A00);color:#fff}

.dcat-track{position:relative}
.dcat-scroll{display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 6px}
.dcat-scroll::-webkit-scrollbar{display:none}

/* الدائرة — 48px، إطار رفيع، خلفية بيضاء (أصغر) */
.dcat-it{flex-shrink:0;width:56px;display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:inherit;transition:transform .15s ease}
.dcat-it:hover{transform:translateY(-3px)}
.dcat-it .ci{width:48px;height:48px;border-radius:50%;background:#fff;border:2px dashed #FFC79A;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;box-shadow:0 3px 10px -6px rgba(255,106,0,.3);transition:border-color .2s,border-style .2s,box-shadow .2s}
.dcat-it:hover .ci{border-color:var(--or,#FF6A00);border-style:solid;box-shadow:0 8px 16px -6px rgba(255,106,0,.45)}
.dcat-it .ci img{width:100%;height:100%;object-fit:cover;display:block}
.dcat-it .ci .emo{font-size:22px;line-height:1}
.dcat-it .nm{font-size:10.5px;font-weight:800;color:var(--t2,#666);text-align:center;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56px}
.dcat-it:hover .nm{color:var(--or,#FF6A00);font-weight:800}
.dcat-it.all .ci{background:linear-gradient(135deg,var(--or,#FF6A00),#FF8C2C);border:none}
.dcat-it.all .ci .emo{color:#fff;font-weight:900;font-size:11px}

/* تابلت: أصغر شوي */
@media(max-width:1024px){
  .dcat-it{width:52px}.dcat-it .ci{width:44px;height:44px}
  .dcat-it .ci .emo{font-size:20px}.dcat-it .nm{max-width:52px}
}
/* شاشات كبيرة (≥1500px): دوائر مريحة بس مش كبيرة */
@media(min-width:1500px){
  .dcat-scroll{gap:22px}
  .dcat-it{width:68px;gap:8px}.dcat-it .ci{width:60px;height:60px}
  .dcat-it .ci .emo{font-size:28px}.dcat-it .nm{max-width:68px;font-size:11.5px}
  .dcat-it.all .ci .emo{font-size:13px}
}
/* شاشات كبيرة جداً (≥1900px) */
@media(min-width:1900px){
  .dcat-scroll{gap:26px}
  .dcat-it{width:76px}.dcat-it .ci{width:68px;height:68px}
  .dcat-it .ci .emo{font-size:32px}.dcat-it .nm{max-width:76px;font-size:12px}
  .dcat-it.all .ci .emo{font-size:15px}
}

/* أسهم — تخطيط flex مضمون (جنب الشريط، مستحيل تختفي) */
.dcat-track{position:relative;display:flex;align-items:center;gap:6px}
.dcat-scroll{flex:1;min-width:0}
.dcat-arr{flex-shrink:0;z-index:10;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(120,70,20,.2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#444;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s,background .2s,color .2s,transform .15s,border-color .2s}
/* تظهر لما تأشّر على الكونتينر */
.dcat:hover .dcat-arr{opacity:1;visibility:visible}
.dcat-arr:active{transform:scale(.9)}
.dcat-arr:hover{background:linear-gradient(135deg,var(--or,#FF6A00),#FF8C2C);color:#fff;border-color:transparent}
.dcat-arr.go-start{order:0}        /* السهم على الشمال (بصريًا) */
.dcat-scroll{order:1}
.dcat-arr.go-end{order:2}          /* السهم على اليمين (بصريًا) */

/* تلاشي على الأطراف */
.dcat-fade{position:absolute;top:0;bottom:0;width:40px;z-index:4;pointer-events:none;transition:opacity .2s}
.dcat-fade.l{inset-inline-start:44px;background:linear-gradient(to right,#fff,transparent)}
.dcat-fade.r{inset-inline-end:44px;background:linear-gradient(to left,#fff,transparent)}
[dir=rtl] .dcat-fade.l{background:linear-gradient(to left,#fff,transparent)}
[dir=rtl] .dcat-fade.r{background:linear-gradient(to right,#fff,transparent)}

/* ═══ one clean row, as on the big shops: no card behind, no rings — just bigger round photos side by side ═══ */
.dcat{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:6px 0 4px!important;overflow:visible!important}
.dcat::before{display:none!important}
.dcat-scroll{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(108px,1fr);gap:6px!important;padding:6px 2px 8px!important}
.dcat-it{width:auto!important;gap:10px!important;padding:4px 0}
.dcat-it:hover{transform:none!important}
.dcat-it .ci{width:96px!important;height:96px!important;border:0!important;border-radius:50%!important;background:#fff!important;padding:0!important;box-shadow:0 1px 2px rgba(16,18,24,.06),0 6px 16px -8px rgba(16,18,24,.18)!important;transition:transform .25s ease,box-shadow .25s ease}
.dcat-it .ci img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%;transition:transform .35s ease}
.dcat-it:hover .ci{transform:translateY(-3px);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--or,#FF6A00),0 14px 24px -10px rgba(255,106,0,.45)!important}
.dcat-it:hover .ci img{transform:scale(1.06)}
.dcat-it .ci .emo{font-size:34px!important}
.dcat-it .nm{width:100%!important;max-width:118px!important;font-size:13px!important;font-weight:600!important;color:#2B2F38!important;line-height:1.3!important;text-align:center;white-space:normal!important;text-overflow:clip!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;transition:color .2s}
.dcat-it:hover .nm{color:var(--or,#FF6A00)!important}
.dcat-it.all .ci{background:linear-gradient(135deg,#FF7A1A,#FF5A00)!important}
/* scroll arrows: round white buttons; the edge fades match the page */
.dcat-arr{width:38px!important;height:38px!important;border-radius:50%!important;background:#fff!important;border:1px solid #E6E7EB!important;color:#16181D!important;box-shadow:0 6px 16px rgba(16,18,24,.12)!important;font-size:20px!important;top:44px!important}
.dcat-fade{display:none!important}
@media(min-width:1500px){.dcat-scroll{grid-auto-columns:minmax(120px,1fr)}.dcat-it .ci{width:108px!important;height:108px!important}.dcat-it .nm{max-width:128px!important}}

/* soft edge instead of a hard cut where the row continues; arrows always there */
.dcat-scroll{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 56px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 56px),transparent 100%)}
[dir="rtl"] .dcat-scroll{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 16px,#000 calc(100% - 56px),transparent 100%);mask-image:linear-gradient(270deg,transparent 0,#000 16px,#000 calc(100% - 56px),transparent 100%)}
.dcat-arr{opacity:1!important;visibility:visible!important;top:auto!important;align-self:center;margin-bottom:34px}
.dcat-arr:hover{background:#16181D!important;color:#fff!important;border-color:#16181D!important}

/* dense: the first products show on the first screen of a laptop */
.dcat{padding:2px 0 0!important;margin-top:4px!important}
.dcat-scroll{grid-auto-columns:minmax(104px,1fr)!important;padding:4px 2px 0!important}
.dcat-it{gap:6px!important;padding:2px 0!important}
.dcat-it .ci{width:70px!important;height:70px!important}
.dcat-it .nm{font-size:12px!important;max-width:110px!important;line-height:1.25!important;min-height:2.5em}
.dcat-arr{margin-bottom:30px!important;width:34px!important;height:34px!important;font-size:18px!important}
@media(min-width:1500px){.dcat-it .ci{width:80px!important;height:80px!important}.dcat-scroll{grid-auto-columns:minmax(116px,1fr)!important}}

/* a fine warm ring around every photo (the brand colour, quiet) — stronger on hover */
.dcat-it .ci{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #FFD9C2,0 8px 18px -10px rgba(255,90,0,.35)!important}
.dcat-it:hover .ci{box-shadow:0 0 0 2px #fff,0 0 0 4px #FF5A00,0 12px 22px -10px rgba(255,90,0,.5)!important}

/* ═══ the dashed orange frame round every photo (as before) + the orange line on top ═══ */
.dcat{position:relative!important;padding-top:12px!important}
.dcat::before{display:block!important;content:""!important;position:absolute!important;top:0!important;inset-inline:6%!important;height:3px!important;border-radius:3px;background:linear-gradient(90deg,transparent,var(--or,#FF6A00) 22%,#FF8C2C 50%,var(--or,#FF6A00) 78%,transparent)!important}
.dcat-it .ci{box-shadow:0 6px 14px -8px rgba(255,106,0,.35)!important;outline:2px dashed #FFB98A;outline-offset:3px;margin:5px}
.dcat-it:hover .ci{box-shadow:0 10px 20px -8px rgba(255,106,0,.5)!important;outline:2px solid var(--or,#FF6A00);outline-offset:3px;transform:translateY(-2px)}
.dcat-it .nm{margin-top:2px}

/* ═══ arrows: clean round buttons with a drawn chevron; faded out at the ends ═══ */
.dcat-arr{position:relative;width:40px!important;height:40px!important;border-radius:50%!important;background:#fff!important;border:1px solid #ECEDF0!important;color:transparent!important;font-size:0!important;box-shadow:0 4px 14px rgba(16,18,24,.10)!important;cursor:pointer;transition:background .18s,box-shadow .18s,transform .18s,opacity .2s!important;margin-bottom:34px!important;flex:none}
.dcat-arr::before{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;background:#16181D;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:background .18s}
.dcat-arr.go-end::before{transform:scaleX(-1)}
.dcat-arr:hover{background:var(--or,#FF6A00)!important;border-color:var(--or,#FF6A00)!important;box-shadow:0 8px 18px -6px rgba(255,106,0,.55)!important;transform:scale(1.06)}
.dcat-arr:hover::before{background:#fff}
.dcat-arr:active{transform:scale(.94)}
.dcat-arr.is-off{opacity:.35!important;pointer-events:none;box-shadow:none!important}
/* ═══ dense: no empty band under the row; names bold ═══ */
.dcat{padding-bottom:0!important;margin-bottom:0!important}
.dcat-w{padding-bottom:0!important}
.dcat-scroll{padding-bottom:2px!important}
.dcat-it{padding-bottom:0!important}
.dcat-it .nm{font-weight:800!important;color:#16181D!important;font-size:12.5px!important;min-height:0!important}

/* ═══ smaller photos, more categories in view ═══ */
.dcat-scroll{grid-auto-columns:minmax(94px,1fr)!important;gap:2px!important}
.dcat-it .ci{width:58px!important;height:58px!important;margin:4px!important}
.dcat-it .nm{font-size:11.5px!important;max-width:92px!important;line-height:1.25!important;letter-spacing:-.1px}
.dcat-arr{margin-bottom:30px!important;width:36px!important;height:36px!important}
.dcat-arr::before{width:14px;height:14px}
@media(min-width:1500px){.dcat-scroll{grid-auto-columns:minmax(96px,1fr)!important}.dcat-it .ci{width:64px!important;height:64px!important}.dcat-it .nm{font-size:12px!important;max-width:104px!important}}

/* ═══════════ CH-DENSE v1 — the top of the home page on computers: compact and in one family ═══════════
   «Why ChinaHub» bar slimmer (it grew to 56–72 px on big screens), the categories in a white panel like the
   «Explore more» panel below, smaller photos with a quiet ring (no dashed frames), names in two tidy lines,
   less empty space between the blocks — more categories and the first products in the first screen. */
@media (min-width:981px){
  /* «Why choose ChinaHub?» — one slim line at every screen size */
  html body .chw{margin-top:10px!important}
  html body .chw .chw-bar{height:40px!important;min-height:0!important;border-radius:12px!important;padding:0 16px!important}
  html body .chw .chw-l{font-size:14.5px!important;gap:8px!important}
  html body .chw .chw-l svg{width:19px!important;height:19px!important}
  html body .chw .chw-r{font-size:13.5px!important;gap:5px!important}
  html body .chw .chw-r svg{width:15px!important;height:15px!important}

  /* categories: a white panel */
  .dcat{background:#fff!important;border:1px solid #EFEFF1!important;border-radius:16px!important;box-shadow:0 1px 2px rgba(20,22,28,.04)!important;
        padding:10px 4px 8px!important;margin:10px 0 0!important;overflow:hidden!important}
  .dcat::before{display:none!important}
  .dcat-w{padding:0 8px!important}
  .dcat-scroll{grid-auto-columns:minmax(88px,1fr)!important;gap:0!important;padding:2px 2px 0!important}
  .dcat-it{gap:6px!important;padding:4px 2px!important;border-radius:12px;transition:background .15s}
  .dcat-it:hover{background:#FFF6EF}
  .dcat-it .ci{width:56px!important;height:56px!important;margin:2px!important;outline:0!important;
               box-shadow:0 0 0 1px #F1E4D8,0 4px 10px -6px rgba(255,106,0,.35)!important;transform:none!important}
  .dcat-it:hover .ci{outline:0!important;box-shadow:0 0 0 2px #FF6A00,0 8px 16px -8px rgba(255,106,0,.55)!important;transform:translateY(-1px)!important}
  .dcat-it .nm{font-size:11.5px!important;font-weight:700!important;color:#2B2F38!important;max-width:86px!important;line-height:1.22!important;
               min-height:2.44em!important;margin-top:0!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important}
  .dcat-it:hover .nm{color:#E65100!important}
  .dcat-arr{width:32px!important;height:32px!important;margin-bottom:26px!important;box-shadow:0 2px 8px rgba(16,18,24,.10)!important}
  .dcat-arr::before{width:13px!important;height:13px!important}
}
@media (min-width:1500px){
  .dcat-scroll{grid-auto-columns:minmax(92px,1fr)!important}
  .dcat-it .ci{width:60px!important;height:60px!important}
  .dcat-it .nm{font-size:12px!important;max-width:90px!important}
}

/* ═══════════ CH-DENSE v2 — prettier: a premium trust bar, pastel halos round each category, a soft panel ═══════════ */
@media (min-width:981px){
  /* trust bar: deep green with a soft light, the icon in a glass chip, the rotating reason in a white pill */
  html body .chw .chw-bar{position:relative;overflow:hidden;height:42px!important;padding:0 6px 0 8px!important;border-radius:14px!important;
    background:linear-gradient(100deg,#0E7A43 0%,#16934F 45%,#1FA85C 100%)!important;box-shadow:0 1px 2px rgba(14,122,67,.18),0 10px 22px -16px rgba(14,122,67,.7)!important;
    transition:box-shadow .2s,transform .2s}
  html body .chw .chw-bar::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120px 60px at 12% 0%,rgba(255,255,255,.22),transparent 70%),repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 10px,transparent 10px 22px)}
  html body .chw .chw-bar:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(14,122,67,.2),0 14px 26px -14px rgba(14,122,67,.75)!important}
  html body .chw .chw-l{position:relative;font-weight:900!important;letter-spacing:-.1px}
  html body .chw .chw-l svg{box-sizing:content-box;padding:6px;border-radius:10px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
  html body .chw .chw-r{position:relative;height:30px;padding:0 10px 0 14px!important;border-radius:999px;background:#fff;color:#0E7A43!important;font-weight:800!important;
    box-shadow:0 2px 6px rgba(0,0,0,.12)}
  html[dir="rtl"] body .chw .chw-r{padding:0 14px 0 10px!important}
  html body .chw .chw-r svg{color:#0E7A43;transition:transform .2s}
  html body .chw .chw-bar:hover .chw-r svg{transform:translateX(2px)}
  html[dir="rtl"] body .chw .chw-bar:hover .chw-r svg{transform:translateX(-2px)}

  /* categories panel: a whisper of warmth at the top */
  .dcat{background:linear-gradient(180deg,#FFFBF7 0%,#FFFFFF 46%)!important;border-color:#F3ECE5!important}
  /* pastel halos — each category its own soft colour, ring in the same family */
  .dcat-it .ci{--h:#FFF1E6;--r:#FFD9BF;background:radial-gradient(circle at 50% 35%,#fff 0%,var(--h) 72%)!important;
               box-shadow:0 0 0 1.5px var(--r),0 6px 14px -9px rgba(16,18,24,.35)!important;transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .2s!important}
  .dcat-it:nth-child(6n+2) .ci{--h:#FDECF2;--r:#F8C9DA}
  .dcat-it:nth-child(6n+3) .ci{--h:#EEF4FF;--r:#C9D9F8}
  .dcat-it:nth-child(6n+4) .ci{--h:#ECF8F1;--r:#BFE6CF}
  .dcat-it:nth-child(6n+5) .ci{--h:#F5EFFF;--r:#D9C8F6}
  .dcat-it:nth-child(6n+6) .ci{--h:#FFF7E0;--r:#F5DE9A}
  .dcat-it .ci img{mix-blend-mode:multiply}
  .dcat-it:hover{background:transparent!important}
  .dcat-it:hover .ci{transform:translateY(-3px) scale(1.04)!important;box-shadow:0 0 0 2px #FF6A00,0 12px 20px -10px rgba(255,106,0,.55)!important}
  .dcat-it:hover .ci img{transform:scale(1.08)}
  .dcat-it .nm{transition:color .15s}
  .dcat-it:active .ci{transform:scale(.96)!important}
}