/* =========================================================
   PRINTMANIA SHOP
   COMPLETE SHOP CSS
========================================================= */


/* =========================================================
   SHOP PAGE / BODY
========================================================= */

body.shop-page{
    margin:0 !important;
    padding-top:0 !important;

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(255,0,170,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 8% 85%,
            rgba(0,191,255,.10),
            transparent 32%
        ),
        #0f1117;

    color:white;
}


/* =========================================================
   SHOP CONTENT
========================================================= */

body.shop-page > .shop-content{
    margin:0 !important;
    padding:0 !important;
}

body.shop-page > .shop-content > .container{
    width:min(1280px,100%) !important;
    max-width:1280px !important;

    margin:0 auto !important;

    padding:
        0
        18px
        60px !important;

    box-sizing:border-box;
}


/* =========================================================
   SHOP PAGE WRAPPER
========================================================= */

.shop-page{
    margin:0 !important;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,0,170,.13),
            transparent 34%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(0,191,255,.12),
            transparent 34%
        ),
        #0f1117;

    color:white;
}


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

.shop-page .container{
    width:min(1280px,100%) !important;

    max-width:1280px !important;

    margin:0 auto !important;

    padding:
        0
        18px
        60px !important;

    box-sizing:border-box;
}


/* =========================================================
   SHOP HEADER
========================================================= */

.shop-head{
    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:28px;

    flex-wrap:wrap;
}


.shop-title h1{
    margin:0;

    font-size:44px;

    line-height:1.05;

    font-weight:900;

    letter-spacing:.5px;

    text-transform:uppercase;

    background:
        linear-gradient(
            90deg,
            #fff,
            #00bfff,
            #ff00aa,
            #fff
        );

    background-size:250% auto;

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

    animation:
        shopTitleGradient 5s linear infinite;
}


@keyframes shopTitleGradient{

    0%{
        background-position:0% center;
    }

    100%{
        background-position:250% center;
    }

}


.shop-title p{
    margin:10px 0 0;

    color:#9da7ba;

    font-size:16px;

    line-height:1.5;
}


/* =========================================================
   SEARCH
========================================================= */

.search-form{
    position:relative;

    display:flex;

    align-items:center;

    gap:8px;

    padding:7px;

    background:
        rgba(23,27,36,.85);

    border:1px solid #2a303c;

    border-radius:16px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.25);

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


.search-form:hover{
    transform:translateY(-2px);

    border-color:
        rgba(0,191,255,.45);

    box-shadow:
        0 18px 45px rgba(0,0,0,.30),
        0 0 25px rgba(0,191,255,.06);
}


.search-form:focus-within{
    border-color:#00bfff;

    box-shadow:
        0 0 0 1px rgba(0,191,255,.2),
        0 15px 40px rgba(0,0,0,.3),
        0 0 30px rgba(0,191,255,.10);
}


.search-form input{
    width:300px;

    height:48px;

    border:1px solid transparent;

    outline:none;

    border-radius:11px;

    padding:0 15px;

    background:#0d1016;

    color:white;

    font-size:15px;

    font-weight:bold;

    box-sizing:border-box;

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


.search-form input:focus{
    border-color:
        rgba(0,191,255,.45);

    background:#10151e;

    box-shadow:
        0 0 18px rgba(0,191,255,.08);
}


.search-form input::placeholder{
    color:#687386;
}


/* =========================================================
   SEARCH BUTTON
========================================================= */

.search-form .btn{
    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:48px;

    min-width:115px;

    border:0;

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #00bfff,
            #008fd1
        );

    color:white;

    font-size:15px;

    font-weight:900;

    cursor:pointer;

    overflow:hidden;

    isolation:isolate;

    box-shadow:
        0 7px 20px rgba(0,191,255,.18);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


.search-form .btn::before{
    content:"";

    position:absolute;

    top:-20%;

    left:-150%;

    width:65%;

    height:140%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.05) 20%,
            rgba(255,255,255,.85) 50%,
            rgba(255,255,255,.05) 80%,
            transparent 100%
        );

    transform:skewX(-25deg);

    transition:
        left .65s cubic-bezier(.22,1,.36,1);

    z-index:2;

    pointer-events:none;
}


.search-form .btn::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08),
            transparent
        );

    opacity:0;

    transition:
        opacity .25s ease;

    z-index:1;

    pointer-events:none;
}


.search-form .btn:hover::before{
    left:150%;
}


.search-form .btn:hover::after{
    opacity:1;
}


.search-form .btn:hover{
    transform:translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #ff00aa,
            #d9008d
        );

    box-shadow:
        0 10px 28px rgba(255,0,170,.25),
        0 0 20px rgba(255,0,170,.10);
}


.search-form .btn:active{
    transform:translateY(-1px);
}


/* =========================================================
   BREADCRUMB
========================================================= */

.breadcrumb{
    position:relative;

    margin:0 0 30px;

    padding:14px 18px;

    color:#8f99aa;

    background:
        rgba(23,27,36,.55);

    border:1px solid #252b36;

    border-radius:14px;

    overflow:hidden;

    box-shadow:
        0 10px 28px rgba(0,0,0,.14);

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


.breadcrumb::before{
    content:"";

    position:absolute;

    left:0;

    top:0;

    width:3px;

    height:100%;

    background:
        linear-gradient(
            180deg,
            #00bfff,
            #ff00aa
        );
}


.breadcrumb:hover{
    border-color:#343c4b;

    background:
        rgba(23,27,36,.75);
}


.breadcrumb a{
    color:#00bfff;

    text-decoration:none;

    font-weight:800;

    transition:.25s;
}


.breadcrumb a:hover{
    color:#ff00aa;
}


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

.grid{
    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px,300px)
        );

    gap:28px;

    justify-content:center;

    align-items:stretch;
}


/* =========================================================
   CATEGORY + PRODUCT CARDS
========================================================= */

.category-card,
.card{
    position:relative;

    width:100%;

    max-width:300px;

    overflow:hidden;

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(25,30,40,.98),
            rgba(14,18,25,.98)
        );

    border:1px solid #292f3b;

    box-shadow:
        0 18px 40px rgba(0,0,0,.25);

    transform:translateY(0);

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        border-color .35s ease,
        box-shadow .45s ease;
}


/* =========================================================
   SVETLEĆA LINIJA
========================================================= */

.category-card::after,
.card::after{
    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00bfff,
            #ff00aa,
            transparent
        );

    transition:left .7s ease;

    z-index:5;
}


.category-card:hover::after,
.card:hover::after{
    left:140%;
}


/* =========================================================
   INNER GLOW
========================================================= */

.category-card::before,
.card::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(255,0,170,.13),
            transparent 38%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(0,191,255,.11),
            transparent 42%
        );

    opacity:.75;

    pointer-events:none;

    transition:
        opacity .4s ease;
}


.category-card:hover::before,
.card:hover::before{
    opacity:1;
}


.category-card:hover,
.card:hover{
    transform:translateY(-10px);

    border-color:
        rgba(0,191,255,.75);

    box-shadow:
        0 0 0 1px rgba(255,0,170,.15),
        0 25px 55px rgba(0,0,0,.40),
        0 0 35px rgba(0,191,255,.10);
}


/* =========================================================
   CATEGORY CARD
========================================================= */

.category-card a{
    position:relative;

    z-index:2;

    display:block;

    color:white;

    text-decoration:none;
}


.category-card img{
    width:100%;

    height:255px;

    object-fit:contain;

    display:block;

    padding:18px;

    box-sizing:border-box;

    transform:scale(1);

    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        filter .5s ease;
}


.category-card:hover img{
    transform:scale(1.08);

    filter:
        drop-shadow(
            0 18px 25px rgba(0,0,0,.4)
        );
}


.category-card h3{
    margin:0;

    padding:0 18px 23px;

    text-align:center;

    color:white;

    font-size:22px;

    font-weight:900;

    transition:
        color .3s ease,
        transform .3s ease;
}


.category-card:hover h3{
    color:#00bfff;

    transform:translateY(-2px);
}


/* =========================================================
   PRODUCT CARD IMAGE
========================================================= */

.card>a{
    position:relative;

    z-index:2;

    display:block;

    overflow:hidden;
}


.card>a>img{
    width:100%;

    height:255px;

    object-fit:contain;

    display:block;

    padding:16px;

    box-sizing:border-box;

    transform:scale(1);

    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        filter .5s ease;
}


.card:hover>a>img{
    transform:scale(1.08);

    filter:
        drop-shadow(
            0 18px 27px rgba(0,0,0,.42)
        );
}


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

.no-img{
    height:255px;

    margin:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:#11161f;

    border:1px dashed #303746;

    color:#697386;

    font-size:18px;

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


.card:hover .no-img,
.category-card:hover .no-img{
    border-color:#00bfff;

    color:#00bfff;

    background:#121a24;
}


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

.card-body{
    position:relative;

    z-index:3;

    padding:0 18px 20px;

    text-align:center;
}


.card h3{
    margin:0 0 8px;

    min-height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    line-height:1.2;
}


.card h3 a{
    color:white;

    text-decoration:none;

    transition:
        color .25s ease;
}


.card h3 a:hover{
    color:#ff00aa;
}


.card p{
    margin:0 0 10px;

    min-height:40px;

    color:#aeb8c9;

    font-size:14px;

    line-height:1.45;

    transition:
        color .3s ease;
}


.card:hover p{
    color:#cbd4e4;
}


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

.price{
    min-height:auto !important;

    margin:10px 0 16px !important;

    color:#00bfff !important;

    font-size:24px !important;

    font-weight:900;

    text-shadow:
        0 0 16px rgba(0,191,255,.25);

    transition:
        transform .3s ease,
        text-shadow .3s ease;
}


.card:hover .price{
    transform:scale(1.05);

    text-shadow:
        0 0 20px rgba(0,191,255,.45);
}


/* =========================================================
   ACTIONS
========================================================= */

.actions{
    display:block;
}


.shop-card-actions{
    display:flex;

    flex-direction:column;

    align-items:center;

    gap:7px;

    margin-top:5px;
}


.shop-card-actions a{
    display:block;

    width:165px;

    transition:
        transform .3s cubic-bezier(.22,1,.36,1),
        filter .3s ease;
}


.shop-card-actions img{
    display:block;

    width:165px;

    height:auto;

    transition:
        transform .3s ease,
        filter .3s ease;
}


.shop-card-actions a:hover{
    transform:
        translateY(-4px)
        scale(1.03);

    filter:
        drop-shadow(
            0 8px 15px rgba(0,191,255,.20)
        );
}


.shop-card-actions a:active{
    transform:scale(.96);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state{
    grid-column:1/-1;

    width:min(650px,100%);

    margin:20px auto;

    padding:45px 25px;

    box-sizing:border-box;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            #191e28,
            #11151d
        );

    border:1px solid #292f3b;

    border-radius:22px;

    color:#aeb8c9;

    font-size:18px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.25);

    animation:
        shopFadeIn .6s ease both;
}


@keyframes shopFadeIn{

    from{
        opacity:0;

        transform:
            translateY(15px);
    }

    to{
        opacity:1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   CARD LOAD ANIMATION
========================================================= */

.category-card,
.card{
    animation:
        shopCardIn
        .65s
        cubic-bezier(.22,1,.36,1)
        both;
}


.category-card:nth-child(1),
.card:nth-child(1){
    animation-delay:.03s;
}


.category-card:nth-child(2),
.card:nth-child(2){
    animation-delay:.08s;
}


.category-card:nth-child(3),
.card:nth-child(3){
    animation-delay:.13s;
}


.category-card:nth-child(4),
.card:nth-child(4){
    animation-delay:.18s;
}


.category-card:nth-child(5),
.card:nth-child(5){
    animation-delay:.23s;
}


.category-card:nth-child(6),
.card:nth-child(6){
    animation-delay:.28s;
}


.category-card:nth-child(7),
.card:nth-child(7){
    animation-delay:.33s;
}


.category-card:nth-child(8),
.card:nth-child(8){
    animation-delay:.38s;
}


@keyframes shopCardIn{

    from{
        opacity:0;

        transform:
            translateY(25px)
            scale(.97);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }

}


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

@media(max-width:900px){

    body.shop-page{
        padding-top:0px !important;
    }


    body.shop-page > .shop-content > .container,
    .shop-page .container{
        padding:
            0
            18px
            60px !important;
    }


    .shop-head{
        align-items:center;
    }


    .shop-title h1{
        font-size:38px;
    }


    .grid{
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(240px,300px)
            );

        gap:22px;
    }

}


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

@media(max-width:768px){

    body.shop-page{
        padding-top:150px !important;
    }


    body.shop-page > .shop-content > .container,
    .shop-page .container{
        width:100% !important;

        padding:
            0
            14px
            45px !important;
    }


    .shop-head{
        display:block;

        text-align:center;

        margin-bottom:22px;
    }


    .shop-title h1{
        font-size:32px;
    }


    .shop-title p{
        font-size:14px;

        margin-top:9px;
    }


    .search-form{
        width:100%;

        margin-top:18px;

        padding:6px;

        flex-direction:column;

        box-sizing:border-box;
    }


    .search-form input{
        width:100%;

        height:46px;
    }


    .search-form .btn{
        width:100%;

        height:46px;
    }


    .breadcrumb{
        margin-bottom:22px;

        text-align:center;

        font-size:13px;
    }


    .grid{
        grid-template-columns:
            minmax(0,320px);

        gap:20px;

        justify-content:center;
    }


    .category-card,
    .card{
        width:100%;

        max-width:320px;
    }


    .category-card img,
    .card>a>img{
        height:260px;
    }


    .no-img{
        height:260px;
    }

}


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

@media(max-width:430px){

    body.shop-page{
        padding-top:150px !important;
    }


    body.shop-page > .shop-content > .container,
    .shop-page .container{
        padding:
            0
            10px
            40px !important;
    }


    .shop-title h1{
        font-size:29px;
    }


    .shop-title p{
        font-size:13px;
    }


    .breadcrumb{
        padding:11px 10px;

        font-size:12px;
    }


    .category-card,
    .card{
        max-width:310px;

        border-radius:20px;
    }


    .category-card img,
    .card>a>img{
        height:245px;

        padding:14px;
    }


    .no-img{
        height:245px;

        margin:14px;
    }


    .category-card h3{
        font-size:21px;

        padding-bottom:20px;
    }


    .card-body{
        padding:
            0
            15px
            18px;
    }


    .card h3{
        font-size:19px;
    }


    .price{
        font-size:23px !important;
    }


    .shop-card-actions a,
    .shop-card-actions img{
        width:160px;
    }

}


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

@media(max-width:360px){

    body.shop-page{
        padding-top:150px !important;
    }


    body.shop-page > .shop-content > .container,
    .shop-page .container{
        padding-left:8px !important;

        padding-right:8px !important;
    }


    .shop-title h1{
        font-size:27px;
    }


    .category-card,
    .card{
        max-width:300px;
    }

}


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

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

    .shop-title h1,
    .category-card,
    .card,
    .empty-state{
        animation:none !important;
    }


    .category-card,
    .card,
    .category-card:hover,
    .card:hover{
        transform:none !important;
    }


    .search-form .btn,
    .search-form .btn:hover,
    .search-form .btn:active{
        transform:none !important;
    }


    .search-form .btn::before{
        display:none !important;
    }

}