/* Header */
.header-toggle-box{display:none;}
.header-toggle-label{display:none;}
.header-menu-catman-box{display:none;}
.menu-item-box{display:none;}

@media screen and (max-width: 1300px) {
    .header-search-label{display:block;position:absolute;top:15px;z-index: 10;right:15px;}
	.header-wrap-search-bar{position:fixed;top:60px;right:0;left:0;padding:0;background:white;display:none;animation:searchBarAppear 0.2s;z-index:100;}
	.headerSearchBar-bar{height:50px;}
	.headerSearchBar-select{line-height: 50px;}
	.headerSearchBar-select-value{border-radius: 0;}
	.headerSearchBar-select-list{padding-top:50px;}
	.headerSearchBar-icon{border-radius: 0; width: 50px;}
    .header-right-div > .header-up-div > .header-menu-top{width: 100%}
    .header-menu-top{padding:0;border:0;height:auto;margin-left:auto;}
    .header-toggle-box:checked ~ .header-menu-top .header-item-phone{display:flex;}
    .header-item-user span, .header-item-cart span, .header-item-phone span,
    .header.login .header-menu-bottom {display:none;}
    .header.login .header-item img { width: 25px; height: 25px;}
    .header-wrap{display:flex;height:60px;padding:0 15px;}
    .header-wrap-logo{padding:0 10px; margin-left: 0;}
    .header-search-box:checked ~ .headerSearch-mobile {display: flex;}
    /* .header.login .header-wrap .header-menu-top { margin-right: 25px;} */
    .header-search-box:checked ~ .header-search-label{}
	.header-search-box:checked ~ .headerSearch-mobile{display: flex;}
	.header-search-box:checked ~ .header-wrap-search-bar{display:block;}
	.header-toggle-box:checked ~ .header-toggle-label span:nth-child(1){transform:translateY(9px) rotate(45deg) scale(1.1, 0.75);}
	.header-toggle-box:checked ~ .header-toggle-label span:nth-child(2){transform:rotate(-45deg) scale(1.1, 0.75);}
	.header-toggle-box:checked ~ .header-toggle-label span:nth-child(3){opacity:0;}
}

/* < 1200px */
@media only screen and (max-width: 1200px)
{
    .headerSearchBar-area{display: none !important}
}

@media (max-width:768px) {
    html{padding-top:60px;}

    .header-toggle-label{display:block;padding:5px;margin-left:10px;}
    .header-toggle-label span{display:block;width:24px;height:4px;background:var(--primary-color);transition:0.2s;}
    .header-toggle-label span + span{margin-top:5px;}
    .header-toggle-label span:last-child{width:16px; margin-left:auto;}
    .header.login .header-search-label {/*right: 50px;*/ display: none;}
    .header.login   .header-logo img { width: 120px; height: 40px;}

    .header{position:fixed;top:0;background:white;width:100%;z-index:100;}
    /* .header-wrap{display:flex;height:60px;padding:0 15px;}
    .header-wrap-logo{padding:0 10px;} */
    .header-logo img{display:block;width:auto;height:52px;}
    .header-wrap-search-bar{display:none;}
    .header-menu-top{padding:0;border:0;height:auto;margin-left:auto;}
    .header-item{margin:0 5px 0 0;}
    .header-item-user{margin-left:10px;}
    .header-item-user span, .header-item-cart span{display:none;}
    .header-item-phone, .header-menu-bottom {display:none;margin:0;position:fixed;left:0;right:0;top:60px;padding:20px 30px;background:white;align-items:center;animation:menuCatmanAppear 0.2s;}
    .header-item-phone > img{width:25px;height:25px;margin-right:15px;}
    .header-item-phone > span{font:300 14px/16px Ubuntu, sans-serif;}
    .header-item-phone > .header-info-focusable{display:none;}
    .header.login .header-item.header-item-language{display:none;}
    .header-item-currency{display:none;}
    .header-menu-bottom{display:none;}
    .header-menu-catman-item:hover .menu-popup{display:none;}
    .header-menu-catman-item:hover .menu-mask:hover{display:block;}
    .header-menu-catman{display:none;position:fixed;top:60px;left:0;right:0;bottom:65px;padding:0 30px;height:auto;background:white;overflow:auto;z-index:10;}
    .header-menu-catman{animation:menuCatmanAppear 0.2s;}
    .header-menu-catman-item{position:relative;margin:0;padding:20px 0;border-bottom:2px solid #DFE3EF;height:auto;}
    .header-menu-catman-item-title{font:300 14px/16px Ubuntu, sans-serif;}
    .header-menu-catman-item svg{margin-right:15px;}
    .header-menu-catman-item .menu-mask{position:absolute;top:0;left:0;right:0;bottom:0;background:none;display:block;z-index:auto;}
    .menu-popup{position:fixed;top:60px;left:0;right:0;bottom:65px;padding:0 30px;height:auto;background:white;overflow:auto;box-shadow:none;z-index:10;}
    .menu-popup{min-width:0;min-height:0;animation:menuCatmanAppear 0.2s;}
    .menu-item{display:block;width:auto;margin:0;}
    .menu-item > a{display:flex;align-items:center;padding:10px 0;border-bottom:2px solid #DFE3EF;}
    .menu-item > a > img{width:45px;height:45px;margin:0 15px 0 0;}
    .menu-item-title{width:auto;margin:0;background:none;padding:0;font:500 14px/16px Ubuntu, sans-serif;}
    .menu-item-see-more{width:auto;height:auto;margin:0;background:none;text-align:center;padding:20px 0;}
    .menu-item-see-more > a{display:inline-block;background:#F4F4F4;border-radius:20px;margin:0;padding:5px 10px;}
    .menu-item-mask{position:absolute;top:0;left:0;right:0;bottom:0;}
    .menu-item-list{position:fixed;top:60px;left:0;right:0;bottom:65px;padding:0 30px;height:auto;background:white;display:none;overflow:auto;z-index:10;}
    .menu-item-list{animation:menuCatmanAppear 0.2s;}
    .menu-item-list-item{margin:0;border-bottom:2px solid #DFE3EF;}
    .menu-item-list-item-text{display:block;padding:17px 0;font:500 14px/16px Ubuntu, sans-serif;}
    .menu-item-list-item-see-more{display:block;padding:17px 0;font:500 14px/16px Ubuntu, sans-serif;}
    .header-toggle-box:checked ~ .header-toggle-label span:nth-child(1){transform:translateY(9px) rotate(45deg) scale(1.1, 0.75);}
    .header-toggle-box:checked ~ .header-toggle-label span:nth-child(2){transform:rotate(-45deg) scale(1.1, 0.75);}
    .header-toggle-box:checked ~ .header-toggle-label span:nth-child(3){opacity:0;}
    .header-toggle-box:checked ~ .header-menu-catman{display:block;}
    .header-toggle-box:checked ~ .header-menu-top .header-item-phone, .header-toggle-box:checked ~ .header-menu-bottom{display:flex; flex-direction: column; gap:30px;box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.10);}
    .header-menu-catman-box:checked + .header-menu-catman-item{position:fixed;top:0;left:50px;right:85px;height:60px;padding-left:15px;background:white;border:0;z-index:10;}
    .header-menu-catman-box:checked + .header-menu-catman-item .menu-mask{left:-50px;}
    .header-menu-catman-box:checked + .header-menu-catman-item .menu-popup{display:block;}
    .menu-item-box:checked + .menu-item{position:fixed;top:0;left:50px;right:85px;height:60px;padding-left:15px;background:white;border:0;z-index:10;}
    .menu-item-box:checked + .menu-item .menu-item-mask{left:-50px;}
    .menu-item-box:checked + .menu-item .menu-item-list{display:block;}
    .headerSearch-mobile-help {padding: 0 20px 0 20px;}

    @keyframes menuCatmanAppear {
        from{transform:translateX(-100%);}
        to{transform:translateX(0%);}
    }
}

@media (max-width:700px) {

	.pieceAdded-title {font:700 20px/20px 'DM Sans', sans-serif;text-align: center;}
	.pieceAdded-plug {margin: 20px 0 0 0}
	.pieceAdded-btn{padding: 9px 6px; font: 500 12px/15px Ubuntu, sans-serif;}
}