/*
Theme Name: Tuff Skinz
Theme URI: https://www.tuffskinz.com
Author: Robyn Gregory
Author URI: https://www.pixelwisedigital.com
Description: Custom Theme for Tuff Skinz based on Blank Slate by Bryan Hadaway / Open Collective
Version: 2024.10.16
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: tuffskinz
*/
@import url("css/grid.min.css");
/*---------- colors ----------*/
:root {
--pd: 20px;
--hover-transition: .5s;
--shadow: rgba(4,7,7,.5);
--black: #040707;
--white: #fff;
--vltblue: #bfe5f6;
--ltblue: #00b6eb;
--blue: #0097dc;
--dkblue: #0078cd;
--vdkblue: #02415c;
--navy: #042232;
--vltgray: #f0f2f2;
--ltgray: #e5e6e6;
--mltgray: #c0c1c1;
--gray: #818383;
--dkgray: #434545;
--red: #f00;
--dkred: #d00;
}
.strong-blue {font-weight: 700;}
.t-black {color: var(--black);}
.t-white {color: var(--white);}
.t-vltblue {color: var(--vltblue);}
.t-ltblue {color: var(--ltblue);}
.t-blue, a[href]:hover, .strong-blue strong {color: var(--blue);}
.t-dkblue, a[href]:not([class^="t-"]):not([class*=" t-"]):not([class*="button"]) {color: var(--dkblue);}
.t-vdkblue {color: var(--vdkblue);}
.t-navy {color: var(--navy);}
.t-vltgray {color: var(--vltgray);}
.t-ltgray {color: var(--ltgray);}
.t-mltgray {color: var(--mltgray);}
.t-gray {color: var(--gray);}
.t-dkgray {color: var(--dkgray);}
.t-red {color: var(--red);}
.t-dkred {color: var(--dkred);}
.bg-none {background-color: transparent;}
.bg-black, [href] .bg-black {background-color: var(--black);}
.bg-white {background-color: var(--white);}
.bg-vltblue {background-color: var(--vltblue);}
.bg-ltblue {background-color: var(--ltblue);}
.bg-blue {background-color: var(--blue);}
.bg-dkblue {background-color: var(--dkblue);}
.bg-vdkblue {background-color: var(--vdkblue);}
.bg-navy {background-color: var(--navy);}
.bg-vltgray {background-color: var(--vltgray);}
.bg-ltgray {background-color: var(--ltgray);}
.bg-mltgray {background-color: var(--mltgray);}
.bg-gray {background-color: var(--gray);}
.bg-dkgray {background-color: var(--dkgray);}
.bg-red {background-color: var(--red);}
.bg-dkred {background-color: var(--dkred);}
[href][class*="ht-"], [href][class*="hbg-"] {transition: var(--hover-transition);}
[href].ht-black:hover, [href]:hover .ht-black {color: var(--black);}
[href].ht-white:hover, [href]:hover .ht-white {color: var(--white);}
[href].ht-vltblue:hover, [href]:hover .ht-vltblue {color: var(--vltblue);}
[href].ht-ltblue:hover, [href]:hover .ht-ltblue {color: var(--ltblue);}
[href].ht-blue:hover, [href]:hover .ht-blue {color: var(--blue);}
[href].ht-dkblue:hover, [href]:hover .ht-dkblue {color: var(--dkblue);}
[href].ht-vdkblue:hover, [href]:hover .ht-vdkblue {color: var(--vdkblue);}
[href].ht-navy:hover, [href]:hover .ht-navy {color: var(--navy);}
[href].ht-vltgray:hover, [href]:hover .ht-vltgray {color: var(--vltgray);}
[href].ht-ltgray:hover, [href]:hover .ht-ltgray {color: var(--ltgray);}
[href].ht-mltgray:hover, [href]:hover .ht-mltgray {color: var(--mltgray);}
[href].ht-gray:hover, [href]:hover .ht-gray {color: var(--gray);}
[href].ht-dkgray:hover, [href]:hover .ht-dkgray {color: var(--dkgray);}
[href].ht-red:hover, [href]:hover .ht-red {color: var(--red);}
[href].ht-dkred:hover, [href]:hover .ht-dkred {color: var(--dkred);}
[href].hbg-none:hover, [href]:hover .hbg-none {background-color: transparent;}
[href].hbg-black:hover, [href]:hover .hbg-black {background-color: var(--black);}
[href].hbg-white:hover, [href]:hover .hbg-white {background-color: var(--white);}
[href].hbg-vltblue:hover, [href]:hover .hbg-vltblue {background-color: var(--vltblue);}
[href].hbg-ltblue:hover, [href]:hover .hbg-ltblue {background-color: var(--ltblue);}
[href].hbg-blue:hover, [href]:hover .hbg-blue {background-color: var(--blue);}
[href].hbg-dkblue:hover, [href]:hover .hbg-dkblue {background-color: var(--dkblue);}
[href].hbg-vdkblue:hover, [href]:hover .hbg-vdkblue {background-color: var(--vdkblue);}
[href].hbg-navy:hover, [href]:hover .hbg-navy {background-color: var(--navy);}
[href].hbg-vltgray:hover, [href]:hover .hbg-vltgray {background-color: var(--vltgray);}
[href].hbg-ltgray:hover, [href]:hover .hbg-ltgray {background-color: var(--ltgray);}
[href].hbg-mltgray:hover, [href]:hover .hbg-mltgray {background-color: var(--mltgray);}
[href].hbg-gray:hover, [href]:hover .hbg-gray {background-color: var(--gray);}
[href].hbg-dkgray:hover, [href]:hover .hbg-dkgray {background-color: var(--dkgray);}
[href].hbg-red:hover, [href]:hover .hbg-red {background-color: var(--red);}
[href].hbg-dkred:hover, [href]:hover .hbg-dkred {background-color: var(--dkred);}
.btn-dkgray .wp-block-button__link {background-color: var(--dkgray); color: var(--white);}
.btn-dkgray .wp-block-button__link:hover {background-color: var(--blue); color: var(--white);}
hr, .wp-block-separator {border: 0; border-top: 3px solid var(--ltgray);}
.border-ltgray {border: 1px solid var(--ltgray);}
/*---------- typography ----------*/
html, body {font-family: Rubik, sans-serif; line-height: 1.2; color: var(--dkgray);}
p {line-height: 1.4;}
.italic, i, em {font-style: italic;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {line-height: 1.1; font-weight: 700; text-transform: uppercase;}
h1, .h1 {font-size: 48px; font-weight: 700;}
h2, .h2 {font-size: 32px;}
h3, .h3 {font-size: 30px;}
h4, .h4 {font-size: 27px;}
h5, .h5, .f-24 {font-size: 24px;}
h6, .h6, .f-21, .lead {font-size: 21px;}
@media (max-width: 781px) {
h1, .h1 {font-size: 36px;}
}
.wp-block-heading {margin: 1em 0 .5em;}
*:first-child {margin-top: 0 !important;}
*:last-child {margin-bottom: 0 !important;}
.f-9 {font-size: 9px;}
.f-12 {font-size: 12px;}
.f-13 {font-size: 13px;}
.f-14 {font-size: 14px;}
.f-15 {font-size: 15px;}
.f-16 {font-size: 16px;}
.f-17 {font-size: 17px;}
.f-18, .strong-18 strong {font-size: 18px;}
.td-none {text-decoration: none;}
.t-left {text-align: left;}
.t-center {text-align: center;}
.t-right {text-align: right;}
.case-upper {text-transform: uppercase;}
.case-lower {text-transform: lowercase;}
.case-none {text-transform: none;}
.w-1 {font-weight: 100;}
.w-2 {font-weight: 200;}
.w-3 {font-weight: 300;}
.w-4 {font-weight: 400;}
.w-5 {font-weight: 500;}
.w-6 {font-weight: 600;}
.w-7, b, strong {font-weight: 700;}
.w-8 {font-weight: 800;}
.w-9 {font-weight: 900;}
.lh--9 {line-height: .9;}
.lh-1 {line-height: 1;}
.lh-1-1 {line-height: 1.1;}
.lh-1-2 {line-height: 1.2;}
/*---------- spacing ----------*/
.px-d {padding-left: var(--pd); padding-right: var(--pd);}
.pl-0, .px-0 {padding-left: 0 !important;}
.pl-1, .px-1 {padding-left: 10px;}
.pl-2, .px-2 {padding-left: 20px;}
.pl-3, .px-3 {padding-left: 30px;}
.pr-0, .px-0 {padding-right: 0 !important;}
.pr-1, .px-1 {padding-right: 10px;}
.pr-2, .px-2 {padding-right: 20px;}
.pr-3, .px-3 {padding-right: 30px;}
.pl--5m, .px--5m {padding-left: .5em;}
.pl-1m, .px-1m {padding-left: 1em;}
.pl-2m, .px-2m {padding-left: 2em;}
.pr--5m, .px--5m {padding-right: .5em;}
.pr-1m, .px-1m {padding-right: 1em;}
.pr-2m, .px-2m {padding-right: 2em;}
.pt-0, .py-0 {padding-top: 0 !important;}
.pt-1, .py-1 {padding-top: 10px;}
.pt-2, .py-2 {padding-top: 20px;}
.pt-3, .py-3 {padding-top: 30px;}
.pb-0, .py-0 {padding-bottom: 0 !important;}
.pb-1, .py-1 {padding-bottom: 10px;}
.pb-2, .py-2 {padding-bottom: 20px;}
.pb-3, .py-3 {padding-bottom: 30px;}
.pt--5m, .py--5m {padding-top: .5em;}
.pt-1m, .py-1m {padding-top: 1em;}
.pt-2m, .py-2m {padding-top: 2em;}
.pb--5m, .py--5m {padding-bottom: .5em;}
.pb-1m, .py-1m {padding-bottom: 1em;}
.pb-2m, .py-2m {padding-bottom: 2em;}
.py-4 {padding-top: 40px; padding-bottom: 40px;}
.py-6 {padding-top: 60px; padding-bottom: 60px;}
.py-8 {padding-top: 80px; padding-bottom: 80px;}
.mx-auto {margin-left: auto !important; margin-right: auto !important;}
.mt-0, .my-0 {margin-top: 0;}
.mt-1, .my-1 {margin-top: 10px;}
.mt-2, .my-2 {margin-top: 20px;}
.mt-3, .my-3 {margin-top: 30px;}
.mt-5, .my-5 {margin-top: 50px;}
.mb-0, .my-0 {margin-bottom: 0;}
.mb-1, .my-1 {margin-bottom: 10px;}
.mb-2, .my-2 {margin-bottom: 20px;}
.mb-3, .my-3 {margin-bottom: 30px;}
.mb-5, .my-5 {margin-bottom: 50px;}
.mt--5m, .my--5m {margin-top: .5em;}
.mt-1m, .my-1m {margin-top: 1em;}
.mt-2m, .my-2m {margin-top: 2em;}
.mb--5m, .my--5m {margin-bottom: .5em;}
.mb-1m, .my-1m {margin-bottom: 1em;}
.mb-2m, .my-2m {margin-bottom: 2em;}
.g-1 {gap: 10px;}
.g-3 {gap: 30px;}
.g-5 {gap: 50px;}
.g-1m {gap: 1em;}
.g--5m {gap: .5em;}
.max-width-250 {max-width: 250px;}
/*---------- images ----------*/
.aspect-1 {aspect-ratio: 1;}
.aspect-2 {aspect-ratio: 2;}
.hover-scale {transition: var(--hover-transition);}
a[href]:hover .hover-scale, a[href].hover-scale:hover {transform: scale(1.1);}
/*---------- tables ----------*/
th {text-align: left;}
/*---------- forms ----------*/
textarea, select, input:not([type="checkbox"]):not([type="radio"]), button,
.woocommerce .gform_legacy_markup_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.woocommerce .gform_legacy_markup_wrapper.gf_browser_chrome select {display: block; padding: .5em 1em; color: inherit; border-color: var(--mltgray); border-radius: 0;}
textarea, select, input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]) {width: 100%;}
select, input:not([type="checkbox"]):not([type="radio"]), button {line-height: 1;}
span.btn, .btn[href], a.button[href], button, input[type="button"], input[type="submit"], a.wp-block-button__link, #wpsl-search-btn, a.wc-block-components-button {display: inline-flex; justify-content: center; align-items: center; background: var(--dkblue); color: var(--white); text-transform: uppercase; font-weight: 500; cursor: pointer; transition: var(--hover-transition); border-radius: 0; text-decoration: none; padding: .667em 1.333em; border: 0;}
.btn[href]:hover, a.button[href]:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover, a.wp-block-button__link:hover, #wpsl-search-btn:hover, a.wc-block-components-button:hover {background: var(--blue); color: var(--white);}
textarea.compact, select.compact, input.compact:not([type="checkbox"]):not([type="radio"]), button.compact, .compact .wp-block-button__link {height: 1.5em; padding: .25em;}
textarea.roomy, select.roomy, input.roomy:not([type="checkbox"]):not([type="radio"]), button.roomy, .roomy .wp-block-button__link {height: 3em; padding: .5em 1em;}
@media (min-width: 782px) {
textarea.roomy, select.roomy, input.roomy:not([type="checkbox"]):not([type="radio"]), button.roomy, .roomy .wp-block-button__link {padding: 1em 3em;}
}
::placeholder {color: inherit; opacity: .5;}
/*---------- links ----------*/
.arrow-right:after {content: ''; display: inline-block; vertical-align: bottom; width: .75em; height: 1em; margin-left: .25em; background: url("data:image/svg+xml;utf8,") center no-repeat; background-size: contain; transition: var(--hover-transition);}
a[href]:hover .arrow-right:after, a[href].arrow-right:hover:after {margin-left: .5em;}
/*---------- quotes ----------*/
blockquote.bubble {position: relative; background: var(--vltgray); padding: 2em 2em 2em 3em; margin: 1.5em 0 3em;}
blockquote.bubble:before {content: ''; position: absolute; left: -.75em; top: 1em; width: 3em; aspect-ratio: 1; background: url("data:image/svg+xml;utf8,") center no-repeat; background-size: contain;}
blockquote.bubble:after {content: ''; position: absolute; left: 3em; top: 100%; background: var(--vltgray); width: 1.5em; aspect-ratio: 1; clip-path: polygon(0 0, 100% 0, 0 100%);}
blockquote.bubble cite {display: block; margin-top: 1em; text-transform: uppercase; font-size: 14px; font-weight: 600;}
blockquote.bubble cite:before {content: '\2014'; margin-right: .25em;}
@media (min-width: 782px) {
blockquote.bubble:nth-child(odd) {margin-right: 10%;}
blockquote.bubble:nth-child(even) {margin-left: 10%;}
}
@media (min-width: 992px) {
blockquote.bubble p {font-size: 18px;}
}
/*---------- accordions ----------*/
details, details > summary, details::details-content {transition: var(--hover-transition);}
details {margin: 1.5em 0; border: 1px solid var(--ltgray);}
details > summary {display: flex; gap: .5em; padding: 1em; font-size: 1.25em; border-bottom: 0 solid var(--ltgray); cursor: pointer;}
details > summary:before {content: ''; flex-shrink: 0; align-self: start; width: 1em; height: 1.2em; background: url("data:image/svg+xml;utf8,") center no-repeat; background-size: contain; transition: var(--hover-transition);}
details > summary:hover {background: var(--vltblue);}
details > summary:hover:before {transform: translateX(.25em);}
details::details-content {border-top: 0 solid var(--ltgray); padding: 0 2em;}
details > summary + * {margin-top: 0;}
details > :last-child {margin-bottom: 0;}
details[open] summary {background: var(--black); color: var(--white);}
details[open]::details-content {border-top-width: 1px; padding: 2em; background: linear-gradient(var(--vltgray), transparent 1em);}
/*---------- header ----------*/
body.admin-bar {padding-top: 46px;}
@media (min-width: 783px) {body.admin-bar {padding-top: 32px;}}
#header {position: relative; padding-top: 3px; padding-bottom: 3px; border-bottom: 8px solid var(--blue); z-index: 1000;}
#logo {margin: 10px 0; height: 100px; aspect-ratio: 31 / 11; text-indent: -100vw; overflow: hidden; background: url(img/TuffSkinz-Logo.svg) no-repeat; background-size: contain;}
#nav, #nav .menu {display: flex; gap: 6px;}
#nav {flex-direction: column; font-weight: 600; color: var(--gray); font-size: 14px; text-align: center; text-transform: uppercase;}
#nav .menu {justify-content: end; flex-wrap: wrap; gap: 3px;}
#nav ul {padding: 0;}
#nav a {display: block; text-decoration: none; color: inherit; padding: 1em .75em;}
#nav .menu-item-has-children > a:after {content: '\25BC'; display: inline-block; transform: scale(1, .75); padding-left: .25em;}
#nav .sub-menu {display: none; position: absolute; top: 100%; right: 0; background: var(--blue); border-top: 3px solid var(--white); box-shadow: 0 0 20px rgba(0,0,0,.2);}
#nav .sub-menu a {color: var(--white); white-space: nowrap;}
#nav .menu > li:hover > a, #nav .sub-menu a:hover {background: var(--dkblue); color: var(--white);}
#nav li:hover .sub-menu {display: flex;}
#menu-about-menu li {position: relative; text-align: left; z-index: 2; font-size: 13px;}
#menu-about-menu > li > a {padding: .75em 1.5em .65em;}
#nav #menu-about-menu > li:hover > a {background: var(--gray);}
#menu-about-menu .sub-menu {background: var(--dkgray); flex-direction: column;}
#menu-about-menu .sub-menu a:hover {background: var(--black);}
#menu-products-menu {color: var(--dkgray); font-size: 13px;}
#menu-products-menu a:after {color: var(--blue);}
#menu-products-menu > li > a {background: var(--ltgray);}
#menu-products-menu > li:hover > a:after {color: var(--white);}
#menu-products-menu .sub-menu {left: 0; top: calc(100% - 3px); padding: 60px 0;}
#menu-products-menu .sub-menu .grid {row-gap: 30px;}
#menu-products-menu .sub-menu li {padding: 0 10px;}
#menu-products-menu .sub-menu a {padding: 0 2em; height: 60px; display: flex; align-items: center; justify-content: center;}
#menu-products-menu .sub-menu a img {filter: brightness(0) invert(1); opacity: .5; transition: var(--hover-transition); max-height: 100%;}
#menu-products-menu .sub-menu a:hover {background: none;}
#menu-products-menu .sub-menu a:hover img {opacity: 1;}
#mobile-nav-toggle {position: relative; width: 3em; aspect-ratio: 1; background: none; border: .6em solid transparent; padding: 0; --line-weight: 3px; z-index: 10;}
#mobile-nav-toggle:before, #mobile-nav-toggle:after, #mobile-nav-toggle span {content: ''; position: absolute; top: calc(25% - var(--line-weight)); left: 0; width: 100%; height: var(--line-weight); background: var(--black); text-indent: -100vw; overflow: hidden; transition: var(--hover-transition);}
#mobile-nav-toggle:after {top: auto; bottom: calc(25% - var(--line-weight));}
#mobile-nav-toggle span {top: calc(50% - var(--line-weight) / 2);}
#mobile-nav-toggle:hover {background: var(--blue);}
#mobile-nav-toggle:hover:before, #mobile-nav-toggle:hover:after, #mobile-nav-toggle:hover span {background: var(--white);}
/*#mobile-nav-toggle.open {position: fixed; right: 0; top: 0;}*/
#mobile-nav-toggle.open:before, #mobile-nav-toggle.open:after {left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); background: var(--white);}
#mobile-nav-toggle.open:after {transform: translate(-50%, -50%) rotate(-45deg);}
#mobile-nav-toggle.open span {opacity: 0;}
#mobile-nav-div {position: fixed; top: 0; left: 100%; width: 100%; bottom: 0; background: var(--black); transition: var(--hover-transition);}
#mobile-nav-div.open {left: 0;}
#mobile-nav-div > div {max-height: 100%; padding-right: calc(var(--pd) * 2 + 3em); overflow: scroll;}
#mobile-nav .menu ul {display: none; width: 100%; background: rgba(255,255,255,.15);}
#mobile-nav .menu li {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,.2);}
#mobile-nav .menu a {flex-grow: 1; padding: calc(var(--pd) * .75) var(--pd); color: var(--mltgray); text-decoration: none;}
#mobile-nav .menu .menu-item-has-children > .arrow {flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: .3rem .6rem; margin: 6px 0; font-size: 1.2rem; color: var(--blue); border-left: 1px solid rgba(255,255,255,.15);}
#mobile-nav .menu .menu-item-has-children > .arrow:after {content: '\25BC'; transform: rotate(-90deg) scale(1, .75);}
#mobile-nav .menu .menu-item-has-children > .arrow.open:after {transform: scale(1, .75);}
#mobile-nav .menu > li:first-child > a {border: 0;}
#mobile-nav #menu-products-menu-1 {border-bottom: 1px solid rgba(255,255,255,.2);}
#mobile-nav #menu-products-menu-1 > li > a {color: var(--white);}
#mobile-nav .menu ul a {padding-left: calc(var(--pd) * 2); font-size: 14px; text-transform: none; font-weight: 500;}
body.admin-bar #mobile-nav-div {top: 46px;}
@media (min-width: 783px) {body.admin-bar #mobile-nav-div {top: 32px;}}
@media (min-width: 1280px) {
#nav a {padding: 1em 2em;}
#menu-products-menu {font-size: 15px;}
}
#navaboutcart {gap: 6px;}
#nav .navcart {display: flex; gap: 4px; padding: 4px; border: 1px solid var(--mltgray); line-height: .8; white-space: nowrap;}
#nav .navcart:hover {border-color: var(--dkblue);}
.navcartqty {padding: 6px; gap: 2px;}
.navcartview {gap: 6px; padding: 6px 10px; border-left: 1px solid rgba(255,255,255,.2);}
#banner {padding: 1px 0; border-top: 2px solid var(--white); border-bottom: 8px solid var(--red); text-shadow: 0 0 30px var(--shadow);}
#banner-bkg {max-height: 100%;}
#banner-img-page {max-height: 300px;}
#banner-img-category {height: 60px;}
/*---------- main ----------*/
#main {overflow: hidden;}
/*---------- footer ----------*/
#footer {border-top: 8px solid var(--blue);}
#footer-top .menu {display: flex; gap: 50px; flex-wrap: wrap; padding: 0;}
#footer-top .menu a {display: block; text-transform: uppercase; color: var(--blue); font-size: 15px; font-weight: 500; text-decoration: none; margin-bottom: .5em !important;}
#footer-top .menu a:hover {color: var(--ltblue);}
#footer-top .menu .t-dkred a {color: var(--dkred);}
#footer-top .menu .t-dkred a:hover {color: var(--red);}
#footer-top .sub-menu {padding: 0;}
#footer .logo {margin-top: -20px;}
#get-tuff, #get-tuff .container:after {position: absolute; left: 0; right: 0; bottom: 0; font-size: 18vw; font-weight: 600; color: var(--navy); text-align: right; line-height: .65; white-space: nowrap;}
#get-tuff .container:before {content: 'GET TUFF';}
#get-tuff .container:after {content: ''; top: 0; background: linear-gradient(transparent calc(100% - 50px), var(--black)); opacity: .25;}
@media (min-width: 782px) {
#get-tuff {font-size: 150px;}
}
#newsletter-form .ctct-form-defaults {position: relative; background: none; padding: 0; max-width: 375px; margin-top: .5em !important;}
#newsletter-form .ctct-form-field {position: relative; border: 1px solid var(--dkgray); padding: 5px calc(2em + 10px) 5px 5px; margin: 0 0 .5em;}
#newsletter-form .ctct-form-field label {position: absolute; background: #ff0;}
#newsletter-form .ctct-form-field label {border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute!important; width: 1px; word-wrap: normal!important; word-break: normal;}
#newsletter-form .ctct-form-field label:focus {background-color: #f7f7f7; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0,0,0,.6); clip: auto!important; -webkit-clip-path: none; clip-path: none; color: #007acc; display: block; font-size: 14px; font-size: .875rem; font-weight: 700; height: auto; right: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000;}
#newsletter-form .ctct-form-field input {background: var(--dkgray); color: var(--white); padding: .5em; border: 0; height: 2em; border-radius: 0; font-size: 1rem;}
#newsletter-form .ctct-form-field input::placeholder {color: var(--mltgray);}
#newsletter-form .ctct-form-button {position: absolute; right: 6px; top: 6px; overflow: hidden; text-indent: -100vw; padding: 0; width: 2em; height: 2em; border-radius: 0;}
#newsletter-form .ctct-form-button:after {content: '\25B6'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.75, 1); text-indent: 0; font-size: 18px;}
div.ctct-form-embed div.ctct-form-defaults p.ctct-gdpr-text {font-size: 11.5px !important; font-family: inherit !important; color: var(--gray) !important; line-height: 1.2 !important;}
#newsletter-form .ctct-form-defaults .ctct-gdpr-text .ctct-form-footer-link {color: var(--blue); opacity: .75; transition: var(--hover-transition);}
#newsletter-form .ctct-form-defaults .ctct-gdpr-text .ctct-form-footer-link:hover {opacity: 1;}
#footer-legal, #footer-legal .menu {display: flex; gap: 1em; flex-wrap: wrap; justify-content: center;}
#footer-legal .menu li {margin: 0;}
#footer-legal .menu a {color: var(--gray);}
#footer-legal .menu a:hover {color: var(--mltgray);}
#footer-gateways img {height: 24px;}
/*---------- hero ads ----------*/
/*#hero-ads:not(.is-active) {height: 50vh;}*/
/* WHY IS IT FLASHING */
#hero-ads a {min-height: 50vh;}
#hero-ads .text {font-size: 4.5vw; max-width: 20em;}
#hero-ads h2 {font-size: 2.25em;}
#hero-ads .btn {background: var(--dkgray); color: var(--ltgray);}
#hero-ads:hover .btn {background: var(--blue); color: var(--white);}
#hero-ads .object-cover {object-position: right center;}
@media (min-width: 782px) {
#hero-ads .text {font-size: 2.25vw; max-width: 20em;}
}
.splide__arrows .splide__arrow {top: auto; bottom: 10px; transform: scale(.75);}
/*---------- info ads ----------*/
#info-ads img {width: 50%; max-width: 200px;}
#info-ads a {}
/*---------- brand search ----------*/
#brand-search {font-size: 30px;}
#brand-search-label:after {content: ''; display: inline-block; vertical-align: bottom; width: .75em; height: 1em; margin-left: .25em; background: url("data:image/svg+xml;utf8,") center no-repeat; background-size: contain;}
#brand-search-inputs {border-bottom: 6px solid var(--dkblue); font-size: 36px;}
#brand-search-inputs.fade:after {content: ''; position: absolute; inset: 0; background: var(--dkblue); opacity: .5;}
#brand-search-input {border: 0;}
#brand-search-list {display: none; position: absolute; left: 0; top: 100%; width: 100%; padding: .75rem; background: var(--dkblue); z-index: 3;}
#brand-search-list a {display: block; text-decoration: none; color: inherit; padding: .75rem; font-size: 18px;}
#brand-search-list a:after {content: ''; display: inline-block; width: .8em; aspect-ratio: 1; margin-left: .5em; vertical-align: bottom; background: url("data:image/svg+xml;utf8,") center top no-repeat; background-size: contain;}
#brand-search-list a:hover, #brand-search-list a:focus {background: var(--black);}
#brand-search-submit {width: 1.5em; height: 1.5em; background: url("data:image/svg+xml;utf8,") center no-repeat; background-size: 1em; overflow: hidden; text-indent: -100vw;}
#brand-search-submit:after {content: ''; position: absolute; inset: .25em; border: 4px solid transparent; border-radius: 50%; border-top-color: transparent !important;}
#brand-search-submit:hover {background-size: 1.1em;}
#brand-search-submit.spin {background: none;}
#brand-search-submit.spin:after {border-color: var(--white); animation: spin 1.25s linear infinite;}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@media (min-width: 782px) {#brand-search {font-size: 42px;}}
/*---------- home ----------*/
ul.icon-list {list-style: none;}
ul.icon-list li {display: flex; align-items: center; gap: 1em;}
ul.icon-list img {align-self: start; width: 2em !important; height: 2em; flex-shrink: 0; object-fit: contain;}
.wc-block-grid__products {margin: 20px -10px 0 !important; text-transform: uppercase;}
.wc-block-grid__product {border-width: 10px !important; font-size: inherit !important;}
.wc-block-grid__product-link, .wc-block-grid__product-link * {display: block !important;}
.wc-block-grid__product-link {text-decoration: none; color: inherit;}
.wc-block-grid__product-image img {width: 100% !important; aspect-ratio: 1; background: var(--white); object-fit: contain; border: 6px solid var(--white); transition: var(--hover-transition);}
.wc-block-grid__product-link:hover img {border-color: var(--blue);}
.wc-block-grid__product-title {margin: 0 0 6px !important; font-weight: 600 !important;}
.wc-block-grid__product-price {font-weight: 500; color: var(--red);}
.wp-block-pullquote {font-size: 30px; font-style: italic;}
.wp-block-pullquote strong {color: var(--ltblue); font-weight: 600;}
/*---------- store locator ----------*/
.wpsl-search {background: var(--ltgray); margin: 20px 0; padding: 20px;}
.wpsl-search form, .wpsl-select-wrap {display: flex; column-gap: 20px; row-gap: 15px; flex-wrap: wrap;}
.wpsl-search #wpsl-search-wrap div {display: flex !important; flex-wrap: wrap; white-space: nowrap;}
.wpsl-search #wpsl-search-wrap div:not(.wpsl-select-wrap) {flex-direction: column; justify-content: end; column-gap: 20px; row-gap: 5px;}
.wpsl-search #wpsl-search-wrap div, #wpsl-search-wrap div label, #wpsl-search-btn {float: none !important; margin: 0 !important;}
#wpsl-search-wrap div label {font-size: 14px; line-height: 1.2; text-transform: uppercase; font-weight: 500; padding: 0 1.5em 0 .25em;}
#wpsl-search-wrap div label, #wpsl-search-input, .wpsl-dropdown {width: 100%;}
#wpsl-radius, #wpsl-results {width: auto; flex-grow: 1;}
#wpsl-search-input, .wpsl-dropdown {border-color: var(--mltgray) !important; border-radius: 0 !important;}
#wpsl-search-input, #wpsl-search-btn {width: 100%; padding: 9px 12px; line-height: normal; border-radius: 0 !important;}
#wpsl-search-btn {text-transform: uppercase !important; border-color: transparent !important;}
/*---------- woocommerce ----------*/
.woocommerce .woocommerce-breadcrumb {margin-bottom: 0;}
.woocommerce-products-header__title {font-size: 45px; font-weight: 700; text-transform: uppercase;}
.woocommerce .term-description {font-size: 20px;}
.woocommerce-result-count {display: none;}
.woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering {float: none; margin: 0;}
.woocommerce ul.products {margin-top: 20px;}
.woocommerce ul.products li.product a {display: block; text-align: center; color: var(--black);}
.woocommerce ul.products li.product a .image {display: flex; aspect-ratio: 1; align-items: center; border: 1px solid var(--black); margin-bottom: 10px;}
.woocommerce ul.products li.product a img {margin: 0;}
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {text-transform: uppercase; font-weight: 600; font-size: 18px; padding: 0;}
.woocommerce ul.products li.product .price {font-weight: 500; color: var(--blue); font-size: 16px;}
.woocommerce ul.products li.product a .count,
.woocommerce ul.products li.product a.button {display: none;}
.woocommerce ul.products li.product:not(.product-category) a img {aspect-ratio: 1; object-fit: cover;}
.woocommerce ul.products li.product-category a .image {background: var(--blue); padding: 10%;}
.woocommerce ul.products li.product-category a img {filter: brightness(0) invert(1); opacity: .5; transition: var(--hover-transition);}
.woocommerce ul.products li.product-category a:hover img {opacity: 1;}
.woocommerce div.product form.cart .variations .value {padding-bottom: .5em;}
.product .ginput_container_fileupload input, .woocommerce .quantity .qty {position: relative; border: 1px solid var(--mltgray);}
.product .ginput_container_fileupload input:before {content: 'Choose File'; display: flex; align-items: center; position: absolute; left: 0; top: 0; bottom: 0; background: var(--dkblue); color: var(--white); padding: .5em 1em; font-weight: 500; text-transform: uppercase; font-size: 14px; cursor: pointer;}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt {background: var(--dkblue); border-radius: 0; padding: .667em 1.333em;}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover {background: var(--blue);}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled:hover {background: var(--dkblue); opacity: .25;}
.woocommerce .gform_fields {line-height: 1.4;}
.woocommerce .gform_legacy_markup_wrapper input[readonly] {border-color: transparent !important; padding: 0 !important;}
.woocommerce .ginput_product_price_label {display: none;}
.woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message {background: var(--vltgray);}
.woocommerce .woocommerce-message {border-top-color: var(--blue);}
.woocommerce .woocommerce-message::before {color: var(--blue);}
.woocommerce .woocommerce-error {border-top-color: var(--dkred);}
.woocommerce .woocommerce-error::before, .woocommerce .gform_legacy_markup_wrapper .gfield_error * {color: var(--dkred) !important;}
.woocommerce .gform_legacy_markup_wrapper div.validation_error {border: 0; border-radius: 0; background: var(--dkred);}
.woocommerce .gform_legacy_markup_wrapper .gform_validation_errors>h2 {color: var(--white); font-weight: 500;}
.woocommerce .gform_legacy_markup_wrapper .gform_validation_errors>h2:before {background-image: url("data:image/svg+xml;utf8,");}
.woocommerce .gform_legacy_markup_wrapper li.gfield.gfield_error, .gform_legacy_markup_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {border: 3px solid var(--dkred); padding: 1em; background: none;box-shadow: 0 0 20px rgba(0,0,0,.2);}
.product .gform_legacy_markup_wrapper .top_label .gsection_description, .woocommerce-tabs h2 {margin: .5em 0 !important;}
.related.products {margin-top: 2em;}
.woocommerce-notices-wrapper {margin-bottom: 2em;}
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {font-weight: 500;}
.wc-block-components-product-metadata {font-size: .85em !important;}
.wc-block-components-form .wc-block-components-text-input input[type=email], .wc-block-components-form .wc-block-components-text-input input[type=number], .wc-block-components-form .wc-block-components-text-input input[type=password], .wc-block-components-form .wc-block-components-text-input input[type=tel], .wc-block-components-form .wc-block-components-text-input input[type=text], .wc-block-components-form .wc-block-components-text-input input[type=url], .wc-block-components-text-input input[type=email], .wc-block-components-text-input input[type=number], .wc-block-components-text-input input[type=password], .wc-block-components-text-input input[type=tel], .wc-block-components-text-input input[type=text], .wc-block-components-text-input input[type=url], .wc-blocks-components-select .wc-blocks-components-select__select, .wc-block-components-textarea {border-color: var(--mltgray) !important; border-radius: 0 !important;}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {color: inherit; font-weight: 600;}
.wp-block-woocommerce-checkout-order-summary-block {border-color: var(--ltgray) !important; border-radius: 0 !important;}
.wc-block-components-notice-banner {border-radius: 0 !important;}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {padding: 1em 0; text-transform: uppercase;}
.woocommerce form.cart .product_totals {border-top: 0; margin: 0 0 40px; padding: 0;}
.wc-block-grid__product-price {color: var(--black); font-weight: 600;}
.gfield--type-section {background: var(--black) !important; color: var(--white) !important; padding: 20px !important; border: 0 !important;}
.gsection_description {margin-top: 2px; font-size: 17px; color: var(--mltgray);}
/*---------- gravity forms ----------*/
div[id^="gform_"].gform_wrapper.gform-theme.gform-theme--framework form[id^="gform_"] {
--gf-color-primary: var(--blue);
--gf-color-primary-rgb: 0, 151, 220;
--gf-color-primary-darker: var(--dkblue);
--gf-color-primary-lighter: var(--ltblue);
/*-------*/
--gf-color-in-ctrl-primary-darker: var(--gf-color-primary-darker);
--gf-color-in-ctrl-primary-lighter: var(--gf-color-primary-lighter);
--gf-color-in-ctrl-primary: var(--gf-color-primary);
--gf-ctrl-border-color-focus: var(--gf-color-primary);
--gf-ctrl-border-color: var(--mltgray);
--gf-ctrl-btn-bg-color-primary: var(--gf-color-in-ctrl-primary-darker);
--gf-ctrl-btn-bg-color-ctrl: var(--gf-color-in-ctrl-primary-darker);
--gf-ctrl-btn-bg-color-hover-ctrl: var(--gf-color-in-ctrl-primary);
--gf-ctrl-btn-font-size: 1.25em;
--gf-ctrl-btn-radius: 0;
--gf-ctrl-btn-text-transform: uppercase;
--gf-ctrl-choice-check-color: var(--gf-color-primary);
--gf-ctrl-file-zone-icon-color: var(--gf-color-primary);
--gf-ctrl-font-size: 15px;
--gf-ctrl-label-color-req: var(--dkred);
--gf-ctrl-label-font-size-primary: 17px;
--gf-ctrl-label-font-size-secondary: 15px;
--gf-ctrl-label-font-weight-primary: 500;
--gf-ctrl-outline-color-focus: var(--gf-color-primary);
--gf-ctrl-radius: 0;
--gf-ctrl-textarea-radius: 0;
--gf-ctrl-shadow-color-focus: rgba(var(--gf-color-primary-rgb),.3);
--gf-ctrl-shadow-focus: 0 0 0 var(--gf-ctrl-shadow-offset-size-focus) var(--gf-ctrl-shadow-offset-color-focus),0 0 0 var(--gf-ctrl-shadow-size-focus) var(--gf-ctrl-shadow-color-focus);
--gf-ctrl-shadow: none;
--gf-ctrl-label-color-primary: var(--black);
--gf-ctrl-btn-bg-color-hover-primary: var(--gf-color-in-ctrl-primary);
--gf-ctrl-btn-bg-color-focus-primary: var(--gf-color-primary-lighter);
--gf-ctrl-btn-shadow-focus: var(--gf-ctrl-shadow-focus);
--gf-ctrl-btn-border-color-focus-primary: var(--gf-color-primary-lighter);
--gf-field-img-choice-card-check-ind-bg-color: var(--gf-color-primary);
}
.gform-theme.gform-theme--framework .gfield--type-choice .gchoice br {display: block; grid-column: span 2;}
.gform-theme.gform-theme--framework .gfield--type-choice .gchoice_other_control {grid-column: unset; margin-left: var(--gf-label-space-x-secondary); width: calc(100% - 2 * var(--gf-local-padding-x) - var(--gf-label-space-x-secondary)) !important;}
.gform_legacy_markup_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {border: 1px solid var(--mltgray);}
.gform-theme--framework .gfield--type-image_choice .gchoice {align-self: stretch !important;}
.gform-theme--framework .gfield--type-image_choice.gf-aspect-auto .gfield-choice-image-wrapper {aspect-ratio: auto;}
.gfield_consent_description {--gf-ctrl-desc-font-size: 14px;}
/*---------- downloads ----------*/
.downloads {grid-template-columns: repeat(2, 1fr);}
@media (min-width: 782px) {.downloads {grid-template-columns: repeat(3, 1fr);}}
@media (min-width: 992px) {.downloads {grid-template-columns: repeat(4, 1fr);}}
@media (min-width: 1280px) {.downloads {grid-template-columns: repeat(5, 1fr);}}