/* ==========================================================================
   Marony — storefront home page
   Everything is namespaced `mh-` so it cannot collide with the shared
   storefront styles (front.partials.styles). Layout uses logical properties
   (inline-start / inline-end) so the same rules serve Arabic RTL and English LTR.
   ========================================================================== */

/* Tokens, container, buttons and the header live in header.css, loaded first. */

/* 4K: scale the home page's type instead of leaving empty margins */
@media (min-width: 2560px) {
    html { font-size: 20px; }
}

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }

body {
    font-family: var(--mh-font);
    background-color: var(--mh-white);
    color: var(--mh-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

[dir="ltr"] body { font-family: var(--mh-font); }

.mh-main { background: var(--mh-white); }

.mh-section { padding-block: var(--mh-section-y); }

.mh-main img { max-width: 100%; }

.mh-empty {
    margin: 0;
    padding: 40px 16px;
    text-align: center;
    color: var(--mh-muted);
    background: var(--mh-gray);
    border-radius: var(--mh-radius);
}

.mh-main a:focus-visible,
.mh-main button:focus-visible,
.mh-main [tabindex]:focus-visible {
    outline: 3px solid var(--mh-nude);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--mh-primary);
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .mh-main *, .mh-footer *, .mh-toast {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}