/*Global css*/
@import url("https://use.typekit.net/evp8lss.css");
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

*{margin:0;padding:0;-webkit-font-smoothing: antialiased;}
html{font-size:100%;width:100%;height:100%;}
body{width:100%;min-width:320px;background-color:#ffffff;font-size:16px; font-family: "Instrument Sans", sans-serif; font-weight: 400; color: #000; overflow-x: hidden; margin: 0;}
.clear{clear:both;}
button,input[type="submit"]{cursor: pointer;}
button,input[type="submit"],input[type="search"]{transition:all 0.3s ease;-moz-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;font-family: "Inter", sans-serif;}
button:focus,input[type="submit"]:focus,input[type="search"]:focus,a:focus,i:focus{outline: none;}
a{text-decoration:none;color:#6D6E71; transition: all ease 0.3s;}
a:hover{text-decoration:none;outline:0;color:#000000; outline: none;}
a:focus{outline:none!important;outline-offset:none!important;text-decoration:none!important;color:#000000;}
.btn:focus{outline:none;box-shadow: none;}
a,img{border:none;outline:none;}
img{max-width:100%;height:auto;display:inline-block;}
label{font-weight: 400; font-size: 14px; color: #0a111f;margin-bottom: 10px; display: block;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin:0 0 20px;  padding:0;font-weight: 700; color: #121721; line-height: 1.1; letter-spacing: normal; display: block; position:relative;}
h1, .h1 {font-size:80px;  font-family: "neulis-neue", sans-serif;}
h2, .h2{font-size:60px;  font-family: "neulis-neue", sans-serif;}
h3, .h3 {font-size:30px;}
h4, .h4 {font-size: 20px;}
ul,ol{list-style:none;margin:0;}
ul li,ol li{list-style:none;}
p{display:block;line-height:1.5;margin:0 0 15px; font-weight: 400;}
p:last-child{margin: 0;}
b, strong{font-weight: 700;}

/*inputfield*/
.form-group, .field {padding-bottom: 20px; margin: 0; position: relative;}
.form-control {width: 100%; box-shadow: none !important;height: 40px;  color:#000000; font-size: 14px; font-weight: 400; border-radius: 8px; padding: 0 12px 0; border: solid 1px rgb(224, 230, 235); background-color: transparent; outline: none;}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{background-color:#ffffff;}
.form-control::-webkit-input-placeholder{color:#626d84; opacity: 1;}
.form-control::-moz-placeholder{color:#626d84; opacity: 1;}
.form-control:-ms-input-placeholder{color:#626d84; opacity: 1;}
.form-control:-moz-placeholder{color:#626d84; opacity: 1;}
.form-control:focus{color: #000000; border-color: #bee335; background-color: transparent;}
select,select.form-control {background:#f8f9fe url('../images/downArrow.svg') no-repeat calc(100% - 15px) center;text-overflow:ellipsis;white-space:nowrap; padding-top: 1px; padding-left: 16px; padding-right:28px;-moz-appearance:none;-webkit-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none; color:#000000; font-size: 18px; font-weight: 400; border: solid 1px #ffffff; background-color: transparent; width:100%; background-size: 15px;cursor:pointer;}
select,select.form-control:focus{color: #000000;}
select option,select.form-control option{ padding:0 10px;}
textarea.form-control {min-height:115px;resize:vertical;height:auto; padding-top: 10px; border-radius: 10px;}
.form-group label{display: block; width: 100%;}

.container{max-width: 1400px; width: 100%;position: relative; z-index: 2; padding-left: 20px; padding-right: 20px;}

/*button*/
.btn-custom {background-color: #000; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px; border-radius:15px; border: 0;
   font-weight: 600; font-size:18px; text-align: center; color:#ffffff; text-transform: capitalize; height:56px; line-height:54px; text-align:center; 
   padding:0 35px;cursor: pointer;  display: inline-flex; transition: all ease 0.3s; border: 1px solid transparent;}
.btn-custom img.right {margin-left: 10px; width: 18px;}
.btn-custom:hover img {filter: brightness(0) saturate(100%);}
.btn-custom img.left {margin-right: 10px; width: 24px;}
.btn-custom.small-btn {font-size:14px; text-align: center; border-radius: 8px; color:#0a111f; height:36px; line-height:36px; padding: 0 15px;}
.btn-custom.transparent-btn {background-color: transparent; box-shadow: none;}
.btn-custom.transparent-btn:hover {background-color: #00d2e6;}
.btn-custom:focus { color: #fff; outline: 0; }
.btn-custom.orange-btn:focus { color: #000; }
 .btn-custom:hover {background-color: #fff; color: #000; outline: 0;  border: 1px solid #000;}

/*checkbox*/
.custom-checkbox {position: relative;padding-left: 28px;cursor: pointer;user-select: none; font-size: 14px; color: #626d84; line-height: 24px;}
.custom-checkbox input[type="checkbox"] {position: absolute;opacity: 0;cursor: pointer;}
.checkbox-mark {position: absolute;top: 3px;left: 0;height: 19px;width: 19px;background-color: #ffffff; border-radius: 3px; border: solid 1px #626d84; background-color: transparent; transition: border-color 0.2s, box-shadow 0.2s;}

.custom-checkbox input:checked ~ .checkbox-mark:after, .custom-checkbox input:hover  ~ .checkbox-mark:after {content: ""; background-image: url('../images/checkbox-icon.svg'); background-repeat: no-repeat; background-size: 100%; width: 18px; height: 18px; display: block;}

/*txt color*/
.green-color {color: #bee335;}
.rainbow-text { background: linear-gradient( 90deg,#F7DA00, /* Yellow */#F7941D, /* Orange */#ED1C24, /* Red */#EC008C, /* Pink */#2E3192, /* Indigo */#00AEEF, /* Sky Blue */#009444  /* Green */); 
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.top-rainbow-line { width: 100%; height: 3px; background: repeating-linear-gradient(90deg, #F7DA00 0px 150px, #F7941D 150px 300px, #ED1C24 300px 450px, #EC008C 450px 600px, #2E3192 600px 750px, #00AEEF 750px 900px, #009444 900px 1050px); position: absolute; top: 0; }

/*boder color*/
.rainbow-magenta-boder { border: 1px solid #EC008C; }
.rainbow-cyan-boder { border: 1px solid #00AEEF;}
.rainbow-green-boder {border: 1px solid #009444;}
.rainbow-red-boder {border: 1px solid #ED1C24;} 

/*section title*/
.pad-t0{padding-top: 0!important;}
.pad-0{padding-top:0!important; padding-bottom: 0!important;}
.pad-lr0{padding-left: 0!important; padding-right: 0!important;}
.mrg-0{margin-top: 0!important; margin-bottom: 0!important;}
.pad-t110 {padding-top: 110px;}
.pad-b110 {padding-bottom: 110px;}

/*check list*/
.check-list {padding: 0;}
.check-list li {font-size: 16px; color: #0a111f; position: relative; padding-left: 30px; margin-top: 10px;}
.check-list li:before {background-image: url('../images/check-icon.svg'); background-repeat: no-repeat; content: ""; background-size: 100%;width: 20px;height: 20px;position: absolute;left: 0;top: 2px;}

/*owl carousel*/
.owl-carousel .owl-nav {margin: 0;display: flex;align-items: center;gap: 10px;}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {width: 30px; height: 30px;  background-image: url('../images/slider-arrow.svg'); background-repeat: no-repeat; background-position: center; font-size: 0; border: 0; border-radius: 0; margin: 0;}
.owl-carousel .owl-nav button.owl-next {transform: scale(-1);}
.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover {background-color: #ffffff; background-image: url('../images/slider-arrow.svg'); background-repeat: no-repeat; background-position: center;}
.owl-item {opacity: 0;transition: opacity 0.4s ease;}
.owl-item.active {opacity: 1;}

/*accordian*/
.custom-accordion .accordion-item { border: 1px solid #e5e5e5; border-radius: 18px !important; overflow: hidden; margin-bottom: 16px; background: #fff; transition: all 0.3s ease; } 
.custom-accordion .accordion-item:hover { border-color: rgba(0,0,0,0.2); } 
.custom-accordion .accordion-button { background: transparent; box-shadow: none !important; padding: 24px; font-weight: 600; font-size:20px; color: #111; } 
.custom-accordion .accordion-button:not(.collapsed) { background: transparent; color: #111; } 
.custom-accordion .accordion-button::after { transition: transform 0.3s ease; }
.custom-accordion .accordion-body { padding: 0 24px 24px 45px; font-size:16px; color: #666; line-height: 1.7; } 

@media only screen and (max-width: 1199px) {
.custom-accordion .accordion-button { font-size: 18px;}
}

/*tag*/
.title-tag {border: solid 1px rgba(190, 227, 53, 0.4); background-color: rgba(190, 227, 53, 0.1); border-radius: 25px;  font-size: 14px; gap: 0 7px;padding: 8px 15px;margin-bottom: 25px;}
.title-tag:before {width: 8px; height: 8px;  border-radius: 100%; content: ""; display: inline-block; vertical-align: middle;}
.title-tag.icon::before {display: none;}
.title-tag.icon img {width: 18px;}
.bg-rainbow-magenta { background: #e6007e1a;}
.bg-rainbow-cyan { background: #00acf01a;}
.bg-rainbow-green { background: #00b8651a;}

.underline-box {  display: inline-block;    width: 48px; height: 4px; border-radius: 10px; position: absolute; bottom: 25px;}
.magenta-color.underline-box{ background-color: rgb(236, 0, 140);}
.cyan-color.underline-box{ background-color:#00AEEF;}
.green-color.underline-box{ background-color:#009444;}

.rainbow-magenta-text, .magenta-text, .bg-rainbow-magenta svg  { color:#EC008C; }
.rainbow-cyan-text, .cyan-text, .bg-rainbow-cyan svg { color: #00AEEF;}
.rainbow-green-text, .green-text, .bg-rainbow-green svg  {color: #009444;}


@media only screen and (max-width: 1440px) {
h1, .h1 {font-size:60px;}
h2, .h2 {font-size:50px;}
.pad-t110 {padding-top: 40px;}
.pad-b110 {padding-bottom: 40px;}
}

@media only screen and (max-width: 1199px) {
h1, .h1 {font-size: 40px;}
h2, .h2 {font-size: 32px;}
.btn-custom {font-size: 14px; height: 50px; line-height: 50px; padding: 0 20px;}
.pad-t110 {padding-top: 60px;}
.pad-b110 {padding-bottom: 60px;}
.section-title {font-size: 16px;}
}

@media only screen and (max-width: 991px) {
body {font-size: 15px;}
h1, .h1 {font-size: 35px;}
h2, .h2 {font-size: 28px;}
h3, .h3 {font-size: 25px;}
h4, .h4 {font-size: 18px;}
.pad-t110 {padding-top: 40px;}
.pad-b110 {padding-bottom: 40px;}
.btn-custom {font-size: 14px;height: 45px;line-height: 45px;padding: 0 15px;border-radius: 8px; }
}

@media only screen and (max-width: 767px) {
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {margin-bottom: 15px;}
.wow{animation-name: none !important;visibility: visible !important; transform: none !important;}
.form-control {height: 40px; line-height: 40px; font-size: 14px;}
.title-tag {font-size: 12px;padding: 5px 12px;margin-bottom: 20px;}
}

@media only screen and (max-width: 479px) {
h1, .h1 {font-size: 30px;}
.container {padding-left: 15px; padding-right: 15px;} 
}
/*Global css end*/

/*header css start*/
.site-header {position: fixed; top: 0; left: 0; right: 0; z-index: 10; border-bottom: solid 1px #fff; background-color: rgba(255, 255, 255, 0.8); padding:25px 0; transition: all ease 0.3s;}
.navbar-brand {max-width:200px; width: 100%; margin: 0; padding: 0;}
.navbar-brand img{max-width: 100%; display: block; transition: all ease 0.5s;}
.site-header .navbar{padding: 0;}
.site-header .navbar-collapse {margin-top: 0; flex-basis: min-content; justify-content: end;}
.site-header .navbar-collapse .navbar-nav {margin-left:48px;}
.site-header .navbar-nav li{margin: 0 0 0 32px; position: static;}
.site-header .navbar-nav li:first-child {margin: 0;}
.site-header .navbar-nav li a.nav-link{color: #000;; font-size: 16px; font-weight: 400; padding: 0 0 5px 0; margin-bottom: -5px; position: relative;}

.site-header .navbar-nav li a.nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height:3px; border-radius: 50px; transition: width 0.35s ease-in-out; background: linear-gradient( 90deg,#F7DA00, /* Yellow */#F7941D, /* Orange */#ED1C24, /* Red */#EC008C, /* Pink */#2E3192, /* Indigo */#00AEEF, /* Sky Blue */#009444  /* Green */); }

.site-header .navbar-nav li a.nav-link:hover::after,.site-header .navbar-nav li a.nav-link.active::after  {  width: 100%;}
.site-header .navbar-nav li a.nav-link:hover, .site-header .navbar-nav li a.nav-link:focus, .site-header .navbar-nav li:hover a.nav-link{color: #000;}
.site-header .navbar-nav .nav-link:hover, .site-header .navbar-nav .nav-link.active{color: #000;}
.site-header .head-btn-group {gap: 0 15px;}

/*sticky header*/
.site-header.scroll-header {backdrop-filter: blur(16px);}

/* Anchor-scroll offset: stop the fixed header (and promo bar) covering section titles */
#mission, #how-it-works, #faq { scroll-margin-top: calc(var(--promo-h, 0px) + 120px); }

/*animated nav icon*/
#nav-icon{position:relative;border:0;margin:0; width:33px;height:21px;z-index:10; cursor:pointer;flex-shrink:0;-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out; border: 0 !important; box-shadow: none !important; background: none;}
#nav-icon span{position:absolute;display:block;width:100%;height:2px;background:#0a111f;border-radius:2px;opacity:1;left:0;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;transition:.25s ease-in-out}
#nav-icon span:nth-child(1){top:0}
#nav-icon span:nth-child(2){top:10px}
#nav-icon span:nth-child(3){top:20px}
#nav-icon.animate-icon span:nth-child(1){top:10px;-webkit-transform:rotate(135deg);transform:rotate(135deg)}
#nav-icon.animate-icon span:nth-child(2){opacity:0;left:-10px}
#nav-icon.animate-icon span:nth-child(3){top:10px;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}

@media only screen and (max-width: 1199px) {
.navbar-brand {max-width:144px;}


}

@media only screen and (max-width: 991px) {
.site-header .head-btn-group {gap: 0 10px;}
.site-header .navbar-collapse {position: fixed;background: #0a111f; overflow: auto; height: calc(100vh - 85px) !important;top: 85px; right: -100%; padding-top:20px;width: 100%; display: block; transition: all ease 0.2s;}
.nav-open .site-header .navbar-collapse {right: 0;}
.site-header .navbar-collapse .navbar-nav {margin: 0;}
.site-header .navbar-nav li {margin: 0; padding: 5px 15px;}
.site-header .navbar-nav li a.nav-link {padding: 0; margin-bottom: 0;display: flex;align-items: center;justify-content: space-between;         color: #fff;}
.site-header.white .navbar-nav .nav-link:hover, .site-header.white .navbar-nav .nav-link.active{color: var(--white-color);}
.site-header.scroll-header .navbar-collapse {top: 85px;}
.site-header .navbar-nav li {margin: 0; padding: 5px 15px;}
.site-header .navbar-nav li a.dropdown-toggle::after {position: relative;top: 0;content: "";display: inline-block;width: 11px;height: 11px;border-right:2px solid #fff;border-top:2px solid #fff;transform: rotate(135deg);margin:-5px 3px 0 0;border-left:0; display: inline-flex; transition: all ease 0.3s;}
.site-header .navbar-nav li a.nav-link.show.dropdown-toggle:after {transform: rotate(-46deg);margin-top: 4px;}
.site-header.white .navbar-nav li a.nav-link:hover, .site-header.white .navbar-nav li a.nav-link:focus, .site-header.white .navbar-nav li:hover a.nav-link{color: #fff;}
.site-header .navbar-nav .nav-link:hover, .site-header .navbar-nav .nav-link.active  {color: #fff;}
.site-header .navbar-nav li a.nav-link::after { display: none;}
}

@media only screen and (max-width: 479px) {
}
/*header css end*/

/*hero bnr css start*/
.hero-bnr {background-color: #fff; background-image: url('../imgs/hero-bnr-bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center bottom; padding: 150px 0;  margin-top: 95px; position: relative;}
.hero-bnr .btn-group {gap: 0 20px; margin-top: 25px;}
.hero-bnr .btn-custom.bdr-btn {background-color: rgba(255, 255, 255, 255); color: #ffffff; color: #000; border: solid 1px rgba(0, 0, 0, 0.4); transform: none;}
.hero-bnr .btn-custom.bdr-btn:hover {background-color: rgba(255, 255, 255, 0.2);}
.hero-bnr .img-block {border: solid 1px #303f26; border-radius: 16px; margin-left: 45px;}
.hero-bnr .img-block img {width: 100%; display: block; border-radius: 16px;}
.hero-bnr .img-block .floted-txt {position: absolute; border-radius: 12px; background-color: #ffffff; color: #0a111f; padding: 10px 15px; font-size: 14px; font-weight: 500; gap: 0 10px; padding: 17px 15px; line-height: 1;}
.hero-bnr .img-block .floted-txt.right.top {right: -23px; top: -23px;}
.hero-bnr .img-block .floted-txt.left.bottom {left: -23px; bottom: -23px;}
.hero-bnr .img-block .floted-txt:before {width: 12px; height: 12px; border-radius: 100%; content: ""; display: inline-block; vertical-align: middle;}
.hero-bnr p { max-width: 608px;  margin: 0 auto;}
.hero-bnr:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #ffffffcf;
    width: 100%;
    height: 100%;
    content: "";
}


@keyframes moveUpDown {
  0% { transform: translateY(0); }
  50% {  transform: translateY(10px); }
  100% {  transform: translateY(0);}
}
.float-top {animation: moveUpDown 3s ease-in-out infinite;}

@media only screen and (max-width: 1440px) {
.hero-bnr {min-height: auto;     padding: 80px 0;}
.hero-bnr .img-block {margin-left: 0; margin-right: 20px;}
}

@media only screen and (max-width: 1199px) {
.hero-bnr {padding: 70px 0; margin-top: 85px;}
}

@media only screen and (max-width: 991px) {
.hero-bnr {padding: 60px 0;}
.hero-bnr p {font-size: 16px;}
.hero-bnr .img-block .floted-txt {font-size: 12px; padding: 13px 11px; border-radius: 8px;}
}

@media only screen and (max-width: 414px) {
.hero-bnr {padding: 35px 0;}
.hero-bnr .btn-group {flex-wrap: wrap; gap: 10px 0; width: 100%;}
.hero-bnr .btn-group .btn-custom {width: 100%; justify-content: center;}
}
/*hero bnr css end*/



/*our-mission css start*/
@media only screen and (max-width: 991px) {
.our-mission .row{   gap: 30px;}
}
/*our-mission css end*/



/*how-it-work css start*/
.icon-card {  box-shadow: 0 15px 30px rgba(0,0,0,0.06); border-radius: 16px; padding: 30px 35px; height: 100%; transition: all 0.3s ease; background: #fff; }
.icon-card:hover {transform: translateY(-5px); }
.icon-box { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom:24px; } 
.icon-text { color: #6c757d;}
.step-number { position: absolute; right: 40px; top:15px; font-size: 50px; font-weight: 800; opacity: 0.2; font-family: "neulis-neue", sans-serif;}

@media only screen and (max-width: 1440px) {
.icon-card {padding: 25px;}
}
@media only screen and (max-width: 991px) {
.icon-box {   width: 50px;  height: 50px;}
.icon-box svg { max-width: 25px;}
}
@media only screen and (max-width: 767px) {
.icon-box {margin-bottom: 15px;}
}
/*how-it-work css end*/



/*product-box css start*/
.product-box .pro-title-txt { color:#ff9800; text-transform: uppercase;}
.product-price-txt { font-size: 27px; position: absolute; left: 30px; top: 23px; background: #000; padding:12px 20px; border-radius: 10px; color: #fff; display: flex;  flex-direction: column; width:123px; }
.product-price-txt small { font-size: 20px; }
.product-box {  border-top: 4px solid transparent;   border-bottom: 4px solid transparent;
border-image: linear-gradient( 90deg,#F7DA00, /* Yellow */#F7941D, /* Orange */#ED1C24, /* Red */#EC008C, /* Pink */#2E3192, /* Indigo */#00AEEF, /* Sky Blue */#009444  /* Green */); border-image-slice: 1; } 
.product-box h2, .product-box p, .product-box h4  { color: #fff; } 
.features{ list-style:none; padding:0; margin:15px 0; }
.features li{ display:flex; align-items:center; gap:14px; margin-bottom:12px; font-size:20px; color: #fff; font-size:16px; } 
.icon{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; flex-shrink:0;     line-height: normal; } 
.features .icon.green{background:#009444;}
.features .icon.cyan{background:#00AEEF;}
.features .icon.indigo{background:#2E3192;}
.features .icon.magenta{background:#EC008C;}
.features .icon.red{background:#ED1C24;}
.features .icon.orange{background:#F7941D;}
.features .icon.yellow{background:#F7DA00;}
.orange-btn{ background:#ff9800; color:#000; } 
.orange-btn img { filter: brightness(0) saturate(100%); }
.product-box  img { width: 100%;}

@media only screen and (max-width: 991px) {
.product-box .row { gap: 30px;}
}
@media only screen and (max-width:767px) {
.product-price-txt small { font-size: 16px;}
.product-price-txt {   font-size: 20px;     padding: 10px;     width:90px;     left: 25px; top: 15px;} 
.btn-custom img.right {    width: 14px;}
}
/*product-box css end*/


/*explore-box css start*/
.explore-box img { max-width: 900px;}
/*explore-box css end*/

/*explore-box css start*/
.more-than-box .rainbow-cyan { color: #008cff; width: 35px; height: 35px; }
.more-than-box .rainbow-magenta  { color: #d10072; width: 35px; height: 35px; }
.more-than-box .rainbow-green  { color: #00a651; width: 35px; height: 35px; }
.more-than-box .rainbow-red  { color: #ED1C24; width: 35px; height: 35px; }
.more-than-card { padding: 40px 35px;      border-radius: 15px; height: 100%; transition: all 0.3s ease;  background: #fff;}
.more-than-box h3 { font-size: 25px;}
.more-inner {  max-width: 1200px; margin: 0 auto;}

@media only screen and (max-width: 991px) {
.more-than-card { padding:30px;}
.explore-box img {max-width: 100%;}
}

@media only screen and (max-width: 767px) {
.more-than-card { padding: 20px;}
.more-than-box h3 {  font-size: 20px;}
.more-than-box .rainbow-cyan {width: 30px; height: 30px;}
}

/*explore-box css start*/



/*faq-box css start*/
.faq-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.faq-title { display: flex; align-items: center; gap: 12px; } 
.faq-green { border-left: 3px solid #00b865 !important; }
.faq-blue { border-left: 3px solid #00acf0 !important; } 
.faq-pink { border-left: 3px solid #e6007e !important; }
.faq-orange { border-left: 3px solid #f58b00 !important; } 
.faq-purple { border-left: 3px solid #371c6e !important; } 
.faq-red { border-left: 3px solid #db0614 !important; }

.faq-underline-box { max-width:100px; margin-top: 30px; height: 3px; border-radius: 50px; transition: width 0.35s ease-in-out; background: linear-gradient( 90deg,#F7DA00, /* Yellow */#F7941D, /* Orange */#ED1C24, /* Red */#EC008C, /* Pink */#2E3192, /* Indigo */#00AEEF, /* Sky Blue */#009444  /* Green */);}
.custom-offset {    margin-left: 4%;}
/*faq-box css end*/


/*our-mission css start*/
@media only screen and (max-width: 991px) {
.faq-box .row{   gap: 30px;}
.faq-dot { display: none;}
.custom-accordion .accordion-body {    padding: 0 24px 24px;}
}

@media only screen and (max-width: 767px) {
.custom-accordion .accordion-button { padding: 20px;   font-size: 16px; }
}
/*our-mission css end*/





/*footer css start*/
footer { padding: 50px 0 20px 0;     border-top: 4px solid transparent;  border-image: linear-gradient(90deg,#F7DA00, /* Yellow */#F7941D, /* Orange */#ED1C24, /* Red */#EC008C, /* Pink */#2E3192, /* Indigo */#00AEEF, /* Sky Blue */#009444  /* Green */); border-image-slice: 1; }
footer p { color: #6D6E71;}
footer a:hover { color: #fff;}
footer  h6{ color: #6D6E71;}
.footer-inner { max-width: 180px; margin-left: auto;}
.footer-border-top {  border-top: 1px solid #4D4D4D;}
.logo-ft {max-width:200px;}

@media only screen and (max-width: 1199px) {
.footer {padding: 50px 0 40px;}
}

@media only screen and (max-width: 991px) {
.footer-inner {  max-width: inherit; margin-left: inherit; }
footer {padding: 30px 0 20px 0;}
.logo-ft {max-width:150px;}
}
@media only screen and (max-width: 767px) {
.foot-bottom {margin-top: 15px;padding-top: 25px;}
}
.footer-bottom-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.footer-bottom-bar .footer-social { justify-self: end; }
@media only screen and (max-width: 767px) {
.footer-bottom-bar { grid-template-columns: 1fr; justify-items: center; }
.footer-bottom-bar > div:first-child { display: none; }
}
.footer-social { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: #2a2a2a; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background 0.25s ease, transform 0.25s ease; text-decoration: none; }
.footer-social a:hover { background: #fff; color: #000; transform: translateY(-2px); }
.footer-social a svg { width: 16px; height: 16px; }
/*footer css end*/


/*========================================*/
/* Shared inner-page components           */
/*========================================*/

/*page hero css start*/
.page-hero { padding: 28px 0 60px; background-color: #fff; position: relative; margin-top: 80px;}
.page-hero .eyebrow { display: inline-block; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #6D6E71; margin-bottom: 18px;}
.page-hero h1 { margin-bottom: 18px;}
.page-hero p.lede { font-size: 18px; color: #6D6E71; max-width: 720px; margin: 0;}

/* ── Shared Breadcrumb (shop-breadcrumb component) ─────────── */
.shop-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}
.shop-breadcrumb li { display: flex; align-items: center; }
.shop-breadcrumb li a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #009444;
    font-size: 13px;
    font-weight: 500;
    font-family: "Instrument Sans", sans-serif;
    text-decoration: none;
    transition: color 0.2s;
}
.shop-breadcrumb li a:hover { color: #007a38; text-decoration: underline; }
.shop-breadcrumb li.bc-current {
    color: #444;
    font-size: 13px;
    font-weight: 400;
    font-family: "Instrument Sans", sans-serif;
}
.shop-breadcrumb li + li::before {
    content: '›';
    color: #aaa;
    margin: 0 8px;
    font-size: 14px;
    line-height: 1;
}

@media only screen and (max-width: 1199px) {
.page-hero { padding: 28px 0 40px; margin-top: 85px;}
.page-hero p.lede { font-size: 16px;}
}
@media only screen and (max-width: 767px) {
.page-hero { padding: 18px 0 30px;}
.page-hero .eyebrow { font-size: 11px;}
}
/* Breadcrumb-only hero (product detail): no title sits below the breadcrumb,
   so trim only the bottom padding (the top matches every other page-hero). */
.page-hero.pdp-breadcrumb { padding-bottom: 14px; }
@media only screen and (max-width: 767px) {
.page-hero.pdp-breadcrumb { padding-bottom: 12px; }
}
/*page hero css end*/

/*reassurance band css start*/
.why-band { background-color: #f7f4ee;}
.why-tile { text-align: center; padding: 20px 10px;}
.why-tile__icon { width: 56px; height: 56px; border-radius: 50%; background-color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.06);}
.why-tile__icon svg { width: 26px; height: 26px;}
.why-tile h4 { font-size: 17px; margin-bottom: 6px;}
.why-tile p { font-size: 14px; color: #6D6E71; margin: 0;}
/*reassurance band css end*/

/*newsletter strip css start*/
.newsletter-strip { padding: 80px 0; text-align: center; background-color: #f7f4ee; }
.newsletter-strip .newsletter-eyebrow { display: inline-block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: #EC008C; margin-bottom: 10px; }
.newsletter-strip h2 { font-size: 36px; line-height: 1.2; margin-bottom: 10px; }
.newsletter-strip p.lede { color: #6D6E71; margin: 0 auto 28px; max-width: 560px; font-size: 16px; line-height: 1.6; }

.newsletter-form { max-width: 520px; margin: 0 auto; text-align: left; }
.newsletter-form__row { display: flex; gap: 10px; align-items: stretch; }
.newsletter-form input[type=email] { flex: 1; min-width: 0; height: 52px; border-radius: 12px; border: 1px solid #d5cfc0; padding: 0 16px; font: inherit; font-size: 15px; background: #fff; color: #0F0F10; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.newsletter-form input[type=email]::placeholder { color: #9b9690; }
.newsletter-form input[type=email]:focus { outline: 0; border-color: #0F0F10; box-shadow: 0 0 0 3px rgba(15,15,16,0.08); }
.newsletter-form .btn-custom { height: 52px; line-height: 52px; padding: 0 26px; flex-shrink: 0; }
.newsletter-form__consent { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 13px; line-height: 1.55; color: #6D6E71; text-align: left; cursor: pointer; }
.newsletter-form__consent input[type=checkbox] { margin-top: 3px; flex-shrink: 0; accent-color: #EC008C; }
.newsletter-form__consent a { color: #0F0F10; text-decoration: underline; text-underline-offset: 2px; }
.newsletter-form__consent a:hover { color: #EC008C; }
.newsletter-form__msg { margin: 10px 0 0; font-size: 13px; min-height: 1.4em; }
.newsletter-form__msg.is-error { color: #C0392B; }
.newsletter-form__msg.is-success { color: #009444; }
.newsletter-form__msg.is-info { color: #6D6E71; }

/* Footer band variant */
.footer-newsletter { padding: 32px 0 30px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 32px; }
.footer-newsletter__inner { display: grid; grid-template-columns: 1fr minmax(0, 480px); gap: 28px; align-items: center; }
.footer-newsletter__copy h6 { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: #fff; text-transform: none; margin: 0 0 4px; }
.footer-newsletter__copy p { font-size: 13px; color: #9b9690; margin: 0; }
.newsletter-form--footer { max-width: 480px; width: 100%; min-width: 0; margin: 0 0 0 auto; }
.newsletter-form--footer input[type=email] { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: #fff; height: 48px; }
.newsletter-form--footer input[type=email]::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-form--footer input[type=email]:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.10); }
.newsletter-form--footer .btn-custom { height: 48px; line-height: 48px; padding: 0 22px; background: #fff; color: #0F0F10; }
.newsletter-form--footer .btn-custom:hover { background: #F7DA00; color: #0F0F10; border-color: #F7DA00; }
.newsletter-form--footer .newsletter-form__consent { color: #9b9690; font-size: 12px; margin-top: 10px; }
.newsletter-form--footer .newsletter-form__consent a { color: #fff; }
.newsletter-form--footer .newsletter-form__consent a:hover { color: #F7DA00; }
.newsletter-form--footer .newsletter-form__msg.is-error { color: #ffb0a5; }
.newsletter-form--footer .newsletter-form__msg.is-success { color: #8fe3a4; }

@media only screen and (max-width: 991px) {
.newsletter-strip { padding: 60px 0; }
.newsletter-strip h2 { font-size: 28px; }
.footer-newsletter__inner { grid-template-columns: 1fr; gap: 16px; }
.newsletter-form--footer { max-width: none; margin: 0; }
}
@media only screen and (max-width: 575px) {
.newsletter-strip { padding: 50px 0; }
.newsletter-strip h2 { font-size: 24px; }
.newsletter-form__row { flex-direction: column; }
.newsletter-form input[type=email] { flex: none; width: 100%; }
.newsletter-form .btn-custom { width: 100%; justify-content: center; }
}
/*newsletter strip css end*/

/*toast css start*/
.cr-toast { position: fixed; right: 24px; bottom: 24px; min-width: 280px; max-width: 360px; background: #000; color: #fff; padding: 16px 18px; border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,0.18); display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; z-index: 1080; pointer-events: none;}
.cr-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto;}
.cr-toast__icon { width: 28px; height: 28px; border-radius: 50%; background: #00b865; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}
.cr-toast__text { font-size: 14px; line-height: 1.4;}
.cr-toast__text a { color: #00AEEF; text-decoration: underline; margin-left: 4px;}
.cr-toast__text a:hover { color: #fff;}
@media only screen and (max-width: 575px) {
.cr-toast { right: 16px; left: 16px; min-width: 0; max-width: none;}
}
/*toast css end*/


/*========================================*/
/* Shop / Product listing page            */
/*========================================*/
.shop-filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid #ececec;}
.shop-filter-bar .result-count { color: #6D6E71; font-size: 15px;}
.shop-filter-bar .sort-control { display: flex; align-items: center; gap: 12px;}
.shop-filter-bar .sort-control label { margin: 0; font-size: 14px; color: #6D6E71;}
.shop-filter-bar .sort-control select { width: auto; min-width: 200px; height: 42px; border: 1px solid #e5e5e5; border-radius: 10px; background-color: #fff; padding: 0 36px 0 14px; font-size: 14px; color: #000; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 14px center;}

.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px;}
.cat-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid #e5e5e5; background-color: #fff; font-size: 14px; color: #000; transition: all 0.25s ease; cursor: pointer;}
.cat-chip:hover, .cat-chip.active { border-color: #000; background-color: #000; color: #fff;}
.cat-chip--soon { color: #b5b5b5; cursor: not-allowed; background-color: #fafafa;}
.cat-chip--soon:hover { background-color: #fafafa; color: #b5b5b5; border-color: #e5e5e5;}
.cat-chip__tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 999px; background-color: #f1f1f1; color: #888;}
.cat-chip.active .cat-chip__tag { background-color: rgba(255,255,255,0.2); color: #fff;}

.product-card { background: #fff; border: 1px solid #ececec; border-radius: 20px; overflow: hidden; transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column;}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.08);}
.product-card__media { position: relative; aspect-ratio: 4 / 3; background-color: #f7f4ee; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}
.product-card:hover .product-card__media img { transform: scale(1.04);}
.product-card__media--placeholder { background: linear-gradient(135deg, #f7f4ee 0%, #efe9dd 100%);}
.product-card__media--placeholder svg { width: 96px; height: 96px; opacity: 0.55;}
.product-card__badge { position: absolute; top: 16px; left: 16px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 6px 12px; border-radius: 999px; color: #fff;}
.product-card__badge--best { background-color: #EC008C;}
.product-card__badge--soon { background-color: rgba(0,0,0,0.85);}
.product-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1;}
.product-card__title { font-size: 22px; margin-bottom: 6px;}
.product-card__title a { color: #000;}
.product-card__title a:hover { color: #000;}
.product-card__desc { font-size: 14.5px; color: #6D6E71; margin-bottom: 18px; line-height: 1.5;}
.product-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto;}
.product-card__price { font-size: 22px; font-weight: 700; color: #000;}
.product-card__price small { display: block; font-size: 11px; color: #6D6E71; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em;}
.product-card .btn-custom.small-btn { color: #fff; font-size: 13px;}
.product-card .btn-custom.small-btn:hover { color: #000;}
.product-card__view { font-size: 14px; color: #6D6E71; display: inline-block; margin-top: 12px;}
.product-card__view:hover { color: #000; text-decoration: underline;}
.product-card__view img { width: 12px; margin-left: 4px; vertical-align: middle;}

@media only screen and (max-width: 575px) {
.product-card__body { padding: 20px;}
.product-card__title { font-size: 20px;}
}

/*notify modal css start*/
.notify-modal .modal-content { border: 0; border-radius: 20px; padding: 10px;}
.notify-modal .modal-header { border-bottom: 0; padding-bottom: 0;}
.notify-modal .modal-body { padding: 16px 24px 28px;}
.notify-modal h4 { font-size: 22px; margin-bottom: 8px;}
.notify-modal p { color: #6D6E71; margin-bottom: 18px;}
.notify-modal .form-control { height: 48px; border-radius: 10px; margin-bottom: 14px;}
.notify-modal .btn-custom { width: 100%; justify-content: center;}
/*notify modal css end*/


/*========================================*/
/* Product Details (PDP) page             */
/*========================================*/
.pdp-hero { padding-top: 30px; padding-bottom: 80px;}

/* Two-column PDP layout: gallery + description (left), sticky buy panel + info card (right).
   Source order is gallery, aside, description so mobile shows the buy CTA right after the image. */
.pdp-layout { display: grid; gap: 32px;}
.pdp-layout__aside { display: flex; flex-direction: column;}
.pdp-layout__aside .pdp-info-card { margin-top: 24px;}
@media only screen and (min-width: 992px) {
.pdp-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: max-content auto; grid-template-areas: "gallery aside" "desc aside"; column-gap: 48px; row-gap: 32px; align-items: start;}
.pdp-layout__gallery { grid-area: gallery;}
.pdp-layout__aside { grid-area: aside; position: sticky; top: 110px; align-self: start;}
.pdp-layout__desc { grid-area: desc;}
}
.pdp-gallery__main { background-color: #f7f4ee; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; position: relative; margin-bottom: 16px;}
.pdp-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.3s ease;}
.pdp-gallery__badge { position: absolute; top: 20px; left: 20px; display: inline-flex; gap: 8px; flex-wrap: wrap;}
.pdp-gallery__badge span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 6px 12px; border-radius: 999px; color: #fff;}
.pdp-gallery__badge .b-best { background-color: #EC008C;}
.pdp-gallery__badge .b-plastic { background-color: #009444;}
.pdp-thumbs { display: flex; gap: 12px; flex-wrap: wrap;}
.pdp-thumbs button { width: 80px; height: 80px; border-radius: 14px; border: 2px solid #ececec; background: #f7f4ee; padding: 0; overflow: hidden; cursor: pointer; transition: all 0.25s ease;}
.pdp-thumbs button:hover { border-color: #bdbdbd;}
.pdp-thumbs button.active { border-color: #000;}
.pdp-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block;}

.pdp-panel { padding-left: 0;}
.pdp-panel h1 { font-size: 44px; margin-bottom: 10px;}
.pdp-tagline { display: inline-block; position: relative; margin: 0 0 16px; padding-bottom: 8px; font-weight: 700; color: #000; font-size: 16px;}
.pdp-tagline::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; border-radius: 50px; background: linear-gradient( 90deg, #F7DA00 0 14.28%, #F7941D 14.28% 28.57%, #ED1C24 28.57% 42.86%, #EC008C 42.86% 57.14%, #2E3192 57.14% 71.43%, #00AEEF 71.43% 85.71%, #009444 85.71% 100% );}
.pdp-panel__sub { color: #6D6E71; font-size: 17px; margin-bottom: 18px;}
.pdp-panel__sub p { margin: 0 0 6px;}
.pdp-panel__sub p:last-child { margin-bottom: 0;}
.pdp-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14px; color: #6D6E71;}
.pdp-rating__stars { display: inline-flex; color: #F7941D;}
.pdp-rating__stars svg { width: 18px; height: 18px;}
.pdp-price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px;}
.pdp-price__now { font-size: 36px; font-weight: 700; color: #000; font-family: "neulis-neue", sans-serif;}
.pdp-price__was { color: #6D6E71; text-decoration: line-through; font-size: 18px;}
.pdp-desc { color: #414042; margin-bottom: 24px;}
.pdp-features-title { font-size: 18px; font-weight: 700; color: #000; margin: 0 0 10px;}
.pdp-features { margin: 4px 0 22px;}
.pdp-features li { color: #414042;}

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid #ececec; border-radius: 12px; overflow: hidden; height: 50px; margin-bottom: 14px;}
.qty-stepper button { width: 44px; height: 100%; background: #fff; border: 0; font-size: 20px; color: #000; cursor: pointer; transition: background-color 0.2s ease;}
.qty-stepper button:hover { background: #f7f4ee;}
.qty-stepper input { width: 56px; height: 100%; border: 0; text-align: center; font-size: 16px; font-weight: 600; color: #000; outline: none;}
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
.qty-stepper input[type=number] { -moz-appearance: textfield;}

.pdp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px;}
.pdp-cta .btn-custom { flex: 1; min-width: 180px; justify-content: center; align-items: center;}
.pdp-cta .btn-custom.bdr-btn { background-color: #fff; color: #000; border: 1px solid #000;}
.pdp-cta .btn-custom.bdr-btn:hover { background-color: #000; color: #fff;}

.pdp-trust { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 16px 40px; padding-top: 18px; border-top: 1px solid #ececec; font-size: 14px; color: #6D6E71;}
.pdp-trust span { display: inline-flex; align-items: center; gap: 8px;}
.pdp-trust svg { width: 18px; height: 18px; flex-shrink: 0;}

@media only screen and (max-width: 991px) {
.pdp-panel h1 { font-size: 32px;}
.pdp-price__now { font-size: 30px;}
}
@media only screen and (max-width: 575px) {
.pdp-thumbs button { width: 64px; height: 64px;}
.pdp-cta .btn-custom { min-width: 0;}
.pdp-trust { grid-template-columns: 1fr;}
}

/*Features strip*/
.features-strip { background-color: #f7f4ee; padding: 60px 0;}
.features-strip__tile { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0;}
.features-strip__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0,0,0,0.05);}
.features-strip__icon svg { width: 22px; height: 22px;}
.features-strip__tile h5 { font-size: 16px; margin: 0 0 4px;}
.features-strip__tile p { font-size: 14px; color: #6D6E71; margin: 0;}

/*Long-form description with sticky info card*/
.pdp-desc-block { padding-top: 0; }
.pdp-desc-block h2 { font-size: 36px; margin-bottom: 18px;}
.pdp-desc-block p { color: #414042; font-size: 16px;}
.pdp-info-card { background: #fff; border: 1px solid #ececec; border-radius: 18px; padding: 28px;}
.pdp-info-card h4 { font-size: 18px; margin-bottom: 18px;}
.pdp-info-card ul { padding: 0; margin: 0;}
.pdp-info-card li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px dashed #ececec; font-size: 14px;}
.pdp-info-card li:last-child { border-bottom: 0;}
.pdp-info-card li strong { color: #000; font-weight: 600;}
.pdp-info-card li span { color: #6D6E71; text-align: right;}

@media only screen and (max-width: 991px) {
.pdp-info-card { position: static; margin-top: 30px;}
.pdp-desc-block h2 { font-size: 28px;}
}
@media only screen and (max-width: 575px) {
.pdp-info-card li { flex-direction: column; align-items: flex-start; gap: 4px;}
.pdp-info-card li span { text-align: left;}
}

/*Interactive artwork hotspots*/
.artwork-stage { position: relative; max-width: 1000px; margin: 30px auto 0; border-radius: 20px; overflow: hidden;}
.artwork-stage > img { width: 100%; height: auto; display: block;}
.hotspot { position: absolute; top: var(--y); left: var(--x); transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(0, 174, 239, 0.85); box-shadow: 0 0 0 0 rgba(0, 174, 239, 0.55); animation: hotspotPulse 2s ease-out infinite; transition: transform 0.2s ease;}
.hotspot:hover { transform: translate(-50%, -50%) scale(1.15);}
.hotspot:focus { outline: 3px solid #fff; outline-offset: 2px;}
.hotspot--magenta { background: rgba(236, 0, 140, 0.85); box-shadow: 0 0 0 0 rgba(236, 0, 140, 0.55); animation-name: hotspotPulseMagenta;}
.hotspot--green { background: rgba(0, 148, 68, 0.85); box-shadow: 0 0 0 0 rgba(0, 148, 68, 0.55); animation-name: hotspotPulseGreen;}
.hotspot--orange { background: rgba(247, 148, 29, 0.85); box-shadow: 0 0 0 0 rgba(247, 148, 29, 0.55); animation-name: hotspotPulseOrange;}
@keyframes hotspotPulse { 0% {box-shadow: 0 0 0 0 rgba(0,174,239,0.55);} 70% {box-shadow: 0 0 0 18px rgba(0,174,239,0);} 100% {box-shadow: 0 0 0 0 rgba(0,174,239,0);}}
@keyframes hotspotPulseMagenta { 0% {box-shadow: 0 0 0 0 rgba(236,0,140,0.55);} 70% {box-shadow: 0 0 0 18px rgba(236,0,140,0);} 100% {box-shadow: 0 0 0 0 rgba(236,0,140,0);}}
@keyframes hotspotPulseGreen { 0% {box-shadow: 0 0 0 0 rgba(0,148,68,0.55);} 70% {box-shadow: 0 0 0 18px rgba(0,148,68,0);} 100% {box-shadow: 0 0 0 0 rgba(0,148,68,0);}}
@keyframes hotspotPulseOrange { 0% {box-shadow: 0 0 0 0 rgba(247,148,29,0.55);} 70% {box-shadow: 0 0 0 18px rgba(247,148,29,0);} 100% {box-shadow: 0 0 0 0 rgba(247,148,29,0);}}

.hotspot-popover { position: absolute; top: var(--y); left: var(--x); transform: translate(-50%, calc(-100% - 18px)); background: #fff; border-radius: 14px; padding: 16px 18px; min-width: 240px; max-width: 280px; box-shadow: 0 18px 40px rgba(0,0,0,0.18); z-index: 5; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;}
.hotspot-popover.show { opacity: 1; pointer-events: auto; transform: translate(-50%, calc(-100% - 24px));}
.hotspot-popover h4 { font-size: 16px; margin-bottom: 4px;}
.hotspot-popover p { font-size: 13px; color: #6D6E71; margin: 0;}
.hotspot-popover::after { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); width: 14px; height: 14px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%);}

/* Mobile */
@media only screen and (max-width: 575px) {
.hotspot { width: 10px; height: 10px;}
/* Anchoring the popover above the marker (like desktop) can push it off the top of the
   screen for markers near the top of the artwork, hiding it behind the fixed header.
   Centering it in the viewport instead guarantees it's always fully visible on mobile. */
.hotspot-popover { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; min-width: 0; width: calc(100% - 48px); max-width: 300px; padding: 12px 14px; transform: translate(-50%, -50%) scale(0.96);}
.hotspot-popover.show { transform: translate(-50%, -50%) scale(1);}
.hotspot-popover::after { display: none;}
.hotspot.hotspot--orange {top: 66% !important; left: 83% !important;}
.hotspot.hotspot--magenta {top: 32% !important; left: 58% !important;}
}

/* iPad Mini - Portrait */
@media only screen and (min-width: 576px) and (max-width: 768px) {
    .hotspot.hotspot--orange {
        top: 66% !important;
        left: 83% !important;
    }

    .hotspot.hotspot--magenta {
        top: 33% !important;
        left: 55% !important;
    }
}

/* iPad Air - Portrait */
@media only screen and (min-width: 768px) and (max-width: 834px) {
    .hotspot.hotspot--orange {
        top: 65% !important;
        left: 82% !important;
    }

    .hotspot.hotspot--magenta {
        top: 33% !important;
        left: 57% !important;
    }
}

/* iPad Air / iPad Pro - Landscape */
@media only screen and (min-width: 835px) and (max-width: 1199px) {
    .hotspot.hotspot--orange {
        top: 65% !important;
        left: 75% !important;
    }

    .hotspot.hotspot--magenta {
        top: 32% !important;
        left: 53% !important;
    }
}

/*Cause block (dark)*/
.cause-block { border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, #009444 0%, #00AEEF 20%, #2E3192 40%, #EC008C 60%, #ED1C24 75%, #F7941D 90%, #F7DA00 100%); border-image-slice: 1;}
.cause-block h2, .cause-block p { color: #fff;}
.cause-block .partner-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 28px;}
.cause-block .partner-card h4 { color: #fff; font-size: 20px; margin-bottom: 10px;}
.cause-block .partner-card p { color: rgba(255,255,255,0.7); font-size: 14px; margin: 0;}
.cause-block .partner-card .stat { font-size: 42px; font-weight: 700; color: #fff; font-family: "neulis-neue", sans-serif; line-height: 1; margin-bottom: 4px;}
.cause-block .partner-card .stat small { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-top: 6px;}

/*Related "coming soon" mini cards*/
.related-strip { padding: 80px 0;}
.related-card { background: #fff; border: 1px solid #ececec; border-radius: 18px; overflow: hidden; height: 100%; transition: transform 0.3s ease;}
.related-card:hover { transform: translateY(-3px);}
.related-card__media { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #f7f4ee 0%, #efe9dd 100%); display: flex; align-items: center; justify-content: center; position: relative;}
.related-card__media svg { width: 70px; height: 70px; opacity: 0.55;}
.related-card__badge { position: absolute; top: 14px; left: 14px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 5px 10px; border-radius: 999px; color: #fff; background: rgba(0,0,0,0.85);}
.related-card__body { padding: 18px 20px 22px;}
.related-card__body h4 { font-size: 18px; margin-bottom: 6px;}
.related-card__body p { font-size: 14px; color: #6D6E71; margin: 0;}


/*========================================*/
/* Cart page                              */
/*========================================*/
.cart-block { padding-bottom: 80px;}
.cart-lines { background: #fff; border: 1px solid #ececec; border-radius: 20px; overflow: hidden;}
.cart-lines__header { display: grid; grid-template-columns: 2fr 1fr 1.2fr 1fr 40px; gap: 16px; padding: 18px 24px; border-bottom: 1px solid #ececec; background: #f7f4ee; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #6D6E71; font-weight: 600;}
.cart-lines__header > div:nth-child(2), .cart-lines__header > div:nth-child(3), .cart-lines__header > div:nth-child(4) { text-align: center;}

.cart-line { display: grid; grid-template-columns: 2fr 1fr 1.2fr 1fr 40px; gap: 16px; align-items: center; padding: 20px 24px; border-bottom: 1px solid #ececec;}
.cart-line:last-child { border-bottom: 0;}
.cart-line__product { display: flex; gap: 16px; align-items: center; min-width: 0;}
.cart-line__media { flex-shrink: 0; width: 96px; height: 96px; border-radius: 14px; background: #f7f4ee; overflow: hidden;}
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; display: block;}
.cart-line__info h4 { font-size: 18px; margin-bottom: 4px;}
.cart-line__info h4 a { color: #000;}
.cart-line__info h4 a:hover { color: #000;}
.cart-line__variant { font-size: 13px; color: #6D6E71; margin: 0;}
.cart-line__price, .cart-line__total { text-align: center; font-weight: 600; font-size: 16px; color: #000;}
.cart-line__qty { display: flex; justify-content: center;}
.cart-line__qty .qty-stepper { margin: 0; height: 42px;}
.cart-line__qty .qty-stepper button { width: 36px; font-size: 18px;}
.cart-line__qty .qty-stepper input { width: 44px; font-size: 14px;}
.cart-line__remove { background: none; border: 0; padding: 0; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #6D6E71; cursor: pointer; transition: all 0.2s ease;}
.cart-line__remove:hover { background: #fff0f0; color: #ED1C24;}
.cart-line__remove svg { width: 18px; height: 18px;}

.cart-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 24px; flex-wrap: wrap;}
.cart-actions a { color: #6D6E71; font-size: 14px; display: inline-flex; align-items: center; gap: 6px;}
.cart-actions a:hover { color: #000;}
.cart-actions a svg { width: 14px; height: 14px;}

.cart-summary { background: #fff; border: 1px solid #ececec; border-radius: 20px; padding: 28px; position: sticky; top: 110px;}
.cart-summary h3 { font-size: 22px; margin-bottom: 20px;}
.cart-summary__rows { padding: 14px 0; border-top: 1px dashed #ececec; border-bottom: 1px dashed #ececec; margin-bottom: 18px;}
.cart-summary__row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; font-size: 15px; color: #414042;}
.cart-summary__row--total { font-size: 18px; font-weight: 700; color: #000; padding-top: 12px; margin-top: 4px; border-top: 1px solid #ececec;}
.cart-summary__row--total span:last-child { font-family: "neulis-neue", sans-serif; font-size: 24px;}
.cart-summary__row .free { color: #009444; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;}
.cart-summary__row .discount-row { color: #009444;}

.cart-promo { display: flex; gap: 8px; margin-bottom: 18px;}
.cart-promo .form-control { height: 44px; flex: 1; border-radius: 10px;}
.cart-promo .btn-apply { height: 44px; padding: 0 16px; border-radius: 10px; background: #fff; border: 1px solid #000; color: #000; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s ease;}
.cart-promo .btn-apply:hover { background: #000; color: #fff;}

.cart-summary .btn-custom { width: 100%; justify-content: center;}
.cart-summary__trust { margin-top: 18px; display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 10px 28px; font-size: 13px; color: #6D6E71;}
.cart-summary__trust span { display: inline-flex; align-items: center; gap: 8px;}
.cart-summary__trust svg { width: 16px; height: 16px; flex-shrink: 0;}

/*Empty state*/
.cart-empty { text-align: center; padding: 60px 20px 30px; max-width: 520px; margin: 0 auto;}
.cart-empty__icon { width: 120px; height: 120px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; background: #f7f4ee; border-radius: 50%;}
.cart-empty__icon svg { width: 56px; height: 56px; color: #6D6E71;}
.cart-empty h2 { font-size: 28px; margin-bottom: 12px;}
.cart-empty p { color: #6D6E71; margin-bottom: 26px; font-size: 16px;}

/*Responsive cart*/
@media only screen and (max-width: 991px) {
.cart-summary { position: static; margin-top: 30px;}
}
@media only screen and (max-width: 767px) {
.cart-lines__header { display: none;}
.cart-line { grid-template-columns: 1fr; gap: 14px; padding: 20px;}
.cart-line__product { width: 100%;}
.cart-line__price { display: none;}
.cart-line__qty, .cart-line__total { text-align: left; display: flex; justify-content: space-between; align-items: center; padding-left: 112px;}
.cart-line__qty::before { content: "Qty"; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #6D6E71;}
.cart-line__total::before { content: "Total"; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #6D6E71;}
.cart-line__qty { justify-content: flex-start; gap: 12px;}
.cart-line__qty::before { margin-right: auto;}
.cart-line__total { justify-content: flex-start; gap: 12px;}
.cart-line__total::before { margin-right: auto;}
.cart-line__remove { position: absolute; top: 16px; right: 16px;}
.cart-line { position: relative;}
}
@media only screen and (max-width: 575px) {
.cart-line__qty, .cart-line__total { padding-left: 0;}
.cart-line__media { width: 80px; height: 80px;}
}


/*========================================*/
/* Checkout page                          */
/*========================================*/
.secure-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #009444; padding: 6px 14px; border-radius: 999px; background: rgba(0, 148, 68, 0.08); border: 1px solid rgba(0, 148, 68, 0.18); margin-bottom: 16px;}
.secure-badge svg { width: 14px; height: 14px;}

/*Progress*/
.checkout-progress { display: flex; align-items: center; justify-content: center; gap: 0; padding: 30px 0 50px; flex-wrap: wrap;}
.checkout-progress__step { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: #6D6E71; padding: 4px 0;}
.checkout-progress__step .num { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid #ececec; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: #6D6E71;}
.checkout-progress__step.done .num, .checkout-progress__step.current .num { background: #000; color: #fff; border-color: #000;}
.checkout-progress__step.current { color: #000; font-weight: 600;}
.checkout-progress__sep { width: 40px; height: 1px; background: #ececec; margin: 0 14px;}
@media only screen and (max-width: 575px) {
.checkout-progress { padding: 20px 0 30px; gap: 2px;}
.checkout-progress__step { font-size: 12px;}
.checkout-progress__step .num { width: 20px; height: 20px; font-size:12px;}
.checkout-progress__sep { width: 7px; margin: 0 3px;}
}

/*Form layout*/
.checkout-form-section { background: #fff; border: 1px solid #ececec; border-radius: 18px; padding: 28px; margin-bottom: 24px;}
.checkout-form-section legend { font-family: "neulis-neue", sans-serif; font-size: 22px; font-weight: 700; color: #000; margin: 0 0 18px; padding: 0; float: none; width: auto; display: block;}
.checkout-form-section legend .step-no { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #000; color: #fff; font-size: 14px; font-weight: 700; margin-right: 10px; vertical-align: middle;}

.field-group { margin-bottom: 16px;}
.field-group label { display: block; font-size: 13px; color: #414042; font-weight: 500; margin-bottom: 6px;}
.field-group label .req { color: #ED1C24;}
.field-group .form-control { height: 48px; border-radius: 10px; font-size: 15px; border-color: #ececec;}
.field-group .form-control:focus { border-color: #000; background-color: #fff;}
.field-group textarea.form-control { height: auto; min-height: 110px; padding-top: 12px;}
.field-group .err { display: none; color: #ED1C24; font-size: 12px; margin-top: 6px;}
.field-group.has-error .form-control { border-color: #ED1C24;}
.field-group.has-error .err { display: block;}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.field-row.tri { grid-template-columns: 1fr 1fr 1fr;}
@media only screen and (max-width: 575px) {
.field-row, .field-row.tri { grid-template-columns: 1fr;}
}

.checkbox-row { display: flex; align-items: center; gap: 10px; margin-top: 4px;}
.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: #000;}
.checkbox-row label { margin: 0; font-size: 14px; color: #414042;}

/*Shipping method radio cards*/
.ship-methods { display: flex; flex-direction: column; gap: 12px;}
.ship-method { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid #ececec; border-radius: 12px; cursor: pointer; transition: all 0.2s ease;}
.ship-method:hover { border-color: #bdbdbd;}
.ship-method.checked { border-color: #000; background: #fafafa;}
.ship-method input[type="radio"] { width: 18px; height: 18px; accent-color: #000; flex-shrink: 0;}
.ship-method__info { flex: 1;}
.ship-method__info strong { display: block; font-size: 15px; color: #000;}
.ship-method__info span { font-size: 13px; color: #6D6E71;}
.ship-method__price { font-weight: 700; color: #000; font-size: 16px;}
.ship-method__price.free { color: #009444;}

/*Payment*/
.payment-alts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 18px;}
@media only screen and (max-width: 575px) { .payment-alts { grid-template-columns: 1fr; } }
.payment-alt { height: 48px; border-radius: 10px; border: 1px solid #ececec; background: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease;}
.payment-alt:hover { border-color: #000;}
.payment-alt--apple { background: #000; color: #fff; border-color: #000;}
.payment-alt--gpay { background: #fff; color: #000;}
.payment-alt--paypal { background: #ffc439; border-color: #ffc439; color: #003087;}
.payment-divider { display: flex; align-items: center; gap: 12px; color: #6D6E71; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 18px;}
.payment-divider::before, .payment-divider::after { content: ""; flex: 1; height: 1px; background: #ececec;}

.payment-note { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #6D6E71; margin-top: 4px;}
.payment-note svg { width: 14px; height: 14px;}

/*Place order*/
.place-order-block .btn-custom { width: 100%; justify-content: center; height: 60px; line-height: 60px; font-size: 18px;}
.place-order-tiny { font-size: 12px; color: #6D6E71; text-align: center; margin-top: 14px;}
.place-order-tiny a { color: #6D6E71; text-decoration: underline;}
.place-order-tiny a:hover { color: #000;}

/*Order summary (right)*/
.checkout-summary { background: #fff; border: 1px solid #ececec; border-radius: 18px; padding: 24px; position: sticky; top: 110px;}
.checkout-summary__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;}
.checkout-summary__head h3 { font-size: 20px; margin: 0;}
.checkout-summary__head a { font-size: 13px; color: #6D6E71;}
.checkout-summary__head a:hover { color: #000;}

.checkout-lines { display: flex; flex-direction: column; gap: 14px; padding-bottom: 16px; border-bottom: 1px dashed #ececec;}
.checkout-line { display: flex; gap: 12px; align-items: flex-start;}
.checkout-line__media { width: 64px; height: 64px; border-radius: 10px; background: #f7f4ee; overflow: hidden; position: relative; flex-shrink: 0;}
.checkout-line__media img { width: 100%; height: 100%; object-fit: cover;}
.checkout-line__qty-badge { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: #000; color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700;}
.checkout-line__info { flex: 1; min-width: 0;}
.checkout-line__info h5 { font-size: 14px; margin-bottom: 2px; line-height: 1.3;}
.checkout-line__info span { font-size: 12px; color: #6D6E71;}
.checkout-line__price { font-weight: 600; font-size: 14px; color: #000; white-space: nowrap;}

.summary-promo { display: flex; gap: 8px; padding: 16px 0; border-bottom: 1px dashed #ececec;}
.summary-promo .form-control { height: 40px; flex: 1; border-radius: 8px; font-size: 13px;}
.summary-promo .btn-apply { height: 40px; padding: 0 14px; border-radius: 8px; background: #fff; border: 1px solid #000; color: #000; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.2s ease;}
.summary-promo .btn-apply:hover { background: #000; color: #fff;}

.summary-totals { padding-top: 16px;}
.summary-totals__row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: #414042;}
.summary-totals__row.total { font-size: 18px; font-weight: 700; color: #000; padding-top: 12px; margin-top: 6px; border-top: 1px solid #ececec;}
.summary-totals__row.total span:last-child { font-family: "neulis-neue", sans-serif; font-size: 22px;}
.summary-totals__row .free { color: #009444; font-weight: 600;}
.summary-totals__row.discount-row { color: #009444;}

.checkout-summary__trust { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #ececec; display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 8px 24px; font-size: 12px; color: #6D6E71;}
.checkout-summary__trust span { display: inline-flex; align-items: center; gap: 6px;}
.checkout-summary__trust svg { width: 14px; height: 14px; flex-shrink: 0;}

/*Mobile summary toggle*/
.summary-mobile-toggle { display: none; background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 14px 18px; width: 100%; text-align: left; cursor: pointer; margin-bottom: 16px; align-items: center; justify-content: space-between; gap: 12px;}
.summary-mobile-toggle__label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #000; font-weight: 600;}
.summary-mobile-toggle__label svg { width: 16px; height: 16px; transition: transform 0.2s ease;}
.summary-mobile-toggle[aria-expanded="true"] .summary-mobile-toggle__label svg { transform: rotate(180deg);}
.summary-mobile-toggle__total { font-family: "neulis-neue", sans-serif; font-size: 18px; font-weight: 700;}

@media only screen and (max-width: 991px) {
.summary-mobile-toggle { display: flex;}
.checkout-summary { position: static; margin-bottom: 24px;}
.checkout-summary-wrap { display: none;}
.checkout-summary-wrap.show { display: block; visibility: visible;}
}

/*Order placed success*/
.order-placed { text-align: center; padding: 60px 20px; max-width: 640px; margin: 0 auto;}
.order-placed__icon { width: 96px; height: 96px; border-radius: 50%; background: #009444; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px;}
.order-placed__icon svg { width: 44px; height: 44px; color: #fff;}
.order-placed h1 { font-size: 40px; margin-bottom: 14px;}
.order-placed p { color: #6D6E71; margin-bottom: 8px; font-size: 16px;}
.order-placed .order-id { font-size: 18px; color: #000; margin: 24px 0; padding: 14px 18px; background: #f7f4ee; border-radius: 12px; display: inline-block;}
.order-placed .order-id strong { font-family: "neulis-neue", sans-serif;}
.order-placed .actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;}
.order-placed .btn-custom.bdr-btn { background: #fff; color: #000; border: 1px solid #000;}
.order-placed .btn-custom.bdr-btn:hover { background: #000; color: #fff;}


/*========================================*/
/* About page                             */
/*========================================*/
.about-eyebrow { display: inline-block; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #6D6E71; margin-bottom: 18px;}

.about-prose { max-width: 720px; margin: 0 auto; text-align: center;}
.about-prose p { font-size: 17px; color: #414042; margin-bottom: 18px; line-height: 1.65;}
@media only screen and (max-width: 767px) { .about-prose p { font-size: 16px;} }

.pull-quote-band { background-color: #f7f4ee; padding: 80px 0; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec;}
.pull-quote { max-width: 920px; margin: 0 auto; text-align: center; font-family: "neulis-neue", sans-serif; font-size: clamp(26px, 4vw, 44px); line-height: 1.25; color: #000; position: relative; padding: 0 20px;}
.pull-quote::before, .pull-quote::after { font-family: "neulis-neue", sans-serif; font-size: 80px; line-height: 1; color: #EC008C; position: absolute; opacity: 0.55;}
.pull-quote::before { content: "“"; left: -10px; top: -30px;}
.pull-quote::after { content: "”"; right: -10px; bottom: -50px;}
.pull-quote em { font-style: italic;}
.pull-quote__attrib { display: block; font-family: "Instrument Sans", sans-serif; font-size: 14px; font-weight: 400; color: #6D6E71; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 24px;}
@media only screen and (max-width: 767px) {
.pull-quote-band { padding: 50px 0;}
.pull-quote::before, .pull-quote::after { font-size: 50px;}
.pull-quote::before { top: -10px;}
.pull-quote::after { bottom: -25px;}
}

/*Impact pillars (alternating)*/
.impact-pillar { padding: 80px 0;}
.impact-pillar + .impact-pillar { padding-top: 0;}
.impact-pillar__icon { width: 56px; height: 56px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px;}
.impact-pillar__icon svg { width: 28px; height: 28px;}
.impact-pillar h2 { font-size: 36px; margin-bottom: 16px;}
.impact-pillar p { color: #414042; font-size: 16px; line-height: 1.65;}
.impact-pillar .image-wrap { border-radius: 20px; overflow: hidden; background-color: #f7f4ee; aspect-ratio: 4 / 3;}
.impact-pillar .image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block;}

@media only screen and (max-width: 991px) {
.impact-pillar { padding: 50px 0;}
.impact-pillar h2 { font-size: 28px;}
}

/*Ocean cleanup partner highlight*/
.partner-band { background-color: #2E3192; color: #fff; border-radius: 24px; padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center;}
.partner-band h3 { color: #fff; font-size: 28px; margin-bottom: 12px;}
.partner-band p { color: rgba(255,255,255,0.8); margin: 0 0 18px;}
.partner-band .stat-big { font-size: 64px; font-family: "neulis-neue", sans-serif; line-height: 1; color: #fff; font-weight: 700;}
.partner-band .stat-big small { display: block; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 8px; font-weight: 400;}

@media only screen and (max-width: 767px) {
.partner-band { grid-template-columns: 1fr; padding: 28px; border-radius: 18px;}
.partner-band .stat-big { font-size: 48px;}
}

/*About closing CTA*/
.about-cta { padding: 40px 0;}
.about-cta__inner { background-color: #000; color: #fff; border-radius: 24px; padding: 60px 40px; text-align: center; position: relative; overflow: hidden;}
/* Full-width straight rainbow accent lines; parent overflow:hidden clips the ends to the rounded corners (no border-image corner "whiskers") */
.about-cta__inner::before,
.about-cta__inner::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,#F7DA00,#F7941D,#ED1C24,#EC008C,#2E3192,#00AEEF,#009444); pointer-events: none;}
.about-cta__inner::before { top: 0;}
.about-cta__inner::after { bottom: 0;}
.about-cta h2 { color: #fff; font-size: 40px;}
.about-cta p { color: rgba(255,255,255,0.75); max-width: 620px; margin: 0 auto 28px;}
.about-cta .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;}
.about-cta .btn-custom.bdr-btn { background-color: transparent; border: 1px solid rgba(255,255,255,0.4); color: #fff;}
.about-cta .btn-custom.bdr-btn:hover { background-color: #fff; color: #000;}

@media only screen and (max-width: 767px) {
.about-cta { padding: 50px 0;}
.about-cta__inner { padding: 40px 24px; border-radius: 18px;}
.about-cta h2 { font-size: 28px;}
}


/*========================================*/
/* Contact page                           */
/*========================================*/
.contact-block { padding-top: 20px; padding-bottom: 100px;}

.contact-form-card { background: #fff; border: 1px solid #ececec; border-radius: 20px; padding: 36px;}
.contact-form-card h2 { font-size: 28px; margin-bottom: 8px;}
.contact-form-card > p.sub { color: #6D6E71; font-size: 15px; margin-bottom: 24px;}
.contact-form-card .field-group select.form-control { background-color: #fff; border: 1px solid #ececec; color: #000; font-size: 15px; height: 48px; border-radius: 10px; padding: 0 36px 0 14px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;}
.contact-form-card .field-group textarea.form-control { min-height: 140px;}

.contact-form-card .submit-row { display: flex; justify-content: flex-end; margin-top: 10px;}
.contact-form-card .submit-row .btn-custom { min-width: 200px; justify-content: center;}
.contact-form-card .btn-custom:disabled { opacity: 0.5; cursor: not-allowed;}
.contact-form-card .btn-custom:disabled:hover { background-color: #000; color: #fff; border-color: transparent;}

.contact-success { padding: 30px 10px; text-align: center;}
.contact-success__icon { width: 72px; height: 72px; border-radius: 50%; background: #009444; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px;}
.contact-success__icon svg { width: 32px; height: 32px; color: #fff;}
.contact-success h3 { font-size: 24px; margin-bottom: 10px;}
.contact-success p { color: #6D6E71; margin-bottom: 0;}

/*Contact info aside*/
.contact-info-card { background: #f7f4ee; border-radius: 20px; padding: 36px; align-self: flex-start;}
.contact-info-card h2 { font-size: 24px; margin-bottom: 24px;}

.contact-info-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px dashed rgba(0,0,0,0.08);}
.contact-info-item:last-of-type { border-bottom: 0;}
.contact-info-item__icon { width: 40px; height: 40px; border-radius: 12px; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.05);}
.contact-info-item__icon svg { width: 18px; height: 18px;}
.contact-info-item__body { flex: 1;}
.contact-info-item__body strong { display: block; font-size: 14px; color: #000; font-weight: 600; margin-bottom: 2px;}
.contact-info-item__body span, .contact-info-item__body a { font-size: 14px; color: #6D6E71; line-height: 1.5; display: block;}
.contact-info-item__body a:hover { color: #000;}

.contact-social { margin-top: 24px;}
.contact-social__label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #6D6E71; margin-bottom: 12px; font-weight: 600;}
.contact-social__row { display: flex; gap: 10px;}
.contact-social__row a { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: all 0.25s ease; color: #000;}
.contact-social__row a:hover { background: #000; color: #fff; transform: translateY(-2px);}
.contact-social__row a svg { width: 18px; height: 18px;}

@media only screen and (max-width: 991px) {
.contact-form-card, .contact-info-card { padding: 28px;}
.contact-info-card { margin-top: 24px;}
}
@media only screen and (max-width: 575px) {
.contact-form-card .submit-row .btn-custom { width: 100%;}
}

/*FAQ teaser band*/
.faq-teaser-band { background-color: #f7f4ee; padding: 60px 20px; border-radius: 24px; text-align: center; margin: 0 auto;}
.faq-teaser-band h2 { font-size: 32px; margin-bottom: 10px;}
.faq-teaser-band p { color: #6D6E71; margin-bottom: 20px; max-width: 560px; margin-left: auto; margin-right: auto;}

@media only screen and (max-width: 767px) {
.faq-teaser-band { padding: 40px 20px; border-radius: 18px;}
.faq-teaser-band h2 { font-size: 24px;}
}

/*Wholesale strip (dark)*/
.wholesale-strip { background: #000; border-radius: 24px; padding: 60px 40px; text-align: center; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, #009444 0%, #00AEEF 20%, #2E3192 40%, #EC008C 60%, #ED1C24 75%, #F7941D 90%, #F7DA00 100%); border-image-slice: 1;}
.wholesale-strip span.eyebrow { display: inline-block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #F7941D; font-weight: 600; margin-bottom: 14px;}
.wholesale-strip h2 { color: #fff; font-size: 36px; margin-bottom: 14px;}
.wholesale-strip p { color: rgba(255,255,255,0.75); max-width: 700px; margin: 0 auto;}

@media only screen and (max-width: 767px) {
.wholesale-strip { padding: 40px 24px; border-radius: 18px;}
.wholesale-strip h2 { font-size: 24px;}
}


/*========================================*/
/* Legal pages (Terms / Privacy)          */
/*========================================*/
.legal-block { padding-top: 20px; padding-bottom: 80px;}

/*Left nav (sticky on desktop)*/
.legal-nav { position: sticky; top: 110px;}
.legal-nav__heading { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #6D6E71; font-weight: 600; margin-bottom: 14px;}
.legal-nav__list { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 160px); overflow-y: auto; padding-right: 8px;}
.legal-nav__list::-webkit-scrollbar { width: 4px;}
.legal-nav__list::-webkit-scrollbar-thumb { background: #ececec; border-radius: 4px;}
.legal-nav__link { display: block; padding: 8px 12px; font-size: 14px; color: #6D6E71; border-radius: 8px; border-left: 2px solid transparent; transition: all 0.2s ease; line-height: 1.4;}
.legal-nav__link:hover { color: #000; background: #f7f4ee;}
.legal-nav__link.active { color: #000; background: #f7f4ee; border-left-color: #EC008C; font-weight: 600;}

/*Right prose*/
.legal-prose { max-width: 760px;}
.legal-prose h2 { font-size: 28px; margin-bottom: 14px; padding-top: 20px; scroll-margin-top: 110px;}
.legal-prose h2:first-of-type { padding-top: 0;}
.legal-prose h3 { font-size: 17px; margin: 18px 0 8px; font-weight: 600; color: #000;}
.legal-prose p { color: #414042; font-size: 16px; line-height: 1.7; margin-bottom: 14px;}
.legal-prose ol, .legal-prose ul { padding-left: 22px; margin: 0 0 14px;}
.legal-prose ol li, .legal-prose ul li { list-style: revert; color: #414042; font-size: 16px; line-height: 1.7; margin-bottom: 6px;}
.legal-prose a { color: #2E3192; text-decoration: underline;}
.legal-prose a:hover { color: #000;}
.legal-prose .placeholder-note { display: block; font-size: 13px; color: #6D6E71; background: rgba(247, 148, 29, 0.08); border-left: 3px solid #F7941D; padding: 10px 14px; border-radius: 6px; margin: 12px 0 18px;}
.legal-prose section { margin-bottom: 36px;}

@media only screen and (max-width: 991px) {
.legal-nav { position: static; margin-bottom: 30px;}
.legal-nav__list { max-height: none; flex-direction: row; flex-wrap: wrap; overflow-x: auto; padding: 4px 0; gap: 4px;}
.legal-nav__link { padding: 8px 14px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap;}
.legal-nav__link.active { border-bottom-color: #EC008C; border-left: 0;}
.legal-prose h2 { font-size: 24px;}
}

/*Legal CTA band*/
.legal-cta-band { background-color: #f7f4ee; border-radius: 20px; padding: 40px; text-align: center; margin-top: 30px;}
.legal-cta-band h3 { font-size: 24px; margin-bottom: 10px;}
.legal-cta-band p { color: #6D6E71; margin-bottom: 18px;}

@media only screen and (max-width: 575px) {
.legal-cta-band { padding: 30px 24px; border-radius: 16px;}
}


/*========================================*/
/* Status pages (success / failed / 404)  */
/*========================================*/
.status-page { padding: 140px 0 80px; text-align: center;}

.status-page__icon { width: 110px; height: 110px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 26px;}
.status-page__icon svg { width: 52px; height: 52px;}
.status-page__icon--success { background: #009444; animation: successPop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);}
.status-page__icon--success svg { color: #fff;}
.status-page__icon--error { background: rgba(237, 28, 36, 0.08); border: 2px solid rgba(237, 28, 36, 0.18);}
.status-page__icon--error svg { color: #ED1C24;}
.status-page__icon--lost { background: rgba(0, 174, 239, 0.08); border: 2px solid rgba(0, 174, 239, 0.18);}
.status-page__icon--lost svg { color: #00AEEF;}
@keyframes successPop { 0% { transform: scale(0.6); opacity: 0;} 60% { transform: scale(1.08);} 100% { transform: scale(1); opacity: 1;} }

.status-page__big-num { font-family: "neulis-neue", sans-serif; font-size: clamp(96px, 18vw, 200px); font-weight: 700; line-height: 0.9; margin-bottom: 10px; background: linear-gradient(90deg, #009444 0%, #00AEEF 20%, #2E3192 40%, #EC008C 60%, #ED1C24 75%, #F7941D 90%, #F7DA00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}

.status-page h1 { font-size: 40px; margin-bottom: 14px;}
.status-page .lede { font-size: 17px; color: #6D6E71; max-width: 580px; margin: 0 auto 28px; line-height: 1.6;}
.status-page__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px;}
.status-page__actions .btn-custom.bdr-btn { background-color: #fff; color: #000; border: 1px solid #000;}
.status-page__actions .btn-custom.bdr-btn:hover { background-color: #000; color: #fff;}

/*Order details card on success page*/
.order-details-card { max-width: 640px; margin: 28px auto 0; background: #fff; border: 1px solid #ececec; border-radius: 18px; padding: 28px; text-align: left; box-shadow: 0 6px 22px rgba(0,0,0,0.04);}
.order-details-card__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px dashed #ececec; margin-bottom: 14px; gap: 12px; flex-wrap: wrap;}
.order-details-card__head h3 { font-size: 18px; margin: 0;}
.order-details-card__id { font-family: "neulis-neue", sans-serif; font-weight: 700; font-size: 16px; padding: 4px 12px; background: #f7f4ee; border-radius: 8px; color: #000;}
.order-details-card__rows { padding: 6px 0;}
.order-details-card__row { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: 14px; color: #414042;}
.order-details-card__row strong { color: #000;}
.order-details-card__row .val { text-align: right; color: #6D6E71;}
.order-details-card__items { padding: 14px 0; border-top: 1px dashed #ececec; margin-top: 14px;}
.order-details-card__item { display: flex; gap: 12px; align-items: center; padding: 8px 0;}
.order-details-card__item img { width: 56px; height: 56px; border-radius: 10px; background: #f7f4ee; object-fit: cover; flex-shrink: 0;}
.order-details-card__item .info { flex: 1; min-width: 0;}
.order-details-card__item h5 { font-size: 14px; margin: 0 0 2px; line-height: 1.3;}
.order-details-card__item .qty { font-size: 12px; color: #6D6E71;}
.order-details-card__item .price { font-weight: 600; color: #000; font-size: 14px;}
.order-details-card__total { padding-top: 14px; border-top: 1px solid #ececec; margin-top: 12px; display: flex; justify-content: space-between; align-items: baseline;}
.order-details-card__total strong { font-size: 16px;}
.order-details-card__total span:last-child { font-family: "neulis-neue", sans-serif; font-size: 22px; font-weight: 700;}

/*Next steps list*/
.next-steps { max-width: 640px; margin: 50px auto 0; text-align: left; padding: 28px; background: #f7f4ee; border-radius: 18px;}
.next-steps h3 { font-size: 18px; margin-bottom: 14px; text-align: center;}
.next-step { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0;}
.next-step__num { width: 28px; height: 28px; border-radius: 50%; background: #000; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;}
.next-step__body strong { display: block; font-size: 14px; margin-bottom: 2px; color: #000;}
.next-step__body p { font-size: 14px; color: #6D6E71; margin: 0;}

/*Reasons list on failed page*/
.error-reasons { max-width: 540px; margin: 0 auto 32px; text-align: left; background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 22px;}
.error-reasons h4 { font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: #6D6E71; margin-bottom: 12px; font-weight: 600;}
.error-reasons ul { padding-left: 20px; margin: 0;}
.error-reasons li { list-style: disc; color: #414042; font-size: 14px; line-height: 1.6; margin-bottom: 6px;}

/*Popular links grid for 404 page*/
.helpful-links { max-width: 720px; margin: 0 auto;}
.helpful-links__title { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #6D6E71; margin-bottom: 16px;}
.helpful-links__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;}
.helpful-link { background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 16px 18px; display: flex; gap: 12px; align-items: center; transition: all 0.25s ease;}
.helpful-link:hover { border-color: #000; transform: translateY(-2px); color: #000;}
.helpful-link__icon { width: 36px; height: 36px; border-radius: 10px; background: #f7f4ee; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}
.helpful-link__icon svg { width: 18px; height: 18px;}
.helpful-link__label { font-size: 14px; color: #000; font-weight: 600;}

@media only screen and (max-width: 575px) {
.status-page { padding: 100px 0 40px;}
.status-page h1 { font-size: 28px;}
.status-page .lede { font-size: 15px;}
.status-page__icon { width: 90px; height: 90px;}
.status-page__icon svg { width: 42px; height: 42px;}
.order-details-card, .next-steps { padding: 20px;}
}

/* ===================================== */
/* Promo / discount code field (cart + checkout) */
/* ===================================== */
.promo-code { margin-bottom: 18px; }
.promo-code__toggle { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 1px dashed #d5cfc0; border-radius: 12px; padding: 12px 14px; cursor: pointer; font-size: 14px; font-weight: 600; color: #000; transition: background 0.2s ease, border-color 0.2s ease; }
.promo-code__toggle:hover { background: #f7f4ee; border-color: #b8b0a0; }
.promo-code__toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
.promo-code__toggle-text { flex: 1; text-align: left; }
.promo-code__chevron { transition: transform 0.25s ease; }
.promo-code__toggle.is-open .promo-code__chevron { transform: rotate(180deg); }
.promo-code__form { margin-top: 10px; padding: 14px; background: #f7f4ee; border-radius: 12px; }
.promo-code__row { display: flex; gap: 8px; align-items: stretch; }
.promo-code__row input { flex: 1 1 auto; min-width: 0; border: 1px solid #ececec; border-radius: 10px; padding: 10px 12px; font: inherit; background: #fff; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.promo-code__row input:focus { outline: 0; border-color: #000; }
.promo-code__row .btn-custom { flex: 0 0 auto; width: auto; }
.promo-code__row .btn-custom.bdr-btn { background: #000; color: #fff; border: 1px solid #000; }
.promo-code__row .btn-custom.bdr-btn:hover { background: #fff; color: #000; }
.promo-code__row .btn-custom[disabled] { opacity: 0.6; cursor: not-allowed; }
.promo-code__msg { margin: 8px 0 0; font-size: 13px; }
.promo-code__msg.is-error { color: #ED1C24; }
.promo-code__msg.is-success { color: #009444; }
.promo-code__applied { padding: 4px 0; }
.promo-code__chip { display: inline-flex; align-items: center; gap: 8px; background: #e6f4d8; border: 1px solid #c0e0a0; border-radius: 12px; padding: 8px 10px 8px 12px; font-size: 13px; color: #1f5a0c; width: 100%; }
.promo-code__chip strong { color: #006622; font-weight: 700; letter-spacing: 0.04em; }
.promo-code__chip em { font-style: normal; color: #1f5a0c; opacity: 0.8; flex: 1; }
.promo-code__chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.promo-code__chip button { background: transparent; border: 0; padding: 2px; cursor: pointer; color: #1f5a0c; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; transition: background 0.2s ease; }
.promo-code__chip button:hover { background: rgba(0,0,0,0.08); }
.promo-code__chip button svg { width: 14px; height: 14px; }
.cart-summary__row--discount, .summary-totals__row--discount { color: #009444; }

/* ===================================== */
/* Referral programme (order success)     */
/* ===================================== */
.referral-banner { max-width: 760px; margin: 40px auto 0; background: linear-gradient(135deg, #fff6e0 0%, #ffe9f3 50%, #e0f2ff 100%); border-radius: 22px; padding: 36px; position: relative; overflow: hidden; text-align: left; box-shadow: 0 14px 36px rgba(0,0,0,0.06); }
.referral-banner__inner { display: grid; grid-template-columns: 1fr 160px; gap: 24px; align-items: center; position: relative; z-index: 2; }
.referral-banner__copy h2 { font-size: 32px; margin-bottom: 8px; }
.referral-banner__copy p { font-size: 15px; color: #414042; margin-bottom: 16px; }
.referral-banner__eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #EC008C; margin-bottom: 6px; }
.referral-banner__art { display: flex; align-items: center; justify-content: center; }
.referral-banner__art svg { width: 100%; height: auto; max-width: 160px; }
.referral-code { background: rgba(255,255,255,0.85); border: 1px dashed #d5cfc0; border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.referral-code__label { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #6D6E71; margin-bottom: 8px; }
.referral-code__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.referral-code__row code { flex: 1; font-family: "neulis-neue", monospace; font-size: 22px; font-weight: 700; color: #000; letter-spacing: 0.04em; padding: 6px 4px; }
.referral-code__row .btn-custom { height: auto; line-height: 1.2; padding: 10px 18px; font-size: 13px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; }
.referral-code__row .btn-custom.bdr-btn { background: #fff; color: #000; border: 1px solid #000; }
.referral-code__row .btn-custom.bdr-btn:hover { background: #000; color: #fff; }
.referral-code__row .btn-custom.bdr-btn:hover svg { stroke: #fff; }
.referral-share__label { display: block; font-size: 13px; color: #6D6E71; margin-bottom: 8px; }
.referral-share__buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.referral-share__btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid #ececec; color: #000; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; text-decoration: none; }
.referral-share__btn svg { width: 16px; height: 16px; }
.referral-share__btn:hover { background: #000; color: #fff; border-color: #000; }
#shareWhatsApp:hover { background: #25D366; border-color: #25D366; }
#shareFacebook:hover { background: #1877F2; border-color: #1877F2; }
@media (max-width: 767px) {
.referral-banner { padding: 26px 22px; border-radius: 18px; }
.referral-banner__inner { grid-template-columns: 1fr; }
.referral-banner__art { order: -1; max-width: 120px; margin: 0 auto; }
.referral-banner__copy h2 { font-size: 24px; }
.referral-code__row code { font-size: 18px; }
}

/* ===================================== */
/* Promo announcement bar                 */
/* ===================================== */
.promo-bar { background: #0f0f10; color: #FBF8F3; font-size: 13px; line-height: 1.4; position: fixed; top: 0; left: 0; right: 0; z-index: 1050; }
.promo-bar__inner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 44px 9px 16px; max-width: 1400px; margin: 0 auto; position: relative; }
.promo-bar__msg { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; text-align: center; }
.promo-bar__msg svg { width: 14px; height: 14px; flex-shrink: 0; }
.promo-bar__code { background: #F7DA00; color: #0f0f10; font-weight: 700; padding: 1px 7px; border-radius: 4px; letter-spacing: 0.04em; font-size: 12px; }
.promo-bar__link { color: #F7DA00; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.promo-bar__link:hover { color: #fff; }
.promo-bar__close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: rgba(255,255,255,0.75); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease; }
.promo-bar__close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.promo-bar__close svg { width: 14px; height: 14px; }

/* When the bar is visible, shift the whole page and the fixed header down by the bar's
   measured height. --promo-h is set in custom.js so the offset stays correct even if the
   message wraps to two lines on small screens. */
body.has-promo-bar { padding-top: var(--promo-h, 36px); }
body.has-promo-bar .site-header { top: var(--promo-h, 36px); }
@media (max-width: 767px) {
.promo-bar { font-size: 12px; }
.promo-bar__inner { padding: 8px 40px 8px 14px; }
}

/* ===================================== */
/* Refer-a-friend page                    */
/* ===================================== */
.page-hero .breadcrumb-cr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: #6D6E71; margin-bottom: 18px;}
.page-hero .breadcrumb-cr a { color: #6D6E71;}
.page-hero .breadcrumb-cr a:hover { color: #000;}
.page-hero .breadcrumb-cr .sep { color: #ccc;}
.refer-code-section { padding: 0 0 30px; }
.refer-code-panel { max-width: 760px; margin: 0 auto; background: linear-gradient(135deg, #fff6e0 0%, #ffe9f3 50%, #e0f2ff 100%); border-radius: 22px; padding: 40px; box-shadow: 0 14px 36px rgba(0,0,0,0.06); }
.refer-code-panel__eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #EC008C; margin-bottom: 6px; }
.refer-code-panel h2 { font-size: 32px; margin-bottom: 8px; }
.refer-code-panel > .refer-code-panel__copy > p { font-size: 15px; color: #414042; margin-bottom: 18px; }
.refer-code-empty { max-width: 560px; margin: 0 auto; text-align: center; background: #f7f4ee; border-radius: 22px; padding: 40px; }
.refer-code-empty__art { margin-bottom: 18px; }
.refer-code-empty__art svg { width: 70px; height: 70px; }
.refer-code-empty h2 { font-size: 28px; margin-bottom: 10px; }
.refer-code-empty p { font-size: 15px; color: #6D6E71; margin-bottom: 24px; }
.refer-code-empty .btn-custom { justify-content: center; }
@media (max-width: 767px) {
.refer-code-panel { padding: 28px 22px; border-radius: 18px; }
.refer-code-panel h2, .refer-code-empty h2 { font-size: 24px; }
.refer-code-empty { padding: 30px 22px; }
}

/* ===================================== */
/* Ocean Cleanup page                     */
/* ===================================== */

/* Hero image frame */
.oc-hero-image { padding: 12px 0 0; background-color: #fff; }
.oc-hero-image__frame { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,0.10); }
.oc-hero-image__frame img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.oc-hero-image__credit { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 18px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%); color: #fff; font-size: 12px; letter-spacing: 0.02em; }
@media (max-width: 767px) { .oc-hero-image__frame img { aspect-ratio: 16 / 9; } }

/* Section base */
.oc-section { background-color: #fff; }
.oc-section h2 { font-size: 36px; }
.oc-section p { color: #414042; font-size: 16px; line-height: 1.65; margin-bottom: 14px; }
@media (max-width: 991px) { .oc-section h2 { font-size: 28px; } }

/* Image wrap (reused across sections) */
.oc-image-wrap { border-radius: 20px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,0.08); }
.oc-image-wrap img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* External link */
.oc-external-link { display: inline-flex; align-items: center; color: #000; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.oc-external-link:hover { color: #EC008C; }

/* Impact stat band */
.oc-impact-band { background: linear-gradient(135deg, #00529B 0%, #00AEEF 100%); padding: 60px 0; color: #fff; }
.oc-impact-band__inner { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: 36px; align-items: center; }
.oc-impact-band__stat { text-align: center; padding: 20px 24px; border-right: 1px dashed rgba(255,255,255,0.3); }
.oc-impact-band__num { display: block; font-family: "neulis-neue", sans-serif; font-size: clamp(32px, 6vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: #F7DA00; white-space: nowrap; }
.oc-impact-band__unit { display: block; margin-top: 6px; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.oc-impact-band__copy p { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.92); }
@media (max-width: 1199px) {
.oc-impact-band__inner { grid-template-columns: 1fr; gap: 20px; }
.oc-impact-band__stat { border-right: 0; border-bottom: 1px dashed rgba(255,255,255,0.3); padding-bottom: 24px; }
}

/* Gallery */
.oc-gallery { background-color: #fff; padding-bottom: 80px; }
.oc-gallery h2 { font-size: 32px; }
.oc-gallery__tile { margin: 0; border-radius: 18px; overflow: hidden; background: #f7f4ee; box-shadow: 0 10px 24px rgba(0,0,0,0.06); transition: transform 0.35s ease, box-shadow 0.35s ease; }
.oc-gallery__tile:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,0.10); }
.oc-gallery__tile img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.oc-gallery__tile figcaption { padding: 12px 16px 14px; font-size: 13px; color: #6D6E71; }

/* Why Colour Roll supports section */
.oc-why { background-color: #f7f4ee; }
.oc-why h2 { font-size: 36px; }
.oc-why p { color: #414042; font-size: 16px; line-height: 1.65; margin-bottom: 14px; }
@media (max-width: 991px) { .oc-why h2 { font-size: 28px; } }

/* Disclaimer — prominent partnership disclosure */
.oc-disclaimer { background-color: #fff; padding: 40px 0 40px; }
.oc-disclaimer__card { position: relative; max-width: 820px; margin: 0 auto; display: flex; gap: 20px; align-items: flex-start; padding: 28px 32px 28px 36px; background: linear-gradient(135deg, #fff6e0 0%, #fde8b8 100%); border: 1px solid #f0c870; border-left: 6px solid #F7941D; border-radius: 16px; box-shadow: 0 10px 28px rgba(247, 148, 29, 0.12); color: #5a3a00; }
.oc-disclaimer__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background-color: #F7941D; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(247, 148, 29, 0.35); }
.oc-disclaimer__icon svg { width: 22px; height: 22px; }
.oc-disclaimer__body { flex: 1; min-width: 0; }
.oc-disclaimer__label { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #b85e00; margin-bottom: 6px; }
.oc-disclaimer__card p { margin: 0; font-size: 16px; line-height: 1.65; color: #1b1b1b; font-weight: 500; }

@media (max-width: 575px) {
.oc-hero-image__frame img { aspect-ratio: 4 / 3; }
.oc-disclaimer { padding: 0 0 50px; }
.oc-disclaimer__card { padding: 22px 22px 22px 24px; gap: 14px; border-left-width: 5px; }
.oc-disclaimer__icon { width: 38px; height: 38px; }
.oc-disclaimer__icon svg { width: 18px; height: 18px; }
.oc-disclaimer__card p { font-size: 14.5px; }
}

/* ===================================== */
/* Our Impact — extras for restructured   */
/* page (hero tagline, tile stack, etc.)  */
/* ===================================== */

/* Hero tagline (sits between H1 and the lede paragraph) */
.oc-tagline { font-family: "neulis-neue", Georgia, "Times New Roman", serif; font-style: italic; font-size: 20px; line-height: 1.35; color: #1b1b1b; max-width: 720px; margin: 4px auto 14px; font-weight: 500; }
@media (max-width: 767px) { .oc-tagline { font-size: 17px; } }

/* Our Impact page-specific hero compactness — keeps the hero + banner image
   within a single comfortable viewport without affecting other pages. */
.page-our-impact .page-hero { padding-bottom: 40px; }
.page-our-impact .page-hero h1 { margin-bottom: 12px; font-size: 44px; }
.page-our-impact .page-hero p.lede { font-size: 16px; }
@media (max-width: 991px) {
.page-our-impact .page-hero { padding-bottom: 4px; }
.page-our-impact .page-hero h1 { font-size: 34px; }
}
@media (max-width: 575px) {
.page-our-impact .page-hero h1 { font-size: 28px; }
}

/* Partnership two-column section */
.oc-partnership { background-color: #fff; }
.oc-partnership h2 { font-size: 36px; }
.oc-partnership p { color: #414042; font-size: 16px; line-height: 1.65; margin-bottom: 14px; }
@media (max-width: 991px) { .oc-partnership h2 { font-size: 28px; } }

/* Right-rail image stack: 1 lead tile + 2 smaller tiles below */
.oc-tile-stack { display: flex; flex-direction: column; gap: 16px; }
.oc-tile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.oc-tile { position: relative; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,0.08); transition: transform 0.35s ease, box-shadow 0.35s ease; background: #f7f4ee; }
.oc-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,0.12); }
.oc-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.oc-tile--lead img { aspect-ratio: 16 / 9; }
.oc-tile-row .oc-tile img { aspect-ratio: 1 / 1; }
.oc-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 16px 12px; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.3; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 100%); letter-spacing: 0.01em; }
@media (max-width: 991px) {
.oc-tile-stack { margin-top: 24px; }
}
@media (max-width: 479px) {
.oc-tile-row { grid-template-columns: 1fr; }
.oc-tile figcaption { font-size: 12px; padding: 14px 14px 10px; }
}

/* Impact band — globe icon (added to the existing band) */
.oc-impact-band__icon { display: block; margin: 0 auto 10px; width: 64px; height: 64px; opacity: 0.95; }
.oc-impact-band__icon svg { width: 100%; height: 100%; display: block; }
@media (max-width: 767px) { .oc-impact-band__icon { width: 52px; height: 52px; } }

/* ===================================== */
/* Our Journey Is Just Beginning           */
/* ===================================== */
.cr-journey-section { background-color: #fff; padding: 40px 0; }
.cr-journey { max-width: 760px; margin: 0 auto; text-align: center; }
.cr-journey .about-eyebrow { margin-bottom: 12px; }
.cr-journey h2 { font-size: 38px; line-height: 1.2; margin-bottom: 22px; }
.cr-journey p { font-size: 17px; line-height: 1.7; color: #414042; margin-bottom: 18px; }
.cr-journey p:last-child { margin-bottom: 0; color: #000; font-weight: 500; }
@media (max-width: 991px) { .cr-journey h2 { font-size: 30px; } .cr-journey p { font-size: 16px; } }
@media (max-width: 575px) { .cr-journey-section { padding: 60px 0; } .cr-journey h2 { font-size: 26px; } }

/* ===================================== */
/* Colour today. Protect tomorrow. banner */
/* ===================================== */
.cr-protect-tomorrow { background: linear-gradient(180deg, #f5f9fd 0%, #e8f3fa 100%); padding: 40px 0; }
.cr-protect-tomorrow__inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 88px 1fr auto; gap: 28px; align-items: center; }
.cr-protect-tomorrow__icon { width: 88px; height: 88px; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(15,15,16,0.08); }
.cr-protect-tomorrow__icon svg { width: 38px; height: 38px; }
.cr-protect-tomorrow__title { font-family: "neulis-neue", Georgia, "Times New Roman", serif; font-size: 36px; line-height: 1.15; font-weight: 700; color: #0F0F10; margin: 0 0 8px 0; }
.cr-protect-tomorrow__title span { display: inline-block; }
.cr-protect-tomorrow__copy p { font-size: 16px; line-height: 1.55; color: #414042; margin: 0; max-width: 560px; }
.cr-protect-tomorrow__cta .btn-custom { white-space: nowrap; }
@media (max-width: 991px) {
.cr-protect-tomorrow__inner { grid-template-columns: 72px 1fr; gap: 22px; }
.cr-protect-tomorrow__cta { grid-column: 1 / -1; }
.cr-protect-tomorrow__cta .btn-custom { width: 100%; justify-content: center; }
.cr-protect-tomorrow__icon { width: 72px; height: 72px; }
.cr-protect-tomorrow__icon svg { width: 32px; height: 32px; }
.cr-protect-tomorrow__title { font-size: 30px; }
}
@media (max-width: 575px) {
.cr-protect-tomorrow { padding: 50px 0; }
.cr-protect-tomorrow__inner { grid-template-columns: 1fr; text-align: center; gap: 18px; }
.cr-protect-tomorrow__icon { margin: 0 auto; }
.cr-protect-tomorrow__copy p { margin: 0 auto; }
.cr-protect-tomorrow__title { font-size: 26px; }
}


.pre-order-pill { position: absolute; background: rgba(0,0,0,0.85); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30); }

/* ===================================== */
/* Pre-Order notice — shared component    */
/* ===================================== */
/* Inline banner variant (cart, checkout, order-success, PDP fallback) */
.pre-order-notice { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #fff6e0 0%, #fde8b8 100%); border: 1px solid #f0c870; border-left: 5px solid #F7941D; border-radius: 12px; padding: 14px 18px; color: #5a3a00; box-shadow: 0 6px 18px rgba(247, 148, 29, 0.10); }
.pre-order-notice__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #F7941D; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.pre-order-notice__icon svg { width: 16px; height: 16px; }
.pre-order-notice__body { flex: 1; min-width: 0; font-family: inherit; }
.pre-order-notice__badge { display: inline-block; background: #F7941D; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; margin-right: 8px; vertical-align: 1px; }
.pre-order-notice__msg { font-size: 14px; line-height: 1.55; color: #1b1b1b; font-weight: 500; }
.pre-order-notice__msg strong { color: #0F0F10; font-weight: 700; }

/* Card variant — larger, more prominent (product-details.html) */
.pre-order-notice--card { display: block; padding: 18px 22px; border-radius: 14px; margin: 4px 0 18px; }
.pre-order-notice--card .pre-order-notice__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pre-order-notice--card .pre-order-notice__badge { margin-right: 0; font-size: 11px; padding: 4px 10px; }
.pre-order-notice--card .pre-order-notice__title { font-family: "neulis-neue", Georgia, "Times New Roman", serif; font-size: 16px; font-weight: 700; color: #0F0F10; }
.pre-order-notice--card .pre-order-notice__msg { font-size: 14px; margin: 0; }
.pre-order-notice--card .pre-order-notice__msg strong { display: block; color: #0F0F10; margin-bottom: 2px; }

/* Optional sub-line under a CTA button (checkout Place Order, homepage hero) */
.pre-order-subline { display: block; margin-top: 10px; font-size: 12px; line-height: 1.5; color: #6B6760; }
.pre-order-subline strong { color: #0F0F10; font-weight: 600; }

@media (max-width: 575px) {
.pre-order-notice { gap: 12px; padding: 12px 14px; }
.pre-order-notice__icon { width: 28px; height: 28px; }
.pre-order-notice__msg { font-size: 13px; }
.pre-order-notice--card { padding: 16px 18px; }
}