/* ============================================================
   Tawasul add-on sections (Explore Our Range + Shop by Category)
   Styled to the website's own aesthetic: orange #ff8c00 accent,
   Syne headings, warm neutral backgrounds.
   ============================================================ */
.tgx-sec{--acc:#ff8c00;--acc-soft:#ffa333;--dk:#14181f;--ink:#1a1f28;--muted:#6b7280;--line:#eae6df}
.tgx-sec *{box-sizing:border-box}
.tgx-sec .eyebrow{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.tgx-sec .sec-h2{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(30px,4vw,50px);color:var(--ink);letter-spacing:-.015em;margin-top:10px}

/* ---- Explore Our Range (3D coverflow) ---- */
.range-sec{position:relative;background:radial-gradient(120% 90% at 50% 0%,#f9f2df 0%,#f1e9d1 62%);padding:96px 0 110px;overflow:hidden;font-family:'Inter',sans-serif}
.range-head{max-width:1240px;margin:0 auto;padding:0 28px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.view-all{font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);transition:color .2s;text-decoration:none}
.view-all:hover{color:var(--acc)}
.cf-viewport{perspective:1600px;margin-top:64px;height:440px;position:relative;cursor:grab}
.cf-viewport:active{cursor:grabbing}
.cf-stage{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.cf-card{position:absolute;top:0;left:50%;width:300px;height:100%;margin-left:-150px;background:#fff;border-radius:24px;overflow:hidden;transition:transform .55s cubic-bezier(.25,.8,.3,1),opacity .55s,box-shadow .55s}
.cf-card__img{height:60%;background:#f4f0ea;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cf-card__img img{width:100%;height:100%;object-fit:contain;padding:18px}
.cf-nav{max-width:1240px;margin:44px auto 0;padding:0 28px;display:flex;align-items:center;justify-content:center;gap:28px}
.arrow-btn{width:52px;height:52px;border-radius:50%;border:none;background:var(--dk);color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px -14px rgba(0,0,0,.6);transition:transform .2s}
.arrow-btn:hover{transform:scale(1.08)}
.cf-dots{display:flex;align-items:center;gap:10px}

/* ---- Shop by Category ---- */
.cats-sec{background:#f1e9d1;padding:96px 0;font-family:'Inter',sans-serif}
.cats-head{text-align:center;max-width:620px;margin:0 auto 56px;padding:0 28px}
.cat-grid{max-width:1240px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cat-card{position:relative;display:block;height:240px;border-radius:22px;overflow:hidden;box-shadow:0 16px 38px -22px rgba(20,24,31,.35);transition:transform .3s,box-shadow .3s;text-decoration:none}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 30px 56px -24px rgba(20,24,31,.5)}
.cat-card:hover .cat-arrow{transform:translateX(6px)}
.cat-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,24,31,.9) 0%,rgba(20,24,31,.45) 34%,transparent 62%)}
.cat-meta{position:absolute;left:22px;right:22px;bottom:20px;display:flex;align-items:center;justify-content:space-between}
.cat-name{font-family:'Syne',sans-serif;font-weight:700;font-size:21px;color:#fff}
.cat-arrow{font-family:'Syne',sans-serif;font-weight:800;font-size:22px;color:var(--acc);transition:transform .3s}

/* ---- Why Tawasul (value props) ---- */
.vp-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.vp-item{text-align:center;padding:0 8px}
.vp-icon{width:66px;height:66px;margin:0 auto;border-radius:50%;background:rgba(255,140,0,.12);display:flex;align-items:center;justify-content:center;color:#ff8c00;font-size:26px}
.vp-title{font-family:'Syne',sans-serif;font-weight:700;font-size:20px;color:#1a1f28;margin-top:22px}
.vp-text{font-family:'Inter',sans-serif;font-size:15px;line-height:1.6;color:#6b7280;margin-top:10px;max-width:34ch;margin-left:auto;margin-right:auto}
@media(max-width:767px){.vp-grid{grid-template-columns:1fr;gap:32px}}

@media(max-width:1023px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.cat-grid{grid-template-columns:1fr}.range-head{justify-content:center;text-align:center}}