body.shop {
    background: #f7f7f7;;
}

body.shop #ew-head {
    background: white;
    /*box-shadow: 0 0 5px #00000030, 0 2px 15px #0000000f;*/
    box-shadow: 0 -10px 40px #00000024;
}

body.shop #ew-header {
    background: white;
    border: 0;
    box-shadow: none;
    height: 80px;
}
body.shop #ew-header a:hover {
    transform: scale(1.03);
}
body.shop #ew-header-shop-logo {
    display: block;
    width: 150px;
    min-width: 150px;
    height: 80px;
    background-size: 150px;
    flex-grow: 0;
    transition: all 200ms ease;
    padding: 10px;
}
body.shop #ew-header-shop-logo div {
    background-size: contain;
    height: 60px;
    width: 100%;
}
body.shop #ew-header section, body.shop .ew-header-icons > a, body.shop .ew-header-icons a {
    text-align: center;
    height: 80px; /* todo: use variable! */
    line-height: 80px;
}
body.shop .ew-header-icons > a, body.shop .ew-header-icons > .header-icon {
    position: relative;
    display: inline-block;
    line-height: 40px;
    padding: 15px 7px 30px 7px;
    height: 82px;
}
body.shop .ew-header-icons > a > i {
    font-size: 1.4em;
}
body.shop .ew-header-icons .ew-context-menu {
    position: absolute;
    width: 220px;
    top: 80px;
    left: -80px;
    z-index: 5050;
    box-shadow: 1px 1px 5px #00000036, 0 0 50px 10px #ffffff5e !important;
    transform: scale(0.97);
}
body.shop .ew-header-icons a:hover .ew-context-menu {
    visibility: visible;
    opacity: 1;
    display: block;
}
body.shop .ew-header-icons .ew-context-menu a, body.shop .ew-header-icons .ew-context-menu button {
    height: 40px;
    line-height: 24px;
}
body.shop .ew-header-icons i {
    position: relative;
}
body.shop .ew-header-icons i .ew-bubble {
    top: -5px;
    left: 15px;
    right: auto;
    font-size: 0.5em;
    background: white;
}
body.shop .ew-header-icons a > span.caption {
    display: block;
    text-align: center;
    font-size: 0.7em;
    line-height: 1em;
}
body.shop .ew-header-icons .divider {
    display: inline-block;
    border-left: 1px solid #0000003b;
    margin-left: 7px;
    padding-left: 7px;
    width: 14px;
    height: 40px;
    font-size: 1em;
    line-height: 20px;
}
body.shop input, body.shop textarea {
    background: #ffffffd6;
}
body.shop select {
    background-color: #ffffffd6;
}
body.shop #ew-footer {
    border-top: 1px solid #0000000d;
}

#ew-shop-nav {
    padding: 10px 0 15px 0;
}
#ew-shop-nav section {
    margin-top: 0;
    margin-bottom: 0;
}
#ew-shop-nav a {
    text-decoration: none;
    border-radius: 5px;
}
#ew-shop-nav a:hover {
    text-decoration: underline;
}
#ew-shop-nav a.highlight {
    background: hsla(var(--ew-color-hue), 100%, 45%, 0.82);
    border: 1px solid #00000021;
    box-shadow: 3px 3px 7px #00000024;
    color: white;
    font-weight: bold;
    margin-right: 15px;
    margin-top: -2px;
}
#ew-shop-nav a.highlight:enabled:hover, #ew-shop-nav a.highlight:hover {
    background: hsla(var(--ew-color-hue), 100%, 42%, 0.82);
    color: white;
    border: 1px solid #00000036;
    box-shadow: 3px 3px 9px #00000035;
}
b#ew-shop-nav a.highlight:enabled:active, #ew-shop-nav a.highlight:active {
    background: hsla(var(--ew-color-hue), 100%, 30%, 0.82);
    color: white;
    border: 1px solid #00000036;
    box-shadow: 3px 3px 12px #00000035;
}

#ew-shop-nav ul {
    list-style: none;
}
#ew-shop-nav li {
    margin: 0;
    padding: 0;
    display: inline-block;
    position: relative;
    text-decoration: none;
}
#ew-shop-nav a {
    display: inline-block;
    opacity: 0.8;
    padding: 8px 12px;
    transition: all 100ms ease-in-out;
}
#ew-shop-nav a:hover {
    opacity: 1;
    background: #00000008;
}
#ew-shop-nav i:first-child {
    padding-right: 9px;
    opacity: 0.6;
}

.ew-shop-filter {
    padding-bottom: 85px;
}
.ew-shop-filter-search {
    padding: 20px;
}
.ew-shop-filter-search .ew-input .input-action-left a {
    line-height: 56px;
    width: 60px;
}
.ew-shop-filter-group {
    position: relative;
    padding: 10px 20px;
}
.ew-shop-filter-group > section {
    padding: 0;
}
.ew-shop-filter-group label {
    padding: 5px 10px 5px 45px;
}
.ew-shop-filter-group h4 {
    font-size: 0.8em;
    color: grey;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 1px;
    padding: 5px;
}
.ew-shop-filter-group h4 + ul {
    padding-top: 5px;
}
.ew-shop-filter-group h4 a {
    position: absolute;
    top: 18px;
    right: 25px;
    width: 24px;
    background: #0000000d;
    padding: 0 5px;
    text-align: center;
    border-radius: 15px;
    height: 24px;
    line-height: 24px;
}
.ew-shop-filter-group h4 a:hover {
    background: #00000014;
}
.ew-shop-filter-group .ew-checkmark {
    top: 9px;
    left: 15px;
    height: 20px;
    width: 20px;
}
.ew-shop-filter-group .ew-checkbox .ew-checkmark::after {
    left: 7px;
    top: 4px;
    width: 4px;
    height: 8px;
}
.ew-shop-filter-group .ew-radio .ew-checkmark::after {
    left: 6px;
    top: 6px;
    width: 8px;
    height: 8px;
}
.ew-shop-filter-group .add-helper {
    text-transform: lowercase;
    text-align: right;
    color: hsla(var(--ew-color-hue), 100%, 42%, 0.82);
    font-size: 0.7em;
    letter-spacing: 1px;
}
.ew-shop-filter-group .add-helper i {
    display: inline-block;
    padding: 0 7px;
    margin-bottom: 5px;
}
/* todo: make globally smaller icons possible.
 */
.ew-shop-product-image-preview {
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    margin: 5px;
}
.ew-shop-product-primary h1 {
    padding: 15px 15px 6px 19px;
}
.ew-shop-product-primary h2 {
    padding: 15px 15px 6px 19px;
}
.ew-shop-product-primary .key {
    margin-bottom: 10px;
    letter-spacing: 2px;
    color: hsla(var(--ew-color-hue), 100%, 68%, 0.9);
}
.ew-shop-aside-action-wrap {
    width: 350px; flex-grow: 0;
}
.ew-shop-aside-action {
    margin: 20px;
    padding: 20px 0;
    border: 2px solid #80808038;
    box-shadow: 0 0 10px #00000014;
    border-radius: 15px;
    background: #ffffffd6;
}
.ew-shop-aside-action .ew-form {
    padding: 0;
}
.ew-shop-product-price-primary {
    text-align: right;
    font-size: 1.3em;
    font-weight: bold;
    margin-top: 20px;
    color: hsla(var(--ew-color-hue), 100%, 18%, 0.9);
}
.ew-shop-product-price-primary .unit, .ew-shop-product-price-primary .pre {
    color: hsla(var(--ew-color-hue), 100%, 18%, 0.65);
}
.ew-shop-product-price-primary .pre {
    display: inline-block;
    font-size: 0.7em;
    margin-right: 5px;
}
.ew-shop-product-price-primary .number {
    display: inline-block;
}
.ew-shop-product-availability {
    color: darkgreen;
    font-size: 1.1em;
    line-height: 1.7em;
}
.ew-shop-aside-action .product-availability {
    margin-top: 10px;
    margin-left: 3px;
    display: inline-block;
    font-size: 1.1em;
    line-height: 1.7em;
}
.ew-shop-aside-action .product-location {
    display: block;
    margin-top: 5px;
}
.ew-shop-aside-action .product-location i {
    display: inline-block;
    margin: 0 6px 0 3px;
    opacity: 0.4;
}
.ew-shop-product-details h4 {
    font-size: 0.8em;
    color: grey;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 1px;
}
.ew-shop-product-details li {
    margin-left: 0; /* todo: global solution */
}
.ew-shop-product-details a i {
    display: inline-block;
    text-align: center;
    width: 30px;
    margin-right: 7px;
}
.ew-shop-tile, .ew-correspondence-tile {
    margin: 15px;
    padding: 15px 20px;
    border: 1px solid #d9d9d991;
    border-radius: 15px;
    background: #ffffffd6;
}
.ew-correspondence-tile {
    background: #ffffffc4;
}
.ew-shop-tile .preview {
    width: 150px;
    height: 150px;
    transition: transform .2s ease-in-out;
    margin: 10px 0;
}
.ew-shop-tile:hover .preview {
    transform: scale(1.05);
}
.ew-shop-tile h3 {
    margin-top: 10px;
    font-size: 1.3em;
    padding-left: 0;
    max-width: 400px;
}
.ew-shop-tile .shopping {
    width: 250px;
    flex-grow: 0;
    padding-left: 20px;
}
.ew-correspondence-tile {
    padding: 0;
    overflow: hidden;
}
.ew-correspondence-tile header {
    background: white;
    padding: 20px 20px 10px 25px;
    border-bottom: 1px solid #d9d9d991;
}
.ew-correspondence-tile article > div {
    padding: 10px 20px 10px 20px;
}
.ew-correspondence-tile h3 {
    font-size: 1.3em;
    padding-left: 0;
}
.ew-product-mini-row {
    margin: 10px 5px;
}
.ew-product-mini-row .image {
    display: block;
    width: 50px;
    flex-grow: 0;
}
.ew-product-mini-row .image div {
    width: 50px;
    height: 50px;
}
.ew-product-mini-row .name {
    margin: 13px 13px;
}
.ew-shop-tile .ew-shop-product-price-primary, .ew-correspondence-tile .ew-shop-product-price-primary {
    margin: 20px 15px 10px 10px;
}
.product-availability .product-avail-bubble {
    width: 10px;
    height: 10px;
    display: inline-block;
    background: green;
    border-radius: 5px;
    margin-right: 7px;
    margin-left: 2px;
}
.product-availability .product-avail-bubble.red {
    background: #bd0000;
}
.product-availability .product-avail-bubble.yellow {
    background: #d2b200;
}
.ew-shop-tile .cal-date {
    display: inline-block;
    width: 70px;
    border: 1px solid hsla(var(--ew-color-hue), 100%, 74%, 0.5);
    border-radius: 5px;
    overflow: hidden;
    margin: 10px;
}
.ew-shop-tile .cal-date .month {
    background: hsla(var(--ew-color-hue), 100%, 74%, 0.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000000ba;
}
.ew-shop-tile .cal-date .day {
    background: hsla(var(--ew-color-hue), 100%, 94%, 0.5);
    text-align: center;
    font-size: 1.2em;
    padding: 10px 0;
}
.ew-shop-tile .tile-desc {
    margin-top: 10px;
    color: #000000a8;
}
.ew-shop-tile .product-availability {
    margin: 10px;
    margin-left: 0;
    display: inline-block;
}
.ew-shop-tile .product-location {
    margin: 10px;
    display: inline-block;
}
.ew-shop-tile .product-location i {
    margin-right: 7px;
    color: grey;
}
.ew-shop-cart-summary td {
    padding: 5px 0;
}
.ew-correspondence-states {
    margin: 15px;
}
.ew-correspondence-tile .ew-correspondence-states {
    /*margin: 5px 0 15px 0;*/
}
.ew-correspondence-states .ew-state-block {
    display: inline-block;
    padding: 12px 20px;
    margin: 10px 0;
    border: 1px solid #00000012;
    border-right: 0;
    background: #00000005;
}
.ew-correspondence-states .ew-state-block:first-child {
    border-radius: 10px 0 0 10px;
}
.ew-correspondence-states .ew-state-block:last-child {
    border-radius: 0 10px 10px 0;
    border-right: 1px solid #00000012;
}
.ew-correspondence-states .ew-state-block:only-child {
    border-radius: 10px 10px 10px 10px;
    border-right: 1px solid #00000012;
}

.btn-increment, .btn-decrement {
    display: inline-block;
    margin-bottom: -14px;
    color: #0000007a;
    background: #0000000d;
    border: 1px solid #0000000f;
    border-radius: 40px;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
    transition: all 100ms ease-in-out;
}
.btn-decrement {
    margin-right: 10px;
}
.btn-increment {
    margin-left: 10px;
}
.btn-increment:hover, .btn-decrement:hover {
    transform: scale(1.07);
    background: #00000012;
    box-shadow: 0 0 5px #00000022;
}
.btn-increment.limit, .btn-decrement.limit {
    transform: scale(0.9);
    opacity: 0.2;
    cursor: default;
}

.notify-space {
    margin-top: 15px;
    margin-bottom: 35px;
}

@media only screen and (max-width: 768px) {
    .ew-shop-aside-action-wrap {
        width: auto;
    }
    #ew-shop-nav {
        padding-left: 20px;
        padding-right: 20px;
    }
    .ew-shop-tile .product-availability {
        display: block;
    }
    .ew-shop-tile .product-location {
        display: block;
        margin-left: 0;
    }
    .ew-shop-tile .shopping {
        display: block;
        text-align: right;
        width: auto;
    }
}