/** Shopify CDN: Minification failed

Line 1331:0 Unexpected "}"

**/
/* =====================================================
   NILVIPANIC OFFICIAL CSS v1.0
   PART 1 : HERO
===================================================== */



/* =====================================================
   HERO
===================================================== */

/* =========================
   HERO CONTAINER
========================= */

.np-hero{

    position:relative;

    width:100%;

    min-height:82vh;

    padding-bottom:0;

    background:#fff;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

}



/* =========================
   HERO BACKGROUND TEXT
========================= */

.np-hero__bg{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:1;

}

.np-hero__bg span{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    font-size:clamp(150px,23vw,360px);

    font-weight:900;

    letter-spacing:-.08em;

    color:#111;

    line-height:1;

    white-space:nowrap;

}

.np-hero__bg span:first-child{

    top:5%;

}

.np-hero__bg span:last-child{

    bottom:20%;

}



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

.np-hero__image{

    position:relative;

    z-index:2;

}

.np-shirt-wrap{

    position:relative;

    width:min(78vw,1080px);

    aspect-ratio:1/1;

    overflow:visible;

    animation:npFloat 5s ease-in-out infinite;

}

.np-shirt{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:contain;

    opacity:0;

    transition:

        opacity .45s,

        transform .35s,

        filter .35s;

    transform:scale(1);

    filter:drop-shadow(
        0 45px 70px rgba(0,0,0,.22)
    );

}

.np-shirt.active{

    opacity:1;

}



/* =========================
   HERO IMAGE HOVER
========================= */

.np-shirt-wrap:hover .np-shirt.active{

    transform:

        scale(1.06)

        translateY(-8px);

    filter:

        drop-shadow(0 35px 45px rgba(0,0,0,.16))

        drop-shadow(0 80px 120px rgba(0,0,0,.18));

}



/* =========================
   HERO FLOAT ANIMATION
========================= */

@keyframes npFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}



/* =========================
   HERO NAVIGATION
========================= */

.np-hero__nav{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 60px;

    pointer-events:none;

    z-index:10;

}

.np-nav-btn{

    pointer-events:auto;

    width:72px;

    height:72px;

    border-radius:999px;

    border:1px solid rgba(0,0,0,.18);

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

    backdrop-filter:blur(8px);

    font-size:26px;

    cursor:pointer;

    transition:.3s;

}

.np-nav-btn:hover{

    background:#000;

    color:#fff;

    transform:scale(1.08);

}

/* =====================================================
   PRODUCT
===================================================== */



/* =========================
   PRODUCT CONTAINER
========================= */

.np-product{

    background:#fff;

    color:#111;

    padding:60px 24px 90px;

    margin-top:-200px;

    position:relative;

    z-index:30;

}

.np-product__container{

    max-width:560px;

    width:100%;

    margin:0 auto;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

}



/* =========================
   PRODUCT BRAND
========================= */

.np-product__eyebrow{

    font-size:11px;

    letter-spacing:.45em;

    opacity:.45;

    margin-bottom:22px;

    color:#888;

}



/* =========================
   PRODUCT TITLE
========================= */

.np-product__title{

    font-size:clamp(36px,4vw,58px);

    font-weight:700;

    line-height:1.05;

    margin-top:-10px;

    margin-bottom:14px;

    letter-spacing:-0.03em;

    color:#111;

}



/* =========================
   PRODUCT PRICE
========================= */

.np-product__price{

    font-size:18px;

    font-weight:600;

    letter-spacing:.18em;

    margin-bottom:26px;

    color:#111;

}



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

.np-product__description{

    max-width:430px;

    margin:0 auto 42px;

    line-height:1.9;

    color:#666;

    font-size:15px;

}



/* =========================
   PRODUCT SIZE BUTTONS
========================= */

.np-product__sizes{

    display:flex;

    justify-content:center;

    gap:14px;

    margin-bottom:34px;

}

.np-product__sizes button{

    width:56px;

    height:56px;

    background:#fff;

    border:1px solid #ddd;

    color:#111;

    transition:.3s;

    cursor:pointer;

}

.np-product__sizes button:hover,
.np-product__sizes button.active{

    background:#111;

    color:#fff;

}



/* =========================
   PRODUCT BUY BUTTON
========================= */

.np-buy-btn{

    width:100%;

    max-width:440px;

    height:64px;

    margin:0 auto;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:#111;

    color:#fff;

    border:1px solid #111;

    border-radius:8px;

    font-size:13px;

    font-weight:600;

    letter-spacing:.28em;

    cursor:pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .25s ease,
        border-color .3s ease,
        box-shadow .25s ease;

}

.np-buy-btn:hover{

    background:#fff;

    color:#111;

    border-color:#111;

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}



/* =====================================================
   PRODUCT SIZE GUIDE
===================================================== */



/* =========================
   SIZE GUIDE CONTAINER
========================= */

.np-size-guide{

    width:100%;

    max-width:440px;

    margin:0 auto 36px;

    border-top:1px solid #e5e5e5;

    border-bottom:1px solid #e5e5e5;

}



/* =========================
   SIZE GUIDE TOGGLE
========================= */

.np-size-guide__toggle{

    width:100%;

    height:58px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:none;

    border:none;

    cursor:pointer;

    color:#111;

    font-size:12px;

    letter-spacing:.28em;

    padding:0;

}

.np-size-guide__icon{

    font-size:22px;

    font-weight:300;

    transition:transform .3s ease;

}



/* =========================
   SIZE GUIDE CONTENT
========================= */

.np-size-guide__content{

    padding:0 0 24px;

    overflow:hidden;

}

.np-size-guide__image{

    width:100%;

    display:block;

}

.np-size-guide__image--mobile{

    display:none;

}

/* =====================================================
   DETAILS
===================================================== */



/* =========================
   DETAILS CONTAINER
========================= */

.np-details{

    background:#000;

    color:#fff;

    padding:24px 0;

    border-top:1px solid rgba(255,255,255,.08);

    border-bottom:1px solid rgba(255,255,255,.08);

}



/* =========================
   DETAILS TITLE
========================= */

.np-details__title{

    text-align:center;

    font-size:12px;

    font-weight:600;

    letter-spacing:.45em;

    padding:0 0 32px;

    opacity:.75;

}



/* =========================
   DETAILS GRID
========================= */

.np-details__grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

}



/* =========================
   DETAILS CARD
========================= */

.np-detail-card{

    text-align:center;

    padding:55px 30px;

    border-left:1px solid rgba(255,255,255,.08);

}

.np-detail-card:first-child{

    border-left:none;

}



/* =========================
   DETAILS CARD HOVER
========================= */

.np-detail-card:hover{

    transform:translateY(-6px);

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

}



/* =========================
   DETAILS ICON
========================= */

.np-detail-icon{

    width:44px;

    height:44px;

    margin:0 auto 24px;

    color:#fff;

}

.np-detail-icon svg{

    width:100%;

    height:100%;

    display:block;

}

.np-detail-card:hover .np-detail-icon{

    transform:scale(1.08);

    opacity:1;

}



/* =========================
   DETAILS TEXT
========================= */

.np-detail-card h3{

    font-size:15px;

    font-weight:600;

    letter-spacing:.18em;

    margin-bottom:18px;

}

.np-detail-card p{

    font-size:14px;

    line-height:2;

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

}

/* =====================================================
   DETAILS RESPONSIVE
===================================================== */



/* =========================
   TABLET (900px)
========================= */

@media(max-width:900px){

    .np-details__grid{

        grid-template-columns:1fr 1fr;

    }

}



/* =========================
   MOBILE (640px)
========================= */

@media(max-width:640px){

    .np-details__grid{

        grid-template-columns:1fr;

    }

    .np-detail-card{

        border-left:none;

        border-top:1px solid rgba(255,255,255,.08);

    }

}

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



/* =========================
   GRID CONTAINER
========================= */

.np-grid{

    display:grid;

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

    background:#fff;

}



/* =========================
   GRID TEXT
========================= */

.np-grid__text{

    min-height:280px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    text-align:left;

    padding:70px;

    background:#fff;

}



/* =========================
   GRID TEXT TITLE
========================= */

.np-grid__text h3{

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

    font-weight:900;

    letter-spacing:-0.05em;

    line-height:.9;

    color:#111;

    margin:0;

}



/* =========================
   GRID TEXT LINE
========================= */

.np-grid__text span{

    width:52px;

    height:2px;

    background:#111;

    margin:24px 0 28px;

}



/* =========================
   GRID TEXT DESCRIPTION
========================= */

.np-grid__text p{

    max-width:300px;

    font-size:14px;

    line-height:1.9;

    color:#555;

    margin:0;

}



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

.np-grid__image{

    overflow:hidden;

    position:relative;

    aspect-ratio:2 / 1;

}

.np-grid__image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:

        transform .6s ease,

        filter .4s ease;

}

/* =========================
   GRID IMAGE DEVICE
========================= */

.np-grid__image--mobile{

    display:none;

}


/* =========================
   GRID IMAGE HOVER
========================= */

.np-grid__image:hover img{

    transform:scale(1.04);

}



/* =====================================================
   GRID RESPONSIVE
===================================================== */



/* =========================
   TABLET (900px)
========================= */

@media(max-width:900px){

    .np-grid{

        grid-template-columns:1fr;

    }

    .np-grid__text{

        aspect-ratio:auto;

        padding:56px 32px;

    }

    .np-grid__image{

        aspect-ratio:1/1;

    }

    /* Keep alternating layout */

    .np-grid__image:nth-child(3){

        order:4;

    }

    .np-grid__text:nth-child(4){

        order:3;

    }

    .np-grid__image:nth-child(7){

        order:8;

    }

    .np-grid__text:nth-child(8){

        order:7;

    }

}



/* =========================
   MOBILE (900px)
========================= */

@media(max-width:900px){

    .np-grid{

        grid-template-columns:1fr;

    }

    .np-grid__text{

        min-height:260px;

        padding:60px 32px;

    }

    .np-grid__image{

        min-height:280px;

    }

    /* Keep text above image */

    .np-grid__image:nth-child(3){

        order:4;

    }

    .np-grid__text:nth-child(4){

        order:3;

    }

    .np-grid__image:nth-child(7){

        order:8;

    }

    .np-grid__text:nth-child(8){

        order:7;

    }

}

/* =====================================================
   FOOTER
===================================================== */



/* =========================
   FOOTER CONTAINER
========================= */

.np-footer{

    background:#000;

    color:#fff;

    text-align:center;

    padding:90px 24px;

}



/* =========================
   FOOTER LOGO
========================= */

.np-footer__logo{

    font-size:26px;

    font-weight:900;

    letter-spacing:.22em;

    margin-bottom:18px;

}



/* =========================
   FOOTER COPYRIGHT
========================= */

.np-footer p{

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

    font-size:12px;

    letter-spacing:.18em;

}



/* =====================================================
   RESPONSIVE
===================================================== */



/* =====================================================
   TABLET (900px)
===================================================== */

@media(max-width:900px){

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

    .np-grid{

        grid-template-columns:1fr;

    }

    .np-grid__text{

    min-height:180px;

    padding:36px 28px;

}

    .np-grid__image{

        min-height:220px;

    }

    .np-grid__image:nth-child(3){

        order:4;

    }

    .np-grid__text:nth-child(4){

        order:3;

    }

    .np-grid__image:nth-child(7){

        order:8;

    }

    .np-grid__text:nth-child(8){

        order:7;

    }

}



/* =====================================================
   MOBILE (768px)
===================================================== */

@media(max-width:768px){

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

    .np-hero{
        height:440px;
        min-height:440px;
        max-height:440px;
        padding-top:0;
    }

    /* MEMBERS / ONLY */
    .np-hero__bg span{
        font-size:84px;
    }

    .np-hero__bg span:first-child{
        top:8px;
    }

    .np-hero__bg span:last-child{
        top:195px;
        bottom:auto;
    }

    /* T-shirt */
    .np-hero__image{
        position:relative;
        top:-40px;
    }

    .np-shirt-wrap{
        width:350px;
        height:350px;
    }

    /* Arrows */
    .np-hero__nav{
        padding:0 10px;
        transform:translateY(-40px);
    }

    .np-nav-btn{
        width:44px;
        height:44px;
        font-size:16px;
        background:#000;
        color:#fff;
        border:1px solid #000;
    }

    .np-nav-btn:hover{
        background:#fff;
        color:#000;
    }

}



    /* =========================
       PRODUCT
    ========================= */

    .np-product{

        margin-top:-120px;

    }



    /* =========================
       SIZE GUIDE
    ========================= */

    .np-size-guide__image--pc{

        display:none;

    }

    .np-size-guide__image--mobile{

        display:block;

    }



    /* =========================
       FOOTER
    ========================= */

    .np-footer{

        padding:70px 20px;

    }


    /* =========================
   GRID IMAGE DEVICE
========================= */

.np-grid__image--pc{

    display:none;

}

.np-grid__image--mobile{

    display:block;

}

}



/* =====================================================
   SMALL MOBILE (640px)
===================================================== */

@media(max-width:640px){

    /* =========================
       DETAILS
    ========================= */

    .np-details__grid{

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

    gap:0;

    }   

    .np-detail-card{

    padding:40px 20px;

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

    }

    .np-detail-icon{

    width:48px;

    height:48px;

    margin-bottom:12px;

}

    .np-detail-card h3{

    font-size:12px;

    margin-bottom:12px;

}

    .np-detail-card p{

    font-size:11px;

    line-height:1.8;

}

}