/* ============================================================
   LOOPED JOYS — Layout
   layout.css: Containers · Grid · Page Structure
   ============================================================ */

/* ── Containers ─────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container-wide {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container-sm {
    width: 100%;
    max-width: var(--container-sm);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ── Site Structure ─────────────────────────────────────────── */
.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    flex: 1;
    padding-top: calc(var(--header-h) + var(--announce-h));
}

/* Adjust when announcement bar is hidden */
body.no-announcement .site-content {
    padding-top: var(--header-h);
}

/* ── Grid System ─────────────────────────────────────────────── */
.grid {
    display: grid;
    gap: var(--sp-6);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Auto-fit grids (responsive without media queries) */
.grid-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-6);
}

.grid-collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-6);
}

/* ── Flex Utilities ──────────────────────────────────────────── */
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-wrap   { flex-wrap: wrap; }
.gap-2 { gap: var(--sp-2); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

/* ── Shop Layout (with filter sidebar) ──────────────────────── */
.shop-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--sp-8);
    align-items: start;
}

.shop-layout__sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--announce-h) + var(--sp-6));
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .shop-layout {
        grid-template-columns: 1fr;
    }
    .shop-layout__sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
    .grid-products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-4);
    }
}

@media (max-width: 480px) {
    .grid-3 { grid-template-columns: 1fr; }
    .grid-products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-3);
    }
}