/*
 * kurulla.com — Mobile UX Enhancement Layer
 * Loaded after kurulla-frontend.css
 * All rules scoped to ≤760px unless noted
 * ─────────────────────────────────────────── */

/* ══ PREVENT HORIZONTAL SCROLL ════════════════════════ */
@media (max-width: 760px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .k-footer-grid,
    .k-footer-col,
    .k-footer-brand,
    .k-footer-inner,
    .k-footer-bottom {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    .k-footer-col h3 {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ══ NAVBAR: mobile ════════════════════════════════════
   Logo | Search (flex:1) | Hamburger — no Post button
═══════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    .k-navbar-inner {
        gap: 10px !important;
        padding: 0 14px !important;
        height: 54px !important;
    }
    /* Hide the redundant Post Ad button from navbar on mobile — bottom nav "+" covers it */
    .k-mobile-post-btn { display: none !important; }

    .k-logo { flex-shrink: 0; }
    .k-logo-text small { display: none; }       /* "Buy · Sell · Discover" — too dense */
    .k-logo-icon { width: 34px; height: 34px; font-size: 16px; }
    .k-logo-text strong { font-size: 16px; }

    .k-search-wrap {
        flex: 1 !important;
        min-width: 0 !important;
        height: 40px !important;
        border-radius: 10px !important;
    }
    .k-search-input { font-size: 14px !important; }
    .k-search-btn { display: none !important; }  /* icon-only search on mobile */

    .k-menu-btn {
        width: 44px !important;
        height: 44px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }
}

/* ══ SUBNAV: completely hidden on mobile ═══════════════ */
@media (max-width: 760px) {
    .k-subnav { display: none !important; }
}

/* ══ QUICK-LINKS STRIP ══════════════════════════════════
   Remove sticky — it eats 52px of viewport permanently.
   Scroll-away is fine; bottom nav always accessible.
═══════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    .k-mobile-quicklinks {
        position: static !important;          /* no longer sticky */
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: var(--k-surface, #fff) !important;
        border-bottom: 1px solid var(--k-border, #e5e8ef) !important;
        padding: 8px 12px 10px !important;
    }
    .k-mql-item {
        flex-direction: column !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 8px 4px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--k-text-secondary, #667085) !important;
        border-bottom: none !important;
        border-radius: 10px !important;
        min-height: 60px !important;
        transition: background .12s, color .12s !important;
    }
    .k-mql-item:hover,
    .k-mql-item.active {
        color: var(--k-primary, #1b5e20) !important;
        background: color-mix(in srgb, var(--k-primary, #1b5e20) 7%, transparent) !important;
    }
    .k-mql-icon {
        width: 34px; height: 34px;
        background: var(--k-bg, #f5f7fb);
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 16px !important;
        flex-shrink: 0;
        transition: background .12s;
    }
    .k-mql-item.active .k-mql-icon {
        background: color-mix(in srgb, var(--k-primary, #1b5e20) 12%, transparent);
    }
    /* Show only 4 items visible in the 4-col grid; last 3 hidden */
    .k-mql-item:nth-child(n+5) { display: none !important; }
}

/* ══ BOTTOM NAV ═════════════════════════════════════════
   Taller, SVG-ready, better active state
═══════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    .k-mobile-nav {
        height: 60px !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        box-shadow: 0 -1px 0 var(--k-border, #e5e8ef), 0 -4px 16px rgba(0,0,0,.05) !important;
        border-top: none !important;
    }
    .k-mnav-item {
        min-height: 60px !important;
        gap: 3px !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        letter-spacing: .01em !important;
        position: relative;
        color: var(--k-text-tertiary, #94a3b8) !important;
    }
    .k-mnav-item.active { color: var(--k-primary, #1b5e20) !important; }
    /* Active indicator bar at top of tab */
    .k-mnav-item.active::before {
        content: '';
        position: absolute;
        top: 0; left: 25%; right: 25%;
        height: 2.5px;
        background: var(--k-primary, #1b5e20);
        border-radius: 0 0 3px 3px;
    }
    .k-mnav-icon {
        display: flex; align-items: center; justify-content: center;
        width: 26px; height: 26px;
    }
    .k-mnav-icon svg {
        width: 22px; height: 22px;
        stroke: currentColor; fill: none;
        stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
        transition: stroke .12s;
    }
    .k-mnav-item.active .k-mnav-icon svg { stroke-width: 2.2; }

    /* Post button */
    .k-mnav-post {
        width: 50px !important; height: 50px !important;
        margin: -16px 6px 10px !important;
        border-radius: 16px !important;     /* rounded square, not circle */
        font-size: 24px !important;
        box-shadow: 0 4px 14px rgba(27,94,32,.32), 0 1px 4px rgba(0,0,0,.12) !important;
    }

    body { padding-bottom: 62px !important; }
}

/* ══ DRAWER ══════════════════════════════════════════════
   Wider, cleaner icons, user header when logged in
═══════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    .k-drawer {
        width: 280px !important;
        border-radius: 0 20px 20px 0 !important;
    }
    .k-drawer-header {
        padding: 18px 16px !important;
        min-height: 62px !important;
    }
    .k-drawer-body { padding: 6px 0 !important; }

    .k-drawer-link {
        min-height: 48px !important;
        padding: 0 18px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        gap: 12px !important;
        border-radius: 0 !important;
        letter-spacing: .01em;
    }
    .k-drawer-link:hover,
    .k-drawer-link.active {
        background: color-mix(in srgb, var(--k-primary, #1b5e20) 8%, transparent) !important;
        color: var(--k-primary, #1b5e20) !important;
    }
    .k-drawer-link.active {
        font-weight: 700 !important;
        border-right: 3px solid var(--k-primary, #1b5e20) !important;
    }

    /* SVG icon inside drawer links */
    .k-dlink-icon {
        width: 32px; height: 32px;
        border-radius: 9px;
        background: var(--k-bg, #f5f7fb);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        transition: background .12s;
    }
    .k-dlink-icon svg {
        width: 16px; height: 16px;
        stroke: var(--k-text-secondary, #667085);
        fill: none; stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round;
        transition: stroke .12s;
    }
    .k-drawer-link:hover .k-dlink-icon,
    .k-drawer-link.active .k-dlink-icon {
        background: color-mix(in srgb, var(--k-primary, #1b5e20) 12%, transparent) !important;
    }
    .k-drawer-link:hover .k-dlink-icon svg,
    .k-drawer-link.active .k-dlink-icon svg {
        stroke: var(--k-primary, #1b5e20) !important;
    }

    .k-drawer-section-label {
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--k-text-tertiary, #94a3b8);
        padding: 12px 18px 4px;
    }
    .k-drawer-divider { margin: 6px 16px !important; }

    .k-drawer-footer {
        padding: 12px 16px 16px !important;
    }
    .k-drawer-footer .k-btn {
        height: 46px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
        font-weight: 700 !important;
    }
}

/* ══ FOOTER: mobile collapse ═══════════════════════════ */
@media (max-width: 760px) {
    .k-footer {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
        padding-top: 20px !important;
    }
    .k-footer-inner { padding: 0 16px !important; }
    .k-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .k-footer-brand {
        padding-bottom: 16px;
        border-bottom: 1px solid var(--k-border-light, rgba(255,255,255,.08));
        margin-bottom: 0;
    }
    .k-footer-brand p { font-size: 13px; max-width: none; }
    /* Collapse footer columns to accordion-style labels + hidden links */
    .k-footer-col {
        border-bottom: 1px solid var(--k-border-light, rgba(255,255,255,.08));
    }
    .k-footer-col h3 {
        padding: 14px 0;
        margin: 0;
        cursor: pointer;
        display: flex; align-items: center; justify-content: space-between;
        font-size: 13.5px;
        user-select: none;
    }
    .k-footer-col h3::after {
        content: '›';
        font-size: 16px;
        opacity: .5;
        transition: transform .2s;
    }
    .k-footer-col.open h3::after { transform: rotate(90deg); }
    .k-footer-col > a {
        display: none !important;
        font-size: 13px;
        padding: 8px 0;
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        margin: 0 !important;
        line-height: 0 !important;
    }
    .k-footer-col.open > a {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        visibility: visible !important;
        padding: 8px 0 !important;
        line-height: 1.4 !important;
    }
    /* Newsletter col — always visible, no accordion */
    .k-footer-col:last-child > a {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
        overflow: visible !important;
        line-height: 1.4 !important;
    }
    .k-footer-col:last-child h3::after { display: none; }

    .k-footer-bottom {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
        padding-top: 16px !important;
        margin-top: 0 !important;
    }
    /* Remove any excess bottom margin from newsletter section */
    .k-footer-col:last-child { margin-bottom: 0 !important; padding-bottom: 16px !important; }
}

/* ══ DARK MODE DRAWER ══════════════════════════════════ */
@media (max-width: 760px) {
    [data-theme="dark"] .k-dlink-icon {
        background: rgba(255,255,255,.06) !important;
    }
    [data-theme="dark"] .k-mql-icon {
        background: rgba(255,255,255,.07) !important;
    }
    [data-theme="dark"] .k-mnav-item { color: #64748b !important; }
    [data-theme="dark"] .k-mnav-item.active { color: #4ade80 !important; }
    [data-theme="dark"] .k-mnav-item.active::before { background: #4ade80 !important; }
    [data-theme="dark"] .k-mnav-post { background: #1b5e20 !important; }
    [data-theme="dark"] .k-mobile-nav {
        background: #0f172a !important;
        box-shadow: 0 -1px 0 rgba(255,255,255,.06), 0 -4px 20px rgba(0,0,0,.3) !important;
    }
}

/* ══ HOME HERO: compact on mobile ══════════════════════ */
@media (max-width: 760px) {
    .home-hero {
        min-height: unset !important;
        padding: 24px 0 20px !important;
    }
    .home-hero-inner {
        gap: 0 !important;
        align-items: flex-start !important;
    }
    .home-hero-text {
        padding: 0 18px !important;
        max-width: 100% !important;
    }
    .home-hero h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }
    .home-hero p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 18px !important;
    }
    .home-hero-actions,
    .hero-btns,
    .hero-cta-row {
        gap: 10px !important;
        margin-top: 0 !important;
    }
    /* Hide the right-side decorative photo column on mobile */
    .home-hero-photo,
    .home-hero-img,
    .hero-img-col {
        display: none !important;
    }
    /* Keep section directly below hero tight */
    .home-hero + * { margin-top: 0 !important; }
}

/* ══ STORE DETAIL PAGE — FULL MOBILE PREMIUM ═══════════════
   ksp-* = store show page (stores/show.blade.php)
═══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

    /* Profile outer: tighter background section */
    .ksp-profile-outer { padding-bottom: 4px !important; }
    .ksp-profile-wrap  { padding: 0 12px !important; }

    /* Profile card top area: compact padding */
    .ksp-card { border-radius: 14px !important; }

    /* Meta items: smaller text, allow wrap */
    .ksp-meta { gap: 8px !important; }
    .ksp-mi   { font-size: 12px !important; }

    /* Badges: compact */
    .ksp-badges { gap: 4px !important; margin-bottom: 6px !important; }
    .ksp-badge  { font-size: 9.5px !important; padding: 2px 7px !important; }

    /* Stats bar cells */
    .ksp-stat   { padding: 14px 6px !important; }
    .ksp-stat-n { font-size: 20px !important; }
    .ksp-stat-l { font-size: 9px !important; letter-spacing: .4px !important; }

    /* Tabs: already scrollable; tweak padding */
    .ksp-tab { padding: 12px 16px !important; font-size: 12.5px !important; }
    .ksp-tab .cnt { font-size: 9.5px !important; padding: 1px 5px !important; }

    /* Main content wrap */
    .ksp-main-wrap {
        padding: 12px 12px 48px !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    .ksp-main-wrap > div {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Sections: reduce padding, ensure no overflow */
    .ksp-section {
        padding: 14px 12px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        border-radius: 12px !important;
    }

    /* Section header: compact, sort select full-width on overflow */
    .ksp-sec-hdr { margin-bottom: 12px !important; }
    .ksp-sec-title { font-size: 14px !important; }
    .k-sort-select { font-size: 12px !important; padding: 4px 8px !important; height: 34px !important; }

    /* Category pills: scroll inside */
    .ksp-cat-scroll { max-width: 100% !important; overflow-x: auto !important; }
    .ksp-cat-pill { font-size: 12px !important; padding: 7px 12px !important; }
    .ksp-cat-pill .icon  { font-size: 14px !important; }
    .ksp-cat-pill .count { font-size: 10px !important; }

    /* Products 2-col grid */
    #products .k-grid-4 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    #products .k-grid-4 > *,
    #products .k-grid-4 .k-listing-card {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Deals grid: 2-col on mobile */
    .ksp-deals-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .ksp-deal-body { padding: 10px 10px 12px !important; gap: 4px !important; }
    .ksp-deal-title { font-size: 12px !important; }
    .ksp-deal-price { font-size: 14px !important; font-weight: 800 !important; }
    .ksp-deal-orig  { font-size: 11px !important; }
    .ksp-deal-save  { font-size: 10px !important; }

    /* Reviews: rating summary compact */
    .ksp-section #reviews > div:first-of-type { gap: 16px !important; }

    /* Sidebar cards: when stacked below main content on mobile */
    .ksp-scard { padding: 14px !important; border-radius: 12px !important; margin-bottom: 10px !important; }
    .ksp-scard-title { font-size: 10px !important; margin-bottom: 10px !important; padding-bottom: 8px !important; }
    .ksp-rank-icon { font-size: 36px !important; }
    .ksp-rank-lbl  { font-size: 15px !important; }
    .ksp-stars     { font-size: 18px !important; }
    .ksp-irow { padding: 8px 0 !important; font-size: 13px !important; }
    .ksp-iicon { font-size: 14px !important; width: 18px !important; }
    .ksp-sstat strong { font-size: 18px !important; }
    .ksp-sstat span   { font-size: 9px !important; }
    .ksp-sstat        { padding: 10px 6px !important; }
    .ksp-share-row { gap: 6px !important; }
    .ksp-share-row .ksp-btn-wa { font-size: 11.5px !important; padding: 8px 12px !important; flex: 1 !important; justify-content: center !important; }

    /* About tab panel */
    #ksp-about-panel { padding: 0 12px 40px !important; }
}

/* ══ LISTING CARD: compact for 2-col on mobile ══════════
   Applies on store page, listings page, and home grid
═══════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    .k-listing-card {
        min-width: 0 !important;
        overflow: hidden !important;
    }
    /* Image — fixed aspect ratio so cards stay equal height */
    .k-listing-img {
        aspect-ratio: 4/3 !important;
        height: auto !important;
    }
    .k-listing-img img,
    .k-cover-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    /* Body padding tighter */
    .k-listing-body {
        padding: 8px 9px 9px !important;
    }
    /* Title: 2 lines max, smaller font */
    .k-listing-title {
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2 !important;
        margin-bottom: 4px !important;
    }
    /* Meta row: stack vertically, hide time to save space */
    .k-listing-meta {
        flex-direction: column !important;
        gap: 1px !important;
        margin-bottom: 4px !important;
    }
    .k-listing-loc {
        font-size: 10.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    .k-listing-time { display: none !important; } /* too cramped at 2-col */

    /* Seller tag: truncate */
    .k-listing-seller { margin-bottom: 5px !important; }
    .k-seller-tag {
        font-size: 10px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .k-kurilla-badge,
    .k-rank-badge { display: none !important; } /* too cramped */

    /* Footer: stack price + hide WhatsApp text label */
    .k-listing-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
        padding-top: 6px !important;
    }
    .k-price {
        font-size: 13px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }
    .k-price-request { font-size: 11px !important; }
    /* WhatsApp button: icon only */
    .k-card-wa-btn {
        font-size: 10px !important;
        padding: 4px 7px !important;
    }
    /* Badges on image: smaller */
    .k-tag {
        font-size: 9px !important;
        padding: 2px 5px !important;
    }
    .k-views-badge {
        font-size: 9px !important;
        padding: 2px 5px !important;
    }
}

/* ══ LISTINGS PAGE: 2-col grid on mobile ═══════════════ */
@media (max-width: 760px) {
    #k-listings-results .k-grid-4,
    #k-listings-results .k-grid-tight {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #k-listings-results .k-grid-4 > *,
    #k-listings-results .k-grid-tight > * {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    #k-listings-results .k-skel-card { min-width: 0 !important; }
}

/* ══ LATEST ADS: 2-col grid + lazy load on mobile ══════ */
@media (max-width: 760px) {
    #k-latest-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    /* Wrapper div added by lazy loader — make it a proper grid item */
    #k-latest-grid .k-lazy-item {
        display: contents; /* pass-through: card becomes the grid item */
    }
    #k-latest-grid .k-lazy-hidden {
        display: none !important;
    }
    /* Sentinel — invisible spacer */
    #k-lazy-sentinel { height: 1px; }
    /* Loading indicator */
    #k-lazy-loader {
        display: none;
        text-align: center;
        padding: 14px 0;
        color: #64748b;
        font-size: 13px;
    }
    #k-lazy-loader.k-lazy-loading { display: block; }
}
/* Desktop: cap visible items at 8, keep 4-col grid */
@media (min-width: 761px) {
    #k-latest-grid .k-lazy-item:nth-child(n+9) { display: none !important; }
    #k-latest-grid .k-lazy-item { display: contents; }
}
@media (max-width: 760px) {
    #k-latest-grid > * {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
}

/* ══ HOME PAGE: hide heavy sections on mobile ══════════ */
@media (max-width: 760px) {
    .hero-actions-card { display: none !important; }
    .k-hiw-strip { display: none !important; }
}

/* ══ LISTING DETAIL PAGE: mobile improvements ══════════ */
@media (max-width: 760px) {

    /* 1. Breadcrumb: compact, no excess space below */
    .k-breadcrumb {
        padding: 8px 0 10px !important;
        font-size: 11.5px !important;
        gap: 0 !important;
        border-bottom: none !important;
    }
    /* Hide long listing title in breadcrumb — shown in h1 below */
    .k-breadcrumb .current { display: none !important; }
    /* "← Back to results" always on its own line */
    .k-breadcrumb span[style*="margin-left:auto"] {
        width: 100% !important;
        margin-top: 2px !important;
        margin-left: 0 !important;
    }

    /* 2. Deal banner: reduce top margin, edge-to-edge feel */
    .k-deal-banner {
        margin: 6px 0 12px !important;
        border-radius: 14px !important;
    }
    .k-deal-banner-prices { margin: 6px 0 4px !important; }
    .k-deal-banner-sale { font-size: 28px !important; }
    .k-deal-banner-countdown { gap: 6px !important; }
    .k-deal-cd-box {
        min-width: 44px !important;
        padding: 7px 6px !important;
        border-radius: 8px !important;
    }
    .k-deal-cd-box span { font-size: 20px !important; }
    .k-deal-cd-sep { font-size: 16px !important; }

    /* 3. Product page grid: no top padding */
    .k-product-page-grid {
        padding-top: 8px !important;
        gap: 12px !important;
    }

    /* 4. Gallery card: tighter padding */
    .k-product-gallery {
        border-radius: 14px !important;
        padding: 10px !important;
    }

    /* 5. Title: smaller on mobile */
    .k-product-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }

    /* 6. Price box: compact */
    .k-product-price-row {
        padding: 12px 14px !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }
    .k-price-lg { font-size: 26px !important; }

    /* 7. Specs rows: smaller text */
    .k-product-spec {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    .spec-label { width: 90px !important; font-size: 11px !important; }

    /* Recently Viewed: hidden on mobile */
    #kRecentlyViewed { display: none !important; }

    /* 8. Hide duplicate contact row — sticky CTA bar covers Call/WA */
    .k-contact-row-secondary { display: none !important; }

    /* Inline primary contact row: full-width buttons */
    .k-contact-row {
        flex-direction: row !important;
        gap: 8px !important;
    }
    .k-contact-row .k-btn {
        flex: 1 !important;
        font-size: 13px !important;
        padding: 12px 8px !important;
        height: auto !important;
    }

    /* Sidebar seller card: simplified on mobile — just show, don't duplicate */
    .k-seller-card {
        border-radius: 14px !important;
        padding: 16px !important;
    }
    /* Hide seller stat grid on mobile to save space */
    .k-seller-stat-grid { display: none !important; }
    .k-safety-card { margin-top: 12px !important; }

    /* Related listings grid: 2 col */
    .k-related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .k-related-grid > * { min-width: 0 !important; }

    /* 9. Container padding tighter */
    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-top: 8px !important;
    }

    /* 10. Body padding for sticky CTA at very bottom */
    body.has-sticky-cta { padding-bottom: 80px !important; }

    /* 11. STICKY CTA BAR: sits at very bottom, hides bottom nav on listing pages */
    .k-sticky-contactbar {
        bottom: 0 !important;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 8px !important;
        border-radius: 0 !important;
        box-shadow: 0 -4px 24px rgba(0,0,0,.15) !important;
        z-index: 9999 !important;
        left: 0 !important;
        right: 0 !important;
    }
    /* Hide bottom nav when sticky CTA is present */
    body.has-sticky-cta .k-mobile-nav { display: none !important; }

    .k-scb-call,
    .k-scb-wa {
        padding: 13px 8px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
}

/* ══ GLOBAL TOUCH TARGETS (all screens) ════════════════ */
.k-btn, .k-drawer-link, .k-mql-item, .k-mnav-item {
    -webkit-tap-highlight-color: transparent;
}
/* Fast tap — remove 300ms delay on iOS */
a, button, .k-btn, .k-drawer-link { touch-action: manipulation; }

/* ══ AD BANNERS — MOBILE ════════════════════════════════
   Top banner: full-width, proper height
   Advertise strip: compact
   Sidebar ad: hidden (duplicate on mobile)
═══════════════════════════════════════════════════════ */
@media (max-width: 760px) {

    /* Top dynamic banner: full-width, fixed height, cover crop */
    .k-ad-dynamic-top {
        margin-bottom: 16px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    .k-ad-dynamic-top img {
        width: 100% !important;
        height: 110px !important;
        max-height: 110px !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        border-radius: 12px !important;
    }

    /* Fallback ad-banner strip: hide on mobile (already done in frontend.css but reinforce) */
    .k-ad-banner { display: none !important; }

    /* Advertise strip: compact, no decorative circle overflow */
    .k-advertise-strip {
        padding: 16px !important;
        border-radius: 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
        overflow: hidden !important;
    }
    .k-advertise-strip-tag { font-size: 10px !important; margin-bottom: 4px !important; }
    .k-advertise-strip-title { font-size: 15px !important; font-weight: 800 !important; }
    .k-advertise-strip-sub { font-size: 12px !important; }
    .k-advertise-strip-cta {
        width: 100% !important;
        text-align: center !important;
        padding: 11px !important;
        font-size: 13px !important;
    }

    /* Sidebar ad placeholder: compact row on mobile */
    .k-ad-placeholder {
        padding: 12px 14px !important;
        border-radius: 10px !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    .k-ad-placeholder-icon { font-size: 20px !important; }
    .k-ad-placeholder-title { font-size: 12px !important; }
    .k-ad-placeholder-sub { font-size: 11px !important; }
    .k-ad-dynamic-box {
        margin-bottom: 16px !important;
        border-radius: 12px !important;
    }
    .k-ad-dynamic-box img {
        max-height: 130px !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }
}

/* ══ BLOG SECTION — PREMIUM MOBILE CAROUSEL ════════════
   Transforms sidebar list into a full-width swipe carousel
═══════════════════════════════════════════════════════ */
@media (max-width: 760px) {

    .k-home-blog {
        margin-top: 4px !important;
        overflow: hidden !important;
    }
    .k-home-blog .k-section-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 12px !important;
        padding: 0 !important;
    }
    .k-home-blog .k-sidebar-title {
        font-size: 17px !important;
        font-weight: 700 !important;
    }

    /* Horizontal carousel */
    .k-blog-list {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        gap: 12px !important;
        padding: 4px 16px 14px !important;
        margin: 0 -16px !important;
    }
    .k-blog-list::-webkit-scrollbar { display: none !important; }

    /* Blog card: vertical image-on-top layout */
    .k-blog-card {
        flex-direction: column !important;
        flex-shrink: 0 !important;
        width: calc(72vw) !important;
        max-width: 240px !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        scroll-snap-align: start !important;
        text-decoration: none !important;
        color: inherit !important;
        box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
        transition: transform .2s !important;
    }
    .k-blog-card:active { transform: scale(.98) !important; }

    /* Thumbnail: full-width, taller */
    .k-blog-thumb {
        width: 100% !important;
        height: 140px !important;
        border-radius: 0 !important;
        flex-shrink: 0 !important;
        background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    .k-blog-thumb .k-cover-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .k-blog-thumb svg {
        width: 32px !important;
        height: 32px !important;
        color: rgba(255,255,255,.6) !important;
        stroke: rgba(255,255,255,.6) !important;
    }

    /* Text body below image */
    .k-blog-card > div:last-child {
        padding: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        flex: 1 !important;
    }
    .k-blog-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: var(--k-text-primary, #0f172a) !important;
    }
    .k-blog-date {
        font-size: 11px !important;
        color: var(--k-text-muted, #94a3b8) !important;
        margin-top: 2px !important;
    }
}

/* ══ RANDOM ADS SECTION — MOBILE ONLY ══════════════════ */
@media (max-width: 760px) {
    #k-random-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    #k-random-grid .k-lazy-hidden { display: none !important; }
    #k-random-grid .k-lazy-item { display: contents; }
    .k-home-random-ads .k-section-header { margin-bottom: 12px !important; }
    .k-home-random-ads .k-section-title { font-size: 17px !important; }
}
@media (min-width: 761px) {
    /* Hide on desktop — desktop already has latest ads */
    .k-home-random-ads { display: none !important; }
}

/* ══ EXPLORE KEGALLE + GOV SERVICES — MOBILE ════════════
   Gov: 2-col grid; Explore: horizontal snap carousel
═══════════════════════════════════════════════════════ */
@media (max-width: 760px) {

    /* Gov Services: 2 columns */
    .k-home-gov-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .k-home-gov-card {
        padding: 12px !important;
        gap: 10px !important;
        border-radius: 10px !important;
        align-items: center !important;
    }
    .k-home-gov-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }
    .k-home-gov-icon span { font-size: 20px !important; }
    .k-home-gov-info h4 {
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }
    .k-home-gov-count { font-size: 11px !important; }

    /* Section header: keep title + link on one line, hide subtitle on mobile */
    .k-home-explore .k-section-header {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        margin-bottom: 12px !important;
    }
    .k-home-explore .k-section-header > div {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .k-home-explore .k-section-header .text-secondary {
        display: none !important;
    }
    .k-home-explore .k-section-title {
        font-size: 17px !important;
        margin: 0 !important;
    }
    .k-home-explore .k-section-link {
        flex-shrink: 0 !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    /* Fix bullet encoding — override with proper character */
    .k-explore-overlay ul li::before {
        content: '• ' !important;
    }

    /* Hide testimonials grid on mobile */
    .k-testimonials-grid { display: none !important; }

    /* Reduce gap after explore section + tighten k-main bottom padding */
    .k-home-explore { margin-bottom: 4px !important; }
    .k-main { padding-bottom: 4px !important; }

    /* Explore Kegalle: horizontal snap carousel
       Pull grid to viewport edges; clip at body level not section level */
    .k-home-explore {
        overflow: visible !important;
    }
    .k-explore-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        gap: 12px !important;
        /* align cards to viewport with 16px inset on each side */
        padding: 4px 16px 14px !important;
        margin: 0 -16px !important;
        grid-template-columns: unset !important;
        /* prevent this scroll container from causing page-level horizontal scroll */
        max-width: calc(100vw) !important;
        box-sizing: border-box !important;
    }
    .k-explore-grid::-webkit-scrollbar { display: none !important; }

    .k-explore-card {
        display: block !important;
        flex-shrink: 0 !important;
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        height: 240px !important;
        max-height: 240px !important;
        min-height: 240px !important;
        scroll-snap-align: center !important;
        border-radius: 16px !important;
        position: relative !important;
        overflow: hidden !important;
        background: #1b5e20 !important;
        box-shadow: 0 4px 20px rgba(0,0,0,.15) !important;
    }
    .k-explore-placeholder {
        position: absolute !important;
        inset: 0 !important;
        height: 100% !important;
        max-height: none !important;
        width: 100% !important;
    }
    .k-explore-icon-text {
        font-size: 52px !important;
        line-height: 1 !important;
    }

    .k-explore-overlay {
        position: absolute !important;
        inset: 0 !important;
        padding: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 55%) !important;
    }
    .k-explore-overlay h4 {
        font-size: 20px !important;
        font-weight: 800 !important;
        margin-bottom: 6px !important;
        color: #fff !important;
        text-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
        letter-spacing: -.02em !important;
    }
    .k-explore-overlay ul { margin: 0 0 8px !important; }
    .k-explore-overlay ul li {
        font-size: 13px !important;
        color: rgba(255,255,255,.9) !important;
        text-shadow: 0 1px 3px rgba(0,0,0,.3) !important;
    }
    .k-explore-link {
        font-size: 13px !important;
        font-weight: 700 !important;
        margin-top: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
}

/* ══ WHATSAPP BUTTON ════════════════════════════════════ */
@media (max-width: 760px) {
    .k-whatsapp-btn {
        width: 46px !important; height: 46px !important;
        bottom: 80px !important; left: 12px !important;
        border-radius: 50% !important;
        padding: 0 !important; justify-content: center !important;
    }
    .k-wa-label { display: none !important; }
}

/* ══ CLASSIFIED PAGE — MOBILE ════════════════════════════
   Hero compact, tabs sticky, cards horizontal compact
═══════════════════════════════════════════════════════ */
@media (max-width: 760px) {

    /* 1. Hero: slim, hide Quick Post form card */
    .classified-hero {
        padding: 20px 0 16px !important;
    }
    .classified-hero-inner {
        flex-direction: column !important;
        gap: 14px !important;
        align-items: flex-start !important;
    }
    .k-hero-card { display: none !important; }

    .classified-hero h1 {
        font-size: 22px !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }
    .classified-hero p {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }
    .k-hero-cta-row {
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    .k-hero-cta-row .k-btn {
        flex: 1 !important;
        min-width: 120px !important;
        text-align: center !important;
        font-size: 13px !important;
        padding: 10px 14px !important;
    }
    .classified-stats {
        gap: 14px !important;
    }
    .classified-stat strong { font-size: 17px !important; }
    .classified-stat span { font-size: 11px !important; }

    /* 2. Category tabs: sticky, compact, horizontal scroll */
    .classified-tabs {
        position: sticky !important;
        top: 56px !important;
        z-index: 90 !important;
        background: var(--k-bg, #f5f7fb) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
    }
    .classified-tabs-inner {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 6px !important;
        padding: 8px 12px !important;
    }
    .classified-tabs-inner::-webkit-scrollbar { display: none !important; }
    .classified-tab {
        flex-shrink: 0 !important;
        padding: 7px 14px !important;
        font-size: 13px !important;
        border-radius: 20px !important;
        white-space: nowrap !important;
    }
    .classified-tab .cnt {
        font-size: 11px !important;
        margin-left: 3px !important;
    }

    /* 3. Content area: no sidebar grid on mobile */
    .k-layout-sidebar {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* 4. Filter toggle button: full-width, prominent */
    .k-filter-toggle-btn {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 11px 16px !important;
        margin-bottom: 10px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border: 1.5px solid var(--k-border, #e2e8f0) !important;
        border-radius: 10px !important;
        background: var(--k-surface, #fff) !important;
        cursor: pointer !important;
    }
    .k-filter-sidebar {
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    /* 5. Toolbar: compact */
    .k-listings-toolbar {
        padding: 8px 0 10px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .k-listings-count { font-size: 12px !important; }
    .k-sort-select-sm { font-size: 13px !important; }

    /* 6. Classified list cards: CSS grid
       col1(90px image) | col2(body top + price-row bottom)  */
    .k-classified-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .classified-list-card {
        display: grid !important;
        grid-template-columns: 90px 1fr !important;
        grid-template-rows: 1fr auto !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Image: spans both rows */
    .classified-list-img {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        width: 90px !important;
        min-height: 110px !important;
        height: 100% !important;
        border-radius: 0 !important;
        font-size: 28px !important;
        overflow: hidden !important;
    }
    .classified-list-img .k-cover-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Body: top-right */
    .classified-list-body {
        grid-column: 2 !important;
        grid-row: 1 !important;
        padding: 9px 10px 4px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
    }
    .k-tag-row {
        gap: 4px !important;
        margin-bottom: 0 !important;
        flex-wrap: wrap !important;
    }
    .k-tag { font-size: 10px !important; padding: 2px 7px !important; }
    .classified-urgent { font-size: 10px !important; }

    .classified-list-title {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin: 0 !important;
    }
    .classified-list-desc { display: none !important; }

    .classified-list-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 2px 8px !important;
    }
    .classified-list-meta-item {
        font-size: 11px !important;
        color: var(--k-text-2, #64748b) !important;
    }

    /* Right: bottom-right — price left, button right */
    .classified-list-right {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px 10px 9px !important;
        border-left: none !important;
        border-top: 1px solid var(--k-border-light, #f1f5f9) !important;
        min-width: 0 !important;
        gap: 6px !important;
    }
    .classified-list-right .k-price,
    .classified-list-right .k-price-lg,
    .classified-list-right .k-text-green,
    .classified-list-right div {
        font-size: 14px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 140px !important;
    }
    .classified-list-right .k-price-budget,
    .classified-list-right .k-price-suffix {
        font-size: 11px !important;
        font-weight: 400 !important;
        max-width: none !important;
    }
    .k-classified-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    .k-classified-actions .k-btn-sm {
        font-size: 12px !important;
        padding: 7px 12px !important;
        white-space: nowrap !important;
    }
    .k-fav-btn {
        font-size: 16px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 4px !important;
        flex-shrink: 0 !important;
    }

    /* 7. Breadcrumb: compact */
    .classified-hero + * .k-breadcrumb,
    .k-breadcrumb { font-size: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MULTI-PAGE MOBILE PREMIUM — v30
   Covers: Deals, Events, Stores, Locations, Categories,
           Login/Register, Contact, About, Terms, Privacy
═══════════════════════════════════════════════════════════════ */

/* ══ SHARED — page-header banner compact ═══════════════════ */
@media (max-width: 760px) {
    .k-page-header { padding: 20px 0 16px !important; }
    .k-page-header-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .k-page-header h1 { font-size: 22px !important; margin-bottom: 4px !important; }
    .k-page-header p  { font-size: 13px !important; margin-bottom: 0 !important; }
    .k-page-header-search {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
    }
    .k-page-header-search input {
        flex: 1 !important;
        min-width: 0 !important;
        font-size: 14px !important;
    }
    .k-page-header-search button {
        flex-shrink: 0 !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }

    /* cats-hero (about, terms, privacy, contact) */
    .cats-hero { padding: 20px 0 !important; }
    .cats-hero-inner { padding: 0 16px !important; }
    .cats-hero h1 { font-size: 22px !important; }
    .cats-hero p  { font-size: 13px !important; margin-top: 4px !important; }
}

/* ══ DEALS PAGE ═════════════════════════════════════════════ */
@media (max-width: 760px) {

    /* Category shortcut pills: horizontal scroll */
    .k-deals-cats {
        display: flex !important;
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 10px !important;
        padding: 4px 0 10px !important;
    }
    .k-deals-cats::-webkit-scrollbar { display: none !important; }
    .k-deals-cat-item {
        flex-shrink: 0 !important;
        min-width: 68px !important;
        padding: 10px 6px 8px !important;
        font-size: 11px !important;
    }
    .k-deals-cat-icon {
        width: 40px !important; height: 40px !important;
        font-size: 20px !important;
        margin-bottom: 5px !important;
    }

    /* Flash deals grid: 1 col swipe carousel */
    .k-flash-deals-grid {
        display: flex !important;
        overflow-x: scroll !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 12px !important;
        padding: 4px 0 10px !important;
    }
    .k-flash-deals-grid::-webkit-scrollbar { display: none !important; }
    .k-flash-deal-card {
        flex-shrink: 0 !important;
        width: calc(80vw) !important;
        max-width: 260px !important;
        scroll-snap-align: start !important;
    }
    .k-flash-deal-img { height: 160px !important; }

    /* Main layout: hide sidebar, full-width grid */
    .k-deals-layout { grid-template-columns: 1fr !important; }
    .k-deals-sidebar { display: none !important; }

    /* Featured deals grid: 2 col */
    .k-featured-deals-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .k-deal-card-img { height: 130px !important; }
    .k-deal-card-title { font-size: 12px !important; }
    .k-deal-card-sale  { font-size: 13px !important; }

    /* Seller strip: stacked */
    .k-deals-seller-strip {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    .k-deals-seller-actions {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .k-deals-seller-actions .k-btn {
        flex: 1 !important;
        justify-content: center !important;
        font-size: 13px !important;
    }

    /* Trust badges: 2-col */
    .k-deals-trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .k-deals-trust-item { padding: 14px 12px !important; }
    .k-deals-trust-icon { font-size: 20px !important; width: 36px !important; height: 36px !important; }

    /* Newsletter: stacked */
    .k-deals-newsletter > .container {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .k-deals-newsletter form {
        width: 100% !important;
        max-width: none !important;
    }
    .k-deals-newsletter input[type="email"] { flex: 1 !important; min-width: 0 !important; }
}

/* ══ EVENTS PAGE ════════════════════════════════════════════ */
@media (max-width: 760px) {

    /* Category icons: horizontal scroll */
    .ke-cats {
        display: flex !important;
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 10px !important;
        padding: 4px 0 10px !important;
    }
    .ke-cats::-webkit-scrollbar { display: none !important; }
    .ke-cat-item {
        flex-shrink: 0 !important;
        min-width: 70px !important;
        padding: 10px 6px 8px !important;
        font-size: 11px !important;
    }
    .ke-cat-icon { font-size: 22px !important; margin-bottom: 4px !important; }

    /* 3-col layout → 1 col; hide both sidebars */
    .ke-layout {
        display: block !important;
    }
    .ke-filters, .ke-sidebar-right { display: none !important; }
    .ke-center { width: 100% !important; }

    /* Event grid: 1 col */
    .ke-event-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .ke-event-card {
        flex-direction: row !important;
        align-items: stretch !important;
    }
    .ke-event-card-img {
        width: 90px !important;
        flex-shrink: 0 !important;
        border-radius: 12px 0 0 12px !important;
        min-height: 100px !important;
    }
    .ke-event-card-placeholder { font-size: 28px !important; }
    .ke-event-card-body { padding: 10px 12px !important; }
    .ke-event-card-title { font-size: 13px !important; -webkit-line-clamp: 2 !important; }
    .ke-event-card-meta { font-size: 11px !important; }
    .ke-event-card-price { font-size: 13px !important; margin: 4px 0 !important; }
    .ke-event-card-actions { gap: 6px !important; }
    .ke-view-btn { padding: 6px 12px !important; font-size: 11.5px !important; }

    /* Month cards: 2-col */
    .ke-months {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Trust badges: 2-col */
    .ke-trust-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .ke-trust-item { padding: 14px 10px !important; }

    /* Newsletter: stacked */
    .ke-newsletter-inner { flex-direction: column !important; align-items: flex-start !important; }
    .ke-newsletter-form { width: 100% !important; flex-direction: column !important; }
    .ke-newsletter-email { width: 100% !important; box-sizing: border-box !important; }
    .ke-newsletter-btn { width: 100% !important; justify-content: center !important; }

    /* Grid header: compact */
    .ke-grid-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .ke-grid-sort select { width: 100% !important; }
    .ke-grid-head h2 { font-size: 17px !important; }
}

/* ══ STORES PAGE ════════════════════════════════════════════ */
@media (max-width: 760px) {

    /* Hero: compact */
    .kfs-header { padding: 20px 0 16px !important; }
    .kfs-header-inner { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
    .kfs-header-left h1 { font-size: 20px !important; }
    .kfs-header-stats { gap: 0 !important; margin-top: 8px !important; }
    .kfs-hstat { padding-right: 14px !important; margin-right: 14px !important; }
    .kfs-hstat-n { font-size: 18px !important; }
    .kfs-header-btn { width: 100% !important; justify-content: center !important; }

    /* Toolbar: stacked */
    .kfs-toolbar { flex-direction: column !important; gap: 8px !important; align-items: stretch !important; }
    .kfs-search-form { flex-wrap: wrap !important; gap: 8px !important; }
    .kfs-search-wrap { min-width: 0 !important; flex: 1 1 200px !important; }
    .kfs-search-select { flex: 1 1 120px !important; min-width: 0 !important; }
    .kfs-search-btn { width: 100% !important; }

    /* Store cards: 2-col tighter */
    .kfs-grid, .kfs-skel-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    /* Card: clip contents, no horizontal bleed */
    .kfs-card {
        overflow: hidden !important;
        min-width: 0 !important;
    }
    .kfs-card-banner { height: 72px !important; }
    /* Logo ring: smaller on mobile */
    .kfs-logo-ring {
        width: 34px !important; height: 34px !important;
        bottom: -14px !important; left: 10px !important;
        border-radius: 8px !important;
    }
    /* Rank badge: repositioned right of logo, tighter */
    .kfs-rank-badge {
        left: 50px !important;
        bottom: -10px !important;
        font-size: 8.5px !important;
        padding: 2px 7px 2px 5px !important;
        max-width: calc(100% - 54px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    /* Card body: accommodate smaller logo */
    .kfs-card-body { padding: 20px 10px 10px !important; }
    .kfs-card-name { font-size: 12px !important; margin-bottom: 4px !important; }
    /* Badges: allow wrap so second badge doesn't bleed */
    .kfs-badges {
        flex-wrap: wrap !important;
        gap: 3px !important;
        margin-bottom: 8px !important;
    }
    .kfs-badge { font-size: 8.5px !important; padding: 2px 5px !important; }
    .kfs-desc { font-size: 11px !important; margin-bottom: 6px !important; -webkit-line-clamp: 2 !important; }
    /* Rating */
    .kfs-rating { font-size: 11px !important; margin-bottom: 4px !important; }
    /* Footer: stack vertically so "X Products" + button never collide */
    .kfs-card-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding-top: 8px !important;
    }
    .kfs-prod-count { font-size: 11px !important; }
    .kfs-prod-count strong { font-size: 14px !important; }
    /* Visit button: full-width */
    .kfs-visit-btn {
        width: 100% !important;
        justify-content: center !important;
        font-size: 11.5px !important;
        padding: 7px 10px !important;
        border-radius: 7px !important;
    }

    /* Stats bar: 2-col already handled above in blade; refine text */
    .kfs-stat-n { font-size: 22px !important; }
}

/* ══ LOCATIONS PAGE ═════════════════════════════════════════ */
@media (max-width: 760px) {

    /* Hero */
    .loc-hero { padding: 22px 0 18px !important; }
    .loc-hero-inner { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
    .loc-hero h1 { font-size: 22px !important; }
    .loc-hero p  { font-size: 13px !important; }
    .loc-hero-stats { margin-top: 10px !important; gap: 18px !important; }
    .loc-hero-stat strong { font-size: 18px !important; }
    .loc-hero-search {
        width: 100% !important;
        max-width: none !important;
        flex: 1 !important;
    }
    .loc-hero-search input { font-size: 14px !important; padding: 11px 12px !important; }

    /* Popular pills: 2-col → already has @media in blade; match style */
    .loc-pill { padding: 12px 6px 10px !important; border-radius: 12px !important; }
    .loc-pill-icon { font-size: 20px !important; margin-bottom: 4px !important; }
    .loc-pill-name { font-size: 11px !important; }
    .loc-pill-count { font-size: 10px !important; }

    /* Location cards: 1-col */
    .loc-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .loc-card-top { padding: 12px 14px 10px !important; gap: 12px !important; }
    .loc-card-icon { width: 42px !important; height: 42px !important; font-size: 20px !important; border-radius: 10px !important; }
    .loc-card-name { font-size: 14px !important; }
    .loc-card-footer { font-size: 12px !important; padding: 8px 14px 10px !important; }
    .loc-section-row { margin: 20px 0 10px !important; }
    .loc-section-row h2 { font-size: 16px !important; }
}

/* ══ CATEGORIES PAGE ════════════════════════════════════════ */
@media (max-width: 760px) {

    /* Popular strip: horizontal scroll */
    .cat-popular-strip {
        display: flex !important;
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 10px !important;
        padding: 4px 0 10px !important;
    }
    .cat-popular-strip::-webkit-scrollbar { display: none !important; }
    .cat-pill {
        flex-shrink: 0 !important;
        min-width: 80px !important;
        padding: 10px 8px 8px !important;
        font-size: 11px !important;
    }
    .cat-pill .icon { font-size: 22px !important; }
    .cat-pill .icon-img { width: 28px !important; height: 28px !important; }
    .cat-pill .label { font-size: 11px !important; }
    .cat-pill .ads { font-size: 10px !important; }

    /* Category cards: 1-col stack */
    .cat-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .cat-card { border-radius: 12px !important; }
    .cat-card-head { padding: 14px !important; gap: 12px !important; }
    .cat-card-icon {
        width: 44px !important; height: 44px !important;
        border-radius: 10px !important; font-size: 22px !important;
    }
    .cat-card-icon img { width: 28px !important; height: 28px !important; }
    .cat-card-info h3 { font-size: 14px !important; }
    .cat-card-info p  { font-size: 12px !important; }
    .cat-section-head { margin: 20px 0 10px !important; }
    .cat-section-head h2 { font-size: 16px !important; }
}

/* ══ LOGIN & REGISTER PAGES ═════════════════════════════════
   Hide left-side marketing panel on mobile; form is full-width
═══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

    /* Hide the left marketing panel */
    .k-auth-left { display: none !important; }

    /* Full-width form panel */
    .k-auth-container {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
    .k-auth-right {
        padding: 24px 20px 32px !important;
        border-radius: 0 !important;
    }
    .k-auth-right h3 { font-size: 20px !important; }
    .k-auth-right .subtitle { font-size: 13px !important; }

    /* Trust footer: 2-col */
    .k-auth-footer-bar {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 16px !important;
    }
    .k-auth-trust { padding: 10px !important; gap: 8px !important; flex-direction: column !important; align-items: flex-start !important; }
    .k-auth-trust-icon { font-size: 22px !important; }
    .k-auth-trust-text strong { font-size: 12px !important; }
    .k-auth-trust-text span   { font-size: 11px !important; }

    /* Social buttons: full-width */
    .g_id_signin > div,
    .k-auth-right #fb-login-btn,
    .k-auth-right #fb-reg-btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Account type selector: 2-col */
    .k-account-types {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .k-account-type { padding: 10px 8px !important; }
    .k-account-type-icon { font-size: 24px !important; }
    .k-account-type-name { font-size: 12px !important; }
    .k-account-type-desc { font-size: 10.5px !important; }

    /* Input field height comfortable for touch */
    .k-form-control { height: 46px !important; font-size: 15px !important; }
    .k-form-label { font-size: 13px !important; }
    .k-form-group { margin-bottom: 14px !important; }
}

/* ══ CONTACT PAGE ═══════════════════════════════════════════ */
@media (max-width: 760px) {

    /* Side-by-side layout → stacked */
    .k-layout-sidebar-right {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Form card */
    .k-card-body { padding: 20px 16px !important; }
    .k-card-body h3 { font-size: 16px !important; }

    /* Info card rows: comfortable touch targets */
    .k-info-card { padding: 16px !important; margin-bottom: 12px !important; }
    .k-info-card h3 { font-size: 15px !important; }
    .k-info-row {
        padding: 9px 0 !important;
        gap: 10px !important;
    }
    .k-info-icon { font-size: 18px !important; width: 28px !important; }
    .k-info-val  { font-size: 13.5px !important; }

    /* Submit button full-width */
    #contact-submit { width: 100% !important; justify-content: center !important; }
}

/* ══ ABOUT / TERMS / PRIVACY (blog-content prose) ═══════════ */
@media (max-width: 760px) {

    .blog-content { padding: 0 !important; font-size: 14.5px !important; line-height: 1.75 !important; }
    .blog-content h2 { font-size: 17px !important; margin-top: 24px !important; margin-bottom: 8px !important; }
    .blog-content p  { margin-bottom: 12px !important; }
    .blog-content ul { padding-left: 18px !important; margin-bottom: 12px !important; }
    .blog-content ul li { margin-bottom: 6px !important; }
    .blog-content a { word-break: break-word !important; }

    /* Team grid in About: 1-col */
    .blog-content > div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}