@media (max-width: 768px) {
            body {
              overflow-x: hidden;
            }
        }

/* SINYX entrance experience */
html.site-intro-active,
html.site-intro-active body {
    overflow: hidden !important;
}

/* Returning visitor: the entrance screen has already been seen (cookie set in
   <head>), so it is removed before it can paint. */
html.sinyx-intro-skip .site-intro {
    display: none !important;
}

.site-intro {
    align-items: center;
    background: #000;
    display: flex;
    flex-direction: column;
    inset: 0;
    isolation: isolate;
    justify-content: center;
    opacity: 1;
    overflow: hidden;
    position: fixed;
    transition: opacity 720ms cubic-bezier(.76, 0, .24, 1), visibility 720ms step-end;
    visibility: visible;
    z-index: 2147483000;
}

.site-intro::after {
    background: radial-gradient(circle at center, rgba(255, 0, 144, .1), transparent 48%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.site-intro__action {
    align-items: center;
    background: transparent;
    border: 0;
    color: #ff0090;
    cursor: pointer;
    display: flex;
    height: 44px;
    justify-content: center;
    padding: 0;
    position: absolute;
    top: clamp(20px, 4vh, 48px);
    width: 44px;
    z-index: 4;
}

.site-intro__action:hover {
    color: #fff;
}

.site-intro__action:focus-visible {
    box-shadow: 0 0 0 2px #ff0090;
    outline: none;
}

.site-intro__menu {
    left: clamp(18px, 3vw, 44px);
}

.site-intro__search {
    right: clamp(18px, 3vw, 44px);
}

.site-intro__hamburger {
    display: grid;
    gap: 5px;
    width: 26px;
}

.site-intro__hamburger span {
    background: currentColor;
    display: block;
    height: 2px;
    width: 100%;
}

.site-intro__search svg {
    fill: none;
    height: 29px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2.5;
    width: 29px;
}

.site-intro__wordmark {
    height: auto;
    left: 50%;
    max-width: none;
    opacity: 0;
    position: absolute;
    top: clamp(20px, 4vh, 48px);
    transform: translate(-50%, -10px);
    transition: opacity 700ms ease 160ms, transform 700ms cubic-bezier(.22, 1, .36, 1) 160ms;
    width: clamp(120px, 12vw, 200px);
    z-index: 2;
}

.site-intro__stage {
    align-items: center;
    display: flex;
    justify-content: center;
    perspective: 1400px;
    perspective-origin: 50% 50%;
    /* Cap by viewport height too: 72vw alone made the emblem taller than the
       screen on laptops (820px stage on an 800px viewport), so the sigil bled
       past the bottom edge and dwarfed the ENTER button. */
    width: min(48vw, 520px, 58vh);
    z-index: 1;
}

.site-intro__stage {
    opacity: 0;
    transform: scale(.42);
    animation: sinyx-stage-in 2200ms cubic-bezier(.22, 1, .36, 1) 120ms both;
}

.site-intro__emblem {
    backface-visibility: visible;
    height: auto;
    max-width: 100%;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    width: 100%;
    will-change: transform, filter;
}

.site-intro__enter {
    background: #fff;
    border: 1px solid #fff;
    bottom: clamp(52px, 9vh, 104px);
    color: #000;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    line-height: 1;
    opacity: 0;
    padding: 11px 17px 10px 19px;
    position: absolute;
    transform: translateY(12px);
    transition: background-color 180ms ease, color 180ms ease, opacity 500ms ease 1050ms, transform 500ms cubic-bezier(.22, 1, .36, 1) 1050ms;
    z-index: 3;
}

.site-intro__enter:hover {
    background: #ff0090;
    color: #fff;
    outline: none;
}

.site-intro__enter:focus-visible {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 0, 144, .4);
    color: #000;
    outline: none;
}

.site-intro.is-ready .site-intro__wordmark,
.site-intro.is-ready .site-intro__enter {
    opacity: 1;
    transform: translate(-50%, 0);
}

.site-intro.is-ready .site-intro__enter {
    transform: translateY(0);
}

.site-intro.is-ready .site-intro__emblem {
    animation: sinyx-emblem-spin 7s linear infinite both;
}

.site-intro.is-leaving {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.site-intro.is-leaving .site-intro__stage {
    transform: scale(1.08);
    transition: transform 720ms cubic-bezier(.76, 0, .24, 1);
}

.site-intro.is-leaving .site-intro__emblem,
.site-intro.is-leaving .site-intro__stage {
    animation-play-state: paused;
}

@keyframes sinyx-stage-in {
    0% {
        filter: blur(10px) brightness(.62);
        opacity: .28;
        transform: scale(.42);
    }

    18% {
        filter: blur(3px) brightness(.92);
        opacity: .9;
        transform: scale(.82);
    }

    42% {
        filter: blur(0) brightness(1.28);
        opacity: 1;
        transform: scale(1.04);
    }

    58% {
        filter: blur(0) brightness(1.12);
        opacity: 1;
        transform: scale(1);
    }

    82% {
        filter: blur(0) brightness(1);
        opacity: 1;
        transform: scale(1);
    }

    100% {
        filter: blur(0) brightness(1);
        opacity: 1;
        transform: scale(1);
    }
}

/* Uniform collection cards.
   A global rule further down (`.box--product-image img { object-fit: contain !important }`,
   meant for the product-page gallery) also wins on collection cards, so every
   card letterboxed its own aspect ratio and the garments came out different
   sizes across the grid. Re-pin cards to `cover`: the box keeps its fixed
   aspect and every garment fills the same frame. White-background shots sit on
   a white plate so no seams show when the crop eats the studio margins. */
.site-box.box__collection .product-item .box--product-image {
    background: #fff;
}
.site-box.box__collection .product-item .box--product-image img {
    object-fit: cover !important;
    font-family: "object-fit: cover";
}

/* Horizontal 3D spin: rotateY turns about the vertical axis, so the sigil
   revolves like a card on a turntable. Eased so it settles facing front. */
@keyframes sinyx-emblem-spin {
    0% {
        filter: drop-shadow(0 0 18px rgba(255, 0, 144, .28)) brightness(.9);
        transform: rotateY(0deg);
    }

    100% {
        filter: drop-shadow(0 0 34px rgba(255, 0, 144, .55)) brightness(1);
        transform: rotateY(360deg);
    }
}

/* Minimal header: centered wordmark with the full menu collected at top-left. */
@media screen and (min-width: 1025px) {
    .site-header.desktop-view--minimal {
        min-height: 92px;
        padding: 16px 36px;
    }

    .site-header.desktop-view--minimal .logo {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .site-header.desktop-view--minimal .logo-img img {
        height: auto;
        max-height: 58px;
        width: 190px;
    }

    .site-header.desktop-view--minimal > #site-menu-handle {
        display: block !important;
        left: 28px;
        margin: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .site-header.desktop-view--minimal .site-nav {
        left: auto;
        margin: 0;
        position: absolute;
        right: 28px;
        top: 50%;
        transform: translateY(-50%);
    }

    .site-header.desktop-view--minimal .site-nav > :not(#site-search-handle) {
        display: none !important;
    }

    .site-header.desktop-view--minimal #site-search-handle {
        display: block !important;
        margin: 0;
    }

    body.sidebar-move .site-header.desktop-view--minimal > #site-menu-handle {
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
    }

    #site-nav--mobile .main-menu > li {
        opacity: 0;
        transform: translateX(22px);
    }

    body.sidebar-move #site-nav--mobile .main-menu > li {
        animation: sinyx-menu-item-in 620ms cubic-bezier(.22, 1, .36, 1) forwards;
    }

    body.sidebar-move #site-nav--mobile .main-menu > li:nth-child(2) { animation-delay: 70ms; }
    body.sidebar-move #site-nav--mobile .main-menu > li:nth-child(3) { animation-delay: 140ms; }
    body.sidebar-move #site-nav--mobile .main-menu > li:nth-child(4) { animation-delay: 210ms; }
    body.sidebar-move #site-nav--mobile .main-menu > li:nth-child(5) { animation-delay: 280ms; }
    body.sidebar-move #site-nav--mobile .main-menu > li:nth-child(6) { animation-delay: 350ms; }
    body.sidebar-move #site-nav--mobile .main-menu > li:nth-child(7) { animation-delay: 420ms; }
    body.sidebar-move #site-nav--mobile .main-menu > li:nth-child(8) { animation-delay: 490ms; }
    body.sidebar-move #site-nav--mobile .main-menu > li:nth-child(n+9) { animation-delay: 560ms; }
}

@keyframes sinyx-menu-item-in {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media screen and (max-width: 640px) {
    .site-intro__action {
        top: 12px;
    }

    .site-intro__menu {
        left: 10px;
    }

    .site-intro__search {
        right: 10px;
    }

    .site-intro__wordmark {
        top: 22px;
        width: 110px;
    }

    .site-intro__stage {
        width: 94vw;
    }

    .site-intro__enter {
        bottom: 13vh;
    }

    .site-intro__stage {
        width: min(94vw, 58vh);
    }

    .site-intro.is-ready .site-intro__emblem {
        animation-duration: 6s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-intro,
    .site-intro__wordmark,
    .site-intro__enter,
    .site-intro.is-leaving .site-intro__stage {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }

    .site-intro.is-ready .site-intro__emblem,
    .site-intro__stage {
        animation: none !important;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body.sidebar-move #site-nav--mobile .main-menu > li {
        animation-duration: 1ms;
        animation-delay: 0ms !important;
    }
}