body{ background:url('../img/bodybg.svg') top center no-repeat; font-family: 'Roboto', sans-serif; }

header { margin-top: 20px; padding: 0 20px; }
header .center { padding:60px 80px; background:url('../img/header.jpg') top center no-repeat; border-radius: 6px; overflow: hidden; background-position: center center;}

.cat-box { background:#fff; border-radius: 6px; position: relative; background-position: right bottom; background-repeat: no-repeat; box-shadow: 2px 2px 10px rgba(0,0,0,.05);}
.cat-box a { display: flex; padding: 60px 40px; }
.cat-box h5 { font-size: 18px; max-width: 60%; margin: 0; }
.cat-box span { font-size: 12px; color: #666;}

.sidebar-content { display: flex; }
.sidebar-content .content { flex: 10; width: 100%; }
.sidebar-content .sidebar { flex: 2; margin-left: 40px; width: 100%; max-width: 300px; min-width: 300px;}
.sidebar-content .sidebar ul { list-style: none; }
.sidebar-content .sidebar ul li { padding: 2px 0; }
.sidebar-content .sidebar ul li a { display: block; padding: 5px 10px; color:#34485e; font-weight: 600; border-bottom: 1px solid #f7f7f7;}
.sidebar-content .sidebar ul li:last-child a { border-bottom:none }
.sidebar-content .sidebar ul li a:hover {color:#3498da; }
.sidebar-content .sidebar .side-menu { position: sticky; top: 20px; background:#fff; padding: 20px; border-radius: 3px; box-shadow: 10px 10px 40px rgba(0,0,0,.10);}

.product-box {background:#fff; border-radius: 6px; border-radius: 3px; overflow:hidden; padding: 20px; border: 1px solid #ebebeb} 
.product-content { margin-top: 20px; }
.product-content h5 { margin-bottom: 10; }
.product-content p { margin-bottom: 0; }

h1 { font-size: 24px; margin-bottom: 20px; }

.paging ul {list-style:none;text-align:center;margin-top:30px}
.paging ul li{display:inline-block}
.paging ul li a{display:block;padding:4px 6px;font-size:13px;color:#666;background:#ebebeb}
.paging ul li.active, .paging ul li a:hover,.paging li.active span{background:#02508b;color:#fff}

.product-page { display: flex;  background: #fff}
.product-page .product-image { max-width: 480px; width:100%;}
.product-page .product-image img { width: 100%; }
.product-page .product-detail { width: 100%; padding: 30px;}


.product-page .product-detail ul { list-style: none; margin-bottom: 20px; line-height:25px;}
.product-page .product-detail .price-stock { display:inline-flex; margin-bottom: 20px; gap: 20px}
.product-page .product-detail .price-stock h4 span { font-weight: 400; }
.product-page .product-detail label { max-width: 300px; margin-bottom: 20px; }

@media only screen and (max-width:661px) {
    header .center { padding:40px 20px;}
    header .logo { max-width: 200px; }
    .sidebar-content { display: block; }
    .sidebar-content .content { width: 100%; }
    .sidebar-content .sidebar { margin-left:0; margin-top: 20px; width: 100%; max-width: 100%; min-width: 100%;}
    .product-page { display: block; }
    .product-page .product-image { max-width: 100%; width:100%; margin-bottom: 40px;}
    .product-pager.col-4 {grid-template-columns: repeat(4,1fr);}
}

@media only screen and (max-width:426px) {
    .product-pager.col-4 {grid-template-columns: repeat(4,1fr) !important;}
}