/** Shopify CDN: Minification failed Line 1601:1 Expected identifier but found "*" Line 1663:1 Expected identifier but found "*" Line 1664:1 Expected identifier but found "*" Line 2834:0 Unexpected "}" Line 7532:4 Expected identifier but found whitespace **/ /*** colors **** Purple:var(--color-dark-purple) // used in menu or btn Darker Purlple: #35246f // used in menu Sky Blue: #21bcc1 // used for icons Green :#01a950 // used for price light Gray: #fefefe // site Main Bg color Dark Gray :#333333 // used for footer /*** fonts ** font-family: Poppins,Arial, sans-serif; font-family: 'Roboto Condensed ', sans-serif; */ /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,u,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} i{font-weight:100; font-style:italic} /*** General ***/ body{ font-family: Roboto,Arial, sans-serif; /*letter-spacing: -.003em;*/ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* img{display: block; max-width: 100%} */ img{max-width: 100%} /** inputs ***/ input{-webkit-appearance: none;-moz-appearance: none;appearance: none;} /*** general styles ***/ .clearfix:before, .clearfix:after {content:"\0020";display:block;height:0;visibility:hidden} .clearfix:after { clear:both; } .clearfix { zoom:1} #device{margin-left:2px;} .container{} #mainWrapper{min-height: 500px; padding-top: 70px} .bcTrail{ /*padding: 20px 0;*/ /*joren tweak*/ padding:20px 0 30px 0; } .bcTrail .separator{ display: none; } .bcTrail a, .bcTrail span{ background: url(_bcArrow.png) no-repeat 0px 2px; padding-left: 15px; color: #4d4d4d; float: left; } .bcTrail a, .bcTrail span{ color: #4d4d4d; text-decoration: none; font-size: 16px; font-family: Roboto,Arial, sans-serif; font-weight: 400; margin-right: 10px; } .bcTrail a{ color: var(--color-dark-purple); } /* Product page breadcrumb (nav row + store note; legacy bcTrail arrows not used here) */ #breadcrumb.product-breadcrumb { padding: 1rem 12px 1.25rem; box-sizing: border-box; text-align: left; } #breadcrumb.product-breadcrumb .product-breadcrumb__inner { max-width: 100%; margin: 0; } #breadcrumb.product-breadcrumb .product-breadcrumb__row { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: flex-start; align-items: flex-start; justify-content: flex-start; width: 100%; } #breadcrumb.product-breadcrumb .product-breadcrumb__primary { -webkit-flex: 1 1 auto; flex: 1 1 auto; width: 100%; min-width: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-start; -webkit-align-items: baseline; align-items: baseline; font-family: Roboto, Arial, sans-serif; font-size: 0.9375rem; font-weight: 400; line-height: 1.45; color: #6b6b6b; white-space: normal; overflow-x: visible; overflow-wrap: break-word; word-wrap: break-word; } /* Safari <14.1: flex gap ignored — space between brand / › / links / SKU (matches former0.35rem column-gap) */ #breadcrumb.product-breadcrumb .product-breadcrumb__primary > * + * { margin-left: 0.35rem; } #breadcrumb.product-breadcrumb .product-breadcrumb__primary > .product-breadcrumb__sep { color: #b0b0b0; font-weight: 300; user-select: none; /* Extra air around › so it doesn’t kiss link text (margin-left comes from > * + *) */ margin-right: 0.15rem; } #breadcrumb.product-breadcrumb .product-breadcrumb__primary > .product-breadcrumb__sep--menu { color: #888; font-weight: 400; margin-right: 0.2rem; } #breadcrumb.product-breadcrumb .product-breadcrumb__brand { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-start; } #breadcrumb.product-breadcrumb .product-breadcrumb__primary a { color: var(--color-dark-purple); text-decoration: none; /* Invisible 1px border reserves space so hover (color only) matches the old “no underline” look without reflow */ border-bottom: 1px solid transparent; transition: color 0.15s ease; } #breadcrumb.product-breadcrumb .product-breadcrumb__primary a:hover { color: #330072; text-decoration: none; border-bottom-color: transparent; } #breadcrumb.product-breadcrumb .product-breadcrumb__note { -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 100%; max-width: 100%; margin: 0.35rem 0 0 0; font-family: Roboto, Arial, sans-serif; font-size: 0.8125rem; line-height: 1.45; color: #888; text-align: left; white-space: normal; min-width: 0; /* Hidden for now — markup kept in product.liquid; delete this line + the next to show again */ display: none !important; } @media (max-width: 767.9px) { #breadcrumb.product-breadcrumb { padding-left: 14px; padding-right: 14px; text-align: center; } #breadcrumb.product-breadcrumb .product-breadcrumb__row { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; } #breadcrumb.product-breadcrumb .product-breadcrumb__primary { font-size: 0.875rem; flex: 0 1 auto; width: 100%; min-width: 0; justify-content: center; flex-wrap: wrap; } #breadcrumb.product-breadcrumb .product-breadcrumb__brand { justify-content: center; } #breadcrumb.product-breadcrumb .product-breadcrumb__note { font-size: 0.75rem; line-height: 1.35; white-space: normal; flex: 0 1 auto; width: 100%; max-width: 100%; text-align: center; margin: 0.5rem 0 0 0; } } /* PDP: align with main column — extra-wide #breadcrumb.container is 1500px; cap breadcrumb at 1220px like .desktop-container */ body.template-product #breadcrumb.product-breadcrumb.container { max-width: 1220px !important; box-sizing: border-box; } /*=== Header ===*/ #header{overflow: visible; background-repeat: no-repeat; position: fixed; width: 100%; z-index: 100000; /*border-top: solid 8px var(--color-dark-purple);*/ background: url('header-bg.jpg');} #header:after{content:''; position: absolute;background: transparent url('headerShadow.png') no-repeat -10px ; bottom: -20px; display: block;width: 100%; height: 20px; background-size: 100% 20px} #header .container > div{display: inline-block; vertical-align: middle; float: left;} /*** logo ***/ .logo{width: 180px; } .logo img{width: 140px} .navBtn, .headSideLink > div{display: inline-block;vertical-align: middle; padding:15px 15px; width:20px; height: 20px;border-right:1px solid #e2e2e2; touch-action: manipulation;} /*** header right side icons ***/ .headSideLink{display: inline-block; float: right;border-left: 1px solid #e2e2e2; vertical-align: top;height:60px;} .login a, .icon-cart, .navBtn span{ display: inline-block; width: 20px; height: 22px; background: url('_accountIcon.png') no-repeat; background-size: cover} .icon-cart{background-image:url('_cartIcon.png'); } #cart-target{position: relative;} #cart-count{ background-color: var(--color-light-green); border-radius: 50%; color: #fff; display: inline-block; font-size:12px; padding: 5px 7px; position: absolute;top:2%; right: 1%} /** menu btn **/ .navBtn span {background-image:url('mobile-burger.png'); height: 18px; } .mm-opened .navBtn{ background-color: var(--color-dark-green)} .mm-opened .navBtn span{background-image:url('hambCLIcon.png');} /** search form ***/ .srchBtn svg{fill:#767676;height: 20px} .searchCont .search {position: absolute; display: none;width: 100px; background-color: var(--color-dark-purple); right: 0; width: 100%; bottom: -54px; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box} .searchCont .search .search_box{ border:1px solid #d8d8d8; border-radius: 3px; width: 100%;padding: 8px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;font-family: Roboto,Arial, sans-serif; outline: none;} .searchCont .search #go { background: url(_searchPIcon.png) no-repeat; content: none; position: absolute; right: 20px; top: 18px; width: 20px; height: 20px; border: 0; } .showSrch{background-color: var(--color-dark-purple);} .showSrch .search{ display: block;z-index:10;} .showSrch .srchBtn svg{fill:#fff} /*** menu****/ /* jQuery.mmenu CSS */ /* jQuery.mmenu panels CSS */ .mm-menu.mm-horizontal > .mm-panel {-webkit-transition: -webkit-transform 0.4s ease;transition: transform 0.4s ease;} .mm-menu .mm-hidden {display: none} .mm-wrapper {overflow-x: hidden;position: relative; } .mm-menu, .mm-menu > .mm-panel {width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 0} .mm-menu {background: inherit;display: block;overflow: hidden;padding: 0} .mm-menu > .mm-panel {background: inherit;-webkit-overflow-scrolling: touch;overflow: scroll; overflow-x: hidden;overflow-y: auto; box-sizing: border-box;padding: 20px;-webkit-transform: translateX(100%);transform: translateX(100%)} .mm-menu > .mm-panel.mm-opened {-webkit-transform: translateX(0%);transform: translateX(0%); } .mm-menu > .mm-panel.mm-subopened {-webkit-transform: translateX(-30%);transform: translateX(-30%)} .mm-menu > .mm-panel.mm-highest {z-index: 1} .mm-menu .mm-list {padding: 0 0} .mm-menu > .mm-list {padding-bottom: 0} .mm-menu > .mm-list:after {content: '';display: block;height: 40px} .mm-panel > .mm-list {margin-left: -20px;margin-right: -20px; } .mm-panel > .mm-list:first-child {padding-top: 0} .mm-list, .mm-list > li {list-style: none;display: block; padding: 0;margin: 0} .mm-list {font: inherit;font-size: 14px; } /*.mm-list a, .mm-list a:hover {text-decoration: none; text-transform: uppercase; color: #fff }*/ .mm-list > li {position: relative; -webkit-transition: background-color 0.2s ; -o-transition: background-color 0.2s ; transition: background-color 0.2s;} .mm-list > li > a, .mm-list > li > span {text-overflow: ellipsis;white-space: nowrap;overflow: hidden; color: #fff;line-height: 20px;display: block;margin: 0;} .mm-list > li > a > span {display: inline-block; vertical-align: middle;padding: 10px} .mm-list .current, .mm-list > li:hover{ background-color: #35246f;} .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after {content: ''; border-bottom-width: 1px;border-bottom-style: solid;display: block;width: 100%;position: absolute;bottom: 0;left: 0;} .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after {width: auto;position: relative;left: auto; } .mm-list a.mm-subopen {background: rgba(3, 2, 1, 0);width: 40px;height: 100%;padding: 0;position: absolute;right: 0;top: 0;z-index: 2;} .mm-list a.mm-subopen:before {content: '';border-left-width: 1px;border-left-style: solid;display: block; height: 100%;position: absolute;left: 0;top: 0} .mm-list a.mm-subopen.mm-fullsubopen {width: 100%} .mm-list a.mm-subopen.mm-fullsubopen:before {border-left: none} .mm-list a.mm-subopen + a, .mm-list a.mm-subopen + span {padding-right: 5px;margin-right: 40px } .mm-list > li.mm-selected > a.mm-subopen {background: transparent } .mm-list > li.mm-selected > a.mm-fullsubopen + a, .mm-list > li.mm-selected > a.mm-fullsubopen + span {padding-right: 45px;margin-right: 0; } .mm-list a.mm-subclose {text-indent: 20px;padding-top: 30px;margin-top: -20px} .mm-list > li.mm-label {text-overflow: ellipsis;white-space: nowrap;overflow: hidden; font-size: 10px;text-transform: uppercase;text-indent: 20px;line-height: 25px; padding-right: 5px } .mm-list > li.mm-spacer {padding-top: 40px } .mm-list > li.mm-spacer.mm-label {padding-top: 25px} .mm-list a.mm-subopen:after, .mm-list a.mm-subclose:before {content: '';border: 2px solid transparent; display: inline-block;width: 7px;height: 7px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg); margin-bottom: -5px;position: absolute;bottom: 50% } .mm-list a.mm-subopen:after {border-top: none;border-left: none; right: 18px} .mm-list a.mm-subclose:before {border-right: none;border-bottom: none;margin-bottom: -15px;left: 22px} .mm-menu.mm-vertical .mm-list .mm-panel {display: none;padding: 7px 0 0px 0px;} .mm-menu.mm-vertical .mm-list .mm-panel li:last-child:after {border-color: transparent} .mm-menu.mm-vertical .mm-list li.mm-opened > .mm-panel {display: block} .mm-menu.mm-vertical .mm-list > li > a.mm-subopen {height: 40px} .mm-menu.mm-vertical .mm-list > li > a.mm-subopen:after {top: 16px;right: 16px;bottom: auto} .mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen:after {-webkit-transform: rotate(45deg);transform: rotate(45deg)} .mm-menu.mm-vertical .mm-list > li.mm-label > a.mm-subopen {height: 25px} html.mm-opened .mm-page {box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); z-index: 999999; } .mm-menu {background: var(--color-dark-purple);color: rgba(255, 255, 255, 0.6); } .mm-menu .mm-list > li:after {border-color: #6954a5} .mm-menu .mm-list > li > a.mm-subclose {background: rgba(0, 0, 0, 0.1);color: rgba(255, 255, 255, 0.3)} .mm-menu .mm-list > li > a.mm-subopen:after, .mm-menu .mm-list > li > a.mm-subclose:before {border-color: rgba(255, 255, 255, 0.3); } .mm-menu .mm-list > li > a.mm-subopen:before {border-color: rgba(0, 0, 0, 0.15) } .mm-menu .mm-list > li.mm-selected > a:not(.mm-subopen), .mm-menu .mm-list > li.mm-selected > span {background: rgba(0, 0, 0, 0.1)} .mm-menu .mm-list > li.mm-label {background: rgba(255, 255, 255, 0.05); } .mm-menu.mm-vertical .mm-list li.mm-opened > a.mm-subopen, .mm-menu.mm-vertical .mm-list li.mm-opened > ul {background: rgba(255, 255, 255, 0.05); } /* jQuery.mmenu offcanvas addon CSS*/ .mm-page {-webkit-transition: -webkit-transform 0.4s ease;transition: transform 0.4s ease; } html.mm-opened {overflow: hidden;position: relative; scrollbar-gutter: auto} html.mm-opened body {overflow: hidden} html.mm-opened .mm-page {box-sizing: border-box;position: relative} html.mm-background .mm-page {background: inherit} #mm-blocker {background: rgba(3, 2, 1, 0);display: none;width: 100%;height: 100%; position: fixed;top: 0px!important;left: 0;z-index: 999999} html.mm-opened #mm-blocker, html.mm-blocking #mm-blocker {display: block} .mm-menu.mm-offcanvas {display: none; position: fixed} .mm-menu.mm-current {display: block } /* Use vw so drawer width matches slide distance (80% + max440px used to desync and leave a gutter) */ .mm-menu {width: min(80vw, 440px);min-width: 140px;max-width: 440px} .mm-opened .mm-page #header{ position: relative;} html.mm-opening .mm-page, html.mm-opening #mm-blocker { -webkit-transform: translate3d(min(80vw, 440px), 0, 0);transform: translate3d(min(80vw, 440px), 0, 0) } /*** menu Icons ***/ #mm-mainNav .mm-panel{padding-top:0!important;} #mm-mainNav span.icon{background-color: #35246f; background-repeat: no-repeat; padding: 15px 10px;display: inline-block; background-position: center center; width: 30px;height:30px; background-size: 70%} .appaIcon{ background-image:url('_appaIcon.png'); } .saleIcon{background-image:url('_saleIcon.png');} .racIcon{background-image:url('_racIcon.png');} .serIcon{background-image:url('_serIcon.png');} .courIcon{background-image:url('_courIcon.png');} .footIcon{background-image:url('_footIcon.png');} .striIcon{background-image:url('_striIcon.png');} .acceIcon{background-image:url('_acceIcon.png');} /*** Main nav ****/ #mainNav{display: none;} /*** data display ***/ .dataDisplay {/*width: 180px; */padding-top: 10px;} .dataDisplay .label{float: left; color:#c0c0c0; line-height: 26px;} .dataDisplay .desc{float: left; padding-left:10px;} /*** footer ***/ #footer{background-color: #333333; color: #c0c0c0} .footerTLinks .threeCol .col, .footerBLinks li{ border-bottom:1px solid #545454; } .footerTLinks .col > span{color: #fff; padding:15px 15px 15px 45px; display: block; background: no-repeat 15px 19px;font-family:Poppins,Arial, sans-serif;font-size:18px;} .footerTLinks .col > span > a{color: #fff; text-decoration: none;} .footerTLinks p{clear: both; display: block; color:#c0c0c0; padding-top: 10px; font:100 16px Roboto,Arial, sans-serif} .tel{background-image:url('_phone.png')!important;} .hLoc{background-image:url('_loca-empty.png')!important;} .email{background-image:url('_email.png')!important;} .storeLoc{background-image:url('_loca.png')!important;} .storeH{background-image:url('_clock.png')!important;} .footerTLinks .dataDisplay{font:100 16px Roboto,Arial, sans-serif } /** payment ***/ .paymentWrap{padding: 15px 0;text-align: center;border-bottom: 1px solid #545454} .paymentWrap img{ margin: 0 auto} .paymentWrap .credit-cards{display: inline-block; } .paymentWrap .credit-cards img{ display: inline-block; margin-right: 5px; margin-bottom: 10px;} /** footer sitemap ***/ .footerBLinks li {padding: 15px} .footerBLinks li a{color: #c0c0c0; text-decoration: none;} .footerBLinks li a:hover{ color: var(--color-light-green);} /** social ***/ .socialIconWrap{ text-align: center; padding: 20px 0} .socialIcons {display: inline-block; margin: 0 auto} .socialIcons a{ display: inline-block; text-align: center; width: 48px; color:#d9d9d9;text-decoration: none;font-size:14px; max-height: 60px} .socialIcons a svg { fill:#d9d9d9; width: 34px} .socialIcons a:hover svg{fill:var(--color-light-green)} /** copyrights **/ .copyright{background-color: #232323; text-align: center;padding: 15px 0; color:#c0c0c0;} .hideMob{display:none;} /*** forms ****/ input.btn {font-family: Poppins,Arial, sans-serif; color: #fff;font-size: 18px;text-decoration: none; display: block;text-align: center;background: var(--color-dark-purple); -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;border: none;padding: 10px 0 10px 0; margin-bottom: 20px;-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.36); -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.36); box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.36); width: 100%; } .contentForm input.text{ border-radius: 5px; border:1px solid #c0c0c0; box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.36); min-height: 40px; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f2f2f2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f2f2f2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f2f2f2 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#f2f2f2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */ width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; padding:5px; margin-bottom:15px; } .emailTxt, .passTxt{ position: relative;} .emailTxt:before, .passTxt:before{ background:url('eInputIcon.png') 0 50% no-repeat; display: inline-block; -webkit-background-size: cover; background-size: cover; width: 28px; height: 28px; position: absolute; content: '';margin:5px 10px} .passTxt:before{background-image: url("pInputIcon.png")!important;} .emailTxt input.text, .passTxt input.text{ padding-left: 40px;} .contentForm .row{ padding-bottom: 15px} .contentForm a{ color:var(--color-dark-purple); text-decoration: none;} .aMiddle{display: block; text-align: center;} /** validation ***/ .contentForm .errors{ color: var(--color-dark-green);padding: 0 0 5px 0;} /*** login ****/ .creatAccount{ padding-top: 25px;margin-top: 25px ; border-top: 0px solid #c8c8c8;} .creatAccount div{padding-bottom: 10px} /*** refine menu ***/ #refineSearch.mm-menu { background-color: #fff; color: #4d4d4d} #refineSearch.mm-menu .collection-side-bar > .mm-list{padding:10px 20px} #refineSearch.mm-menu .collection-side-bar > .mm-list li{padding:8px 0 } #refineSearch.mm-menu.mm-vertical .mm-list .mm-panel{display: block;} /*#refineSearch .mm-list a, #refineSearch .mm-list a:hover { color: var(--color-dark-purple) !important}*/ #refineSearch.mm-menu .collection-side-bar > span{ padding-bottom: 5px;border-bottom: 1px solid #4d4d4d;color: #4d4d4d;width: 100%;display: inline-block;font-family: Poppins,Arial, sans-serif;} #refineSearch .mm-list .current, #refineSearch .mm-list > li:hover{background-color: #fff;} #refineSearch .filter-group h4 {margin-bottom: 10px;} #refineSearch.mm-menu .mm-list > li:after {border: 0} /*===================================*/ /*======= Mobile ===================*/ /*** menu styles ***/ @media all and (max-width: 480.9px) { /*** footer ***/ .footerTLinks div.col > span{background-size: 18px} .footerTLinks div.col > .email{ background-size: 20px 17px} .footerTLinks .col > span{font-size: 16px;} #instagram, #gplus{width: 30px; padding-bottom: 3px;} .navBtn, .headSideLink > div{float: left;} .cart-active .icon-cart{height: 24px !important;} .login-active a{height: 21px !important;} } @media all and (min-width: 481px) { /*#mainWrapper{padding-top: 76px!important};*/ .mm-opened #mainWrapper {/*padding-top: 0px !important;*/} /** header **/ .logo img{width: 100%;max-width: 215px;} .navBtn, .headSideLink > div{ padding:15px;width:30px; height: 30px; float: left; } .login a, .srchBtn svg{width: 30px; height: 30px} .icon-cart{width: 27px; height: 30px} .navBtn span{width: 30px; height: 25px} .mm-opening .navBtn span{width: 29px; height: 33px} #cart-count {right: 5%; top:13%;} /** footer ***/ .footerTLinks div.col > span{padding:20px 10px 20px 50px;} .footerTLinks div.col > .email{ background-size: 30px 20px; background-position: 15px 23px!important} .socialIcons a {width: 80px} .socialIcons a svg{width: 59px; height: 59px} #instagram, #gplus{width: 48px; padding-bottom: 0px;} } /*===================================*/ /*======= End Of Mobile ============*/ /*===================================*/ /*======= Tablet ===================*/ /*joren change min-width from 767*/ @media all and (min-width: 768px) { .hideMob{display: block;} #device{margin-left:1px;} .logo{width: 65%} .headQuote{margin-left: 50px; margin-top: -9px; font-size: 14px; font-weight: 700;} /* Full width of #footer minus edge insets (90% was too tight at 768–800px — sitemap rows wrapped mid-pipe) */ #footer .container { width: 100%; max-width: 1220px; margin: 0 auto; box-sizing: border-box; } .threeCol .col{ width: 30%; float: left;margin-right: 2%;} .footerTLinks div.col > span{background-position:15px 21px } .footerTLinks .threeCol .container div {border-bottom: 0} .footerTLinks .threeCol {border-bottom: 1px solid #545454} .footerBLinks{ border-bottom:1px solid #545454; padding: 15px 0} .footerBLinks li{ float: left;border-bottom: 0; border-left: 1px solid #545454 ; padding:2px 15px;} .footerBLinks li:first-child{border-left: 0;} } /*======= End Of Tablet ============*/ /*===================================*/ /*===================================*/ /*======= Desktop ===================*/ @media all and (min-width: 1241px) { /*joren added below and tweaked min-width above from 1240 to 1241*/ #collection {width:1220px;margin:0 auto;} /*joren added above*/ .container, #footer .container{ width: 1220px!important; margin: 0 auto!important} .hideDesk{ display: none;} #device{margin-left:0px} .logo{ width: 55%; padding: 10px 0 15px} .headQuote{ color:var(--color-dark-purple)} #mainWrapper{padding-top: 110px!important} #mainNav{display: block; background: url("_nav-bg.jpg");} #mainNav ul > li:first-child > a, #mainNav ul > li:last-child > a{padding: 20px 16px 21px 16px;} #mainNav ul > li > a{ color:#fff; text-transform: uppercase; text-decoration: none; font-size: 19px; font-weight:300; text-shadow: 0px -1px #000; padding: 20px 12px 21px 11px; float: left; text-align: center; border-left: solid 1px #5c4a9a; border-right: solid 1px #2b1d5b; background: url("nav-bg.jpg") top;} #mainNav ul > li > a:hover{/*background: url("_nav-bg.jpg") bottom;*/ /*background: #b8b8b8 !important;*/ background: var(--color-dark-purple); color: #fff; text-shadow: none;} #mainNav ul > li > ul > div:hover ~ a{background: #b8b8b8;} .headSideLink{border-left: 0;} .login a {background-image: url("_accountPIcon.png"); height: 28px} /*.login #customer_login_link {background-image: url("_accountPIcon.png"); height: 28px}*/ .icon-cart{background-image: url("_cartPIcon.png"); width: 28px} #cart-count{background-color: var(--color-dark-purple);} /*** search bar ***/ .headSideLink > div {padding: 12px 15px; float: left;} .srchBtn{display: none;} .searchCont{ width: 540px!important; cursor: default !important;} .headSideLink>div {height:36px;} .searchCont .search .search_box {border-color: #d8d8d8} .searchCont .search #go{background: url('_searchPIcon.png') no-repeat; content:none; padding-left: 35px;right: -10px; top:7px; width: 20px; height: 20px; border:0;} .searchCont .search{display: block!important; padding: 0; position: relative; /*width: 300px;*/ overflow: hidden; bottom: 0; background-color: transparent;} /*footer */ /*.threeCol {width: 30%; float: right;} .threeCol .container{width: auto!important} .threeCol .col{display: block; float:none; width: 100%} */ .help-btn img {padding-top:3px;} .login a {margin-top:2px;} } /*======= End Of Desktop ============*/ /*===================================*/ .filter-group-not-shown { display: none !important; } /* Fix menu icons not showing up */ .headSideLink div span.srchBtn svg, .headSideLink div.help-btn, .headSideLink div.login { position: relative; text-align: center; } /*font-family: "news-gothic-std",sans-serif;*/ /*font-family: "aktiv-grotesk-std",sans-serif;*/ /*font-family: Poppins,Arial, sans-serif;*/ /*font-family: Roboto,Arial, sans-serif;*/ /*font-family: 'Roboto', sans-serif;*/ *{ margin: 0; padding: 0; } #mainWrapper .container{ width: 90%; margin: 0 5%; } /* * Narrower mobile gutters (96%/2%) on PDP only — collection/cart/blog/etc. keep #mainWrapper .container 90%/5% (reference). * Unscoped rule caused blog/article/index regressions. */ @media (max-width: 767.9px) { body.template-product #mainWrapper .container { width: 96%; margin-left: 2%; margin-right: 2%; } } /* * PDP only: .desktop-container wraps #product; inner .containers (gallery shell, buy box, related) should not add a second 90%/5% inset. * Scoped to body.template-product so cart (.desktop-container > #cart), collection PLP, etc. keep normal #mainWrapper .container gutters. */ body.template-product #mainWrapper .desktop-container #product .container { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; } /* PDP variant block: override site-wide .container gutters (spec: #mainWrapper #product … beats #mainWrapper .container) */ #mainWrapper #product .prod-options .container{ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* PDP .product__buy-column (with .prod-info): single horizontal gutter; nested .containers full width of column */ #mainWrapper #product .product__buy-column { box-sizing: border-box; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); overflow-wrap: break-word; word-break: break-word; } /* Beat tablet+ legacy `.prod-info { float:left; width:47.5% }` — that % width still applies to grid items and shrinks the buy cell */ #mainWrapper #product .product__buy-column.prod-info { float: none; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* Space between title/price summary and variant + add-to-cart form */ #mainWrapper #product .product__buy-column > #add-item-form { margin-top: 6px; } /* All viewports: legacy #product form .prod-options / .prod-options widths must not narrow the buy box */ #mainWrapper #product .product__buy-column form .prod-options { float: none !important; width: 100% !important; max-width: 100% !important; padding-top: 10px; padding-bottom: 10px; padding-left: 0 !important; padding-right: 0 !important; clear: both; box-sizing: border-box; } @media (min-width: 768px) { #mainWrapper #product .product__buy-column { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); } /* Gallery column: same horizontal inset as buy column (below 1024px the 2% PDP block overrides — see max-width 1023.9px) */ #mainWrapper #product .product__media-column { box-sizing: border-box; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); } } /* PDP: tabs + hide accordion from 1024px (below uses accordion card rules in max-width 1023.9px block) */ @media (min-width: 1024px) { #mainWrapper #product .row.clearfix > .prodInfoTabs { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); box-sizing: border-box; } #mainWrapper #product .row.clearfix > .prodInfoAccordion { display: none !important; } /* Modern PDP tabs */ .prodInfoTabs .tabs{ display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-end; gap: 0; padding: 55px 0 0; margin: 0; margin-bottom: 0; outline: none; scroll-margin-top: 80px; border-bottom: 2px solid #e2e3e9; list-style: none; padding-inline-start: 0; overflow: visible; font-family: Poppins, Arial, sans-serif; font-size: 16px; } #mainWrapper #product .prodInfoTabs ul.tabs > li{ float: none; flex: 0 0 auto; font-size: inherit; } /* Safari ≤12: no clamp() — invalid padding shorthand removed all horizontal inset; tabs collided */ #mainWrapper #product .prodInfoTabs ul.tabs > li + li { margin-left: 6px; } .prodInfoTabs .tabs li a{ display: block; padding: 0.65em 14px; padding: 0.65em clamp(10px, 2.4vw, 18px); font-size: inherit; text-align: center; white-space: nowrap; color: #5f6270; text-decoration: none; outline: none; border: 2px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; background: transparent; transition: color 0.15s ease, background-color 0.15s ease; cursor: pointer; } .prodInfoTabs .tabs li a:hover{ color: #453189; background: rgba(69, 49, 137, 0.04); } .prodInfoTabs .tabs li.ui-state-active a{ color: #453189; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border-top: 2px solid #e2e3e9; border-right: 2px solid #e2e3e9; border-left: 2px solid #e2e3e9; border-bottom: 2px solid #fff; background: #fff; margin-bottom: -2px; position: relative; z-index: 1; font-weight: 700; } .prodInfoTabs .accord-title{ display: none !important; } html.js #mainWrapper #product .prodInfoTabs:not(.ui-tabs) > .accordionSection { display: none !important; } html.js #mainWrapper #product .prodInfoTabs:not(.ui-tabs) > .accordionSection#description { display: block !important; } html.js #mainWrapper #product .prodInfoTabs:not(.ui-tabs) .tabs > li:first-child > a { color: #453189; border-top: 2px solid #e2e3e9; border-right: 2px solid #e2e3e9; border-left: 2px solid #e2e3e9; border-bottom: 2px solid #fff; background: #fff; margin-bottom: -2px; position: relative; z-index: 1; font-weight: 700; border-radius: 8px 8px 0 0; } .prodInfoTabs .accordionSection{ clear: both; padding: 1.35rem 1.5rem 1.5rem; border: 2px solid #e2e3e9; border-top: none; border-radius: 0 0 10px 10px; outline: none; background: #fff; box-shadow: 0 4px 14px rgba(21, 21, 40, 0.05); } .prodInfoTabs .accordionSection ul, .prodInfoTabs .accordionSection ol{ padding-top: 15px; padding-bottom: 15px; } .prodInfoTabs .accordionSection p, .prodInfoTabs .accordionSection li{ color: #737373; font-family: Roboto,Arial, sans-serif; margin-bottom:8px; } .prodInfoTabs .accordionSection .pdp-description-rte p:first-child { margin-top: 0; } .prodInfoTabs .accordionSection li{ /*font-weight: 300;*/ } #mainWrapper #product .row.clearfix > .product__stringing-fullwidth { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); padding-top: clamp(28px, 4vw, 40px); box-sizing: border-box; } /* PDP desktop 2-col: centered pair — gallery + buy both cap at 580px (tracks shrink below max when narrow) */ #mainWrapper #product .row.clearfix > .product__pdp-top { display: grid; grid-template-columns: minmax(0, 580px) minmax(0, 580px); width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; column-gap: 0; align-items: start; min-width: 0; box-sizing: border-box; } #mainWrapper #product .row.clearfix .product__pdp-top #product-media-gallery.product-media-gallery.prod-pics { max-width: 580px; } #mainWrapper #product .row.clearfix > .product__pdp-top > .product__media-column { padding-right: max(22px, env(safe-area-inset-right, 0px)); } #mainWrapper #product .row.clearfix > .product__pdp-top > .product__buy-column { padding-left: max(22px, env(safe-area-inset-left, 0px)); max-width: 580px; justify-self: start; } } /* Below 1024px: PDP gallery + buy + accordion rail use 2% side gutters (+ safe-area); .prodInfoTabs hidden (accordion) */ @media (max-width: 1023.9px) { #mainWrapper #product .prodInfoTabs { display: none !important; } #mainWrapper #product .product__media-column, #mainWrapper #product .product__buy-column { box-sizing: border-box; padding-left: calc(2% + env(safe-area-inset-left, 0px)); padding-right: calc(2% + env(safe-area-inset-right, 0px)); } /* #soModal is both .product__stringing-fullwidth and the bordered card — horizontal padding would sit inside the border and not align with gallery/accordion. Side inset = margins on #soModal.showModal only. */ #mainWrapper #product .row.clearfix > .product__stringing-fullwidth { padding-left: 0; padding-right: 0; box-sizing: border-box; } /* PDP mobile: product info accordion — card stack, touch-friendly headers, SVG chevron (jQuery UI adds .ui-accordion-header) */ /* Same horizontal gutters as .product__media-column / .product__buy-column (2% + safe-area); width:auto so side margins show. */ /* External space above the accordion card (margin, not padding — first header stays flush to inner top) */ #mainWrapper #product .row.clearfix > .prodInfoAccordion { display: block !important; padding-top: 0 !important; margin-top: calc(0.35rem + 1rem); margin-left: calc(2% + env(safe-area-inset-left, 0px)); margin-right: calc(2% + env(safe-area-inset-right, 0px)); width: auto; max-width: 100%; border-radius: 12px; border: 2px solid #e2e3e9; background: #fff; box-shadow: 0 2px 14px rgba(21, 21, 40, 0.06); overflow: hidden; box-sizing: border-box; } #mainWrapper #product .prodInfoAccordion span.accord-title, #mainWrapper #product .prodInfoAccordion .ui-accordion-header { cursor: pointer; font-size: 16px !important; font-weight: 600 !important; font-family: Poppins, Arial, sans-serif !important; color: #333 !important; letter-spacing: normal !important; line-height: 1.35 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border: none !important; border-bottom: 1px solid #e8e9ed !important; border-radius: 0 !important; padding: 15px 42px 15px 16px !important; margin: 0 !important; background-color: #fafbfd !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%235f6270' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease, color 0.15s ease; min-height: 48px; box-sizing: border-box; /* no !important: mot-func sets display:none on e.g. .technology-tab when empty */ display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.5rem; } #mainWrapper #product .prodInfoAccordion .ui-accordion-header-icon { display: none !important; } #mainWrapper #product .prodInfoAccordion span.accord-title.ui-state-hover, #mainWrapper #product .prodInfoAccordion .ui-accordion-header.ui-state-hover { background-color: #f3f4f7 !important; color: #453189 !important; } #mainWrapper #product .prodInfoAccordion span.accord-title.ui-state-active, #mainWrapper #product .prodInfoAccordion .ui-accordion-header.ui-state-active { background-color: #fafbfd !important; color: #453189 !important; border-bottom-color: #e8e9ed !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 8.75L7 5.25L10.5 8.75' stroke='%23453189' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* Mouse/tap: WebKit/Safari shows default :focus ring; :focus-visible alone is not enough on older Safari */ #mainWrapper #product .prodInfoAccordion span.accord-title:focus, #mainWrapper #product .prodInfoAccordion .ui-accordion-header:focus { outline: none !important; } #mainWrapper #product .prodInfoAccordion .ui-accordion-header:focus-visible { outline: 2px solid #453189; outline-offset: -2px; position: relative; z-index: 1; } #mainWrapper #product .prodInfoAccordion .accordionSection { width: 100% !important; margin: 0 !important; padding: 1rem 16px 1.25rem !important; background: #fff !important; border: none !important; border-bottom: 1px solid #e8e9ed !important; box-sizing: border-box !important; } #mainWrapper #product .prodInfoAccordion .accordionSection:last-of-type { border-bottom: none !important; } #mainWrapper #product .prodInfoAccordion .accord-review { float: none !important; margin: 0 !important; margin-left: auto !important; display: inline-flex; align-items: center; } /* Mobile: hide accordion panels until jQuery UI adds .ui-accordion (avoids tall stacked FOUC). No-JS: no class on html, panels stay visible. */ html.js #mainWrapper #product .prodInfoAccordion:not(.ui-accordion) > .accordionSection { display: none !important; } } /* * Tablet 2-col PDP: gallery/buy use padding2% of each column; accordion used 2% of full row — wider inset than the gallery card. * Scale horizontal margins by the same track fractions as #product .row.clearfix > .product__pdp-top (47.5% + 1fr) so outer edges line up. */ @media (min-width: 768px) and (max-width: 1023.9px) { #mainWrapper #product .row.clearfix > .prodInfoAccordion { margin-left: calc(2% * 0.475 + env(safe-area-inset-left, 0px)); margin-right: calc(2% * 0.525 + env(safe-area-inset-right, 0px)); } /* Extra inset on the gallery/buy seam (base 2% per column still applies from max-width 1023.9px rules) */ #mainWrapper #product .row.clearfix > .product__pdp-top > .product__media-column { padding-right: calc(2% + 14px + env(safe-area-inset-right, 0px)); } #mainWrapper #product .row.clearfix > .product__pdp-top > .product__buy-column { padding-left: calc(2% + 14px + env(safe-area-inset-left, 0px)); } } /* PDP rails: related / recently viewed — desktop 90%+5%; mobile 96%+2% */ #mainWrapper #product > .related_wrap { box-sizing: border-box; width: 90%; max-width: 100%; margin: 0 5%; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } @media (max-width: 1023.9px) { #mainWrapper #product > .related_wrap { width: 96%; margin-left: 2%; margin-right: 2%; } } /* PDP related rails: one horizontal inset from .related_wrap only — drop legacy negative margins & title offset */ #mainWrapper #product .related_wrap .container #recently-viewed-products, #mainWrapper #product .related_wrap .container #related-collections { margin-left: 0; margin-right: 0; } /* PDP rails: centered titles; title→grid spacing = padding on titles (no flex gap — Safari <14.1) */ #mainWrapper #product .related_wrap #recently-viewed-products h2, #mainWrapper #product .related_wrap #related-collections h2, #mainWrapper #product .related_wrap .related-prod-title { margin: 0; padding: 0 0 18px 0; text-align: center; box-sizing: border-box; font-size: 20px; font-family: Poppins, Arial, sans-serif; font-weight: 400; color: #333333; display: block; } /* Title + “View the collection”: stack with margins (replaces flex gap) */ #mainWrapper #product .related_wrap #related-collections.collection > :first-child { text-align: center; display: block; width: 100%; float: none; clear: both; box-sizing: border-box; } #mainWrapper #product .related_wrap #related-collections.collection > :first-child > span { display: block; width: 100%; max-width: 100%; box-sizing: border-box; } #mainWrapper #product .related_wrap #related-collections.collection > :first-child > span + span { margin-top: 6px; } #mainWrapper #product .related_wrap #related-collections.collection > :first-child h2 { text-align: center; line-height: 1.28; margin: 0; padding: 0; } /* No “View the collection” span: inline link’s margin-bottom is absent — match breathing room (Safari-safe :only-child, no :has) */ #mainWrapper #product .related_wrap #related-collections.collection > :first-child > span:only-child h2 { padding: 0 0 20px 0; } @supports (text-wrap: balance) { #mainWrapper #product .related_wrap #related-collections.collection > :first-child h2 { text-wrap: balance; } } /* Inline link used margin-left for horizontal layout; centered column needs no side offset */ #mainWrapper #product .related_wrap #related-collections.collection > :first-child a { margin-left: 0 !important; line-height: 1.35; } #mainWrapper #product .related_wrap .related-prod.recomatic-related-products { margin-left: 0; margin-right: 0; } #mainWrapper #product .related_wrap .related-prod .container { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0; padding-right: 0; box-sizing: border-box; display: block; } /* Recomatic: app fills [recomatic="product"] — clear floated
  • tiles without wrapping the host in .collection */ #mainWrapper #product .related_wrap .related-prod.recomatic-related-products .container::after { content: ""; display: table; clear: both; } /* Related/Recomatic rails — height follows floated tiles (no aspect-ratio on #related-collections / .related-prod; it broke clearfix → next section snaked into columns). CLS: tile imgs + intrinsic dimensions. */ #mainWrapper #product .related_wrap #related-collections, #mainWrapper #product .related_wrap .related-prod { height: auto; min-height: 0; aspect-ratio: auto; } /* Recomatic: Foundation