/* Target the modal dialog element directly */
.zuxTm > div,
.zuxTm [role="dialog"] {
    border-radius: 8px !important;
}

.B9VD9 {
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 22px;
}

.z1HwB {
    position: relative;
}

.kaRoh {
    font-family: Brandon Text, Arial, sans-serif;
    font-family: var(--ndls-font-family-brandon);
    font-size: 1rem;
    font-size: var(--ndls-text-body-desktop-medium-size);
    font-weight: 400;
    font-weight: var(--ndls-text-body-desktop-medium-weight);
    position: relative;
    overflow: hidden;
    width: 100%;
}

.z6Xm8 {
    position: fixed;
    bottom: 0;
    transform: translate3d(-100vw, -100%, 0);
}

.PKuPr {
    position: fixed;
    top: 0;
    transform: translate3d(-100vw, -100%, 0);
}

.LsEvw {
    position: fixed;
    top: 0;
    transform: translate3d(-100vw, -100%, 0);
}

.gvw6H {
    position: relative;
    transform: translate3d(0, 0, 0);
}

.EvP_J * {
    animation: none !important; /* stylelint-disable-line declaration-no-important */
    transition: none !important; /* stylelint-disable-line declaration-no-important */
}

/* stylelint-disable no-descending-specificity */

.mXFlY {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    min-height: 100vh;
    overflow: visible;
    --partial-overlay-width: 280px;
}

.cejCm {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    background: rgba(255, 255, 255, 0.9);
    height: 100%;
    left: 0;
    opacity: 0;
    /* Fixed positioning allows it to render beyond the bounds of the page on iOS */
    position: fixed;
    top: 0;
    /* Trick iOS into using the GPU to render this while scrolling, preventing slow renders */
    transform: translate3d(0, 0, 0);
    width: 100vw;
}

.AEu4v {
    height: 100%;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

/* Extend the background above and below for iOS so the page content doesn't show through on overscroll */
.device-i-pad .cejCm,
.device-i-phone .cejCm {
    height: 300%;
    top: -100%;
}

/* The background should be transparent if blur is enabled */
.sLVPP .cejCm {
    background: rgba(255, 255, 255, 0.5);
}

/* The background should be white if whiteBackground true */
._l9v1 .cejCm {
    background: rgba(255, 255, 255, 1);
}

/* Fully hide the content when animation out is complete */
.pYdYP {
    height: 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.pYdYP .cejCm {
    height: 0;
}

.pYdYP .AEu4v {
    height: 0;
}

.pYdYP .ApM_X {
    display: none;
}

._5M7Mt {
    box-sizing: border-box;
    cursor: pointer;
    left: 0;
    min-height: 100vh;
    /* The element should always defer to the document's scroll */
    overflow: visible;
    top: 0;
    width: 100%;
}

.kCULj {
    position: relative;
    overflow: hidden;
}

.ApM_X {
    cursor: auto;
    position: relative;
    z-index: 1;
}

.ACSCt .ApM_X::after {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.KXfwV .kCULj {
    margin: 0 auto;
    /* Force margin from children to be accounted for */
    padding-top: 0.1px;
}

/* Custom animation */
.zGvdP.SkyOG .cejCm {
    opacity: 1;
    transition: opacity 250ms;
}

.zGvdP.JO4A_ .cejCm {
    opacity: 1;
}

.zGvdP.XvDxV .cejCm {
    opacity: 0;
    transition: opacity 250ms;
}

.zGvdP.pYdYP .cejCm {
    opacity: 0;
}

/* Fade in animation */
.EumAF {
}

.EumAF.SkyOG .kCULj {
    opacity: 1;
    transition: opacity 500ms ease-in-out 100ms;
}

.EumAF.JO4A_ .kCULj {
    opacity: 1;
}

.EumAF.XvDxV .kCULj {
    opacity: 0;
    transition: opacity 250ms;
}

.EumAF.pYdYP .kCULj {
    opacity: 0;
}

/* Slide partial animation */
.OD7CJ {
    min-width: var(--partial-overlay-width);
    width: var(--partial-overlay-width);
}

.OD7CJ::before {
    background: rgba(255, 255, 255, 0.83);
    content: "";
    height: 300%;
    /*
     * Fixed positioning allows it to render beyond
     * the bounds of the page on iOS
     */
    position: fixed;
    top: -100%;
    /*
     * Trick iOS into using the GPU to render this while
     * scrolling, preventing slow renders
     */
    transform: translate3d(0, 0, 0);
    width: var(--partial-overlay-width);
}

.OD7CJ.SkyOG::before,
.OD7CJ.SkyOG .kCULj {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 250ms, transform 600ms cubic-bezier(0.225, 1.405, 0, 1.005);
}

.OD7CJ.XvDxV::before,
.OD7CJ.XvDxV .kCULj {
    opacity: 0;
    transition: opacity 200ms, transform 200ms ease;
}

/* We need to set this from fixed to absolute or IE10 & IE11 overlay the page */
.OD7CJ.pYdYP::before {
    position: absolute;
}

.OD7CJ.pYdYP::before,
.OD7CJ.pYdYP .kCULj {
    opacity: 0;
}

.OD7CJ .ApM_X {
    min-height: 100vh;
    width: var(--partial-overlay-width);
}

@keyframes bpZg1 {
    from {
        transform: translate3d(0, -100%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ZpTLL {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, -100%, 0);
    }
}

/* Slide Partial Down */
.a6w1l {
}

.JzIVg.SkyOG {
    animation: bpZg1 250ms;
    transform: translate3d(0, -100%, 0);
}

.JzIVg.JO4A_ {
    transform: translate3d(0, 0, 0);
}

.JzIVg.XvDxV {
    animation: ZpTLL 250ms;
    transform: translate3d(0, 0, 0);
}

.JzIVg.pYdYP {
    transform: translate3d(0, -100%, 0);
}

/* Slide Partial Left */
.vt2Fi {
    margin-left: auto;
}

.vt2Fi::before {
    right: -100px;
    width: calc(var(--partial-overlay-width) + 100px);
}

.vt2Fi.XvDxV::before,
.vt2Fi.XvDxV .kCULj,
.vt2Fi.pYdYP::before,
.vt2Fi.pYdYP .kCULj {
    transform: translate3d(var(--partial-overlay-width), 0, 0);
}

.vt2Fi.XvDxV,
.vt2Fi ._5M7Mt,

.vt2Fi .cejCm {
    left: auto;
    right: 0;
}

/* Slide Partial Right */
._iML2 {
}

._iML2::before {
    left: -100px;
    width: calc(var(--partial-overlay-width) + 100px);
}

._iML2.XvDxV::before,
._iML2.XvDxV .kCULj,
._iML2.pYdYP::before,
._iML2.pYdYP .kCULj {
    transform: translate3d(calc(-1 * var(--partial-overlay-width)), 0, 0);
}

@keyframes NvC_f {
    from {
        transform: translate3d(0, 100%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes RFl9j {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, 100%, 0);
    }
}

/* Slide Partial Up */
.lHws2 {
}

.goDoO.SkyOG {
    animation: NvC_f 250ms;
    transform: translate3d(0, 0, 0);
}

.goDoO.JO4A_ {
    transform: translate3d(0, 0, 0);
}

.goDoO.XvDxV {
    animation: RFl9j 250ms;
    transform: translate3d(0, 100%, 0);
}

.goDoO.pYdYP {
    transform: translate3d(0, 100%, 0);
}

/* Slide Up */
.fSKAT .ApM_X {
    position: relative;
}

.fSKAT .kCULj {
    background: white;
}

.fSKAT.SkyOG .kCULj {
    transform: translate3d(0, 0, 0);
    transition: transform 400ms ease;
}

.fSKAT.JO4A_ .kCULj {
    transform: none;
}

.fSKAT.SkyOG .cejCm {
    opacity: 0;
}

.fSKAT.JO4A_ .cejCm {
    background: white;
    opacity: 1;
    transition: opacity 400ms;
}

.fSKAT.XvDxV .kCULj {
    transform: translate3d(0, 100vh, 0);
    transition: transform 400ms ease;
}

.fSKAT.pYdYP .kCULj {
    height: 0;
    transform: translate3d(0, 100vh, 0);
}

/*
 * Make sure the content is always scrollable on iPhones
 * so the navigation bar doesn't get stuck exposed when
 * the user scrolls up
 */
@media (max-device-height: 568px) and (orientation: portrait) {
    .device-i-phone .mXFlY:not(.pYdYP) {
        min-height: 568px;
    }
}

/* iPhone 6 */
@media (max-device-height: 667px) and (orientation: portrait) {
    .device-i-phone .mXFlY:not(.pYdYP) {
        min-height: 667px;
    }
}

/* iPhone 6 Plus */
@media (max-device-height: 736px) and (orientation: portrait) {
    .device-i-phone .mXFlY:not(.pYdYP) {
        min-height: 736px;
    }
}

/* iPhone X */
@media (max-device-height: 812px) and (orientation: portrait) {
    .device-i-phone .mXFlY:not(.pYdYP) {
        min-height: 812px;
    }
}

.hGvPy {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1660px;
    padding: 0 20px;
}

.cU2zs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

.v6QRR {
    box-sizing: border-box;
    flex-grow: 0;
}

/*
    flex = calc(100% - (columnGap * (maxColumns - 1)) / maxColumns * spans + (gap * spans - 1)
    Thought process ^
    1) Take full width of container and remove column gaps (num gaps is n - 1)
    2) Divide that into equal column parts
    3) Multiply the span amount
    4) Add back gaps to get the final width
*/
/* Grid 4 */
.cU2zs > .ZSmku {
    width:
        calc((100% - (20px * 3)) / 4
            * 1
        );
}

.cU2zs > .Kujcp {
    width:
        calc(
            (100% - (20px * 3)) / 4
            * 2
            + 20px
        );
}

.cU2zs > .el3M6 {
    width:
        calc(
            (100% - (20px * 3)) / 4
            * 3
            + (20px * 2)
        );
}

.cU2zs > .hyAdg {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .hGvPy {
        padding: 0px 30px;
    }

    /* Grid 12 */
    .cU2zs > .ZSmku {
        width:
            calc(
                (100% - (20px * 11)) / 12
                * 1
            );
    }

    .cU2zs > .Kujcp {
        width:
            calc(
                (100% - (20px * 11)) / 12
                * 2
                + 20px
            );
    }

    .cU2zs > .el3M6 {
        width:
            calc(
                (100% - (20px * 11)) / 12
                * 3
                + (20px * 2)
            );
    }

    .cU2zs > .hyAdg {
        width:
            calc(
                (100% - (20px * 11)) / 12
                * 4
                + (20px * 3)
            );
    }

    .cU2zs > .Nvnkr {
        width:
            calc(
                (100% - (20px * 11)) / 12
                * 5
                + (20px * 4)
            );
    }

    .cU2zs > .rTOYc {
        width:
            calc(
                (100% - (20px * 11)) / 12
                * 6
                + (20px * 5)
            );
    }

    .cU2zs > .Jnzpm {
        width:
            calc(
                (100% - (20px * 11)) / 12
                * 7
                + (20px * 5)
            );
    }

    .cU2zs > .VrzbK {
        width:
            calc(
                (100% - (20px * 11)) / 12
                * 8
                + (20px * 7)
            );
    }

    .cU2zs > .BaLoV {
        width:
            calc(
                (100% - (20px * 11)) / 12
                * 9
                + (20px * 8)
            );
    }

    .cU2zs > .Cgtyp {
        width:
            calc(
                (100% - (20px * 11)) / 12
                * 10
                + (20px * 9)
            );
    }

    .cU2zs > .YVvJS {
        width:
            calc(
                (100% - (20px * 11)) / 12
                * 11
                + (20px * 10)
            );
    }

    .cU2zs > .DIssu {
        width: 100%;
    }
}

.pwqiG {
    border: none;
    outline: none;
}
.UVi3l {
    position: relative;
}

.UVi3l:focus {
    outline: 0;
}

.VGsKY {
    background-color: #ffffff;
    background-color: var(--ndls-color-background-default);
    border: 1px solid #c2cbcd;
    border: 1px solid var(--ndls-color-border-subtle);
    box-sizing: border-box;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
    margin: 10vh auto;
    position: relative;
    color: #191a1b;
    color: var(--ndls-color-foreground-default);
}

.VGsKY.xCECl {
    border: 0;
    margin: auto;
    min-height: 100vh;
    max-width: 1600px;
}

.VGsKY:focus {
    outline: 0;
}

.lOgsI {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    margin: 0;
    padding: 8px 8px 3px;
    position: absolute;
    right: 6px;
    text-decoration: none;
    top: 8px;
}

.JSA05 > path {
    fill: #647175;
    fill: var(--ndls-color-foreground-subtle);
}

.qnQ87.VGsKY {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.uU9gY {
    padding: 20px;
}

.qnQ87 .lOgsI {
    right: 10px;
    top: -50px;
}

@media only screen and (max-width: 768px) {
    .qnQ87.VGsKY {
        margin: 10vh -20px;
    }
}

@media only screen and (min-width: 768px) {
    .uU9gY {
        padding: 39px;
    }

    .eQC6D {
        margin-left: calc(-1 * 39px);
        margin-right: calc(-1 * 39px);
    }

    .qnQ87 .lOgsI {
        right: -32px;
        top: -34px;
    }
}

/* Added for EPE-9915 Experiment */

.VGsKY.zKbgw  {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* END Added for EPE-9915 Experiment */

.M6JJL {
    background-color: inherit;
    background-color: var(--themed-container-bg-color, inherit);
    color: inherit;
    color: var(--themed-container-text-color, inherit);
    container-type: inline-size;
    container-name: navigationRowMediaContainer;
    inline-size: 100%;
    max-inline-size: 1600px;
    max-inline-size: var(--page-layout-max-width, 1600px);
}

.egD9a {
    width: 100%;
    padding-block: 24px;
    padding-block: var(--page-layout-padding-block, 24px);

    .M6JJL:first-child > & {
        padding-block-start: 0;
    }
}

.dqXQX {
    margin: 0 0 24px;
    margin: 0 0 var(--ndls-layout-space-5);
    font-weight: 700;
    font-weight: var(--ndls-font-weight-bold);
    text-wrap: balance;
    padding: 0 32px;
    padding: 0 var(--page-layout-margin, 32px);

    .I3m47 & {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .skthW & {
        font-size: 2.25rem;
        line-height: 2.75rem;
    }
}

/* The desktop version is a static row of up to six items. */
.YAP0d {
    .F3HmH {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
        gap: var(--ndls-layout-space-4, 24px);
        padding-inline: 32px;
        padding-inline: var(--page-layout-margin, 32px);
    }
}

/* The mobile version scrolls horizontally */
.ufAHl {
    .egD9a {
        --peek-allowance: 0.15;
        --number-of-gaps: calc(var(--number-of-children-visible) + 1);
        --gap-width: var(--ndls-layout-space-4, 16px);
        /* calculate percent of container width based on desired number of children and scroll gap peek-a-boo */
        --child-width: calc((100cqw - var(--number-of-gaps) * var(--gap-width)) / (var(--number-of-children-visible) + 2 * var(--peek-allowance)));

        @container navigationRowMediaContainer (width <= 414px) {
            --number-of-children-visible: 2;
        }

        @container navigationRowMediaContainer (width > 414px) {
            --number-of-children-visible: 3;
        }
    }

    .F3HmH {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: var(--gap-width);
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-inline: 16px;
        padding-inline: var(--page-layout-margin, 16px);

        &::-webkit-scrollbar {
            display: none;
        }

        & > * {
            flex: 0 0 var(--child-width);
            scroll-margin-left: calc(var(--child-width) * var(--peek-allowance) + var(--gap-width));
        }

        @container navigationRowMediaContainer (width <= 414px) {
            /* snap to every 2nd card */
            & > :nth-child(2n + 1) {
                scroll-snap-align: start;
                scroll-snap-stop: always;
            }
        }

        @container navigationRowMediaContainer (width > 414px) {
            /* snap to every 3rd card */
            & > :nth-child(3n + 1) {
                scroll-snap-align: start;
                scroll-snap-stop: always;
            }
        }
    }
}

.fRJTR {
  display: none;
}

.hiC_8 {
  margin-bottom: 32px;
}

.UErMX {
  min-height: 150px;
  display: block;
}

.dx_0v {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dx_0v div {
  height: 100%;
}

@media screen and (max-width: 1230px) {
  .UErMX {
    min-height: 100px;
  }
}
.qogdk {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 1600px;
    max-inline-size: var(--page-layout-max-width, 1600px);
    padding-inline: 32px;
    padding-inline: var(--page-layout-margin, 32px);

    /**
     * We only want to apply the top padding if the banner comes after another
     * container and only if it is successfully displaying third-party content.
     *
     * :not:(:first-child) indicates that the banner is not at the top
     * :has(iframe) indicates that a banner is displaying content
     */
    &:not(:first-child):has(iframe) {
        padding-block-start: 24px;
        padding-block-start: var(--page-layout-padding-block, 24px);
    }

    /* Edge to edge for MOW. Media query is the same as GAM Banner's */
    @media only screen and (max-width: 750px) {
        padding-inline: 0;
    }
}

.cpfWY {
    container-type: inline-size;
    container-name: filmStripMediaContainer;
    inline-size: 100%;
    max-inline-size: 1600px;
    max-inline-size: var(--page-layout-max-width, 1600px);
    position: relative;

    /* sets colors for buttons */
    --card-button-text-color: var(--ndls-color-foreground-default);
    --card-button-bg-color: var(--ndls-color-action-secondary-resting);
    --card-button-bg-color-hover: var(--ndls-color-action-secondary-hover);
    --card-button-bg-color-pressed: var(--ndls-color-action-secondary-pressed);
    --card-button-border-color: var(--ndls-color-foreground-default);
    --card-button-border-color-hover: var(--ndls-color-foreground-default);
}

.doQK6 {
    width: 100%;
    padding-block: 24px;
    padding-block: var(--page-layout-padding-block, 24px);

    --number-of-children-visible: 1;
    --peek-allowance: 0.05;
    --number-of-gaps: calc(var(--number-of-children-visible) + 1);
    --gap-width: var(--ndls-layout-space-4, 16px);

    /* calculate percent of container width based on desired number of children and scroll gap peek-a-boo */
    --child-width: calc((100cqw - var(--number-of-gaps) * var(--gap-width)) / (var(--number-of-children-visible) + 2 * var(--peek-allowance)));
}

.cpfWY:first-child > .doQK6 {
    padding-block-start: 0;
}

.EALjV {
    list-style-type: none;
    overflow-x: scroll;
    white-space: nowrap;
    padding-block-start: 16px;
    padding-block-start: var(--ndls-layout-space-4, 16px);
    padding-inline: 16px;
    padding-inline: var(--ndls-layout-space-4, 16px);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    display: flex;
    column-gap: var(--gap-width);
    align-items: flex-start;
}

.EALjV::-webkit-scrollbar {
    display: none;
}

.EALjV > * {
    display: inline-block;
    position: relative;
    white-space: initial;
    width: var(--child-width);
    scroll-margin-left: calc(var(--child-width) * var(--peek-allowance) + var(--gap-width));
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: var(--child-width);
    position: relative;
    height: auto;
}

/* stretch the card to fill the space if there's only 1 card */
.EALjV > :first-child:last-child {
    flex-grow: 1;
}

.NN4mQ {
    container-type: inline-size;
    container-name: heroCarouselDesktopMediaContainer;
    width: 100%;
    position: relative;

    /* sets colors for buttons */
    --card-button-text-color: var(--ndls-color-foreground-default);
    --card-button-bg-color: var(--ndls-color-action-secondary-resting);
    --card-button-bg-color-hover: var(--ndls-color-action-secondary-hover);
    --card-button-bg-color-pressed: var(--ndls-color-action-secondary-pressed);
    --card-button-border-color: transparent;
    --card-button-border-color-hover: transparent;
    --card-button-border-color-pressed: transparent;
}

.B2lVx {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateY(-50%);
    width: 100%;
    z-index: 1;
    padding: 0 16px;
    box-sizing: border-box;
    pointer-events: none;
}

.uT4Ws {
    max-width: 1600px;
}

.B2lVx > button {
    pointer-events: auto;
}

.NN4mQ::after {
    content: '';
    width: 100%;
    height: 0;
    display: block;
    pointer-events: none;
    position: relative;
    background-color: rgba(25, 26, 27, 0.49);
    z-index: -1;
}

.CZt7j {
    position: absolute;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease-in;
}

.CZt7j.jAWPV {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 500ms ease-out;
}
/* 
    TODO: Clean up JIRA: https://jira.nordstrom.com/browse/NMM-3254
*/
.ylTAw {
    position: absolute;
    bottom: 0%;
    right: 1rem;
    z-index: 10;
    justify-content: space-between;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 16px 32px;
    padding: 0 var(--ndls-layout-space-4, 16px) var(--ndls-layout-space-6, 32px);
}

.sSxB0 svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    /* lets clicks pass through to the button */
}

.mcRkB.mcRkB.mcRkB {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@container heroCarouselDesktopMediaContainer (640px >= width) {
    .NN4mQ::after {
        padding-bottom: 120%;
    }
}

@container heroCarouselDesktopMediaContainer (1600px >= width > 640px) {
    .NN4mQ::after {
        padding-bottom: 50%;
    }
}

@container heroCarouselDesktopMediaContainer (width > 1600px) {
    .NN4mQ::after {
        padding-bottom: 37.5%;
    }
}

/* 
    TODO: Clean up JIRA: https://jira.nordstrom.com/browse/NMM-3254
*/
:root {
  --size: 48px;
  --pc-duration: 5000ms;
  --pc-delay: 200ms;
  --track: #c1c1c1;
  --fill: #000;
}

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.IYPhe {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.RiYTL {
  position: absolute;
  inline-size: 48px;
  inline-size: var(--size);
  block-size: 48px;
  block-size: var(--size);
  border-radius: 50%;

  background:
    conic-gradient(
      from 0deg,
      #000 0deg,
      #000 var(--angle),
      #c1c1c1 var(--angle),
      #c1c1c1 360deg
    );

  background:
    conic-gradient(
      from 0deg,
      var(--fill) 0deg,
      var(--fill) var(--angle),
      var(--track) var(--angle),
      var(--track) 360deg
    );

  -webkit-mask: radial-gradient(transparent 48%, #000 49%);
          mask: radial-gradient(transparent 48%, #000 49%);

  will-change: transform;
}

.RiYTL.wMtte {
  animation: vrooY 5000ms linear infinite both 200ms;
  animation: vrooY var(--pc-duration) linear infinite both var(--pc-delay);
}

.RiYTL.QqFzl { animation: none !important; }

.AAFdk { display: none; }
.AAFdk.QqFzl { animation: none !important; }

.RiYTL.wMtte.xF_AQ {
  animation-play-state: paused !important;
}

.bvu7J,
.bvu7J .RiYTL,
.bvu7J .RiYTL.wMtte {
  animation-play-state: paused !important;
}

@keyframes vrooY {
  to { --angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .RiYTL,
  .RiYTL.wMtte {
    animation-play-state: paused !important;
  }
}

/* 
    TODO: Clean up JIRA: https://jira.nordstrom.com/browse/NMM-3254
*/
.aLg7q {
  display: inline-flex;
  padding: 4px 8px;
  background-color: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.62);
  border-radius: 9999px;


  & > span {
    display: flex;
    letter-spacing: 2px;
    /* Using brandon text instead of defaults for increased legibility */
    font-family: Brandon Text, Arial, sans-serif;
    font-family: var(--ndls-font-family-brandon);
    font-weight: 700;
    font-weight: var(--ndls-font-weight-bold);
    font-size: 0.875rem;
    font-size: var(--ndls-font-size-80);
    line-height: 1.5rem;
    line-height: var(--ndls-line-height-100);
  }
}

._QGn1 {
  color: #FFF;
  padding-left: 2px;
}
/* 
    TODO: Clean up JIRA: https://jira.nordstrom.com/browse/NMM-3254
*/
.Pcb6A {
    container-type: inline-size;
    container-name: filmStripMediaContainer;
    inline-size: 100%;
    max-inline-size: 1600px;
    max-inline-size: var(--page-layout-max-width, 1600px);
    position: relative;

    /* sets colors for buttons */
    --card-button-text-color: var(--ndls-color-foreground-default);
    --card-button-bg-color: var(--ndls-color-action-secondary-resting);
    --card-button-bg-color-hover: var(--ndls-color-action-secondary-hover);
    --card-button-bg-color-pressed: var(--ndls-color-action-secondary-pressed);
    --card-button-border-color: var(--ndls-color-foreground-default);
    --card-button-border-color-hover: var(--ndls-color-foreground-default);
    --card-copy-box-padding-left: var(--ndls-layout-space-4, 16px);
}

.n9ESj {
    width: 100%;
    padding-block: 16px;
    padding-block: var(--page-layout-padding-block, 16px);

    --number-of-children-visible: 1;
    --peek-allowance: 0;
    --number-of-gaps: 0;
    --gap-width: var(--ndls-layout-space-0, 0px);
    --themed-card-image-border-radius: var(--ndls-border-radius-00, 0px);

    /* calculate percent of container width based on desired number of children and scroll gap peek-a-boo */
    --child-width: calc((100cqw - var(--number-of-gaps) * var(--gap-width)) / (var(--number-of-children-visible) + 2 * var(--peek-allowance)));
}

.Pcb6A:first-child > .n9ESj {
    padding-block-start: 0;
}

.Kg3iV {
    list-style-type: none;
    overflow-x: scroll;
    white-space: nowrap;
    padding-block-start: 16px;
    padding-block-start: var(--ndls-layout-space-4, 16px);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    display: flex;
    column-gap: var(--gap-width);
    align-items: flex-start;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 0;
}

.Kg3iV::-webkit-scrollbar {
    display: none;
}

.Kg3iV > * {
    display: inline-block;
    position: relative;
    white-space: initial;
    width: var(--child-width);
    scroll-margin-left: calc(var(--child-width) * var(--peek-allowance) + var(--gap-width));
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: var(--child-width);
    position: relative;
    height: auto;
}

.zQYqR {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.ICznn {
    width: calc(100% - 2rem);
    position: absolute;
    left: 1rem;
    right: 1rem;
    z-index: 10;
    justify-content: space-between;
    display: flex;
    align-items: end;
    gap: 0.5rem;
    /* Floats the pause button above an image with a 4:5 aspect ratio */
    top: calc(125cqw - 41px);
}

.ICznn > * {
    pointer-events: auto;
    bottom: 3px;
}

.RDTp3 svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    /* lets clicks pass through to the button */
}

.umZDl {
  display: flex;
  width: 100%;
  height: 100%;
  max-inline-size: 1600px;
  max-inline-size: var(--page-layout-max-width, 1600px);
  container-type: inline-size;
  container-name: videoCardMediaContainer;
}

.hCd9d {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: stretch;
  flex-direction: column;
  justify-content: stretch;
  row-gap: 12px;
  row-gap: var(--ndls-layout-space-3, 12px);
  padding-block: 24px;
  padding-block: var(--page-layout-padding-block, 24px);
  padding-inline: 0;
  background-color: transparent;
  background-color: var(--themed-card-bg-color, var(--themed-container-bg-color, transparent));
  color: var(--ndls-color-foreground-default, #191a1b);
  color: var(--themed-card-text-color, var(--ndls-color-foreground-default, #191a1b));

  @media (width >= 768px) {
    padding-inline: 32px;
    padding-inline: var(--page-layout-margin, 32px);
    padding-block: 24px;
    padding-block: var(--page-layout-padding-block, 24px);
  }
}

.doMHY {
    width: 100%;
}

.UsGTu {
  height: 100%;
  position: relative;
}

.OLZzX {
  opacity: 0%;
}

.Uwi65 {
  display: block;
  width: 100%;
  height: 100%;
  object-position: 50% 50%;
  border: none;
  cursor: pointer;
}

.DX0l4 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.DX0l4 svg {
  pointer-events: none;
}

.Ygksx {
  display: flex;
  flex-direction: column;
  padding: 0 32px;
  padding: 0 var(--ndls-layout-space-6, 32px);
}

.CG8uC {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
  row-gap: 4px;
  row-gap: var(--ndls-layout-space-1, 4px);
  align-items: center;
  padding-bottom: 24px;
  padding-bottom: var(--ndls-layout-space-5, 24px);
  min-width: 280px;
  text-wrap: auto;
  text-wrap: balance;

  .whcoX & {
    align-items: flex-start;
  }
}

.bvOIH {
  display: flex;
  justify-content: center;
  gap: 24px;
  gap: var(--ndls-layout-space-5, 24px);
  flex-grow: 0;

  .whcoX & {
    justify-content: flex-start;
  }
}

._9iGzZ {
  text-align: center;

  .whcoX & {
    text-align: left;
  }
}

.eyTo5 {
  font-weight: 700;
  font-weight: var(--ndls-font-weight-bold);
  font-size: 2rem;
  line-height: 2.5rem;
  text-wrap: balance;
  color: var(--ndls-color-foreground-default);
  color: var(--themed-card-text-color, var(--ndls-color-foreground-default));

  .whcoX & {
    font-size: 2.25rem;
    line-height: 2.75rem;
  }
}

@container videoCardMediaContainer (width > 875px) {
  .eyTo5 {
    font-weight: 700;
    font-weight: var(--ndls-font-weight-bold);
    font-size: nordstrom-creative-heading-m-font-size;
    line-height: nordstrom-creative-heading-m-line-height;
    color: var(--ndls-color-foreground-default);
    color: var(--themed-card-text-color, var(--ndls-color-foreground-default));

    .whcoX & {
      font-size: rack-creative-heading-m-font-size;
      line-height: rack-creative-heading-m-line-height;
    }
  }
}

.JQIuV {
    position: relative;
    display: flex;
    margin-right: 0;
    margin-left: auto;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 16px;
    gap: var(--ndls-layout-space-4, 16px);
    padding-bottom: 32px;
    padding-bottom: var(--ndls-layout-space-6, 32px);
    padding-right: 32px;
    padding-right: var(--ndls-layout-space-6, 32px);
    color: #ffffff;
    color: var(--ndls-color-action-secondary-resting);
}

.QAAv0 {
    position: relative;
    border: 1px solid #ffffff;
    border: 1px solid var(--ndls-color-foreground-inverse);
    box-sizing: content-box;
}

.Vn4aA {
    text-align: center;
    color: #ffffff;
    color: var(--ndls-color-action-secondary-resting);
}

@media (max-width: 660px) {
    ._hkhl,
    .JQIuV {
         padding: 16px;
         padding: var(--ndls-layout-space-4, 16px);
    }
}

.t8v1q {
    container-type: inline-size;
    container-name: fullBleedCardMediaContainer;
    position: relative;
    width: 100%;
    --themed-card-text-color: var(--ndls-color-foreground-inverse);
    --themed-card-button-text-color: var(--ndls-color-foreground-default);
    --themed-card-button-bg-color: var(--ndls-color-action-secondary-resting);
    --themed-card-button-bg-color-hover: var(--ndls-color-action-secondary-hover);
    --themed-card-button-bg-color-pressed: var(--ndls-color-action-secondary-pressed);
}

.gYKiT {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: none;
}

.UKVPj {
    width: 100cqw;
    height: 100%;
    position: relative;
}

.e_ofK {
    display: block;
    width: 100%;
    height: 100%;
    object-position: 50% 50%;
    object-fit: cover;
    border: none;
    cursor: pointer;
    opacity: 0.10;
    transition: opacity 0.5s ease-in;
}

.e_ofK.n8j1q,
.e_ofK.w0H77 {
    opacity: 1;
}

.hnjpr {
    display: none;
}

/*
 * Gradient Overlay sits between the images and the copy to ensure there's a
 * sufficient contrast ratio.
 */
.ba7rt {
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: end;
}

/*
 * Gradient Bottom
 * Spans the height of the copy
 */
.FNhZp {
    display: flex;
    position: relative;
    flex-grow: 0;

    /**
     * Color for the gradient overlay (scrim) that makes text legible
     */
    --scrim-color: rgba(25, 26, 27, 0.49);
    /**
     * The total gradient height is a multiple of the the height of the copy
     * section.
     */
    --scrim-multiple: 2.5;
    /**
     * The distance below the top of the copy to start fading out
     */
    /* --scrim-offset: 28px; */
    --scrim-offset: 2rem;
    /**
     * Dividing 100% by the multiple gives us access to the copy height
     */
    --scrim-copy-height: calc(100% / var(--scrim-multiple));
    --scrim-remaining-height: calc(100% - var(--scrim-copy-height));

    &::before {
        content: "";
        /*
         * The position is set to absolute to take the scrim out of the flow,
         * but no positioning is given to keep it anchored to its original
         * position at the top of the copy
         */
        position: absolute;
        height: calc(100% * var(--scrim-multiple));
        width: 100%;
        /*
         * Aligns the point between the copy-height and the remaining-height
         * with the top of the copy
         */
        transform: translateY(
            calc(-1 * var(--scrim-remaining-height))
        );
        background-image: linear-gradient(
            to top,
            /* Shade from the bottom to the top of the copy, minus a bit */
            var(--scrim-color) 0% calc(var(--scrim-copy-height) - var(--scrim-offset)),
            /* Then fade to transparent for the remaining gradient */
            transparent
        );
    }
}

.Dch_0 {
    display: flex;
    max-inline-size: 1600px;
    max-inline-size: var(--page-layout-max-width, 1600px);
    justify-content: space-between;
}

.jPqQ1 {
    /* z-positioning */
    position: relative;

    /* Internal Text layout */
    color: #ffffff;
    color: var(--ndls-color-foreground-inverse);
    display: flex;
    flex-direction: column;
    gap: 12px;
    gap: var(--ndls-layout-space-3, 12px);
    justify-content: flex-end;

    /* Aligning text to other container contents */
    padding-block-start: 0;
    padding-block-end: 16px;
    padding-block-end: var(--ndls-layout-space-4, 16px);
    padding-inline: 32px;
    padding-inline: var(--page-layout-margin, 32px);
    max-inline-size: 1600px;
    max-inline-size: var(--page-layout-max-width, 1600px);
    box-sizing: border-box;
}

.HjEOA {
    /* Ensure the button tray is above the link overlay so buttons are clickable */
    z-index: 2;
    /* Make the button tray only as big as needed to show the buttons */
    align-self: start;
}

.uPgjB {
    font-weight: 700;
    font-weight: var(--ndls-font-weight-bold);
    font-size: 2.5rem;
    line-height: 3rem;
    text-wrap: balance;

    .nordstrom-rack & {
        font-size: 3.75rem;
        line-height: 4.25rem;
    }

    @container fullBleedCardMediaContainer (width >= 640px) {
        font-size: 3.75rem;
        line-height: 4.25rem;

        .nordstrom-rack & {
            font-size: 4.5rem;
            line-height: 5rem;
        }
    }
}

@container fullBleedCardMediaContainer (640px >= width) {
    .gYKiT:first-child:not(.hnjpr)  {
        display: block;
    }

    .zdVy3.WrzfO,
    .e_ofK.WrzfO {
        aspect-ratio: 1 / 1;
    }

    .zdVy3.jmrlq,
    .e_ofK.jmrlq {
        aspect-ratio: 16 / 9;
    }

    .cACLY {
        display: none;
    }

    .Dch_0 {
        width: 100%;
    }
}

@container fullBleedCardMediaContainer (1600px >= width > 640px) {
    .zdVy3 {
        display: flex;
    }

    .zdVy3,
    .e_ofK {
        aspect-ratio: 2 / 1;
    }

    .gYKiT:nth-child(2):not(.hnjpr)  {
        display: block;
    }

    .jPqQ1 {
        padding-bottom: 32px;
        padding-bottom: var(--ndls-layout-space-6, 32px);
    }

    .Dch_0 {
        width: 100%;
    }
}

@container fullBleedCardMediaContainer (width > 1600px) {
    .zdVy3 {
        display: flex;
    }

    .zdVy3,
    .e_ofK {
        aspect-ratio: 8 / 3;
        object-position: 50% 10%;
    }

    .gYKiT:nth-child(3):not(.hnjpr)  {
        display: block;
    }

    .XdV1J,
    .HjEOA {
        width: 1600px;
        margin: 0 auto;
    }

    .Dch_0 {
        margin: 0 auto;
    }
}

.cw0aK {
    inline-size: 100%;
    max-inline-size: 1600px;
    max-inline-size: var(--page-layout-max-width, 1600px);
    padding-block: 24px;
    padding-block: var(--page-layout-padding-block, 24px);
    padding-inline: 32px;
    padding-inline: var(--page-layout-margin, 32px);
    box-sizing: border-box;
}

.cw0aK:first-child {
    padding-block-start: 0;
}

.HIBWV {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/**
 * Container components set their own width and max width using these
 * CSS Custom Properties because this pattern lets the full-bleed card align
 * the width of its contents to the with of other containers.
 */

@media (width < 768px) {
    .HIBWV {
        --page-layout-max-width: 100%;
        --page-layout-margin: var(--ndls-layout-space-4, 16px);
        --page-layout-padding-block: var(--ndls-layout-space-4, 16px);
    }
}

@media (width >= 768px) {
    .HIBWV {
        --page-layout-max-width: 1600px;
        --page-layout-margin: var(--ndls-layout-space-6, 32px);
        --page-layout-padding-block: var(--ndls-layout-space-5, 24px);
    }
}