/* ============================================================
   FOLIOS.IN — APP.CSS (PHP platform additions)
   ============================================================ */

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--white);border-bottom:1px solid var(--gray-100);transition:background var(--transition);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);padding:0 32px;max-width:1280px;margin:0 auto;}
.nav-logo{font-weight:800;font-size:20px;color:var(--black);text-decoration:none;letter-spacing:-0.03em;}
.nav-logo span{color:var(--accent2);}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-link{background:none;border:none;cursor:pointer;color:var(--gray-500);font-size:14px;font-weight:500;padding:6px 10px;border-radius:6px;transition:all var(--transition);text-decoration:none;font-family:var(--font-body);}
.nav-link:hover,.nav-link.active{color:var(--black);background:var(--gray-100);}
.nav-actions{display:flex;align-items:center;gap:6px;}
.drop-item{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:13px;color:var(--gray-700);text-decoration:none;transition:background var(--transition);}
.drop-item:hover{background:var(--gray-100);color:var(--black);}
.footer-link{color:var(--gray-500);text-decoration:none;font-size:13px;transition:color var(--transition);}
.footer-link:hover{color:var(--black);}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:600;border:1.5px solid transparent;cursor:pointer;transition:all var(--transition);text-decoration:none;font-family:var(--font-body);white-space:nowrap;line-height:1;}
.btn-primary{background:var(--black);color:var(--white);border-color:var(--black);}
.btn-primary:hover{opacity:0.85;}
.btn-ghost{background:transparent;color:var(--black);border-color:var(--gray-200);}
.btn-ghost:hover{background:var(--gray-100);border-color:var(--gray-300);}
.btn-accent{background:var(--accent2);color:var(--black);border-color:var(--accent2);}
.btn-accent:hover{filter:brightness(0.92);}
.btn-danger{background:#ef4444;color:#fff;border-color:#ef4444;}
.btn-sm{padding:6px 12px;font-size:13px;}
.btn-lg{padding:12px 24px;font-size:15px;}
.btn-xl{padding:14px 32px;font-size:16px;font-weight:700;}
.w-full{width:100%;}

/* Cards */
.card{background:var(--white);border:1px solid var(--gray-100);border-radius:10px;padding:20px;}

/* Forms */
.form-group{margin-bottom:18px;}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--gray-700);margin-bottom:6px;}
.form-input,.form-select,.form-textarea{width:100%;padding:10px 14px;border:1.5px solid var(--gray-200);border-radius:6px;font-size:14px;font-family:var(--font-body);color:var(--black);background:var(--white);transition:border-color var(--transition);outline:none;}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--black);}
.form-textarea{resize:vertical;min-height:100px;}
.form-hint{font-size:12px;color:var(--gray-500);margin-top:4px;}
.form-error{font-size:12px;color:#ef4444;margin-top:4px;}

/* Auth layout */
.auth-layout{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;}
.auth-left{background:var(--black);padding:48px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}
.auth-left-bg{position:absolute;inset:0;opacity:0.06;background:repeating-linear-gradient(45deg,var(--accent2),var(--accent2) 1px,transparent 1px,transparent 20px);}
.auth-right{padding:48px;display:flex;align-items:center;justify-content:center;}
.auth-form{width:100%;max-width:400px;}
@media(max-width:768px){
  .auth-layout{grid-template-columns:1fr;}
  .auth-left{display:none;}
  .auth-right{padding:32px 24px;align-items:flex-start;padding-top:calc(var(--nav-h)+32px);}
}

/* Designer card */
.d-card{background:var(--white);border:1px solid var(--gray-100);border-radius:10px;overflow:hidden;transition:all var(--transition);cursor:pointer;text-decoration:none;display:block;color:inherit;}
.d-card:hover{border-color:var(--gray-300);box-shadow:0 4px 24px rgba(0,0,0,0.08);transform:translateY(-3px);}
.d-card-cover{height:100px;background:var(--gray-100);overflow:hidden;position:relative;}
.d-card-cover img{width:100%;height:100%;object-fit:cover;}
.d-card-body{padding:16px;position:relative;}
.d-avatar{width:52px;height:52px;border-radius:50%;border:3px solid var(--white);position:absolute;top:-26px;left:16px;overflow:hidden;background:var(--gray-200);flex-shrink:0;}
.d-avatar img{width:100%;height:100%;object-fit:cover;}

/* Project card */
.p-card{border-radius:8px;overflow:hidden;cursor:pointer;transition:all var(--transition);display:block;text-decoration:none;color:inherit;}
.p-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.1);}
.p-card-img{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--gray-100);}
.p-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s;}
.p-card:hover .p-card-img img{transform:scale(1.04);}
.p-card-overlay{position:absolute;inset:0;background:rgba(0,0,0,0);transition:background var(--transition);display:flex;align-items:flex-end;padding:12px;}
.p-card:hover .p-card-overlay{background:rgba(0,0,0,0.3);}
.p-card-actions{display:flex;gap:6px;opacity:0;transform:translateY(6px);transition:all var(--transition);}
.p-card:hover .p-card-actions{opacity:1;transform:translateY(0);}

/* Badge */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:50px;font-size:11px;font-weight:700;}
.badge-green{background:rgba(34,197,94,0.1);color:#16a34a;}
.badge-red{background:rgba(239,68,68,0.1);color:#dc2626;}
.badge-blue{background:rgba(59,130,246,0.1);color:#2563eb;}
.badge-yellow{background:rgba(245,158,11,0.1);color:#d97706;}
.badge-gray{background:var(--gray-100);color:var(--gray-500);}
.badge-lime{background:rgba(200,241,53,0.15);color:#65a30d;}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:4px;padding:40px 0;}

/* Tags */
.tag{display:inline-flex;align-items:center;padding:3px 8px;background:var(--gray-100);border-radius:3px;font-size:11px;font-weight:500;color:var(--gray-700);}

/* Available dot */
.av-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;display:inline-block;margin-right:4px;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* Dashboard */
.dash-wrap{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - var(--nav-h));margin-top:var(--nav-h);}
.dash-sidebar{background:var(--off-white);border-right:1px solid var(--gray-100);padding:24px 0;position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;}
.dash-main{padding:32px;background:var(--white);}
.dash-nav{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:14px;font-weight:500;color:var(--gray-500);text-decoration:none;transition:all var(--transition);cursor:pointer;border:none;background:none;width:100%;font-family:var(--font-body);border-radius:0;}
.dash-nav:hover{color:var(--black);background:var(--gray-100);}
.dash-nav.active{color:var(--black);font-weight:700;background:var(--white);border-right:2px solid var(--black);}
.dash-section-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--gray-300);padding:16px 16px 6px;}

/* Admin */
.admin-wrap{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - var(--nav-h));margin-top:var(--nav-h);}
.admin-sidebar{background:var(--gray-900);padding:24px 0;position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;}
.admin-main{padding:32px;background:var(--off-white);}
.admin-nav{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:13px;font-weight:500;color:rgba(255,255,255,0.55);text-decoration:none;transition:all var(--transition);}
.admin-nav:hover{color:#fff;background:rgba(255,255,255,0.06);}
.admin-nav.active{color:var(--accent2);}
.admin-section-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.25);padding:16px 16px 6px;}

/* Table */
.tbl{width:100%;border-collapse:collapse;font-size:14px;}
.tbl th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--gray-500);padding:10px 14px;border-bottom:1px solid var(--gray-100);text-align:left;background:var(--off-white);}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--gray-100);vertical-align:middle;}
.tbl tr:hover td{background:var(--off-white);}

/* Pricing */
.price-card{background:var(--white);border:1.5px solid var(--gray-200);border-radius:12px;padding:32px;transition:all var(--transition);}
.price-card.featured{border-color:var(--accent2);background:var(--black);color:var(--white);}
.price-card:hover{box-shadow:0 8px 30px rgba(0,0,0,0.1);transform:translateY(-4px);}

/* Messages */
.msg-wrap{display:grid;grid-template-columns:300px 1fr;height:calc(100vh - var(--nav-h));margin-top:var(--nav-h);}
.msg-list{border-right:1px solid var(--gray-100);overflow-y:auto;}
.msg-thread{padding:14px 16px;border-bottom:1px solid var(--gray-100);cursor:pointer;transition:background var(--transition);}
.msg-thread:hover,.msg-thread.active{background:var(--off-white);}
.msg-chat{display:flex;flex-direction:column;}
.msg-body{flex:1;overflow-y:auto;padding:24px;}
.msg-bubble{max-width:60%;padding:10px 14px;border-radius:10px;font-size:14px;line-height:1.5;margin-bottom:8px;}
.msg-bubble.mine{background:var(--black);color:var(--white);margin-left:auto;border-radius:10px 10px 2px 10px;}
.msg-bubble.theirs{background:var(--gray-100);border-radius:10px 10px 10px 2px;}

/* Stat card */
.stat-card{background:var(--white);border:1px solid var(--gray-100);border-radius:10px;padding:20px 24px;}
.stat-num{font-size:30px;font-weight:800;letter-spacing:-0.02em;margin-bottom:2px;}
.stat-lbl{font-size:13px;color:var(--gray-500);}

/* Section headers */
.section-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.section-line{width:24px;height:2px;background:var(--gray-300);flex-shrink:0;}

/* Filter chips */
.filter-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;}

/* Search bar */
.search-bar{display:flex;align-items:center;gap:10px;background:var(--white);border:1.5px solid var(--gray-200);border-radius:8px;padding:10px 16px;flex:1;min-width:0;}
.search-bar:focus-within{border-color:var(--black);}
.search-input{border:none;outline:none;background:transparent;font-size:14px;color:var(--black);width:100%;font-family:var(--font-body);}

/* Profile */
.profile-cover{height:220px;background:var(--gray-100);overflow:hidden;position:relative;margin-top:var(--nav-h);}
.profile-cover img{width:100%;height:100%;object-fit:cover;}

/* Responsive */
@media(max-width:1024px){
  .nav-links{display:none;}
  .dash-wrap{display:flex!important;flex-direction:column!important;}
  .dash-sidebar{display:none;}
  .admin-wrap{grid-template-columns:1fr;}
  .admin-sidebar{display:none;}
  .msg-wrap{grid-template-columns:1fr;}
  .msg-list{display:none;}
}
@media(max-width:768px){
  .container{padding:0 16px;}
  .nav-inner{padding:0 16px;}
  footer .container > div:first-child{grid-template-columns:1fr 1fr!important;}
  .dash-main{padding:20px 16px;}
  .admin-main{padding:20px 16px;}
}
@media(max-width:480px){
  footer .container > div:first-child{grid-template-columns:1fr!important;}
}

/* Footer dark links */
.footer-link-dark { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 13px; transition: color 0.15s; }
.footer-link-dark:hover { color: #fff; }

/* Remove gap before footer */
footer { margin-top: 0 !important; }

/* Mobile responsive fixes */
@media(max-width:768px) {
  .grid-4 { grid-template-columns: repeat(2,1fr) !important; }
  .grid-3 { grid-template-columns: repeat(2,1fr) !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .hero { grid-template-columns: 1fr !important; padding-top: calc(var(--nav-h) + 32px) !important; }
  .hero-right { display: none !important; }
  .auth-layout { grid-template-columns: 1fr !important; }
  .auth-left { display: none !important; }
  .dash-wrap { display:flex!important;flex-direction:column!important; }
  .dash-sidebar { display: none !important; }
  .admin-wrap { grid-template-columns: 1fr !important; }
  .admin-sidebar { display: none !important; }
  .msg-wrap { grid-template-columns: 1fr !important; }
  footer .container > div:first-child { grid-template-columns: 1fr 1fr !important; }
}
@media(max-width:480px) {
  .grid-4, .grid-3 { grid-template-columns: 1fr !important; }
  footer .container > div:first-child { grid-template-columns: 1fr !important; }
}

/* Horizontal scroll fix */
body { overflow-x: hidden !important; }
.nav { overflow: hidden; }

/* Hero category slider */
.cat-scroll-wrap { position: relative; padding: 0 40px; margin-left: -4px; margin-right: -4px; }
.cat-scroller { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; padding: 8px 4px 12px; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.cat-scroller::-webkit-scrollbar { display: none; }
.cat-capsule { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 50px; border: 1.5px solid var(--gray-200); font-size: 13px; font-weight: 600; color: var(--gray-700); white-space: nowrap; cursor: pointer; text-decoration: none; transition: all 0.15s; flex-shrink: 0; background: var(--white); }
.cat-capsule:hover, .cat-capsule:active { border-color: var(--black); color: var(--black); background: var(--gray-100); }
.scroll-arrow { position: absolute; top: 50%; transform: translateY(-60%); width: 32px; height: 32px; background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; transition: all 0.15s; z-index: 5; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 0; line-height: 1; }
.scroll-arrow:hover { background: var(--black); color: #fff; border-color: var(--black); }
.scroll-arrow.left { left: 0; }
.scroll-arrow.right { right: 0; }
@media(max-width:768px) { .scroll-arrow { display: none; } .cat-scroll-wrap { padding: 0; } }

/* Section slider (designers, work) on mobile */
.section-slider { display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 8px; }
.section-slider::-webkit-scrollbar { display: none; }
.section-slider > * { flex-shrink: 0; }
.slider-arrows { display: none; justify-content: center; gap: 8px; margin-top: 16px; }
@media(max-width:768px) {
  .slider-arrows { display: flex; }
  .slider-item-w { width: 260px !important; }
}

/* ============================================================
   MOBILE FIXES v2 — based on real device screenshots
   ============================================================ */

/* Global overflow fix */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
* { box-sizing: border-box; }
img { max-width: 100%; }

/* ── CATEGORY CAPSULE SLIDER (homepage + work page) ─────── */
/* KEY FIX: must NOT wrap, must scroll horizontally */
/* cat-scroller fixed below in proper block */

/* filter chips — mobile only, see @media block */

/* ── NAV MOBILE ──────────────────────────────────────────── */
@media(max-width:1023px) {
  .nav-inner { padding: 0 16px !important; }
  #desktopNav { display: none !important; }
  .desk-auth { display: none !important; }
  #mobBtn { display: flex !important; }
}

/* Mobile menu — drop down, no overlap */
#mobMenu {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 998;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* ── HERO MOBILE ─────────────────────────────────────────── */
@media(max-width:900px) {
  .hero {
    grid-template-columns: 1fr !important;
    padding: calc(var(--nav-h) + 36px) 20px 36px !important;
    gap: 0 !important;
  }
  .hero-right { display: none !important; }
  .hero-title { font-size: clamp(38px, 11vw, 72px) !important; }
  .hero-sub { font-size: 16px !important; }
}

/* ── CATEGORY BAR (below hero) ───────────────────────────── */
@media(max-width:768px) {
  .cat-scroll-wrap { padding: 0 !important; }
  .scroll-arrow { display: none !important; }
}

/* ── DISCOVER PAGE FILTERS ───────────────────────────────── */
@media(max-width:768px) {
  .dir-header { padding: calc(var(--nav-h) + 20px) 16px 16px !important; }
  /* Search bar stacks */
  .dir-search { flex-direction: column !important; gap: 8px !important; }
  /* Category pills — single scrolling row */
  .dir-cats {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 8px 16px 12px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -16px !important;
  }
  .dir-cats::-webkit-scrollbar { display: none !important; }
  .dir-cats > * { flex-shrink: 0 !important; }
  /* Grid */
  .dir-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* ── BLOG FILTER CHIPS ───────────────────────────────────── */
@media(max-width:768px) {
  .blog-cats {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .blog-cats::-webkit-scrollbar { display: none !important; }
  .blog-cats > * { flex-shrink: 0 !important; }
  .blog-grid { grid-template-columns: 1fr !important; }
  .blog-featured { grid-template-columns: 1fr !important; }
}

/* ── JOBS PAGE ───────────────────────────────────────────── */
@media(max-width:900px) {
  .jobs-layout { grid-template-columns: 1fr !important; }
  .jobs-sidebar { display: none !important; }
  /* Type filter chips scroll on mobile */
  .jobs-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .jobs-filters::-webkit-scrollbar { display: none !important; }
  .jobs-filters > * { flex-shrink: 0 !important; }
}

/* ── FOOTER LINK FIX ──────────────────────────────────────── */
footer a { color: rgba(255,255,255,0.5); text-decoration: none; }
footer a:link { color: rgba(255,255,255,0.5); text-decoration: none; }
footer a:visited { color: rgba(255,255,255,0.5); text-decoration: none; }
footer a:hover { color: #fff; text-decoration: none; }
footer a:active { color: #fff; text-decoration: none; }
.footer-link-dark { color: rgba(255,255,255,0.5) !important; text-decoration: none !important; }
.footer-link-dark:link { color: rgba(255,255,255,0.5) !important; text-decoration: none !important; }
.footer-link-dark:visited { color: rgba(255,255,255,0.5) !important; text-decoration: none !important; }
.footer-link-dark:hover { color: #fff !important; text-decoration: none !important; }

@media(max-width:768px) {
  footer .container > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
}
@media(max-width:480px) {
  footer .container > div:first-child {
    grid-template-columns: 1fr !important;
  }
}

/* ── WORK PAGE ───────────────────────────────────────────── */
@media(max-width:768px) {
  .work-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  .work-filters { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none !important; }
  .work-filters::-webkit-scrollbar { display: none !important; }
  .work-filters > * { flex-shrink: 0 !important; }
}
@media(max-width:480px) {
  .work-grid { grid-template-columns: 1fr !important; }
}

/* ── AUTH ────────────────────────────────────────────────── */
@media(max-width:768px) {
  .auth-layout { grid-template-columns: 1fr !important; }
  .auth-left { display: none !important; }
  .auth-right {
    padding: calc(var(--nav-h) + 20px) 20px 40px !important;
    min-height: auto !important;
    align-items: flex-start !important;
  }
  .auth-form { max-width: 100% !important; }
}

/* ── DASHBOARD ───────────────────────────────────────────── */
@media(max-width:1023px) {
  .dash-wrap { display:flex!important;flex-direction:column!important; }
  .dash-sidebar { display: none !important; }
  .dash-main { padding: 20px 16px 48px !important; }
}

/* ── ADMIN ───────────────────────────────────────────────── */
@media(max-width:1023px) {
  .admin-wrap { grid-template-columns: 1fr !important; }
  .admin-sidebar { display: none !important; }
  .admin-main { padding: 20px 16px !important; }
}

/* ── MESSAGES ────────────────────────────────────────────── */
@media(max-width:768px) {
  .msg-wrap { grid-template-columns: 1fr !important; height: auto !important; }
  .msg-list { max-height: 220px !important; overflow-y: auto !important; border-right: none !important; border-bottom: 1px solid var(--gray-100) !important; }
}

/* ── PRICING ─────────────────────────────────────────────── */
@media(max-width:768px) {
  .pricing-grid { grid-template-columns: 1fr !important; max-width: 400px !important; margin: 0 auto !important; }
  .price-card.featured { transform: none !important; }
}

/* ── SECTION PADDING ─────────────────────────────────────── */
@media(max-width:768px) {
  .section { padding: 40px 0 !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ── GENERAL GRIDS ───────────────────────────────────────── */
@media(max-width:900px) {
  .grid-4 { grid-template-columns: repeat(2,1fr) !important; }
}
@media(max-width:560px) {
  .grid-4, .grid-3 { grid-template-columns: 1fr !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
}

/* Stat cards */
@media(max-width:600px) {
  .stat-card { padding: 14px 12px !important; }
  .stat-num { font-size: 22px !important; }
}

/* Logo image sizing */
.nav-logo img { height: 22px; width: auto; display: block; }
/* Ensure nav is stacking context for absolute mob menu */
#mainNav { position: fixed !important; }

/* ── HOME SECTION SLIDERS (mobile) ───────────────────────── */
.slider-arrow-btn {
  width: 38px; height: 38px;
  border: 1.5px solid var(--gray-200);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  line-height: 1;
}
.slider-arrow-btn:hover { background: var(--black); color: #fff; border-color: var(--black); }

@media(max-width: 768px) {
  /* Convert grid to horizontal scroll */
  .home-slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 14px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 8px !important;
  }
  .home-slider::-webkit-scrollbar { display: none !important; }

  /* Each card fixed width on mobile */
  .home-slider .d-card,
  .home-slider .p-card,
  .home-slider .slider-item {
    flex: 0 0 72vw !important;
    max-width: 280px !important;
    scroll-snap-align: start !important;
  }

  /* Show arrows below each section */
  .slider-arrows { display: flex !important; }
}

/* ── SEARCH BAR MOBILE ───────────────────────────────────── */
@media(max-width: 768px) {
  /* Search + sort row wraps gracefully */
  .search-bar { flex: 1 1 100% !important; min-width: 0 !important; }

  /* Sticky filter bars */
  [style*="position:sticky"] {
    -webkit-overflow-scrolling: touch;
  }

  /* Discover search grid → stack */
  .dir-search-wrap { flex-direction: column !important; gap: 8px !important; }
  .dir-search-wrap .search-bar { width: 100% !important; }
  .dir-search-wrap select { width: 100% !important; }

  /* Work page search row */
  .work-search { flex-wrap: wrap !important; }
  .work-search .search-bar { flex: 1 1 100% !important; }
}

/* Cat capsule link fix */
.cat-capsule,
.cat-capsule:link,
.cat-capsule:visited { text-decoration: none !important; color: var(--gray-700) !important; }
.cat-capsule:hover { color: var(--black) !important; }

/* ── MOBILE ONLY: chip rows become horizontal scroll ──────── */
@media(max-width: 768px) {
  /* All filter chip rows — nowrap + scroll */
  .dir-cats,
  .filter-chips,
  .blog-cats,
  .jobs-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    -ms-overflow-style: none !important;
  }
  .dir-cats::-webkit-scrollbar,
  .filter-chips::-webkit-scrollbar,
  .blog-cats::-webkit-scrollbar,
  .jobs-filters::-webkit-scrollbar { display: none !important; }
  .dir-cats > *,
  .filter-chips > *,
  .blog-cats > *,
  .jobs-filters > * { flex-shrink: 0 !important; }

  /* Homepage sliders — grid → horizontal scroll */
  .home-slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 14px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 8px !important;
  }
  .home-slider::-webkit-scrollbar { display: none !important; }
  .home-slider .d-card,
  .home-slider .p-card,
  .home-slider .slider-item {
    flex: 0 0 72vw !important;
    max-width: 280px !important;
    scroll-snap-align: start !important;
    width: 72vw !important;
  }
  /* Show slider arrows on mobile */
  .slider-arrows { display: flex !important; }
}

/* Desktop — keep grids as-is, hide slider arrows */
@media(min-width: 769px) {
  .home-slider { display: grid !important; }
  .slider-arrows { display: none !important; }
  .home-slider .d-card,
  .home-slider .p-card,
  .home-slider .slider-item {
    flex: unset !important;
    max-width: unset !important;
    width: auto !important;
  }
}

/* Reduce space between hero CTAs and category slider on mobile */
@media(max-width: 767px) {
  .hero { padding-bottom: 24px !important; }
  .hero-ctas { margin-bottom: 0 !important; }
}

/* ── HOMEPAGE SLIDERS ────────────────────────────────────── */
/* Shared slider: hide scrollbar */
#featSlider, #workSlider, #catSlider {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#featSlider::-webkit-scrollbar,
#workSlider::-webkit-scrollbar,
#catSlider::-webkit-scrollbar { display: none; }

/* Desktop: show all cards side by side, no scroll needed */
@media(min-width: 769px) {
  #featSlider, #workSlider, #catSlider {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
  #featSlider > a, #workSlider > a, #catSlider > a,
  #featSlider .d-card, #workSlider .p-card {
    flex: 0 0 calc(25% - 15px) !important;
  }
}

/* Mobile: 1 card per slide */
@media(max-width: 768px) {
  #featSlider, #workSlider, #catSlider {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
  #featSlider > a, #workSlider > a, #catSlider > a,
  #featSlider .d-card, #workSlider .p-card {
    flex: 0 0 85vw !important;
    min-width: 0 !important;
    max-width: 340px !important;
  }
}

/* ── DISCOVER PAGE MOBILE SEARCH ────────────────────────── */
@media(max-width: 767px) {
  .dir-search-desktop { display: none !important; }
  .dir-search-mobile { display: flex !important; }
  /* Row 3: categories swipe, no wrap, no arrows */
  .dir-cats {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .dir-cats::-webkit-scrollbar { display: none !important; }
  .dir-cats > * { flex-shrink: 0 !important; }
}
/* ── DISCOVER PAGE MOBILE SEARCH ────────────────────────── */
@media(max-width: 767px) {
  .dir-search-desktop { display: none !important; }
  .dir-search-mobile { display: flex !important; }
  .dir-cats {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .dir-cats::-webkit-scrollbar { display: none !important; }
  .dir-cats > * { flex-shrink: 0 !important; }
}

@media(max-width: 767px) {
  .dir-search-desktop { display: none !important; }
  .dir-search-mobile { display: flex !important; }
  .dir-cats {
    flex-wrap: nowrap !important;
    overflow-x: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .dir-cats::-webkit-scrollbar { display: none !important; }
  .dir-cats > * { flex-shrink: 0 !important; }
}
/* Slider fix — override body overflow-x:hidden */
#featSlider,
#workSlider,
#catSlider {
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
}
#featSlider::-webkit-scrollbar,
#workSlider::-webkit-scrollbar,
#catSlider::-webkit-scrollbar { display: none; }