html, body {height: 100%}
* {box-sizing: border-box; outline: none;}
a, a:hover {color: inherit; text-decoration: none; cursor: pointer}
a {transition: color .25s linear, background-color .25s linear}
b {font-weight: 700}
p {padding: 0; margin: 0;}
img {display: block}
body {font: 400 14px/1.3 'Source Sans Pro', sans-serif; overflow-x: hidden; max-width: 1920px; margin: 0 auto; padding: 0 50px; display: flex; flex-direction: column;}
article {padding: 100px 120px}
section {position: relative}

header {width: 100%; position: relative;}
#topBar {padding: 20px 0;}
#topBanner {height: calc(100vh - 260px); background-image: url('../img/header.jpg'); margin-bottom: 60px; position: relative;}
#topBanner .slogan {font-size: 3rem; color: #FFF; text-transform: uppercase; position: absolute; bottom: 100px; left: 120px; padding: 0; margin: 0; text-shadow: 4px 4px 20px rgba(0,0,0,.75); letter-spacing: .1rem;}
header .logo img {height: auto; width: 260px}
#topBar {display: flex; flex-direction: row;}
#hdrControls {display: flex; align-items: center; justify-content: center; gap: 8px;}
#hdrControls a.hdrbuttons {padding: 6px 16px; font-weight: 400; color: #FFF; background: #61a238; border-radius: 6px}
#hdrControls a.hdrbuttons .material-icons {font-size: 20px; vertical-align: middle}
#hdrControls a.hdrbuttons .txt {margin-left: 6px;}
#hdrControls .social img {width: 32px; height: auto; border-radius: 6px}
.spacer {flex: 1}
hr.navseparator {height: 2px; margin: 5px 20px; border: 0; background: rgba(255,255,255,.25)}

header#adm {padding: 36px 0 16px; display: flex; align-items: center;}
header#adm h1 {font-size: 1.8em; padding: 0; margin: 0; flex: 1;}
header#adm h1 span {color: #AAA; font-weight: 700;}
header#adm h1 span::before {content: ":"; padding: 0 8px;}
header#adm a img {height: auto; width: 130px;}
header#adm #searchFilterBox {transition: background-color .2s linear; background-color: #F5F5F5; padding: 8px 16px; display: grid; grid-template-columns: 1fr 16px; align-items: center; display: none;}
header#adm #searchFilterBox:focus-within {background: #EEE}
header#adm #searchFilter {background: transparent; padding: 0; border: 0}
header#adm #clearSearch {font-size: 16px;}

#usrMenu {padding: 0; color: #000; background: transparent; position: fixed; right: 10px; top: 6px; z-index: 9900; display: none;}
#usrMenu .material-icons {margin-right: 0; font-size: 30px;}

main {display: grid; grid-template-columns: 260px 1fr; gap: 40px; flex: 1;}
footer {padding: 40px 0; display: grid; grid-template-columns: 1fr 1fr; font-size: .8rem}
footer p span {display: block; line-height: .9rem;}
footer .logo img {height: 40px; width: auto; display: block}
footer div a {display: inline-block;}
footer div {display: flex; align-items: center; justify-content: end;}

nav {background: #d36f00; color: #FFF; transition: color .3s linear, background-color .3s linear;
    transition: left .3s ease-in-out, box-shadow .3s ease-in-out}
#searchBoxContainer {position: sticky; top: 0; background-color: #d36f00; z-index: 1;padding: 20px}
#searchBox button {background: transparent; border: 0;}
#searchBox {padding: 6px 10px; border: 1px solid #FFF; border-radius: 6px; display: grid; grid-template-columns: 1fr 16px}
#searchBox input {border: 0; color: #FFF; background: transparent; width: 100%;}
#searchBox input::placeholder {color: #FFF;}
#searchBox .material-icons {font-size: 16px; color: #FFF;}
#catLinks {position: sticky; top: 68px;}
#catLinks li {padding: 0; margin: 0; display: block;}
#catLinks li a {padding: 10px 20px; display: block; font-weight: 700; color: #EEE}
#catLinks li a:hover {background: rgba(255,255,255,.2); color: #FFF}
#catLinks li a.active, #catLinks li.active.parentShell > a {background: rgba(0,0,0,.1); font-weight: 700;}
#catLinks li.parentShell a {border-radius: 8px}
#catLinks li ul.subnav {padding: 12px;}
#catLinks li ul.subnav a {font-weight: 400;}

#catLinks li ul.subnav {display: none}
#catLinks li a:not(:only-child):after {content: '\25bc'; float: right; transition: all .3s}
#catLinks li.expand a:not(:only-child):after {transform: rotate(180deg)}

#newsletter {background: #52892F; color: #FFF; padding: 80px; font-size: 1.2rem; grid-column: span 2; text-align: center;}
#newsletter h2 {font-size: 1.6rem; font-weight: 400; color: #FFF; margin: 0; font-family: 'Source Sans Pro'; text-transform: uppercase;}
#newsletter .newsfield {background: rgba(255,255,255,.25); border-radius: 36px; display: grid; grid-template-columns: 1fr 24px; max-width: 500px; margin: 0 auto; padding: 12px 14px;}
.newsfield input, .newsfield input::placeholder {color: #FFF; text-align: center; font: inherit;}
.newsfield input {border: none; color: #FFF; background: none; align-self: center; width: 100%}
.newsfield button {border: none; color: #FFF; background: none; align-self: center; cursor: pointer}
p.spaced {margin: 20px 0;}

.fixedCover {background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

h1 {font-family: 'Oswald'; font-size: 2.2rem; margin-bottom: 48px; font-weight: 700; text-transform: uppercase;}
h1.intro {margin-bottom: 20px; font-size: 2.2rem; line-height: 1.6rem; color: #999; font-family: 'Source Sans Pro'; font-weight: 300;}
h2.others {margin-bottom: 20px; font-size: 1.6rem; line-height: 1.2rem; color: #999; font-family: 'Source Sans Pro'; font-weight: 300; text-transform: uppercase; text-align: center;}
h2 {font-family: 'Oswald'; font-size: 1.8rem; margin: 0 0 32px; font-weight: 700}

.narrow-form {max-width: 600px; width: 100%; margin: auto}
.smaller-form {max-width: 500px; width: 100%; margin: auto}
.middle-width {max-width: 800px; width: 100%; margin: auto;}
.flex-centerall {justify-content: center; align-items: center;}
.roundBoxed {border-radius: 12px; background: #FFF; padding: 28px 32px; box-shadow: 0 0 80px -20px rgba(0,0,0,.5); position: fixed}
.roundBoxed {top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9;}
.closeThis {position: absolute; top: 12px; right: 12px; font-size: 16px; color: #000; padding: 4px; cursor: pointer;}
.fullHeight {height: 100%;}

form * {transition: background-color .2s linear, color .2s linear, border-color .2s linear;}
.roundBoxed h1, .roundBoxed h2, .roundBoxed h3 {margin: 0; font-weight: 300; ; text-transform: uppercase;}
.roundBoxed h1 {font-size: 1.3rem}
.roundBoxed h2 {font-size: 1rem}
form.grid h2 {grid-column: span 2; margin: 20px 0;}
input[type=file] {display: none} 
textarea {resize: none; font: inherit;}
.lowercase {text-transform: lowercase;}
.flexedHeight {flex: 1;}
.flex.col {display: flex; flex-direction: column; gap: 12px}
.flex.row {display: flex; flex-direction: row; gap: 16px}
.grid.col {display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}

p.intro {margin-bottom: 10px;}
.inputs {padding: 0; border-radius: 10px; border: 1px solid #AAA; display: grid; grid-template-columns: 48px 1fr; 
    grid-column: span 2;}
.inputs.threeCols {grid-template-columns: 48px 64px 1fr} 
.inputs.fourCols {grid-template-columns: 48px 1fr 1fr 1fr} 
.inputs:focus-within {border-color: #5d7a89;}
.inputs.halfgrid {grid-column: inherit;}
.inputs.noBorders {border: 0}
.inputs .material-icons {font-size: 16px; align-self: center; margin: 0; cursor: pointer; justify-self: center; color: #444;}
.inputs .material-icons.fortextarea {align-self: flex-start; margin-top: 10px}
.inputs input, .inputs select, .inputs textarea, .inputs label, .inputs p {border: none; background: none; color: #000; font-family: 'Source Sans Pro'; padding: 6px 0; width: 100%;}
.inputs .material-icons.txtarea {align-self: start; margin-top: 7px;}
.inputs label {color: #888; overflow: hidden;}
.inputs .checkbox {margin-top: 8px;}
.inputs.noSpan {grid-column: span 1;}
.inputs select {background: transparent url("/assets/select-arrow-light.png") no-repeat right 20px center}
.inputs select option {padding: 6px 8px; line-height: 18px; }
.inputs select {text-overflow: ellipsis; appearance: none; border: none; outline: none; font-size: inherit}
.inputs input:focus {border: none; background: none}
.buttons {padding: 8px 0 0; border: 0; display: grid; grid-template-columns: 1fr max-content; gap: 10px; grid-column: span 2;}
.buttons.basket {grid-template-columns: 1fr max-content max-content; gap: 10px; grid-column: span 2;}
.buttons.basket .material-icons {font-size: 12px;}
.buttons button {border-radius: 8px; border: 0; color: #FFF; background: #34444c; padding: 12px 20px; cursor: pointer; text-transform: capitalize;}
.buttons .material-icons  {font-size: 16px; vertical-align: middle; margin-right: 8px}
.buttons .formLinks {display: flex; flex-direction: column; justify-content: center; align-items: flex-start}
.buttons .formLinks li {list-style: square; list-style-position: inside}
.buttons .formLinks li a {cursor: pointer; font-size: .9em; padding: 2px 0;}
.buttons .formLinks li a:hover {color: #ffbd77 !important}
.buttons button:hover {background: #3b4d56}
.buttons button.accent {background: #02629e;}
.buttons button.accent:hover {background: #024d7c;}
.buttons .natWidth {width: fit-content;}
.buttons .justifEnd {justify-self: end;}
#deliveryZone {background: transparent url("/assets/select-arrow-light.png") no-repeat right 10px center; margin-left: 12px}
#deliveryZone option {padding: 6px 8px; line-height: 18px; }
#deliveryZone {text-overflow: ellipsis; appearance: none; border: 1px solid #555; outline: none; font-size: inherit; border-radius: 6px; padding: 4px 8px; width: 140px;}

#productGrid {display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 30px 0;}
#productGrid .card {position: relative; display: grid; grid-template-columns: 1fr 2fr; gap: 20px; padding: 20px; font-size: .8rem; background: #FFF}
#productGrid .card:before {border-radius: 48px ;content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; box-shadow: 0 0 60px rgba(0,0,0,.2)}
#productGrid .card .description {padding: 0; flex: 1}
#productGrid .card .details {padding: 10px 0 0; display: flex; flex-direction: column; height: 100%; position: relative;}
#productGrid .card .photo {position: relative}

#productGrid .card.setNew .details::after {position: absolute; top: 20px; right: -28px; z-index: 1; content: url(/img/new.png)}
#productGrid .card.setPromo .photo::after {position: absolute; top: -23px; left: -23px; z-index: 1; content: url(/img/offer.png)}

#productGrid .card img {display: block; width: 100%; height: auto;}
#productGrid .card h3 {font-weight: 700; font-size: 1rem; color: #d36f00; text-transform: uppercase; line-height: 1rem; white-space: pre-wrap;}
#productGrid .card .brand {margin: 16px 0; color: #999; font-weight: 400;}
#productGrid .card .form {margin: 10px 0}
.card .toolbox {display: grid; grid-template-columns: 1fr min-content;}
.card .toolbox .actions {display: flex; align-items: end; gap: 10px;}
.card .toolbox .amounts {display: flex; flex-direction: column}
.card .toolbox .amounts .price {color: #A00; font-weight: 700; font-style: italic}
.card .toolbox .amounts .price .old {text-decoration: line-through; color: #999; font-size: 1.3rem; font-weight: 300;; margin-right: 5px}
.card .toolbox .amounts .price .currency {font-size: .7rem; vertical-align: top; font-style: italic;}
.card .toolbox .amounts .price .current {font-size: 1.3rem; margin-right: 2px}
.card .toolbox .availability {font-weight: 400; font-style: oblique; color: #61a238;}
.card .toolbox .addToCart.unavailable {display: none;}

.detailsCard .toolbox {display: grid; grid-template-columns: 1fr max-content; margin-top: 20px; gap: 12px;}
.detailsCard .actions {display: flex; align-items: end; gap: 10px;}
.detailsCard .amounts {display: flex; flex-direction: column}
.detailsCard .amounts .price {color: #A00; font-weight: 700; font-style: italic}
.detailsCard .amounts .price .old {text-decoration: line-through; color: #999; font-size: 1.3rem; font-weight: 300;; margin-right: 5px}
.detailsCard .amounts .price .currency {font-size: .7rem; vertical-align: top; font-style: italic;}
.detailsCard .amounts .price .current {font-size: 1.3rem; margin-right: 2px}
.detailsCard .availability {font-weight: 400; font-style: oblique; color: #61a238;}
.detailsCard button { padding: 8px 16px; border-radius: 6px; background: #d36f00; color: #FFF; border: 0;}
.description {white-space: pre-wrap;}
.card .material-icons.fav {color: #F00;}
.card .material-icons.cart {color: #61a238;}
/*
#productGridAdmin {display: grid; width: 100%; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0}
#productGridAdmin a.searchable {display: block;}
*/
#productGridAdmin {gap: 0; margin: -5px; column-count: 4;}
#productGridAdmin a.searchable {display: inline-block; margin: 5px; break-inside: avoid;}

#productGridAdmin .cardRow {box-shadow: 0 0 12px -4px rgba(0,0,0,.4); display: grid; grid-template-columns: 1fr 4fr; gap: 10px; padding: 10px; background: #FFF;}
#productGridAdmin .cardRow img {display: block; width: 100%; height: auto;}
#productGridAdmin .cardRow h3 {font-weight: 700; font-size: 1em; color: #d36f00; text-transform: uppercase}
#productGridAdmin .variants {border-top: 1px solid #DDD; margin-top: 6px; padding-top: 6px;}
#productGridAdmin .variants p {display: grid; grid-template-columns: 1fr max-content 60px}
.variants p span:nth-child(2), .variants p span:nth-child(3) {text-align: right;}

.detailsCard {display: grid; grid-template-columns: 300px 1fr; gap: 60px; padding: 40px; max-width: 1000px; margin: 0 auto; position: relative;}
.detailsCard .details {display: flex; flex-direction: column; justify-content: center; padding-right: 40px;}
.detailsCard .details h1 {font-size: 2.2rem; font-weight: 300; font-family: 'Source Sans Pro'; color: #888; margin: 20px 0; text-transform: uppercase; white-space: pre-wrap;}
.detailsCard .details .brand {margin: 10px 0 30px;}
.detailsCard .specs {margin: 12px 0;}
.detailsCard .specs span {font-weight: 700;}
.detailsCard .conditioning {font-size: .7rem; line-height: .7rem; margin-top: 12px;}
.detailsCard .conditioning span {font-weight: 400;}

.detailsCard figure, .detailsCard .details {position: relative}
.detailsCard.setNew .details::after {position: absolute; top: 80px; right: -20px; z-index: 1; content: url(/img/new.png)}
.detailsCard.setPromo figure::after {position: absolute; top: -2px; left: -2px; z-index: 1; content: url(/img/offer.png)}

#productList .row {display: grid; grid-template-columns: 32px 1fr 120px 20px; align-items: center; margin: 5px 0; padding: 8px 16px; box-shadow: 2px 2px 4px rgba(0,0,0,.1)}
#productList .row.noedit {grid-template-columns: 32px 1fr 80px; }

#productList .row img {width: 100%; height: auto;}
#productList .details {padding: 0 10px;}
#productList .row .material-icons {font-size: 18px; color: C00;}
#priceRow {margin: 20px; text-align: right;}
#priceRow p {text-align: right; font-weight: 400; padding: 2px 0}
#priceRow #gross {font-weight: 700;}
#priceRow {display: grid; grid-template-columns: 1fr 1fr}
.twoColsGrid {display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px;}
.twoColsGrid .buttons {grid-column: auto; padding: 0; grid-template-columns: 1fr;}
.twoColsGrid .buttons button {padding: 6px 20px;}
.twoColsGrid #promoCode {font-weight: 700; text-transform: uppercase;}

#confirmBasket {background: #d36f00; color: #FFF; font-weight: 700; border-radius: 8px; padding: 8px 16px; text-transform: capitalize; margin-top: 12px; display: inline-block}
#confirmBasket .material-icons {font-size: 16px; vertical-align: middle; margin-right: 6px;}

.radioButtons {display: flex; flex-direction: row; gap: 20px; justify-content: space-around; padding: 12px 0;}
.radioButtons input {display: none}
.radioButtons input:checked + label {background: #d36f00; color: #FFF}
.radioButtons label {width: 100%; font-weight: 400; text-transform: uppercase; font-size: 1.2em; text-align: center; position: relative; padding: 8px; transition: all .2s linear; user-select: none; cursor: pointer; background: #FFF}
.radioButtons label:after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; }
.radioButtons label:after {box-shadow: 0 0 24px rgba(0,0,0,.15); border-radius: 48px}

.hdr-button {float: right; line-height: 1; padding: 4px 6px; border-radius: 4px; box-shadow: 2px 2px 8px rgba(0,0,0,.2)}
.hdr-button {background: #FFF; font-weight: 400; padding: 5px 30px; border-radius: 0; transition: border-color .2s linear; color: #000;}
.hdr-button {border: 2px solid #FFF; cursor: pointer; font-size: 12px; text-transform: none;}
.hdr-button:hover {border-color: #d36f00}

.formHeader {font-weight: 300; color: #AAA; padding: 0; margin: 0 0 16px !important; font-family: 'Source Sans Pro'}

#adminNav {background: transparent; color: #000; margin-bottom: 10px;}
#adminNav ul {display: flex; flex-direction: row; gap: 10px; justify-content: space-around; padding: 12px 0; align-items: center;}
#adminNav li.iconized {flex: 0; background-color: #546E7A; color: #FFF}
#adminNav li#adm-return.iconized {background: #CCC;}
#adminNav li.iconized a {padding: 5.5px 8px;}
#adminNav li.iconized .material-icons {font-size: 21px; vertical-align: middle;}
#adminNav li ul {transition: opacity .1s linear; display: grid; opacity: 0; visibility: hidden; grid-template-columns: 1fr; gap: 4px; color: #000; position: absolute;  width: 100%; z-index: 9;}
#adminNav li.parent:hover > ul {opacity: 1; visibility: visible;}
#adminNav li.active {background: #d36f00; color: #FFF}
#adminNav li {flex: 1; font-weight: 400; text-transform: uppercase; text-align: center; position: relative; padding: 0; transition: all .1s linear; background: #FFF}
#adminNav li:hover::after {box-shadow: 0 0 8px rgba(0,0,0,.1)}
#adminNav li:after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1}
#adminNav li:after, #adminNav li.active:hover::after {box-shadow: 0 0 24px rgba(0,0,0,.2); border-radius: 256px; transition: all .2s linear}
#adminNav a {display: block; margin: 0; padding: 8px 0;}

.orderLists {display: grid; grid-template-columns: 100%; gap: 6px;}
.orderRows {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; padding: 8px 20px; box-shadow: 2px 2px 4px rgba(0,0,0,.1); gap: 10px}
.orderRows.Admin {grid-template-columns: 100px 150px 1fr 150px 200px 100px 100px; cursor: pointer; transition: background-color .2s linear;}
.orderRows.Admin:nth-child(odd) {background-color: #FAFAFA;}
.orderRows.Admin.header {background: #546E7A; color: #FFF; font-weight: 700;}
.orderRows.Admin .pending {color: #C00}
.orderRows.Admin.searchable:hover {background: #f4edc3}

.dashEditor {display: flex; gap: 30px; flex-direction: row; height: 100%;}
.dashEditor div {flex: 1 50%}
.dashEditor form {display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;}
.dashEditor h3 {font-size: 2em; margin: 0 0 16px; text-transform: uppercase; font-weight: 300; color: #AAA;}
.dashEditor .varsRow {cursor: pointer; display: grid; grid-template-columns: 1fr 80px 80px 80px 16px; gap: 6px; padding: 6px 12px; border-bottom: 1px solid #eee; border-top: 1px solid #eeee;}
.dashEditor .varsRow:last-of-type {border: 0}
.dashEditor .varsRow.selectable.current {background-color: #f4edc3; pointer-events: none;}
.dashEditor .varsRow.header {background-color: #EEE; font-weight: 400;}
.dashEditor .varsRow p {text-transform: capitalize; text-align: right;}
.dashEditor .varsRow .material-icons {font-size: 16px; pointer-events: initial;}
.dashEditor .varsRowBox {display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: 16px;}

.dashEditor .transRow {display: grid; grid-template-columns: 120px 1fr 120px 40px; gap: 6px; padding: 6px 12px; border-bottom: 1px solid #eee; border-top: 1px solid #eeee;}
.dashEditor .transRow:last-of-type {border: 0}
.dashEditor .transRow.header {background-color: #EEE; font-weight: 400;}
.dashEditor .transRow p {text-transform: none; text-align: right; white-space: pre-wrap;}
.dashEditor .transRowBox {display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: 16px;}
.dashEditor .transRow .material-icons {font-size: 18px; color: #546E7A;}

.buttons.dashboard {display: flex; justify-content: flex-end; grid-column: 1/-1;}
.buttons.dashboard button {background: #FFF; font-weight: 400; padding: 5px 30px; border-radius: 0; transition: border-color .2s linear; color: #000;}
.buttons.dashboard button {border: 2px solid #FFF; position: relative;}
.buttons.dashboard button:after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; box-shadow: 2px 2px 8px rgba(0,0,0,.2)}
.buttons.dashboard button.accent {border-color: #DDD}
.buttons.dashboard button:hover, .buttons.dashboard button.accent:hover {border-color: #d36f00; background: #FAFAFA}

.inputs.dashboard {grid-template-columns: 100px 1fr; border: 0; padding: 8px 16px; margin: 0; background-color: #F9F9F9; grid-column: 1/-1;}
.inputs.dashboard.spanhalf {grid-column: span 3;}
.inputs.dashboard.spanthird {grid-column: span 2;}
.inputs.dashboard {transition: background-color .2s linear; border-radius: 0}
.inputs.dashboard * {font-size: 12px}
.inputs.dashboard:focus-within {background-color: #f4edc3}
.inputs.dashboard label {font-weight: 400; color: #aaa; padding: 0; margin: 0; line-height: 1.2em; text-transform: capitalize;}
.inputs.dashboard label::after {content: " :"}
.inputs.dashboard input, .inputs.dashboard textarea {border: 0; padding: 0; line-height: 1.2em; color: #000}
.inputs.dashboard select {padding: 0; background: transparent url("/assets/select-arrow-light.png") no-repeat right 2px center}
.inputs.dashboard :disabled {cursor: crosshair}
.inputs.dashboard span.currency {display: flex; align-items: baseline; gap: 8px;}
.imgPics.dashboard {grid-row: 1/9; grid-column: 5/7;}
.imgPics.dashboard img {width: 100%; height: auto;}

#dashMain {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px}
.statsCard {padding: 16px; box-shadow: 2px 2px 40px -10px rgba(0,0,0,.25)}
.statsCard h2 {font-weight: 300; font-size: 20px; color: #546E7A; text-transform: uppercase; margin-bottom: 10px; font-family: 'Source Sans Pro'; padding: 0 8px}
.statsCard p {text-transform: capitalize; display: grid; grid-template-columns: 1fr max-content; padding: 4px 8px; border-bottom: 1px solid #DDD}
.statsCard p:last-of-type {border-bottom: 0}
.statsCard p.orders {grid-template-columns: 1fr 50px 80px 80px;}
.statsCard p.orders span {text-align: right;}
.statsCard p.header {color: #546E7A; font-weight: 700;}

#brandsBanner {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 0; margin: 0 0 30px;}
#brandsBanner img {display: block; width: 100%; height: auto;}

#pagination {display: block; width: 100%;  text-align: right}
#pagination a, #pagination span.this {font-size: .9rem; font-weight: 700; padding: 4px 18px; margin: 2px 4px; background: #61a238; color: #FFF; display: inline-block; box-shadow: 2px 2px 8px rgba(0,0,0,.15)}
#pagination span.this {color: #61a238; background: #FFF}

.span4by6 {grid-column: 1/5 !important;}
.material-icons {cursor:pointer; vertical-align: middle;}
.spanall {grid-column: 1/-1;}
.centerText {text-align: center !important;}
.rightText {text-align: right !important;}
.leftText {text-align: left !important;}
.normalText {text-transform: none !important;}
.semiBold {font-weight: 400;}
.visibleScroll {overflow-y: visible;}
.ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.bold {font-weight: 700 !important;}

@media (max-width : 480px) {
    :root {--nav-width : calc(100vw - 48px)}
    img {width: 100%; height: auto}
    body, p {padding: 0; font-size: 13px;}
    #topBar {flex-direction: column;}
    header .logo img {width: 200px; margin: 0 auto;}
    #hdrControls a .txt {display: none;}
    #topBanner {margin-bottom: 0; height: 100vw;}
    #topBanner .slogan {font-size: 1.4rem; bottom: 20px; left: 30px; right: 20px; font-weight: 400; line-height: 1.6rem;}
    main {display: block; position: relative;}
    nav {position: fixed; top: 0; left: -100vw; bottom: 0; width: var(--nav-width); z-index: 8000}
    #catLinks, #searchBoxContainer {position: relative; top: auto;}
    nav.expand {left: 0; box-shadow: 0 0 80px rgba(0,0,0,.5)}
    #usrMenu {display: block}
    article, footer {padding: 20px}
    #productGrid {grid-template-columns: 100%; gap: 20px;}
    #productGrid .card {grid-template-columns: 100%;}
    #productGrid .card .description {margin-bottom: 20px;}
    section {padding: 20px;}
    #newsletter {padding: 20px; font-size: inherit;}
    #newsletter .newsfield {padding: 8px 10px;}
    footer .logo img {height: 32px;}
    footer p {font-size: 10px}
    .inputs.noSpan {grid-column: span 2;}
    h1.intro {font-size: 1.8rem; margin: 20px 0 30px;}
    .detailsCard {grid-template-columns: 100%; gap: 0; padding: 0; max-width: 100%; margin: 0}
    .detailsCard .details h1 {font-size: 2rem; margin: 20px 0; line-height: 2rem;}
    .detailsCard figure img {margin: 0 auto;}
    .detailsCard .details {padding: 0;}
    .detailsCard .toolbox {grid-template-columns: 1fr}
    .detailsCard button {width: 100%; margin-bottom: 20px;}
    h2.others {line-height: 1.5rem; font-size: 1.4rem;}
    #priceRow {grid-template-columns: 1fr}
    #brandsBanner {grid-template-columns: 1fr}
}
@media (min-width:481px) and (max-width : 960px) {
	#productGrid {grid-template-columns: 1fr; gap: 30px}
    body, p {font-size: 12px;}
    #topBanner {margin-bottom: 30px;    }
    #topBanner .slogan {font-size: 1.4rem; bottom: 20px; left: 30px; right: 20px; font-weight: 400; line-height: 1.6rem;}
    #newsletter {padding: 30px; font-size: inherit;}
    #newsletter .newsfield {padding: 8px 10px;}
    #priceRow {grid-template-columns: 1fr}
    #brandsBanner {grid-template-columns: 1fr; gap: 10px;}
}
@media (min-width:961px) and (max-width : 1400px) {
	#productGrid {grid-template-columns: 1fr 1fr; gap: 30px}
    body, p {font-size: 12px;}
    #topBanner {margin-bottom: 30px;    }
    #topBanner .slogan {font-size: 1.4rem; bottom: 20px; left: 30px; right: 20px; font-weight: 400; line-height: 1.6rem;}
    #newsletter {padding: 30px; font-size: inherit;}
    #newsletter .newsfield {padding: 8px 10px;}
}