/*============== Defaults ==============*/
/*
Primary: #11586e
Primary Border: #60B2CC
Primary Active: #60B2CC
Primary Active Border: #11586e
Primary BG: #11586e
Link Light: #b87b3d
Link Light (hover, focus): #d4ac77

Color1: #11586e /turq
Color2Dark: #b87b3d /dark gold
Color2Light: #d4ac77 /light gold
Font1: Inter Sans Serif
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">

.fnt-inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;100-900
  font-style: normal;
}

Font2: Cormorant Garamond
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap" rel="stylesheet">

.fnt-cormorant {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;300-700
  font-style: normal;
}

Font3: DM Serif Display
    <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">

.fnt-dmserif {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}

.fnt-dmserifitalic {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
}

All fonts:
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=DM+Serif+Display:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">

*/

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: #ffffff;
    font-size: 16px;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}



/*============== Main ==============*/
.PrimaryColor, .PrimaryColor a {
    color: #11586e !important;
}

    .PrimaryColor a:hover, .PrimaryColor a:focus {
        color: #4494AD !important;
        text-decoration-color: #4494AD !important;
    }

.Pbdr {
    border-color: #4494AD !important;
    fill: #4494AD !important;
}

.Pbg {
    background-color: #11586e !important;
}

.SecondaryColor, .SecondaryColor a {
    color: #d4ac77 !important;
}

    .SecondaryColor a:hover, .SecondaryColor a:focus {
        color: #ffffff !important;
        text-decoration-color: #ffffff !important;
    }

.Sbdr {
    border-color: #d4ac77 !important;
}

.Sbg {
    background: linear-gradient(#d4ac77, #b87b3d) !important;
}

.SbgLt {
    background-color: #f8e9ce !important;
}

.FixTopBody {
    padding-top: 66px;
}

.NavLogo {
    width: auto;
    height: 40px;
    padding: 5px;
}

.CardLayout {
    width: 95%;
    height: 12lh;
}

.RoundTop {
    border-radius: 21px 21px 0 0;
}

.ImageMissingDark {
    fill: #83745c;
}

.ImageMissingLight {
    fill: #cccccc;
}

.ListSecondary {
}

    .ListSecondary li {
        color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
        background-color: transparent;
        border-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
    }

        .ListSecondary li a {
            text-decoration: none;
            color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
        }


.splash {
    height: 65vh;
    width: auto;
    max-width: 90%;
}

.w-95 {
    width: 95%;
}


.hanging-indent {
    padding-left: 1.8rem;
    text-indent: -1.8rem;
}

.text-suppressed {
    color: rgb(213, 213, 213, 0.33)
}


multi-column {
    column-count: 1;
}

@media (min-width: 576px) {
    .multi-column {
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .multi-column {
        column-count: 3;
    }
}

@media (min-width: 1200px) {
    .multi-column {
        column-count: 2;
    }
}

.dropdownItemP a:hover, .dropdownItemP a:focus {
    background-color: #d4ac77 !important;
    color: #fff !important;
}

.dropdownItemP li a:hover, .dropdownItemP li a:focus {
    background-color: #d4ac77 !important;
    color: #fff !important;
}

.ProductListImage {
    aspect-ratio: 5/7;
}


.SizeBox {
    width: 3rem;
    height: 2.5rem;
}

.fnt-cormorant {
    font-family: "Cormorant Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.fs-14 {
    font-size: 14px;
    line-height: 1;
}

.fs-vs {
    font-size: 10px;
    line-height: 1;
}

.product-image-wrapper {
    position: relative;
    overflow: hidden;
}

    /* Both images stack */
    .product-image-wrapper img {
        width: 100%;
        display: block;
    }

/* Hover image sits on top */
.hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* On hover, show alternate image */
.product-image-wrapper:hover .hover-img {
    opacity: 1;
}

#Magnifier {
    touch-action: none;
}

#colorLabel {
    transition: opacity 0.15s ease;
}

.min-vh-small{
    min-height:calc(100vh - 323px);
}

















/*============== Bootstrap Overrides ==============*/
.navbar .nav-link svg {
    vertical-align: middle;
    text-align: end;
}

.navbar .nav-link:hover {
    opacity: 0.7;
}
.accordion {
    --bs-accordion-active-bg: #f7f7f7;
}

.accordion-button:focus {
    /*box-shadow: 0 0 0 0.25rem rgba(68, 148, 173, 0.5);*/
    box-shadow: 0 0 0 0.25rem rgba(212, 172, 119, 0.25);
}

.ratio-5x7 {
    --bs-aspect-ratio: calc(7 / 5 * 100%);
}

/*.ratio-4x5 {
    --bs-aspect-ratio: calc(5 / 4 * 100%);
}
*/
.btn-outline-primary {
    color: #11586e;
    border-color: #4494AD;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        color: #fff;
        background-color: #4494AD !important;
        border-color: #11586e !important;
    }

    .btn-outline-primary:active,
    .btn-outline-primary.active {
        color: #fff;
        background-color: #11586e !important;
        border-color: #11586e !important;
    }

.btn-primary {
    color: #ffffff;
    background: linear-gradient(#ffffff, transparent) !important;
    border-color: transparent !important;
    border-width: 0px;
}

    .btn-primary:hover,
    .btn-primary:focus {
        color: #ffffff !important;
        background: linear-gradient(#11586e, #4494AD) !important;
        border-color: #11586e !important;
        border-width: 1px;
    }

    .btn-primary:active,
    .btn-primary.active {
        color: #ffffff !important;
        background-color: #11586e !important;
        border-color: #11586e !important;
        border-width: 1px;
    }


.btn-primary-onimage {
    color: #ffffff;
    background: linear-gradient(transparent, transparent) !important;
    border: 1px solid rgba(255,255,255,0.1);
}

    .btn-primary-onimage:hover,
    .btn-primary-onimage:focus {
        color: #ffffff !important;
        background: linear-gradient(#11586e, #4494AD) !important;
        border-color: #11586e !important;
        border-width: 1px;
    }

    .btn-primary-onimage:active,
    .btn-primary-onimage.active {
        color: #ffffff !important;
        background-color: #11586e !important;
        border-color: #11586e !important;
        border-width: 1px;
    }




.btn-outline-secondary {
    color: #d4ac77;
    border-color: #d4ac77;
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus {
        color: #ffffff !important;
        background-color: #d4ac77 !important;
        border-color: #b87b3d !important;
    }

    .btn-outline-secondary:active,
    .btn-outline-secondary.active {
        color: #ffffff !important;
        background-color: #b87b3d !important;
        border-color: #b87b3d !important;
    }




.btn-secondary {
    color: #ffffff;
    background: linear-gradient(#ffffff, transparent) !important;
    border-color: #d4ac77;
    border-width: 0px;
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        color: #ffffff !important;
        background: linear-gradient(#d4ac77, #b87b3d) !important;
        border-color: #d4ac77 !important;
        border-width: 1px;
    }

    .btn-secondary:active,
    .btn-secondary.active {
        color: #ffffff !important;
        background-color: #b87b3d !important;
        border-color: #b87b3d !important;
        border-width: 1px;
    }



.btn-secondary-onimage {
    color: #ffffff;
    background: linear-gradient(transparent, transparent) !important;
    border: 1px solid rgba(255,255,255,0.1);
}

    .btn-secondary-onimage:hover,
    .btn-secondary-onimage:focus {
        color: #ffffff !important;
        background: linear-gradient(#d4ac77, #b87b3d) !important;
        border-color: #d4ac77 !important;
        border-width: 1px;
    }

    .btn-secondary-onimage:active,
    .btn-secondary-onimage.active {
        color: #ffffff !important;
        background-color: #b87b3d !important;
        border-color: #b87b3d !important;
        border-width: 1px;
    }





.bg-primary {
    background-color: #83745c !important;
}

.border-primary {
    border-color: #3b322b !important;
}

.link-light {
    --bs-link-opacity: 1;
    color: #d4ac77 !important;
    text-decoration-color: #d4ac77 !important;
}

    .link-light:hover,
    .link-light:focus {
        --bs-link-hover-opacity: 1;
        color: #ffffff !important;
        text-decoration-color: #ffffff !important;
    }

.link-dark {
    --bs-link-opacity: 1;
    color: #11586e !important;
}

    .link-dark:hover,
    .link-dark:focus {
        --bs-link-hover-opacity: 1;
        color: #4494AD !important;
        text-decoration-color: #4494AD !important;
    }

.nav-link {
    color: #888888 !important;
}

    .nav-link:hover {
        color: #000000 !important;
    }

.navbar-nav .OR-Link-Light {
    color: var(--bs-gray-500) !important;
}

    .navbar-nav .OR-Link-Light:hover {
        color: var(--bs-gray-100) !important;
    }



.navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(212,172,119,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

    .navbar .nav-link svg {
        vertical-align: middle;
        text-align: end;
    }

    .navbar .nav-link:hover {
        opacity: 0.7;
    }



/*============== Carousel ==============*/
:root {
    --navbar-height: 66px;
}

#carouselMain {
    height: calc(100vh - var(--navbar-height));
}

    #carouselMain .carousel-inner,
    #carouselMain .carousel-item,
    #carouselMain img {
        height: 100%;
    }

    #carouselMain img {
        object-fit: cover;
    }