/* ============================================================
   Catalogue page — Tawasul Global Exports
   Warm brand theme: beige #f1e9d1, orange #ff8c00, Syne/Inter.
   (Navbar + footer come from the homepage's style.css.)
   ============================================================ */
.cat-page{--acc:#ff8c00;--acc-h:#e07b00;--ink:#1a1f28;--muted:#6b7280;--line:#e6ddc8;--line2:#f0e9d8;--beige:#f1e9d1}
.cat-page *{box-sizing:border-box}
.cat-page a{text-decoration:none}
@keyframes pg-in{from{opacity:0}to{opacity:1}}
.cat-page{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--beige);animation:pg-in .5s ease both}
.cat-wrap{max-width:1280px;margin:0 auto;padding:8px 24px 0}

/* ---- navbar (glass pill, homepage style, dark text for light page) ---- */
.cnav-outer{position:sticky;top:0;z-index:60;padding:18px 20px;pointer-events:none}
.cnav{pointer-events:auto;max-width:1200px;margin:0 auto;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border:1px solid rgba(230,221,200,.9);border-radius:9999px;box-shadow:0 14px 40px -22px rgba(26,31,40,.4);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 14px 12px 26px;animation:navIn .6s ease both}
.cnav-brand{font-family:'Syne';font-weight:800;font-size:20px;letter-spacing:-.01em;color:#1a1f28;white-space:nowrap}
.cnav-brand span{color:var(--acc)}
.cnav-links{display:flex;align-items:center;gap:26px}
.cnav-link{position:relative;font-size:14.5px;font-weight:500;color:#6b7280;padding:6px 2px;transition:color .2s}
.cnav-link:hover,.cnav-link.active{color:#1a1f28;font-weight:600}
.cnav-link::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;border-radius:2px;background:var(--acc);width:0;transition:width .28s}
.cnav-link:hover::after,.cnav-link.active::after{width:100%}
.cnav-right{display:flex;align-items:center;gap:10px}
.cnav-app{font-weight:600;font-size:14px;padding:10px 20px;border-radius:9999px;border:1.5px solid #dcd3bd;color:#1a1f28;background:transparent;transition:all .2s;white-space:nowrap}
.cnav-app:hover{border-color:var(--acc);color:var(--acc);background:rgba(255,140,0,.06)}
.cnav-ham{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:none;cursor:pointer}
.cnav-ham span{display:block;width:20px;height:2px;background:#1a1f28;box-shadow:0 6px 0 #1a1f28,0 -6px 0 #1a1f28}
.cnav-mob{pointer-events:auto;max-width:1200px;margin:10px auto 0;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border:1px solid #e6ddc8;border-radius:24px;padding:14px 20px;display:none;flex-direction:column;animation:tw-fade .25s ease both}
.cnav-mob.open{display:flex}
.cnav-mob a{font-weight:600;font-size:16px;color:#1a1f28;padding:12px 4px;border-bottom:1px solid #f0e9d8}
@media(max-width:979px){.cnav-links{display:none}.cnav-ham{display:flex}}
.tw-scroll::-webkit-scrollbar{width:6px}
.tw-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
@keyframes tw-shimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
@keyframes tw-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.shimmer{background:linear-gradient(90deg,#f4f0ea 25%,#ece6da 37%,#f4f0ea 63%);background-size:840px 100%;animation:tw-shimmer 1.4s infinite linear}

/* ---- promo banner ---- */
.cat-banner{position:relative;border-radius:30px;overflow:hidden;background:linear-gradient(115deg,#f1e9d1 0%,#faf5e8 55%,#fff9ee 100%);border:1px solid var(--line);box-shadow:0 20px 50px -30px rgba(26,31,40,.35);display:flex;align-items:stretch;flex-wrap:wrap;margin-top:8px;animation:heroIn .7s ease .1s both}
.cat-banner__text{flex:1 1 440px;min-width:300px;padding:56px 52px;display:flex;flex-direction:column;justify-content:center}
.cat-banner__eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.cat-banner h1{font-family:'Syne';font-weight:800;font-size:clamp(30px,4.4vw,52px);line-height:1.04;letter-spacing:-.02em;color:var(--ink);margin-top:14px;max-width:14ch}
.cat-banner p{font-size:17px;line-height:1.6;color:var(--muted);margin-top:16px;max-width:44ch}
.banner-btn{display:inline-flex;align-items:center;margin-top:26px;font-weight:600;font-size:15px;color:#fff;background:var(--acc);padding:13px 26px;border-radius:9999px;box-shadow:0 12px 26px -14px rgba(255,140,0,.7);transition:transform .2s,background .2s;width:fit-content}
.banner-btn:hover{background:var(--acc-h);transform:translateY(-2px);color:#fff}
.cat-banner__img{flex:1 1 380px;min-width:280px;position:relative;min-height:280px;background-size:cover;background-position:center;background-color:#efe7d3}
.cat-banner__img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(241,233,209,.6) 0%,transparent 30%)}

/* ---- mobile filters button ---- */
.mob-filters{display:none;margin-top:24px}
.mob-filters button{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;color:#fff;background:var(--ink);padding:12px 22px;border-radius:9999px;border:none;cursor:pointer}

/* ---- layout ---- */
.cat-layout{display:grid;grid-template-columns:288px minmax(0,1fr);gap:32px;margin-top:32px;align-items:start}

/* ---- filter rail ---- */
.filter-rail{position:sticky;top:104px}
.filter-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 16px 40px -28px rgba(26,31,40,.4);display:flex;flex-direction:column;max-height:calc(100vh - 130px)}
.filter-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.filter-head span{font-family:'Syne';font-weight:700;font-size:18px;color:var(--ink)}
.drawer-close{display:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer}
.filter-body{padding:6px 22px 22px;overflow-y:auto;flex:1}
.fsec{border-bottom:1px solid var(--line2);padding:18px 0}
.fsec:last-child{border-bottom:none;padding-bottom:4px}
.fsec-head{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;padding:0;cursor:pointer;font-family:'Syne';font-weight:700;font-size:15px;color:var(--ink)}
.fsec-head .sub{font-weight:400;color:#9aa3ac;font-size:12px}
.chev{display:inline-block;transition:transform .3s;color:#9aa3ac;font-size:16px}
.fsec.collapsed .chev{transform:rotate(-90deg)}
.fsec-body{overflow:hidden;transition:max-height .3s,opacity .3s;max-height:640px;opacity:1;margin-top:6px}
.fsec.collapsed .fsec-body{max-height:0;opacity:0;margin-top:0}
.fbox{width:18px;height:18px;border-radius:6px;border:1.5px solid #d8cfb6;background:#fff;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:0 0 auto}
.fbox.on{border-color:var(--acc);background:var(--acc)}

/* category / brand rows */
.frow{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;padding:8px 2px;cursor:pointer;font-size:14px;font-weight:500;color:#3a4048}
.frow.on{font-weight:600;color:var(--ink)}
.frow .left{display:flex;align-items:center;gap:9px}
.frow .cnt{font-size:12px;color:#9aa3ac}
.subchev{display:inline-block;transition:transform .28s;color:#9aa3ac;font-size:14px;margin-left:2px}
.subchev.open{transform:rotate(90deg)}
.subs{padding:4px 0 4px 30px;display:flex;flex-direction:column;gap:2px;animation:tw-fade .22s ease both}
.subrow{display:flex;align-items:center;gap:9px;background:none;border:none;padding:6px 2px;cursor:pointer;font-size:13.5px;color:var(--muted)}
.subrow.on{color:var(--ink)}
.brand-search{display:flex;align-items:center;gap:8px;background:#faf6ec;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:10px}
.brand-search input{border:none;outline:none;background:transparent;font-size:13px;width:100%}
.brand-list{max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.brand-logo{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:'Syne';font-weight:700;font-size:10px;color:#fff;overflow:hidden}
.brand-logo img{width:100%;height:100%;object-fit:cover}

/* price slider */
.price-slider{position:relative;height:22px;margin:14px 4px 6px}
.price-slider .rail{position:absolute;top:9px;left:0;right:0;height:4px;border-radius:2px;background:var(--line)}
.price-slider .fill{position:absolute;top:9px;height:4px;border-radius:2px;background:var(--acc)}
.price-slider input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;position:absolute;width:100%;height:0;top:0;margin:0}
.price-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--acc);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer}
.price-slider input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--acc);border:3px solid #fff;cursor:pointer}
.price-inputs{display:flex;align-items:center;gap:10px;margin-top:12px}
.price-inputs .pi{flex:1;display:flex;flex-direction:column;gap:4px}
.price-inputs .pi small{font-size:11px;color:#9aa3ac}
.price-inputs .pi .box{border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:14px;font-weight:600;color:var(--ink)}

/* filter chips (ship/moq) */
.fchip{font-size:13px;font-weight:600;padding:9px 15px;border-radius:9999px;cursor:pointer;transition:all .2s;border:1px solid var(--line);background:#fff;color:#3a4048}
.fchip.on{border-color:var(--acc);background:var(--acc);color:#fff}
.chip-wrap{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

/* ---- results toolbar ---- */
.results{min-width:0}
.toolbar{position:sticky;top:104px;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:rgba(241,233,209,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:14px 4px;border-bottom:1px solid var(--line)}
.toolbar .count{font-size:14.5px;color:var(--muted)}
.toolbar .count strong{color:var(--ink)}
.toolbar .right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search-box{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:9px 14px;width:200px;transition:border-color .2s,box-shadow .2s}
.search-box:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,140,0,.12)}
.search-box input{border:none;outline:none;background:transparent;font-size:14px;width:100%}
.sort-select{font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 14px;cursor:pointer}

/* applied chips */
.applied{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:16px 0 4px}
.applied-chip{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9999px;padding:7px 13px;cursor:pointer;transition:all .18s}
.applied-chip:hover{border-color:var(--acc);color:var(--acc)}
.applied-chip .x{opacity:.6;margin-left:5px}
.clear-all{font-size:13.5px;font-weight:600;color:var(--acc);background:none;border:none;cursor:pointer;padding:4px 6px}

/* ---- product grid + card ---- */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;margin-top:18px}
.p-card{background:#fff;border-radius:20px;overflow:hidden;border:1.5px solid #eee7d8;box-shadow:0 14px 34px -22px rgba(26,31,40,.35);transition:transform .28s,box-shadow .28s,border-color .28s;display:flex;flex-direction:column}
.p-card:hover{transform:translateY(-6px);border-color:var(--acc);box-shadow:0 26px 50px -24px rgba(255,140,0,.4),0 0 0 4px rgba(255,140,0,.08)}
.p-card__img{position:relative;aspect-ratio:1/1;background:#f4f0ea;display:flex;align-items:center;justify-content:center;overflow:hidden}
.p-card__img img{width:100%;height:100%;object-fit:contain;padding:16px}
.p-card__cat{position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;letter-spacing:.03em;color:#fff;background:var(--ink);padding:5px 11px;border-radius:9999px}
.p-card__body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.p-card__brand{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--acc)}
.p-card__brand .badge{width:16px;height:16px;border-radius:4px;background:rgba(255,140,0,.16);display:inline-flex;align-items:center;justify-content:center;font-size:9px;overflow:hidden}
.p-card__brand .badge img{width:100%;height:100%;object-fit:cover}
.p-card__title{font-family:'Syne';font-weight:700;font-size:16px;line-height:1.3;color:var(--ink);margin-top:10px;height:2.6em;overflow:hidden}
.p-card__prices{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
.pp{border-radius:12px;padding:9px 11px;transition:box-shadow .2s}
.pp.air{background:rgba(18,62,95,.06)}
.pp.sea{background:rgba(46,120,90,.07)}
.pp.dim{opacity:.4}
.pp .lbl{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.pp.air .lbl{color:#3E7CA8}
.pp.sea .lbl{color:#2E785A}
.pp .val{font-family:'Syne';font-weight:800;font-size:17px;color:var(--ink);margin-top:3px}
.p-card__moq{font-size:12px;color:#9aa3ac;margin-top:11px}

/* ---- pagination ---- */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin:52px 0 20px;flex-wrap:wrap}
.pager-nav{font-size:14px;font-weight:600;color:#3a4048;background:#fff;border:1px solid var(--line);border-radius:9999px;padding:9px 18px;cursor:pointer}
.pager-nav[disabled]{opacity:.4;cursor:not-allowed}
.pager-num{width:40px;height:40px;border-radius:50%;font-size:14px;font-weight:600;cursor:pointer;transition:all .18s;border:1px solid var(--line);background:#fff;color:#3a4048}
.pager-num.on{border-color:var(--acc);background:var(--acc);color:#fff}
.pager-dots{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:#9aa3ac}

/* ---- states ---- */
.empty{text-align:center;padding:80px 20px;background:#fff;border:1px solid #eee7d8;border-radius:20px;margin-top:18px}
.empty .ico{font-size:44px}
.empty h3{font-family:'Syne';font-weight:700;font-size:20px;color:var(--ink);margin-top:14px}
.empty p{font-size:15px;color:var(--muted);margin-top:8px}
.empty button{margin-top:20px;font-weight:600;font-size:14px;color:#fff;background:var(--acc);border:none;border-radius:9999px;padding:12px 28px;cursor:pointer}
.skel-card{background:#fff;border:1px solid #eee7d8;border-radius:20px;overflow:hidden}
.skel-card .img{aspect-ratio:1/1}
.skel-card .lines{padding:18px;display:flex;flex-direction:column;gap:10px}
.skel-card .lines .l{height:10px;border-radius:5px}

/* ---- drawer overlay ---- */
.drawer-overlay{position:fixed;inset:0;background:rgba(26,31,40,.45);z-index:70;display:none}
.drawer-overlay.open{display:block}

/* ---- responsive ---- */
@media(max-width:979px){
  .cat-layout{grid-template-columns:1fr}
  .mob-filters{display:flex}
  .cat-banner__text{padding:36px 28px}
  .drawer-close{display:inline-flex}
  .filter-rail{position:fixed;top:0;left:0;bottom:0;width:min(340px,86vw);z-index:80;padding:14px;transform:translateX(-110%);transition:transform .32s cubic-bezier(.4,0,.2,1)}
  .filter-rail.open{transform:translateX(0)}
  .filter-card{height:100%;max-height:none}
  .toolbar{top:0}
}
@media(max-width:600px){.product-grid{grid-template-columns:1fr}.search-box{width:100%}}

/* ============================================================
   APP SHOWCASE — light warm section with 3D phone cluster
   ============================================================ */
@keyframes as-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes as-p1{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes as-p2{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes as-p3{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes as-pulse{0%,100%{box-shadow:0 10px 24px -14px rgba(26,31,40,.4),0 0 0 0 rgba(255,140,0,.35)}50%{box-shadow:0 10px 24px -14px rgba(26,31,40,.4),0 0 0 10px rgba(255,140,0,0)}}

.app-showcase{position:relative;overflow:hidden;padding:96px 0;background:radial-gradient(120% 120% at 78% 50%,#fff9ee 0%,#f6efdb 48%,#efe6d0 100%);font-family:'Inter',sans-serif}
.as-glow{position:absolute;top:50%;right:14%;transform:translateY(-50%);width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(255,140,0,.18),transparent 66%);filter:blur(20px);pointer-events:none}
.as-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(26,31,40,.05) 1px,transparent 1px);background-size:26px 26px;opacity:.5;pointer-events:none}
.as-wrap{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:40px;flex-wrap:nowrap}
.as-copy{flex:1 1 460px;min-width:300px;position:relative;z-index:2}
.as-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#ff8c00}
.as-title{font-family:'Syne';font-weight:800;font-size:clamp(32px,4.4vw,54px);line-height:1.05;letter-spacing:-.02em;color:#1a1f28;margin-top:16px;max-width:15ch}
.as-lead{font-size:17px;line-height:1.65;color:#6b7280;margin-top:20px;max-width:46ch}
.as-features{display:flex;flex-direction:column;gap:16px;margin-top:32px;max-width:440px}
.as-feat{display:flex;align-items:center;gap:14px;font-size:15.5px;font-weight:500;color:#3a4048}
.as-ic{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:rgba(255,140,0,.14);display:inline-flex;align-items:center;justify-content:center;color:#ff8c00;font-size:17px}
.as-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:36px}
.as-play{display:inline-flex;align-items:center;gap:12px;background:#000;color:#fff;padding:13px 22px;border-radius:14px;border:1px solid rgba(0,0,0,.15);box-shadow:0 10px 26px -16px rgba(0,0,0,.8);transition:all .22s}
.as-play:hover{box-shadow:0 0 0 2px rgba(255,140,0,.6),0 16px 32px -14px rgba(255,140,0,.5);transform:translateY(-2px);color:#fff}
.as-scan{display:inline-flex;align-items:center;gap:12px;background:transparent;color:#1a1f28;padding:11px 18px;border-radius:14px;border:1.5px solid rgba(26,31,40,.25);transition:all .22s}
.as-scan:hover{color:#ff8c00;border-color:#ff8c00;background:rgba(255,140,0,.06)}
.as-qr{width:34px;height:34px;border-radius:7px;background:#fff;border:1px solid #e6ddc8;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;padding:4px}
.as-qr span:nth-child(odd){background:#1a1f28;border-radius:1px}

.as-stage{position:relative;flex:1 1 520px;min-width:300px;height:640px;perspective:1400px;display:flex;align-items:center;justify-content:center}
.as-float{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:as-float 7s ease-in-out infinite}
.as-tilt{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .3s ease}
.as-phone{position:absolute;top:50%;left:50%;width:210px;height:430px;margin:-215px 0 0 -105px;background:linear-gradient(160deg,#242a34,#0c0f14);border-radius:34px;padding:7px;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.25,.8,.3,1),opacity .5s}
.as-screen{width:100%;height:100%;border-radius:28px;overflow:hidden;background:#1b2029}
.as-screen img{width:100%;height:100%;object-fit:cover;display:block}
.as-hero{width:270px;height:552px;margin:-276px 0 0 -135px;z-index:20;padding:0;background:linear-gradient(160deg,#2a313c,#0c0f14);border-radius:44px;box-shadow:0 60px 110px -34px rgba(0,0,0,.7),0 0 60px -20px rgba(255,140,0,.35);cursor:pointer;transform:rotateY(-8deg) rotateX(3deg) translateZ(60px) scale(1)}
.as-hero:hover{transform:rotateY(-8deg) rotateX(3deg) translateZ(60px) scale(1.04) translateY(-10px)}
.as-hero .as-screen{position:absolute;inset:9px;border-radius:34px;width:auto;height:auto}
.as-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:96px;height:22px;background:#0c0f14;border-radius:0 0 15px 15px;z-index:3}
.as-pill{position:absolute;z-index:30;font-weight:600;font-size:13px;color:#1a1f28;background:#fff;border:1px solid rgba(255,140,0,.5);border-radius:9999px;padding:9px 15px;white-space:nowrap;box-shadow:0 10px 24px -14px rgba(26,31,40,.4)}
.as-pill.p1{top:14%;left:1%;animation:as-p1 5s ease-in-out infinite,as-pulse 3s ease-in-out infinite}
.as-pill.p2{bottom:18%;left:7%;animation:as-p2 6s ease-in-out infinite}
.as-pill.p3{top:22%;right:3%;color:#1f7a4d;border-color:rgba(46,120,90,.5);animation:as-p3 5.5s ease-in-out infinite}

@media(max-width:1080px){.as-wrap{flex-wrap:wrap}.as-stage{margin-top:40px;height:580px}}
@media(max-width:760px){.as-stage{height:500px}.as-deep{display:none}.as-pill.p2,.as-pill.p3{display:none}}