.shop-wrapper {margin: 0 25px; padding: 0px 0 100px; transition: 0.5s;}
.shop-wrapper.filter-open .shop-main {display:grid; grid-template-columns: 1fr 4fr; grid-gap: 40px;}

.filter-menu-wrapper {margin: 0 25px}

.active-results {margin: 0 0 20px;}

.filter-container {display: none;}
.filter-pill {background: #e5e5e5; padding: 5px 30px 5px 10px; border-radius: 25px; display: inline-block; font-size: 12px; font-weight: 300; position: relative; margin:2px;}
.filter-pill button {background: none;outline: none;border: none;position: absolute;top: 50%;transform: translateY(-50%);padding: 0px;right: 10px;}
.filter-pill button img {filter: invert(1); width: 10px;}

.filter-container article {user-select: none;}
.filter-container article h2 {font-weight: normal; font-size: 17px; padding-bottom: 20px; border-bottom: 1px solid #011b2360;}
.filter-container article ul {margin: 10px 0 0; list-style: none;}
.filter-container article ul li a {padding: 10px 0; display: inline-block; text-transform: uppercase;}

.filter-open .filter-container {display: block;}
.filter-open > .flex-row {grid-column: span 2;}

#filterLink {display: flex; align-items: center; border:1px solid #222; font-size: 11px; text-transform:uppercase; letter-spacing: 1px; padding: 7px 12px; border-radius: 60px; position:relative; transition: 0.3s;}

.option-row {align-content:center}
.option-row .check-label {text-transform:uppercase; font-size: 11px; letter-spacing:1px;}

.model-code {opacity:0.7; letter-spacing: 1px; font-size: 13px}

.filter-icon {
  height: 16px;
  width: 16px;
  position: relative;
  margin-left: 20px;
}

.filter-icon span {
  position: absolute;
  background: #000;
  height: 1px;
  width: 100%;
  top: 2px; /* scaled down from 3px */
}

.filter-icon span::after {
  content: '';
  display: block;
  position: absolute;
  background: #000;
  height: 3px; /* scaled down from 4px */
  width: 3px;  /* scaled down from 4px */
  background: #fff;
  border: 1px solid #000; /* scaled down from 2px */
  border-radius: 50vw;
  top: 50%;
  transform: translateY(-50%);
  right: 1px; /* scaled down from 2px */
  transition: 0.3s;
  transition-timing-function: linear;
}

.filter-icon span:nth-child(2) {
  top: 7px; /* scaled down from 10px */
}

.filter-icon span:nth-child(2)::after {
  right: 8px;
}

.filter-icon span:nth-child(3) {
  bottom: 2px;
  top: auto;
}

.active .filter-icon span::after {
  right: 8px; /* scaled down from 11px */
}

.active .filter-icon span:nth-child(2)::after {
  right: 2px;
}

#filterLink:hover {background: #222; color: #fff;}
#filterLink:hover .filter-icon span {background: #fff;}

.filter-wrapper {margin-bottom: 40px;}

.quick-buy-button {display: flex; align-items: center; border: 1px solid #222; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 7px 35px 7px 12px; border-radius: 60px; position: relative; margin: 0 15px; transition: 0.3s; cursor: pointer;}
.quick-buy-button::after {content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; background: #000; right: 10px; mask-size:contain; mask-position; center; mask-repeat: no-repeat; mask-image:url('/img/cart.svg'); transition: 0.3s;}

.quick-buy-button:hover {background: #222; color: #fff;}
.quick-buy-button:hover::after {background: #fff;}


.shop-main.row .grid-main {grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));}

.inventory-message {background: #fdf2cf; padding: 10px 20px; margin-bottom: 20px; font-size: 15px; line-height: 1.4}


.grid-main {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }


.grid-main.list-view {
display: block;}


.grid-view-only {display:none}


.grid-main.list-view  .item-content {display: grid; grid-template-columns: 200px auto 2fr; gap: 20px; }
.grid-main.list-view .product-item {border:none; background: #f7f7f7; margin: 10px 0}
.grid-main.list-view .product-item:hover figure { background: #f7f7f7;}
.grid-main.list-view .product-item:hover {border:none}

.grid-main.grid-view .list-view-only {display:none}
.grid-main.list-view .list-view-only {display:block}
.grid-main.list-view .list-view-only .model-wrapper {position:relative; top:0; left:0; margin-bottom: 20px;}
.grid-main.list-view .product-item article .list-view-only  .model-wrapper span {font-weight:bold; font-size: 11px;}
.grid-main.list-view .product-item > .model-wrapper {display:none}

#grid-btn, #list-btn {border:none; text-indent:-99999em; background: #eee; width: 24px; height:24px; background-position:center; background-repeat:no-repeat !important }
.view-toggle {margin-right: 20px;}

#grid-btn {background: url(/img/grid-view-stroke-rounded.svg); background-size: contain}
#list-btn {background: url(/img/menu-07-stroke-rounded.svg); background-size: contain}


.shop-main.grid .grid-main.list-view .product-item:hover article {border-top: 1px solid #fff;}

.shop-main.grid .grid-main.list-view .product-item .vmd-price {margin-bottom:-20px}

.shop-main.grid .grid-main.list-view .product-item figure {height: 170px; position:inherit}
.grid-main.list-view  .item-content .pMeas {display:block !important; margin-top: 20px; text-transform:uppercase; font-size: 13px;}
.grid-main.list-view .item-content .pMeas p {display:inline-block; margin-right: 15px;}

.category-container ~ .grid-main {display: none;}
.category-container + .option-row {display: none!important;}

.upload-file {margin-top: 20px;}

/* file upload button */

.upload-file input {border:none !important; padding: 0px; background:none; margin-bottom: 10px; width: 70%;}
.upload-file .button-dark {font-size: 12px; padding: 8px 10px;}


.upload-file input[type="file"]::file-selector-button {
  border-radius: 4px;
  padding: 0 16px;
  height: 40px;
  cursor: pointer;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
  margin-right: 16px;
  transition: background-color 200ms;     font-family: 'Apercu', sans-serif;
}

/* file upload button hover state */
.upload-file input[type="file"]::file-selector-button:hover {
  background-color: #f3f4f6;
}

/* file upload button active state */
.upload-file input[type="file"]::file-selector-button:active {
  background-color: #e5e7eb;
}

/* ------------------------ */

.cart__left table {margin-bottom: 0px;}
.cart__left table input[type="checkbox"] {position:relative; top:-3px;}

.cart__left table th {font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    background: #eee; padding: 10px;}


.cart__left table td {
    padding: 0.8rem .25rem;
    vertical-align: middle; border-bottom: 1px solid #eee; font-size: 14px;
}

.cart__left table td .js-qty {width: 90px;}
.cart__left table td a {font-weight: 500}

.cart-option {display:block; font-size:11px; text-transform:uppercase; margin-top: 7px; font-weight: 300; letter-spacing:1px;}

.cart__left table td .stock-status {background:#eee; padding: 7px 10px; font-size: 11px; border-radius: 20px;}

.option-row {width: 100%; margin-bottom: 50px;}
.option-row > div {display: flex; align-content:center; align-items:center}
.option-row > div > .check-label, {display: flex; flex-direction: row-reverse;}

.check-label {color: #000; display: flex; flex-direction: row-reverse; user-select: none; margin-right: 25px; margin-left: 2px; font-weight:300}
.check-label input, .checkbox-group input {height: 17px;width: 17px;box-sizing: border-box;border: 2px solid #fff;outline: 1px solid #000;-webkit-appearance: none; margin-right: 15px; cursor: pointer; transition: 0.3s; padding: 0px;}
.check-label input:checked,.checkbox-group input:checked {background: #000;}

.checkbox-group {margin-bottom: 10px;}

.checkbox-label {user-select: none;}

.option-row .form-field {display: flex; align-items: center; margin-right: 20px; margin-bottom:0; position: relative; width: auto; }

.option-row .form-field::after {content: "";display: block;width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid #000;position: absolute;right: 10px;}

.option-row .form-field label {font-weight: 600; margin-right: 20px; margin-bottom:0}
.option-row .form-field select {background: #fff;outline: none;border: 1px solid #000;font-size: 15px;font-weight: 300;height: 45px;width: auto;padding: 0px;text-indent: 10px; text-overflow: ellipsis; padding-right: 30px;}
.option-row input[type="text"] {background: #fff;outline: none;border: 1px solid #000;font-size: 15px;font-weight: 300;height: 45px;width: 250px;padding: 0px;text-indent: 10px; box-sizing: border-box;}

.product-item {box-sizing: border-box; border: 1px solid #fff; transition: 0.5s; position: relative;}
.product-item a {text-decoration: none; color: #000;}
.product-item figure {background: #f7f7f7; padding: 20px;box-sizing: border-box;position: relative;transition: 0.5s; overflow: hidden;}
.product-item figure img {mix-blend-mode: multiply; position: relative; object-fit:contain}
.product-item figure .flex-row {position: absolute;bottom: 20px;width: 100%;left: 0px;padding: 0 20px;box-sizing: border-box; display:flex; flex-wrap:wrap; justify-content: space-between}
.product-item figure .flex-row .button-dark {padding: 8px 15px; opacity: 0; transition: 0.5s;}
.product-item article {position: relative; padding-top: 20px; box-sizing: border-box; border-top: 1px solid #fff; overflow: hidden; transition: 0.5s; min-height: 95px; padding-left: 15px}
.product-item article h2 {text-transform: uppercase; font-size: 15px; font-weight: 500; margin-bottom: 5px; display: block;}
.product-item article span {font-size: 15px; font-weight: 300; display: inline-block; margin-right: 5px;}
span.currency {margin-left: 3px;}

.product-item article .list-view-only .wishlist {display: none;}


.product-item figure .flex-row > div {width: 50%; display:flex; justify-content: flex-end; grid-gap: 10px;}

.product-item article .colour-row p {font-size: 15px; color: #717171; margin-right: 10px; margin-top: 5px;}
.product-item article .colour-row span {display: inline-block; margin: 0 2.5px; width: 10px; height: 10px; background: #000; position: relative; border-radius: 50%;}
.product-item article .colour-row span:nth-child(3) {background: #733a02;}
.product-item article .colour-row span:nth-child(4) {background: #325b68;}

.vmd-price {font-size: 14px; font-weight:700}
.product-item .buy-button {background:none; width: 30px; cursor: pointer;}

.product-item figure .flex-row .buy-button {opacity: 0; transition: 0.3s;}
.product-item figure .flex-row .buy-button.active {opacity: 1;}

.product-item figure .flex-row .buy-button img {width: 15px}

.price-row {position: relative; opacity: 0; bottom: -100px; transition: 0.3s; width: 100%; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
.price-row .button-dark {padding: 10px 20px; transition: 0.3s; border: 1px solid #011b23;}
.price-row .button-dark:hover {background: #ebebeb; color: #000;}
.price-row > div {display: flex; align-items: center;}
.price-row > div input {width: 20px;text-align: center;border: none;outline: none;font-weight: 500;font-size: 17px;}

.product-item:hover {border: 1px solid #000;}
.product-item:hover figure {background: #fff;}

.product-item:hover .price-row {bottom: 35px; opacity: 1;}
.product-item:hover figure .flex-row .buy-button {opacity: 1; background: #ebebeb; color: #000;}
.product-item:hover figure .flex-row .buy-button .text {color: #000;}

.product-item figure .flex-row .buy-button {opacity:1}

/* ROW */


.shop-main.row .product-item {width: 100%;margin-bottom: 0px;}
.shop-main.row .product-item .item-content {display: flex;}
.shop-main.row .product-item figure {height: 450px; width: 40%;}
.shop-main.row .product-item figure > img {height: 100%; width: 80%;}
.shop-main.row .product-item article {width: 60%; padding: 50px;}
.shop-main.row .product-item article h2 {font-size: 20px; margin-bottom: 20px}
.product-item .hover-details {display: none;}
.shop-main.row .product-item article > a > span {display: none;}
.shop-main.row .product-item .colour-row {margin-top: 5px;}
.shop-main.row .product-item .pMeas {display: inline-block !important; column-count: 2; border: 1px solid #000; padding: 25px; margin: 20px 0 10px; background: #f7f7f7; width:90%}
.shop-main.row .product-item .pSumm {display: block!important;}
.shop-main.row .product-item .pSumm p {line-height: 1.3; margin-bottom: 10px;}
.shop-main.row .product-item .pSumm p:last-child {margin-bottom: 0px;}


.shop-main.row .product-item figure .flex-row {max-width: 300px}

/* GRID */


.shop-main.grid .product-item {width: 100%;  margin-bottom: 0px;}
.shop-main.grid .product-item figure, .adidas .product-item figure {height: 340px}
.shop-main.grid .product-item .hover-details {position: absolute; bottom:5px; padding-bottom:15px; background: #fff; transition: 0.3s; box-sizing: border-box; padding-top: 15px; padding-left: 15px; width: 100%; z-index:999; border-top: 1px solid #222}
.shop-main.grid .product-item .hover-details p {font-size: 14px; font-weight: 300;  margin-top: 3px;}

.shop-main.grid .list-view .product-item:hover .hover-details {display:none}



.shop-main.grid .product-item:hover article {border-top: 1px solid #000;}
.shop-main.grid .product-item:hover .hover-details {display:none}

.model-wrapper {position: absolute; top: 15px; left: 20px; z-index: 9; display: flex; align-items: center;}
.model-wrapper p {padding: 10px;font-size: 13px;}

.status-message {display: inline-block; padding: 7px; box-sizing: border-box; color: #000; border: 1px solid #000; text-transform: uppercase; z-index: 9; font-size: 12px; background: #f7f7f7; font-weight: 300; margin-right: 10px; cursor: default;}

.stock-amount {font-size: 12px; padding-left: 10px;}

.back-order {background: #000; color: #fff;}
.quick-buy-btn {padding: 7px !important; font-size: 12px; letter-spacing:1px; margin: 0!important;}
.colour-row {display: flex; align-items: baseline;}
.colour-row .swatch {width: 10px;height: 10px; border-radius: 50%;margin: 0 2px;}
.brown {background: #733a02;}
.green {background: #325b68;}

.colour-selector .colour-row {margin-bottom: 25px;}
.colour-selector .colour-row .swatch {width: 20px; height: 20px;}

.button-dark.add-cart {padding: 15px 0; letter-spacing:1px;}

.product-item .wishlist {top: 20px; right: 20px;}

.wishlist {position: absolute;top: 0px;right: 0px;z-index: 9; width: 20px; height: 20px; cursor: pointer;}
.wishlist img {width: 100%; height: 100%; object-fit: contain; position: absolute;}
.wishlist img.listed,.wishlist img.unlisted {transition: 0.3s; opacity: 0;}
.wishlist img.listed.active,.wishlist img.unlisted.active {opacity: 1;}

#product-form .wishlist {position: relative;display: block;box-sizing: border-box;width: 20%;height: auto;top: 0;right: 0;max-width: 53px;background: #011b2300; transition: 0.3s; border-radius: 50%;}
#product-form .wishlist img {padding: 10px;box-sizing: border-box; transition: 0.5s; filter: invert(0);}

#product-form .wishlist:hover {background: #011b23; border-radius: 0;}
#product-form .wishlist:hover img {filter: invert(1);}

.swiper-button-next:after, .swiper-button-prev:after {font-size: 20px;}

.grey-container {padding: 25px; box-sizing: border-box; border: 1px solid #000; background: #f7f7f7; width: 100%;}
.grey-container h3 {font-weight: bold; margin-bottom: 5px; font-size: 17px;}
.grey-container p {margin-bottom: 15px;}
.grey-container input[type="text"] {background: #fff;outline: none;border: 1px solid #000;font-size: 16px;font-weight: 300;width: 55%;padding: 0px;text-indent: 10px; box-sizing: border-box;}
.grey-container .form-field {display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 15px;}

#systemMessageWrapper { display: none; padding: 10px; background-color: #32d59a; width: 100%; box-sizing: border-box; margin-top: 15px;}
#systemMessageWrapper p {font-size: 12px;color: #fff;line-height: 1.5;position: relative;padding-left: 20px; margin: 0;}
#systemMessageWrapper p::before {content: "";display: inline-block;background: url('/img/checkmark.webp');position: absolute;width: 15px;height: 15px;background-size: contain;background-repeat: no-repeat;left: 0px;top: 50%;transform: translateY(-50%);}

.file {display: none;}
.file-button {background: none;padding: 0px;outline: none; border-bottom: 1px solid #222; border-left:0; border-right:0; border-top:0;font-family: inherit;font-weight: 300;font-size: 16px; }

.sidebar {margin-bottom: 40px;}
.sidebar h3 {display: flex; justify-content: space-between; margin-bottom: 15px;}
.sidebar h3 a:nth-child(1) {font-size: 14px;}
.sidebar h3 a:nth-child(2) { color: #0005; font-size: 12px; transition: 0.3s;}
.sidebar h3 a:nth-child(2):hover { color: #000;}

.sidebar .check-label {justify-content: flex-end; margin-bottom: 10px;}

.heading {font-size: 20px; font-weight: 300; transition: 0.3s; user-select: none; border-top: 1px solid #0000;}
.heading a {width: 80%; padding: 10px 0; display: block; position: relative; font-size: 12px; letter-spacing:2px; text-transform:uppercase}
.heading a::before,.heading a::after {position: absolute; content: ""; display: block; top: 50%; transform: translateY(-50%); background: #000; transition: 0.3s; opacity: 1;}
.heading.drop-active a::before {transform: translateY(-50%) rotate(-90deg); opacity: 0;}
.heading.drop-active {border-top: 1px solid #000;}


.heading a::before {width: 1px; height: 11px; right: -45px;}
.heading a::after {width: 11px; height: 1px; right: -50px;}
.heading:last-of-type {}
.heading:last-of-type.drop-active {border-bottom: 1px solid #011b2300;}

.accordion-content {padding-bottom: 10px; position: relative;}
.accordion-content.active .unselectAllButton {-webkit-appearance: none; outline: none; border: none; position: absolute; top: -28px; right: 55px; font-weight: 600; font-family: Apercu, sans-serif; z-index: 1;}

.accordion-content .checkbox-label {font-weight:300; font-size: 13px; letter-spacing:1px;}

.slider-container { position: relative; width: 90%; height: 14px; margin: 45px 0; }
.slider-track { position: absolute; top: 50%; left: 13px; right: 15px; height: 14px; background: #ebebeb; border-radius: 10px; transform: translateY(-50%); }
.slider-range { position: absolute; top: 50%; left: 0; height: 10px; background: #000; border-radius: 14px; transform: translateY(-50%); }
.slider-thumb { position: absolute; top: 6px; width: 25px; height: 25px; background: #FFF; border-radius: 50%; cursor: pointer; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); transform: translateY(-50%); z-index: 2; }
.slider-value { position: absolute; top: -39px; width: 28px; height: 28px; background: #000; color: #fff; text-align: center; border-radius: 28px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; line-height: 28px; }
.slider-value::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 16px solid #000; border-radius: 16px; top: 19px; }

#filter-collection a {display:block; font-weight: 300; padding: 5px 0}

#codeInput {width: 100px;}

.category-container {display: grid;grid-template-columns: repeat(4, 1fr); grid-gap: 20px;}

.category-item {box-sizing: border-box;border: 1px solid #fff;transition: 0.5s;position: relative;margin-bottom: 25px;}
.category-item a {text-decoration: none; color: #000;}
.category-item figure {background: #f7f7f7; box-sizing: border-box; position: relative; transition: 0.5s; height: 0; padding-bottom: 100%;}
.category-item figure img {mix-blend-mode: multiply; position: absolute;}
.category-item .flex-row {position: relative; padding: 15px 0; box-sizing: border-box; border-top: 1px solid #fff; overflow: hidden; transition: 0.5s;}
.category-item .flex-row h3 {text-transform: uppercase; font-size: 14px; letter-spacing:1px; font-weight: 500; margin-bottom: 5px; display: block;}
.category-item .flex-row span {font-size: 14px; font-weight: 300; display: inline-block;}

.category-item .colour-row p {font-size: 15px; color: #717171; margin-right: 10px; margin-top: 5px;}
.category-item .colour-row span {display: inline-block; margin: 0 2.5px; width: 10px; height: 10px; background: #000; position: relative; border-radius: 50%;}
.category-item .colour-row span:nth-child(3) {background: #733a02;}
.category-item .colour-row span:nth-child(4) {background: #325b68;}

.category-item .flex-row .hover-details {display:none}
.category-item .flex-row .hover-details p,.category-item .hover-details span {font-size: 15px; font-weight: 400; text-transform: uppercase; margin-bottom: 5px;}

.category-item:hover {}
.category-item:hover figure {background: #fff; }
.category-item:hover .flex-row {}
.category-item:hover .flex-row .hover-details {top: 10%;}
.category-item:hover .price-row {bottom: 35px; opacity: 1;}

.collection-item {width: 32%;box-sizing: border-box;border: 1px solid #fff;transition: 0.5s;position: relative;margin-bottom: 25px;}
.collection-item figure {height: 190px;}
.collection-item img {width: 100%; height: 100%; object-fit: cover; transition: 0.5s;}
.collection-item article {padding: 10px 0; display: block; border-top: 1px solid #fff;transition: 0.5s; overflow: hidden; position: relative;}
.collection-item span {font-size: 18px; font-weight: 500; display: inline-block;}

.collection-item .hover-details {position: absolute; top: 125%; background: #fff; transition: 0.3s; box-sizing: border-box; padding-top: 10px;padding-left: 15px;height: 100%; width: 100%;}
.collection-item .hover-details span {font-size: 15px; font-weight: normal; text-transform: uppercase; margin-bottom: 5px;}

.collection-item:hover {border: 1px solid #000;}
.collection-item:hover article {border-top: 1px solid #000;}
.collection-item:hover .hover-details {top: 0;}

/*PRODUCT PAGE*/

.product-view-wrapper {padding: 50px 0;}

.product-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));grid-gap: 2%;margin: 30px 0; }
.product-view.product-grid {display:grid; grid-template-columns: 65% 30%; margin: 0 auto 50px; align-items: flex-start; width: 100%; max-width: 1500px; grid-gap: 5%;}
.product-images.product-grid {display:flex; justify-content: space-between; margin: 0; flex-wrap: wrap;}
.product-images figure.large {height: 700px;border-radius: 0px;border: none;width: 83%;box-sizing: border-box;overflow: hidden;position: relative;}
.product-images figure.large swiper-slide {background: #f0f0f0;}
.product-images figure.large .custom-navigation {position: absolute; bottom: 20px; width: auto; right: 20px;}
.product-images figure.large .swiper-button-prev::after {color: #000; position: relative; left: auto; right: auto; margin-right: 10px;}
.product-images figure.large .swiper-button-next {color: #000!important; position: relative; left: auto; right: auto;}
.product-images figure.thumb {width: 15%;}
.product-images figure.thumb img {position: relative;top: auto;margin-bottom: 5px;width: 90%;left: 50%;transform: translateX(-50%);object-fit: contain;}
.product-images figure img { width: 85%; position: absolute; top: 50%;left: 50%; transform: translate(-50%,-50%); mix-blend-mode: multiply; height: 85%; object-fit:contain}

.product-info h1 {font-size: 18px; font-weight: 500; margin-bottom: 15px; text-transform: capitalize}
.product-info h2 {font-size: 18px; font-weight: 700; margin-bottom: 25px;}

.product-description p {line-height: 1.4; margin-bottom: 15px; font-weight: 300; font-size: 15px;}
.product-description {margin-bottom: 20px;}

.sold-out {display: none;}

.custom-options p {margin-bottom: 10px; display: inline-block;}

#openModal {position: relative; box-sizing: border-box; padding: 15px 20px; background: #011b23; transition: 0.5s; margin-left: 0px; margin-top: 30px; user-select: none; cursor: pointer; color: #fff; border: 0; outline: 0; font-family: inherit; font-size: 15px; line-height: 22px;}
#openModal:hover {background: #f0f0f0; color: #000;}

#enquiry-1 {max-width: 600px;}
#enquiry-1 .modal__content {position: relative; z-index: 1; background: #fff; padding: 50px;}
#enquiry-1 form {margin: 0;}

#enquiryMessage {display: block; margin-bottom: 30px; font-weight: 500; text-align: center;}

.modal::after {content: ''; background: #0008; width: 101vw; height: 101vh; z-index: -1; position: absolute; transform: translate(-50%, -50%); left: 150%; top: 50%; transition: 0.6s;}
.modal.show::after {transform: translate(-50%, -50%); left: 50%;}

.modal .form-input label {margin-bottom: 10px; display: block; font-weight: 400; font-size: 14px;}
.modal .form-field .check-label {display: flex; margin: 20px 0; justify-content: flex-end;}


.features {margin-top: 30px;}
.features h3 {font-size: 15px; font-weight: 400; margin-bottom: 10px; text-transform:uppercase; letter-spacing:1px}
.features p {font-size: 15px; display: block; margin-bottom: 10px; line-height:1.5}

.summary-info .label, .modal__content .label {background:#eee; display: inline-block; padding: 7px; text-transform:uppercase; margin-bottom: 20px; letter-spacing:1px; font-size: 14px;}

.desktop-details, .mobile-details {width: 100%; margin-top: 50px;}
.desktop-details h2, .mobile-details h2 {font-size: 17px; font-weight: 500; line-height: 1;margin-bottom: 10px; }
.desktop-details > span, .mobile-details > span {font-size: 13px; color: #0005; margin-bottom: 10px; display: inline-block;}
.desktop-details p, .mobile-details p {margin-bottom: 15px; line-height: 1.5; max-width: 90%}
.desktop-details h3, .mobile-details h3 {font-size: 17px; font-weight: 500; margin-bottom: 10px;}
.desktop-details ul, .mobile-details ul {margin: 0; list-style: none;}
.desktop-details li, .mobile-details li {font-size: 15px; margin-bottom: 10px; font-weight: lighter; line-height: 1.3;}
.desktop-details li:last-child, .mobile-details li:last-child {margin-bottom: 0px;}

.custom-dropdown { position: relative; display: inline-block; width: auto; flex-grow: 1; margin-top: 10px;}


.selected-item { padding: 15px 20px 17px; background-color: #f0f0f0; cursor: pointer; transition: 0.5s; line-height: 20px; position: relative; }
.selected-item span {display: none;}
.selected-item:hover {background: #011b23; color: #fff;}

.selected-item::after {content: ""; display: block; background: url('/img/arrow-down.svg'); position: absolute; top: 50%; transform: translateY(-50%);width: 13px;height: 8px;background-size: contain;background-repeat: no-repeat;right: 15px; transition: 0.3s; opacity: 1; filter: invert(1); left: auto;}
.selected-item:hover::after {filter: invert(0);}

.dropdown-items { display: none; position: absolute; width:99.5%; z-index:9999; background-color: #ffffff; border: 1px solid #cccccc; left:0px}
.dropdown-item { padding: 10px; cursor: pointer; border-bottom: 1px solid #ccc; display: flex;justify-content: space-between; align-items: center;}
.dropdown-item span {font-size: 13px; color: #0005}
.dropdown-item:last-child {border-bottom: none;}

.dropdown-item:hover { background-color: #f0f0f0;}

.size-guide {position: relative;box-sizing: border-box;padding: 15px 20px;background-color: #f0f0f0; transition: 0.5s; margin-left: 0px; margin-top: 30px; width: 150px; user-select: none; cursor: pointer;}
.size-guide > span {position: relative; font-size: 15px; line-height: 22px; transition: 0.5s;}
.size-guide > span::before {content: "";display: inline-block;position: relative;width: 21px;height: 15px;background: url('/img/size-guide.svg');background-size: cover;margin-right: 15px; filter: invert(0); transition: 0.5s;}

.size-guide:hover {background: #011b23;}
.size-guide:hover > span {color: #fff;}
.size-guide:hover > span::before {filter: invert(1);}

.size-pop article {width: 50%; margin: 0 auto; background: #fff; padding: 50px; max-width: 95%; position: relative;}
.size-pop article p {width: 100%; display: flex; justify-content: space-between; margin-bottom: 5px;}
.size-pop article p:last-child {margin-bottom: 0px;}
.size-pop article .flex-row > div {width: 47%; position: relative; box-sizing: border-box;}
.size-pop article .flex-row > div:nth-child(2) {padding: 30px;}
.size-pop article .flex-row > div h3 {font-size: 17px; font-weight: 500; line-height: 1; margin-bottom: 15px;}

.size-pop article .flex-row > .diagram span {position: absolute;}
.size-pop article .flex-row > .diagram span:nth-child(1) {top: 108px; left: 10px;}
.size-pop article .flex-row > .diagram span:nth-child(2) {left: 165px; top: 85px;}
.size-pop article .flex-row > .diagram span:nth-child(3) {bottom: 20px; left: 167px;}

.shop-main.grid .product-item:first-child .top-seller {}


.size-guide .size-pop {position: fixed; opacity: 0; transition: 0.5s; width: 75%;transform: translate(-50%, -50%); left: 150%; top: 50%; z-index: -999;}
.size-guide .size-pop::after {content: ''; background: #000; width: 101vw; height: 101vh; z-index: -1; position: absolute; transform: translate(-50%, -50%); left: 150%; top: 50%; transition: 0.6s; opacity: 0.8;}
.size-guide.active {cursor: default;}
.size-guide.active .size-pop img {width: 275px; margin: 0 auto;}
.size-guide.active .size-pop {opacity: 1; z-index: 9999;  transform: translate(-50%, -50%); left: 50%;}
.size-guide.active .size-pop::after {transform: translate(-50%, -50%); left: 50%;}

.product-info {position: sticky; top: 150px; z-index: 99;}

.similar-items {margin-bottom: 50px;}
.similar-items > article {display: flex; justify-content: space-between; margin-bottom: 15px;}
.similar-items h3 {font-size: 14px; font-weight: 600; margin-bottom: 10px; text-transform:uppercase; letter-spacing:1px;}

.similar-items .category-item article h2 {font-size: 14px;}
.similar-items .category-item a article > span {font-size: 12px;}
.similar-items .category-item figure {display:flex; justify-content:center}
.similar-items .category-item figure img {object-fit:contain; max-width:90%; margin:0 auto}

.similar-items .quick-buy-btn {position:absolute; left:0; top:0}

.colour-selector .highlight-message, .highlight-message p {text-align: center;padding: 10px;margin-bottom: 15px;color: #61161f !important;background-color: #fdd !important;border: 1px solid #f1b7bf;}

h2.no-product {font-size: 14px; font-weight:300; margin-top: 40px; text-align:left}

.view-select {display: flex;align-items: center;margin-bottom: 15px; margin-left: 5px}
.view-select img {width: 22px; margin-left: 10px; cursor: pointer;}

.desktop-details {display: block;}
.mobile-details {display: none;}

.buy-button { align-items: center; background: #011b23; border-radius: 0px; display: flex; height: 30px; justify-content: center; position: relative; width: 60px; transition: 0.5s;}
.buy-button:hover {background: #ebebeb; color: #000;}
.text { color: #fff; position: absolute; transition: opacity 300ms; user-select: none; -moz-user-select: none; transition: 0.5s;}
.buy-button:hover .text {color: #000;}
.ok { opacity: 0;}

.active.buy-button { animation: 3s Container; background: #2dd284!important;border-radius: 50%;}
.active .text { opacity: 0; animation: 3s Text forwards;}
.active .ok { opacity: 1; animation: 1s Ok forwards;}


@keyframes Container {
  0% { width: 60px }
  6% { width: 30px; border-radius: 50%;}
  71% { transform: scale(1); }
  75% { transform: scale(1); }
  77% { transform: scale(1); }

  94% { width: 30px }
  100% { width: 30px }
}
@keyframes Text {
  0% { opacity: 1; transform: scale(1); }
  6% { opacity: 0; transform: scale(0.5); }

  94% { opacity: 0; transform: scale(0.5); }
}
@keyframes Ok {
  0% { opacity: 0 }
  70% { opacity: 0; transform: scale(0); }
  75% { opacity: 1; transform: scale(1.1); }
  77% { opacity: 1; transform: scale(1); }
  92% { opacity: 1; transform: scale(1); }
  96% { opacity: 1; transform: scale(1);  }
  100% { opacity: 1; transform: scale(1); }
}