/* ═══ LAYOUT — Containers, Grid, Sections ════════════ */

/* ── Container ── */
body.inkside-theme .ink-container {
    width: 100%;
    max-width: var(--ink-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ink-container-padding);
    padding-right: var(--ink-container-padding);
}

/* ── Section spacing ── */
body.inkside-theme .ink-section {
    padding-top: var(--ink-space-3xl);
    padding-bottom: var(--ink-space-3xl);
}

body.inkside-theme .ink-section--sm {
    padding-top: var(--ink-space-xl);
    padding-bottom: var(--ink-space-xl);
}

/* ── Grid system ── */
body.inkside-theme .ink-grid {
    display: grid;
    gap: var(--ink-grid-gap);
}

body.inkside-theme .ink-grid--2 { grid-template-columns: repeat(2, 1fr); }
body.inkside-theme .ink-grid--3 { grid-template-columns: repeat(3, 1fr); }
body.inkside-theme .ink-grid--4 { grid-template-columns: repeat(4, 1fr); }

body.inkside-theme .ink-grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ── Flex utilities ── */
body.inkside-theme .ink-flex {
    display: flex;
}

body.inkside-theme .ink-flex--center {
    align-items: center;
    justify-content: center;
}

body.inkside-theme .ink-flex--between {
    align-items: center;
    justify-content: space-between;
}

body.inkside-theme .ink-flex--wrap {
    flex-wrap: wrap;
}

body.inkside-theme .ink-flex--col {
    flex-direction: column;
}

body.inkside-theme .ink-gap-xs  { gap: var(--ink-space-xs); }
body.inkside-theme .ink-gap-sm  { gap: var(--ink-space-sm); }
body.inkside-theme .ink-gap-md  { gap: var(--ink-space-md); }
body.inkside-theme .ink-gap-lg  { gap: var(--ink-space-lg); }
body.inkside-theme .ink-gap-xl  { gap: var(--ink-space-xl); }

/* ── Shop layout: sidebar + grid ── */
body.inkside-theme .ink-shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--ink-space-xl);
    align-items: start;
}

/* ── Full-width sections ── */
body.inkside-theme .ink-full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    body.inkside-theme .ink-shop-layout {
        grid-template-columns: 240px 1fr;
        gap: var(--ink-space-md);
    }
    body.inkside-theme .ink-grid--4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    body.inkside-theme .ink-shop-layout {
        grid-template-columns: 1fr;
    }
    body.inkside-theme .ink-grid--3,
    body.inkside-theme .ink-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
    body.inkside-theme .ink-section {
        padding-top: var(--ink-space-xl);
        padding-bottom: var(--ink-space-xl);
    }
}

@media (max-width: 480px) {
    body.inkside-theme .ink-grid--2,
    body.inkside-theme .ink-grid--3,
    body.inkside-theme .ink-grid--4 {
        grid-template-columns: 1fr;
    }

    body.inkside-theme {
        --ink-container-padding: var(--ink-space-sm);
    }
}
