/* ==========================================
   CONTAINER
========================================== */

.container {
    width: min(100% - 2rem, var(--container-width));
    margin-inline: auto;
}

/* ==========================================
   MAIN
========================================== */

/* Sticky footer: main grows to fill the viewport so short pages (e.g. the shop
   with few products) don't leave the footer riding up mid-screen. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
    padding: 60px 0;
}

/* ==========================================
   SECTION
========================================== */

.section {
    padding: clamp(48px, 7vw, 100px) 0;
}

/* ==========================================
   FLEX
========================================== */

.flex {
    display: flex;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================
   GRID
========================================== */

.grid {
    display: grid;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

/* ==========================================
   RESPONSIVE GRIDS
   Desktop counts above; collapse gracefully so cards never get too narrow.
========================================== */

/* Tablet */
@media (max-width: 1023px) {
    .grid-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile — two product columns; keep cards a usable width. */
@media (max-width: 767px) {
    .grid-4,
    .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }
    .grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}