header {position: relative; z-index: 300;}

article.shop .message.info {margin: -15px 0 15px; border-radius: 0 0 10px 10px; position: relative; background: white; z-index: 200; padding: 10px 20px; filter: drop-shadow(5px 5px 5px var(--colorBody));}
article.shop .message.info p {background: transparent; color: var(--colorHeader); text-align: center; font-weight: 600}
article.shop form .message.info {margin-top: 15px; border-radius: 10px; border: 3px solid white; background: transparent;}
article.shop form .message.info h3 {margin-top: 10px;}
article.shop form .message.info p {color: white; text-align: left;}

article.shop nav {border-bottom: 0 none transparent; box-shadow: none; background: var(--colorBody); margin-top: -15px;}
article.shop nav ul {align-items: flex-start;}
article.shop nav ul li a:hover,
article.shop nav ul li a.active {background: var(--colorMenu); color: var(--colorBody); border-radius: 0 0 10px 10px; filter: none}
article.shop nav ul li a.cart:not(.active) {background: var(--colorBrand); color: var(--colorHeader); border-radius: 0 0 10px 10px;}
article.shop nav ul li a.cart:not(.active):hover {filter: brightness(1.2);}
article.shop nav ul li a.cart span.cartCount {font-size: 80%; font-weight: 800;}
article.shop nav ul li a.cart span.cartCount[data-count='0'] {display: none;}
article.shop nav ul li a.cart span.cartCount::before {content: ' (';}
article.shop nav ul li a.cart span.cartCount::after {content: ')';}
article.shop nav:has( + article.full) {display: none}
@media screen and (max-width: 820px) {
  article.shop nav ul li a:hover,
  article.shop nav ul li a.active {border-radius: 10px}
}

article.shop .itemList {display: grid; grid-template-columns: repeat(2, minmax(200px, 50%)); grid-gap: 10px;}
article.shop .itemList a {min-height: 250px; background: var(--colorHeader); color: var(--colorFont); text-decoration: none; position: relative; border-radius: 10px; overflow: hidden;}
article.shop .itemList a:hover {filter: brightness(1.2);}
article.shop .itemList a > img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
article.shop .itemList a > div {position: absolute; bottom: 0; width: calc(100% - 20px); padding: 10px; background: color-mix(in srgb, var(--colorHeader) 50%, transparent); display: flex; flex-direction: column; justify-content: flex-end;}
article.shop .itemList a .name {font-size: 150%}
article.shop .itemList a .category {font-size: 80%; margin-bottom: 10px; font-style: normal;}
article.shop .itemList a .price {font-size: 150%; font-style: normal;}

article.shop .itemDetail {display: flex; gap: 20px; margin-top: 10px;}
article.shop .itemDetail .itemGallery {flex-basis: 50%;}
article.shop .itemDetail .itemGalleryMain {height: 50vh; background: var(--colorHeader); border-radius: 10px; overflow: hidden;}
article.shop .itemDetail .itemGalleryMain img {width: 100%; height: 100%; object-fit: contain;}
article.shop .itemDetail .itemGalleryMain img[src='/'] {display: none;}
article.shop .itemDetail .itemGalleryThumbs {display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; justify-content: center;}
article.shop .itemDetail .itemGalleryThumbs img {width: 100px; height: 100px; object-fit: cover; cursor: pointer;}
article.shop .itemDetail .itemInfo {flex-basis: 50%; display: flex; flex-direction: column;}
article.shop .itemDetail .itemInfo .name {font-size: 150%; font-style: normal;}
article.shop .itemDetail .itemInfo .category {font-size: 80%; margin-bottom: 10px; font-style: normal;}
article.shop .itemDetail .itemInfo .description {font-style: normal;}
article.shop .itemDetail .itemInfo .description p {margin-bottom: 10px;}
article.shop .itemDetail .itemInfo .description p:last-of-type {margin-bottom: 0;}
article.shop .itemDetail .itemInfo .price {font-size: 32px; font-style: normal; margin-top: 20px;}

article.shop .itemDetail form {border: 2px solid var(--colorBrand); border-radius: 10px; padding: 20px; margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center;}
article.shop .itemDetail form label {font-size: 110%;}
article.shop .itemDetail form input {font-size: 110%; padding: 5px;}
article.shop .itemDetail form input[type=number] {padding-right: 0;}
article.shop .itemDetail form select {font-size: 110%; padding: 5px;}
article.shop .itemDetail form button {font-size: 100%; grid-column-start: 2; background: var(--colorBrand); border-radius: 10px; padding: 5px; border: none; cursor: pointer;}
article.shop .itemDetail form button:hover {filter: brightness(1.2);}

article.shop .checkoutStepper {display: flex; overflow: hidden; border-bottom: 1px solid white; border-radius: 10px 10px 0 0; margin: 20px 0 0; cursor: default; background: var(--colorHeader);}
article.shop .checkoutStepper div {flex-grow: 1; padding: 10px; text-align: center; width: 25%}
article.shop .checkoutStepper div a {color: var(--colorFont);}
article.shop .checkoutStepper div.current {background: white; color: black; font-weight: 600; border-radius: 10px 10px 0 0;}
article.shop .checkoutStepper + h2 {margin-bottom: 20px;}

article.shop .checkoutCart {width: 100%;}
article.shop .checkoutCart thead th {border-bottom: 1px solid white; font-weight: 400;}
article.shop .checkoutCart thead th:nth-child(2) {text-align: left;}
article.shop .checkoutCart thead th:nth-child(3) {text-align: center;}
article.shop .checkoutCart thead th:nth-child(4) {text-align: center;}
article.shop .checkoutCart tbody td {border: 0; border-bottom: 1px solid white; padding: 5px 0;}
article.shop .checkoutCart tbody td:nth-child(1) {width: 120px;}
article.shop .checkoutCart tbody td:nth-child(1) div {width: 100px; height: 100px; border-radius: 10px; overflow: hidden; background: var(--colorHeader);}
article.shop .checkoutCart tbody td:nth-child(1) div img {width: 100%; height: 100%; object-fit: cover;}
article.shop .checkoutCart tbody td:nth-child(2) strong {font-size: 120%;}
article.shop .checkoutCart tbody td:nth-child(3) {width: 120px; text-align: center;}
article.shop .checkoutCart tbody td:nth-child(3) {width: 120px; text-align: center;}
article.shop .checkoutCart tbody td:nth-child(4) {width: 120px; text-align: right;}
article.shop .checkoutCart tbody td button {background: var(--colorBrand); color: var(--colorHeader); border: none; border-radius: 50%; cursor: pointer; font-weight: 600; width: 2em; height: 2em;}
article.shop .checkoutCart tbody td button:hover {background: var(--colorFont);}
article.shop .checkoutCart tfoot th {border-top: 3px double white; padding: 10px 0}
article.shop .checkoutCart tfoot th:nth-child(2) {text-align: left;}
article.shop .checkoutCart tfoot th:nth-child(2) strong {font-weight: 600; font-size: 120%;}
article.shop .checkoutCart tfoot th:nth-child(4) {text-align: right;}
article.shop .checkoutCart tfoot th:nth-child(4) span {font-weight: 600; font-size: 120%;}

article.shop .checkoutBorder {border: 2px solid var(--colorBrand); border-radius: 10px; padding: 5px 10px; margin: 20px 0;}

article.shop .checkoutData {border: none; width: 100%; margin: 20px 12px;}
article.shop .checkoutBorder .checkoutData {border: none; width: 100%; margin: 0;}
article.shop .checkoutData th {width: 200px; text-align: left; padding: 5px 2px; vertical-align: top;}
article.shop .checkoutData td {border: none; padding: 5px 2px}
article.shop .checkoutData td input:not([type=checkbox]) {width: 100%; padding: 5px; font-size: 110%;}
article.shop .checkoutData td div + div{margin-top: 10px;}
article.shop .checkoutData a {color: var(--colorBrand); font-weight: 600;}

article.shop .deliveryInfo:has(input) {border: 2px solid var(--colorBrand);padding: 0 10px;border-radius: 10px;}
article.shop .deliveryInfo ol {margin: 0; padding-left: 70px;}
article.shop .deliveryInfo ol li {margin-bottom: 5px;}
article.shop .deliveryInfo ol li input {margin-bottom: 5px; padding: 5px; width: 250px;}
article.shop .deliveryInfo ul {margin: 0; padding-left: 70px;}
article.shop .deliveryInfo ul li {margin-bottom: 5px;}

article.shop .checkoutSubmit {text-align: right; margin: 20px 0;}
article.shop .checkoutSubmit button {width: 250px; max-width: 50%; text-align: center; background: var(--colorBrand); border-radius: 10px; cursor: pointer; padding: 20px 10px; color: black; font-weight: 600; font-size: 16px;}
article.shop .checkoutSubmit button:hover:not([disabled]) {background: white;}
article.shop .checkoutSubmit button[disabled] {filter: opacity(.5); cursor: not-allowed;}

footer > div.shop {justify-content: center; gap: 20px;}

.checkbox-wrapper {display: inline-block; position: relative;}
.checkbox-wrapper input[type=checkbox], .checkbox-wrapper input[type=radio] {position: absolute; opacity: 0;}
.checkbox-wrapper label {--size: 50px; cursor: pointer; width: var(--size); height: calc(var(--size) / 2); background: grey; display: block; border-radius: 100px; position: relative; transition: 0.3s;}
.checkbox-wrapper label:after {content: '';position: absolute; top: 6%; left: 2.5%; width: calc(50% - 5%); height: calc(100% - 11%); background: #fff; border-radius: 90px;}
.checkbox-wrapper input:checked + label {background-color: var(--colorBrand);}
.checkbox-wrapper input:checked + label:after {left: calc(100% - 2.5%);transform: translateX(-100%);}
.checkbox-wrapper label:active:after {width: 55%;}
.checkbox-wrapper:has(+ label) {float: left; margin-right: 10px; clear: left;}
.checkbox-wrapper + label {display: block; padding: 2px 0 0 60px;}