.section--cart {padding: 5vw 0; font-family: 'Montserrat';}
.section--cart #systemMessage {width: 100%; padding: 0; border: 0!important;}
.section--cart #systemMessage p {width: 100%; margin: 0; display: block; margin-bottom: 80px; margin-top: -40px; background: #FFF0E5; color: #F47B21; border: 1px solid #F47B21!important; border-radius: 5px; padding: 20px 20px 20px 55px; box-sizing: border-box; position: relative; font-size: 13px; font-weight: 600;}
.section--cart #systemMessage p::before {content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 20px; width: 18px; height: 18px; background: url('/img/warning-white.svg') no-repeat center/contain;}


.section--cart #systemMessage.loggedin p::before {display:none}

.empty-cart {}
.empty-cart p { font-family: 'Montserrat'; font-size: 20px;}

.button {border-radius: 5px; padding: 20px;}
.button.disabled {pointer-events: none; background: #fff; border: 1px solid #D1D1D1; color: #D1D1D1;}

#show-cart.disabled {
  display: none !important;
}

#show-cart {margin-top: 10px; background: #212529;}

form {padding: 0!important;}

a.text-link {color: #F47A21; font-size: 16px; font-weight: 500; padding-bottom: 5px; border-bottom: 1px solid #F47A21; font-family: 'Montserrat'; transition: 0.4s ease;}
a.text-link:hover {color: #212529; border-bottom: 1px solid #212529;}

.cart-wrapper {display: grid; grid-template-columns: 1fr 460px; grid-gap: 60px; align-items: flex-start;}
.cart-wrapper h3 {font-size: 30px; font-weight: 600; color: #232B34; margin-bottom: 20px;}

.payment-wrapper {margin-top: 40px;}

.cart-progress {display: flex; font-family: 'Montserrat'; font-weight: 600; gap: 30px;}
.cart-progress span {font-size: 20px; opacity: 0.3; padding-right: 30px; position: relative; margin-bottom: 100px; display: block; cursor: pointer; transition: 0.4s;}
.cart-progress span::before {content: ''; display: block; position: absolute; right: 0; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid #000; border-radius: 50vw; top: 50%; transform: translateY(-50%);}
.cart-progress span::after {content: ''; display: block; position: absolute; background: #000; width: 8px; height: 8px; mask-image:url('/img/cart-arrow.svg'); mask-position: center; mask-size:contain; mask-repeat:no-repeat; top: 50%; transform: translateY(-50%); right: 6px;}
.cart-progress span:hover {opacity: 1;}
.cart-progress #step-one-heading span {font-size: 30px; opacity: 1;}
.cart-progress #step-one-heading span::before, .cart-progress #step-one-heading span::after {display: none;}
.cart-progress .active span {opacity: 1;}

.cart-progress .completed span {opacity: 1; color: #F47A21}
.cart-progress .completed span::before {border: 1.5px solid #F47A21; }
.cart-progress .completed span::after {background: #F47A21; mask-image:url('/img/cart-tick.svg');}

.cart-title {display: grid; grid-template-columns: 400px 2fr 1fr 1fr; grid-gap: 60px; padding-bottom: 10px; border-bottom: 1px solid #E0E0E0; margin-bottom: 30px; }
.cart-title span {font-size: 12px; font-family: 'Montserrat'; font-weight: 600; text-transform: uppercase; color: #232B3470}
.cart-title span:nth-child(3), .cart-title span:nth-child(4) {text-align: right;}

.cart-item {display: grid; grid-template-columns: 400px 2fr 1fr 1fr; grid-gap: 60px; font-family: 'Montserrat'; font-weight: 500; align-items: flex-start; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #E0E0E0;}
.cart-item .grid {display: grid; grid-template-columns: 108px 1fr; grid-gap: 60px; align-items: center;}
.cart-item .grid figure {position: relative; border: 1px solid #A7AEB5; box-sizing: border-box; width: 100%; height: 0; padding-bottom: 100%; border-radius: 5px; overflow: hidden; margin: 0;}
.cart-item .grid figure img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 95%; height: 95%; object-fit: contain;}
.cart-item .product-name {font-size: 20px; font-weight: 600; margin-bottom: 10px; line-height: 1.2;}
.cart-item .code {color: #A7AEB5; font-size: 14px; margin-bottom: 10px;}
.cart-item .price {font-size: 17px; text-align: right;}
.cart-item .price small {display: none; font-size: 12px; font-family: 'Montserrat'; font-weight: 600; text-transform: uppercase; color: #232B3470;}
.cart-item article a {color: #F47A21; font-size: 14px; transition: 0.4s;}
.cart-item article a:hover {color: #212529;}

.cart-item .quantity {display: flex; border: 1px solid #A7AEB5; align-items: flex-start; justify-content: flex-start; width: 90px; border-radius: 5px;}
.cart-item .quantity-button.quantity-up, .cart-item .quantity-button.quantity-down {height: 30px; width: 30px; box-sizing: border-box; border: 0; position: relative; transform: none; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: 600; color: #232B34; bottom: auto;}
.cart-item .quantity input {width: 30px; padding: 0; height: 30px; border: 0; text-align: center; border-left: 1px solid #A7AEB5; border-right: 1px solid #A7AEB5; box-sizing: border-box; font-size: 14px; font-weight: 500;}

#step-two, #step-three {margin-top: -55px;}

.checkout-select {box-sizing: border-box; padding: 25px 30px; border: 1px solid #D1D1D1; border-radius: 20px; transition: 0.4s ease; cursor: pointer;}
.checkout-select:first-child {border-radius: 20px 20px 0 0;}
.checkout-select:nth-child(2) {border-radius: 0 0 20px 20px; border-top: 0;}
.checkout-select:only-child {border-radius: 20px;}

#manual_address > div {width: 100%;}

.form-field {position: relative;}
input[type="password"] { font-size: 0px; text-security: disc;  -webkit-text-security: disc;}
.form-field.email::after, .form-field.phone::after, .form-field.name::after, .form-field.address::after, #special_delivery_container::after, #special_notes_container::after {content: ''; display: block; position: absolute; right: 20px; bottom: 20px; width: 20px; height: 20px; background: #A7AEB5; mask-size:contain; mask-repeat: no-repeat; mask-position: center; transition: 0.4s;}
.form-field.password .toggle {display: block; position: absolute; right: 20px; bottom: 20px; width: 20px; height: 20px; background: #A7AEB5; mask-size:contain; mask-repeat: no-repeat; transition: 0.4s; mask-image:url('/img/password-icon.svg');}
.form-field.password.open .toggle {mask-image:url('/img/password-open-icon.svg'); background: #f47b20;}

#special_notes_container, #special_delivery_container {position: relative;}

.form-field.email::after {mask-image:url('/img/email-icon.svg');}
.form-field.phone::after {mask-image:url('/img/phone-icon.svg');}
.form-field.name::after {mask-image:url('/img/account-icon.svg');}
.form-field.address::after {mask-image:url('/img/address-icon.svg');}
#special_delivery_container::after {mask-image:url('/img/instructions-icon.svg'); top: 45px;}
#special_notes_container::after {mask-image:url('/img/notes-icon.svg'); top: 45px;}

.checkout-select .grid {margin: 20px 0 10px; display: grid; grid-template-columns: 1fr 1fr; grid-gap:20px 25px;}
.checkout-select .grid input, .checkout-select .grid select {margin: 0; font-size: 15px; line-height: 20px; padding: 20px 15px; text-indent: 0; box-sizing: border-box; border: 1px solid #A7AEB5; border-radius: 5px; width: 100%; transition: 0.4s;}
.checkout-select .grid .active-focus input, .checkout-select .grid .active-focus textarea {border: 1px solid #f47b20;}
.checkout-select .grid .active-focus::after, .form-field.password.active-focus .toggle {background: #f47b20!important;}
.checkout-select .grid textarea {font-size: 15px; border: 1px solid #A7AEB5; border-radius: 5px; margin: 0; height: 140px; padding: 15px 35px 15px 15px; box-sizing: border-box; resize: none; text-indent: 0;}
.checkout-select .grid label {font-size: 13px; font-weight: 500;}
.checkout-select .grid > div:only-child {grid-column: span 2;}
.checkout-select .grid .button {grid-column: span 2; text-align: center; width: 100%; border-radius: 5px; border: 0;}
.checkout-select .title {font-size: 20px; font-family: 'Montserrat'; font-weight: 600; margin: 0; position: relative; padding-left: 40px;}
.checkout-select .title::before {content: ''; display: block; position: absolute; left: 0; width: 24px; height: 24px; box-sizing: border-box; border: 1px solid #F47B21; border-radius: 50vw; top: 50%; transform: translateY(-50%); background: #fff;}
.checkout-select .title::after {content: ''; display: block; position: absolute; background: #fff; width: 10px; height: 10px;top: 50%; transform: translateY(-50%); left: 7px; border-radius: 50vw;}
.checkout-select .forgot {color: #A7AEB5; font-style: italic; border: 0; transition: 0.4s;}
.checkout-select .forgot:hover {color: #212529;}

.highlight-field input {border: 1px solid #f47b20;}
.highlight-field::before {content: ''; display: block; position: absolute; right: 0; top: 0px; width: 20px; height: 20px; background:url('/img/warning-orange.svg') no-repeat center/contain; transition: 0.4s;}

.highlight-form-field {background: #ffe3d9;}

.checkout-select .container {padding: 0!important; margin: 0;}

.collect-box {margin-top: 20px; border: 1px solid #F47B21; background: #FFEEE2; padding: 20px; border-radius: 5px; width: 570px;}
.collect-box p {color: #212529;}

.checkout-select .cart-bx {display: none;}
.checkout-select .grid, .checkout-select .grid + .forgot {display: none;}

.checkout-select:hover {background: #FAFAFA;}

.checkout-select.active {border: 1px solid #F47B21; background: #FFEEE2;}
.checkout-select.active .title::after {background: #F47B21;}
.checkout-select.active .cart-bx {display: block;}
.checkout-select.active .grid {display: grid;}
.checkout-select.active .grid + .forgot {display: inline-block;}

.checkout-select.click-collect .title::before,.checkout-select.click-collect .title::after {display: none;}
.checkout-select.click-collect input {content: ''; display: block; position: absolute; left: 0; width: 24px; height: 24px; box-sizing: border-box; border: 1px solid #F47B21; border-radius: 50vw; top: 50%; transform: translateY(-50%); background: #fff; opacity: 1; -webkit-appearance:none;}
.checkout-select.click-collect .checked {display: block; position: absolute; background: #fff; width: 10px; height: 10px;top: 50%; transform: translateY(-50%); left: 7px; border-radius: 50vw;}

.checkout-select.click-collect input:checked + .checked {background: #F47B21;}

.checkout-select + .checkout-select.active {margin-top: -1px;}

#containerCustomerNumber {position: relative;}
#containerCustomerNumber > div {position: absolute; top: calc(100% + 15px); right: 0; width: 100%; justify-content: flex-end; display: flex; align-items: center; gap: 15px;}
#containerCustomerNumber > div input {width: 20px; height: 20px; border-radius: 5px; border: 1px solid #232B34; background: none; -webkit-appearance: none; padding: 0; left: 0;}
#containerCustomerNumber > div label {font-family: 'Montserrat'; font-size: 13px; font-weight: 600; color: #232B34; margin: 0; width: auto; padding-left: 30px!important}

#containerCustomerNumber .checkmark {left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 5px; border: 1px solid #232B34; background: #232B3400; transition: 0.4s ease;}
#containerCustomerNumber .checkmark::after {color: #fff!important;}
#containerCustomerNumber input:checked ~ .checkmark {background: #232B34;}
#containerCustomerNumber .checkmark::after {margin-left: 2px; font-size: 13px;}

#business-customer {position: relative;}
#business-customer > a {position: absolute; right: 35px; top: 30px; display: block; font-weight:600; color: #f47b20; border-bottom: 1px solid #f47b20; font-family: 'Montserrat'; font-size: 13px; transition: 0.4s ease;}
#business-customer > a:hover {color: #232B34; border-bottom: 1px solid #232B34}
/* #business-customer.active > a {display: block;} */

#password_container {margin-bottom: 86px;}

#business-customer .title {display: inline-block; position: relative; padding-right: 20px;}

.custom-tooltip {position: absolute; top: 50%; transform: translateY(-50%); left: 100%; display: grid; align-items: center; grid-gap: 10px; grid-template-columns: 20px 1fr; z-index: 1;}
.custom-tooltip img {width: 20px; height: 20px; display: block;}
.custom-tooltip span {font-size: 13px; font-weight: 500; font-family: 'Montserrat'; display: inline-block; box-sizing: border-box; width: 250px; padding: 10px 20px 10px 30px; position: relative; background: url('/img/tooltip-background.svg') no-repeat center/contain; display: none;}
.custom-tooltip span strong {font-weight: 700;}

.custom-tooltip:hover span {display: block;}

.details-wrapper {margin-bottom: 30px;}
.details-wrapper .news-yes {margin-bottom: -65px;}

.delivery-wrapper h3 {margin-bottom: 25px;}

.delivery-wrapper .checkout-select {position: relative;}
.delivery-wrapper .checkout-select.active {background: #FAFAFA; border: 1px solid #D1D1D1}

.delivery-wrapper .checkout-select::after, #click_collect_container::after {content: ''; display: block; position: absolute; right: 30px; top: 30px; width: 22px; height: 20px; background: #f47b20; mask-image:url('/img/delivery-icon.svg'); mask-size:contain; mask-repeat: no-repeat; mask-position: center; transition: 0.4s;}

#click_collect_container::after {mask-image:url('/img/collect-icon.svg');}

#containerShipping {grid-column: span 2;}

.news-yes {margin: 30px 0; display: flex; justify-content: flex-end;}
.news-yes .button {display: inline-block; text-transform: none; padding: 20px 50px 20px 25px!important; border-radius: 5px; position: relative; max-width: none; width: auto; margin: 0; transition: 0.4s ease;}
.news-yes .button #create_account {width: 20px; height: 20px; border-radius: 5px; border: 1px solid #fff; background: none; -webkit-appearance: none; padding: 0; position: absolute; right: 17px; top: 50%; transform: translateY(-50%);}

.news-yes .button .checkmark {right: 17px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 5px; border: 1px solid #fff!important; background: #fff0; left: auto;}
.news-yes .button input:checked ~ .checkmark {}
.news-yes .button.container .checkmark::after {margin-left: 2px; font-size: 13px;}

.news-yes .button:hover {background: #232B34;}

.news-yes .container .checkmark {border-radius: 5px; border: 1px solid #232B34;}
.news-yes .container .checkmark::after {color: #fff!important;}
.news-yes .container input:checked ~ .checkmark {background: #232B34;}
.news-yes .container .checkmark::after {line-height: 19px; font-size: 13px;}

.news-yes.terms {display: block;}
.news-yes.terms label {margin-bottom: 15px; font-weight: 500;}
.news-yes.terms label:last-child {margin-bottom: 0;}
.news-yes.terms label span {border-bottom: 1px solid #232B34; padding-bottom: 3px; transition: 0.4s;}
.news-yes.terms label span a {transition: 0.4s;}
.news-yes.terms label span:hover a {color: #f47b20}
.news-yes.terms label span:hover {border-bottom: 1px solid #f47b20;}
.news-yes.terms .container .checkmark {border: 1px solid #D1D1D1}
.news-yes .container input:checked ~ .checkmark {border: 1px solid #232B34;}

.cart-footer {margin-top: 30px; padding-top: 30px; border-top: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: flex-start;}

.checkout-right {box-sizing: border-box; border: 1px solid #D1D1D1; border-radius: 20px; padding: 20px; font-family: 'Montserrat';}
.checkout-right h4 {font-family: 'Montserrat'; font-weight: 600; text-transform: capitalize; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #D1D1D1;}
.checkout-right p {margin: 0; }
.checkout-right .flex-row {margin-bottom: 10px;}
.checkout-right .total {font-size: 20px; font-weight: 700; margin-top: 20px; padding-top: 15px; border-top: 1px solid #D1D1D1; color: #232B34;}
.checkout-right > span {margin: 50px auto 25px; font-size: 16px; display: block; text-align: center; font-weight: 300;}
.checkout-right .button {width: 100%; text-align: center; border-radius: 5px; transition: 0.4s ease; cursor: pointer; margin: 0;}
.checkout-right .button:hover {color: #fff; background: #212529}


@media screen and (max-width: 1300px) {

  .cart-wrapper {grid-template-columns: 1fr 350px; grid-gap: 30px;}

  .cart-item, .cart-title {grid-template-columns: 350px 1fr 1fr 1fr; grid-gap: 30px;}

  .cart-item .grid {grid-gap: 20px;}

  .cart-item .product-name {font-size: 16px; margin-bottom: 10px;}
  .cart-item .code {margin-bottom: 5px;}

  .cart-progress #step-one-heading span {font-size: 25px; margin-bottom: 60px;}

  .cart-wrapper h3 {font-size: 25px;}

  #step-two, #step-three { margin-top: -50px;}

  .checkout-right h4 {font-size: 20px;}
  .checkout-right .text-right, .checkout-right p {font-size: 16px;}
  .checkout-right > span {margin: 20px auto 25px; font-size: 14px;}
  .checkout-right .button {padding: 15px 10px; font-size: 12px;}

}
@media screen and (max-width: 1100px) {
  .cart-item, .cart-title  {grid-template-columns: 250px 1fr 1fr 1fr;}

  .cart-item {margin-bottom: 20px; padding-bottom: 20px;}

  .checkout-select {padding: 20px;}
  .checkout-select:first-child { border-radius: 15px 15px 0 0;}
  .checkout-select:nth-child(2) {border-radius: 0 0 15px 15px;}
  .checkout-select .title {font-size: 16px;}

  #business-customer > a {top: 20px;}

  .cart-title span {font-size: 10px;}
  .cart-item .price {font-size: 15px;}

  .checkout-right {border-radius: 15px; padding: 15px;}
  .checkout-right h4 {font-size: 18px; margin-bottom: 15px;}
  .checkout-right .total {margin-top: 15px;}

  .checkout-select .grid input, .checkout-select .grid select {line-height: 23px; padding: 15px 10px;}
  .form-field.email::after, .form-field.phone::after, .form-field.name::after, .form-field.address::after, #special_delivery_container::after, #special_notes_container::after, .form-field.password .toggle {right: 15px; bottom: 20px; width: 15px; height: 15px;}

  .checkout-select .grid textarea {padding: 10px 35px 15px 10px;}

  #special_delivery_container::after, #special_notes_container::after {top: 40px;}

  .delivery-wrapper .checkout-select::after, #click_collect_container::after {right: 20px; top: 25px; width: 20px; height: 18px;}

  .checkout-right .text-right, .checkout-right p { font-size: 14px; }

  .cart-wrapper {grid-template-columns: 1fr 300px;}

  a.text-link {font-size: 14px;}

  .cart-item .grid {grid-template-columns: 90px 1fr;}
  .collect-box p {font-size: 14px;}

  .news-yes .button {font-size: 14px;}
  .news-yes.terms label {font-size: 12px}


}
@media screen and (max-width: 900px) {
  .cart-wrapper { grid-template-columns: 1fr; }
}
@media screen and (max-width: 600px) {

  #step-two, #step-three {margin: 0 0 30px;}

  .cart-progress #step-one-heading span { font-size: 20px; margin-bottom: 20px; }

  #step-two-heading, #step-three-heading, #step-four-heading {display: none!important;}

  .checkout-select .grid {grid-template-columns: 1fr; grid-gap: 15px;}
  .checkout-select .grid .button {grid-column: span 1;}

  #business-customer > a {top: auto; right: auto; position: relative; margin: 20px 0 0; display: none;}
  #business-customer.active > a {display: inline-block;}

  .cart-item .grid {grid-column: span 2;}

  .checkout-select.active .grid + .forgot {padding: 4px 0 0;}

  .cart-title {display: none;}

  .cart-item {grid-template-columns: 1fr;}
  .cart-item .price small {display: block;}
  .cart-item .price:last-child {grid-column: span 2;}

  .collect-box {width: 100%;}

  #containerCustomerNumber > div {position: relative; top: auto; margin-top: 15px;}

  #containerShipping {grid-column: span 1;}

  .cart-footer {flex-direction: column; gap: 25px;}
}