.nmf-banners-wrap {
    width: 100%;
}

.nmf-banners-intro {
    --nmf-intro-width: 720px;
    max-width: var(--nmf-intro-width);
    margin-bottom: 42px;
    color: #151218;
}

.nmf-banners-wrap--intro-center .nmf-banners-intro {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.nmf-banners-wrap--intro-right .nmf-banners-intro {
    margin-left: auto;
    text-align: right;
}

.nmf-banners-intro__eyebrow {
    display: inline-flex;
    margin-bottom: 14px;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(20, 18, 23, .55);
}

.nmf-banners-intro__title {
    margin: 0;
    font-size: clamp(36px, 5.2vw, 86px);
    font-weight: 300;
    line-height: .92;
    letter-spacing: -.055em;
    color: currentColor;
}

.nmf-banners-intro__text {
    max-width: 48em;
    margin: 18px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(20, 18, 23, .68);
}

.nmf-banners-wrap--intro-center .nmf-banners-intro__text {
    margin-right: auto;
    margin-left: auto;
}

.nmf-banners-wrap--intro-right .nmf-banners-intro__text {
    margin-left: auto;
}

.nmf-banners {
    --nmf-banner-gap: 24px;
    --nmf-banner-height: 460px;
    --nmf-banner-text: #ffffff;
    --nmf-banner-overlay-color: rgba(16, 13, 14, .38);
    --nmf-banner-overlay-opacity: .72;
    --nmf-banner-light-overlay-opacity: .28;
    --nmf-banner-shine-opacity: 0;
    display: grid;
    width: 100%;
    gap: var(--nmf-banner-gap);
    color: var(--nmf-banner-text);
}

.nmf-banners--editorial,
.nmf-banners--story,
.nmf-banners--lookbook,
.nmf-banners--mosaic {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: calc(var(--nmf-banner-height) / 2);
}

.nmf-banners--two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nmf-banners--clean {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.nmf-banner {
    position: relative;
    display: flex;
    min-height: var(--nmf-banner-height);
    overflow: hidden;
    isolation: isolate;
    color: var(--nmf-card-text, var(--nmf-banner-text));
    text-decoration: none !important;
    background: var(--nmf-card-bg, #f4eeeb);
}

.nmf-banners--editorial .nmf-banner,
.nmf-banners--story .nmf-banner,
.nmf-banners--lookbook .nmf-banner,
.nmf-banners--mosaic .nmf-banner {
    min-height: 0;
}

.nmf-banners--editorial .nmf-banner--normal { grid-column: span 4; grid-row: span 2; }
.nmf-banners--editorial .nmf-banner--wide { grid-column: span 8; grid-row: span 2; }
.nmf-banners--editorial .nmf-banner--tall { grid-column: span 4; grid-row: span 4; }
.nmf-banners--editorial .nmf-banner--large { grid-column: span 6; grid-row: span 4; }

.nmf-banners--story .nmf-banner--normal { grid-column: span 3; grid-row: span 2; }
.nmf-banners--story .nmf-banner--wide { grid-column: span 6; grid-row: span 2; }
.nmf-banners--story .nmf-banner--tall { grid-column: span 4; grid-row: span 4; }
.nmf-banners--story .nmf-banner--large { grid-column: span 8; grid-row: span 4; }

.nmf-banners--lookbook .nmf-banner--normal { grid-column: span 3; grid-row: span 2; }
.nmf-banners--lookbook .nmf-banner--wide { grid-column: span 6; grid-row: span 2; }
.nmf-banners--lookbook .nmf-banner--tall { grid-column: span 3; grid-row: span 4; }
.nmf-banners--lookbook .nmf-banner--large { grid-column: span 6; grid-row: span 4; }

.nmf-banners--mosaic .nmf-banner--normal { grid-column: span 3; grid-row: span 2; }
.nmf-banners--mosaic .nmf-banner--wide { grid-column: span 6; grid-row: span 2; }
.nmf-banners--mosaic .nmf-banner--tall { grid-column: span 3; grid-row: span 4; }
.nmf-banners--mosaic .nmf-banner--large { grid-column: span 6; grid-row: span 4; }

.nmf-banners--two-column .nmf-banner,
.nmf-banners--clean .nmf-banner {
    min-height: var(--nmf-banner-height);
}

.nmf-banner__picture,
.nmf-banner__image,
.nmf-banner__overlay,
.nmf-banner__shine {
    position: absolute;
}

.nmf-banner__picture,
.nmf-banner__overlay,
.nmf-banner__shine {
    inset: 0;
}

.nmf-banner__picture {
    display: block;
    z-index: 1;
}

.nmf-banner__image {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--nmf-card-fit, cover) !important;
    object-position: var(--nmf-card-position, center center) !important;
    transform: scale(1.001);
    transition: transform 1.15s var(--nmf-ease), filter 1.15s var(--nmf-ease), opacity .55s var(--nmf-ease);
}

.nmf-banner__overlay {
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.24) 62%, rgba(0,0,0,.55) 100%),
        var(--nmf-banner-overlay-color);
    opacity: var(--nmf-card-overlay-opacity, var(--nmf-banner-overlay-opacity));
    transition: opacity .55s var(--nmf-ease);
}

.nmf-banner__shine {
    z-index: 3;
    background: radial-gradient(circle at 25% 15%, rgba(255,255,255,.22), transparent 34%);
    opacity: var(--nmf-card-shine-opacity, var(--nmf-banner-shine-opacity));
    pointer-events: none;
    transition: opacity .55s var(--nmf-ease), transform .9s var(--nmf-ease);
}


.nmf-banners .nmf-banner.nmf-banner--media-custom > .nmf-banner__picture,
.nmf-banners .nmf-banner.nmf-banner--media-custom > .nmf-banner__overlay,
.nmf-banners .nmf-banner.nmf-banner--media-custom > .nmf-banner__shine {
    right: 0 !important;
    left: 0 !important;
    height: var(--nmf-card-media-height, 68%) !important;
}

.nmf-banner__content {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 34px;
    color: inherit;
}

.nmf-banner--pos-top-left .nmf-banner__content { align-items: flex-start; justify-content: flex-start; text-align: left; }
.nmf-banner--pos-top-right .nmf-banner__content { align-items: flex-end; justify-content: flex-start; text-align: right; }
.nmf-banner--pos-center .nmf-banner__content { align-items: center; justify-content: center; text-align: center; }
.nmf-banner--pos-bottom-left .nmf-banner__content { align-items: flex-start; justify-content: flex-end; text-align: left; }
.nmf-banner--pos-bottom-right .nmf-banner__content { align-items: flex-end; justify-content: flex-end; text-align: right; }

.nmf-banner__badge {
    display: inline-flex;
    margin-bottom: 12px;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: currentColor;
}

.nmf-banner__title {
    display: block;
    max-width: 10.5em;
    font-size: clamp(28px, 3vw, 58px);
    font-weight: 300;
    line-height: .96;
    letter-spacing: -.045em;
    color: currentColor;
}

.nmf-banner__subtitle {
    display: block;
    max-width: 28em;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255,255,255,.82);
}

.nmf-banner__cta {
    position: relative;
    display: inline-flex;
    margin-top: 22px;
    width: fit-content;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: currentColor;
}

.nmf-banner__cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 1px;
    background: currentColor;
    transform-origin: left;
    transform: scaleX(.45);
    transition: transform .45s var(--nmf-ease);
}

.nmf-banner--style-light {
    --nmf-card-text: #171419;
    background: var(--nmf-card-bg, #f2ece9);
}

.nmf-banner--style-light .nmf-banner__overlay {
    background: linear-gradient(90deg, rgba(244,238,235,.86) 0%, rgba(244,238,235,.46) 40%, rgba(244,238,235,.05) 100%);
    opacity: var(--nmf-card-light-overlay-opacity, var(--nmf-banner-light-overlay-opacity));
}

.nmf-banner--style-light .nmf-banner__shine {
    background: radial-gradient(circle at 18% 20%, rgba(255,255,255,.62), transparent 36%);
    opacity: var(--nmf-card-shine-opacity, var(--nmf-banner-shine-opacity));
}

.nmf-banner--style-light .nmf-banner__subtitle {
    color: rgba(20, 18, 23, .68);
}

.nmf-banner--style-product {
    --nmf-card-text: #171419;
    --nmf-card-fit: contain;
    background: var(--nmf-card-bg, #f3eeeb);
}

.nmf-banner--style-product .nmf-banner__picture {
    inset: 8% 10% 30%;
}

.nmf-banners .nmf-banner--style-product.nmf-banner--media-custom > .nmf-banner__picture {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    height: var(--nmf-card-media-height, 62%) !important;
}

.nmf-banner--style-product .nmf-banner__overlay,
.nmf-banner--style-product .nmf-banner__shine {
    display: none;
}

.nmf-banner--style-product .nmf-banner__content {
    justify-content: flex-end;
}

.nmf-banner--style-product .nmf-banner__badge {
    color: rgba(20, 18, 23, .48);
}

.nmf-banner--style-product .nmf-banner__title {
    max-width: 14em;
    font-size: clamp(20px, 2vw, 34px);
    line-height: 1.04;
    letter-spacing: -.03em;
}

.nmf-banner--style-product .nmf-banner__subtitle {
    max-width: 24em;
    color: rgba(20, 18, 23, .66);
}

.nmf-banner--style-product .nmf-banner__cta {
    color: rgba(20, 18, 23, .92);
}

.nmf-banner:hover,
.nmf-banner:focus-visible {
    color: var(--nmf-card-text, var(--nmf-banner-text));
    text-decoration: none !important;
}

.nmf-banner:hover .nmf-banner__image,
.nmf-banner:focus-visible .nmf-banner__image {
    transform: scale(1.065);
    filter: saturate(1.03) contrast(1.02);
}

.nmf-banner--style-product:hover .nmf-banner__image,
.nmf-banner--style-product:focus-visible .nmf-banner__image {
    transform: scale(1.035);
    filter: saturate(1.02) contrast(1.01);
}

.nmf-banner:hover .nmf-banner__shine,
.nmf-banner:focus-visible .nmf-banner__shine {
    opacity: var(--nmf-card-shine-opacity, var(--nmf-banner-shine-opacity));
    transform: scale(1.06);
}

.nmf-banner:hover .nmf-banner__cta::after,
.nmf-banner:focus-visible .nmf-banner__cta::after {
    transform: scaleX(1);
}

.nmf-banners--hover-reveal .nmf-banner__subtitle,
.nmf-banners--hover-reveal .nmf-banner__cta {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .45s var(--nmf-ease), transform .45s var(--nmf-ease);
}

.nmf-banners--hover-reveal .nmf-banner:hover .nmf-banner__subtitle,
.nmf-banners--hover-reveal .nmf-banner:hover .nmf-banner__cta,
.nmf-banners--hover-reveal .nmf-banner:focus-visible .nmf-banner__subtitle,
.nmf-banners--hover-reveal .nmf-banner:focus-visible .nmf-banner__cta {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .nmf-banners--editorial,
    .nmf-banners--story,
    .nmf-banners--lookbook,
    .nmf-banners--mosaic {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .nmf-banners--editorial .nmf-banner--normal,
    .nmf-banners--story .nmf-banner--normal,
    .nmf-banners--lookbook .nmf-banner--normal,
    .nmf-banners--mosaic .nmf-banner--normal { grid-column: span 3; grid-row: span 2; }

    .nmf-banners--editorial .nmf-banner--wide,
    .nmf-banners--story .nmf-banner--wide,
    .nmf-banners--lookbook .nmf-banner--wide,
    .nmf-banners--mosaic .nmf-banner--wide { grid-column: span 6; grid-row: span 2; }

    .nmf-banners--editorial .nmf-banner--tall,
    .nmf-banners--story .nmf-banner--tall,
    .nmf-banners--lookbook .nmf-banner--tall,
    .nmf-banners--mosaic .nmf-banner--tall { grid-column: span 3; grid-row: span 4; }

    .nmf-banners--editorial .nmf-banner--large,
    .nmf-banners--story .nmf-banner--large,
    .nmf-banners--lookbook .nmf-banner--large,
    .nmf-banners--mosaic .nmf-banner--large { grid-column: span 6; grid-row: span 3; }

    .nmf-banner__title {
        font-size: clamp(26px, 5vw, 48px);
    }
}

@media (max-width: 767px) {
    .nmf-banners-intro {
        margin-bottom: 28px;
    }

    .nmf-banners-intro__title {
        font-size: clamp(34px, 12vw, 54px);
    }

    .nmf-banners,
    .nmf-banners--editorial,
    .nmf-banners--story,
    .nmf-banners--lookbook,
    .nmf-banners--mosaic,
    .nmf-banners--two-column,
    .nmf-banners--clean {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: var(--nmf-banner-gap, 14px);
    }

    .nmf-banners .nmf-banner,
    .nmf-banners--editorial .nmf-banner--normal,
    .nmf-banners--editorial .nmf-banner--wide,
    .nmf-banners--editorial .nmf-banner--tall,
    .nmf-banners--editorial .nmf-banner--large,
    .nmf-banners--story .nmf-banner--normal,
    .nmf-banners--story .nmf-banner--wide,
    .nmf-banners--story .nmf-banner--tall,
    .nmf-banners--story .nmf-banner--large,
    .nmf-banners--lookbook .nmf-banner--normal,
    .nmf-banners--lookbook .nmf-banner--wide,
    .nmf-banners--lookbook .nmf-banner--tall,
    .nmf-banners--lookbook .nmf-banner--large,
    .nmf-banners--mosaic .nmf-banner--normal,
    .nmf-banners--mosaic .nmf-banner--wide,
    .nmf-banners--mosaic .nmf-banner--tall,
    .nmf-banners--mosaic .nmf-banner--large {
        grid-column: auto;
        grid-row: auto;
        min-height: var(--nmf-banner-height, 420px);
    }

    .nmf-banner__content {
        padding: 24px 22px;
    }

    .nmf-banner__title {
        max-width: 11em;
        font-size: clamp(30px, 11vw, 46px);
    }

    .nmf-banner__subtitle {
        max-width: 92%;
        font-size: 13px;
    }

    .nmf-banner--style-product .nmf-banner__picture {
        inset: 8% 9% 34%;
    }

    .nmf-banners--hover-reveal .nmf-banner__subtitle,
    .nmf-banners--hover-reveal .nmf-banner__cta {
        opacity: 1;
        transform: none;
    }
}

.nmf-banners--js .nmf-banner {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .72s var(--nmf-ease), transform .72s var(--nmf-ease);
    transition-delay: var(--nmf-card-delay, 0ms);
}

.nmf-banners--js .nmf-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* v0.1.8: hard image-control layer. This makes per-banner fit/position/height work even when theme/frontend CSS is aggressive. */
.nmf-banners .nmf-banner > .nmf-banner__picture > .nmf-banner__image {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: var(--nmf-card-fit, cover) !important;
    object-position: var(--nmf-card-position, center center) !important;
}

.nmf-banners .nmf-banner.nmf-banner--media-custom > .nmf-banner__picture,
.nmf-banners .nmf-banner.nmf-banner--media-custom > .nmf-banner__overlay,
.nmf-banners .nmf-banner.nmf-banner--media-custom > .nmf-banner__shine {
    right: 0 !important;
    left: 0 !important;
    height: var(--nmf-card-media-height, 68%) !important;
}

.nmf-banners .nmf-banner--style-product.nmf-banner--media-custom > .nmf-banner__picture {
    inset: auto !important;
    right: 0 !important;
    left: 0 !important;
    height: var(--nmf-card-media-height, 62%) !important;
}
