/* Features (mobile only): 2 per row, smaller cards, hide 24/7 Support */
  .features .features-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .features .feature-card { padding: 12px; }
  .features .feature-icon { width: 56px; height: 56px; font-size: 1.5rem; margin-bottom: 12px; }
  .features .feature-card h3 { font-size: 0.95rem !important; margin-bottom: 8px; }
  .features .feature-card p { font-size: 0.9rem; line-height: 1.4; }
@media (max-width: 768px) {
  /* Login page: remove border on auth card only on mobile */
  /* Keep container border/shadow visible */
  body.auth-login .auth-card { border: none !important; box-shadow: none !important; }
  body.auth-login .auth-image { border-left: none !important; }
  /* Signup page: same behavior as login on mobile */
  body.auth-register-page .auth-card { border: none !important; box-shadow: none !important; }
  body.auth-register-page .auth-image { border-left: none !important; }

  /* Signup page: modern mobile layout */
  body.auth-register-page { background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 60%, #e8ecf1 100%) !important; }
  body.auth-register-page .auth-container.auth-register {
    border: 1px solid #eef0f3 !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(17,24,39,0.08) !important;
    overflow: hidden !important;
    max-width: 640px !important;
    margin: 0 auto !important;
  }
  body.auth-register-page .auth-card.auth-card-large {
    padding: 18px !important;
    border: none !important;
    box-shadow: none !important;
  }
  body.auth-register-page .auth-header { text-align: center !important; margin-bottom: 1rem !important; }
  body.auth-register-page .auth-header h2 { font-size: 1.35rem !important; }
  body.auth-register-page .auth-header p { font-size: 0.95rem !important; color: #6b7280 !important; }
  body.auth-register-page .auth-form .form-row { display: block !important; }
  body.auth-register-page .auth-form .form-group { margin-bottom: 0.85rem !important; }
  body.auth-register-page .auth-form .form-group input,
  body.auth-register-page .auth-form .form-group select,
  body.auth-register-page .auth-form .form-group textarea {
    padding: 12px 14px !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
    background: #fff !important;
  }
  body.auth-register-page .toggle-password { right: 12px !important; top: 42px !important; }
  body.auth-register-page .social-login { grid-template-columns: 1fr !important; gap: 10px !important; }
  body.auth-register-page .btn.btn-primary { width: 100% !important; padding: 12px 16px !important; font-size: 1rem !important; border-radius: 12px !important; }
  body.auth-register-page .auth-footer { padding-top: 6px !important; }

  /* Signup: hide Full Name field on mobile */
  body.auth-register-page label[for="full_name"],
  body.auth-register-page #full_name { display: none !important; }

  /* Signup: improve Terms checkbox UX on mobile */
  body.auth-register-page .form-group .checkbox { align-items: flex-start !important; gap: 8px !important; display: flex !important; }
  body.auth-register-page .form-group .checkbox input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 14px !important; height: 14px !important;
    min-width: 14px !important; min-height: 14px !important;
    margin-top: 5px !important;
    position: relative !important; /* allow centering of pseudo-element */
    border: 2px solid #94a3b8 !important; border-radius: 6px !important;
    background: #fff !important; outline: none !important; cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease !important;
  }
  body.auth-register-page .form-group .checkbox input[type="checkbox"]:focus { box-shadow: 0 0 0 4px rgba(55,123,124,0.15) !important; border-color: #377b7c !important; }
  body.auth-register-page .form-group .checkbox input[type="checkbox"]:checked { background: #377b7c !important; border-color: #377b7c !important; }
  body.auth-register-page .form-group .checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 8px; height: 4px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: translate(-50%, -55%) rotate(-45deg);
    display: block;
  }
  body.auth-register-page .form-group .checkbox span { line-height: 1.45 !important; color: #374151 !important; display: block !important; flex: 1 1 auto !important; }
  body.auth-register-page .form-group .checkbox span a { color: #377b7c !important; font-weight: 700 !important; text-decoration: underline !important; }
  body.auth-register-page .form-group .checkbox span a:active { opacity: .9 !important; }

  /* Signup: hide subtitle text under heading on mobile */
  body.auth-register-page .auth-header p { display: none !important; }

  /* Visibility helpers for mobile redesign */
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }

  /* Login: floating back arrow to Home on mobile */
  body.auth-login .mobile-home-back {
    position: fixed; top: 12px; left: 12px;
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #ffffff; color: #111827; text-decoration: none;
    border: 1px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    z-index: 10000;
  }
  body.auth-login .mobile-home-back i { font-size: 16px; }
  body.auth-login .mobile-home-back:active { transform: scale(0.98); }

  /* Remove category text inside all project cards on mobile */
  .project-card .project-category { display: none !important; }

  /* Title color: force dark on mobile for both legacy and new classes */
  .project-title a,
  .project-name a { color: var(--dark-color) !important; }
  .project-title a:hover,
  .project-name a:hover { color: var(--dark-color) !important; }

  /* Hero text: smaller on mobile */
  .hero .hero-title { font-size: 1.4rem !important; line-height: 1.2; margin-bottom: 8px; }
  .hero .hero-subtitle { font-size: 0.95rem; line-height: 1.4; }
  /* Hero section: reduce overall height on mobile */
  .hero { padding: 24px 0 16px; }
  .hero .hero-content { margin: 0; }
  .hero .search-box { margin-top: 10px; }

  /* Categories page hero: match home panel on mobile */
  .categories-header { padding: 24px 0 16px !important; }
  .categories-header h1 { font-size: 1.4rem !important; line-height: 1.2 !important; margin-bottom: 8px !important; }
  .categories-header p { font-size: 0.95rem !important; line-height: 1.4 !important; margin: 0 !important; }

  /* Projects (browse) hero: match home panel on mobile */
  .browse-header { padding: 24px 0 16px !important; }
  .browse-header h1 { font-size: 1.4rem !important; line-height: 1.2 !important; margin-bottom: 8px !important; }
  .browse-header p { font-size: 0.95rem !important; line-height: 1.4 !important; margin: 0 !important; }

  /* About hero: match home panel on mobile */
  .about-hero { padding: 24px 0 16px !important; }
  .about-hero h1 { font-size: 1.4rem !important; line-height: 1.2 !important; margin-bottom: 8px !important; }
  .about-hero p { font-size: 0.95rem !important; line-height: 1.4 !important; margin: 0 !important; }

  /* Contact hero: match home panel on mobile */
  .contact-hero { padding: 24px 0 16px !important; }
  .contact-hero h1 { font-size: 1.4rem !important; line-height: 1.2 !important; margin-bottom: 8px !important; }
  .contact-hero p { font-size: 0.95rem !important; line-height: 1.4 !important; margin: 0 !important; }

  /* Contact page: mobile layout and typography scaling */
  .contact-content { padding: 1.5rem 0 !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 1rem !important; margin-bottom: 1.5rem !important; }
  .contact-info, .contact-form { padding: 1rem !important; }
  .contact-info h2, .contact-form h2 { font-size: 1.1rem !important; margin-bottom: 0.5rem !important; }
  .contact-info p { font-size: 0.95rem !important; line-height: 1.6 !important; }

  /* Contact info items */
  .info-item { padding: 0.75rem !important; margin-bottom: 0.75rem !important; }
  .info-icon { width: 40px !important; height: 40px !important; margin-right: 0.75rem !important; }
  .info-content h4 { font-size: 1rem !important; margin-bottom: 0.25rem !important; }
  .info-content p { font-size: 0.9rem !important; }

  /* Contact form fields */
  .form-group { margin-bottom: 0.9rem !important; }
  .form-group label { margin-bottom: 0.35rem !important; font-size: 0.95rem !important; }
  .form-group input,
  .form-group textarea,
  .form-group select { padding: 0.65rem 0.75rem !important; font-size: 0.95rem !important; }
  .form-group textarea { min-height: 100px !important; }
  .submit-btn { padding: 0.8rem 1rem !important; font-size: 0.95rem !important; width: 100% !important; }

  /* Contact social links */
  .social-links { gap: 0.75rem !important; margin-top: 1rem !important; }
  .social-link { width: 40px !important; height: 40px !important; }

  /* Contact FAQ */
  .faq-section { padding: 1rem !important; margin-top: 1.25rem !important; }
  .faq-question { padding: 1rem !important; font-size: 1rem !important; }
  .faq-answer { padding: 0 1rem 1rem !important; font-size: 0.95rem !important; }

  /* About page: scale typography and spacing for mobile */
  .about-content { padding: 1.5rem 0 !important; }
  .about-section { margin-bottom: 1.5rem !important; padding: 1rem !important; }
  .about-grid { grid-template-columns: 1fr !important; gap: 1rem !important; margin-top: 1.25rem !important; }
  .about-card { padding: 1rem !important; }
  .about-icon { width: 56px !important; height: 56px !important; font-size: 1.25rem !important; margin-bottom: 0.75rem !important; }
  .section-title { font-size: 1.1rem !important; }
  .about-card h3 { font-size: 1rem !important; margin-bottom: 0.4rem !important; }
  .about-card p { font-size: 0.95rem !important; line-height: 1.5 !important; }
  .about-content p { font-size: 0.95rem !important; line-height: 1.6 !important; }

  /* About stats */
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.75rem !important; margin: 1.5rem 0 !important; }
  .stat-card { padding: 1rem !important; }
  .stat-number { font-size: 1.6rem !important; margin-bottom: 0.25rem !important; }
  .stat-label { font-size: 0.9rem !important; }

  /* About team */
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.75rem !important; margin-top: 1.25rem !important; }
  .team-member { padding: 1rem !important; }
  .member-photo { width: 80px !important; height: 80px !important; font-size: 2rem !important; margin-bottom: 0.75rem !important; }
  .member-name { font-size: 1.05rem !important; margin-bottom: 0.25rem !important; }
  .member-role { font-size: 0.95rem !important; margin-bottom: 0.5rem !important; }
  .member-bio { font-size: 0.9rem !important; line-height: 1.5 !important; }

  /* About timeline (stacked on mobile) */
  .timeline { margin: 1.5rem 0 !important; }
  .timeline::before { left: 12px !important; }
  .timeline-item { display: block !important; margin-bottom: 1.25rem !important; }
  .timeline-item:nth-child(even) { flex-direction: column !important; }
  .timeline-content { width: 100% !important; padding: 1rem !important; margin-left: 0 !important; }
  .timeline-year {
    position: relative !important; left: auto !important; top: auto !important; transform: none !important;
    display: inline-block !important; margin-bottom: 0.5rem !important; border-radius: 12px !important;
    padding: 0.25rem 0.5rem !important; font-size: 0.85rem !important;
  }

  /* Section headings smaller on mobile */
  .section .section-title { font-size: 1.1rem !important; }
  .section .section-subtitle { font-size: 0.9rem !important; }

  /* Project titles smaller on mobile (home featured and all projects) */
  .project-title a,
  .project-name a { font-size: 0.9rem !important; }
  #all-projects .project-card.small .project-name a { font-size: 0.9rem !important; }

  /* All Projects: transform cards into a simple list (mobile only) */
  /* Header row: # | Projects | Price */
  #all-projects .all-projects-header {
    display: grid !important;
    grid-template-columns: 40px 1fr 84px !important; /* index | title | price */
    align-items: center;
    gap: 10px; /* bigger gap as requested */
    padding: 10px 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em; /* add space between letters for big gap */
  }
  #all-projects .all-projects-header > div { white-space: nowrap; }
  #all-projects .all-projects-header .col-index { text-align: left; padding-left: 6px; justify-self: start; }
  #all-projects .all-projects-header .col-title { text-align: center; justify-self: center; }
  #all-projects .all-projects-header .col-price { text-align: right; padding-right: 6px; justify-self: end; }

  #all-projects .recent-grid { counter-reset: proj; display: block !important; }
  #all-projects .project-card.small {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 0;
    margin: 0;
    border-bottom: 1px solid #e5e7eb; /* divider after each project */
  }
  #all-projects .project-card.small:last-child { border-bottom: none; }
  /* Hide rich card parts */
  #all-projects .project-card.small .project-thumbnail,
  #all-projects .project-card.small .project-category,
  #all-projects .project-card.small .project-description,
  #all-projects .project-card.small .project-meta,
  #all-projects .project-card.small .project-actions { display: none !important; }
  /* Layout: 3-column grid -> # | title | price */
  #all-projects .project-card.small .project-content {
    display: grid;
    grid-template-columns: 40px 1fr 84px;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
  }
  /* Index column */
  #all-projects .project-card.small .project-content::before {
    grid-column: 1;
    justify-self: start;
    padding-left: 6px;
    counter-increment: proj;
    content: counter(proj) ".";
    color: #64748b;
    white-space: nowrap;
  }
  /* Title column */
  #all-projects .project-card.small .project-name { margin: 0; text-align: center; grid-column: 2; }
  #all-projects .project-card.small .project-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-clamp: 2;
    white-space: normal;
  }
  /* Price column: let children become grid items */
  #all-projects .project-card.small .project-footer { border: 0; padding: 0; display: contents; }
  /* Hide the 'View' button in All Projects on mobile */
  #all-projects .project-card.small .project-footer .btn { display: none !important; }
  #all-projects .project-card.small .project-price {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }
  #all-projects .project-card.small .price-current { font-size: 0.9rem; }
  #all-projects .project-card.small .price-old { font-size: 0.75rem; }

  /* Featured mobile carousel */
  /* For Featured Projects, show compact 3-column grid on mobile and hide Swiper */
  .featured-projects .featured-swiper { display: none !important; }
  /* Decrease gap between Featured and All Projects */
  .featured-projects.section { padding-bottom: 16px !important; }
  .all-projects.section { padding-top: 16px !important; }
  .featured-projects .section-header { margin-bottom: 0.75rem; }
  .all-projects .section-header { margin-top: 0; margin-bottom: 0.75rem; }
  /* Ensure featured grid shows even if class names change */
  .featured-projects .projects-grid.desktop-only,
  .featured-projects .projects-grid {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* two in a row */
    gap: 10px !important;
  }
  .featured-projects .project-card.featured {
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    display: block !important;
    border: none !important; /* match regular cards on mobile */
  }
  .featured-projects .projects-grid.desktop-only .project-card { opacity: 1 !important; visibility: visible !important; }
  .featured-projects .project-badge { top: 6px; right: 6px; padding: 2px 8px; font-size: 10px; }
  .featured-projects .project-thumbnail { height: auto; }
  .featured-projects .project-thumbnail img {
    width: 100%;
    height: 120px; /* better readability for 2-column layout */
    object-fit: cover;
    display: block;
  }
  .featured-projects .project-content { padding: 8px; min-height: 96px; }
  .featured-projects .project-category { font-size: 0.7rem; color: #64748b; margin-bottom: 2px; }
  .featured-projects .project-title {
    font-size: 0.85rem;
    line-height: 1.2;
    margin: 2px 0 6px; /* extra bottom space to avoid collision with footer */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    line-clamp: 2;
  }
  .featured-projects .project-title a { display: block; }
  .featured-projects .project-description { display: none !important; }
  .featured-projects .project-meta { display: none !important; }
  .featured-projects .project-footer {
    display: flex; align-items: center; justify-content: center; gap: 6px; /* center price */
    padding-top: 8px; margin-top: 4px; border-top: 1px solid #f1f5f9;
  }
  .featured-projects .project-price {
    display: inline-flex; align-items: baseline; gap: 4px; /* tighter gap to keep in one line */
    flex-wrap: nowrap; /* keep prices on a single line */
  }
  .featured-projects .project-price .price-current,
  .featured-projects .project-price .price-old {
    white-space: nowrap; /* keep each price token intact */
  }
  /* Ensure discounted price appears on the left, original on the right */
  .featured-projects .project-price .price-current { order: 1; }
  .featured-projects .project-price .price-old { order: 2; }
  .featured-projects .project-price .price-current { font-size: 0.85rem; /* smaller to fit */ }
  .featured-projects .project-price .price-old { font-size: 0.7rem; }
  /* Hide the 'View' button on mobile featured cards */
  .featured-projects .project-actions .btn.btn-outline { display: none !important; }
  /* Hide the primary Buy/Order button on mobile featured cards */
  .featured-projects .project-actions .btn.btn-primary { display: none !important; }
  /* Indicate whole card is tappable */
  .featured-projects .project-card.featured { cursor: pointer; }
  .featured-projects .project-price .price-current { font-size: 0.9rem; }
  .featured-projects .project-price .price-old { font-size: 0.75rem; }
  .featured-projects .btn { padding: 6px 6px; font-size: 0.75rem; border-radius: 7px; }
  /* Three-dots trigger shown only on mobile */
  .mobile-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #111827;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 1002; /* above backdrop */
  }
  .mobile-menu-trigger:hover { background: #f9fafb; transform: translateY(-1px); }
  .mobile-menu-trigger i, .mobile-menu-trigger .dots {
    font-size: 18px; line-height: 1; display: inline-block;
  }

  /* Optional: hide large-screen nav clusters if present */
  .nav-menu, .nav-actions { display: none !important; }
  
  /* Compact navbar header on mobile */
  .navbar { position: sticky; top: 0; background:#fff; box-shadow: 0 1px 2px rgba(0,0,0,0.06); z-index: 9000; }
  .navbar .container { padding: 10px 12px; gap: 10px; }
  .nav-brand { gap: 8px; }
  .nav-brand a { display:inline-flex; align-items:center; gap:8px; }
  .nav-brand img { height: 36px !important; width: auto; display:block; }
  .nav-brand i { font-size: 20px; }
  .mobile-controls { display: inline-flex !important; }

  /* Backdrop */
  .mobile-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 2999; display: block;
    touch-action: none;
  }
  body.mobile-sidebar-open .mobile-backdrop { opacity: 1; visibility: visible; }
  /* Make the backdrop solid white while open to match the sidebar and avoid transparent gaps on iOS */
  body.mobile-sidebar-open .mobile-backdrop { background: #ffffff; }

  /* Off-canvas sidebar */
  @media (max-width: 768px) {
  .mobile-sidebar {
    position: fixed; top: 0; right: 0;
    height: 100vh; /* fallback */
    height: 100dvh; /* dynamic viewport */
    height: 100svh; /* iOS stable viewport */
    width: min(85vw, 340px);
    background: #ffffff; box-shadow: -8px 0 24px rgba(0,0,0,0.12);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 9999; /* ensure above PDP and any page content */
    display: flex; flex-direction: column; overflow: hidden;
    touch-action: pan-x;
    overscroll-behavior: contain;
    isolation: isolate; /* create top-level stacking context */
  }
  /* Ensure backdrop sits just under the sidebar */
  .mobile-backdrop { z-index: 9998 !important; }
  /* Safety: make sure sidebar buttons are visible on all pages */
  .mobile-sidebar .btn { display: inline-flex !important; }
  /* If AOS CSS is present but JS isn't, prevent hidden items in sidebar */
  .mobile-sidebar [data-aos] { opacity: 1 !important; transform: none !important; }
  /* Redundant safety: ensure open state brings panel onscreen */
  body.mobile-sidebar-open .mobile-sidebar { transform: translateX(0) !important; }
 }
  body.mobile-sidebar-open .mobile-sidebar { transform: translateX(0); }

  .mobile-sidebar header {
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px 16px;
    border-bottom: 1px solid #f1f5f9;
  }
  .mobile-sidebar .brand {
    display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #111827;
    text-decoration: none;
  }
  .mobile-sidebar .brand i { color: #0ea5e9; }
  .mobile-sidebar .close-btn {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e5e7eb; background: #fff; cursor: pointer;
  }

  /* Nav list */
  .mobile-nav {
    padding: 10px 8px; overflow-y: auto; flex: 1 1 auto;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  .mobile-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
  .mobile-nav-list li a {
    display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-radius: 12px;
    color: #111827; text-decoration: none; transition: background 0.15s ease; font-size: 16px;
  }
  .mobile-nav-list li a i { color: #64748b; width: 18px; text-align: center; }
  .mobile-nav-list li a:hover { background: #f8fafc; }

  /* Auth actions */
  .auth-actions { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px; border-top: 1px solid #f1f5f9; display: grid; gap: 8px; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .btn:active { transform: translateY(1px); }
  .btn-outline {
    background: #ffffff; color: #111827; border: 1px solid #e5e7eb; padding: 10px 14px;
  }
  .btn-primary {
    background: var(--primary-color); color: #ffffff; border: 1px solid var(--primary-color); padding: 12px 16px; box-shadow: 0 8px 16px rgba(55,123,124,0.15);
  }
  .btn-primary:hover { filter: brightness(1.02); }

  /* Helper container spacing for when used inside a header */
  .mobile-controls { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }

  /* Hide legacy hamburger on mobile (we use the three-dots trigger) */
  .nav-toggle { display: none !important; }

  /* Prevent body scroll when sidebar open */
  body.mobile-sidebar-open { overflow: hidden; overscroll-behavior: none; }
  html.mobile-sidebar-open, body.mobile-sidebar-open {
    overscroll-behavior: none;
    touch-action: none; /* block global gestures; JS re-enables pan-y in .mobile-nav */
    background-color: #ffffff; /* ensure any exposed viewport/safe-area looks white */
  }

  /* Sidebar internal scrolling: nav scrolls, actions pinned */
  .mobile-sidebar header { flex: 0 0 auto; }
  .mobile-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }
  .auth-actions { flex: 0 0 auto; border-top: 1px solid #f1f5f9; background: #fff; }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .mobile-sidebar { transition: none; }
    .mobile-backdrop { transition: none; }
    .mobile-menu-trigger { transition: none; }
  }
}

@media (max-width: 480px) {
  .mobile-sidebar { width: min(92vw, 360px); }
  .auth-actions { padding: 12px; }
}

/* Projects page mobile layout tweaks */
@media (max-width: 768px) {
  /* Filters */
  .filters-section { padding: 1rem 0; }
  .filters-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
  .search-filter { flex-direction: column !important; gap: 0.75rem !important; }
  .search-filter input { min-width: 0 !important; width: 100% !important; }
  /* Projects page: hide sidebar filters on mobile */
  #all-projects .filters { display: none !important; }
  #all-projects .browse-layout { grid-template-columns: 1fr !important; }
  
  /* Projects search box */
  .search-projects { margin: 0 0 1rem !important; }
  .search-projects input { font-size: 1rem; }

  /* Two-column list becomes single column */
  .projects-columns { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .projects-column { padding: 0.75rem !important; }
  .projects-header { display: none !important; }
  .project-item { gap: 0.6rem !important; padding: 0.5rem 0 !important; }
  .project-index { min-width: 22px !important; font-size: 0.95rem !important; }
  .project-info { gap: 0.5rem !important; }
  .project-title { font-size: 0.95rem !important; line-height: 1.25 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  .project-price { font-size: 0.95rem !important; }
}

@media (max-width: 480px) {
  .projects-columns { gap: 1rem !important; }
  .projects-column { padding: 0.5rem !important; }
  .project-item { padding: 0.4rem 0 !important; }
  .project-title { font-size: 0.9rem !important; }
  .project-price { font-size: 0.9rem !important; }
}

/* Project details page mobile layout tweaks */
@media (max-width: 768px) {
  /* Container and hero */
  .project-container { padding: 0 1rem !important; }
  .project-hero { padding: 2rem 0 1rem !important; }

  /* Main image and thumbnails */
  .project-image { height: 220px !important; border-radius: 8px !important; }
  .project-thumbnails { gap: 0.5rem !important; padding-bottom: 0.25rem; }
  .thumbnail { width: 64px !important; height: 48px !important; }

  /* Meta stats */
  .project-meta { flex-direction: column !important; gap: 0.75rem !important; padding: 0.75rem !important; }
  .meta-value { font-size: 1.25rem !important; }
  .meta-label { font-size: 0.85rem !important; }

  /* Sections spacing */
  .section { margin-bottom: 1.25rem !important; }
  .section h3 { font-size: 1.05rem !important; }
  .tech-tags { gap: 0.4rem !important; }
  .tech-tag { font-size: 0.8rem !important; }

  /* Main content card */
  .project-main { padding: 1rem !important; border-radius: 10px !important; }
  .project-grid { gap: 1.25rem !important; }
  .project-main p { font-size: 0.95rem !important; line-height: 1.5 !important; }
  .project-features li { padding: 0.4rem 0 !important; gap: 0.4rem !important; }
  .project-features i { font-size: 0.9rem !important; }
  .btn { padding: 10px 14px !important; font-size: 0.95rem !important; }

  /* Price and CTA */
  .price-section { margin-bottom: 1.25rem !important; }
  .price-current { font-size: 1.5rem !important; }
  .price-old { font-size: 1rem !important; }
  .btn.btn-primary, .btn.btn-download, .btn-purchase { width: 100% !important; }

  /* Guide steps */
  .guide-step { padding: 0.75rem 0.75rem 0.75rem 3rem !important; }
  .guide-step::before { left: 0.75rem !important; top: 0.75rem !important; }
  
  /* PDP (project details) mobile */
  .pdp { grid-template-columns: 1fr !important; gap: 1rem !important; contain: none !important; }
  .project-container { max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; }
  .project-grid { grid-template-columns: 1fr !important; margin-top: 1rem !important; }
  .project-main { width: 100% !important; box-sizing: border-box !important; }
  body, .project-container, .pdp { overflow-x: hidden !important; }
  /* Keep PDP layers under the sidebar */
  .pdp, .pdp-stage, .pdp-info, .pdp-arrows, .pdp-wish { position: relative; z-index: 1 !important; }
  .pdp-stage { margin: 0 !important; }
  .pdp-mainimg { max-height: 320px !important; aspect-ratio: 16/9 !important; border-radius: 10px !important; }
  .pdp-thumbs { gap: 8px !important; }
  .pdp-thumb { width: 64px !important; height: 48px !important; border-radius: 6px !important; }
  .pdp-arrows { inset: auto 8px 8px auto !important; gap: 6px !important; }
  .pdp-arrow { width: 32px !important; height: 32px !important; }
  .pdp-info { padding: 14px !important; border-radius: 12px !important; }
  .pdp-title { font-size: 1.25rem !important; line-height: 1.25 !important; }
  .pdp-price .now { font-size: 1.4rem !important; }
  .pdp-actions { grid-template-columns: 1fr !important; }
  .pdp-wish { top: 8px !important; right: 8px !important; width: 40px !important; height: 40px !important; }
  .pdp-table { margin-top: 10px !important; }
  .pdp-row { padding: 10px 10px !important; }
  .pdp-row a { font-size: 0.95rem !important; }

  /* Ensure everything inside project-main fits viewport on mobile */
  .project-main, .project-main .section { width: 100% !important; max-width: 100% !important; }
  .project-main, .project-main * { box-sizing: border-box !important; }
  .project-main .section, .project-main .tech-tags, .project-main .project-features { min-width: 0 !important; }
  .project-main img, .project-main video { max-width: 100% !important; height: auto !important; display: block !important; }
  .project-main table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .project-main pre, .project-main code, .project-main .code-block { white-space: pre-wrap !important; word-break: break-word !important; overflow-x: auto !important; }
  .project-main .section p, .project-main .section li { overflow-wrap: anywhere !important; word-break: break-word !important; }
  .project-main ul, .project-main ol { padding-left: 1rem !important; }
}

@media (max-width: 480px) {
  .project-image { height: 180px !important; }
  .price-current { font-size: 1.35rem !important; }
}

/* Cart, Orders, Wishlist mobile layouts */
@media (max-width: 768px) {
  /* CART page */
  .cart-page { padding: 12px 0 !important; }
  .cart-layout { display: block !important; }
  .cart-list { width: 100% !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; }
  .cart-header { padding: 12px 14px !important; }
  .cart-header h2 { font-size: 1rem !important; }
  .cart-count { font-size: 0.8rem !important; padding: 3px 8px !important; }
  .cart-items { padding: 8px !important; }
  /* New card layout */
  .cart-item { display: grid !important; grid-template-columns: 84px 1fr 36px !important; gap: 10px !important; padding: 12px !important; border-radius: 12px !important; border: 1px solid #eef0f3 !important; background: #ffffff !important; box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important; }
  .cart-item + .cart-item { margin-top: 10px !important; }
  .cart-thumb { width: 84px !important; height: 64px !important; border-radius: 10px !important; object-fit: cover !important; background: #f5f7f9 !important; border: 1px solid #eef0f3 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; }
  .cart-info { gap: 4px !important; padding-top: 2px !important; }
  .cart-title { font-size: 0.98rem !important; font-weight: 800 !important; margin: 0 0 4px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
  .cart-meta { font-size: 0.78rem !important; gap: 6px !important; flex-wrap: wrap !important; }
  .chip { font-size: 0.72rem !important; padding: 2px 6px !important; border: 0 !important; background: #f3f4f6 !important; color: #475569 !important; border-radius: 999px !important; font-weight: 600 !important; gap: 4px !important; }
  .chip i { font-size: 0.8rem !important; color: #64748b !important; }
  .cart-price-box { gap: 6px !important; margin-top: 6px !important; }
  .cart-price { font-size: 1.15rem !important; color: var(--primary-color) !important; font-weight: 900 !important; }
  .cart-old-price { font-size: 0.85rem !important; color: #9ca3af !important; }
  /* Icon-only remove button aligned to top-right */
  .cart-btn-remove { grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; align-self: start !important; width: 32px !important; height: 32px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; border: 1px solid var(--primary-color) !important; background: #ffffff !important; color: var(--primary-color) !important; }
  .cart-btn-remove i { font-size: 14px !important; }
  .cart-btn-remove:hover { background: var(--primary-color) !important; color: #ffffff !important; }
  .checkout-steps { gap: 6px !important; padding: 8px 0 0 !important; }
  .step { gap: 6px !important; font-size: 0.85rem !important; }
  .step .dot { width: 22px !important; height: 22px !important; font-size: 0.8rem !important; }
  .step-line { width: 28px !important; }
  .cart-summary { position: static !important; margin-top: 12px !important; padding: 14px !important; border-radius: 12px !important; }
  .summary-title { font-size: 1.05rem !important; }
  .summary-row { padding: 8px 0 !important; }
  .summary-label { font-size: 0.9rem !important; }
  .summary-value { font-size: 0.95rem !important; }
  .summary-total .label { font-size: 1rem !important; }
  .summary-total .value { font-size: 1.2rem !important; }
  .summary-actions .btn { width: 100% !important; padding: 12px !important; font-size: 0.95rem !important; }
  .summary-note { font-size: 0.8rem !important; padding: 10px !important; }

  /* ORDERS page */
  .orders-container { margin: 1rem auto !important; padding: 0 12px !important; }
  .orders-list { border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; }
  .order-item { padding: 12px !important; gap: 10px !important; align-items: flex-start !important; flex-wrap: wrap !important; }
  .order-thumbnail { width: 64px !important; height: 64px !important; border-radius: 8px !important; }
  .order-details { flex: 1 1 auto !important; min-width: 0 !important; }
  .order-title { font-size: 1rem !important; margin-bottom: 6px !important; }
  .order-meta { font-size: 0.85rem !important; margin-bottom: 6px !important; line-height: 1.4 !important; }
  .order-status { font-size: 0.75rem !important; padding: 0.2rem 0.6rem !important; }
  .order-actions { gap: 6px !important; }
  .btn-small { padding: 0.45rem 0.8rem !important; font-size: 0.8rem !important; }
  .order-price { width: 100% !important; text-align: left !important; font-size: 1rem !important; margin-top: 6px !important; }

  /* WISHLIST page */
  .wishlist-container { margin: 1rem auto !important; padding: 0 12px !important; }
  .wishlist-header h1 { font-size: 1.25rem !important; }
  .wishlist-count { font-size: 0.9rem !important; }
  .wishlist-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 12px !important; }
  .wishlist-item { border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; }
  .item-thumbnail { height: 160px !important; }
  .item-content { padding: 12px !important; }
  .item-title { font-size: 1rem !important; margin-bottom: 6px !important; }
  .item-meta { font-size: 0.85rem !important; margin-bottom: 6px !important; }
  .item-description { font-size: 0.9rem !important; line-height: 1.4 !important; margin-bottom: 8px !important; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .item-price { margin-bottom: 10px !important; }
  .item-price .price-current { font-size: 1.1rem !important; }
  .item-price .price-old { font-size: 0.9rem !important; }
  .item-actions { gap: 8px !important; }
  .btn-cart { padding: 10px !important; font-size: 0.95rem !important; }
  .btn-remove { padding: 8px !important; font-size: 0.9rem !important; line-height: 1 !important; }
  .empty-wishlist { padding: 2.5rem 1rem !important; }
}
/* Auth (Login / Signup) mobile redesign */
@media (max-width: 768px) {
  .auth-container { flex-direction: column !important; padding: 12px !important; gap: 12px !important; }
  .auth-image { display: none !important; }
  .auth-card, .auth-card.auth-card-large { width: 100% !important; max-width: 100% !important; padding: 1.25rem !important; border-radius: 12px !important; box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important; }
  .auth-header h2 { font-size: 1.25rem !important; margin-bottom: 0.25rem !important; }
  .auth-header p { font-size: 0.95rem !important; color: #6b7280 !important; }
  .auth-form .form-row { display: block !important; }
  .auth-form .form-group { margin-bottom: 0.9rem !important; }
  .auth-form .form-group input,
  .auth-form .form-group select,
  .auth-form .form-group textarea { width: 100% !important; padding: 12px 14px !important; font-size: 0.95rem !important; }
  .toggle-password { right: 10px !important; }
  .btn.btn-primary, .btn.btn-primary.btn-block { width: 100% !important; padding: 12px 16px !important; font-size: 1rem !important; }
  .auth-divider span { font-size: 0.9rem !important; }
  .social-login { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* Mobile sidebar: user block */
@media (max-width: 768px) {
  .mobile-user { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; background: #f8fafc; }
  .mobile-user i { font-size: 28px; color: #6b7280; }
  .mobile-user-meta { flex: 1; min-width: 0; }
  .mobile-user-name { font-weight: 700; color: #111827; line-height: 1.2; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-user-email { color: #6b7280; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-user-link { margin-left: auto; color: #9ca3af; font-size: 18px; display: inline-flex; align-items: center; }
  .mobile-user-link:hover { color: #6b7280; }
}

/* Footer: two-column layout for Quick Links and Support on mobile */
@media (max-width: 768px) {
  .footer .footer-content {
    display: none !important; /* hide all footer sections on mobile */
  }
  /* Hide the second footer-bottom line (developed with heart) */
  .footer .footer-bottom p:nth-child(2) { display: none !important; }
  /* Show only copyright and social links, centered */
  .footer .footer-bottom { text-align: center !important; }
  .footer .footer-bottom .social-mobile {
    display: flex !important;
    align-items: center; justify-content: center; gap: 12px;
    margin-top: 8px;
  }
}

/* Policy pages (Refund, Terms, Privacy) mobile layout tweaks */
@media (max-width: 768px) {
  /* Overall section padding */
  .policy-content,
  .terms-content,
  .privacy-content { padding: 1.25rem 0 !important; }

  /* Cards/sections */
  .policy-section,
  .terms-section,
  .privacy-section {
    margin-bottom: 1rem !important;
    padding: 1rem !important;
    border-radius: 12px !important;
  }

  /* Headers and icons */
  .policy-icon,
  .terms-icon,
  .privacy-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 0.75rem !important;
    font-size: 1.25rem !important;
  }
  .policy-section h1,
  .terms-section h1,
  .privacy-section h1 { font-size: 1.25rem !important; }
  .policy-section h2,
  .terms-section h2,
  .privacy-section h2 { font-size: 1.05rem !important; }
  .policy-section p,
  .terms-section p,
  .privacy-section p { font-size: 0.95rem !important; line-height: 1.55 !important; }

  /* Grids -> single column */
  .policy-grid,
  .terms-grid,
  .privacy-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    margin: 1rem 0 !important;
  }
  .reason-card,
  .terms-card,
  .data-card { padding: 0.9rem !important; }

  /* Highlights and boxes */
  .policy-highlight,
  .privacy-highlight,
  .rights-box,
  .terms-highlight,
  .warning-box { padding: 0.9rem !important; margin: 1rem 0 !important; }

  /* Contact CTA */
  .contact-cta { padding: 1.25rem !important; margin-top: 1.25rem !important; }

  /* Terms Table of Contents */
  .toc { padding: 1rem !important; margin-bottom: 1.25rem !important; }
  .toc ul { columns: 1 !important; column-gap: 0 !important; }
}