/* layout */
.flex { display: flex; }
.column { flex-flow: column; }
.items-centered { align-items: center; }
.content-centered { justify-content: center; }
.content-spaced-between { justify-content: space-between; }
.height-full { height: 100vh; }
.height-100 { height: 100%; }
.width-nav { width: 200px; }
.width-100 { width: 100%; }
.width-25 { width: 25%; }

/* colors */
.black { color: #000000 !important; }
.gray { color: #868686 !important; }
.grayMedium { color: #cccccc !important; }
.grayLight { color: #e5e5e5 !important; }
.white { color: #ffffff !important; }
.red { color: #ff071a !important; }
.blue { color: #0026e7 !important; }

.border-black { border-color: #000000; }
.border-gray { border-color: #868686; }
.border-grayMedium { border-color: #cccccc; }
.border-grayLight { border-color: #e5e5e5; }
.border-white { border-color: #ffffff; }
.border-red { border-color: #ff071a; }
.border-blue { border-color: #0026e7; }

.bg-black { background-color: #000000; }
.bg-gray { background-color: #868686; }
.bg-grayMedium { background-color: #cccccc; }
.bg-grayLight { background-color: #e5e5e5; }
.bg-white { background-color: #ffffff; }
.bg-red { background-color: #ff071a; }
.bg-blue { background-color: #0026e7; }

/* typography */
.text-xs { font-size: 9px; }
.text-s { font-size: 12px; }
.text-m { font-size: 16px; }
.text-ml { font-size: 21px; }
.text-l { font-size: 28px; }
.text-xl { font-size: 37px; }
.text-xxl { font-size: 50px; }

.bold { font-weight: 700; }
.underline { text-decoration: underline; }

.text-right { text-align: right; }
.text-center { text-align: center; }

/* spacing */
.pa-xs { padding: 2px; }
.pa-s { padding: 4px; }
.pa-m { padding: 8px; }
.pa-l { padding: 16px; }
.pa-xl { padding: 32px; }

.px-xs { padding-left: 2px; padding-right: 2px; }
.px-s { padding-left: 4px; padding-right: 4px; }
.px-m { padding-left: 8px; padding-right: 8px; }
.px-l { padding-left: 16px; padding-right: 16px; }
.px-xl { padding-left: 32px; padding-right: 32px; }

.py-xs { padding-top: 2px; padding-bottom: 2px; }
.py-s { padding-top: 4px; padding-bottom: 4px; }
.py-m { padding-top: 8px; padding-bottom: 8px; }
.py-l { padding-top: 16px; padding-bottom: 16px; }
.py-xl { padding-top: 32px; padding-bottom: 32px; }

.pl-xs { padding-left: 2px; }
.pl-s { padding-left: 4px; }
.pl-m { padding-left: 8px; }
.pl-l { padding-left: 16px; }
.pl-xl { padding-left: 32px; }

.pr-xs { padding-right: 2px; }
.pr-s { padding-right: 4px; }
.pr-m { padding-right: 8px; }
.pr-l { padding-right: 16px; }
.pr-xl { padding-right: 32px; }

.pt-xs { padding-top: 2px; }
.pt-s { padding-top: 4px; }
.pt-m { padding-top: 8px; }
.pt-l { padding-top: 16px; }
.pt-xl { padding-top: 32px; }

.pb-xs { padding-bottom: 2px; }
.pb-s { padding-bottom: 4px; }
.pb-m { padding-bottom: 8px; }
.pb-l { padding-bottom: 16px; }
.pb-xl { padding-bottom: 32px; }

.ma-xs { margin: 2px; }
.ma-s { margin: 4px; }
.ma-m { margin: 8px; }
.ma-l { margin: 16px; }
.ma-xl { margin: 32px; }

.mx-xs { margin-left: 2px; margin-right: 2px; }
.mx-s { margin-left: 4px; margin-right: 4px; }
.mx-m { margin-left: 8px; margin-right: 8px; }
.mx-l { margin-left: 16px; margin-right: 16px; }
.mx-xl { margin-left: 32px; margin-right: 32px; }

.my-xs { margin-top: 2px; margin-bottom: 2px; }
.my-s { margin-top: 4px; margin-bottom: 4px; }
.my-m { margin-top: 8px; margin-bottom: 8px; }
.my-l { margin-top: 16px; margin-bottom: 16px; }
.my-xl { margin-top: 32px; margin-bottom: 32px; }

.ml-xs { margin-left: 2px; }
.ml-s { margin-left: 4px; }
.ml-m { margin-left: 8px; }
.ml-l { margin-left: 16px; }
.ml-xl { margin-left: 32px; }

.mr-xs { margin-right: 2px; }
.mr-s { margin-right: 4px; }
.mr-m { margin-right: 8px; }
.mr-l { margin-right: 16px; }
.mr-xl { margin-right: 32px; }

.mt-xs { margin-top: 2px; }
.mt-s { margin-top: 4px; }
.mt-m { margin-top: 8px; }
.mt-l { margin-top: 16px; }
.mt-xl { margin-top: 32px; }

.mb-xs { margin-bottom: 2px; }
.mb-s { margin-bottom: 4px; }
.mb-m { margin-bottom: 8px; }
.mb-l { margin-bottom: 16px; }
.mb-xl { margin-bottom: 32px; }

/* borders */
.ba-1 { border-width: 1px; }
.bb-1 { border-bottom-width: 1px; }
.bt-1 { border-top-width: 1px; }
.br-1 { border-right-width: 1px; }

.ba-solid { border-style: solid; }
.bb-solid { border-bottom-style: solid; }
.bt-solid { border-top-style: solid; }
.br-solid { border-right-style: solid; }

/* utils */
.overflow-hidden { overflow: hidden; }
.scroll-auto { overflow-y: auto; }
.circle { border-radius: 9999px; }
.fa-shopping-cart {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.fa-shopping-cart:after {
    content: '2';
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background-color: #ff071a;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    display: inline-block;
    padding: 4px;
    margin-left: -8px;
    margin-top: -16px;
    text-align: center; 
}
.thumbnail {
    height: 480px;
    width: 640px;
}