/*
** Bootstrap over-rides
*/
body {
    font-family: 'Montserrat', sans-serif;
    color: #50595c;
    line-height: 1.5;
    font-size: 14px;
}
h1 {
    font-size: 30px;
}

.titles {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
}

.subcategories {
    border-bottom: 1px solid #ececec;
    padding: 0 0 30px;
}
.subcategories > ul > li > a {
    color: #000;
    text-decoration: none;
    display: block;
    -webkit-transition: all .25s ease-out;
    transition: all .25s ease-out;
}
.subcategories > ul > li > a:hover {
    opacity: 0.8;
}
.subcategories > ul > li span.name {
    color: #000;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

@media (min-width: 1200px) {
    .container {
        width: 1200px;
    }
}
.form-control {
    color: #000;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    height: 36px;
    padding: 7px 12px;
}
.form-control.search-text {
    border: 1px solid #ececec;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* ==========================
   BASE BUTTON STYLES
   ========================== */

/* Base button - white with black border */
.btn {
    font-size: 13px;
    padding: 8px 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: 3px solid #000000;
    background-color: #ffffff;
    color: #000000;
    transition: all 0.3s ease;
}

/* Default & primary buttons */
.btn-default,
.btn-primary {
    background-color: #ffffff;
    color: #000000;
    border-color: #000000;
}

/* Hover + focus - light blue */
.btn:hover,
.btn:focus,
.btn-default:hover,
.btn-default:focus,
.btn-primary:hover,
.btn-primary:focus {
    background-color: #d3f1fb;
    color: #000000;
    border-color: #000000;
    text-decoration: none;
}

/* Active state */
.btn:active,
.btn:active:focus {
    background-color: #222222;
    color: #ffffff;
    border-color: #000000;
}

/* Inverse variant (black background, white text) */
.btn-default.btn-inverse {
    background-color: #000000;
    color: #ffffff;
    border-color: #000000;
}

.btn-default.btn-inverse:hover,
.btn-default.btn-inverse:focus {
    background-color: #d3f1fb;
    color: #000000;
    border-color: #000000;
}

/* Keyboard focus (ADA) */
.btn:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 2px;
}

/* ==========================
   ADD TO CART BUTTON SPECIFIC
   Matches navbar: white bg, thick black border, light blue hover
   ========================== */

/* Remove any inherited green styles and match navbar */
#listing .btn-addcart,
.btn-addcart {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 3px solid #000000 !important;
    font-weight: 800;
}

#listing .btn-addcart:hover,
#listing .btn-addcart:focus,
.btn-addcart:hover,
.btn-addcart:focus {
    background-color: #d3f1fb !important;
    color: #000000 !important;
    border-color: #000000 !important;
}
#listing h1.page_headers {
    margin: 0 0 5px;
    font-family: 'Allerta Stencil', sans-serif;
    font-weight: 400;
    background-color: #ff3c94;
    font-size: 24px;
    color: #fff;
    padding: 10px 12px;  /* Slightly more padding for stencil */
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    border: 1px solid #000;
    letter-spacing: 0.5px;
    line-height: 1.3;    /* Better for stencil readability */
}

/* ==========================
   FORCE ADA NAVBAR COLORS
   ========================== */

/* Navbar background */
section.navbar-wrapper,
section.navbar-wrapper.affix,
section.navbar-wrapper *,
.navbar,
.navbar.navbar-inverse {
    background-color: #ffffff !important;
}

section.navbar-wrapper {
    border: 5px solid #000000 !important;
}

/* ALL nav links - force black */
.navbar a,
.navbar a span,
.navbar-inverse .navbar-nav > li > a,
.nav > li > a {
    color: #000000 !important;
    font-weight: 700;
}

/* Hover / focus states */
.navbar a:hover,
.navbar a:focus,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.nav > li > a:hover,
.nav > li > a:focus {
    color: #000000 !important;
    background-color: #d3f1fb !important;
    outline: 2px solid #000000;
    outline-offset: 2px;
}

/* Dropdown menu container */
.dropdown-menu {
    background-color: #ffffff !important;
    border: 3px solid #000000 !important;
}

/* Dropdown links */
.dropdown-menu > li > a {
    color: #000000 !important;
    font-weight: 600;
}

/* Dropdown hover */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: #d3f1fb !important;
    color: #000000 !important;
}

/* Mobile menu overrides */
@media(max-width: 767px) {
    .mobile-menu,
    #mobile-menu,
    .navbar-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    .mobile-menu li,
    .navbar-nav li {
        text-align: center;
        margin: 0 10px;  /* spacing between items */
    }
}
/*Vertical Stack (Hamburger Menu)*/
@media(max-width: 767px) {
    .mobile-menu {
        text-align: center;
        width: 100%;
    }
    
    .mobile-menu li {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
    }
    
    .mobile-menu li a {
        display: block;
        text-align: center;
    }
}

/* ==========================
   NAV ITEM DIVIDERS (ADA)
   ========================== */

/* Top-level nav items */
.navbar-nav > li {
    border-left: 4px solid #000000;
}

/* Add right border on last item */
.navbar-nav > li:last-child {
    border-right: 4px solid #000000;
}

/* Keep background clean */
.navbar-nav > li > a {
    background-color: transparent !important;
}

/* Ensure hover doesn't remove divider visibility */
.navbar-nav > li:hover,
.navbar-nav > li:focus-within {
    background-color: #d3f1fb;
}

/* ==========================
   FORCE DROPDOWN MENU COLORS
   ========================== */

/* Dropdown container - ALL states */
.navbar .dropdown-menu,
.navbar-inverse .dropdown-menu,
.navbar-nav .dropdown-menu,
.navbar-nav .open .dropdown-menu,
.navbar-nav > li.open > .dropdown-menu {
    background-color: #ffffff !important;
    border: 3px solid #000000 !important;
}

/* Dropdown links - ALL states */
.navbar .dropdown-menu > li > a,
.navbar-inverse .dropdown-menu > li > a,
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu > li > a {
    color: #000000 !important;
    background-color: #ffffff !important;
    font-weight: 600;
}

/* Hover + focus */
.navbar .dropdown-menu > li > a:hover,
.navbar .dropdown-menu > li > a:focus,
.navbar-inverse .dropdown-menu > li > a:hover,
.navbar-inverse .dropdown-menu > li > a:focus {
    background-color: #d3f1fb !important;
    color: #000000 !important;
    outline: 2px solid #000000;
    outline-offset: -2px;
}

/* Kill inherited blue backgrounds */
.navbar .dropdown-menu *,
.navbar-inverse .dropdown-menu * {
    background-color: transparent !important;
}

/* Mobile open state */
@media (max-width: 1023px) {
    .navbar-nav .open .dropdown-menu,
    .navbar-nav .open .dropdown-menu * {
        background-color: #ffffff !important;
    }
}

/* ==========================
   FORCE JS-GENERATED DROPDOWNS
   ========================== */

/* Scroll arrow containers transparent */
div[id$="pp"] > div[id*="scroll"],
div[id$="pp"] > div[id*="Scroll"],
div[id$="pp"] > div[id*="arrow"],
div[id$="pp"] > div[id*="Arrow"] {
    background: transparent !important;
    border: none !important;
}

/* Popup container */
div[id$="pp"] {
    background: #ffffff !important;
    border: 3px solid #000000 !important;
    box-sizing: border-box !important;
    border-right: 3px solid #000000 !important;
    overflow: visible !important;
}

/* Background layer */
div[id$="pp"] > div[id$="bgWnd"] {
    background: #ffffff !important;
    box-sizing: border-box !important;
    right: 0 !important;
}

/* Each dropdown item */
div[id$="pp"] > div {
    background: #ffffff !important;
    color: #000000 !important;
    border-bottom: 2px solid #000000 !important;
    font-weight: 700 !important;
}

/* Hover/focus */
div[id$="pp"] > div:hover,
div[id$="pp"] > div:focus {
    background: #d3f1fb !important;
    color: #000000 !important;
}

/* Sub-menu items */
.sub-menu-item {
    background: #ffffff !important;
    color: #000000 !important;
}
.sub-menu-item:hover,
.sub-menu-item:focus {
    background: #d3f1fb !important;
    color: #000000 !important;
}

/* ==========================
   STICKY NAVBAR
   ========================== */

#category-navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999;
}

#category-navbar.affix,
#category-navbar.sticky-header {
    top: 0 !important;
    transform: none !important;
    transition: none !important;
}

/*
** Template code
*/
.logo {
    height: 300px;
    position: relative;
    overflow: hidden;
}
.logo img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
.logo a:hover img {
    opacity: 0.6;
}

.top-nav ul {
    padding: 15px 0;
    margin: 0;
    list-style: none;
    font-size: 12px;
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-align: right;
}
.top-nav ul li {
    margin-left: 15px;
    display: inline-block;
    padding: 7px 0;
}
.top-nav ul li:first-child {
    border: none;
    margin: 0;
    padding: 0;
}
.top-nav ul li a {
    color: #444;
}

.useraccount-wrapper a {
    color: #444;
    font-weight: 600;
    font-size: 12px;
}
.useraccount {
    text-align: right;
    font-size: 12px;
    margin: 0 0 12px;
}
.useraccount > ul {
    margin: 0;
}
.useraccount > ul > li {
    margin-left: 10px;
    padding-left: 10px;
    display: inline-block;
    border-left: 1px solid #000;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
}
.useraccount > ul > li:first-child {
    border: none;
    margin: 0;
    padding: 0;
}
.useraccount > ul > li > a {
    color: #000;
}
.useraccount > ul > li i {
    color: #50595c;
    font-size: 16px;
    vertical-align: middle;
}
.free-shipping-message {
    text-align: right;
    font-weight: bold;
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.minicart {
    margin: 0 0 0;
}
a.minicart-inner-top {
    color: #444;
    font-weight: 600;
    font-size: 12px;
}
a.minicart-inner-top i {
    font-size: 16px;
    vertical-align: middle;
}

.site-header {
    padding: 10px 0 30px;
}

.searchBox {
    padding: 0 0 0 0;
    max-width: 156px;
    float: right;
    position: relative;
    margin-left: 15px;
    margin-top: 15px;
}
.searchBox div.searchlight-balloon {
    padding: 0;
}
.search-form {
    position: relative;
}
.search-form .search-text {
    padding: 0 32px 0 12px;
    height: 26px;
    margin: 0;
}
.search-form .search-submit {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    text-align: center;
    font-size: 16px;
    padding: 0;
    border: none;
    background: none;
    color: #50595c;
}

.minicart {
    text-align: right;
}
.minicart-inner {
    display: block;
    color: #50595c;
    text-transform: uppercase;
    cursor: pointer;
}
.minicart-inner:hover {
    color: #50595c;
    opacity: 0.8;
}

.minicart .cart-details {
    display: block;
    float: left;
}

.site-footer {
    background-color: #50595c;
    padding: 55px 0 0;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}
div#FRAME_LINKS {
    max-width: 560px;
}
ul.extrapages li {
    line-height: 1;
    margin: 0 0 15px;
}
ul.extrapages li a {
    color: #ffffff;
    font-size: 14px;
}
.footer-devider {
    border-top: 1px solid #3c3c3c;
    margin-top: 50px;
    margin-bottom: 20px;
}
.copyright {
    padding-bottom: 20px;
    color: #ffffff;
    font-size: 12px;
}
.copyright > p {
    margin: 0;
}

.mailist-box {
    width: 350px;
    float: right;
    margin-bottom: 10px;
}
.mailist-box h3,
.social_icons h3 {
    margin: 0 0 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
}
.mailinglist-input.form-control {
    background-color: transparent;
    border-color: #2d2d2d;
    max-width: 265px;
    color: #fff;
    float: left;
    height: 46px;
    border-radius: 4px;
    background-color: #757e81;
}
.mailinglist-submit {
    background-color: #fff !important;
    color: #141414 !important;
    border: none !important;
    float: right;
    width: 78px;
    height: 46px;
    border-radius: 4px;
}
.btn-default.mailinglist-submit:hover, 
.btn-default.mailinglist-submit:focus {
    opacity: 0.6;
}
.mailinglist-response {
    display: none;
}
.maillist-options {
    margin: 15px 0 0;
}
.subscribe {
    float: left;
    margin-right: 20px;
    line-height: 13px;
}
.subscribe input[type="radio"] {
    margin: 0;
    vertical-align: middle;
}
.subscribe label {
    margin: 0;
    font-size: 12px;
    line-height: 13px;
    font-weight: 300;
    margin-left: 3px;
    color: #ffffff;
    cursor: pointer;
}

.social_icons {
    width: 350px;
    float: right;
    margin: 0 0 20px;
}
.footer-social ul {
    margin: 0;
}
ul.payment-icons {
    margin: 10px 0 0;
}
ul.payment-icons li {
    font-size: 34px;
    line-height: 36px;
    vertical-align: middle;
    padding: 0;
    margin-right: 5px;
}

ul.payment-icons li.payment-icons-label,
ul.social-icons li.social-icons-label {
    font-size: 18px;
    vertical-align: middle;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    margin-right: 20px;
}
ul.payment-icons li span:before {
    margin: 0;
    width: auto;
}
.social-icons li a {
    color: #141414;
    background-color: #fff;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 6px;
    display: block;
    text-align: center;
    font-size: 14px;
}
.social-icons li a:hover {
    opacity: 0.6;
}

.reviews-stars:before {
    font-family: "fontello";
    content: "\e803 \e803 \e803 \e803 \e803";
    color: #b8b8b8;
}
.rating:hover .rating-star:hover,
.rating:hover .rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star,
.reviews-stars {
    color: #000000;
}

.product-item .name a {
    color: #50595c;
}
.product-item del.regular-price {
    text-decoration: line-through;
}
.sale-price {
    color: #d04b64;
}
del.original-price {
    font-weight: 500;
}
span.freeshipping {
    color: #00a888;
}
.product-item .status span:before {
    content: "-";
}
.product-item .status {
    font-size: 11px;
}
.product-item .price {
    font-size: 16px;
    font-weight: bold;
}
.product-item .img {
    min-height: 220px;
    position: relative;
    border: none;
    background-color: #fff;
}
.product-item .img a {
    display: block;

}
.product-item .img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}
.product-item .action .btn {
    min-width: 150px;
}
.head-mobile-nav > a {
    color: #50595c;
    font-size: 24px;
    line-height: 1;
}

.extrapages-shower a {
    display: block;
    background-color: #34393b;
    color: #fff;
    padding: 10px 18px;
    text-decoration: none !important;
}
.extrapages-shower a:after {
    content: "\f106";
    font-family: "fontello";
    float: right;
}
.extrapages-shower a.collapsed:after {
    content: "\f107";
}
.SnapWidget {
    background-color: #d9f6f4;
    padding: 50px 0;
}
.SnapWidget h3 {
    font-size: 20px;
    margin: 0 0 35px;
    text-align: center;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 600;
}

.revealOnScroll {
    opacity: 0;
}
.product-items {
    overflow: hidden;
}

@media(max-width: 991px) {
    .navbar-inverse .navbar-nav > li > a {
        font-size: 14px;
        min-height: 0;
    }
    .navbar-nav > li.dropdown > a:after {
        float: right;
    }
    .mailist-box {
        float: none;
        padding: 30px 0;
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }
    .footer-social {
        text-align: center;
    }
    .social_icons {
        float: none;
        margin: 20px auto;
    }
}
@media(max-width: 767px) {
    .logo {
        text-align: center;
        height: auto;
    }
    .logo img {
        position: static;
    }
    .searchBox {
        padding: 0;
        float: none;
        width: 100%;
        clear: both;
        max-width: none;
        margin: 0;
        height: auto;
    }
    .search-form .search-text {
        height: 36px;
    }
    .search-form-col {
        clear: both;
    }
    .useraccount-wrapper {
        clear: both;
    }
    .flex-direction-nav a:before {
        font-size: 24px;
    }
    .flex-direction-nav a {
        width: 24px;
        height: 24px;
        line-height: 24px;
        margin: -12px 0 0;
    }
    .mailinglist-input.form-control {
        width: 200px;
        width: calc(100% - 90px);
    }
    .social-icons li a {
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
    }
    .footer-social ul li {
        padding: 0 4px;
    }
    .extrapages {
        display: none;
    }
    .home-page-content .category-header {
        padding: 15px 0;
    }
    .extrapages-shower a {
        display: block;
    }
    ul.extrapages {
        margin: 0;
        padding: 15px 0;
    }
    ul.extrapages li a {
        font-size: 14px;
    }
    #hp-slides > li {
        background-size: cover !important;
        background-attachment: initial !important;
    }
    .social_icons {
        width: 100%;
    }
    .product-items .product-item {
        text-align: center;
    }
}
@media(max-width: 567px) {
    .product-items.product-items-1 .product-item,
    .product-items.product-items-2 .product-item,
    .product-items.product-items-3 .product-item,
    .product-items.product-items-4 .product-item,
    .product-items.product-items-5 .product-item,
    .product-items.product-items-6 .product-item {
        max-width: 270px;
    }
}

.menu-open {
    overflow: hidden;
}

/* Fix: Prevent ADA navbar styles from affecting mobile menu */
@media (max-width: 991px) {
    .mobile-menu-widget ul ul {
        display: none !important;
    }
    
    .mobile-menu .navbar-nav,
    .mobile-menu .navbar,
    .mobile-menu .navbar-inverse {
        display: none !important;
    }
    
    .mobile-menu-inner > *:not(.mobile-menu-close):not(.mobile-menu-widget) {
        display: none !important;
    }
}
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-color: rgba(0,0,0,0.5);
}
.menu-open .mobile-menu {
    overflow-x: hidden;
    overflow-y: auto;
}
.mobile-menu-inner {
    background-color: #fff;
    padding: 30px 20px;
    width: 250px;
    margin-left: auto;
    margin-right: 0;
    min-height: 100vh;
    position: relative;
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(250px,0);
    -ms-transform: translate(250px,0);
    -o-transform: translate(250px,0);
    transform: translate(250px,0);
}
.menu-open .mobile-menu-inner {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
}

.mobile-menu-close a {
    color: #000;
    display: inline-block;
    line-height: 1;
    font-size: 24px;
    text-decoration: none;
}
.mobile-menu-close a:after {
    content: '\e805';
    font-family: "fontello";
}
.mobile-menu-widget {
    margin: 30px 0;
}
.mobile-menu-widget h3 {
    margin: 0;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    padding-bottom: 10px;
    margin-bottom: 10px;
    line-height: 1;
    border-bottom: 1px solid #ececec;
}
.mobile-menu-widget ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.mobile-menu-widget ul li {
    margin: 0 0 10px;
}
.mobile-menu-widget ul li a {
    padding: 0;
    line-height: 1;
    font-size: 13px;
    background-color: transparent !important;
    display: block;
    color: #000;
    text-decoration: none !important;
}
.mobile-menu-widget ul li a:hover {
    color: #333;
}
.mobile-menu-widget ul ul {
    display: none !important;
}
.mobile-menu-widget ul li a:after {
    display: none;
}

.mailinglist-response {
    margin: 10px 0;
    padding: 10px 20px;
    font-size: 12px;
    background-color: #2d2d2d;
    color: #e0e0e0;
}
.mailinglist-error span {
    color: #8a6d3b;
}
.mailinglist-subscribed span,
.mailinglist-unsubscribed span {
    color: #3c763d;
}

.floating-cart {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 999;
    background-color: #000000;
    color: #fff;
    border-radius: 20px 0 0 20px;
    padding: 15px;
    text-align: center;
    width: 90px;
    display: none;
}
.floating-cart a,
.floating-cart a:hover {
    color: #ececec;
    text-decoration: none;
}
.floating-cart a:hover {
    opacity: 0.6;
}
.floating-cart span.cart-icon {
    display: block;
    font-size: 30px;
    line-height: 1;
}
.floating-cart span.cart-details {
    font-size: 12px;
    text-transform: none;
    display: block;
    margin: 5px 0 0;
}

.paging {
    float: right;
}
.paging strong, 
.paging a {}
.paging strong,
.paging a:hover {
    color: #fff;
    background-color: #0f0f0f;
    text-decoration: none;
}

/*
    Homepage Styles
*/
.home-page-content {
    padding-bottom: 0;
}
.home-page-content .products-section {
    padding: 15px 0;
}
.home-page-content .products-section .product-item .img {
    min-height: 212px;
    position: relative;
    border: none;
    background-color: transparent;
}
.home-page-content .products-section .product-items .product-item {
    margin-bottom: 35px;
}
.home-page-content .products-section h2 {
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0;
    text-align: center;
    position: relative;
    margin: 0 0 45px;
    padding: 0 20px;
}
.home-page-content .products-section h2 span {
    background-color: #fff;
    padding: 0 20px;
}
.home-page-content .products-section h2:before {
    content: "";
    background-color: #000000;
    height: 1px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: -1;
}
.home-page-content .category-footer h3 {
    font-size: 20px;
    line-height: 1;
    margin: 0 0 20px;
    font-weight: bold;
}
.home-page-content .category-footer p {
    margin: 0 0 30px;
    text-align: justify;
}
.home-page-content .category-footer a:hover img {
    opacity: 0.7;
}
.home-page-content .category-header img {
    margin: 0 auto;
}
#hp-slides > li {
    background-position: 50% center;
    background-repeat: no-repeat;
}
.hp-slider-text-outer {
    display: table;
    height: 650px;
}
.hp-slider-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.hp-slider-text h3 {
    font-size: 56px;
    margin: 0;
    font-weight: bold;
    line-height: 1.15;
    color: #50595c;
}
.hp-slider-text h3 > span {
    color: #50595c;
    display: block;
    font-weight: normal;
}
.hp-slider-text h3 > small {
    color: #50595c;
    display: block;
    font-weight: 500;
    font-size: 32px;
}
.hp-slider-text p {
    margin: 25px auto;
}
.hp-slider-img {
    height: 650px;
    position: relative;
}
.hp-slider-img img {
    max-height: 650px;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.hp-slider-cta a {
    min-width: 150px;
}

.home-category-header {
    padding: 30px 0;
}
.homepage-category > a {
    display: block;
}
.homepage-category > a:hover {
    opacity: 0.7;
}
.hp-full-banner {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #000000;
}
.hp-full-banner-text {
    color: #00b2d2;
    text-align: center;
    padding: 150px 0;
    padding-left: 60%;
}
.hp-full-banner-text h2 {
    font-size: 55px;
    margin: 0 0 30px;
    line-height: 1.15;
    text-transform: uppercase;
    font-weight: bold;
}
.hp-full-banner-text h2 span {
    font-weight: normal;
    display: block;
}
.hp-full-banner-cta a {
    color: #00b2d2 !important;
    border: 2px solid #fff;
    min-width: 160px;
}
.hp-full-banner-cta a:hover {
    opacity: 0.5;
}
.hp-brands-slider {
    padding: 60px 0;
}
.hp-brands-slider h2 {
    font-size: 24px;
    margin: 0 0 40px;
    text-transform: uppercase;
    font-weight: bold;
}
.bottom-banner-item a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #00b2d2;
}
.bottom-banner-item a:hover{
    color: #50595c;
}
.bottom-banner-item a img {
    display: block;
    margin: 0 auto;
    border-bottom: 4px solid #00b2d2;
}
.bottom-banner-item a:hover img {
    opacity: 0.8;
    border-bottom: 4px solid #50595c;
}
.bottom-banner-item a h3 {
    text-align: center;
    margin: 0;
    padding: 20px 0 0;
    font-size: 16px;
    text-transform: uppercase;
}
.SnapWidget iframe {
    display: block;
}
@media(max-width: 1199px) {
    .nav > li > a {
        padding: 10px;
    }
}
@media(max-width: 991px) {
    .hp-slider-text-outer,
    .hp-slider-text {
        display: block;
        height: auto;
    }
    .hp-slider-text {
        padding: 30px;
    }
    .hp-slider-text h3 {
        font-size: 48px;
    }
    .hp-full-banner {
        background-image: none !important;
    }
    .hp-full-banner-text {
        width: 100%;
        padding: 50px 0;
    }
    .hp-full-banner-text h2 {
        font-size: 36px;
    }
    .bottom-banner-item {
        margin: 0 0 30px;
    }
}
@media(max-width: 767px) {
    .hp-slider-text h3 {
        font-size: 24px;
    }
    .home-category-header {
        padding: 15px 0;
    }
    .homepage-category {
        padding-top: 7.5px;
        padding-bottom: 7.5px;
        text-align: center;
    }
    .homepage-category > a {
        display: inline-block;
    }
    .free-shipping-message {
        text-align: center;
        padding: 10px 0;
        margin: 0;
    }
}

.sub-menu-item {
}
.sub-menu-item img {
    width: 8px;
    height: 8px;
    position: absolute;
    top: auto !important;
    left: inherit !important;
    z-index: 10001;
    right: 0;
    bottom: 0;
    vertical-align: bottom;
}

/* amazon - WIDTH */
.amazonpay-button-view1 {
    max-width: 250px !important;
}


/* ==========================
   EMERGENCY MOBILE OVERLAY FIX
   Targets all potential popup/modal sources
   ========================== */

@media (max-width: 767px) {
    
    
    /* Force body to be clickable - but allow overflow for modals */
    body {
        pointer-events: auto !important;
    }
    
    /* Hide Facebook Customer Chat on mobile. WisePops, Justuno and HubSpot rules sat
       above this one and matched nothing on any page tested; removed 2026-07-31. */
    .fb-customerchat {
        display: none !important;
    }
    
}

/* Google's reCAPTCHA badge, lifted clear of the back-to-top button, which sits at 20px
   and paints over it at z-index 99. Outside the media query above on purpose: the badge
   collides with that button at every width. What used to sit inside that block forced
   every element with an inline position: fixed down to relative, which dropped the badge
   into the middle of the create-account form and pushed the page 67px wider than the
   screen. BCP-21, 2026-08-06. */
.grecaptcha-badge {
    bottom: 84px !important;
}

/* ==========================
   FIX: Mobile Menu Overlay Stuck
   ========================== */

@media (max-width: 767px) {
    
    /* Force hide mobile menu when it shouldn't be open */
    .mobile-menu {
        display: none !important;
        background: transparent !important;
    }
    
    /* Only show mobile menu when it has 'menu-open' class on body */
    body.menu-open .mobile-menu {
        display: block !important;
    }
    
    /* Ensure mobile menu inner is properly positioned */
    .mobile-menu-inner {
        transform: translate(250px, 0) !important;
        -webkit-transform: translate(250px, 0) !important;
        transition: transform 0.3s ease-out !important;
    }
    
    /* When menu is open, slide it in */
    body.menu-open .mobile-menu-inner {
        transform: translate(0, 0) !important;
        -webkit-transform: translate(0, 0) !important;
    }
    
}

/* 
** PRODUCT LISTING FIXES - Centered & Aspect Ratio Preserved
*/

/* Container for product listings - ensure centering */
.product-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

/* Individual product item - centered content */
.product-item {
    text-align: center;
    margin-bottom: 30px;
}

/* Image container - removed fixed min-height, centered with flexbox */
.product-item .img {
    min-height: auto; /* Remove fixed height constraint */
    height: auto;
    position: relative;
    border: none;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; /* Add breathing room */
}

/* Image link - block level for proper centering */
.product-item .img a {
    display: block;
    width: 100%;
    text-align: center;
}

/* Images - maintain native aspect ratio, centered */
.product-item .img img {
    position: static; /* Remove absolute positioning */
    display: inline-block;
    max-height: 220px; /* Constrain max height instead of forcing min */
    max-width: 100%;
    width: auto; /* Maintain native width */
    height: auto; /* Maintain native height */
    margin: 0 auto; /* Center horizontally */
    object-fit: contain; /* Ensure image fits without distortion */
}

/* Product name and details centered */
.product-item .name {
    text-align: center;
    margin-top: 10px;
}

.product-item .price {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

.product-item .action {
    text-align: center;
    margin-top: 10px;
}

/* Mobile adjustments - maintain centering */
@media(max-width: 767px) {
    .product-items .product-item {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .product-item .img img {
        max-height: 180px; /* Slightly smaller on mobile */
    }
}

/* Override the problematic mobile rule that was too broad */
@media (max-width: 767px) {
    /* Remove the overly broad selector that was breaking layout */
    div > a {
        display: block;
        /* Remove the !important width: 100% that was forcing full width */
    }
    
    /* Specific fix for product images only */
    .product-item .img a {
        display: block;
        width: 100%;
        text-align: center;
    }
    
    .product-item .img a > img {
        display: inline-block;
        margin: 0 auto;
    }
}
/* ==========================
   MOBILE THUMBNAIL CENTERING
   Targets ONLY product items, NOT modals
   ========================== */

@media (max-width: 767px) {
    
    /* Center product item images ONLY */
    .product-item,
    .product-item .img,
    .product-items .product-item {
        text-align: center !important;
    }
    
    .product-item .img a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .product-item .img img,
    .product-item .img a img {
        display: inline-block !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* DO NOT target div > a or all fixed elements - too broad */
    /* DO NOT use [style*="position: fixed"] - breaks modals */
}

/* MOBILE FIXES - Add to bottom of your CSS file */
@media (max-width: 768px) {
    .files {
        -webkit-overflow-scrolling: touch;
    }
    .template-download, .template-upload {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        min-height: 100px;
    }
    .template-download img, .template-upload img {
        max-width: 100%;
        height: auto;
    }
}

/* Magic Zoom Plus expanded view opens below the viewport on iOS Safari.
   MZP skips its scroll lock on iOS and writes an inline `top` offset that
   assumes absolute positioning, but .mz-expand computes to position: fixed.
   Pin it to the viewport instead.  BCP-01 */
@media screen and (max-device-width: 767px) {
    html.mz-expanded-view-open,
    html.mz-expanded-view-open body {
        overflow: hidden !important;
    }

    .mz-expand {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
    }
}

/* Lift the modal layer above the sticky category navbar.

   #category-navbar is position: sticky at z-index 9999 and the live-chat message bar sits
   at the same height, both well above Bootstrap's 1050. An open modal was painted over
   from the navbar down, which hid the Location field of the review form. Nobody saw it
   while BCP-22 kept the Write a Review link switched off.

   10050 clears both and stays under Magic Zoom Plus, which runs its expanded view at
   2000000000 and has to keep the top of the stack. #modalVM is named because a rule
   elsewhere pins it at 2001 with an id selector. */
.modal-backdrop {
    z-index: 10040;
}

.modal {
    z-index: 10050;
}

/* #modalVM carries z-index: 2001 as an inline style attribute, so a stylesheet rule only
   reaches it with !important. Without this the video modal renders under the backdrop that
   the rule above lifts to 10040. */
#modalVM.modal {
    z-index: 10050 !important;
}