.hide {display:none;}
html {  scroll-behavior: smooth;}

/*makes it so that header text cannot be highlighted/selected*/
.preheader *, .header * {    -webkit-touch-callout: none;    -webkit-user-select: none;    -khtml-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;}


/* PREHEADER START */
.preheader {
    max-height: 30px;													
	background:#4e4f53;	
	overflow:hidden;
	position:relative;
	z-index:10003;
}

.preheader .innerpreheader {
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}


/* triangle next to "our brands" */
.preheader #our-brands span.phtriangle:after {
    content: ".";
    font-size: 0em;
    border-left: 7px solid #bfbfbf;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    vertical-align: bottom;
    margin-left: 2px;
}
@media only screen and (max-width: 500px) {
.preheader.activeph #our-brands span.phtriangle:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #bfbfbf;
    border-bottom: none;
    vertical-align: baseline;
}
}

.preheader a {
	padding: 0 15px 0 15px;
    margin: 0;
    max-height: 32px;
	color:#bfbfbf;
	font-family:play;
	font-weight:bold;
	font-size:14px;
	transition: background-color 100ms linear, padding 200ms linear;
	line-height: 11px;
}
.preheader  a#our-brands {background-color:transparent;}  /*stops 'our brands' from changing colour on hover*/

.preheader .phlogos { display: block; }

.preheader .phlogosinner {
    display: flex;
    justify-content: center;
	margin-right:10px;
}

.preheader a:hover {	background-color:#eee; }
.preheader a.swllogo{ background-color:#f9f9f9;	pointer-events: none; } /*SWL logo light bg & no click*/
.preheader a img {
	margin: 6px 0;
	width: auto;
	height: 17px;
	transition: filter 100ms linear;
	vertical-align:middle;
	filter: invert(83%) sepia(0%) saturate(22%) hue-rotate(141deg) brightness(99%) contrast(79%);
}
.preheader a:hover img { filter: invert(52%) sepia(6%) saturate(0%) hue-rotate(203deg) brightness(92%) contrast(96%); }
.preheader .swllogo img { filter: invert(52%) sepia(6%) saturate(0%) hue-rotate(203deg) brightness(92%) contrast(96%); }
.preheader .sglogo img { height:18px; }
.preheader .italogo img {height:15px; padding-top:3px;}


/* Preheader remove SWL Logo when window isn't wide enough */
@media only screen and (max-width: 580px) {
.preheader .swllogo { display:none; }
}/* end preheader max-width 595px */


	/* Preheader Mobile Styles */
@media only screen and (max-width: 500px) {
.preheader { max-height:unset;}

.preheader .innerpreheader {
    justify-content: flex-start;
	flex-wrap: wrap;
}

.preheader #our-brands {
    min-height: 30px;
    line-height: 30px;
	width: 100%;
	padding-left: 7px;
}

.preheader .phlogos {
    display: none;
	width: 100%;
}

.preheader .phlogosinner {	margin-right:0;}
.preheader .phlogosinner a {
    padding: 0px 20px 5px 20px;
    margin-top:-5px;
}


}/* end preheader max-width 500px */

@media only screen and (max-width: 390px) {	.preheader .phlogosinner a { padding: 0px 10px;}} 

@media only screen and (max-width: 333px) { .preheader .phlogosinner { flex-wrap: wrap; }}  


/* makes it so that the preheader logos always appear above mobile size, minimum width of 501 */
@media only screen and (min-width: 501px) { .phlogos { display: block!important; } } 





/* HEADER START */
.header li { list-style:none; } 
.header-nav-menu > li { display: block; } 
.menuwrap > a {display: none!important;} /*makes it so that you never see the "wrapper" titles that are in the nav menu*/


/*main flex-box order for the header*/
.headerlogo {order:1;}
.header-nav-menu-container {order:2;}
.cartbutton {order:3;}
.headericons {order:4;}
.headermenubutton {order:5;}


/* bg overlay when header is open */
.headermenuoverlay {
	display:none;
	background: #000000;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10001;
	opacity: 60%;
}



/* header start */
.header {	
	font-family: montserrat;	
	font-weight:500;
	position: relative;
	z-index: 10002;
}

.inheader {
	height:60px;
	display: flex;
	column-gap:10px;
	background-color: #f5f5f8;
	background-image: linear-gradient(180deg, #fff, #f5f5f8 80px);
}

.inheader > div { /* direct header element blocks: logo, nav menu, cart button, header icons, menu button*/
	flex: 0 1 fit-content;
	z-index:1;
	display: flex;
	align-items: center;
}





/* header logo */
.inheader > div.headerlogo { flex-basis: 230px;	margin-left: 5px;}
.headerlogo a {
	width: 100%;
	min-width:200px;
}
.headerlogo img {
	width: 100%;
	height: auto;
	max-height: 40px;
	display: block;
}



/* header nav menu */
.inheader > div.header-nav-menu-container { flex: 1 0 auto;	display: block;}


.header-nav-menu-container > div {
	height: 100%;
}


.header-nav-menu {
	display: flex;
	justify-content: flex-start;
	column-gap:10px;
	height: 100%;
	align-items: center;
}

.header-nav-menu > li{
	display: block;
	list-style: none;
	height: 100%;
	align-content: center;
	flex-basis:150px;
	text-align:center;
	transition-duration:.2s;
}


/*style of links of the top level menu items*/
.header-nav-menu > li > a{
	display: block;
	height: 100%;
	align-content: center;
	text-wrap: nowrap;
	transition-duration:.2s;
	color: #003c77;
	cursor:pointer;
}
.header-nav-menu > li > a:hover{ color: #016db1;}

.header-nav-menu > li > .sub-menu { 
	display: none;
	position: absolute;
	border-top: 1px solid #2d85c145;
	margin: auto;
	background-color: #fafafa;
	right: 0px;
	left: 0px;
	padding: 10px 2%;
	border-bottom: ridge #bbbbc5 4px;
}

.header-nav-menu > li > .sub-menu > li{ max-width:1000px;}

.sub-products-wrapper > .sub-menu {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	column-gap: 4%;
	row-gap: 10px;
	align-items: baseline;
}

.nav-resources .menuwrap > .sub-menu {
	display: flex;
	justify-content: space-around;
}

.sub-products-wrapper > .sub-menu > li { flex: 1 0 max-content;}

.sub-products-wrapper > .sub-menu > li > ul {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	max-height: 300px;
	width: auto;
	column-gap: 2%;
}

.header li.robot-accessories-sub-menu {
	display: grid;
	flex: 1 1 300px;
}

.header .robot-accessories-sub-menu > ul {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	max-height: 300px;
}


.header-nav-menu ul li a { /*style of links in dropdown menus*/
	display: block;
	padding: 4px;
	color: #00386f;
	font-family: 'montserrat', sans-serif;
	font-size: 14px;
	font-weight: 500;
	transition: all .2s;
	text-align:left;
	border-radius: 5px;
}
.header-nav-menu ul li a:hover{	
	color: #016db1;
	margin-left: 2px;
	margin-right: -2px;
	background-image: linear-gradient(90deg, #a4d6ff33, transparent);
}


.header-nav-menu .all-products-button a {
	text-align: left;
	font-size: 1em;
	font-weight: 700;
	text-decoration: underline 1px;
	text-underline-offset: 2px;
	margin-bottom: 10px;
}

.header-nav-menu .nav-menu-title-main > a {
	font-size: 0.9375rem;
	font-weight: 600;
	padding-bottom: 2px;
	border-bottom: solid 1px #d3d3d3;
	margin-bottom: 5px;
	color: #00294b;
	border-radius: 7px 7px 0 0;
}

.header-nav-menu .nav-resources .nav-menu-title-main a {
	border-bottom: none;
	padding: 12px 45px;
	border-radius: 5px;
	font-weight: 500;
}

.header-nav-menu .nav-menu-title-sub>a {
	border-bottom: none;
	line-height: 1em;
	width: auto !important;
	font-weight: 600 !important;
	color: #232323 !important;
	background-color: transparent !important;
	text-decoration: underline;
	text-decoration-color: #adadad;
}



/* header cart */
.header .cartbutton {
	flex-basis: 40px;
	justify-content: center;
}

.header .cartbutton a {
	height: 100%;
	width: 100%;
	text-align: center;
	display: flex;
	align-items: center; 
	color: #003c77;
}

.header .cartbutton a i.typcn:before { font-size:1.5rem;}

.header .cartbutton a p {
	border: #003c77 2px solid;
	border-radius: 100%;
	width: 1rem;
	height: 1rem;
	display: inline-block;
	font-weight: bold;
	margin-top: -10px;
	margin-right: -10px;
	margin-left: -10px;
	background: #ffffff;
	font-family: monospace;
	font-size: .75rem;
	line-height: 1rem;
	box-sizing: content-box;
	color: #003c77;
}





/* header icons */
.header .translatebutton > div > a > span {display: none;}

.headericons {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.headericonswrap {
	display: flex;
	justify-content: flex-end;
}

.headericonswrap > div {align-content:center;}

.headericons a, .headericons i {
	display: block;
	height: 100%;
	padding: 8px 10px;
	align-content: center;
	cursor: pointer;
	color: #003c77;
}
.headericons i:hover, .header .cartbutton:hover a, .header .cartbutton:hover a p {	border-color: #016db1; color: #016db1;}


/* search and login dropdown panels */
.searchloginpanel {
	display:none;
	position: absolute;
	right: 0px;
	min-width: 280px;
	z-index: 3;
	 filter: drop-shadow(1px 1px 1px #00000055);
	height: auto;
	background-image: linear-gradient(225deg, #ffffff 190px, transparent 190px);
}

.searchloginpanel > div {
	width: 200px;
	margin-left: auto;
	padding: 2px 15px 10px;
	text-align: center;
}
#logincontain > div {	width: fit-content;}

#logincontain .portaltitle {font-weight:bold;}

.searchloginpanel > div a {
	padding: 5px 10px;
	background: #00294b;
	width: 100%;
	display: block;
	margin-top: 5px;
	color:white;
}

		/* header search form */
body .header form#searchform {
	box-shadow: 1px 1px 1px #00000033;
	border-radius: 5px;
}

body .header form.searchform>div {display: flex;}

body .header .searchform input#s {
	background: white;
	border-style: solid;
	border-width: 2px;
	border-color: #003969;
	border-right: none;
	border-radius: 5px 0 0 5px;
	outline: none;
	padding-right: 5px;
	font-size: 1rem;
	line-height: 2rem;
	height: 2rem;
}

body .header .searchform button { /* needs the extra selectors because the woocommerce native styles mess with it :/ */
	border: none;
	max-width: 33px;
	color: transparent;
	background-image: url(https://swl2025.local/wp-content/themes/apt%20to%20swl%20Theme%20edits%2003-2026/library/images/search-icon.svg);
	background-size: 22px;
	background-repeat: no-repeat;
	background-position: center;
	overflow: hidden;
	background-color: #003969;
	border-radius: 0 4px 4px 0;
	height: 100%;
	cursor: pointer;
	font-size: .875rem;
}

body .header .searchform button:hover { /* needs the extra selectors because the woocommerce native styles mess with it :/ */
	color: transparent;
	background-image: url(https://swl2025.local/wp-content/themes/apt%20to%20swl%20Theme%20edits%2003-2026/library/images/search-icon.svg);
	background-color: #003969;
}



/* header menu button - doesn't display on largest screen size */
div#headermenubutton {display:none;}

.header #headermenubutton i {
	cursor: pointer;
	padding: 13px 11px 11px;
	color: #2a4877;
	transition: color .2s;
	font-size: 1.8rem;
}




													/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ responsive styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*over 1000px, just for adjustments on the top level nav menu text*/
@media only screen and (max-width: 1000px) {.header-nav-menu > li{flex-basis:100px;} .header-nav-menu > li > a{font-size: .875rem;}}
/*forces icons to be visible in at largest breakpoint, has to be separated because !important*/
@media only screen and (min-width:901px) { .header div.headericons {	 display:flex!important; height:100%!important;}.searchloginpanel>div {padding-top: 10px;}} 
/*forces icons to be visible in middle size stated below, has to be separated because !important*/
@media only screen and (min-width:501px) and (max-width:760px) { .header div.headericons {	 display:flex!important;height:100%!important;}}
/*forces main nav menu to be visible on wider screens, has to be separated because !important*/
@media only screen and (min-width:761px) { .header-nav-menu-container > div {display:block!important; height: 100%!important;}}



@media only screen and (max-width:900px) {	/* start show the mobile menu button - hide icons under menu button */
.inheader { flex-wrap: wrap; column-gap:8px; }

.inheader > .headerlogo { height: 60px; } /*makes things work at the smallest size due to weirdness with wrapping*/

.header-nav-menu { column-gap: 5px; }
.header .header-nav-menu > li > a { padding:0;}

.header div#headermenubutton {display:flex!important;}
.header #headermenubutton i { padding-left:8px;}

.header div.headericons {
	order:6; 
	display:none;
	justify-self: flex-end;
	flex-basis: 100%;
	max-width: 240px;
	margin-left: auto;
	z-index: 4;
	background-image: linear-gradient(225deg, white 160px, transparent 160px);
}
.headericonswrap { column-gap: 26px; margin-right: 5px; }

.searchloginpanel { padding-top:40px; }

} /*end max width 900*/



@media only screen and (max-width:760px) { /* show icons, hide nav menu under button */
.header .inheader {
	justify-content: space-between;
	flex-wrap: wrap;
}

.header .cartbutton {margin-left:auto;}

.header div.headericons {
	order:4; /*between cart and menu button*/
	background:none;
	flex-basis: fit-content;
	max-width:unset;
	margin-left:unset;
	margin-top:unset;
}

.headericonswrap {
	column-gap: normal;
	margin-right: unset;
}

.header-nav-menu-container {
	width: 100%;
	order:7; 
}

.header-nav-menu-container > div {
	display:none;
	position: absolute;
	background: #e6e6e9;
	z-index: 999999999;
	left: 0;
	width: 100%;
	height:auto;
}

.header-nav-menu {
	justify-content: space-evenly;
	column-gap: 2px;
	height:unset; /*this makes it so that the slide transition looks okay*/
}

.header-nav-menu > li {	flex-basis: 25%;}

.header .header-nav-menu > li > a {
	padding: 15px 5px;
	font-size: .9375rem;
}

.sub-products-wrapper > .sub-menu {flex-wrap: wrap;}

.header-nav-menu .nav-resources .nav-menu-title-main a {	padding: 12px 20px;}

.searchloginpanel { padding-top: 10px; z-index:2;}
	
} /*end max width 760*/



@media only screen and (max-width:500px) { /* hide both icons and nav menu under button */
.header div.headericons {
	order:6;	/*second to last, before nav menu*/
	display:none;
	margin-left: auto;
	height: 40px;
	width: 100%;
	min-width: 100%;
	background:white;
}

.header-nav-menu {flex-wrap: wrap; }
.header-nav-menu > li {	flex-basis:100%;}

.header .header-nav-menu > li > a { /* top level nav menu links */
	padding: 15px 5px;
	font-size: 1rem;
}

.header-nav-menu > li > .sub-menu { /* element that gets toggled on click */
		position:relative;
}

.header-nav-menu ul li li li a { /* individual links in the nav submenus */
	padding: 15px 10px;
	font-size: 0.9375rem; /*why the weird number? turns 16 into 15.*/
}


.nav-resources .menuwrap > .sub-menu {	flex-wrap: wrap;}
.nav-resources .menuwrap > .sub-menu li {	flex-basis:100%}

.header .inheader .robot-accessories-sub-menu > ul, .sub-products-wrapper > .sub-menu > li > ul {	max-height: unset;} 
	
.sub-products-wrapper>.sub-menu { flex-direction: column;}
.sub-products-wrapper > .sub-menu > li { width: 100%;}

.searchloginpanel {	padding-top: 40px;	z-index: 2;}


	
} /*end max-width: 500px*/


@media only screen and (max-width: 360px) { /* menu adjustments for very small screens */

.header .inheader > div.headerlogo {
	flex-basis: calc(100% - 83px);
}

.headerlogo a {min-width: unset;}

.header div.cartbutton {
	flex-basis: 30px;
	justify-content: center;
}

.header #headermenubutton i {
	width:30px;
	padding:5px;
	font-size: 1.4rem;
}

.header .searchloginpanel {
	padding-top: 10px;
	z-index: 2;
	margin-top: 35px;
}

} /*end max-width: 360px*/





/* FOOTER START */
.swlfooter {
	background-color: #f8f8f8;
    font-family: 'Montserrat', sans-serif;
	width:100%;
	margin:auto;
	padding-top:15px;
}

.swlfooter ul {
	text-align:center;
	line-height:1.5em;
}

.swlfooter ul li {
	display:inline-block;
	line-height:1rem;
}

/* footer menu */
.footer-menu > ul {
	list-style-type: none;
	margin:auto;
	padding:15px 0 10px;
}

.footer-menu > ul li a {
    padding: 0 20px;
    border-right: 2px #016db1 solid;
    color: #00294b;
    display: inline-block;
    width: 100%;
    transition: .2s;
    font-weight: 500;
    font-size: .9375rem;
}
.footer-menu > ul li:last-of-type a {	border-right:none;}
.footer-menu > ul li a:hover {    color: #016db1;}

/* footer logos */
.footerlogos ul{ padding:10px; }

.footerlogos ul li{
	padding:0 15px;
	margin:auto;
}

.footerlogos ul li img{
	max-width:100%;
	max-height:80px;
}

.copynotice { font-size: .75rem;	padding-bottom: 10px;	text-align:center;	line-height:1.5em; }