/* MiniMall View Compiler CSS: controlled storefront sections. */
/* MiniMall View Compiler sections */
.mm-view {
    display: grid;
    gap: var(--mm-space-7, 48px);
    padding: var(--mm-space-6, 32px) 0;
}

.mm-view-section {
    width: 100%;
}

.mm-view-section .mm-section-header {
    margin-bottom: var(--mm-space-5, 24px);
}

.mm-view-section .mm-section-header h2,
.mm-view-section h2 {
    color: var(--mm-color-text, #111);
    font-size: var(--mm-font-size-xl, 24px);
    line-height: var(--mm-line-height-tight, 1.2);
    margin: 0 0 var(--mm-space-2, 8px);
}

.mm-view-section p {
    color: var(--mm-color-muted, #666);
}

.mm-section-hero,
.mm-section-split_hero,
.mm-section-search_hero,
.mm-image-text,
.mm-featured-product {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
    gap: var(--mm-space-6, 32px);
    align-items: center;
    padding: var(--mm-space-7, 48px);
    background: var(--mm-color-surface-alt, #f7f7f8);
    border-radius: var(--mm-radius-lg, 22px);
}

.mm-section-search_hero {
    grid-template-columns: 1fr;
    text-align: center;
}

.mm-view-copy h1,
.mm-view-copy h2 {
    margin: 0 0 var(--mm-space-3, 12px);
    color: var(--mm-color-text, #111);
    font-size: var(--mm-font-size-2xl, 32px);
    line-height: var(--mm-line-height-tight, 1.2);
}

.mm-eyebrow {
    color: var(--mm-color-accent, #0b5cff);
    font-size: var(--mm-font-size-sm, 14px);
    font-weight: 700;
    margin: 0 0 var(--mm-space-2, 8px);
    text-transform: uppercase;
}

.mm-view-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mm-space-3, 12px);
    margin-top: var(--mm-space-5, 24px);
}

.mm-view-media img,
.mm-section-image,
.mm-hero-image,
.mm-image-text-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--mm-radius, 14px);
}

.mm-view-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--mm-space-4, 16px);
}

.mm-view-tile {
    display: grid;
    gap: var(--mm-space-2, 8px);
    padding: var(--mm-space-5, 24px);
    color: var(--mm-color-text, #111);
    text-decoration: none;
    background: var(--mm-card-bg, #fff);
    border: 1px solid var(--mm-card-border, #e7e7e8);
    border-radius: var(--mm-radius, 14px);
}

.mm-view-tile:hover {
    border-color: var(--mm-color-border-strong, #d4d4d6);
}

.mm-tile-label {
    font-weight: 700;
}

.mm-tile-text {
    color: var(--mm-color-muted, #666);
    font-size: var(--mm-font-size-sm, 14px);
}

.mm-promo-strip {
    padding: var(--mm-space-3, 12px) var(--mm-space-4, 16px);
    color: var(--mm-color-text, #111);
    text-align: center;
    background: var(--mm-color-accent-soft, #eef4ff);
    border-radius: var(--mm-radius-pill, 999px);
}

.mm-promo-strip a {
    color: inherit;
    text-decoration: none;
}

.mm-faq-item {
    padding: var(--mm-space-4, 16px) 0;
    border-bottom: 1px solid var(--mm-color-border, #e7e7e8);
}

.mm-faq-item summary {
    color: var(--mm-color-text, #111);
    cursor: pointer;
    font-weight: 700;
}

.mm-faq-answer,
.mm-rich-text-body,
.mm-service-text {
    color: var(--mm-color-muted, #666);
    margin-top: var(--mm-space-3, 12px);
}

.mm-specs-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--mm-color-surface, #fff);
    border: 1px solid var(--mm-color-border, #e7e7e8);
    border-radius: var(--mm-radius, 14px);
    overflow: hidden;
}

.mm-specs-table th,
.mm-specs-table td {
    padding: var(--mm-space-3, 12px) var(--mm-space-4, 16px);
    border-bottom: 1px solid var(--mm-color-border, #e7e7e8);
    text-align: left;
}

.mm-specs-table th {
    color: var(--mm-color-text, #111);
    width: 35%;
}

.mm-service-info {
    padding: var(--mm-space-5, 24px);
    background: var(--mm-color-surface-alt, #f7f7f8);
    border-radius: var(--mm-radius, 14px);
}

.mm-service-list {
    display: grid;
    gap: var(--mm-space-2, 8px);
    margin: var(--mm-space-3, 12px) 0 0;
    padding-left: var(--mm-space-5, 24px);
    color: var(--mm-color-muted, #666);
}

.mm-view-error {
    padding: var(--mm-space-6, 32px);
    background: var(--mm-color-surface-alt, #f7f7f8);
    border-radius: var(--mm-radius, 14px);
}

@media (max-width: 760px) {
    .mm-section-hero,
    .mm-section-split_hero,
    .mm-section-search_hero,
    .mm-image-text,
    .mm-featured-product {
        grid-template-columns: 1fr;
        padding: var(--mm-space-5, 24px);
    }

    .mm-view-copy h1,
    .mm-view-copy h2 {
        font-size: var(--mm-font-size-xl, 24px);
    }
}