/* SketchValley — mobile.css */

@media (max-width: 768px) {

    /* Hide sidebar on mobile */
    .sv-sidebar {
        display: none !important;
    }

    /* Body wrap stacks vertically — NO overflow:hidden (breaks sticky) */
    .sv-body-wrap {
        display: block !important;
        width: 100% !important;
    }

    .sv-main-wrap {
        width: 100% !important;
        min-width: 0 !important;
        display: block !important;
    }

    .sv-main {
        padding: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Grid — 2 columns on mobile */
    .sv-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: .625rem !important;
        width: 100% !important;
    }

    .sv-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .sv-hero h1 { font-size: 1.25rem !important; word-break: break-word !important; }
    .sv-hero p  { font-size: .875rem !important; word-break: break-word !important; }

    .taxonomy-header h1,
    .taxonomy-header p {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .sv-filters {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding-bottom: .5rem !important;
    }

    .sv-card-ad .sv-card-img { overflow: hidden !important; }
    .sv-card-ad .sv-card-img img {
        width: 100% !important; height: 100% !important;
        max-width: 100% !important; object-fit: cover !important;
    }

    .tool-page-wrap { padding: 1rem !important; max-width: 100% !important; }

    .coll-layout { grid-template-columns: 1fr !important; }
    .coll-info-panel { position: static !important; }

    .ill-page, .ill-layout { flex-direction: column !important; width: 100% !important; }
    .ill-breadcrumbs ol { flex-wrap: wrap !important; }

    .portfolio-pagination { flex-wrap: wrap !important; justify-content: center !important; }
}

@media (max-width: 400px) {
    .sv-grid { grid-template-columns: 1fr !important; }
}

/* Collection zoom button */
.coll-ill-preview {
    position: relative !important;
    overflow: visible !important;
}
.coll-zoom-btn {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    z-index: 2 !important;
}