/* ============================================================
   RESPONSIVE FIXES — prevents horizontal overshoot on mobile
   ============================================================ */

/* Global guardrails */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
*, *::before, *::after {
    box-sizing: border-box;
}

/* Media never overflows */
img, video, iframe, svg, canvas {
    max-width: 100%;
    height: auto;
}

/* Prevent long words / URLs from stretching containers */
p, li, a, span, td, th, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Code blocks scroll horizontally instead of expanding */
pre, code, .pd-changelog, .pd-wysiwyg pre {
    overflow-x: auto;
    max-width: 100%;
}

/* Form controls never overflow */
input, textarea, select, button {
    max-width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

/* Grid/flex children can shrink — THIS is the fix that stops overshoot */
.product-detail > *,
.products-layout > *,
.admin-layout > *,
.cart-grid > *,
.checkout-grid > *,
.blog-editor-wrap > *,
.campaign-layout > * {
    min-width: 0;
}

/* Container never wider than viewport */
.container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Tables scroll horizontally */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   PRODUCTS.PHP — filter sidebar collapses cleanly
   ============================================================ */
@media (max-width: 900px) {
    .products-layout {
        display: block !important;
        grid-template-columns: none !important;
    }
    .products-layout .filter-sidebar {
        position: static !important;
        width: 100% !important;
        margin-bottom: 1.5rem;
    }
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    }
}

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

/* ============================================================
   PRODUCT.PHP — main + sidebar stack cleanly
   ============================================================ */
@media (max-width: 900px) {
    .product-detail {
        display: block !important;
        grid-template-columns: none !important;
    }
    .product-sidebar {
        margin-top: 1.5rem;
    }
    .pd-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pd-tab-btn {
        font-size: .85rem;
        padding: .65rem .9rem;
        flex-shrink: 0;
    }
    .pd-share-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .pd-wysiwyg h1 { font-size: 1.4rem; }
    .pd-wysiwyg h2 { font-size: 1.2rem; }
    .pd-wysiwyg h3 { font-size: 1.05rem; }
    .pd-wysiwyg pre { font-size: .8rem; padding: .75rem; }
    .pd-rating-big { font-size: 2.5rem; }
    .pd-comment-avatar { width: 40px; height: 40px; font-size: 1rem; }
}

@media (max-width: 540px) {
    .pd-share-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .pd-share-btn {
        min-height: 60px;
        font-size: .65rem;
    }
    .pd-share-copy input { font-size: .7rem; }
}

/* ============================================================
   SELL.PHP — main form + sidebar + fee gate
   ============================================================ */
@media (max-width: 900px) {
    /* Main form + right sidebar */
    div[style*="grid-template-columns:1fr 340px"] {
        display: block !important;
        grid-template-columns: none !important;
    }
    div[style*="grid-template-columns:1fr 340px"] > aside {
        margin-top: 1.5rem;
    }
    /* Two-column form fields (price, version, license, etc.) */
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 540px) {
    /* Fee amount in payment gate */
    div[style*="font-size:2.75rem"] {
        font-size: 2rem !important;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    div[style*="font-size:2.5rem"] {
        font-size: 1.75rem !important;
        overflow-wrap: break-word;
    }
    /* Benefit list icons */
    div[style*="max-width:560px"] {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }
}

/* ============================================================
   ADMIN — dashboards, blog editor, campaigns
   ============================================================ */
@media (max-width: 900px) {
    .admin-layout {
        display: block !important;
        grid-template-columns: none !important;
    }
    .adm-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .settings-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    .settings-tab {
        flex-shrink: 0;
    }
    .blog-editor-wrap,
    .campaign-layout {
        display: block !important;
    }
    .blog-editor-wrap aside,
    .campaign-layout aside {
        margin-top: 1.5rem;
    }
}

@media (max-width: 540px) {
    .adm-stats-grid {
        grid-template-columns: 1fr !important;
    }
    .modal-card {
        width: 95% !important;
        max-width: 95% !important;
    }
}

/* ============================================================
   CART + CHECKOUT
   ============================================================ */
@media (max-width: 900px) {
    .cart-grid,
    .checkout-grid {
        display: block !important;
        grid-template-columns: none !important;
    }
    .cart-grid > *,
    .checkout-grid > * {
        margin-bottom: 1.5rem;
    }
}