.inner-banner.shop {padding: 10vw 0;}

.inner-banner.products {padding: 12vw 0 5vw; z-index: 1; background: none;}
.inner-banner.products .wrapper {max-width: 1330px; position: relative; min-height: 40dvh;}
.inner-banner.products .product-category {position: relative; padding-left: 60px; text-transform: capitalize; font-size: 18px; font-weight: 500; color: #24053A; margin-bottom: 40px;}
.inner-banner.products .product-category::before {content: ""; display: block; position: absolute; left: 15px; width: 30px; height: 30px; background: #24053A; top: 50%; transform: translateY(-50%); mask-repeat: no-repeat; mask-size: contain; mask-position: center;}
.inner-banner.products .product-title {font-size: 4vw; line-height: 4.2vw;}
.inner-banner.products .product-intro p {font-size: 1.5vw; line-height: 2vw; max-width: 555px; margin-bottom: 30px;}
.inner-banner.products article {max-width: 750px;}
.inner-banner.products > figure {position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: -1;}
.inner-banner.products > figure img {border-radius: 0px; }
.inner-banner.products .button-row {display: flex; align-items: center;}
.inner-banner.products .button-row p {font-size: 14px; padding: 0 10px; position: relative; display: inline-block; font-weight: 500;}
.inner-banner.products .button-row p::after {content: ""; display: block; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; background: #000; border-radius: 50vw;}
.inner-banner.products .button-row p:last-child::after {display: none;}
.inner-banner.products .button-row .button.small {margin-right: 10px;}

.info-bar {position: relative; margin: 100px auto -150px; width: 100%; max-width: 1330px; display: grid; grid-template-columns: auto auto auto auto; align-items: center; box-sizing: border-box; padding: 50px 40px; background: #F5F1ED; border-radius: var(--top-left-small);}
.info-content {display: grid; grid-template-columns: 55px auto; grid-gap: 15px;  align-items: center;}
.info-content article p {font-size: 14px; line-height: 1; font-weight: 400; display: block;}
.info-content article p strong {font-size: 20px; font-weight: 500; font-family: 'RB-Rational-Neue-Mix-Test'; display: block; margin-top: 10px;}

.course-content.intro {padding: 10vw 0 0;}
.course-content.decoration {position: relative;}
.course-content .wrapper {max-width: 1250px;}

.course-content .grid {align-items: flex-start;}
.course-content .grid article:last-child {max-width: 457px; margin: 0 auto;}

.course-content .grid-right {display: grid; grid-template-columns: 1fr 290px; grid-gap: 120px; align-items: center;}

.course-content article {max-width: 586px;}
.course-content h3 {font-size: 27px; font-weight: 500; font-family: 'RB-Rational-Neue-Mix-Test'; display: block; margin-bottom: 30px;}
.course-content p, .course-content li {font-size: 18px; font-weight: 300; line-height: 30px;}
.course-content p a, .course-content li a {color: #ff735c;}
.course-content li {margin-bottom: 15px; position: relative; box-sizing: border-box; padding-left: 30px;}
.course-content li::before {content: ""; display: block; position: absolute; top: 10px; left: 0px; width: 10px; height: 10px; background: var(--orange); border-radius: 50vw;}
.course-content li:last-child {margin-bottom: 0px;}
.course-content ul {margin: 0; list-style: none;}

.course-content.decoration {position: relative; padding: 4vw 0;}
.course-content.decoration::after {content: "";background: url('/img/decoration-4.svg') right no-repeat;background-size: contain;position: absolute;top:52%; transform: translateY(-50%);right: 0px;width: 276px;height: 448px;z-index: -1;}

.advertisement {}
.advertisement p {font-size: 9px!important; font-weight: 500; color: #E5E5E5; text-transform: uppercase;}

.ad-container {position: relative;}
.ad-container figure {border-radius: 0px 40px 40px 40px; overflow: hidden; position: relative;}
.ad-container article {position: absolute; width: 100%; box-sizing: border-box; color: #fff; padding: 30px; top: 0px; left: 0px;}
.ad-container article h3 {font-size: 29px; line-height: 38px;}
.ad-container .button-outline {position: absolute; bottom: 75px; width: 157px; padding: 15px 0; font-size: 19px; color: #fff; text-align: center; left: 50%; transform: translateX(-50%);}
.ad-container .tags {position: absolute; bottom: 20px; right: 25px;}
.ad-container .tags span {color: #fff; padding: 5px 15px; background: #24053A50; display: inline-block; margin-left: 5px; border-radius: 50vw; font-size: 13px;}

.course-stage {position: relative; padding: 40px; box-sizing: border-box; border: 1px solid #E5E5E5; border-top: 0; background: #fff;}
.course-stage:first-child {border-top: 1px solid #E5E5E5; border-radius: 30px 30px 0 0;}
.course-stage:last-child {border-radius: 0 0 30px 30px}
.course-stage p {font-size: 18px; line-height: 29px;}
.course-stage p strong {font-weight: bold; font-size: 24px;}
.pill {background: var(--orange); font-weight: 500; color: #fff; font-size: 9px; text-transform: uppercase; position: absolute; top: 30px; right: 30px; padding: 5px 12px; border-radius: 50vw; line-height: 10px;}

.course-highlight {position: relative; background: #24053A; border-radius: 30px; box-sizing: border-box; padding: 90px 85px; margin-bottom: 4vw; overflow: hidden;}
.course-highlight h3 {font-size: 56px; line-height: 70px; max-width: 700px; color: #fff; width: 100%; margin-bottom: 80px; position: relative; z-index: 1;}
.course-highlight article {position: absolute; bottom: 70px; right: 80px; max-width: 478px; width: 100%; display: flex; justify-content: space-between; align-items: center; z-index: 1;}
.course-highlight article p {display: inline-block; color: #fff; font-size: 20px; line-height: 30px; font-weight: 300; max-width: 257px;}
.course-highlight .button {padding: 43px 38px; line-height: 24px;}
.course-highlight::after {content: ""; display: block; position: absolute; top: 0px; right: 0px; height: 400px; background: url('/img/decoration-5.svg'); background-size: contain; background-repeat: no-repeat; width: 426px;}


.product-container {margin: -5vw 0; padding: 2vw 0 10vw; position: relative; border-radius: 40px 40px 0 0; background: #fff;}

.category-navigation {display: flex; justify-content: center; align-items: center; padding-bottom: 4vw; position: relative;}
.category-navigation .navigation, .category-navigation p {margin-right: 10px; font-size: 18px; display: inline-block;}
.category-navigation .navigation {position: relative; padding: 20px 30px 20px 55px; background: #F5F1ED00; box-sizing: border-box; border: 1px solid #F5F1ED00; border-radius: 50vw; transition: 0.5s; cursor: pointer;}
.category-navigation .navigation.active {background: var(--orange);}
.category-navigation .navigation:hover {background: #F5F1ED;}
.category-navigation .navigation::before {content: ""; display: block; position: absolute; left: 15px; width: 30px; height: 30px; background: #24053A; top: 50%; transform: translateY(-50%); mask-repeat: no-repeat; mask-size: contain; mask-position: center;}
.category-navigation .navigation:last-child {margin-right: 0px;}
.category-navigation p {color: var(--orange); margin-right: 40px; }

.category-navigation .sort-by {position: absolute; right: 10px; bottom: 35px; display: flex; box-sizing: border-box; gap: 15px;}
.category-navigation .sort-by p {color: inherit; font-size: 18px; font-weight: 500; margin-right: 0px;}
.category-navigation .sort-by .custom-select {position: relative; overflow: hidden; width: 65px; cursor: pointer;}
.category-navigation .sort-by .custom-select span {position: absolute; transition: 0.5s; top: 0px; font-size: 18px; }
.category-navigation .sort-by .custom-select span:last-child {top: 100%;}
.category-navigation .sort-by .custom-select::after {content: ""; display: block; position: absolute; right: 0px; top: 0px; background: url('/img/select-arrow.svg') center no-repeat; width: 10px; height: 17px; transform: rotate(0deg); transition: 0.5s;}

.category-navigation .sort-by .custom-select.active::after {transform: rotate(180deg);}
.category-navigation .sort-by .custom-select.active span {top: -100%;}
.category-navigation .sort-by .custom-select.active span:last-child {top: 0;}

.self-development::before {mask-image: url('/img/rocket-icon.svg')!important;}
.health-and-safety::before {mask-image: url('/img/construction-icon.svg')!important;}
.hospitality::before {mask-image: url('/img/hospitality-icon.svg')!important;}
.business::before {mask-image: url('/img/business-icon.svg')!important;}
.technology::before {mask-image: url('/img/technology-icon.svg')!important;}
.creativity::before {mask-image: url('/img/creativity-icon.svg')!important;}
.education::before {mask-image: url('/img/education-icon.svg')!important;}

.product-container {overflow: hidden;}

.filter-grid {display: grid; grid-template-columns: 1fr 4fr; grid-gap: 100px;}

.filter {position: sticky; top: 150px;}
.filter .pill {font-size: 13px; padding: 3px 10px; background: #F5F1ED; display: inline-block; border-radius: 50vw; position: relative; top: auto; right: auto; line-height: 1; color: #24053A; text-transform: none; font-weight: 400;}

.filter p strong {font-size: 18px; font-weight: 600;}

.active-filters {margin: 25px 0;}
.active-filters .pill {padding: 3px 20px 3px 10px; background: #24053A; color: #fff; font-weight: 600;}
.active-filters .pill::before, .active-filters .pill::after {content: ""; display: block; background: #fff; height: 1.5px; width: 10px; border-radius: 10px; position: absolute; right: 5px; top: 55%; transform: translateY(-50%) rotate(45deg);}
.active-filters .pill::after {transform: translateY(-50%) rotate(-45deg);}

.filter-accordion {border-bottom: 1px solid #EBEBEB;}
.filter-accordion p {font-size: 18px; cursor: pointer; padding: 20px 0; transition: 0.3s; color: #24053A;}
.filter-accordion p:hover {color: var(--orange)}
.filter-accordion ul {list-style: none; margin: 0; max-height: 0px; height: auto; overflow: hidden; transition: 0.5s;}
.filter-accordion.active ul {max-height: 1000px;}
.filter-accordion ul li:first-child {margin-top: 0px;}
.filter-accordion ul li:last-child {margin-bottom: 20px;}
.filter-accordion ul li {font-size: 16px; display: block; margin: 15px 0;}
.filter-accordion ul li a {transition: 0.3s; color: #24053A;}
.filter-accordion ul li a:hover {color: var(--orange)}

.shop-filter > div {padding: 25px 0; border-bottom: 1px solid #EBEBEB; cursor: pointer; position: relative;}
.shop-filter > div::after {content: ""; font-family: "Nioicon"; display: block; position: absolute; top: 20px; right: 10px; font-size: 30px; transform: rotate(0deg); transition: 0.3s;}
.shop-filter > div.open::after {transform: rotate(180deg);}

.shop-filter .panel {max-height: 0px; height: auto; overflow: hidden; transition: 0.5s;}
.shop-filter .panel p {position: relative; box-sizing: border-box; margin: 15px 0; font-weight: 400; font-size: 16px; transition: 0.5s;}
.shop-filter .panel p:first-child {margin-top: 25px;}
.shop-filter .panel p:hover {color: #ff6f61;}
.shop-filter .panel p:hover::before {background: #ff6f61;}
.shop-filter .open .panel {max-height: 1000px;}

.product-wrapper {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px;}

.product-wrapper .product-item {opacity: 1; transition: 0.5s; margin-top: 0px; z-index: 1;}
.product-wrapper .product-item:nth-child(-n+6) {}

.product-wrapper .info-item {grid-column: span 2; box-sizing: border-box; padding: 50px; transition: 0.5s; margin-top: 0px; position: relative; opacity: 1; z-index: 1;}
.product-wrapper .info-item h3 {margin-bottom: 20px;}
.product-wrapper .info-item p {margin-bottom: 30px; font-size: 22px; line-height: 1.5; max-width: 420px;}
.product-wrapper .form-wrapper {max-width: 485px;}
.product-wrapper .info-item::after {content: "";background: url('/img/decoration-3.svg') right no-repeat;background-size: contain; position: absolute; width: 255px; height: 378px; top: 50px; right: -92px; z-index: -1;}

.product-wrapper .form-wrapper input {padding: 25px 140px 30px 30px; font-size: 18px; border: 1px solid #FFCAC1;}
.product-wrapper .form-wrapper .button {padding: 32px 40px; font-size: 20px;}

.product-item.hidden {
  display: none;
}

.button-wrapper {grid-column: span 4; order: 4; display: flex; justify-content: center; align-items: flex-start;}
.button-wrapper .button.purple {font-size: 18px; padding: 20px 35px 22px; background: #24053A; cursor: pointer; margin-top: 2vw;}
.button-wrapper .button.purple::after, .button-wrapper .button.purple:hover {background: var(--orange);}

.product-item > div {overflow: hidden; border-radius: var(--top-left-small); position: relative;}
.product-item > div a.circle {position: absolute; opacity: 0; width: 82px; height: 82px; transition: 0.5s; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.product-item > div a.circle::before {display: none;}
.product-item > div a.circle img {width: 30px; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(0deg); position: absolute; transition: 0.5s;}
.product-item > div a.circle:hover img {transform: translate(-50%,-50%) rotate(45deg)}
.product-item > div:hover a.circle {opacity: 1;}
.product-item > div:hover figure {filter: blur(20px)}
.product-item figure {position: relative; width: 100%; background: #f1f1f1; height: 370px; filter: blur(0px); transition: 0.5s;}
.product-item figure img {position: absolute; }
.product-item article {margin-top: 20px; }
.product-item article .title {font-family: 'RB-Rational-Neue-Mix-Test'; font-weight: 500; font-size: 20px; line-height: 1.3; margin-bottom: 10px; max-width: 200px;}
.product-item article .price {font-size: 13px;}

.product-item .circle {width: 40px; height: 40px; position: absolute; top: 20px; left: 20px; background: #24053A; z-index: 1; border-radius: 50vw;}
.product-item .circle::before {content: ""; display: block; position: absolute; left: 50%; width: 20px; height: 20px; background: #fff; top: 50%; transform: translate(-50%,-50%); mask-repeat: no-repeat; mask-size: contain; mask-position: center;}

.product-item .tags {position: absolute; bottom: 20px; left: 50%; z-index: 1; transform: translateX(-50%); width: 85%; justify-content: center; display: flex; gap: 5px;}
.product-item .tags span {color: #fff; padding: 5px 15px; background: #24053A50; display: inline-block; border-radius: 50vw; font-size: 13px;}

.section__cart, .section--checkout {padding: 250px 0; background: #F5F1ED; margin-bottom: -125px;}
.section--checkout > .wrapper {align-items: flex-start; max-width: 1400px; width: 100%;}
.section__cart .wrapper-sml {max-width: 1300px;}
.section__cart h1 {display: block; margin-bottom: 30px;}


.cart__item {display: flex; justify-content: space-between; position: relative; width: 100%; padding: 20px; align-items: center; background: #fff; border-bottom: 0; box-sizing: border-box; border-radius: var(--top-left-small); margin-bottom: 30px;}
.cart__item article {flex: 1; margin: 0; display: grid; align-items: center; grid-template-columns: 5fr 1fr 1fr 1fr;}
.cart__item article .product-name {font-family: 'RB-Rational-Neue-Mix-Test'; font-weight: 500;}
.cart__item figure {width: 150px; display: flex; align-items: center; border-radius: 0 30px 30px 30px; margin-right: 50px; height: 150px; overflow: hidden;}
.cart__item figure img {width: 100%; height: 100%; object-fit: cover;}
.cart__item .text-right {text-align: right;}

.cart__subtotal {display: flex; justify-content: flex-end; gap: 20px; align-items: center;}
.cart__subtotal p {font-size: 15px; font-weight: 300;}

.cart__item .remove {display: block; position: relative; width: 35px; height: 30px; background: #24053A; mask-image: url('/img/delete.svg'); mask-repeat: no-repeat; mask-size: contain; mask-position: center; transition: 0.5s;}
.cart__item .remove:hover {background: #ff6f61;}

.js-qty {display: flex; gap: 10px;}
.js-qty input {padding: 0; box-sizing: border-box; border-radius: 15px; width: 50px; transition: 0.5s; color: #24053a; text-align: center; border: 0; font-size: 25px; font-family: 'RB-Rational-Neue-Mix-Test';}

.js-qty__adjust {padding: 20px; background: #fff; position: relative; overflow: hidden; transition: 0.5s; transform: rotate(180deg); cursor: pointer; border-radius: 10px; border: 1px solid #e5e5e5;}
.js-qty__adjust:hover {background: #FFDCD6;border: 1px solid #FFDCD6;}
.js-qty__adjust span {position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); font-size: 24px;}

.slide {float: left; width: 100% !important; padding: 40px; box-sizing: border-box; background: #fff; border-bottom: 1px solid #e5e5e5;}
.slide:first-of-type {border-radius: 0 30px 0 0;}
.slide:last-of-type {border-radius: 0 0 30px 30px; border-bottom: 0;}
.slide .grid {grid-gap: 40px;}
.slide h2 {font-size: 1.5vw; line-height: 1; font-weight: 600; font-family: 'RB-Rational-Neue-Test', sans-serif; margin-bottom: 30px;}
.slide .grid-right {display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 40px;}

.slide .grid ~ .form-field {margin: 20px 0; }
.slide .grid-3 {display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-gap: 20px;}

.checkout-left {width: 100%; max-width: 900px;}
.checkout-left h1 {margin-bottom: 30px;}

.checkout-right {width: 100%; max-width: 450px; position: sticky; top: 150px; margin-top: 53px;}
.checkout-right .cart__checkout {background: #fff; border-radius: 0 30px 30px 30px; box-sizing: border-box; padding: 40px;}
.checkout-right .cart__checkout > .flex-row {margin-bottom: 30px;}
.checkout-right .checkout--item {display: grid; grid-template-columns: 110px 2fr; margin-bottom: 20px;}
.checkout-right .checkout--item figure {height: 110px; border-radius: 10px; overflow: hidden;}
.checkout-right .checkout--item article {padding: 20px 0 10px 30px; box-sizing: border-box; position: relative; display: flex; flex-direction: column; justify-content: space-between;}
.checkout-right > .button {margin-top: 40px;}


.checkout--item article .flex-row {align-items: first baseline;}
.checkout--item article span {font-weight: 400; line-height: 1; text-align: right;font-size: 16px;}
.checkout--item article p {font-size: 16px; font-weight: 400;}

.cart__subtotal {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;}

.section--checkout .cart__subtotal {padding: 10px 0 0;}
.section--checkout .cart__subtotal p {margin: 0; font-size: 16px; font-weight: 400;}
.section--checkout .cart__subtotal p strong {font-weight: 500;}
.section--checkout .cart__subtotal:last-of-type { border-top: 1px solid #e5e5e5; margin-top: 20px; padding-top: 20px;}
.section--checkout .cart__subtotal:last-of-type p { font-size: 18px;}

.terms { text-align: center; font-size: 14px; line-height: 21px; padding: 15px 0px 0px; font-weight: 300;}
.terms a { color: inherit; border-bottom: 1px solid #24053A;}

.button__checkout-block {grid-column: span 2;}

#accountBlock {margin-top: 40px;}

.fieldMessage a {display: inline-block; border-bottom: 1px solid}
.form-radio-block {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; border: 1px solid #1A306430; padding: 20px 70px 20px 20px; margin-bottom: 20px; border-radius: 10px; font-size: 16px; background: #fff; position: relative;}
.form-radio-block img, .form-radio-block svg {width: 115px; mix-blend-mode: multiply;}

form [type="radio"]:checked,form [type="radio"]:not(:checked) {position: absolute; left: -9999px;}
form [type="radio"]:checked + label,form [type="radio"]:not(:checked) + label {cursor: pointer; line-height: 20px; display: inline-block; color: #1A3064; font-size: 18px;}
form [type="radio"]:not(:checked) + label:before {content: ""; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 1px solid #1A306430; border-radius: 100%; background: #fff; box-sizing: border-box;}
form [type="radio"]:checked + label:before {content: ""; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 1px solid var(--orange); border-radius: 100%; background: #fff; box-sizing: border-box;}
form [type="radio"]:checked + label:after,form [type="radio"]:not(:checked) + label:after {content: ""; width: 20px; height: 20px; background: var(--orange); position: absolute; top: 50%; transform: translateY(-50%); right: 20px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
form [type="radio"]:not(:checked) + label:after {opacity: 0; width: 0px;}
form [type="radio"]:checked + label:after {opacity: 1; width: 20px; height: 20px;}