/**** PRODUCT LIST ****/ .product-list { width: 78%; float: left; position: relative; } .product-list .list-header { padding: 1em; margin-top: .5em; } .product-list .list-header h1 { width: 100%; text-align: center; } .product-list .list-header span.total-count { width: 100%; text-align: center; display: block; } .product-list .sort-by { width: 100%; margin-top: 1em; text-align: center; } .product-list .sort-by a { width: 50%; float: left; padding: .6em 0; display: block; display: inline-block; background: #eee; text-align: center; } .product-list .sort-by a:after, .product-list .sort-by a:before { context: ""; font-size:0px; } .product-list .sort-by a:hover { background: #ddd; } .product-list .sort-by a.active { background: #aaa; color: #fff; } .product-list .sort-by a:first-child { border-radius: .5em 0 0 .5em; } .product-list .sort-by a:last-child { border-radius: 0 .5em .5em 0; } .product-list .list-cnt { padding: 0 .6em; } /**** PRODUCT ****/ .product { width: 100%; text-align: center; padding: .4em; } .product .border { width: 100%; border: 1px solid #ddd; } .product .padding { padding: 0 .6em 1em .6em; } .product .square { overflow: hidden; } .product picture { width: 100%; height: 100%; } .product img { height: auto !important; } .product .name { width: 100%; margin: 0.5em 0 0 0; height: 2.7em; line-height: 1.4em; overflow: hidden; color: #000; font-size: .95em; font-weight: 400; } .product .summary { display: block; height: 4em; margin-top: .8em; line-height: 1.3em; overflow: hidden; font-size: .85em; font-weight: 400; } .product .button { width: 100%; margin: .5em 0 0 0; font-size: .95em; } .product .block { display: block !important; } .product .block, .product .block * { cursor: pointer; } .product .block:hover .title { color: #6f8b37; } .product .block:hover .img div { display: block; } /**** SIDEBAR ****/ .sidebar-cnt { padding-right: .4em; width: 22%; float: left; position: relative; } .sidebar { background: #fff; padding: 1em 1.2em 0 0; margin-top: 1em; border-right: 1px solid #eee; height: 100%; } .sidebar .block { padding-bottom: 1.5em; margin: 0 0 1.5em 0; border-bottom: 1px solid #eee; } .sidebar .block .pd { padding: 0 1em; } .sidebar .block .title { font-weight: 600; padding: 0 0 .8em 0; display: block; width: 100%; } .sidebar ul.list, .sidebar ul.list ul { list-style: none; } .sidebar ul.list li { white-space: nowrap; overflow: hidden; } .sidebar ul.list li .i-checks { width: 100%; display: block; padding-top: .4em; padding-bottom: .4em; cursor: pointer; } .sidebar ul.list li .i-checks.mobile { display: none; } .sidebar ul.list ul { padding-left: 4px; } .sidebar ul.list a { font-size: .95em; } .sidebar ul.list a:hover { color: #777; } .sidebar ul.list a small { color: #888; font-weight: 400; } .sidebar ul.list li.active > a { color: #6f8b37; font-weight: 600; } .sidebar .categories ul.list li { line-height: 2.2em; } /**** MOBILE FILTERS ****/ .sidebar .block .title i { display: none; font-size: 1.2em; margin-top: -.2em; } .sidebar-cnt .head { display: none; } .sidebar-cnt #sortlist { display: none; } .sidebar-cnt .head button { border-radius: 0; color: #111; background: #fff; width: 48%; margin: 0; border: 1px solid #ededed; float: left; font-weight: 600; } .sidebar-cnt .head button.active { color: #6f8b37; } .sidebar-cnt .head button.disabled { color: #ccc; } .sidebar-cnt .head button i { float: right; position: relative; display: none; } .sidebar-cnt .head button i:before { position: absolute; right: 0; } .sidebar-cnt .head button.sort { float: right; } .sidebar-cnt.filter-expanded .head button.filter, .sidebar-cnt.sort-expanded .head button.sort { padding-bottom: 1.8em; margin-bottom: -1px; border-bottom: 1px solid #fff; position: relative; z-index: 1; color: #6f8b37; } .sidebar-cnt.filter-expanded #sidebar, .sidebar-cnt.sort-expanded #sortlist, .sidebar-cnt.filter-expanded .head button.filter i, .sidebar-cnt.sort-expanded .head button.sort i { display: block; } .sidebar .filter-buttons { width: 100%; padding: 1em; float: left; border-top: 1px solid #ededed; display: none; } .sidebar .filter-buttons button { float: right; width: 48%; padding: .8em; } .sidebar .filter-buttons button.clear { color: #777; border: 1px solid #ccc; background: #fff; float: left; } .sidebar .block .show-all { display: none; } .sidebar .block .show-all button { border: 1px solid #ccc; background: #fff; color: #222; width: 100%; margin-bottom: 1.5em; padding: .5em; } /**** PRODUCT DETAILS ****/ .product-details-slider-cnt { width: 100%; } .product-details { padding: 1em 0; margin-bottom: 2em; } .product-details .left { float: left; padding-right: 1em; margin-bottom: 1em; } .product-details .right { float: right; clear: right; padding: 0 1.5em 2em 1.5em; } .product-details .summary { font-size: 1.2em; } .product-details .head { width: 100%; display: inline-block; margin-bottom: 1em; } .product-details .head h1 { color: #000; font-size: 2.4em; width: 80%; font-weight: 400; margin-bottom: .5em; } .product-details .head .border-line { float: left; padding: 1em 0; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; width: 100%; } .product-details .border-line .sku { font-size: .9em; } @media screen and (max-width: 1220px) { .sidebar { padding-left: 1em; } .product img { width: 100%; } } /**** MOBILE FILTER SIDE-BAR ****/ @media screen and (max-width: 980px) { .sidebar-cnt { padding: 1em; background: #f5f5f5; width: 100%; } .product-list { width: 100%; } .sidebar { padding: 0; margin: 0; display: none; float: left; width: 100%; border: 1px solid #ededed; border-top: none; } .sidebar .block { padding: 0; margin: 0; float: left; width: 100%; } .sidebar .block .title { padding: 1em; border-top: 1px solid #ededed; font-weight: 400; cursor: pointer; } .sidebar .block .title i { float: right; display: inline; } .sidebar .block .title.active { color: #6f8b37; font-weight: 600; } .sidebar .block .title.disabled { color: #eee !important; font-weight: 400; } .sidebar ul { padding: 0 1em 1em 1em; } .sidebar ul.list { display: none; } #sortlist ul.list { display: block; } .sidebar .block.expanded ul.list { display: block; } .sidebar .block.expanded .title { color: #6f8b37; } .sidebar .block.expanded .title .icon-angle-down:before { content: '\e802'; } .sidebar ul.list li a.i-checks { display: none; } .sidebar .block.categories { display: none; } .sidebar ul.list li.more10 { display: none; } .sidebar .block.show-all ul.list li.more10 { display: inline; } .sidebar-cnt .head, .sidebar .filter-buttons, .sidebar ul.list li .i-checks.mobile { display: block; } .sidebar .block.expanded .show-all { display: block; } .sidebar .block.show-all .show-all { display: none; } .product-details .head h1 { width: 100%; } } @media screen and (max-width: 720px) { .product-details .left { padding: 0; } }