/* =========================================================
   RESET
   ========================================================= */

.mz-cat-section,
.mz-cat-section * {
    box-sizing: border-box;
}


.mz-cat-section {
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.mz-cat-section .mz-cat-wrap {

    width:
        min(
            1450px,
            calc(100% - 64px)
        );

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(285px, .62fr)
        minmax(650px, 1.38fr);

    align-items:
        center;

    gap:
        30px;

    padding:
        20px 0 18px;
}


/* =========================================================
   COPY
   ========================================================= */

.mz-cat-section .mz-cat-copy {

    position:
        relative;

    z-index:
        5;

    --mz-copy-shift:
        -160px;

    --mz-copy-duration:
        1050ms;
}


/* =========================================================
   METALIZAR
   ========================================================= */

.mz-cat-section .mz-cat-kicker {

    display:
        flex;

    align-items:
        center;

    margin-bottom:
        10px;

    font-family:
        "Oswald",
        "Arial Narrow",
        sans-serif;

    font-size:
        9px;

    line-height:
        1;

    font-weight:
        400;

    letter-spacing:
        3.1px;

    text-transform:
        uppercase;

    color:
        rgba(255,255,255,.39);
}


/* =========================================================
   HEADING
   ========================================================= */

.mz-cat-section .mz-cat-copy h2 {

    margin:
        0;

    max-width:
        445px;

    font-family:
        "Oswald",
        "Arial Narrow",
        sans-serif;

    font-size:
        clamp(
            38px,
            3vw,
            50px
        );

    line-height:
        1.10;

    font-weight:
        500;

    letter-spacing:
        -.25px;

    text-transform:
        uppercase;

    color:
        rgba(228,230,233,.89);
}


/* =========================================================
   DECORATIVE LINE
   ========================================================= */

.mz-cat-section .mz-cat-copy-line {

    width:
        190px;

    height:
        1px;

    margin:
        15px
        0
        13px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.03) 0%,
            rgba(255,255,255,0.10) 22%,
            rgba(255,255,255,0.30) 48%,
            rgba(255,255,255,0.30) 58%,
            rgba(255,255,255,0.10) 82%,
            rgba(255,255,255,0.03) 100%
        );
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.mz-cat-section .mz-cat-copy p {

    max-width:
        360px;

    margin:
        0;

    font-family:
        "Oswald",
        "Arial Narrow",
        sans-serif;

    font-size:
        14px;

    line-height:
        1.48;

    font-weight:
        400;

    letter-spacing:
        .05px;

    color:
        rgba(255,255,255,.43);
}


.mz-cat-section
.mz-cat-copy p span {

    display:
        block;

    margin-top:
        4px;

    color:
        rgba(255,255,255,.39);
}


.mz-cat-section
.mz-cat-copy p span::before {

    content:
        "";

    display:
        inline-block;

    width:
        16px;

    height:
        1px;

    margin:
        0 7px 4px 0;

    background:
        rgba(255,255,255,.28);
}


/* =========================================================
   TEXT ANIMATION
   Само autoplay я стартира.
   ========================================================= */

.mz-cat-section
.mz-cat-copy.mz-copy-animate
.mz-cat-kicker,

.mz-cat-section
.mz-cat-copy.mz-copy-animate
h2,

.mz-cat-section
.mz-cat-copy.mz-copy-animate
.mz-cat-copy-line,

.mz-cat-section
.mz-cat-copy.mz-copy-animate
p {

    opacity:
        0;

    animation:
        mzCopySlideIn
        var(--mz-copy-duration)
        cubic-bezier(.16,1,.30,1)
        forwards;
}


/* stagger */

.mz-cat-section
.mz-cat-copy.mz-copy-animate
.mz-cat-kicker {

    animation-delay:
        0ms;
}


.mz-cat-section
.mz-cat-copy.mz-copy-animate
h2 {

    animation-delay:
        90ms;
}


.mz-cat-section
.mz-cat-copy.mz-copy-animate
.mz-cat-copy-line {

    animation-delay:
        180ms;
}


.mz-cat-section
.mz-cat-copy.mz-copy-animate
p {

    animation-delay:
        270ms;
}


/* DESKTOP */

@keyframes mzCopySlideIn {

    0% {

        opacity:
            0;

        transform:
            translateX(
                var(--mz-copy-shift)
            );

        filter:
            blur(3px);
    }


    35% {

        opacity:
            .45;
    }


    100% {

        opacity:
            1;

        transform:
            translateX(0);

        filter:
            blur(0);
    }
}


/* =========================================================
   STAGE
   ========================================================= */

.mz-cat-section
.mz-cat-stage {

    min-width:
        0;

    position:
        relative;
}


.mz-cat-section
.mz-cat-slider {

    position:
        relative;
}


.mz-cat-section
.mz-cat-slider--mobile {

    display:
        none;
}


/* =========================================================
   VIEWPORT
   ========================================================= */

.mz-cat-section
.mz-cat-slider__viewport-wrap {

    position:
        relative;

    width:
        100%;
}


.mz-cat-section
.mz-cat-slider__viewport {

    width:
        100%;

    overflow:
        hidden;
}


/* =========================================================
   TRACK
   ========================================================= */

.mz-cat-section
.mz-cat-slider__track {

    display:
        flex;

    width:
        100%;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    scroll-snap-type:
        x mandatory;

    scroll-behavior:
        smooth;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;
}


.mz-cat-section
.mz-cat-slider__track::-webkit-scrollbar {

    display:
        none;
}


/* =========================================================
   DESKTOP SLIDE
   ========================================================= */

.mz-cat-section
.mz-cat-slider__slide--desktop {

    flex:
        0 0 100%;

    width:
        100%;

    min-width:
        100%;

    height:
        274px;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    align-items:
        start;

    gap:
        7px;

    padding:
        0 48px;

    scroll-snap-align:
        start;

    scroll-snap-stop:
        always;
}


/* =========================================================
   ITEM
   ========================================================= */

.mz-cat-section
.mz-cat-item {

    position:
        relative;

    display:
        block;

    min-width:
        0;

    height:
        238px;

    overflow:
        visible;

    isolation:
        isolate;

    text-decoration:
        none !important;
}


.mz-cat-section
.mz-pos-left {

    transform:
        translateY(25px);
}


.mz-cat-section
.mz-pos-center {

    transform:
        translateY(1px);
}


.mz-cat-section
.mz-pos-right {

    transform:
        translateY(25px);
}


/* =========================================================
   IMAGE
   ========================================================= */

.mz-cat-section
.mz-cat-item__image {

    position:
        absolute;

    inset:
        0 0 27px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    z-index:
        1;
}


.mz-cat-section
.mz-cat-item__image img {

    display:
        block;

    width:
        88%;

    height:
        100%;

    object-fit:
        contain;

    object-position:
        center bottom;

    transform:
        scale(.95);

    filter:
        drop-shadow(
            0 9px 12px
            rgba(0,0,0,.20)
        );

    transition:
        transform
        .4s
        cubic-bezier(.2,.72,.2,1),
        filter
        .3s ease;
}


/* PATCH */

.mz-cat-section
.mz-cat-item--patch
.mz-cat-item__image img {

    width:
        65%;

    transform:
        translateY(-4px)
        scale(.84);
}


/* =========================================================
   SPRAY LABEL
   ========================================================= */

.mz-cat-section
.mz-cat-item__label {

    position:
        absolute;

    left:
        50%;

    bottom:
        0;

    transform:
        translateX(-50%);

    z-index:
        5;

    min-width:
        121px;

    height:
        44px;

    padding:
        0 14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background-image:
        var(--mz-spray-image);

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        100% 100%;

    filter:
        drop-shadow(
            0 5px 7px
            rgba(0,0,0,.21)
        );

    transition:
        transform
        .22s ease;
}


.mz-cat-section
.mz-cat-item__label--classic {

    min-width:
        195px;
}


.mz-cat-section
.mz-cat-item__label--wide {

    min-width:
        192px;
}


.mz-cat-section
.mz-cat-item__label span {

    display:
        block;

    white-space:
        nowrap;

    font-family:
        "Oswald",
        "Arial Narrow",
        sans-serif;

    font-size:
        15px;

    line-height:
        1;

    font-weight:
        500;

    color:
        rgba(255,255,255,.96);

    text-shadow:
        0 1px 3px
        rgba(0,0,0,.55);
}


/* =========================================================
   HOVER
   ========================================================= */

@media
(hover:hover)
and
(pointer:fine) {

    .mz-cat-section
    .mz-cat-item:hover
    .mz-cat-item__image img {

        transform:
            translateY(-5px)
            scale(.98);

        filter:
            drop-shadow(
                0 13px 16px
                rgba(0,0,0,.29)
            );
    }


    .mz-cat-section
    .mz-cat-item--patch:hover
    .mz-cat-item__image img {

        transform:
            translateY(-9px)
            scale(.87);
    }


    .mz-cat-section
    .mz-cat-item:hover
    .mz-cat-item__label {

        transform:
            translateX(-50%)
            scale(1.025);
    }
}


/* =========================================================
   ARROWS
   ========================================================= */

.mz-cat-section
.mz-cat-slider__prev,

.mz-cat-section
.mz-cat-slider__next {

    position:
        absolute;

    top:
        50%;

    transform:
        translateY(-50%);

    z-index:
        30;

    width:
        40px;

    height:
        40px;

    padding:
        0 !important;

    margin:
        0 !important;

    display:
        grid;

    place-items:
        center;

    background:
        rgba(6,10,16,.18);

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius:
        50%;

    color:
        rgba(255,255,255,.76);

    cursor:
        pointer;

    box-shadow:
        none;

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.mz-cat-section
.mz-cat-slider__prev {

    left:
        3px;
}


.mz-cat-section
.mz-cat-slider__next {

    right:
        3px;
}


.mz-cat-section
.mz-cat-slider__prev svg,

.mz-cat-section
.mz-cat-slider__next svg {

    display:
        block;

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   DOTS
   ========================================================= */

.mz-cat-section
.mz-cat-slider__dots {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    margin-top:
        0;
}


.mz-cat-section
.mz-cat-slider__dots button {

    width:
        17px;

    height:
        3px;

    padding:
        0;

    border:
        0;

    border-radius:
        20px;

    background:
        rgba(255,255,255,.17);

    cursor:
        pointer;

    transition:
        width .10s ease,
        background .10s ease;
}


.mz-cat-section
.mz-cat-slider__dots button.active {

    width:
        30px;

    background:
        rgba(255,255,255,.70);
}


/* =========================================================
   TABLET
   ========================================================= */

@media
(max-width: 1100px)
and
(min-width: 768px) {

    .mz-cat-section
    .mz-cat-wrap {

        width:
            calc(100% - 36px);

        grid-template-columns:
            minmax(220px,.62fr)
            minmax(480px,1.38fr);

        gap:
            15px;
    }


    .mz-cat-section
    .mz-cat-copy h2 {

        font-size:
            clamp(
                34px,
                4vw,
                44px
            );
    }


    .mz-cat-section
    .mz-cat-slider__slide--desktop {

        height:
            245px;

        padding:
            0 42px;
    }


    .mz-cat-section
    .mz-cat-item {

        height:
            210px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {


    /* WHOLE BLOCK */

    .mz-cat-section
    .mz-cat-wrap {

        width:
            100%;

        display:
            block;

        padding:
            12px 10px 9px;
    }


    /* TEXT */

    .mz-cat-section
    .mz-cat-copy {

        --mz-copy-shift:
            -80px;

        --mz-copy-duration:
            780ms;

        padding:
            0 4px;

        margin-bottom:
            2px;

        text-align:
            center;
    }


    .mz-cat-section
    .mz-cat-kicker {

        justify-content:
            center;

        margin-bottom:
            4px;

        font-size:
            6.5px;

        letter-spacing:
            2.2px;
    }


    .mz-cat-section
    .mz-cat-copy h2 {

        max-width:
            100%;

        margin:
            0 auto;

        font-size:
            clamp(
                25px,
                7.8vw,
                33px
            );

        line-height:
            1.03;
    }


    .mz-cat-section
    .mz-cat-copy-line {

        width:
            100px;

        margin:
            6px auto;
    }


    .mz-cat-section
    .mz-cat-copy p {

        max-width:
            270px;

        margin:
            0 auto;

        font-size:
            9.5px;

        line-height:
            1.32;

        text-align:
            center;
    }


    .mz-cat-section
    .mz-cat-copy p span {

        margin-top:
            2px;
    }


    .mz-cat-section
    .mz-cat-copy p span::before {

        width:
            11px;

        margin-right:
            5px;
    }


    /* MOBILE ANIMATION */

    .mz-cat-section
    .mz-cat-copy.mz-copy-animate
    .mz-cat-kicker,

    .mz-cat-section
    .mz-cat-copy.mz-copy-animate
    h2,

    .mz-cat-section
    .mz-cat-copy.mz-copy-animate
    .mz-cat-copy-line,

    .mz-cat-section
    .mz-cat-copy.mz-copy-animate
    p {

        filter:
            none !important;

        animation-name:
            mzCopySlideInMobile;

        will-change:
            transform,
            opacity;
    }


    .mz-cat-section
    .mz-cat-copy.mz-copy-animate
    .mz-cat-kicker {

        animation-delay:
            0ms;
    }


    .mz-cat-section
    .mz-cat-copy.mz-copy-animate
    h2 {

        animation-delay:
            35ms;
    }


    .mz-cat-section
    .mz-cat-copy.mz-copy-animate
    .mz-cat-copy-line {

        animation-delay:
            70ms;
    }


    .mz-cat-section
    .mz-cat-copy.mz-copy-animate
    p {

        animation-delay:
            105ms;
    }


    /* SWITCH */

    .mz-cat-section
    .mz-cat-slider--desktop {

        display:
            none;
    }


    .mz-cat-section
    .mz-cat-slider--mobile {

        display:
            block;
    }


    /* SLIDE */

    .mz-cat-section
    .mz-cat-slider__slide--mobile {

        flex:
            0 0 100%;

        width:
            100%;

        min-width:
            100%;

        height:
            198px;

        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            4px;

        padding:
            0 35px;

        scroll-snap-align:
            start;

        scroll-snap-stop:
            always;
    }


    .mz-cat-section
    .mz-cat-slider__slide--mobile
    .mz-cat-item {

        height:
            184px;

        transform:
            none !important;
    }


    /* IMAGES */

    .mz-cat-section
    .mz-cat-item__image {

        inset:
            0 0 23px;
    }


    .mz-cat-section
    .mz-cat-item__image img {

        width:
            92%;

        transform:
            scale(.94);
    }


    .mz-cat-section
    .mz-cat-item--patch
    .mz-cat-item__image img {

        width:
            68%;

        transform:
            translateY(-2px)
            scale(.82);
    }


    /* LABEL */

    .mz-cat-section
    .mz-cat-item__label {

        min-width:
            94px;

        height:
            38px;

        padding:
            0 10px;

        background-image:
            none;

        filter:
            none;

        isolation:
            isolate;
    }


    /* SPRAY +30% */

    .mz-cat-section
    .mz-cat-item__label::before {

        content:
            "";

        position:
            absolute;

        left:
            50%;

        top:
            50%;

        width:
            130%;

        height:
            130%;

        transform:
            translate(-50%,-50%);

        background-image:
            var(--mz-spray-image);

        background-repeat:
            no-repeat;

        background-position:
            center;

        background-size:
            100% 100%;

        z-index:
            0;

        pointer-events:
            none;

        filter:
            drop-shadow(
                0 4px 6px
                rgba(0,0,0,.24)
            );
    }


    .mz-cat-section
    .mz-cat-item__label--classic {

        min-width:
            139px;
    }


    .mz-cat-section
    .mz-cat-item__label--wide {

        min-width:
            137px;
    }


    .mz-cat-section
    .mz-cat-item__label span {

        position:
            relative;

        z-index:
            2;

        font-size:
            11px;
    }


    .mz-cat-section
    .mz-cat-item__label--classic span,

    .mz-cat-section
    .mz-cat-item__label--wide span {

        font-size:
            9.5px;
    }


    /* ARROWS */

    .mz-cat-section
    .mz-cat-slider__prev,

    .mz-cat-section
    .mz-cat-slider__next {

        width:
            34px;

        height:
            34px;
    }


    .mz-cat-section
    .mz-cat-slider__prev {

        left:
            0;
    }


    .mz-cat-section
    .mz-cat-slider__next {

        right:
            0;
    }


    .mz-cat-section
    .mz-cat-slider__prev svg,

    .mz-cat-section
    .mz-cat-slider__next svg {

        width:
            16px;

        height:
            16px;
    }


    .mz-cat-section
    .mz-cat-slider__dots {

        margin-top:
            1px;
    }

}


/* =========================================================
   MOBILE ANIMATION
   ========================================================= */

@keyframes mzCopySlideInMobile {

    0% {

        opacity:
            0;

        transform:
            translate3d(
                -80px,
                0,
                0
            );
    }


    100% {

        opacity:
            1;

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


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .mz-cat-section
    .mz-cat-wrap {

        padding-top:
            10px;

        padding-bottom:
            8px;
    }


    .mz-cat-section
    .mz-cat-slider__slide--mobile {

        height:
            184px;

        padding:
            0 31px;
    }


    .mz-cat-section
    .mz-cat-slider__slide--mobile
    .mz-cat-item {

        height:
            172px;
    }


    .mz-cat-section
    .mz-cat-item__label {

        height:
            35px;
    }


    .mz-cat-section
    .mz-cat-item__label--classic {

        min-width:
            128px;
    }


    .mz-cat-section
    .mz-cat-item__label--wide {

        min-width:
            127px;
    }


    .mz-cat-section
    .mz-cat-item__label span {

        font-size:
            10.5px;
    }


    .mz-cat-section
    .mz-cat-item__label--classic span,

    .mz-cat-section
    .mz-cat-item__label--wide span {

        font-size:
            8.8px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mz-cat-section
    .mz-cat-copy.mz-copy-animate
    .mz-cat-kicker,

    .mz-cat-section
    .mz-cat-copy.mz-copy-animate
    h2,

    .mz-cat-section
    .mz-cat-copy.mz-copy-animate
    .mz-cat-copy-line,

    .mz-cat-section
    .mz-cat-copy.mz-copy-animate
    p {

        animation:
            none;

        opacity:
            1;

        transform:
            none;

        filter:
            none;
    }
}

/* =========================================================
   MOBILE LABEL READABILITY
   Text + spray scale together proportionally.
   ========================================================= */
@media (max-width: 767px) {

    .mz-cat-section
    .mz-cat-item__label {
        transform:
            translateX(-50%)
            scale(1.18);

        transform-origin:
            center bottom;
    }
}

@media (max-width: 390px) {

    .mz-cat-section
    .mz-cat-item__label {
        transform:
            translateX(-50%)
            scale(1.14);
    }
}

/* =========================================================
   MOBILE SPACING TUNING
   - less empty space above the heading
   - more breathing room between copy and products
   - less empty space below the dots
   ========================================================= */
@media (max-width: 767px) {

    .mz-cat-section
    .mz-cat-wrap {
        padding-top: 2px;
        padding-bottom: 0;
    }

    .mz-cat-section
    .mz-cat-copy {
        margin-bottom: 14px;
    }

    .mz-cat-section
    .mz-cat-slider--mobile {
        margin-bottom: 0;
    }
}

/* Prevent the old small-phone padding from adding the space back. */
@media (max-width: 390px) {

    .mz-cat-section
    .mz-cat-wrap {
        padding-top: 0;
        padding-bottom: 0;
    }

    .mz-cat-section
    .mz-cat-copy {
        margin-bottom: 13px;
    }
}

/* =========================================================
   DESKTOP MOUSE DRAG
   ========================================================= */
@media (hover: hover) and (pointer: fine) {

    .mz-cat-section
    .mz-cat-slider__track {
        cursor: grab;
    }

    .mz-cat-section
    .mz-cat-slider__track.is-mouse-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        scroll-behavior: auto;
        user-select: none;
        -webkit-user-select: none;
    }

    .mz-cat-section
    .mz-cat-slider__track.is-mouse-dragging
    .mz-cat-item {
        pointer-events: none;
    }
}



@media (hover: hover) and (pointer: fine) {

    .mz-cat-section
    .mz-cat-slider__track
    img {
        -webkit-user-drag: none;
        user-select: none;
    }
}

/* =========================================================
   DESKTOP MOUSE DRAG
   ========================================================= */
@media (hover: hover) and (pointer: fine) {

    .mz-cat-section
    .mz-cat-slider__track {
        cursor: grab;
    }

    .mz-cat-section
    .mz-cat-slider__track
    a,

    .mz-cat-section
    .mz-cat-slider__track
    img {
        -webkit-user-drag: none;
    }

    .mz-cat-section
    .mz-cat-slider__track.is-mouse-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        scroll-behavior: auto;
        user-select: none;
        -webkit-user-select: none;
    }

    .mz-cat-section
    .mz-cat-slider__track.is-mouse-dragging
    .mz-cat-item {
        pointer-events: none;
    }
}