/*!
 * Carats Fine Jewelry
 * Copyright 2008-2024 Punchmark
 */


section.scrollable-section {
    position: relative;
}
section.scrollable-section .scroll-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(calc(-50% - 47.5px)) !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 4px !important;
    background: var(--bs-light) !important;
    border: 0px solid var(--bs-light) !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.1) !important;
    outline: none !important;
    z-index: 1000 !important;
}
section.scrollable-section .scroll-arrow.left-arrow {
    left: 0.625rem !important;
}
section.scrollable-section .scroll-arrow.right-arrow {
    right: 0.625rem !important;
}
section.scrollable-section .scroll-arrow.hide,
section.scrollable-section .scroll-arrow.disabled {
    display: none !important;
}
section.scrollable-section .scroll-arrow > i {
    color: var(--bs-dark) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 1 !important;
}



p.small,
.p.small, 
.financing-teaser, 
#jewelry-details-description,
#product-details .small,
#jewelry-column-details .small,
#jewelry-column-details .small * {
    font-size: 14px !important;
}

#jewelry-details-description {
    font-size: 16px !important;
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--bs-primary-600);
    border-color: var(--bs-primary-600);
    color: #ffffff;
}

header,
footer {
    background: var(--bs-dark) !important;
}

header .content-toolbar .content-toolbar-inner > ul > li > a,
header .content-toolbar .content-toolbar-inner > ul > li > a > span {
    color: rgba(255,255,255,0.7) !important;
}

header .content-toolbar .content-toolbar-inner > ul > li > a > i,
header .content-toolbar .content-toolbar-inner > ul > li > a:hover,
header .content-toolbar .content-toolbar-inner > ul > li > a:focus,
header .content-toolbar .content-toolbar-inner > ul > li > a.active,
header .content-toolbar .content-toolbar-inner > ul > li > a:hover > i,
header .content-toolbar .content-toolbar-inner > ul > li > a:focus > i,
header .content-toolbar .content-toolbar-inner > ul > li > a.active > i,
header .content-toolbar .content-toolbar-inner > ul > li > a:hover > span,
header .content-toolbar .content-toolbar-inner > ul > li > a:focus > span,
header .content-toolbar .content-toolbar-inner > ul > li > a.active > span {
    color: rgba(255,255,255,1) !important;
}

.content-toolbar .item-currency-switcher a span span img {
    border-color: rgba(255,255,255,1) !important;
}

@media(max-width:767px){
    nav.navbar #main-navigation {
        background: var(--bs-dark) !important;
    }
    nav.navbar #main-navigation .mobile-top .input-group {
        background: #060606 !important;
    }
    nav.navbar .navbar-nav .nav-item .nav-link,
    nav.navbar .navbar-nav .nav-item>.nav-link-and-plus-wrap .dropdown-plus,
    nav.navbar .navbar-nav .nav-item>.nav-link-and-plus-wrap .dropdown-plus > i,
    nav.navbar #main-navigation .mobile-top-toolbar .toolbar-item>a,
    nav.navbar #main-navigation .mobile-top-toolbar .toolbar-item>a>i,
    nav.navbar #main-navigation .mobile-bottom .nav-bottom-buttons .btn,
    nav.navbar #main-navigation .mobile-top .input-group .btn,
    nav.navbar #main-navigation .mobile-top .input-group .btn i {
        color: rgba(255,255,255,0.7) !important;
    }
    nav.navbar .navbar-nav .nav-item .nav-link:hover,
    nav.navbar .navbar-nav .nav-item .nav-link:focus,
    nav.navbar .navbar-nav .nav-item .nav-link.active,
    nav.navbar .navbar-nav .nav-item>.nav-link-and-plus-wrap .dropdown-plus:hover,
    nav.navbar .navbar-nav .nav-item>.nav-link-and-plus-wrap .dropdown-plus:focus,
    nav.navbar #main-navigation .mobile-top-toolbar .toolbar-item>a:hover,
    nav.navbar #main-navigation .mobile-top-toolbar .toolbar-item>a:focus,
    nav.navbar #main-navigation .mobile-bottom .nav-bottom-buttons .btn:hover,
    nav.navbar #main-navigation .mobile-bottom .nav-bottom-buttons .btn:focus,
    nav.navbar #main-navigation .mobile-top .input-group .btn:hover,
    nav.navbar #main-navigation .mobile-top .input-group .btn:focus,
    nav.navbar #main-navigation .mobile-top .input-group .btn:hover i,
    nav.navbar #main-navigation .mobile-top .input-group .btn:focus i,
    nav.navbar #main-navigation .mobile-top .input-group .form-control {
        color: rgba(255,255,255,1) !important;
    }
    nav.navbar .navbar-nav,
    nav.navbar .navbar-nav .nav-item,
    nav.navbar #main-navigation .mobile-top-toolbar .toolbar-item,
    nav.navbar #main-navigation .mobile-bottom .nav-bottom-buttons,
    nav.navbar #main-navigation .mobile-bottom .nav-bottom-buttons .btn-flex,
    nav.navbar #main-navigation .mobile-top .input-group, 
    nav.navbar ul.navbar-nav .dropdown.show>.dropdown-menu {
        border-color: rgba(255,255,255,0.1) !important;
    }
    .mobile-top-toolbar .item-currency-switcher a span span img {
        border-color: rgba(255,255,255,0.7) !important;
    }
    .mobile-top-toolbar .item-currency-switcher a:hover span span img,
    .mobile-top-toolbar .item-currency-switcher a:focus span span img {
        border-color: rgba(255,255,255,1) !important;
    }
    nav.navbar #main-navigation .mobile-top .input-group .form-control::placeholder {
        color: rgba(255,255,255,0.5) !important;
    }
    nav.navbar #main-navigation .mobile-bottom .nav-bottom-buttons .btn-flex {
        border-radius: 0 !important;
    }
    nav.navbar #main-navigation .mobile-bottom .nav-bottom-buttons .btn-flex:hover {
        background: var(--bs-light) !important;
        border-color: var(--bs-light) !important;
        color: var(--bs-dark) !important;    
    }
}

@media(min-width:768px){
    nav.navbar .navbar-nav .nav-item .nav-link {
        color: rgba(255,255,255,1) !important;
    }
    nav.navbar .navbar-nav .nav-item:hover .nav-link, 
    nav.navbar .navbar-nav .nav-item:hover .nav-link i, 
    nav.navbar .navbar-nav .nav-item:focus .nav-link, 
    nav.navbar .navbar-nav .nav-item:focus .nav-link i, 
    nav.navbar .navbar-nav .nav-item.dropdown-is-open .nav-link, 
    nav.navbar .navbar-nav .nav-item.dropdown-is-open .nav-link i {
        color: rgba(255,255,255,0.7) !important;
    }
    nav.navbar .navbar-nav .nav-item .nav-link {
        line-height: 1 !important;
    }
}

/* ===== Mobile home slider button padding fix ===== */

@media(max-width:767px){
    [data-pagebuilder="section"].banner-section > [data-pagebuilder="section-container"] .content-block .link-container.d-block.pb-0 {
        padding-bottom: 0px !important;
    }
}