/**
 * Homepage — Featured Brands
 *
 * template-parts/home/featured-brands.php, drawn by js/homepage-featured-brands.js.
 * Desktop above 1023px, mobile at 1023px and below (the site's breakpoint).
 * Values follow the "Featured Brands" desktop and mobile designs (ARKAN-184),
 * scaled down by the ARKAN-226 design and re-sized by its update (ARKAN-274):
 * a 230px stage and 120px piece on desktop, a 180px stage, 80px piece and
 * centred title on mobile. On desktop the title row lines up with the other
 * sections' headings.
 */

/*
 * The title's Inter SemiBold under its own name. The homepage templates also
 * declare an "Inter" face (no weight, every character) that Safari/WebKit
 * picks over Google's Inter 600, so the title came out in the wrong face
 * there. This name only ever means Google's Inter (latin).
 */
@font-face {
    font-family: 'QS FB Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZ9hiA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.qs-fb {
    --qs-fb-ink: #18191B;
    --qs-fb-cocoa: #2B1B1C;
    --qs-fb-muted: #76767C;
    --qs-fb-line: #DEDEE2;
    --qs-fb-ring: #D6D6DB;
    --qs-fb-ease: cubic-bezier(.2, .8, .2, 1);

    position: relative;
    z-index: 1;
    width: 100%;
    padding: 48px 0 64px;
    overflow: hidden;
    background: #FFFFFF;
    color: var(--qs-fb-ink);
    font-family: 'Jost', system-ui, sans-serif;
    box-sizing: border-box;
}

.qs-fb *,
.qs-fb *::before,
.qs-fb *::after {
    box-sizing: border-box;
}

/* The design's space above and below the section (48px / 64px; on mobile
   24px above, as every other section, and 40px below), over the homepage's
   shared section spacing */
.page-homepage .qs-home-sections > .qs-fb.homepage-section[data-section] {
    padding-top: 48px;
    padding-bottom: 64px;
}

@media (max-width: 1023px) {
    .page-homepage .qs-home-sections > .qs-fb.homepage-section[data-section] {
        padding-top: 24px;
        padding-bottom: 40px;
    }

    /* The section before Explore By Category keeps 24px of extra room under
       its View More (homepage-sections.css, .last-before-explore). When
       Explore is switched off, Featured Brands comes straight after that
       section, so it takes the room back and the gap above its title stays
       the one between the other sections. */
    .page-homepage .last-before-explore:has(.section-mobile-view-more) + .vertical-spacer + [data-section="explore"][style*="none"] + [data-section="explore-men"][style*="none"] + .qs-fb,
    .page-homepage .last-before-explore:has(.section-mobile-view-more) + .vertical-spacer + [data-section="explore"][style*="none"] + .qs-fb {
        margin-top: -24px;
    }

    /* Explore By Category showing right above Featured Brands (staging3's
       women homepages): its footer keeps 40px under its View More
       (homepage-sections.css, .category-section-footer), on top of the 24px
       every section ends with, so Featured Brands takes those 40px back and
       the gap above its title stays the one between the other sections.
       The men's Explore (explore-men) ends 24px under its button and needs
       nothing. */
    .page-homepage.dept-women [data-section="explore"]:not([style*="none"]):not([data-has-women="false"]) + [data-section="explore-men"] + .qs-fb,
    .page-homepage.dept-women [data-section="explore"]:not([style*="none"]):not([data-has-women="false"]) + .qs-fb,
    .page-homepage.dept-men [data-section="explore"]:not([style*="none"]):not([data-has-men="false"]) + .qs-fb {
        margin-top: -40px;
    }
}

.qs-fb__wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ---------- Title row ---------- */

.qs-fb__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* Desktop: the title row lines up with the other sections' headings, not
   the stage's centred box. At every width the title starts and the View
   button ends where theirs do: their 40px section padding
   (homepage-sections.css) plus their heading row's 15px left / 5px right
   (.showcase-section-heading-row). The same physical sides as theirs, so it
   matches them in Arabic too. */
@media (min-width: 1024px) {
    .qs-fb__head {
        max-width: none;
        padding: 0 45px 0 55px;
    }
}

.qs-fb__title {
    margin: 0;
    font-family: 'QS FB Inter', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--qs-fb-cocoa);
}

.qs-fb__view {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    width: 196px;
    height: 44px;
    padding: 0 12px;
    line-height: normal;
    border: 0;
    border-radius: 7px;
    background: var(--qs-fb-cocoa);
    color: #FFFFFF;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background .3s;
}

.qs-fb__view span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.qs-fb__view:hover,
.qs-fb__view:focus-visible {
    background: var(--qs-fb-ink);
    color: #FFFFFF;
    text-decoration: none;
}

.qs-fb__view:focus-visible,
.qs-fb__arrow:focus-visible,
.qs-fb__pk:focus-visible {
    outline: 2px solid var(--qs-fb-ink);
    outline-offset: 2px;
}

.qs-fb__foot,
.qs-fb__dots {
    display: none;
}

/* ---------- Stage: the big name and the floating piece ---------- */

.qs-fb__stage {
    position: relative;
    height: 230px;
    margin-top: 32px;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.qs-fb__layer {
    position: absolute;
    inset: 0;
    transition: transform .6s var(--qs-fb-ease);
}

.qs-fb__pieces {
    position: relative;
    height: 100%;
}

.qs-fb__big {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 1.4s;
}

.qs-fb__big.is-on,
.qs-fb__big.is-out {
    visibility: visible;
    transition-delay: 0s;
}

/*
 * The name, filled with the brand's material.
 *
 * The design clips a texture to the text (background-clip: text), drifts it
 * with background-position, shadows it with filter: drop-shadow and draws the
 * letters together with letter-spacing — all of which repaint the huge name
 * on every frame. The same picture is built here from GPU layers that are
 * only moved and blended, so nothing is repainted while it animates:
 *
 *   .qs-fb__mat     white card the size of the stage; fades and lifts as one
 *     .qs-fb__ink   the name, black
 *     .qs-fb__tex   the texture, sliding by transform; mix-blend-mode
 *                   "lighten" keeps it only where the ink is black
 *                   (inside .qs-fb__texclip)
 *     .qs-fb__shade the drop shadow, multiplied on top; a white copy of the
 *                   name inside it keeps the shadow off the letters
 *
 * Each letter slides by transform for the letter-spacing effect; the factors
 * (--kd desktop, --km mobile) come from js/homepage-featured-brands.js.
 * The section is white, so the white card is invisible around the letters.
 */
.qs-fb__mat {
    position: absolute;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
    background: #FFFFFF;
    opacity: 0;
    transform: translateY(40px) scale(.96);
    transition:
        opacity 1s var(--qs-fb-ease),
        transform 1.2s var(--qs-fb-ease);
}

.qs-fb__big.is-on .qs-fb__mat,
.qs-fb__big.is-out .qs-fb__mat {
    will-change: opacity, transform;
}

.qs-fb__big.is-on .qs-fb__mat {
    opacity: 1;
    transform: none;
}

.qs-fb__big.is-out .qs-fb__mat {
    opacity: 0;
    transform: translateY(-40px) scale(1.03);
}

/* Three copies of the name, laid out identically */
.qs-fb__txt {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: var(--qs-fb-fs-d, 340px);
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.qs-fb__line {
    display: block;
    min-width: 0;
}

.qs-fb__w {
    white-space: nowrap;
}

.qs-fb__l {
    display: inline-block;
    transform: translateX(calc(var(--kd, 0) * .13em));
    transition: transform 1.4s var(--qs-fb-ease);
}

.qs-fb__big.is-on .qs-fb__l {
    transform: none;
}

.qs-fb__big.is-out .qs-fb__l {
    transform: translateX(calc(var(--kd, 0) * -.05em));
}

.qs-fb__ink {
    color: #000000;
}

/* Keeps the texture a few pixels inside the card: at the card's own
   anti-aliased edge it would otherwise show as a hairline while moving */
.qs-fb__texclip {
    position: absolute;
    inset: 4px;
    overflow: hidden;
}

.qs-fb__tex {
    position: absolute;
    top: -220px;
    left: -440px;
    right: 0;
    bottom: 0;
    background-color: var(--qs-fb-ink);
    background-repeat: repeat;
    background-size: var(--qs-fb-tex-d, 220px) auto;
    mix-blend-mode: lighten;
}

.qs-fb__big.is-on .qs-fb__tex,
.qs-fb__big.is-out .qs-fb__tex {
    animation: qs-fb-pan 26s linear infinite;
    will-change: transform;
}

.qs-fb__shade {
    position: absolute;
    inset: 0;
    mix-blend-mode: multiply;
}

.qs-fb__shadow {
    color: transparent;
    text-shadow: 0 22px 26px rgba(24, 25, 27, .16);
}

.qs-fb__cut {
    color: #FFFFFF;
}

@keyframes qs-fb-pan {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(440px, 220px, 0); }
}

.qs-fb__piece {
    position: absolute;
    right: 25%;
    bottom: 8px;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 1.45s;
}

.qs-fb__piece.is-on,
.qs-fb__piece.is-out {
    visibility: visible;
    transition-delay: 0s;
}

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

.qs-fb__piece.is-on .qs-fb__bob,
.qs-fb__piece.is-out .qs-fb__bob {
    animation: qs-fb-bob 6s ease-in-out infinite;
    will-change: translate;
}

/* Off screen or in a hidden tab: no drifting, no bobbing */
.qs-fb.is-offscreen .qs-fb__tex,
.qs-fb.is-offscreen .qs-fb__bob {
    animation-play-state: paused;
}

@keyframes qs-fb-bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -12px; }
}

.qs-fb__piece img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 26px rgba(24, 25, 27, .22));
    opacity: 0;
    transform: translate(60px, 20px) rotate(8deg);
    transition:
        opacity .9s var(--qs-fb-ease) .25s,
        transform 1.2s var(--qs-fb-ease) .25s;
}

.qs-fb__piece.is-on img,
.qs-fb__piece.is-out img {
    will-change: opacity, transform;
}

.qs-fb__piece.is-on img {
    opacity: 1;
    transform: none;
}

.qs-fb__piece.is-out img {
    opacity: 0;
    transform: translate(-40px, -20px) rotate(-6deg);
    transition-delay: 0s;
}

/* ---------- Picker ---------- */

.qs-fb__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 32px;
}

.qs-fb__arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--qs-fb-ring);
    border-radius: 50%;
    background: transparent;
    color: var(--qs-fb-ink);
    cursor: pointer;
    transition: border-color .3s, background .3s, color .3s;
}

.qs-fb__arrow:hover {
    border-color: var(--qs-fb-ink);
    background: var(--qs-fb-ink);
    color: #F5F5F7;
}

.qs-fb__picker {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    padding: 0 40px;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.qs-fb__picker::-webkit-scrollbar {
    display: none;
}

/* Centred when every brand fits; when they overflow, the auto margins
   collapse to 0 so the row still scrolls from the first brand */
.qs-fb__pk:first-child {
    margin-left: auto;
}

.qs-fb__pk:last-child {
    margin-right: auto;
}

.qs-fb__picker:active {
    cursor: grabbing;
}

.qs-fb__pk {
    flex: 0 0 auto;
    position: relative;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: .2em;
    text-transform: none;
    white-space: nowrap;
    color: var(--qs-fb-muted);
    cursor: pointer;
    transition: color .3s, border-color .3s, background .3s;
}

.qs-fb__pk:hover,
.qs-fb__pk.is-on {
    color: var(--qs-fb-ink);
}

/* Under each name, a line that fills while that brand is showing */
.qs-fb__pk i {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 8px;
    height: 1px;
    background: var(--qs-fb-line);
    overflow: hidden;
}

/* Grows by transform (GPU) rather than width, which re-lays out every frame */
.qs-fb__pk.is-on i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--qs-fb-ink);
    transform: scaleX(0);
    transform-origin: left center;
    animation: qs-fb-fill var(--qs-fb-dur, 3000ms) linear forwards;
}

/* Frozen with the rotation (hover, off screen, hidden tab) — js/homepage-featured-brands.js */
.qs-fb.is-hold .qs-fb__pk.is-on i::after,
.qs-fb.is-paused .qs-fb__pk.is-on i::after {
    animation-play-state: paused;
}

@keyframes qs-fb-fill {
    to { transform: scaleX(1); }
}

/* ---------- Mobile ---------- */

@media (min-width: 1024px) {
    .qs-fb__mat.is-multi-d .qs-fb__txt {
        white-space: normal;
        line-height: .88;
        padding: 0 24px;
    }
}

/* Desktop parallax moves the two stage layers; keep them on the GPU */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .qs-fb__layer {
        will-change: transform;
    }
}

@media (max-width: 1023px) {
    .qs-fb {
        padding: 24px 0 40px;
    }

    .qs-fb__wrap {
        padding: 0 16px;
    }

    .qs-fb__head {
        justify-content: center;
    }

    .qs-fb__title {
        font-size: 24px;
        text-align: center;
    }

    .qs-fb__view--top {
        display: none;
    }

    .qs-fb__stage {
        height: 180px;
        margin-top: 20px;
    }

    .qs-fb__mat {
        transform: translateY(24px) scale(.96);
    }

    .qs-fb__big.is-out .qs-fb__mat {
        transform: translateY(-24px) scale(1.03);
    }

    .qs-fb__txt {
        font-size: var(--qs-fb-fs-m, 150px);
    }

    .qs-fb__mat.is-multi-m .qs-fb__txt {
        white-space: normal;
        line-height: .9;
        padding: 0 12px;
    }

    .qs-fb__l {
        transform: translateX(calc(var(--km, 0) * .13em));
    }

    .qs-fb__big.is-out .qs-fb__l {
        transform: translateX(calc(var(--km, 0) * -.05em));
    }

    .qs-fb__tex {
        top: -160px;
        left: -320px;
        background-size: var(--qs-fb-tex-m, 160px) auto;
    }

    .qs-fb__big.is-on .qs-fb__tex,
    .qs-fb__big.is-out .qs-fb__tex {
        animation-name: qs-fb-pan-m;
    }

    .qs-fb__shadow {
        text-shadow: 0 14px 16px rgba(24, 25, 27, .16);
    }

    /*
     * The mobile design is a 390px phone: the product sits 56px in from the
     * stage's right edge, beside the end of the name. On wider screens up to
     * 1023px (tablets, narrow windows) that edge would leave the product far
     * from the name, so the product keeps to a centred 390px stage — the
     * phone composition. The name has a fixed size (js/homepage-featured-brands.js).
     */
    .qs-fb__pieces {
        max-width: 390px;
        padding: 0;
    }

    .qs-fb__piece {
        right: 56px;
        bottom: 16px;
        width: 80px;
        height: 80px;
    }

    .qs-fb__piece.is-on .qs-fb__bob,
    .qs-fb__piece.is-out .qs-fb__bob {
        animation-name: qs-fb-bob-m;
    }

    .qs-fb__piece img {
        filter: drop-shadow(0 18px 16px rgba(24, 25, 27, .22));
        transform: translate(40px, 14px) rotate(8deg);
    }

    .qs-fb__piece.is-out img {
        transform: translate(-30px, -14px) rotate(-6deg);
    }

    .qs-fb__dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        height: 12px;
        margin-top: 12px;
    }

    .qs-fb__dot {
        width: 4px;
        height: 2px;
        border-radius: 2px;
        background: var(--qs-fb-ring);
        transition: width .4s var(--qs-fb-ease), background .4s;
    }

    .qs-fb__dot.is-on {
        width: 18px;
        background: var(--qs-fb-ink);
    }

    .qs-fb__controls {
        display: block;
        max-width: none;
        margin-top: 24px;
        padding: 0;
    }

    .qs-fb__arrow {
        display: none;
    }

    .qs-fb__picker {
        gap: 8px;
        padding: 0 16px;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    }

    .qs-fb__pk {
        min-width: 56px;
        height: 44px;
        padding: 0 16px;
        border: 1px solid var(--qs-fb-line);
        border-radius: 999px;
        font-size: 11px;
        letter-spacing: .16em;
    }

    .qs-fb__pk:hover {
        color: var(--qs-fb-muted);
    }

    .qs-fb__pk.is-on {
        color: #FFFFFF;
        background: var(--qs-fb-cocoa);
        border-color: var(--qs-fb-cocoa);
    }

    .qs-fb__pk i {
        display: none;
    }

    .qs-fb__foot {
        display: block;
        padding: 28px 16px 0;
    }

    .qs-fb__view--bottom {
        display: flex;
        gap: .4em;
        width: fit-content;
        min-width: 120px;
        height: 44px;
        margin: 0 auto;
        padding: 0 22px;
        font-size: 11px;
    }
}

@keyframes qs-fb-pan-m {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(320px, 160px, 0); }
}

@keyframes qs-fb-bob-m {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -8px; }
}

@media (prefers-reduced-motion: reduce) {
    .qs-fb__big.is-on .qs-fb__tex,
    .qs-fb__big.is-out .qs-fb__tex,
    .qs-fb__piece.is-on .qs-fb__bob,
    .qs-fb__piece.is-out .qs-fb__bob,
    .qs-fb__pk.is-on i::after {
        animation: none;
    }

    .qs-fb__layer,
    .qs-fb__mat,
    .qs-fb__l,
    .qs-fb__piece img {
        transition: none;
    }
}