/* 
Color Overrides CSS  - HH (parent)
CSS Author: Jonathan Marzullo (JTM)
*/

/* panel wrapper */

.page-header .panel.wrapper {
    background: var(--color-seafoam);
    /*seafoam gray */
    color: var(--color-white);
    text-shadow: var(--text-shadow-dark);
    border-bottom: 0 none;
}

body.cms-home .page-header .panel.wrapper {
    /* background: var(--color-gray); */
    /* color: var(--color-text);
    text-shadow: var(--text-shadow-light); */
    color: var(--color-white);
    text-shadow: var(--text-shadow-dark);
}

#header-contact-top ul li a {}

body.cms-home #header-contact-top ul li a {
    text-shadow: var(--text-shadow-light);
}

#header-contact-top ul li a:hover {}

body.cms-home #header-contact-top ul li a:hover {
    color: var(--color-dark-purple);
}

#header-contact-top ul.social li a:hover i {
    color: var(--color-yellow-orange);
}

body.cms-home #header-contact-top ul.social li a:hover i {
    /* color: var(--color-yellow-orange); */
}

.header.panel > .header.links > li.welcome,
.header.panel > .header.links > li > a,
.header.panel > .header.links > li.customer-welcome span.customer-name {
    color: var(--color-white);
}

body.cms-home .header.panel > .header.links > li.welcome,
body.cms-home .header.panel > .header.links > li > a,
body.cms-home .header.panel > .header.links > li.customer-welcome span.customer-name {
    /* color: var(--color-text); */
}

.header.panel > .header.links > li > a,
.header.panel > .header.links > li > a:active,
.header.panel > .header.links > li > a:focus,
.header.panel > .header.links > li > a:visited {
    color: var(--color-white);
}

body.cms-home .header.panel > .header.links > li > a,
body.cms-home .header.panel > .header.links > li > a:active,
body.cms-home .header.panel > .header.links > li > a:focus,
body.cms-home .header.panel > .header.links > li > a:visited {
    color: var(--color-white);
}

.header.panel > .header.links > li > a:hover,
.header.panel > .header.links > li.customer-welcome:hover span.customer-name {
    color: var(--color-yellow-orange);
    text-shadow: 1px 1px 0px rgba(0,0,0,0.2), -1px -1px 0px rgba(0,0,0,0.2);/* var(--text-shadow-dark) */
}

body.cms-home .header.panel > .header.links > li > a:hover,
body.cms-home .header.panel > .header.links > li.customer-welcome:hover span.customer-name {
    color: var(--color-purple);
    text-shadow: var(--text-shadow-light);
}

html.logged-in .customer-welcome .action.switch::after {
    color: var(--color-white);
}

/* mini cart */

.minicart-wrapper .action.showcart .counter-number {
    background: transparent;
    /* color: var(--color-white);
    text-shadow: var(--text-shadow-dark); */
}

.minicart-wrapper .action.showcart:hover .counter.qty {
    background: var(--color-link-hover);/* var(--color-white) */
    color: var(--color-white);/* var(--color-text) */
}

body.cms-home .minicart-wrapper .action.showcart:hover .counter.qty {
    background: var(--color-purple);
    color: var(--color-white);
    text-shadow: var(--text-shadow-dark);
}

@media all and (min-width:768px) {

    .minicart-wrapper .action.showcart::before {
        color: var(--color-link);/* var(--color-white) */
    }

    body.cms-home .minicart-wrapper .action.showcart::before {
        color: var(--color-link);/* var(--color-white) */
    }

    .minicart-wrapper .action.showcart:hover::before {
        color: var(--color-link-hover);/* var(--color-white) */
    }

    .minicart-wrapper .action.showcart.active::before {
        color: var(--color-link-hover);/* var(--color-white) */
    }
}

@media all and (max-width:767px) {

    .minicart-wrapper .action.showcart .counter.qty {
        text-shadow: var(--text-shadow-light);
    }

    .minicart-wrapper .action.showcart:hover .counter.qty {
        background: var(--color-purple);
        color: var(--color-white);
        text-shadow: var(--text-shadow-dark);
    }
}

/* search */

.search .amsearch-loupe::before {
    color: var(--color-purple);
}

html.animate-search .search .amsearch-loupe::before {
    /* color: var(--color-seafoam); */
}

/* navigation */

body.cms-home .navigation .level0 > .level-top, 
body.cms-home .navigation .level0.parent > .level-top {
    color: var(--color-darker-purple);
}

body.cms-home .navigation .level0 > .level-top:hover, 
body.cms-home .navigation .level0.parent > .level-top:hover {
    color: var(--color-purple);
}

.tooltip-label {
    color: #FFFFFF;
    background-color: #EB4C4C;
    /* var(--color-seafoam) */
    border-color: #EB4C4C;
    /* var(--color-seafoam) */
    text-shadow: var(--text-shadow-dark);
}

/* h1 title */

.page-title-wrapper {
    /* background-color: var(--color-seafoam);
    color: var(--color-white);
    text-shadow: var(--text-shadow-dark);
    border-bottom: 0 none; */

    /* -webkit-animation: bg-color 20s infinite;
    animation: bg-color 20s infinite;  */
}

body.page-products .page-title-wrapper.has-cat-img {
    /*background-color: var(--color-purple); seafoam 
    color: var(--color-white);
    text-shadow: var(--text-shadow-dark);*/
}

@-webkit-keyframes bg-color {
    0% {
        background-color: #e74c3c;
    }

    20% {
        background-color: #f1c40f;
    }

    40% {
        background-color: #1abc9c;
    }

    60% {
        background-color: #3498db;
    }

    80% {
        background-color: #9b59b6;
    }

    100% {
        background-color: #e74c3c;
    }
}

@keyframes bg-color {
    0% {
        background-color: #e74c3c;
    }

    20% {
        background-color: #f1c40f;
    }

    40% {
        background-color: #1abc9c;
    }

    60% {
        background-color: #3498db;
    }

    80% {
        background-color: #9b59b6;
    }

    100% {
        background-color: #e74c3c;
    }
}

/* buttons */
.box-tocart .action.tocart:not(:last-child),
.action.tocart.primary {
    background: var(--color-yellow-orange);
    /*--color-purple  */
    border-color: var(--color-yellow-orange);
    /*--color-purple  */
    color: var(--color-white);
    text-shadow: var(--text-shadow-dark);
}

.box-tocart .action.tocart:not(:last-child):hover,
.action.tocart.primary:hover {
    background: var(--color-yellow-orange);
    /*--color-purple  */
    border-color: var(--color-yellow-orange);
    /*--color-purple  */
    color: var(--color-white);
}

/* .action.primary.ordersample {
    background: var(--color-yellow-orange);
    border-color: var(--color-yellow-orange);
    color: var(--color-white);
    text-shadow: var(--text-shadow-dark);
}

.action.primary.ordersample:hover {
    background: var(--color-yellow-orange);
    border-color: var(--color-yellow-orange);
    color: var(--color-white);
} */

.actions-toolbar > .primary .action.create:last-child,
.actions-toolbar > .primary .action.login:last-child {
    background-color: var(--color-gray);
    border-color: var(--color-gray);
}

.actions-toolbar > .primary .action.create:last-child:hover,
.actions-toolbar > .primary .action.login:last-child:hover {
    background-color: var(--color-dark-gray);
    border-color: var(--color-dark-gray);
}

/* room group product page - triggers */
.jonny-container-poi .jonny-single-point > a {
    border-color: var(--color-white);
    background: var(--color-yellow-orange);
}

.jonny-container-poi .jonny-single-point > a:hover {
    border-color: var(--color-yellow-orange);
    background-color: var(--color-white);
}

.jonny-container-poi .jonny-single-point > a::after,
.jonny-container-poi .jonny-single-point > a::before {
    background-color: var(--color-white);
}

.jonny-container-poi .jonny-single-point > a:hover::after,
.jonny-container-poi .jonny-single-point > a:hover::before {
    background-color: var(--color-yellow-orange);
}

.jonny-container-poi .jonny-single-point.is-open > a span {
    color: var(--color-gray);
}

.jonny-container-poi .jonny-single-point.is-open > a:hover span {
    color: var(--color-white);
}

body.is-room .jonny-suf-footer a .mobile-count {
    background: var(--color-white);
    border-color: var(--color-white);
    text-shadow: var(--text-shadow-light);
    color: var(--color-dark-gray) !important;
}

body.is-room #fabric-poi .jonny-single-point .suf-open {
    background-color: var(--color-purple);
    border-color: var(--color-purple);
}

body.is-room #fabric-poi .jonny-single-point .suf-open:hover {
    background-color: var(--color-dark-purple);
    border-color: var(--color-dark-purple);
}

/* room group product page - buttons */
body.is-room .jonny-suf-footer a,
body.is-room .itoris_slider_group.is-visible .jonny-suf-close {
    color: var(--color-white);
    background-color: var(--color-dark-purple);
    border-color: var(--color-dark-purple);
    text-shadow: var(--text-shadow-dark);
}

body.is-room .jonny-suf-footer a:hover,
body.is-room .itoris_slider_group.is-visible .jonny-suf-close:hover {
    color: var(--color-white);
    background-color: var(--color-purple);
    border-color: var(--color-purple);
}

@media all and (max-width:599px) {

    body.is-room .jonny-suf-footer a .mobile-count {
        border: 1px solid var(--color-white);
        background: var(--color-white);
        color: var(--color-dark-gray);
        text-shadow: var(--text-shadow-light);
    }
}

/* footer */
#footer-links-bottom {
    background-color: var(--color-seafoam);
    color: var(--color-white);
    text-shadow: var(--text-shadow-dark);
}

footer#footer {
    background: var(--color-dark-gray);
    padding: 0;
    margin: 0;
}

#footer-links-bottom .copyright {
    background: var(--color-transparent-dark);
}

footer#footer .footer-inner h2 {
    color: var(--color-white);
}

footer#footer .footer-inner .footer-address-block p a:hover {
    color: var(--color-cream);
}

footer#footer .footer-inner ul li > a:hover {
    color: var(--color-cream);
}

footer#footer .social-icons a i {
    background-color: var(--color-yellow-orange);
    color: var(--color-white);
}

footer#footer .social-icons a:hover i {
    background-color: var(--color-white);
    color: var(--color-dark-gray);
    /* same as footer background */
}

footer#footer .social-icons a span {
    color: var(--color-white);
}

footer#footer .social-icons a:hover span {
    color: var(--color-cream);
}

/* footer links */
ul.links-list.dark li::after {
    background-color: var(--color-seafoam);
}

/* copyright */
.copyright {
    background-color: var(--color-gray);
    /* color: #EEE; */
}

#footer-links-bottom .copyright .copyright-inner a:hover {
    color: var(--color-yellow-orange);
}

/* copyright footer links */
#footer-links-bottom .footer.links li:before {
    border-left-color: #AAA;
}

#footer-links-bottom .footer.links li:last-of-type:after {
    border-right-color: #AAA;
}

#footer-links-bottom .footer.links li a,
#footer-links-bottom .footer.links li strong {
    color: var(--color-white);
}

#footer-links-bottom .footer.links li a:hover {
    color: var(--color-cream);
    text-shadow: var(--text-shadow-dark);
}

/* disclaimer */
#disclaimer {
    border-color: var(--color-darker-gray);
    background-color: var(--color-dark-gray);
    color: #AAA;
    text-shadow: var(--text-shadow-dark);
}

#disclaimer:hover {
    /* background-color: var(--color-white); */
    border-color: var(--color-dark-purple);
    color: var(--color-white);
    text-shadow: var(--text-shadow-dark);
}

#disclaimer:hover .disclaimer-inner {
    background-color: var(--color-dark-purple);
    border-color: var(--color-dark-purple);
}

/* mobile menu */
@media all and (max-width: 767px) {

    .sections {
        /* background: var(--color-white); */
    }

    /* nav mobile styles - html.nav-open  */

    /* html .sections.nav-sections {
       background: var(--color-dark-purple);
    }
 
    html .sections.nav-sections .header.links {
       border-color: var(--color-transparent-light);
    }
 
    html .sections.nav-sections .nav-sections-items {
       background: var(--color-darker-purple);
    }
 
    html .sections.nav-sections .nav-sections-item-title {
       background: var(--color-darker-purple);
       border-color: var(--color-darker-purple);
    }
 
    html .sections.nav-sections .nav-sections-item-content {
       background: var(--color-dark-purple);
    }
 
    html .sections.nav-sections .navigation {
       background: transparent; 
    }
 
    html .sections.nav-sections .nav-sections-item-title.active {
      border-color: var(--color-dark-purple);
      background: var(--color-dark-purple);
    }
 
    html .sections.nav-sections .nav-sections-item-title a {
       color: var(--color-white);
       text-shadow: var(--text-shadow-dark);
    }
 
    html .sections.nav-sections .nav-sections-item-title.active a {
       color: var(--color-yellow-orange);
    }
 
    html .sections.nav-sections .navigation .level0 > .level-top,
    html .sections.nav-sections .header.links li > a {
       border-top-color: var(--color-transparent-light);
       text-shadow: var(--text-shadow-dark);
       color: var(--color-white);  
    } */

    /* html .sections.nav-sections .navigation .level0 .level-top:hover,
    html .sections.nav-sections .header.links li > a:hover {
       color: var(--color-yellow-orange);  
    } */

    /* html .sections.nav-sections  .navigation .parent .level-top::after {
       color: var(--color-yellow-orange);
    }
 
    html .sections.nav-sections .navigation .submenu:not(:first-child) {
       background: var(--color-darker-purple);
    }
 
    html .sections.nav-sections .navigation li.level0:last-child {
       border-bottom: 1px solid var(--color-transparent-light);
    }
 
    html .sections.nav-sections .navigation .submenu:not(:first-child) > li > a {
       color: var(--color-lighter-gray);
       border-bottom: 1px solid var(--color-transparent-light);
    } */

    /* html .sections.nav-sections .navigation .submenu:not(:first-child) > li > a:hover {
       color: var(--color-white);  
    } */

    /* html .sections.nav-sections .navigation .level0.active > a:not(.ui-state-active), 
    html .sections.nav-sections .navigation .level0.has-active > a:not(.ui-state-active) {
       border-left-color: var(--color-yellow-orange);
    }
 
    html .sections.nav-sections .navigation .submenu:not(:first-child) .active > a {
       border-left-color: var(--color-yellow-orange);
    } */
}