html,
body {
    height: 100%;
    margin: 0;
}

en-fragment {
    display: block;
    width: 100%;
}

en-mfe {
    display: block;
    width: 100%;
}


/* ── Layout utilities for shell templates ── */

.h-full { height: 100%; }
.w-full { width: 100%; }
.min-h-screen { min-height: 100dvh; }

/* Flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }

/* Grid */
.grid { display: grid; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }

/* Gap / spacing (standard Tailwind v4: 1 unit = 0.25rem) */
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* Sizing */
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-27 { height: 6.75rem; }
.w-1\/5 { width: 20%; }

/* Arbitrary values */
.h-\[150px\] { height: 150px; }
.h-\[180px\] { height: 180px; }
.h-\[700px\] { height: 700px; }
.min-h-\[700px\] { min-height: 700px; }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Container */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }