/**
 * Vinathis CMS – Shop Module Shared Stylesheet
 * Applied across all themes for consistent shop display.
 * Included in each theme's header.php via <link> tag.
 */

/* ── Page-section wrapper (new default template) ──────── */
.sp-page-section {
    width: 100%;
    background: #f8fafc;
    padding: 24px 0 48px;
}

/* ── Inner centering container ────────────────────────── */
.sp-page-inner {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ── Override any theme-level .container constraints ──── */
.sp-page-section .container,
.sd-wrapper .container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* ── OLD template compatibility fixes (sp-wrapper) ───── */
.sp-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px 40px;
    box-sizing: border-box;
}

.sp-main {
    display: block !important;
    width: 100% !important;
}

.sp-sidebar {
    display: none !important;
}

/* ── Product listing grid ─────────────────────────────── */
.sp-product-grid,
.sp-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* ── Product card ─────────────────────────────────────── */
.sp-card,
.shop-card,
.np-card {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* ── Chips ────────────────────────────────────────────── */
.sp-chips,
.shop-chips,
.np-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
}

.sp-chip,
.shop-chip,
.np-chip {
    white-space: nowrap !important;
}

/* ── Page headings ────────────────────────────────────── */
.sp-head h1,
.sp-page-title,
.shop-page-head h1,
.np-shop-title {
    white-space: normal !important;
    font-size: 22px;
    font-weight: 800;
}

/* ── Detail page: wrapper ─────────────────────────────── */
.sd-wrapper {
    width: 100% !important;
    box-sizing: border-box;
}

/* ── Detail page: inner container ────────────────────── */
.sd-inner {
    display: block !important;
    width: 100% !important;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px 40px;
    box-sizing: border-box;
}

/* ── Detail page: hide empty sidebar ─────────────────── */
.sd-sidebar-area {
    display: none !important;
}

.sd-content-area {
    width: 100% !important;
    flex: none !important;
}

/* ── Detail page: image + info 2-col layout ──────────── */
.sd-layout {
    display: flex !important;
    gap: 32px;
    align-items: flex-start;
    width: 100%;
}

.sd-gallery-col {
    width: 44%;
    flex-shrink: 0;
}

.sd-info-col {
    flex: 1;
    min-width: 0;
}

/* ── Related products ─────────────────────────────────── */
.sd-related-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
}

/* ════════════════════ RESPONSIVE ══════════════════════ */
@media (max-width: 1200px) {

    .sp-product-grid,
    .sp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {

    .sp-product-grid,
    .sp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .sd-layout {
        flex-direction: column !important;
    }

    .sd-gallery-col {
        width: 100% !important;
    }

    .sd-related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {

    .sp-product-grid,
    .sp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .sp-page-inner,
    .sd-inner {
        padding: 0 12px 30px !important;
    }

    .sd-related-grid {
        gap: 10px !important;
    }
}