/* BOOTSTRAP OVERRIDES */
/* ANTD TOO */

:root {
    --accent: #1d6d8d;
    --accent-light: #4a8aa3;
    --accent-lighter: #77b3ca;
    --accent-ultralight: #e8f0f3;
    --accent-dark: #144c62;
    --accent-darker: #05151c;

    --bs-primary: var(--accent);
    --bs-primary-desat: var(--accent-light);
}

html,
body {
    min-height: 100vh;
}

.text-muted {
    color: rgb(10, 56, 72) !important;
}

.product-page-description {
    font-size: 1.25rem !important;
}

.product-card-description {
    font-size: 18px;
    line-height: 1.3;
}

/* ant-btn  ant-btn-lg */
/*.border-primary,*/
/*.ant-btn-primary {*/
/*  border-color: var(--accent) !important;*/
/*}*/
.btn-primary,
.ant-btn-primary {
    background: var(--accent);
}

.btn-primary:hover,
.ant-btn-primary:hover {
    background: var(--accent-light);
}

.btn-primary-soft {
    background: var(--accent-ultralight);
    color: var(--accent);
}

.btn-primary-soft:hover {
    background: var(--accent-light);
    color: var(--accent-ultralight);
}

.text-primary {
    color: var(--accent) !important;
}

a {
    color: var(--accent);
}

a:hover {
    color: var(--accent);
}

/* h5 a.dropdown-item {
  font-weight: 900;
} */

/* .navbar-nav .dropdown-img-left::before {
  background-color: rgb(132, 0, 49, 0.8);
} */

/* a.dropdown-item {
  color: #333;
} */


a.dropdown-item:hover {
    color: var(--accent);
    text-decoration: underline;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--accent);
}

.navbar-btn {
    background-color: var(--accent);
}

.navbar-btn:hover, .navbar-btn:focus {
    background-color: var(--accent-light);
}

/* .badge-primary-desat {
  background: var(--accent-soft);
} */


.flickity-viewport {
    border-radius: 5px;
    overflow: hidden;
}

.flickity-button {
    width: 40px;
    height: 40px;
    background: var(--accent-lighter);
}

.flickity-button:hover {
    background: var(--accent);
}

.flickity-button.previous {
    transform: translate(0, -50%);
    left: 0px;
}

.flickity-button.next {
    transform: translate(0, -50%);
    right: 0px;
}

.badge.bg-primary-soft {
    background-color: var(--accent-light);
    color: #ffffff;
}

.badge.bg-secondary-soft {
    background-color: var(--accent-ultralight);
    color: var(--accent);

    transition: background-color .2s ease;
}

.badge.bg-secondary-soft:hover {
    background-color: var(--accent) !important;
    color: white !important;
}

@media screen and (min-width: 576px) {
    .navbar-brand-img {
        transform-origin: left center;
        transform: scale(1.25);
    }
}

.accordion-button {
    text-align: left;
}

.accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/></svg>") !important;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231d6d8d'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/></svg>") !important;
}

.accordion-button:focus {
    border-color: var(--accent);
}

.accordion-button:not(.collapsed) {
    color: var(--accent);
    background-color: #ffffff;
}

.bg-dark {
    background-color: var(--accent-darker) !important;
}

footer .text-muted {
    color: var(--accent-light) !important;
}

footer .footer-heading {
    color: var(--accent) !important;
}

.nav-link:focus {
    text-decoration: underline;
}

.dropdown-header {
    color: var(--accent-light);
}

.dropdown-item {
    color: var(--accent-dark);
}

ul.product-list.no-bullets {
    list-style: none;
}

ul.product-list > li {
    box-sizing: border-box;
    line-height: 1.25rem;
    margin-bottom: 8px;
}

ul.product-list > li::marker {
    /*not sure on this,
    TODO: would love any feedback on this!*/
    color: var(--bs-primary-desat);
}

ul.product-list > li > .badge {
    display: inline-flex;
    margin-left: -1.5rem;
}

h1, .h1 {
    font-size: 2.1rem;
}

.flickity-slider {
    display: flex;
    align-items: center;
}