/* =========================================================
   PRINTMANIA - MOBILE + PAGE TRANSITIONS
   UI-only enhancements. Ne menja PHP/forme/bazu/funkcije.
========================================================= */

html{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
}

body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

img, video, canvas, svg{
    max-width:100%;
}

/* ---------------------------------------------------------
   PAGE ENTER EFFECTS
--------------------------------------------------------- */
body.pm-page-enter{
    animation-duration:.48s;
    animation-timing-function:cubic-bezier(.22,1,.36,1);
    animation-fill-mode:both;
    will-change:opacity, transform, filter, clip-path;
}

body.pm-effect-fade-up{animation-name:pmFadeUp;}
body.pm-effect-fade-down{animation-name:pmFadeDown;}
body.pm-effect-left{animation-name:pmFromLeft;}
body.pm-effect-right{animation-name:pmFromRight;}
body.pm-effect-zoom{animation-name:pmZoomIn;}
body.pm-effect-blur{animation-name:pmBlurIn;}
body.pm-effect-reveal{animation-name:pmReveal;}

@keyframes pmFadeUp{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}
@keyframes pmFadeDown{from{opacity:0;transform:translate3d(0,-16px,0)}to{opacity:1;transform:none}}
@keyframes pmFromLeft{from{opacity:0;transform:translate3d(-24px,0,0)}to{opacity:1;transform:none}}
@keyframes pmFromRight{from{opacity:0;transform:translate3d(24px,0,0)}to{opacity:1;transform:none}}
@keyframes pmZoomIn{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:scale(1)}}
@keyframes pmBlurIn{from{opacity:0;filter:blur(7px)}to{opacity:1;filter:blur(0)}}
@keyframes pmReveal{from{opacity:.45;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}

/* =========================================================
   MOBILE HEADER - BEZ HAMBURGERA, NAVIGACIJA U 2 REDA
========================================================= */
@media screen and (max-width:800px){
    body{
        min-width:0 !important;
        padding-top:154px !important;
    }

    header,
    .theme2-site header,
    .theme3-site header{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        height:154px !important;
        min-height:154px !important;
        margin:0 !important;
        padding:7px 8px 8px !important;
        box-sizing:border-box !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:2px !important;
        overflow:visible !important;
        border-radius:0 !important;
        z-index:99999 !important;
    }

    header .logo-link,
    .theme2-site header .logo-link,
    .theme3-site header .logo-link{
        order:1 !important;
        width:100% !important;
        height:61px !important;
        min-height:61px !important;
        max-width:none !important;
        flex:0 0 61px !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        transform:none !important;
    }

    header .logo-link img,
    .theme2-site header .logo-link img,
    .theme3-site header .logo-link img{
        width:auto !important;
        height:auto !important;
        max-width:145px !important;
        max-height:54px !important;
        object-fit:contain !important;
    }

    header nav,
    .theme2-site header nav,
    .theme3-site header nav{
        order:2 !important;
        position:static !important;
        inset:auto !important;
        transform:none !important;
        width:100% !important;
        height:76px !important;
        min-height:76px !important;
        margin:0 !important;
        padding:2px 48px 2px 2px !important;
        box-sizing:border-box !important;
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        grid-auto-rows:34px !important;
        align-items:center !important;
        justify-items:stretch !important;
        gap:2px !important;
        overflow:visible !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }

    header nav > a,
    header nav > .dropdown,
    .theme2-site header nav > a,
    .theme2-site header nav > .dropdown,
    .theme3-site header nav > a,
    .theme3-site header nav > .dropdown{
        width:100% !important;
        min-width:0 !important;
        height:34px !important;
        min-height:34px !important;
        margin:0 !important;
        box-sizing:border-box !important;
    }

    header nav > a,
    header nav > .dropdown > a,
    .theme2-site header nav > a,
    .theme2-site header nav > .dropdown > a,
    .theme3-site header nav > a,
    .theme3-site header nav > .dropdown > a{
        width:100% !important;
        height:34px !important;
        min-height:34px !important;
        margin:0 !important;
        padding:0 2px !important;
        box-sizing:border-box !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        font-size:11px !important;
        line-height:1.05 !important;
        font-weight:700 !important;
        letter-spacing:0 !important;
        text-transform:none !important;
        text-align:center !important;
        white-space:nowrap !important;
        border-radius:8px !important;
    }

    header .dropdown{
        position:relative !important;
        display:block !important;
    }

    /* Desktop dropdown ostaje funkcionalan; na telefonu ne prekriva ceo ekran. */
    header .dropdown-menu{
        top:34px !important;
        left:0 !important;
        right:auto !important;
        transform:none !important;
        min-width:190px !important;
        max-width:calc(100vw - 16px) !important;
        z-index:100005 !important;
    }

    header .cart-icon,
    .theme2-site header .cart-icon,
    .theme3-site header .cart-icon{
        position:absolute !important;
        order:3 !important;
        right:9px !important;
        top:16px !important;
        width:42px !important;
        height:42px !important;
        min-width:42px !important;
        flex:0 0 42px !important;
        margin:0 !important;
        transform:none !important;
        z-index:100006 !important;
    }

    header .cart-icon svg{
        width:31px !important;
        height:31px !important;
    }

    input, select, textarea, button{
        max-width:100%;
        box-sizing:border-box;
    }

    input, select, textarea{
        font-size:16px !important;
    }

    .container, .section, .product-container, .designer-shell,
    .checkout-container, .cart-container, .works-page, .dtf-page{
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    a, button, input[type="button"], input[type="submit"]{
        touch-action:manipulation;
    }
}

@media screen and (max-width:430px){
    body{padding-top:150px !important;}

    header,
    .theme2-site header,
    .theme3-site header{
        height:150px !important;
        min-height:150px !important;
    }

    header .logo-link,
    .theme2-site header .logo-link,
    .theme3-site header .logo-link{
        height:58px !important;
        min-height:58px !important;
        flex-basis:58px !important;
    }

    header .logo-link img,
    .theme2-site header .logo-link img,
    .theme3-site header .logo-link img{
        max-width:132px !important;
        max-height:49px !important;
    }

    header nav,
    .theme2-site header nav,
    .theme3-site header nav{
        height:78px !important;
        min-height:78px !important;
        padding-right:45px !important;
        grid-auto-rows:35px !important;
    }

    header nav > a,
    header nav > .dropdown,
    header nav > .dropdown > a,
    .theme2-site header nav > a,
    .theme2-site header nav > .dropdown,
    .theme2-site header nav > .dropdown > a,
    .theme3-site header nav > a,
    .theme3-site header nav > .dropdown,
    .theme3-site header nav > .dropdown > a{
        height:35px !important;
        min-height:35px !important;
    }

    header nav > a,
    header nav > .dropdown > a,
    .theme2-site header nav > a,
    .theme2-site header nav > .dropdown > a,
    .theme3-site header nav > a,
    .theme3-site header nav > .dropdown > a{
        font-size:10.5px !important;
        padding:0 1px !important;
    }

    header .cart-icon,
    .theme2-site header .cart-icon,
    .theme3-site header .cart-icon{
        right:7px !important;
        top:14px !important;
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
    }
}

@media screen and (max-width:360px){
    header nav > a,
    header nav > .dropdown > a,
    .theme2-site header nav > a,
    .theme2-site header nav > .dropdown > a,
    .theme3-site header nav > a,
    .theme3-site header nav > .dropdown > a{
        font-size:9.6px !important;
    }
}

@media(prefers-reduced-motion:reduce){
    body.pm-page-enter{animation:none !important;}
}