/* Explain: Organic boutique layout helpers and responsive section spacing */
.store-shell {
    width: min(100% - 2rem, 1180px);
    margin-inline: auto;
}

.section-breath {
    padding-block: clamp(4rem, 8vw, 7rem);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: stretch;
}

.hero-image-frame {
    min-height: clamp(23rem, 48vw, 38rem);
    border-radius: 2.25rem;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.hero-product-frame {
    min-height: clamp(23rem, 48vw, 38rem);
    border-radius: 2.25rem;
    background:
        radial-gradient(circle at 72% 20%, rgba(163, 144, 183, 0.35), transparent 11rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(246, 244, 248, 0.9));
    box-shadow: var(--shadow-soft);
}

.bento-ingredient {
    border-radius: 2rem;
    background:
        linear-gradient(135deg, rgba(138, 171, 115, 0.18), rgba(163, 144, 183, 0.18)),
        rgba(255, 255, 255, 0.65);
    box-shadow: var(--shadow-card);
}

.page-hero {
    padding-block: clamp(3.25rem, 7vw, 6rem);
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-image-frame,
    .hero-product-frame {
        min-height: 24rem;
    }
}

@media (max-width: 640px) {
    .store-shell {
        width: min(100% - 1.25rem, 1180px);
    }

    .section-breath {
        padding-block: 3.5rem;
    }

    .hero-image-frame,
    .hero-product-frame {
        min-height: 20rem;
        border-radius: 1.5rem;
    }
}