/* ============================================
   MadeInGH - Responsive Overrides
   ============================================ */

@media (max-width: 991.98px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-section {
        padding: 50px 0;
    }
}

@media (max-width: 767.98px) {
    .hero-title {
        font-size: 1.6rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-section {
        padding: 40px 0;
    }

    .hero-search .input-group {
        flex-direction: column;
    }

    .hero-search .form-control {
        border-radius: 8px;
        margin-bottom: 0.5rem;
    }

    .hero-search .btn {
        border-radius: 8px;
        width: 100%;
    }

    .card-img-wrapper {
        height: 200px;
        padding: 10px;
    }

    .listing-type-selector {
        flex-direction: column !important;
    }

    .table-responsive {
        font-size: 0.85rem;
    }

    .main-image-wrapper img {
        max-height: 300px;
    }

    .thumbnail-sm {
        width: 55px;
        height: 55px;
    }
}

@media (max-width: 575.98px) {
    .navbar-brand {
        font-size: 1.2rem;
    }

    .hero-title {
        font-size: 1.4rem;
    }

    .step-icon {
        width: 60px;
        height: 60px;
        font-size: 1.4rem;
    }
}

/* ============================================
   HOME v2 RESPONSIVE
   ============================================ */

@media (max-width: 991.98px) {
    .hero-headline {
        font-size: 2.5rem;
    }

    .hero-v2 {
        padding: 50px 0 60px;
    }

    .stat-item {
        border-right: none;
    }

    .stat-item:nth-child(odd) {
        border-right: 1px solid var(--border);
    }

    .section-padded,
    .brand-section,
    .how-it-works-v2,
    .why-us-section,
    .testimonial-section {
        padding: 60px 0;
    }

    .section-heading {
        font-size: 1.85rem;
    }

    .cta-box {
        padding: 35px 25px;
        text-align: center;
    }

    .cta-headline {
        font-size: 1.6rem;
    }
}

@media (max-width: 767.98px) {
    .hero-headline {
        font-size: 2rem;
    }

    .hero-lead {
        font-size: 1rem;
    }

    .hero-search-v2 {
        flex-direction: column;
        padding: 8px;
        gap: 6px;
    }

    .hero-search-v2 .search-icon {
        display: none;
    }

    .hero-search-v2 input {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid var(--border);
        border-radius: 6px;
    }

    .hero-search-v2 .btn-search {
        width: 100%;
        padding: 12px;
    }

    .hero-tag {
        font-size: 0.75rem;
        padding: 4px 12px;
    }

    .stat-item {
        border-right: none !important;
        padding: 12px 0;
    }

    .stat-number {
        font-size: 1.75rem;
    }

    .stat-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .section-heading {
        font-size: 1.5rem;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .brand-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .brand-tile {
        padding: 20px 12px;
    }

    .brand-tile .brand-icon {
        font-size: 2rem;
    }

    .step-card {
        padding: 28px 20px;
    }

    .step-card .step-number {
        font-size: 2.8rem;
    }

    .cta-box {
        padding: 28px 20px;
    }

    .cta-headline {
        font-size: 1.4rem;
    }

    /* Browse page */
    .browse-title {
        font-size: 1.6rem;
    }

    .browse-header {
        padding: 30px 0 24px;
    }

    .filter-sidebar {
        position: static;
    }

    /* About page */
    .about-hero-title {
        font-size: 1.9rem;
    }

    .about-hero-lead {
        font-size: 1.05rem;
    }

    .mission-graphic {
        height: 280px;
    }

    .mission-circle-1 { width: 90px; height: 90px; font-size: 1.3rem; }
    .mission-circle-2 { width: 70px; height: 70px; font-size: 1.1rem; }
    .mission-circle-3 { width: 80px; height: 80px; font-size: 1.2rem; }
    .mission-circle-4 { width: 65px; height: 65px; font-size: 1rem; }

    /* Create page */
    .listing-type-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .form-section-body {
        padding: 18px;
    }

    .form-section-header {
        padding: 14px 18px;
    }

    .upload-drop-zone {
        padding: 28px 16px;
    }

    /* Detail page */
    .detail-title {
        font-size: 1.4rem;
    }

    .detail-title-card,
    .detail-card {
        padding: 18px 20px;
    }

    .detail-meta {
        gap: 12px;
        font-size: 0.82rem;
    }

    .gallery-thumb {
        width: 60px;
        height: 60px;
    }

    .gallery-nav {
        width: 36px;
        height: 36px;
    }

    .spec-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .seller-stats {
        grid-template-columns: repeat(3, 1fr);
        font-size: 0.85rem;
    }

    .seller-stat-value {
        font-size: 0.85rem;
    }

    .price-amount {
        font-size: 1.8rem;
    }

    .detail-sidebar-sticky {
        position: static;
    }

    .lightbox {
        padding: 20px;
    }

    /* Dashboard mobile */
    .dashboard-welcome {
        padding: 18px 20px;
        flex-direction: column;
        align-items: stretch;
    }

    .welcome-greeting {
        font-size: 1.15rem;
    }

    .welcome-avatar {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .dash-stat-value {
        font-size: 1.45rem;
    }

    .dash-stat-card {
        padding: 16px;
    }

    .dash-stat-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .dash-listing-stats {
        display: none;
    }

    .my-listing-row {
        flex-wrap: wrap;
        padding: 14px 16px;
    }

    .my-listing-content {
        min-width: 0;
        width: calc(100% - 96px);
    }

    .my-listing-actions {
        margin-left: 96px;
        margin-top: 8px;
    }

    .listing-tabs .nav-link {
        padding: 10px 12px;
        font-size: 0.88rem;
    }

    .profile-banner-info {
        padding-top: 12px;
    }

    .profile-banner-info h4 {
        font-size: 1.1rem;
    }

    .profile-banner-avatar {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }
}