@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
$font1:"DM Sans", sans-serif;
$font2:"Spectral", serif;
$font3:"Inter", sans-serif;
body {
	font-family: $font1;
	font-weight: normal;  
	color: #000;
	padding: 0 0 0 0;
    font-size: 16px;
}

header {
    border-bottom: none !important;
}

#attribute_text_353, #attribute_text_350, #attribute_text_346, #attribute_text_2270, #attribute_text_358, #attribute_text_344, #attribute_text_355, #attribute_text_341 {
    text-transform: uppercase;
}

h1,h2,h3,h4,h5,h6
{ font-family: $font2; font-weight: normal; letter-spacing:0; color: #000;
}

.footer .footer-info-heading {width: 170px !important;}

.sd-hero-image-935ba8f4-13e9-4883-b0a5-f30b559cf74a,
.go3989562963,
.go4252299963{
    
}

.footer .socialLinks-item {
    text-align: none !important;
}

.footer-info .socialLinks .icon {
    width: 20px !important;
    height: 20px !important;
}

.navPages-container{
    /* box-shadow: 0px 0px 15px 2px #ebebeb; */
    
}

[data-sub-layout-container="260835fe-f14d-4d01-a43c-eb043a7bc8c3"] {
  min-height: 550px !important;
  overflow: hidden;
}


.form-input--incrementTotal {
    width: 63px !important;
}

.form-increment .button {
    padding: 0 14px !important;
}

.form-input--incrementTotal {
    margin-right: 8px !important;
    margin-left: 8px !important;
}


/* NOT DISPLAY VAULT DROPS */
a.navPages-action[href="https://bonylevy.com/categories/vault-drops.html"],
a.navPages-action[href="https://bonylevy.com/categories/private-access-from-the-vault.html"],
a.navPages-action[href="https://bonylevy.com/categories/14k-jewelry.html"],
{
  display: none !important;
}

.footer-info-list a {
    position: relative;
    text-decoration: none;
}

.footer-info-list a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.footer-info-list a:hover::after {
    transform: scaleX(1);
}


/* HERO TEXT */
.go2815915942 {max-width: 500px;}


.price--non-sale {display: none;}



.socialLinks {}


.productView-reviewLink, .icon--ratingEmpty {margin-top: 2rem !important;}

.price--rrp {font-size: 14px !important;}

.card .price-section .price{
    font-weight: 600;
    color: black;
}

.css-sbaxht, .css-1clkqco {
    font-size: 16px !important;
}

.css-1ssw0ce, .css-1eew03s {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-top: 1rem !important;
}

.css-p5c0ju a , .css-g2cffr a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; /* Default: 2 lines for mobile */
}

/* For screens wider than 1200px (desktop) */
@media (min-width: 1200px) {
  .css-p5c0ju a , .css-g2cffr a {
    -webkit-line-clamp: 1; /* Clamp to 1 line on desktop */
  }
  
  .sd-simple-text-4026a449-8dca-4175-b8d2-8a4184063bd7 p,
.sd-simple-text-acd69e51-f876-43b1-a5b2-2356f49df737 p,
.sd-simple-text-718477d5-e8bf-46c1-9c6a-f87fb9347d8a p,
.sd-simple-text-467c2b44-46ef-4a78-a671-c6a58b11f0dd p,
.sd-simple-text-453fb8fd-5854-4609-bf91-db3c4d6fff3b p
/* .sd-simple-text-81ef22a2-0b2f-4f49-bcad-fd32409376cf p */
{
    padding: 0 22px;
}

}



@media (max-width: 380px) {
  #sd-simple-text-editable-718477d5-e8bf-46c1-9c6a-f87fb9347d8a * {
    max-width: 350px;
  }
  .sd-simple-text-345a2e0c-2ffa-43a5-a8ae-6ddcf7b5a13c * {
      max-width: 300px;
  }
}

@media (max-width: 767px) {
  /* Unwrap and enable grid layout */
  #sd-product-set-carousel-892d37fe-6248-4162-ba51-003a47ffb635,
  #sd-product-set-carousel-80ba74be-ce54-4d7c-bf94-208c9db0bd74,
  #sd-product-set-carousel-562f9d35-3c7c-40a5-973c-fdb961ba9cde,
  #sd-product-set-carousel-f958fc9d-7782-4c86-95dc-e55e3a4bab63,
  #sd-product-set-carousel-3d17cd8f-b1d6-4cd6-b06f-4adccf70cbc5,
  #sd-product-set-carousel-0f9b07d8-10fc-41a0-a7d4-995347078dd5,
  #sd-product-set-carousel-69fc9ceb-ff33-49be-89c5-a49329e993d1,
  #sd-product-set-carousel-2e8c30ab-36f0-4f37-8cb3-617314a0b9eb{
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
    width: 100% !important;
    gap: 0; /* Remove gaps that might break 2x2 under 400px */
  }

  #sd-product-set-carousel-892d37fe-6248-4162-ba51-003a47ffb635 > div,
  #sd-product-set-carousel-80ba74be-ce54-4d7c-bf94-208c9db0bd74 > div,
  #sd-product-set-carousel-562f9d35-3c7c-40a5-973c-fdb961ba9cde > div,
  #sd-product-set-carousel-f958fc9d-7782-4c86-95dc-e55e3a4bab63 > div,
  #sd-product-set-carousel-3d17cd8f-b1d6-4cd6-b06f-4adccf70cbc5 > div,
  #sd-product-set-carousel-0f9b07d8-10fc-41a0-a7d4-995347078dd5 > div,
  #sd-product-set-carousel-69fc9ceb-ff33-49be-89c5-a49329e993d1 > div,
  #sd-product-set-carousel-2e8c30ab-36f0-4f37-8cb3-617314a0b9eb > div{
    display: contents !important;
    transform: none !important;
    transition: none !important;
  }

  #sd-product-set-carousel-892d37fe-6248-4162-ba51-003a47ffb635 > div > div,
  #sd-product-set-carousel-80ba74be-ce54-4d7c-bf94-208c9db0bd74 > div > div,
  #sd-product-set-carousel-562f9d35-3c7c-40a5-973c-fdb961ba9cde > div > div,
  #sd-product-set-carousel-f958fc9d-7782-4c86-95dc-e55e3a4bab63 > div > div,
  #sd-product-set-carousel-3d17cd8f-b1d6-4cd6-b06f-4adccf70cbc5 > div > div,
  #sd-product-set-carousel-0f9b07d8-10fc-41a0-a7d4-995347078dd5 > div > div,
  #sd-product-set-carousel-69fc9ceb-ff33-49be-89c5-a49329e993d1 > div > div,
  #sd-product-set-carousel-2e8c30ab-36f0-4f37-8cb3-617314a0b9eb > div > div{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    box-sizing: border-box;
    padding: 20px 20px; /* Optional: adds space between items */
  }

#sd-product-set-container-892d37fe-6248-4162-ba51-003a47ffb635,
#sd-product-set-container-80ba74be-ce54-4d7c-bf94-208c9db0bd74,
#sd-product-set-container-562f9d35-3c7c-40a5-973c-fdb961ba9cde,
#sd-product-set-container-f958fc9d-7782-4c86-95dc-e55e3a4bab63,
#sd-product-set-container-3d17cd8f-b1d6-4cd6-b06f-4adccf70cbc5,
#sd-product-set-container-0f9b07d8-10fc-41a0-a7d4-995347078dd5,
#sd-product-set-container-69fc9ceb-ff33-49be-89c5-a49329e993d1,
#sd-product-set-container-2e8c30ab-36f0-4f37-8cb3-617314a0b9eb{
  .sd-product-set__arrow--left,
  .sd-product-set__arrow--right,
  [class*="bullet"],
  [class*="pagination"] {
    display: none !important;
  }
}
}

@media (min-width: 768px) {
  /* Unwrap the carousel and lay out as a wrapping grid */
  [id^="sd-product-set-carousel-"] {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
    width: 100% !important;
    gap: 0 !important;
  }

  /* Flatten common inner wrappers */
  [id^="sd-product-set-carousel-"] > div {
    display: contents !important;
    transform: none !important;
    transition: none !important;
  }

  /* Each product tile = 25% width ⇒ 4 per row */
  [id^="sd-product-set-carousel-"] > div > div {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    box-sizing: border-box !important;
    padding: 20px !important; /* adjust to taste */
  }

  /* Hide arrows/bullets/pagination if present */
  [id^="sd-product-set-container-"] .sd-product-set__arrow--left,
  [id^="sd-product-set-container-"] .sd-product-set__arrow--right,
  [id^="sd-product-set-container-"] [class*="bullet"],
  [id^="sd-product-set-container-"] [class*="pagination"] {
    display: none !important;
  }
}





.accordion-content{
    color: black;
}


.sd-simple-text-1202440e-2d01-44ad-9884-0e8c6e6956ff, .sd-simple-text-d6ee6224-8a4b-4063-adbd-a16ac9db3c82, .sd-simple-text-7d1789a0-f8db-4332-a3b5-2e1309f09409, .sd-simple-text-ec16b666-8abf-424b-8884-fb1ecaef80a4 {
    cursor: pointer; 
    background-color: black;
}

.sd-simple-text-1202440e-2d01-44ad-9884-0e8c6e6956ff p, .sd-simple-text-d6ee6224-8a4b-4063-adbd-a16ac9db3c82 p, .sd-simple-text-7d1789a0-f8db-4332-a3b5-2e1309f09409 p, .sd-simple-text-ec16b666-8abf-424b-8884-fb1ecaef80a4 p {
    color: white;
    display: flex;
    align-items: center;
}

.go2854884694content-editable-32ae3178-eb98-4824-aea4-fac1e6f0daab-titlego1304574217custom{
    color: white;
}
/* MAIN HERO TEXT TO WHITE OR BLACK*/
.go2029122802 p{ color: black;}

.productView-price{
    font-size: 25px;
    color: black;
    font-weight: 500;
}

.go2029122802{
    margin-left: 17.5rem;
    margin-top: 14rem;
}

.content-editable-935ba8f4-13e9-4883-b0a5-f30b559cf74a-buttonText p{padding: 8px 60px; color: white;}

@media (max-width: 800px) {
    
    .go671630196{
        padding: 21px 0px 21px 0px !important;
    }
    
  div.go3393032375 {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .content-editable-935ba8f4-13e9-4883-b0a5-f30b559cf74a-buttonText p{padding: 8px 60px !important; }
  
  .go2811956892{
      margin-top: 20px;
  }

  div.go3393032375 > div {
    
  }

  div.go3393032375 p {
    margin: 0 auto !important;
    text-align: center !important;
    padding: 0rem 2rem;
  }

  div.go3393032375 .go338109853 {
    display: inline-block !important;
    margin-top: 16px !important;
    text-align: center !important;
    margin-bottom: 1.6rem;
  }
}


    
#accordion--custom-fields{
    color: black;
}

.navList-item a:hover{text-decoration: underline; color: black;}

p{
	font-family: $font1;
	font-weight: normal; 
	margin-top: 1.5rem;
}
@mixin transition_high
{ transition: all 0.7s ease;-webkit-transition: all 0.7s ease;-moz-transition: all 0.7s ease;-ms-transition: all 0.7s ease;-o-transition: all 0.7s ease;
}
@mixin transition_slow
{ transition: all 0.4s ease;-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-ms-transition: all 0.4s ease;-o-transition: all 0.4s ease;
}
@mixin common_btn{ 
    background-color:#fff;
    color:#000000;
    line-height:normal;
    font-size:18px;
    border: 1px solid #000000;
    border-radius:0;
    outline:none;
    text-transform: none;
    font-family: $font1;
    letter-spacing: 0;
    margin:0;
    font-weight:500;
    &:hover{ 
        background-color:#000000; 
        color:#ffffff;
    }
}
.button,
.button:focus,
.button:active,
.swal2-container .swal2-confirm.button,
.swal2-container .swal2-modal .swal2-cancel,
.main-btn
{ @include common_btn; @include transition_slow;
}
.button:hover, .swal2-container .swal2-confirm.button:hover, .swal2-container .swal2-modal .swal2-cancel:hover, .main-btn:hover
{  @include transition_slow;
}
input:focus,
button:focus,
textarea:focus,
select:focus,
details:focus,
[href]:focus,
[tabindex]:not([tabindex="-1"]):focus,
[contenteditable="true"]:focus{
   outline:none !important;
   outline-offset: 0px !important;
}
.button.button--primary:focus{
    background: #000;
    border-color: #000;
    color: #ffffff;
}
ul li{color: black;}
a{
text-decoration:none;
}
input:focus, button:focus, textarea:focus, select:focus, details:focus, [href]:focus, [tabindex]:not([tabindex="-1"]):focus, [contenteditable="true"]:focus {
   outline:none !important;
   outline-offset:0 !important;
}
*, :before, :after {
	box-sizing: border-box;
	margin: 0;
}
.bony_default .container{
    max-width: 1480px;
    padding: 0 20px;
}
.promo-bar span {
    text-transform: uppercase;
}
.header-logo-image-container {
    width: 194px;
}
.header-logo .navUser-wrap,
.header-logo .quickSearchWrap{
    padding-top: 9px;
}
.navPages{
    .navPages-mainNav {
        .navPages-item{
            &:hover{
                > .navPages-action:before{
                    bottom: 10px;
                }
            }
            > a {
                font-size: 14px;
                font-weight: 500;
                line-height: 18px;
                color: black;
                padding:16px;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                > .navPages-action-moreIcon{
                    display: block;
                    width: 16px;
                    height: 15px;
                    margin-left: 9px;
                    margin-top: 3px;
                    svg{
                        fill: none;
                        stroke: none;
                    }
                }
            }
            &.hover{
                .icon{
                    transform: rotate(180deg);
                }
            }
        }
        .navPage-subMenu-item {
            > a{
                padding-left: 16px;
                padding-right: 16px;
                font-size: 14px;
                font-weight: 400;
                line-height: 18px;
                color: #000;
            }
        }
        .navPage-subMenu{
            padding-bottom: 20px !important;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
    }
}
/* 
    .page-heading{
        font-size: 38px !important;
        line-height: 46px;
    } 
*/
h2.page-heading:after{
    background: #A5A5A5;
}
div[data-content-region="header_bottom"]{
    div{
        padding: 0;
    }
}
.hp-video-container{
    position: relative;
    #hp-banner-video{
        width: 100%;
        height: auto;
    }
    .sound-button{
        position: absolute;
        left:30px;
        top:20px;
        font-family: $font1;
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
        color: #FFFFFF;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: auto;
        padding: 0;
        column-gap: 10px; z-index: 1;
    }
    .muted::before{
        content: '';
        width: 40px;
        height: 40px;
        background: url(https://store-j1k3ana415.mybigcommerce.com/content/volume_on.svg) no-repeat left top;
        background-size: cover;
    }
    .unmuted::before{
        content: '';
        width: 40px;
        height: 40px;
        background: url(https://store-j1k3ana415.mybigcommerce.com/content/volume_off.svg) no-repeat left top; 
        background-size: cover;
    }
}
.hp-video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  position: relative;
  overflow: hidden;
}

#hp-banner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-video-container > a {
    position: absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    top: 0px;
    z-index: 0; text-indent:-9999px;
}
.featured_colections{
    display: inline-block;
    width: 100%;
    margin: 30px 0 100px 0;
    .page-heading{
        margin: 0 0 30px 0;
    }
    ul{
        list-style: none;
        margin:0 -10px;
        padding: 0;
        color: black;
        
        li{
            float: left;
            width: 25%;
            padding: 0 10px; 
            position: relative;
            
        }
        .overlay_text{
            text-align: left;
            position: static;
            display: block;
            text-align: center;
            .f_collection_title{
                margin: 0;
                font-size: 18px;
                font-weight: 500;
                line-height: 36px;
                letter-spacing: -0.41px;
                text-align: center;
                color: #fff;
                display: inline-block;
                margin: 0 0 2px 0;
                width: 100%;
                padding: 10px 0px;
                background: gray;
            }
            a{
                color: #fff;
                font-size: 11.06px;
                font-weight: 500;
                line-height: 19.36px;
                letter-spacing: -0.27px;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                column-gap: 3px;
                &::after{
                    content: '';
                    background: url(https://store-j1k3ana415.mybigcommerce.com/content/f_collection_arrow.svg) no-repeat center;
                    width: 14px;
                    height: 14px;
                    display: inline-block;
                    display: none;
                }
            }
        }
    }
}
.fresh_arrival_section,
.diamond_section{
    display: flex;
    align-items: center;
    justify-content: center;
    .img_content_section{
        float: left;
        width: 47.858%;
    }
    .content_section{
        float: right;
        width: 52.142%;
    }
    .content_section_text{
        border: 1px solid gray;
        width: 100%;
        float: right;
        padding: 47px 0;
        max-width: 93.701%;
        background: gray;
        h2{
            margin:0;
            font-size: 48px;
            font-weight: 400;
            line-height: 49px;
            letter-spacing: -0.06em;
            max-width: 410px;
            margin: 0 auto;
            color: #ffffff;
        }
        p{
            font-size: 18px;
            font-weight: 400;
            line-height: 26px;
            max-width: 410px;
            margin: 23px auto 24px;
            color: #ffffff;
        }
        .button{
            padding:8px 24px 7px;
        }
    }
}
.fresh_arrival_section{
    .content_section_text{
        float: left;
        padding: 65px 0 69px 0;
        p{
            margin: 13px auto 27px;
        }
    }
}
.about_us_section{
    margin:102px 0 55px 0;
    
    display: inline-block;
    width: 100%;
    .page-heading{
        margin: 0 0 30px 0;
    }
    .content{
        background: #F8F8F8;
        float: left;
        width: 100%;
        padding: 28px 40px 28px 40px;
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: left;
        }
        li{
            margin: 0 0 18px 0;
        }
        h2{
            margin: 0;
            font-size: 16.25px;
            font-weight: 800;
            line-height: 26px;
            position: relative;
            font-family: $font3;
            padding: 0 0 0 36px;
            &::before{
                content: '';
                background: #B78E64;
                width: 20px;
                height: 3px;
                display: inline-block;
                position: absolute;
                left: 0;
                top: 12px;
            }
        }
        p{
            max-width: 100%;
            font-family: $font3;
            font-size: 15px;
            font-weight: 400;
            line-height: 22px;
            margin: 0px;
        }
        .read_more{
            margin: 0 0 0 0;
            display: inline-block;
            float: left;
            a{
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-family: $font3;
                font-size: 13px;
                font-weight: 800;
                line-height: 22.76px;
                letter-spacing: -0.3250868618488312px;
                border-bottom: 1px #000 solid;
                width: auto;
                position: relative;
                &::after{
                    content: '';
                    background: url(https://store-j1k3ana415.mybigcommerce.com/content/read_more_arrow_right.svg) no-repeat center;
                    width: 16px;
                    height: 16px;
                }
            }
        }
    }
    .about_us_image{
        float: left;
        width: 100%;
    }
}
div[data-content-region="home_below_featured_products"]{
    margin: 0px;
    
    div{
        padding: 0;
    }
    div[data-test-id="hero-image-title"]{
        max-width: 368px;
        text-align: right;
        padding-right: 90px;
        
        p{
            color: #fff;
            font-family: $font2;
            font-size: 39px;
            font-weight: 500;
            line-height: 40px;
            letter-spacing: -0.3250868618488312px;
            text-align: right;
        }
    }
    div[data-test-id="hero-image-subtitle"]{
        padding-right: 90px;
        p{
            color: #fff;
            max-width: 360px;
            font-family:$font3;
            font-size: 16px;
            font-weight: 400;
            line-height: 26px;
            text-align: right;
            margin: 10px 0 0 0;

        }
    }
    div[data-test-id="hero-image-button"]{
        background: transparent;
        padding: 0 90px 0 0;
        font-family:$font3;
        font-size: 13px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: -0.3250868618488312px;
        text-align: left;
        color: #fff;
        margin:20px 0 0 0;
        p{
            font-family:$font3;
            font-size: 13px;
            font-weight: 500;
            line-height: 22px;
            letter-spacing: -0.3250868618488312px;
            text-align: left;
            color: #fff;
            border-bottom: 1px #fff solid;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 82px;
            height:23px;
            
            &::after{
                content: '';
                background: url(https://store-j1k3ana415.mybigcommerce.com/content/f_collection_arrow.svg) no-repeat center;
                width: 14px;
                height: 14px;
                display: inline-block;
            }
            &:hover{
                opacity: 0.7;
            }
        }
    }
}
div[data-content-region="home_below_top_products"]{
    div{
        padding: 0;
    }
}
.last_section{
    ul{
        margin: 0 -15px;
        padding: 0;
        list-style: none;
    }
    li{
        float: left;
        width: calc(25% - 30px);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        background: #F8F8F8;
        margin: 0 15px;
        padding: 31px 20px 31px;
        border-radius: 5px;
    }
    h3{
        margin:5px 0 0 0;
        font-size: 22px;
        font-weight: 300;
        line-height: 48px;
    }
    p{
        margin: 0;
        text-align: center;
        font-weight: 400;
        font-family: $font2;
        letter-spacing: 0;
    }
}
.footer-newsletter .button{
    font-size: 14px;
    line-height: 14px;
}
.footer-newsletter{
    padding: 25px 15px 25px;
    .page-heading{
        margin:-2px 0 40px 0;
    }
    .form-prefixPostfix.wrap{
        .icon{
            top:11px;
            transform: none;
        }
    }
}
.footer-newsletter .form-prefixPostfix .button,
.footer-newsletter .form .form-prefixPostfix.wrap input#nl_email{
    height: 40px;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}
.footer{
    padding: 40px 0 20px 0;
    .container{
        max-width: 1171px;
        padding: 0;
    }
    .socialLinks-item{
        background: #ffffff00;
    }
    .copyright_top{
        border: none;
        padding: 10px 0 0 0;
        .powered-by{
            color: #fff;
            font-family: $font1;
            font-size: 14px;
            font-weight: 400;
            line-height: 21px;
        }
    }

    .footer-logo-image-container{
        margin-left: 20px;
        img{
            width: 180px;
        }
    }
    .footer-copyright.copyright_bot{
        border: none;
        margin: 0;
        padding: 15px 0 0 0;
    }
    .footer-info-col:nth-child(3){
        flex: 0 1 108px;
        padding: 0;
    }
    .footer-info-col:nth-child(2){
        padding: 0 50px 0 0;
        flex: 0 1 205px;
    }
    .footer-info-col:nth-child(1){
        padding: 0 50px 0 0;
        flex: 0 1 205px;
    }
    .footer-info-heading{
        margin: 0 0 14px 0;
    }
    .footer-info-list{
        a{
            padding: 0;
            margin-bottom: 6px;
        }
    }
    .socialLinks .socialLinks-item{
        margin: 0 15px 0 0;
    }
}


// Product Page CSS Stated
.productView-thumbnail{
    width: 14%;
}
.productView-details {
    .dropdown-menu-button {
        .icon {
            margin-top: 2px;
            margin-left: 10px;
        }
    }
    #wishlist-dropdown.is-open{
        top: 100% !important;
    }
}

.socialLinks {
    .socialLinks-item{
        margin: 14px 14px 0px 0; 
    }
}

.footer-newsletter{
    .form-prefixPostfix{
        .form-prefixPostfix-button--postfix{
            font-size: 14px;
            line-height: 14px;
            font-weight: 500;
        }
    }
}
// Product Page CSS Stated

// As Seen Page CSS Started
.celebrity-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Adjust the gap as needed */
    margin: 0 auto; /* Center the grid */
    row-gap: 50px;
}

.celebrity-image-grid img {
    width: 100%;
    height: auto;
    display: block;
    border: 2px solid #ccc; /* Optional: add a border to the images */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); /* Optional: add a shadow to the images */
}
// As Seen Page CSS Started

// Sitemap Page CSS Started
.sitemap-section .sitemap-block-main {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-flow: row;
    flex-flow: row;
}
.clearfix:after, .clearfix:before {
    display: table;
    content: " ";
}
.sitemap-section .sitemap-block-main .sitemap-block {
    width: 33.33%;
    padding: 0 15px;
}
.sitemap-section ul li {
    line-height: 18px;
    margin-bottom: 10px;
    list-style: none;
}
.sitemap-section .sitemap-block-main .block-title {
    margin-bottom: 15px;
    font-weight: 500;
    font-family: $font1;
}
.sitemap-section .sitemap-block-main ul {
    margin-left: 0;
}

.sitemap-section .sitemap-block-main ul.inner-sitemap-block{
    margin-top: 10px;
}

.sitemap-section ul.list-with-arrow {
    margin-bottom: 10px;
    padding-left: 0px;
}

.sitemap-section ul.list-with-arrow li {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}

.sitemap-section ul.list-with-arrow li:before {
    content: "";
    position: absolute;
    width: 10px;
    height: 7px;
    background: url(https://store-j1k3ana415.mybigcommerce.com/content/sitemap-arrow.svg);
    background-size: 100%;
    left: 0;
    top: 7px;
}

.sitemap-section a {
    outline: 0;
    text-decoration: none;
    transition: all .5s;
    color: #000;
    font-family: $font1;
}
// Sitemap Page CSS Ended

// Category Landing Page CSS Started
.page-content-subcategories .sidebarBlock-heading{
    font-size: 16px;
    font-weight: 500;
}
.page-content-subcategories .navList .navList-action{
    font-size: 14px;
}

.page-sidebar + .page-content .page-content-subcategories .subcategory-grid li{
    flex: 0 1 calc(100% / 5);
}

.sort-and-pagination{
    margin: 20px 0 0 0;
}

.card-title a:hover,.sitemap-section a:hover {
    opacity: 0.5;
}
// Category Landing Page CSS Ended

.alertBox-message {
    color: #ffffff;
}

.swal2-container .swal2-actions button.swal2-confirm {
    margin: 0 10px 0 0;
}

.shipping-estimate-submit{
    float: right;
    margin-bottom: 10px;
}

.shipping-estimate-submit:focus{
    margin-bottom: 10px;
}

.coupon-form .button.button--primary {
    line-height: 14px;
    font-size: 16px;
}

.coupon-form .button.button--primary:focus {
    margin: 0 0 0 2%;
}

#wishlist-dropdown.is-open .button {   
    white-space: break-spaces;
    text-align: center;
}

.error-page .button.button--primary{
    height: 3rem;
    line-height: 10px;
} 

// About US Page CSS Started

.au-video-container {
  position: relative;
  #au-banner-video {
    width: 100%;
  }
  .sound-button {
    position: absolute;
    left: 30px;
    top: 20px;
    font-family: $font1;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #ffffff;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    padding: 0;
    column-gap: 10px;
  }
  .muted::before {
    content: "";
    width: 40px;
    height: 40px;
    background: url(https://store-j1k3ana415.mybigcommerce.com/content/volume_on.svg)
      no-repeat left top;
    background-size: cover;
  }
  .unmuted::before {
    content: "";
    width: 40px;
    height: 40px;
    background: url(https://store-j1k3ana415.mybigcommerce.com/content/volume_off.svg)
      no-repeat left top;
    background-size: cover;
  }
}

.au-wrapper {
  margin-top: 60px;
  .au-page-heading {
    font-family: $font2;
    font-weight: 300;
    font-size: 50.95px;
    line-height: 77.54px;
    text-align: center;
    color: #000000;
    margin-bottom: 15px;
  }
  .au-info p {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    color: #000000;
    padding: 0 53px 0 53px;
  }
  .jewelry-section-one {
    margin-top: 60px;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    padding: 0 53px 0 53px;
    .left-content {
      position: relative;
      max-width: 50%;
    }
    .right-content {
      padding: 28px 40px 28px 26px;
      max-width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .card h3 {
      margin: 0;
      font-size: 16.25px;
      font-weight: 600;
      line-height: 26px;
      position: relative;
      font-family: $font3;
      padding: 0 0 0 36px;
      &::before {
        content: "";
        background: #b78e64;
        width: 20px;
        height: 3px;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 12px;
      }
    }
    .card p {
      max-width: 540px;
      font-family: $font3;
      font-size: 15px;
      font-weight: 400;
      line-height: 22px;
      margin: 8px 0 0 -3px;
      color: #4b4b4b;
    }
    }
  }
  .jewelry-section-two {
    margin-top: 60px;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    padding: 0 53px 0 53px;
    .left-content {
      padding: 28px 40px 28px 26px;
      max-width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .card h3 {
        margin: 0;
        font-size: 16.25px;
        font-weight: 600;
        line-height: 26px;
        position: relative;
        font-family: $font3;
        padding: 0 0 0 36px;
        &::before {
          content: "";
          background: #b78e64;
          width: 20px;
          height: 3px;
          display: inline-block;
          position: absolute;
          left: 0;
          top: 12px;
        }
      }
      .card p {
        max-width: 540px;
        font-family: $font3;
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
        margin: 8px 0 0 -3px;
        color: #4b4b4b;
      }
    }
    .right-content {
      position: relative;
      max-width: 50%;
    }
  }
  .team-section {
    padding: 40px 53px 0 90px;
    background-color: white;
    overflow: hidden;
    display: flex;
    .left-content {
        max-width: 55%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .au-team-heading {
            h2 {
                font-family: $font2;
                font-weight: 400;
                size: 32px;
                line-height: 41.71px;
            }
        }
        .au-team-details {
            p {
                padding: 0px 0px 0 10px;
                font-family: $font1;
                font-weight: 400;
                font-size: 15.02px;
                line-height: 23.36px;
            }
            span.teammate_name {
                color: #B78E64;
                font-weight: 700;
            }
        }
    }
    .right-content {
      position: relative;
      max-width: 40%;
      margin-left: 25px;
    }
  }
}

// About US Page CSS Ended

// System Page CSS Started

.wishlists-table {
  tr td:first-child {
    max-width: 550px;
  }
}

.button, .button:focus, .button:active {
  font-size: 13px;
}

.button.quickview, .button.quickview:focus, .button.quickview:active {
  margin-right: 10px;
}
// System Page CSS Ended

//css by 12-06-24
.fastCart .previewCartCheckout .button {
    padding-left: 10px;
    padding-right: 10px;
}
.fastCart .previewCartCheckout .button:active, .fastCart .previewCartCheckout .button:focus, 
form.login-form.form .button.button--primary:focus, .new-customer button.button.button--primary:focus, 
form.form.forgot-password-form input.button.button--primary.form-prefixPostfix-button--postfix:focus, 
.previewCartAction-checkout a.button.button--small.button--primary:focus, 
.cart-actions.cart-content-padding-right a.button.button--primary:focus{
    background-color: #000000;
    color: #ffffff;
}
form.login-form.form a.forgot-password {
    margin-top: 15px;
}
.form-prefixPostfix .button, .footer-newsletter .form-prefixPostfix.wrap input#nl_email {
    height: 4rem;
}
.previewCartAction--close button.cart-preview-close:hover i svg {
    fill: #fff;
}
.footer-newsletter .icon {
    top: 2rem;
}
.form-increment button.button.button--icon:hover i svg {
    fill: #ffffff;
}

.card .button{
    background: #000;
    border-color: #000;
    color: #ffffff;
}
.product .card .button.quickview:hover{
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}
.card .button:not(.quickview):hover{
    background: #7f7f7f;
    border-color: #7f7f7f;
}
.button:not(.button--primary):not(.optimizedCheckout-buttonPrimary):not(.heroCarousel-action):hover, 
.card-figcaption .button:not(.button--primary):hover{
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}
.form-minMaxRow .form-field button.button {
    line-height: 14px;
}
.card:not(.compareTable-card):not(.card-quick-result) .card-figure > a.compareTable-removeProduct{
    width: 30px;
    height: 30px;
    top: -10px;
    right: -10px;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    line-height: normal;
}
.quickView .productView-details{
    max-width: 100%;
}
.productView.productView--quickView{
    overflow: visible;
}
.form-wishlist.form-action .button:hover i svg {
    fill: #fff;
}
.sale-flag-side{
    z-index: 1;
}

.card:hover .sale-flag-side,
.card-figure:hover .sale-flag-side {
  background-color: #000000; /* green on hover */
  color: #FFFFFF;
}

/* Category badges (New / Best Seller / Exclusive) -- rendered server-side
   in card.html/list-item.html from each product's own category array, so
   this is just presentation. Replaces the old Script Manager version that
   fetched and regex-scraped /new-arrivals/, /best-sellers/, /exclusives/
   client-side on every page load. */
.bl-badge-stack {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}
.bl-badge {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 5px 10px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    white-space: nowrap;
}
.bl-badge-new {
    background: rgba(255,255,255,0.92);
    color: #111111;
    border: 1px solid rgba(0,0,0,0.12);
}
.bl-badge-bestseller {
    background: rgba(17,17,17,0.92);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.15);
}
.bl-badge-exclusive {
    background: linear-gradient(135deg, #caa968, #e8d5a8);
    color: #111111;
    border: 1px solid rgba(0,0,0,0.12);
}
.listItem-figure .bl-badge-stack {
    top: 6px;
    left: 6px;
}

/* filter */
@media screen and (min-width: 801px){
    .page-sidebar+.page-content+.page-content.full-width-page{
        width: 100%;
        padding: 0px;
    }
    .page-sidebar+.page-content+.page-content.full-width-page .productGrid .product {
        flex: 0 1 calc(100% / 4);
    }
    .sort-and-pagination {
        margin: 0px 0 20px 0;
        justify-content: space-between;
        align-items: center;
    }
    /* margin-left:auto is the robust way to pin this to the right edge --
       justify-content:space-between above only works reliably when there
       are exactly two children spanning the row; this holds regardless of
       whether pagination renders any content (e.g. a single-page result
       has no page links at all), so Sort By doesn't end up stranded near
       the left with a big empty gap instead of sitting at the right. */
    .sort-and-pagination-sort {
        margin-left: auto;
    }
    .sort-and-pagination .form-field,
    .sort-and-pagination form.actionBar.sort-products {
        margin: 0;
    }
    .sort-and-pagination ul.pagination-list {
        margin: 0px 0px 0px 20px;
    }
    button#filterToggleButton {
        background: transparent;
        border: 0;
        padding: 0;
        font-size: 15px;
    }
    button#filterToggleButton:hover {
        opacity: 0.5;
        color: #000000;
    }
    button#filterToggleButton > img {
        margin-right: 10px;
    }
    .page-sidebar{
        margin-top: 72px;
    }
}

/* Filters button + item count + Sort By, combined into one row
   (previously the Filters button floated via position:absolute in a
   completely different part of the page -- now a normal in-flow flex
   child of .sort-and-pagination, grouped with the item count on the
   left; Sort By + pagination form the right-hand group). */
.sort-and-pagination-filters,
.sort-and-pagination-sort {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 16px;
}
.sort-and-pagination-filters {
    order: -1;
}
.show-hide-filter {
    flex: 0 0 auto;
}
#filterToggleButton {
    display: inline-flex;
    align-items: center;
    width: auto;
}
.filterToggleButton-count {
    margin-left: 4px;
    color: #767676;
}
.category-product-count {
    margin: 0;
    white-space: nowrap;
}
/* Never shown -- the mobile-only display toggle for this that used to
   live here was reverted (see below), but the item count still lives
   in this span in the markup (product-listing.html / base.html), so
   it needs to stay hidden rather than falling back to a bare span's
   default display:inline and duplicating the count next to
   .category-product-count on desktop. */
.filterToggleButton-itemcount {
    display: none;
}
/* Desktop never needs this -- #facetedSearch-navList is permanently
   expanded there (no collapse mechanism at all, see
   components/stencil/facetedSearch/_facetedSearch.scss:
   .facetedSearch-navList{@include breakpoint("medium"){display:block
   !important}}), so a "Hide Filters" button inside it would be an
   inert, out-of-place control. Shown only inside the mobile media
   block below, where the panel really does collapse/expand. */
.bl-filter-close-mobile {
    display: none;
}
/* Filters button now shown on mobile too, per explicit instruction:
   Filter + item count + Sort By as one row of matching compact
   controls (a plain attempt at this earlier ran into a functional
   bug -- the button's click handler drove #facetedSearch-navList's
   .is-open class AND .page-sidebar's own display, and only the
   former ever did anything on mobile since
   .container--category .page-sidebar{display:block!important}
   (mods.scss) permanently overrides any inline style on
   .page-sidebar -- but that .is-open wiring in category.html's click
   handler was fixed later in the same session and confirmed correct,
   so re-enabling this button on mobile now actually works). The
   theme's own native toggle(s) inside .sidebar-nav-mobile
   (Subcategories + its own separate "Filter" toggle) are hidden
   below instead of left to double up with this one. */
@media (max-width: 800px) {
    /* Removes the Subcategories toggle entirely per explicit
       instruction (it only ever appeared on pages where
       category.subcategories happened to be populated, e.g. after
       picking a category from the custom Category filter -- an
       inconsistent, unexplained extra button next to Filter), along
       with the theme's own native Filter/Price toggles that
       .show-hide-filter's button now replaces on mobile too. The
       actual filter panel (#facetedSearch-navList, rendered in the
       sibling <nav> below this div -- see
       templates/components/category/sidebar.html) is untouched and
       keeps responding to its own .is-open class exactly as before;
       only the redundant toggle buttons themselves are hidden. */
    .sidebar-nav-mobile {
        display: none;
    }
    .show-hide-filter {
        flex: 0 0 auto;
    }
    /* Tight budget: Filter + item count + Sort By all sharing one row
       at 375px means every element's width matters (confirmed via a
       headless-browser layout test -- at the original comfortable
       desktop-ish sizing, Sort By was still ~20-30px too wide to fit
       after Filter + count, wrapping to its own line despite each
       piece individually being "compact"). Trimmed padding/font-size
       here and on .category-product-count/.form-label/#sort below,
       plus dropping the icon (redundant once the button already
       reads "Filter" in a bordered box -- it's not carrying meaning
       on its own), free up just enough width for a real 3-across fit,
       re-verified in the same test after these changes. */
    #filterToggleButton {
        box-sizing: border-box;
        height: 36px;
        border: 1px solid #000;
        padding: 0 12px;
        font-size: 13px;
    }
    /* .button's shared hover style (common_btn mixin, near the top of
       this file) inverts to a solid black fill on hover -- meant for
       real mouse hover on desktop. Touchscreens have no hover
       concept, but some emulators (Chrome DevTools' device toolbar
       included) still fire a hover state on tap that then has
       nothing to clear it, leaving the button looking permanently
       filled black instead of returning to its normal white/bordered
       look -- confirmed in a screenshot from exactly that toolbar.
       Not an issue on a real phone (touch doesn't trigger :hover
       there), but harmless and worth pinning down explicitly rather
       than leaving mobile dependent on that distinction. */
    #filterToggleButton:hover,
    #filterToggleButton:active {
        background: #fff;
        color: #000;
    }
    #filterToggleButton > img {
        display: none;
    }
    .sort-and-pagination-filters {
        gap: 8px;
    }
    /* mods.scss's own .sort-and-pagination{justify-content:space-
       between} (unscoped, so it applies at every width) is correct
       on desktop -- it's what pins Sort By to the far right there --
       and it turns out to be correct again on wider mobile/tablet
       widths (e.g. 768px) for the same reason: Filter + count on the
       left, Sort By on the right, using the row's full width instead
       of huddling in the middle with big empty margins on both sides
       (confirmed live at 768px -- centering a ~270px-wide cluster in
       a 728px-wide row left roughly 230px of dead space on either
       side). It only becomes a problem at genuinely narrow phone
       widths, where there isn't enough room left between the two
       groups for space-between to read as "spread across the row"
       rather than "one big ugly gap stranded in the middle" --
       confirmed live at 375px. So: leave the base space-between
       alone here, and only override it to a centered, tightly-
       grouped cluster below 481px, where there's genuinely not
       enough width for space-between to look intentional. */
    .sort-and-pagination {
        /* mods.scss's base rule doesn't set align-items at all on
           this element outside its own desktop-only block (where it
           is explicitly center), so cross-axis alignment here was
           left at flex's default, stretch -- letting
           .sort-and-pagination-filters (Filter + count) and the
           promoted Sort By fieldset stretch to match whatever the
           tallest item on the line happens to compute to, rather
           than both simply starting flush at the same top edge.
           Explicit flex-start per explicit instruction so Filter +
           count align to the same top edge as Sort By instead of
           whatever stretch/centering produced. */
        align-items: flex-start;
    }
    @media (max-width: 480px) {
        .sort-and-pagination {
            justify-content: space-between;
            gap: 8px;
        }
    }
    .category-product-count {
        font-size: 13px;
    }
    /* .page-sidebar's own margin-bottom:40px (mods.scss) is sized for
       when it's showing real filter content -- with the panel
       collapsed (the normal state, before tapping Filter), that 40px
       left a gap under the whole .sort-and-pagination row (Filter +
       count + Sort By now live inside that row, not in
       .page-sidebar's own now-empty-when-collapsed box, so there's
       nothing left here needing the old compensating margin at all --
       confirmed live). Zeroed rather than just trimmed. */
    .page-sidebar {
        margin-bottom: 0;
    }
    /* Item count and Sort By used to be left to flex-wrap on their
       own, which put them side by side or stacked depending on
       nothing more meaningful than how long the item count's digits
       and the currently-selected sort label happened to be (e.g.
       "48 items" fit next to "Price: Ascending" at 375px, "182
       items" didn't) -- confirmed live as an inconsistent layout
       that changed from page to page for no reason a shopper could
       see. Now that Sort By's own selected-value text is hidden on
       mobile below (leaving a fixed-width "Sort By" control), the
       row's width no longer swings with the current sort choice, so
       going back to one row (align-items only, no forced full-width
       stacking) stays consistent regardless of which sort is active
       -- the only remaining variable is the item count's digit
       count, which is a few px at most and never enough to force a
       wrap at real phone widths. */
    .sort-and-pagination-filters,
    .sort-and-pagination-sort {
        align-items: center;
    }
    .category-product-count {
        line-height: 1;
    }
    /* Even with Sort By itself now compact, item count + Sort By were
       STILL landing on separate lines -- confirmed live. Root cause:
       .sort-and-pagination-sort is one DOM wrapper around BOTH the
       Sort By control AND the full pager (1 2 3 4 5 Next), and on
       mobile the pager alone is routinely wider than the viewport.
       Flex-wrap doesn't know or care that Sort By would fit fine by
       itself -- it can only wrap or not wrap the wrapper as a whole,
       and since the whole wrapper (Sort By + pager together) doesn't
       fit next to the item count, the ENTIRE wrapper -- Sort By
       included -- was dropping to its own line just to make room for
       the pager.

       display:contents removes that wrapper's own box (it stays in
       the DOM, so nothing else about it changes) without touching
       markup, which promotes its two children -- the sort form and
       the pager -- to be direct flex items of .sort-and-pagination
       itself. That lets each be sized and wrapped independently: the
       pager is forced onto its own full-width line below (nothing
       else is short enough to make it worth trying to share a line
       with), freeing the first line for just the item count + Sort
       By, which are now both short enough to actually fit on it. */
    .sort-and-pagination-sort {
        display: contents;
    }
    .sort-and-pagination nav.pagination {
        flex: 1 1 100%;
    }
    /* Root cause of the pagination links sitting stranded far to the
       right with a big empty gap before them (confirmed live at
       768px, subtle enough to miss at 375px where there's little
       spare width for a gap to be obvious): components/foundation/
       pagination/_pagination.scss's own .pagination-list is
       float:right, unconditionally, on every screen size -- fine on
       desktop where it shares a row with Sort By and floating right
       is exactly the intended effect, but once nav.pagination is
       forced onto its own full-width row above, that same float
       pulls the (now short, e.g. just "1 2 3 Next") list all the way
       to the far right of that FULL viewport width instead of
       sitting anywhere near the Filter/count/Sort By row above it.
       float:none lets its own text-align:center (already set by the
       same base rule) take over instead, centering the page links
       under the row above like a normal block of inline-block
       items -- no layout rework needed beyond removing the float. */
    .sort-and-pagination .pagination-list {
        float: none;
    }
    /* Same root cause, one level deeper: components/foundation/
       pagination/_pagination.scss ALSO floats the Previous/Next
       items specifically -- .pagination-item--previous{float:left}
       and .pagination-item--next{float:right}, both unconditional --
       independently of the list's own float handled above. With
       .pagination-list now a full-width block, "Next" was still
       floating to ITS far right edge while every numbered page link
       (plain .pagination-item, inline-block, no float) flowed
       normally on the left -- confirmed live: "1 2 3" clustered left,
       "Next" stranded alone on the right with a big gap between them,
       Previous would do the same on the left if a category has one.
       float:none puts them back in the same normal inline-block flow
       as every other page link, so text-align:center on the list
       centers the whole run -- numbers and Next together -- as one
       connected group. */
    .sort-and-pagination .pagination-item--previous,
    .sort-and-pagination .pagination-item--next {
        float: none;
    }
    /* Per explicit instruction: on mobile, Sort By should read as
       just "Sort By" + the dropdown arrow, not "Sort By: Price:
       Ascending" -- the full selected-value text was most of why
       this control was too wide to sit on the same row as the item
       count in the first place. Hiding only the select's own text
       color (its background-image arrow from
       components/foundation/forms/_forms.scss is untouched, and the
       "Sort By" wording comes from the separate <label> right next
       to it, also untouched) rather than hiding the element, so the
       dropdown itself keeps behaving completely normally -- tapping
       it still opens the real native option list (rendered by the
       OS/browser as its own layer, unaffected by this element's
       text color) and choosing an option still fires the existing
       change handler in sort-box.html.

       color:transparent alone (a first attempt) still left this
       control looking broken -- a wide, empty bordered box -- for a
       reason that only shows up on mobile: mods.scss's own mobile
       override (.sort-and-pagination .form-field select{flex:1 1
       auto}) makes the select GROW to fill whatever width is left
       in its row. That's the right call when the select's own text
       is what the shopper reads (the normal desktop case), but with
       that text now invisible, "grow to fill remaining space" just
       produces a big blank rectangle with nothing to show for its
       width -- confirmed live, matching the screenshot. The select
       (and its wrapping bordered box, .form-field) needs to shrink
       to its own content instead, same as the Filter toggle above;
       since the invisible text itself is still exactly as wide as
       "Price: Ascending" (color doesn't affect layout), a fixed
       narrow width + overflow:hidden clips that invisible text
       rather than relying on it to size the box. */
    /* Matches #filterToggleButton's own box exactly (same height,
       border, padding-left) so the two read as one consistent pair
       of buttons instead of two different sizes sitting side by side
       -- confirmed live that the base theme's own .form-field height
       (governed by $input-small-height, components/citadel/actionBar/
       _settings.scss) didn't line up with our custom Filter button's
       height, plus its own align-items default (stretch) let the
       label and select stretch to mismatched heights inside it. */
    .sort-and-pagination-sort .form-field {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        width: auto;
        box-sizing: border-box;
        height: 36px;
        border: 1px solid #000;
        padding: 0 0 0 12px;
    }
    .sort-and-pagination-sort .form-label {
        font-size: 13px;
        padding-left: 0;
    }
    .sort-and-pagination-sort #sort {
        flex: 0 0 auto;
        /* The arrow icon's own reserved zone (background-position:
           right 9px top 11px, 24px-wide icon -- components/foundation/
           forms/_settings.scss) needs ~33px from the right edge; 36px
           keeps that fully clear with a couple px to spare, trimmed
           down from an earlier, more generous 48px once the row
           needed to fit 3 controls (Filter + count + Sort By) instead
           of 2 -- re-verified in a headless-browser layout test that
           the arrow still isn't clipped at this width. */
        width: 36px;
        min-width: 36px;
        overflow: hidden;
        color: transparent;
        padding: 0;
    }
    /* The bug in the screenshot: opening this dropdown showed
       "Featured Items" readable (blue selection highlight) followed
       by a blank white block where Newest/Price Ascending/Price
       Descending should be. Verified in a real headless-Chromium
       test (not guessed) before writing this: color:transparent on
       a <select> is inherited by its own <option> children --
       getComputedStyle confirmed every <option> here was also
       rgba(0,0,0,0), i.e. invisible text on a white popup, for every
       row except the one under the browser's own selection
       highlight (which forces readable contrast regardless). Explicitly
       setting the options' own color back to normal overrides that
       inheritance -- confirmed after this fix, screenshotting a
       size-forced inline rendering of the same select showed all 4
       rows readable again -- while the select's own CLOSED-state
       text (a separate, non-inherited computed value once set
       directly) stays transparent as intended. */
    .sort-and-pagination-sort #sort option {
        color: #000;
    }
    /* The actual bug this fixes: opening the filter panel here means
       Category/Material/Color/Stone Type/Price Range all render one
       after another, easily taller than the whole viewport -- and
       the ONLY control that closes the panel (#filterToggleButton,
       in .sort-and-pagination) sits in the DOM *after* .page-sidebar,
       so opening it pushes that control down below the entire filter
       list. Confirmed live: after tapping Filter, there was no close
       affordance anywhere on screen without scrolling all the way
       past every filter section first.

       This button lives INSIDE #facetedSearch-navList itself (see
       templates/components/faceted-search/index.html), so it shows
       and hides for free with the exact same .is-open class that
       already governs the panel -- no extra JS state to keep in
       sync. position:sticky keeps it pinned to the top of the
       viewport as the shopper scrolls down through a long filter
       list, rather than only being reachable at the very top the
       instant the panel opens. Clicking it runs through the same
       click handler as #filterToggleButton (category.html), which
       always closes here since this button is only ever visible
       while the panel is already open. */
    .bl-filter-close-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 5;
        background: #fff;
        border: 1px solid #000;
        border-bottom-width: 2px;
        padding: 10px 14px;
        margin-bottom: 10px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }
    .bl-filter-close-mobile .icon {
        width: 14px;
        height: 14px;
    }
}

// Card section link css for Home Page
.last_section h3 a {
    color: #000000;
}

.last_section h3 a:hover {
    text-decoration: underline;
}
.footer-payment-icons svg:last-child {
    margin-top: -5px;
}
.navPages .navPages-mainNav > .navPages-item{
    padding: 0px 10px;
}
body.bony_default header.header + .container {
    max-width: 100%;
    padding: 0;
}
.card .card-title{
    max-width: 100%;
    font-size: 14px;
}
.card-title > a{
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}
.writeReview-form .button.button--primary:focus{
    color: #ffffff;
}
.compareTable-removeProduct .icon{
    margin-top: 0px;
}
#previewModal .modal-close{
    top: 0px;
    right: 0px;
}
.productView .form-label--inlineSmall small{
    height: 20px;
    display: inline-block;
    margin-top: 0;
}
.quickSearchResults div.card-body .card-title > a{
    white-space: break-spaces;
}
.quickSearchWrap section.quickSearchResults:empty{
    border: 0px;
}
/* The Filters toggle used to float via position:absolute right above
   .page-sidebar, needing this compensating margin so it didn't visually
   overlap the sidebar's own heading. Now that the toggle is a normal
   in-flow control inside .sort-and-pagination-filters (see the "Filters
   button + item count" rules above), there's nothing left to compensate
   for -- removed rather than left as dead, unreachable CSS. */
.page-sidebar {
    margin-top: 0;
}
.featured_colections ul li img{
    width: 100%;
}
@media screen and (max-width: 1199px){
    .productView:not(.productView--quickView) .productView-thumbnails .productView-thumbnail .productView-thumbnail-link{
        height: 450px;
    }
    .footer .container{
        padding: 0px 20px;
    }
    .about_us_section{
        display: flex;
        flex-wrap: wrap;
    }
    .about_us_section .page-heading{
        width: 100%;
    }
    .about_us_section .content{
        width: 50%;
        padding: 20px;
    }
    .about_us_section .about_us_image{
        width: 50%;
    }
    .about_us_section .about_us_image > img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .footer .footer-logo-image-container{
        margin-left: 0px;
    }
    .productView-options .form-action .button{
        margin-bottom: 14px;
    }
    .last_section ul{
        margin: 0 -10px;
    }
    .last_section li{
        width: calc(25% - 20px);
        padding: 25px 10px 25px;
        margin: 0 10px;
    }
    .last_section h3{
        font-size: 20px;
        line-height: 40px;
    }
    .au-wrapper .team-section{
        padding: 40px 0px 0 0px;
    }
    .au-wrapper .au-info p,
    .au-wrapper .jewelry-section-one,
    .au-wrapper .jewelry-section-two{
        padding: 0px;
    }
    .au-wrapper .jewelry-section-one .right-content{
        padding: 28px 0px 28px 26px;
    }
    .au-wrapper .jewelry-section-two .left-content .card p{
        margin: 8px 0 0 0;
    }
    .au-wrapper .jewelry-section-two .left-content{
        padding: 28px 40px 28px 0px;
    }
    .error-page .button.button--primary{
        margin-top: 10px;
    }
}
@media screen and (max-width: 991px){    
    .form-minMaxRow .form-field{
        width: 50%;
    }
    .form-minMaxRow .form-field:last-child{
        width: 100%;
        padding-top: 10px;
    }
    .featured_colections ul li{
        width: 50%;
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 800px){
    .footer{
        padding: 30px 0px;
    }
    .footer .footer-info-col:nth-child(1),
    .footer .footer-info-col:nth-child(2){
        padding: 0;
        flex: 0 1 100%;
    }
    .footer .footer-info-col:nth-child(3){
        padding-bottom: 20px;
        margin: 20px 0px 0px;
        flex: 0 1 100%;
        max-width: 100%;
    }
    footer .socialLinks{
        width: 100%;
    }
    .last_section ul{
        display: flex;
        flex-wrap: wrap;
        row-gap: 30px;
    }
    .last_section li{
        width: calc(50% - 30px);
    }
    div[data-content-region="home_below_featured_products"] div,
    div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-button"]{
        padding: 0px;
    }
    div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-title"],
    div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-subtitle"]{
        padding-right: 0px;
    }
    div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-title"] p,
    div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-subtitle"] p{
        color: #000000;
    }
    div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-button"] p{
        border: 1px #000 solid;
        width: auto;
        height: auto;
        background: #000;
        padding: 10px 20px;
    }
    div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-title"]{
        max-width: 100%;
    }
    div[data-content-region="home_below_featured_products"] .go3949826399{
        align-items: center;
        margin-top: 20px;
    }
    div[data-content-region="home_below_featured_products"] .go4045044750:after{
        background-size: cover;
    }
    .footer-newsletter .form-prefixPostfix .form-prefixPostfix-button--postfix{
        margin-top: 11px;
    }
    .footer .copyright_top{
        padding: 0px;
    }
    .footer .footer-copyright.copyright_bot{
        padding: 10px 0 0;
    }
    .footer-info{
        margin: 0px;
    }
    .header-logo .navUser-wrap, 
    .header-logo .quickSearchWrap{
        padding-top: 0px;
    }
    .au-wrapper .jewelry-section-one .left-content,
    .au-wrapper .jewelry-section-one .left-content .main-image img,
    .au-wrapper .team-section .right-content .team-image img,
    .au-wrapper .jewelry-section-two .right-content .main-image img{
        width: 100%;
        max-width: 100%;
    }
    .au-wrapper .jewelry-section-one .right-content{
        padding: 28px 0px 28px 0px;
        max-width: 100%;
    }
    .au-wrapper .jewelry-section-one .right-content .card p{
        max-width: 100%;
        margin: 8px 0 0 0px;
    }
    .au-wrapper .jewelry-section-two .left-content{
        max-width: 100%;
        padding: 28px 0px 28px 0px;
    }
    .au-wrapper .jewelry-section-two .right-content,
    .au-wrapper .team-section .left-content,
    .au-wrapper .jewelry-section-two .left-content .card p{
        max-width: 100%;
    }
    .au-wrapper .team-section .right-content{
        margin: 20px 0px 0px;
        max-width: 100%;
    }
    .au-wrapper .jewelry-section-one{
        flex-wrap: wrap;
    }
    .au-wrapper .jewelry-section-two,
    .au-wrapper .team-section{
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .au-wrapper .card + .card {
      margin-top: 20px;
    }
    .container--category .page-sidebar{
        order: 0;
        display: block !important;
    }
    .navPages .navPages-mainNav .navPages-item.hover .icon{
        transform: none;
    }
    .footer-info-list a{
        float: left;
        clear: left;
    }
    .facetedSearch-clearLink{
        color: #fff;
        z-index: 10;
    }
    .last_section li{
        width: calc(50% - 20px);
    }
}


@media only screen and (max-width: 767px){
    .productView:not(.productView--quickView) .productView-thumbnails .productView-thumbnail .productView-thumbnail-link{
        height: 380px;
    }
    .page-sidebar + .page-content .page-content-subcategories .subcategory-grid li{
        flex: 0 1 calc(100% / 3);
    }
    .about_us_section .content,
    .about_us_section .about_us_image{
        width: 100%;
    }
    .about_us_section .content{
        order: 1;
    }
    .about_us_section{
        margin: 50px 0px;
    }
    .fresh_arrival_section .content_section_text, 
    .diamond_section .content_section_text{
        padding: 30px 15px;
    }
    .fresh_arrival_section .content_section_text h2, 
    .diamond_section .content_section_text h2{
        font-size: 30px;
        line-height: 40px;
    }
    .featured_colections ul{
        margin: 0 -10px;
    }
    .featured_colections ul li{
        padding: 0px 10px;
    }
    .featured_colections{
        margin: 25px 0 50px 0;
    }
    .bony_compare .page > .page-content {
      overflow-x: auto;
    }
    .compareTable{
        table-layout: auto;
    }
    .compareTable-product{
        min-width: 200px;
    }
    .au-wrapper {
        margin-top: 30px;
    }
    .au-wrapper .au-page-heading{
        margin: 0 0px 10px;
        font-size: 40px;
        line-height: normal;
    }
    .featured_colections ul .overlay_text .f_collection_title{
        font-size: 18px;
    }
    .sitemap-section .sitemap-block-main::before,
    .sitemap-section .sitemap-block-main::after{
        display: none;
    }
    .sitemap-section .sitemap-block-main{
        margin: 0;
    }
    .navPages-list--user .navPages-item.navUser-item--account{
        flex: auto;
    }
    .cart-item .cart-item-block.cart-item-info {
        margin-top: 10px;
    }
}


@media only screen and (max-width: 479px){
    
    .go2811956892 {max-width: 270px;}
    
    .page-sidebar + .page-content .page-content-subcategories .subcategory-grid li{
        flex: 0 1 calc(100% / 2);
    }
    .featured_colections ul{
        display: flex;
        flex-wrap: wrap;
        row-gap: 20px;
    }
    .featured_colections ul li,
    .last_section li,
    .fresh_arrival_section .img_content_section, 
    .diamond_section .img_content_section,
    .fresh_arrival_section .content_section, 
    .diamond_section .content_section{
        width: 100%;
    }
    div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-title"] p,
    div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-subtitle"] p{
        text-align: center;
    }
    .fresh_arrival_section, 
    .diamond_section{
        flex-wrap: wrap;
        row-gap: 20px;
    }
    .fresh_arrival_section .content_section_text, .diamond_section .content_section_text{
        max-width: 100%;
    }
    .fresh_arrival_section {
      flex-direction: column-reverse;
      margin-top: 20px;
    }
    .productView-options .form-action .button{
        margin-bottom: 1rem;
    }
    .productView-thumbnail{
        width: 20%;
    }
    .video-figure > img{
        margin: 0px auto 10px;
    }
    .videoGallery-item:last-child a.video {
        margin: 0;
    }
    .video-figure{
        width: 100%;
    }
    .sitemap-section .sitemap-block-main{
        flex-flow: column;
    }
    .sitemap-section .sitemap-block-main .sitemap-block{
        width: 100%;
        padding: 0;
    }
    .sitemap-section .sitemap-block-main .sitemap-block:first-child h3{
        margin-top: 0;
    }
    .featured_colections ul li{
        margin-bottom: 0px;
    }
}
/*SEO CSS*/
@media only screen and (min-width: 801px){
    .page-sidebar #subcategoryList p{
        border-bottom: 1px solid #696969;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
}
.writeReview-productDetails .product-title{
    margin-top: 0;
    font-family: "Spectral", serif;
    font-weight: normal;
    letter-spacing: 0;
    color: #000;
    font-size: 17px;
}
.cms_pg_content h2,
.sitemap-section .sitemap-block-main .block-title{
    font-size: 20px;
}
span.modal-header-title{ 
    font-family: Spectral, serif;
    font-weight: 400;
    letter-spacing: 0;
    color: #000;
    text-align: center;
    display: block;
}
span.footer-info-heading {
    display: block;
}
span.page-heading::after {
    content: "";
    width: 35px;
    height: 3px;
    background: #A5A5A5;
    display: block;
    margin: auto;
}
span.page-heading {
    color: black;
    font-family: "Spectral";
    font-weight: 300;
    display: block;
    font-size: 32px;
}
.last_section li img{
    width: auto;
}
.featured_colections ul li img:not(.lazyloaded){
    aspect-ratio: 0.67;
}
.header-logo:not(.logo-full-size) .header-logo-image{
    width: auto;
}
@media only screen and (max-width: 800px) {
    .footer-info-col.footer-info-dropdown h3{
        cursor: pointer;
        margin: 0;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-between;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .cms_pg_content h2,
    .sitemap-section .sitemap-block-main .block-title{
        font-size: 26px;
    }
}
/* page builder */
div[data-layout-name="category section"] div[class*="sd-simple-text"] p a {
    line-height: 36px;
    letter-spacing: -.41px;
    text-align: center;
    color: #fff;
    display: inline-block;
    margin: 0 0 2px 0;
    width: 100%;
    padding: 10px 0;
    background: gray;
}
div[data-layout-name="category section"] div[class*="sd-simple-text"] div[data-edit-mode] {
    display: block;
    width: 100%; 
}
div[data-layout-name="Homepage Heading"] div[class*="sd-simple-text"] p{
    font-family: Spectral;
}
div[data-layout-name="Homepage Heading"] div[class*="sd-simple-text"] p:after{
    content: "";
    width: 35px;
    height: 3px;
    background: #a5a5a5;
    display: block;
    margin: auto;
}
.banners{
    display: none;
}
.arriavalNewInner,
.spotlightNewInner{
    border: 1px solid gray;
    width: 100%;
    float: right;
    padding: 47px 0;
    background: gray;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.arriavalNewInner div[data-placeholder],
.spotlightNewInner div[data-placeholder]{
    display: none;
}
.index-1 p{
    line-height: 49px;
    letter-spacing: -.06em;
    font-family: Spectral,serif;
    font-weight: 400;
}
.index-3 buttonLink a{
    font-family: "DM Sans";
    line-height: normal;
    font-size: 13px;
}
div[data-layout-name="Home page About"] .aboutNewInner{
    background: #f8f8f8;
    padding: 28px 40px 28px 40px;
}
div[data-layout-name="Home page About"] .aboutNewInner .buttonLink > a{
    border: 0px;
    background: transparent;
    padding: 0px;
    justify-content: space-between;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 22.76px !important;
    letter-spacing: -.3250868618488312px;
    border-bottom: 1px #000 solid;
    width: auto;
    position: relative;
    display: flex !important;
    align-items: center;
    border-radius: 0px;
}
div[data-layout-name="Home page About"] .aboutNewInner .buttonLink > a:after{
    content: '';
    background: url(https://store-j1k3ana415.mybigcommerce.com/content/read_more_arrow_right.svg) no-repeat center;
    width: 16px;
    height: 16px;
}
div[data-layout-name="category section"] a img {
    width: 100% !important;
}
div[data-layout-name="Home page Arrival"]  div[data-sub-layout] img,
div[data-layout-name="Spotlight Layout"]  div[data-sub-layout] img{
    width: 100% !important;
}
.footer-newsletter .form-field{
    margin-bottom: 0px;
}
.arriavalNewInner, 
.spotlightNewInner{
    position: relative;
}
a.spotCustomLink,
a.arriavalCustomLink{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 0;
}
.arriavalNewInner .buttonLink a, 
.spotlightNewInner .buttonLink a{
    position: relative;
    z-index: 1;
}
#consent-manager p {
    color: #fff;
}
.card-figcaption{
    display: block;
    height: auto;
    max-height: none;
    padding: 0px 0px 10px;
    z-index: 5;
    opacity: 1;
    position: static;
}
.card-figcaption .card-figcaption-body{
    position: static;
}

/* Show Add to Bag button on mobile (previously desktop-only); Quick View stays desktop-only */
@media (max-width: 767px) {
    .card-figcaption--action-buttons {
        flex-wrap: wrap;
    }
    .card-figcaption--action-buttons .button {
        flex: 1 1 100%;
        font-size: 12px;
        padding: 10px 12px;
    }
    .card-figcaption--action-buttons .quickview {
        display: none;
    }
}

.bony_category ul.breadcrumbs{
    margin-bottom: 15px;
}
.bony_category .body{
    margin-top: 15px; 
}
.pro_des_right {
    margin: 30px 0px 0px;
    float: left;
    width: 100%;
}
.pro_des_right .accordion-content {
    padding-top: 0px;
    padding-bottom: 0;
}
/* Full product page only — the 2-up thumbnail grid below breaks the
   Quick View modal (it's much narrower), so Quick View keeps the theme's
   default single main image + thumbnail strip gallery instead. */
.productView:not(.productView--quickView){
    .productView-images{
        .productView-image {
            display: none;
        }
    }
}
.productView:not(.productView--quickView) .productView-thumbnails{
	flex-wrap: wrap;
        row-gap: 0;
	.productView-thumbnail{
		width: 50%;
		padding: 0 1px;
		.productView-thumbnail-link{
			width: 100%;
			height: 540px;
			max-width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			img {
				max-width: 100%;
				max-height: 100%;
				width: 100%;
				position: initial;
                object-fit: cover;
                width: 100%;
                height: 100%;
			}
		}
	}
}

.quick_productView_rating{
    margin-top: 30px;
}
.productView{
    .affirm-as-low-as{
        margin: 0;
    }
    div[data-content-region="product_below_price"]{
        div[data-placement-status="ACTIVE"]{
            div{
                height: auto !important;
            }
        }
    }
}
.productView-details{
    .productView-rating{
        margin-top: 25px;
    }
}
.productView.productView--quickView{
    .productView-rating{
        display: inline-block;
        width: 100%;
    }
}
.quickView {
    .productView-details{
        margin: 0;
    }
}

/* ROOT CAUSE of the mobile Quick View gallery being cramped/broken:
   this max-width:50% split (mods.scss) was written for the desktop
   two-column layout (images | details side by side) but was never
   scoped to desktop only. On mobile, where everything stacks in one
   column instead, it was still squeezing the *entire* gallery section
   (main image + thumbnails together) into half the modal's width,
   leaving the other half blank. Every thumbnail-sizing rule below was
   working correctly all along -- they just lived inside a container
   that was already half as wide as it should have been. Restore full
   width below the desktop breakpoint. */
@media (max-width: 767px) {
    .quickView .productView-images,
    .quickView .productView-details {
        max-width: 100% !important;
        flex: 0 1 100% !important;
    }
}

/* Quick View gallery, same layout on every screen size: one large
   main image on top, thumbnails wrapped in a row below it. Three
   separate attempts at a side-by-side desktop rail (main image left,
   thumbnail column right) all ran into the same base-theme flex/
   aspect-ratio interactions and never rendered reliably, so dropping
   that idea entirely in favor of the simple layout that's already
   proven to work well on mobile. */
.productView--quickView .productView-images {
    padding-top: 10px;
}
.productView--quickView .productView-image {
    max-width: 480px;
    margin: 0 auto;
}
.productView--quickView .productView-img-container {
    max-height: 400px;
}
.productView--quickView .productView-thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px !important;
}
.productView--quickView .productView-thumbnail {
    padding: 0;
    width: auto;
}
.productView--quickView .productView-thumbnail-link {
    width: 70px;
    height: 105px;
    max-width: 70px;
}
.productView--quickView .productView-thumbnail-link.is-active,
.productView--quickView .productView-thumbnail-link:hover {
    border-color: #000;
    border-width: 2px;
}
/* Products with more than 7 images get Slick-ified (see
   product-view.html), which applies its own inline horizontal
   transform/width styles to .slick-list/.slick-track that fight this
   wrapping row and render as a squashed mini-carousel. Flatten
   Slick's markup back into a plain wrapping row. */
.productView--quickView .productView-thumbnails .slick-list {
    overflow: visible !important;
}
.productView--quickView .productView-thumbnails .slick-list,
.productView--quickView .productView-thumbnails .slick-track {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    transform: none !important;
    transition: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px;
}
.productView--quickView .productView-thumbnails .slick-slide {
    display: block !important;
    float: none !important;
    width: 70px !important;
    height: auto !important;
}
.productView--quickView .productView-thumbnails .js-product-thumb-prev-arrow,
.productView--quickView .productView-thumbnails .js-product-thumb-next-arrow {
    display: none !important;
}
.productView--quickView .productView-details {
    padding-top: 18px;
}

/* Mobile product page (NOT Quick View): MagicZoom is the intended
   gallery everywhere (it hides the theme's native .productView-image
   itself via inline style once it initializes — confirmed via
   DevTools, .productView-image carries style="display:none" and
   .MagicZoomGallery renders alongside it). The old rule here forced
   .productView-image back to display:flex !important on mobile,
   which — because !important beats an inline style — undid
   MagicZoom's own hide and made both the native image and
   MagicZoom's gallery render at once (the "two images" bug). Removed;
   .productView-image now stays hidden per the base
   ".productView:not(.productView--quickView) .productView-image"
   rule above, leaving MagicZoom as the only visible gallery. Thumbnail
   row sizing below is unrelated to MagicZoom and still applies. */
@media (max-width: 767px) {
    .productView:not(.productView--quickView) .productView-thumbnails {
        display: flex !important;
        flex-wrap: wrap !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        gap: 10px !important;
        margin-top: 16px !important;
    }
    .productView:not(.productView--quickView) .productView-thumbnails .productView-thumbnail {
        width: auto !important;
        padding: 0 !important;
    }
    .productView:not(.productView--quickView) .productView-thumbnails .productView-thumbnail-link {
        width: 70px !important;
        height: 105px !important;
        max-width: 70px !important;
    }
}

@media only screen and (min-width: 990px){
    .quickSearchWrap input.form-input {
        width: 60%;
    }
}
@media only screen and (max-width: 990px) {
    div[data-layout-name="category section"]{
        row-gap: 20px;
    }
    div[data-layout-name="category section"] > div {
        max-width: 50%;
        width: 50%;
        flex-basis: 50%;
    }
    div[data-layout-name="Spotlight Layout"] {
        margin: 0px -10px 30px;
    }
    .aboutNew {
        padding: 0px !important;
    }
    .last_section ul{
        width: auto;
    }
    div[data-content-region="home_below_featured_products"] .go3949826399{
        margin-bottom: 25px;
    }
}
@media only screen and (max-width: 767px) {
    div[data-layout-name="Spotlight Layout"] {
        flex-direction: column-reverse;
    }
	div[data-layout-name="Hero Section Cat Cards"]{
		align-items: flex-start;
		> div{
			width: 50%;
			flex-basis: 50%;
			max-width: 50%;
			div{
				a{
					img{
						height: 300px !important;
        				object-fit: cover;
					}
				}
				div[data-edit-mode]{
					p{
						&:first-child{
							height: 60px;
							overflow: hidden;
						}
					}
				}
			}

		}
	}
}
@media only screen and (max-width: 479px) {
    div[data-layout-name="category section"] > div {
        max-width: 100%;
        width: 100%;
        flex-basis: 100%;
    }
    .go3525954764{
        min-height: 170px !important;
    }
    .spotlightNewInner p {
        padding: 0px 5px;
    }
    .productView:not(.productView--quickView) .productView-thumbnails .productView-thumbnail .productView-thumbnail-link{
        height: 250px;
    }
} 
div[data-content-region="header_bottom"]{
    div{
        img{
            object-fit: contain;
        }
    }
}

body.page--collections .sidebarBlock.page-content-subcategories {
    display: none;
}


/* 1️ Hide matching <a> links (fallback layer) */
.navList-item a[href*="earring-charms"],
.navList-item a[href*="earring-backings"],
.navList-item a[href*="drop-earrings"],
.navList-item a[href*="stud-earrings"],
.navList-item a[href*="collections"],
.navList-item a[href*="limited-edition"],
.navList-item a[href*="mens-jewelry"],
.navList-item a[href*="men-jewelry"],
.navList-item a[href*="mens"],
.navList-item a[href*="tennis-necklaces"],
.navList-item a[href*="y-necklaces"],
.navList-item a[href*="gemstone-necklaces"],
.navList-item a[href*="statement-rings"],
.navList-item a[href*="engagement-rings"],
.navList-item a[href*="bridal-rings"],
.navList-item a[href*="eternity-diamond-rings"],
.navList-item a[href*="gemstone-rings"],
.navList-item a[href*="tennis-bracelets"],
.navList-item a[href*="stretch"],
.navList-item a[href*="flex-bracelets"],
.navList-item a[href*="personalized-bracelets"] {
  display: none !important;
}

/* 2️ Hide the entire <li> that contains any of those links (prevents grid gaps) */
.navList-item:has(a[href*="earring-charms"]),
.navList-item:has(a[href*="earring-backings"]),
.navList-item:has(a[href*="drop-earrings"]),
.navList-item:has(a[href*="stud-earrings"]),
.navList-item:has(a[href*="collections"]),
.navList-item:has(a[href*="limited-edition"]),
.navList-item:has(a[href*="mens-jewelry"]),
.navList-item:has(a[href*="men-jewelry"]),
.navList-item:has(a[href*="mens"]),
.navList-item:has(a[href*="tennis-necklaces"]),
.navList-item:has(a[href*="y-necklaces"]),
.navList-item:has(a[href*="gemstone-necklaces"]),
.navList-item:has(a[href*="statement-rings"]),
.navList-item:has(a[href*="engagement-rings"]),
.navList-item:has(a[href*="bridal-rings"]),
.navList-item:has(a[href*="eternity-diamond-rings"]),
.navList-item:has(a[href*="gemstone-rings"]),
.navList-item:has(a[href*="tennis-bracelets"]),
.navList-item:has(a[href*="stretch"]),
.navList-item:has(a[href*="flex-bracelets"]),
.navList-item:has(a[href*="personalized-bracelets"]),
.navList-item:has(a[href*="new-markdowns"]),
.navList-item:has(a[href*="markdowns"]),
.navList-item:has(a[href*="last-chance"]),
.navList-item:has(a[href*="seasonal-edits"]),
.navList-item:has(a[href*="the-art-of-balance"])

{
  display: none !important;
}

/* Alternative: URL-based rule */
.sidebarBlock.page-content-subcategories:has(a[href*="holiday-gifting-essentials"]) {
  display: none !important;
}

.navPages-item:has(a[href="https://bonylevy.com/categories/all-jewelry/80s-revival"]) {
    display: none !important;
}

/* Custom filter curation: limit which checkbox values show under a
   given faceted-search filter, instead of BigCommerce's full
   auto-generated list. Pattern: hide every value in the facet's list
   by default, then explicitly re-show only the ones you want by
   matching the end of their link (each value is the last query
   param, e.g. "...&Material%2FMetal+Type=14K+Yellow+Gold"). Hiding
   "Show More" too since there's nothing left worth surfacing once a
   facet is deliberately curated like this.

   To reuse this for another facet (e.g. Stone Type): find its list
   id (it's #facetedSearch-navList--<Facet-Name>, spaces become
   hyphens, "/" stays literal -- e.g. "Stone Type" ->
   #facetedSearch-navList--Stone-Type), copy this block, and swap the
   id + the allowed values. URL-encode spaces as "+" in the href
   value, "&" as "%26", etc. to match what BigCommerce generates. */
#facetedSearch-navList--Material\/Metal-Type {
    /* Needed so the "order" rules below actually do something -- the
       base theme's list is plain block markup, which ignores "order"
       entirely. */
    display: flex !important;
    flex-direction: column !important;
}
#facetedSearch-navList--Material\/Metal-Type .navList-item {
    display: none !important;
}
#facetedSearch-navList--Material\/Metal-Type .navList-item:has(a[href$="Material%2FMetal+Type=14K+Yellow+Gold"]),
#facetedSearch-navList--Material\/Metal-Type .navList-item:has(a[href$="Material%2FMetal+Type=18K+White+Gold"]),
#facetedSearch-navList--Material\/Metal-Type .navList-item:has(a[href$="Material%2FMetal+Type=18K+Yellow+Gold"]),
#facetedSearch-navList--Material\/Metal-Type .navList-item:has(a[href$="Material%2FMetal+Type=14K+White+Gold"]) {
    display: block !important;
}
/* Whatever the shopper actually has checked stays visible even if
   it isn't one of the 4 curated values above (e.g. picked while the
   fallback below was showing everything) -- otherwise their own
   selection could vanish from the list on the next render, with no
   way to see or uncheck it. Placed before the order rules below so
   a selected value that IS one of the 4 still gets its normal
   order, not this default one. */
#facetedSearch-navList--Material\/Metal-Type .navList-item:has(a.is-selected) {
    display: block !important;
    order: 5;
}
/* Custom display order: 14K Yellow, 14K White, 18K Yellow, 18K White
   (grouped by karat, then color) -- independent of whatever order
   BigCommerce generates the facet values in. Change the numbers to
   reorder, or add more "order:" rules the same way to reorder other
   curated facets. */
#facetedSearch-navList--Material\/Metal-Type .navList-item:has(a[href$="Material%2FMetal+Type=14K+Yellow+Gold"]) {
    order: 1;
}
#facetedSearch-navList--Material\/Metal-Type .navList-item:has(a[href$="Material%2FMetal+Type=14K+White+Gold"]) {
    order: 2;
}
#facetedSearch-navList--Material\/Metal-Type .navList-item:has(a[href$="Material%2FMetal+Type=18K+Yellow+Gold"]) {
    order: 3;
}
#facetedSearch-navList--Material\/Metal-Type .navList-item:has(a[href$="Material%2FMetal+Type=18K+White+Gold"]) {
    order: 4;
}
#facetedSearch-content--Material\/Metal-Type .toggleLink {
    display: none !important;
}
/* Fallback: once other filters are applied, BigCommerce may narrow
   this category down to a set of products where NONE of the 4
   curated Material/Metal Type values are available anymore -- in
   that case the rules above would hide every item, leaving a blank
   filter section with no native Show More to fall back on (we hid
   it above). base.html adds this class via JS when it detects zero
   curated values are present, so something always shows instead of
   an empty box. */
#facetedSearch-navList--Material\/Metal-Type.custom-fallback-show-all .navList-item {
    display: block !important;
}
#facetedSearch-navList--Material\/Metal-Type.custom-fallback-show-all ~ .toggleLink {
    display: inline-block !important;
}
/* This whole section is superseded by the "Material" + "Color"
   pseudo-filters base.html injects right after it (built from the
   same 4 raw values above, split into karat and color). Hides the
   native section entirely rather than deleting it -- it stays fully
   functional in the DOM (still responds to URL changes, still
   tracked by BigCommerce's own JS), just invisible, since the
   pseudo-filters read/write its underlying facet param directly. */
.accordion-block:has(#facetedSearch-content--Material\/Metal-Type) {
    display: none !important;
}

/* Stone Type facet: Natural Diamond, Emerald, Sapphire, Ruby are
   built as fully custom checkboxes in base.html
   (ensureStoneTypeCuratedFilter), not the native ones for those
   values -- confirmed live that BigCommerce's own facet-value
   computation for this facet unreliably excludes some of these on
   certain categories (Ruby/Sapphire don't appear at all on "All
   Jewelry" despite correct underlying data and higher counts than
   several values that DO appear there). Filtering by the URL param
   directly still works correctly even when the facet doesn't offer
   it as a checkbox (confirmed:
   bonylevy.com/all-jewelry/?Stone+Type=Ruby correctly returns the
   16 real ruby items), so constructing that URL directly sidesteps
   the unreliable computation entirely instead of depending on
   BigCommerce having rendered a checkbox for it. The native
   checkboxes for these 4 (when BigCommerce does render them) are
   hidden directly via JS rather than CSS, so there's no ambiguity
   about which wins.

   Everything else (combo values like "Emerald & Natural Diamond",
   plus whatever other stone types a category carries -- Amethyst,
   Citrine, Peridot, etc.) is still hidden by default and only
   revealed behind "Show More", same as before. See base.html: the
   custom Show More button only injects itself when BigCommerce's
   own native toggle isn't already present for this facet. */
#facetedSearch-navList--Stone-Type {
    display: flex !important;
    flex-direction: column !important;
}
#facetedSearch-navList--Stone-Type .navList-item.bl-stone-type-curated {
    display: block !important;
}
/* Per explicit instruction, no product counts on Stone Type values.
   The curated 4 (Natural Diamond/Emerald/Sapphire/Ruby) already omit
   the count in base.html since their label is built from scratch;
   this covers the rest (e.g. "Princess Cut Natural Diamond"),
   revealed via Show More, whose count BigCommerce renders as a
   plain, unclassed <span> right after the label (facets/multi.html)
   -- the icon-close span right next to it does have a class, so this
   won't touch that. */
#facetedSearch-navList--Stone-Type .navList-item a.navList-action > span:not(.navList-action-close) {
    display: none !important;
}

/* Cart icon quantity badge: small black circle with a white number,
   pinned to the top-right corner of the cart icon instead of the
   default "(2)" text next to it. */
.navUser-item--cart .cart-icon-wrap {
    display: inline-block;
    position: relative;
}

.navUser-item--cart .cart-quantity-badge {
    background-color: #000;
    border-radius: 50%;
    color: #fff;
    display: none;
    font-size: 10px;
    font-weight: 700;
    height: 16px;
    line-height: 16px;
    min-width: 16px;
    padding: 0 3px;
    position: absolute;
    right: -8px;
    text-align: center;
    top: -6px;
}

.navUser-item--cart .cart-quantity-badge.countPill--positive {
    align-items: center;
    display: flex;
    justify-content: center;
}
#facetedSearch-navList--Stone-Type .navList-item {
    display: none !important;
}
/* Whatever the shopper has checked among the non-curated values
   stays visible even without Show More active (e.g. picked through
   the native Show More search modal) -- otherwise their own
   selection could vanish from the list, with no way to see or
   uncheck it. The curated 4 don't need this exception since they're
   never natively rendered here at all (hidden directly via JS) --
   their checked state is tracked by the custom checkboxes instead. */
#facetedSearch-navList--Stone-Type .navList-item:has(a.is-selected) {
    display: block !important;
}
/* Anything revealed via "Show More" (Amethyst, Citrine, etc.) --
   no explicit order needed since the curated 4 are never natively
   rendered here to jump ahead of. */
#facetedSearch-navList--Stone-Type.custom-show-more-active .navList-item {
    display: block !important;
}

/* Category is handled entirely in base.html now (plain navigation
   links, not a facet) -- BigCommerce's real "Category" facet is
   enabled in admin but doesn't render on a category's own browse
   page, only on pages spanning multiple categories (Search, Brand),
   confirmed live. On those pages it DOES still render natively
   (id="facetedSearch-content--category", all lowercase -- distinct
   from the custom filter's own "facetedSearch-content--custom-
   Category") sitting right below the custom Category block, listing
   real BigCommerce categories like "14K Jewelry"/"18K Jewelry" with
   counts -- a second, redundant "Category" heading confirmed live on
   Search. Hides the whole native block (heading included, not just
   its items) since the custom filter fully replaces it. */
.accordion-block:has(#facetedSearch-content--category) {
    display: none !important;
}

/* Subcategory nav block (e.g. Chain/Diamond/Pendant/Personalized
   Necklaces) that category pages with subcategories render at the
   top of the filter sidebar -- removed per explicit instruction,
   as clutter next to the custom Category filter. #subcategoryList
   exists ONLY inside the filter sidebar (confirmed in the rendered
   markup), so this touches nothing else: the Shop By Category nav
   menu and every other place subcategories appear are unaffected. */
#subcategoryList {
    display: none !important;
}

/* Price Range: BigCommerce's native price facet is a free-typed
   min/max form (facets/range.html), not a preset checkbox list.
   base.html injects a 5-bucket "Price Range" pseudo-filter right
   after it, built on the same min_price/max_price params that form
   already submits to. Hides the native form entirely rather than
   deleting it -- same reasoning as Material/Metal Type above. */
.accordion-block:has(#facet-range-form) {
    display: none !important;
}

@media only screen and (max-width: 800px) {
    h1 {font-size: 20px !important;}
    .productView-price {font-size: 20px !important; font-weight: 600 !important;}
    .productSKU {font-size: 14px !important;}
}


.form-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    float: none !important;
}

.redeemable-label {
    font-size: 0 !important; /* hides original text */
}

.redeemable-label::after {
    content: "Coupon Code / eGift Code" !important;
    font-size: 14px !important; /* set to whatever the original was */
    font-weight: 500 !important; /* optional */
}

.promo-text{
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track{
  display: inline-flex;
  gap: 60px; /* space between messages */
  animation: tickerScroll 24s linear infinite;
  will-change: transform;
}

.ticker-track span{
  white-space: nowrap;
}

/* continuous left scroll */
@keyframes tickerScroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation: none; }
}

/* Scroll-to-top button (see base.html for the button + show/hide
   script). Bottom-right so it doesn't collide with the gift-icon
   widget already anchored bottom-left. Hidden by default; the script
   adds .is-visible once the page has scrolled far enough down. */
#scrollToTopBtn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
#scrollToTopBtn:hover {
    background: #333;
}
#scrollToTopBtn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
@media (max-width: 767px) {
    #scrollToTopBtn {
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px;
    }
}

/* Below the 801px breakpoint where the sidebar's filter sections stack
   full-width (desktop already zeroes this out via the theme's own
   .accordion--navList medium-breakpoint override), .accordion-title and
   .accordion-content are two separate boxes that each carry the theme's
   full 1rem padding on every side. Because they're siblings, the gap
   between a heading like "Category" and its first row stacks BOTH
   boxes' padding (title's bottom + content's top = 2rem), while the
   left/right inset next to that same heading is only ever a single
   1rem from one box -- confirmed live at 700px width. Zeroing only
   ONE of the two touching sides removes the doubling while leaving
   the other box's 1rem intact, so the heading-to-first-row gap ends
   up as a single 1rem -- matching the sides instead of either
   doubling them (the original bug) or, as a first attempt at this fix
   wrongly did by zeroing both sides, collapsing to 0.

   Specifically zeroing .accordion-content's padding-top rather than
   .accordion-title's padding-bottom (a second wrong attempt) --
   .accordion-title sits in a flex row with align-items:center
   (.accordion-navigation), so giving IT asymmetric padding (1rem top,
   0 bottom) shifted its own text off-center within that row, confirmed
   live via DevTools box model. .accordion-content isn't flex-centered
   (its items just stack top-down), so trimming its own padding-top
   has no such side effect.

   Not all the way to 0, though (a third attempt) -- that landed the
   heading-to-first-row gap at roughly the SAME size as the gap
   between two rows within the list (e.g. Necklaces to Bracelets), so
   "Category" no longer read as a distinct heading sitting above its
   own list, confirmed live and by explicit feedback ("sub item top
   space is gone"). 10px keeps it clearly smaller than the original
   doubled 2rem, while still reading as visibly more open than the
   tight row-to-row spacing below it. */
@media (max-width: 800px) {
    .page-sidebar .accordion-content {
        padding-top: 10px;
    }
}

/* Mobile filter drawer's own "Close to View Results / Filter" toggle
   (.facetedSearch-toggle.toggleSidebarBlock -- only relevant below
   801px; the theme itself hides it at desktop via
   .toggleSidebarBlock.button{display:none}, where the separate
   #filterToggleButton/.show-hide-filter handles the same job) ships
   from the base theme framework as position:absolute, sitting right
   on top of #facetedSearch-navList instead of pushing it down --
   nothing in this theme's own CSS reserves space for its height.
   Confirmed live at 425px: the toggle's own box (419-464px) and the
   "Category" heading right after it (421-473px) rendered at nearly
   the same vertical position, so the toggle's opaque background
   painted over the heading, leaving Necklaces/Bracelets/Rings/
   Earrings visible with no "Category" heading above them. Putting it
   back in normal flow (instead of guessing a magic top-offset to
   clear it, which would break again if its text ever wraps to a
   different height) lets it push the accordion content below it
   naturally, however tall it actually renders. !important because
   plain position:static here loses live -- confirmed the theme's own
   rule setting position:absolute outranks a same-order two-class
   selector on specificity alone. */
@media (max-width: 800px) {
    .facetedSearch-toggle.toggleSidebarBlock {
        position: static !important;
    }
}

/* Same "Filter" toggle, its width this time. By the base theme's own
   design (mods.scss: .sidebar-nav-mobile > a:first-child:last-child {
   flex-grow: 1; }), this toggle stretches to fill the ENTIRE row
   whenever it's the only toggle in .sidebar-nav-mobile -- which is
   every category here, since none of them render the Subcategories
   toggle (no category.subcategories) or the Price toggle
   (shop_by_price_visibility is off). Confirmed live: an edge-to-edge
   bordered box just for the word "Filter", nearly all of it empty
   space -- there's nothing else sharing the row to justify stretching
   it that wide. Sized to its own content instead, like a normal
   button. Scoped to :first-child:last-child so a category that DOES
   render a second toggle alongside it keeps the base theme's existing
   side-by-side ~50/50 layout untouched. */
@media (max-width: 800px) {
    .sidebar-nav-mobile > a.facetedSearch-toggle.toggleSidebarBlock:first-child:last-child {
        flex-grow: 0;
        flex-basis: auto;
        width: auto;
        padding: 12px 20px;
    }
    .sidebar-nav-mobile > a.facetedSearch-toggle.toggleSidebarBlock:first-child:last-child .facetedSearch-toggle-indicator,
    .sidebar-nav-mobile > a.facetedSearch-toggle.toggleSidebarBlock:first-child:last-child .toggleLink-text {
        width: auto;
    }
}