/**
 * Collier — consistent inset between frames/boxes and product imagery
 * Loaded site-wide after theme overrides.
 */
:root {
    --lux-frame-inset: clamp(20px, 3.5vw, 36px);
    --lux-media-body-gap: clamp(14px, 2.2vw, 22px);
    --lux-card-grid-gap: clamp(22px, 3.2vw, 40px);
    --lux-carousel-media-gap: clamp(20px, 2.8vw, 26px);
}

/* ——— Shop & related product cards (maison) ——— */
.maison-product {
    gap: var(--lux-media-body-gap);
}

.maison-product-frame {
    padding: var(--lux-frame-inset);
}

.maison-product-copy {
    padding: clamp(18px, 2.5vw, 28px) clamp(10px, 1.5vw, 14px) clamp(16px, 2vw, 24px);
}

.maison-products-grid,
.lux-product-grid {
    gap: var(--lux-card-grid-gap);
}

/* ——— Homepage carousel cards ——— */
.home-product-card__media,
.home-category-card__media {
    margin-bottom: var(--lux-carousel-media-gap);
}

/* ——— Compact / legacy card bodies ——— */
.lux-card-compact__body {
    padding-top: calc(var(--lux-media-body-gap) + 6px);
}

.lux-pcard__body {
    padding-top: var(--lux-media-body-gap);
}

.product-card-body {
    padding-top: 28px;
}

/* ——— Category grids ——— */
.lux-category-grid {
    gap: clamp(16px, 2.5vw, 26px);
}

/* ——— Product detail gallery ——— */
.pd-gallery-main {
    box-sizing: border-box;
    padding: var(--lux-frame-inset);
}

.pd-gallery-thumbs {
    gap: 14px;
    margin-top: var(--lux-media-body-gap);
}

.pd-gallery-thumb {
    padding: 5px;
    box-sizing: border-box;
}

/* ——— Cart line items ——— */
.cart-item {
    gap: calc(var(--lux-media-body-gap) + 6px);
}

@media (max-width: 768px) {
    .lux-product-grid,
    .maison-products-grid,
    .products-grid {
        gap: clamp(18px, 4vw, 28px) !important;
    }

    .maison-product-frame {
        padding: clamp(14px, 3.2vw, 22px);
    }

    .maison-product-copy {
        padding: clamp(14px, 3vw, 20px) clamp(8px, 2vw, 12px) clamp(12px, 2.5vw, 18px);
    }

    .home-product-card__media,
    .home-category-card__media {
        margin-bottom: clamp(18px, 4vw, 24px);
    }
}
