@charset "UTF-8";
@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");
body {
  font-family: "DM Sans", sans-serif;
  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: "Spectral", serif;
  font-weight: normal;
  letter-spacing: 0;
  color: #000; }

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

.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; }

.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 {
    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__arrow--left,
  #sd-product-set-container-892d37fe-6248-4162-ba51-003a47ffb635 .sd-product-set__arrow--right,
  #sd-product-set-container-892d37fe-6248-4162-ba51-003a47ffb635 [class*="bullet"],
  #sd-product-set-container-892d37fe-6248-4162-ba51-003a47ffb635 [class*="pagination"],
  #sd-product-set-container-80ba74be-ce54-4d7c-bf94-208c9db0bd74 .sd-product-set__arrow--left,
  #sd-product-set-container-80ba74be-ce54-4d7c-bf94-208c9db0bd74 .sd-product-set__arrow--right,
  #sd-product-set-container-80ba74be-ce54-4d7c-bf94-208c9db0bd74 [class*="bullet"],
  #sd-product-set-container-80ba74be-ce54-4d7c-bf94-208c9db0bd74 [class*="pagination"],
  #sd-product-set-container-562f9d35-3c7c-40a5-973c-fdb961ba9cde .sd-product-set__arrow--left,
  #sd-product-set-container-562f9d35-3c7c-40a5-973c-fdb961ba9cde .sd-product-set__arrow--right,
  #sd-product-set-container-562f9d35-3c7c-40a5-973c-fdb961ba9cde [class*="bullet"],
  #sd-product-set-container-562f9d35-3c7c-40a5-973c-fdb961ba9cde [class*="pagination"],
  #sd-product-set-container-f958fc9d-7782-4c86-95dc-e55e3a4bab63 .sd-product-set__arrow--left,
  #sd-product-set-container-f958fc9d-7782-4c86-95dc-e55e3a4bab63 .sd-product-set__arrow--right,
  #sd-product-set-container-f958fc9d-7782-4c86-95dc-e55e3a4bab63 [class*="bullet"],
  #sd-product-set-container-f958fc9d-7782-4c86-95dc-e55e3a4bab63 [class*="pagination"],
  #sd-product-set-container-3d17cd8f-b1d6-4cd6-b06f-4adccf70cbc5 .sd-product-set__arrow--left,
  #sd-product-set-container-3d17cd8f-b1d6-4cd6-b06f-4adccf70cbc5 .sd-product-set__arrow--right,
  #sd-product-set-container-3d17cd8f-b1d6-4cd6-b06f-4adccf70cbc5 [class*="bullet"],
  #sd-product-set-container-3d17cd8f-b1d6-4cd6-b06f-4adccf70cbc5 [class*="pagination"],
  #sd-product-set-container-0f9b07d8-10fc-41a0-a7d4-995347078dd5 .sd-product-set__arrow--left,
  #sd-product-set-container-0f9b07d8-10fc-41a0-a7d4-995347078dd5 .sd-product-set__arrow--right,
  #sd-product-set-container-0f9b07d8-10fc-41a0-a7d4-995347078dd5 [class*="bullet"],
  #sd-product-set-container-0f9b07d8-10fc-41a0-a7d4-995347078dd5 [class*="pagination"],
  #sd-product-set-container-69fc9ceb-ff33-49be-89c5-a49329e993d1 .sd-product-set__arrow--left,
  #sd-product-set-container-69fc9ceb-ff33-49be-89c5-a49329e993d1 .sd-product-set__arrow--right,
  #sd-product-set-container-69fc9ceb-ff33-49be-89c5-a49329e993d1 [class*="bullet"],
  #sd-product-set-container-69fc9ceb-ff33-49be-89c5-a49329e993d1 [class*="pagination"],
  #sd-product-set-container-2e8c30ab-36f0-4f37-8cb3-617314a0b9eb .sd-product-set__arrow--left,
  #sd-product-set-container-2e8c30ab-36f0-4f37-8cb3-617314a0b9eb .sd-product-set__arrow--right,
  #sd-product-set-container-2e8c30ab-36f0-4f37-8cb3-617314a0b9eb [class*="bullet"],
  #sd-product-set-container-2e8c30ab-36f0-4f37-8cb3-617314a0b9eb [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 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: "DM Sans", sans-serif;
  font-weight: normal;
  margin-top: 1.5rem; }

.button,
.button:focus,
.button:active,
.swal2-container .swal2-confirm.button,
.swal2-container .swal2-modal .swal2-cancel,
.main-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: "DM Sans", sans-serif;
  letter-spacing: 0;
  margin: 0;
  font-weight: 500;
  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; }
  .button:hover,
  .button:focus:hover,
  .button:active:hover,
  .swal2-container .swal2-confirm.button:hover,
  .swal2-container .swal2-modal .swal2-cancel:hover,
  .main-btn:hover {
    background-color: #000000;
    color: #ffffff; }

.button:hover, .swal2-container .swal2-confirm.button:hover, .swal2-container .swal2-modal .swal2-cancel:hover, .main-btn:hover {
  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; }

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; }

.navPages .navPages-mainNav .navPages-item > a {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: black;
  padding: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px; }
  .navPages .navPages-mainNav .navPages-item > a > .navPages-action-moreIcon {
    display: block;
    width: 16px;
    height: 15px;
    margin-left: 9px;
    margin-top: 3px; }
    .navPages .navPages-mainNav .navPages-item > a > .navPages-action-moreIcon svg {
      fill: none;
      stroke: none; }

.navPages .navPages-mainNav .navPages-item.hover .icon {
  transform: rotate(180deg); }

.navPages .navPages-mainNav .navPage-subMenu-item > a {
  padding-left: 16px;
  padding-right: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #000; }

.navPages .navPages-mainNav .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-video-container #hp-banner-video {
    width: 100%;
    height: auto; }
  .hp-video-container .sound-button {
    position: absolute;
    left: 30px;
    top: 20px;
    font-family: "DM Sans", sans-serif;
    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; }
  .hp-video-container .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; }
  .hp-video-container .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; }
  .featured_colections .page-heading {
    margin: 0 0 30px 0; }
  .featured_colections ul {
    list-style: none;
    margin: 0 -10px;
    padding: 0;
    color: black; }
    .featured_colections ul li {
      float: left;
      width: 25%;
      padding: 0 10px;
      position: relative; }
    .featured_colections ul .overlay_text {
      text-align: left;
      position: static;
      display: block;
      text-align: center; }
      .featured_colections ul .overlay_text .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; }
      .featured_colections ul .overlay_text 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; }
        .featured_colections ul .overlay_text a::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; }
  .fresh_arrival_section .img_content_section,
  .diamond_section .img_content_section {
    float: left;
    width: 47.858%; }
  .fresh_arrival_section .content_section,
  .diamond_section .content_section {
    float: right;
    width: 52.142%; }
  .fresh_arrival_section .content_section_text,
  .diamond_section .content_section_text {
    border: 1px solid gray;
    width: 100%;
    float: right;
    padding: 47px 0;
    max-width: 93.701%;
    background: gray; }
    .fresh_arrival_section .content_section_text h2,
    .diamond_section .content_section_text h2 {
      margin: 0;
      font-size: 48px;
      font-weight: 400;
      line-height: 49px;
      letter-spacing: -0.06em;
      max-width: 410px;
      margin: 0 auto;
      color: #ffffff; }
    .fresh_arrival_section .content_section_text p,
    .diamond_section .content_section_text p {
      font-size: 18px;
      font-weight: 400;
      line-height: 26px;
      max-width: 410px;
      margin: 23px auto 24px;
      color: #ffffff; }
    .fresh_arrival_section .content_section_text .button,
    .diamond_section .content_section_text .button {
      padding: 8px 24px 7px; }

.fresh_arrival_section .content_section_text {
  float: left;
  padding: 65px 0 69px 0; }
  .fresh_arrival_section .content_section_text p {
    margin: 13px auto 27px; }

.about_us_section {
  margin: 102px 0 55px 0;
  display: inline-block;
  width: 100%; }
  .about_us_section .page-heading {
    margin: 0 0 30px 0; }
  .about_us_section .content {
    background: #F8F8F8;
    float: left;
    width: 100%;
    padding: 28px 40px 28px 40px; }
    .about_us_section .content ul {
      list-style: none;
      margin: 0;
      padding: 0;
      text-align: left; }
    .about_us_section .content li {
      margin: 0 0 18px 0; }
    .about_us_section .content h2 {
      margin: 0;
      font-size: 16.25px;
      font-weight: 800;
      line-height: 26px;
      position: relative;
      font-family: "Inter", sans-serif;
      padding: 0 0 0 36px; }
      .about_us_section .content h2::before {
        content: '';
        background: #B78E64;
        width: 20px;
        height: 3px;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 12px; }
    .about_us_section .content p {
      max-width: 100%;
      font-family: "Inter", sans-serif;
      font-size: 15px;
      font-weight: 400;
      line-height: 22px;
      margin: 0px; }
    .about_us_section .content .read_more {
      margin: 0 0 0 0;
      display: inline-block;
      float: left; }
      .about_us_section .content .read_more a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 800;
        line-height: 22.76px;
        letter-spacing: -0.3250868618488312px;
        border-bottom: 1px #000 solid;
        width: auto;
        position: relative; }
        .about_us_section .content .read_more a::after {
          content: '';
          background: url(https://store-j1k3ana415.mybigcommerce.com/content/read_more_arrow_right.svg) no-repeat center;
          width: 16px;
          height: 16px; }
  .about_us_section .about_us_image {
    float: left;
    width: 100%; }

div[data-content-region="home_below_featured_products"] {
  margin: 0px; }
  div[data-content-region="home_below_featured_products"] div {
    padding: 0; }
  div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-title"] {
    max-width: 368px;
    text-align: right;
    padding-right: 90px; }
    div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-title"] p {
      color: #fff;
      font-family: "Spectral", serif;
      font-size: 39px;
      font-weight: 500;
      line-height: 40px;
      letter-spacing: -0.3250868618488312px;
      text-align: right; }
  div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-subtitle"] {
    padding-right: 90px; }
    div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-subtitle"] p {
      color: #fff;
      max-width: 360px;
      font-family: "Inter", sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 26px;
      text-align: right;
      margin: 10px 0 0 0; }
  div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-button"] {
    background: transparent;
    padding: 0 90px 0 0;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.3250868618488312px;
    text-align: left;
    color: #fff;
    margin: 20px 0 0 0; }
    div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-button"] p {
      font-family: "Inter", sans-serif;
      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; }
      div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-button"] p::after {
        content: '';
        background: url(https://store-j1k3ana415.mybigcommerce.com/content/f_collection_arrow.svg) no-repeat center;
        width: 14px;
        height: 14px;
        display: inline-block; }
      div[data-content-region="home_below_featured_products"] div[data-test-id="hero-image-button"] p: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; }

.last_section 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; }

.last_section h3 {
  margin: 5px 0 0 0;
  font-size: 22px;
  font-weight: 300;
  line-height: 48px; }

.last_section p {
  margin: 0;
  text-align: center;
  font-weight: 400;
  font-family: "Spectral", serif;
  letter-spacing: 0; }

.footer-newsletter .button {
  font-size: 14px;
  line-height: 14px; }

.footer-newsletter {
  padding: 25px 15px 25px; }
  .footer-newsletter .page-heading {
    margin: -2px 0 40px 0; }
  .footer-newsletter .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; }
  .footer .container {
    max-width: 1171px;
    padding: 0; }
  .footer .socialLinks-item {
    background: #ffffff00; }
  .footer .copyright_top {
    border: none;
    padding: 10px 0 0 0; }
    .footer .copyright_top .powered-by {
      color: #fff;
      font-family: "DM Sans", sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: 21px; }
  .footer .footer-logo-image-container {
    margin-left: 20px; }
    .footer .footer-logo-image-container img {
      width: 180px; }
  .footer .footer-copyright.copyright_bot {
    border: none;
    margin: 0;
    padding: 15px 0 0 0; }
  .footer .footer-info-col:nth-child(3) {
    flex: 0 1 108px;
    padding: 0; }
  .footer .footer-info-col:nth-child(2) {
    padding: 0 50px 0 0;
    flex: 0 1 205px; }
  .footer .footer-info-col:nth-child(1) {
    padding: 0 50px 0 0;
    flex: 0 1 205px; }
  .footer .footer-info-heading {
    margin: 0 0 14px 0; }
  .footer .footer-info-list a {
    padding: 0;
    margin-bottom: 6px; }
  .footer .socialLinks .socialLinks-item {
    margin: 0 15px 0 0; }

.productView-thumbnail {
  width: 14%; }

.productView-details .dropdown-menu-button .icon {
  margin-top: 2px;
  margin-left: 10px; }

.productView-details #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; }

.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 */ }

.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: "DM Sans", sans-serif; }

.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: "DM Sans", sans-serif; }

.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; }

.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; }

.au-video-container {
  position: relative; }
  .au-video-container #au-banner-video {
    width: 100%; }
  .au-video-container .sound-button {
    position: absolute;
    left: 30px;
    top: 20px;
    font-family: "DM Sans", sans-serif;
    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; }
  .au-video-container .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; }
  .au-video-container .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-wrapper .au-page-heading {
    font-family: "Spectral", serif;
    font-weight: 300;
    font-size: 50.95px;
    line-height: 77.54px;
    text-align: center;
    color: #000000;
    margin-bottom: 15px; }
  .au-wrapper .au-info p {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    color: #000000;
    padding: 0 53px 0 53px; }
  .au-wrapper .jewelry-section-one {
    margin-top: 60px;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    padding: 0 53px 0 53px; }
    .au-wrapper .jewelry-section-one .left-content {
      position: relative;
      max-width: 50%; }
    .au-wrapper .jewelry-section-one .right-content {
      padding: 28px 40px 28px 26px;
      max-width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .au-wrapper .jewelry-section-one .right-content .card h3 {
        margin: 0;
        font-size: 16.25px;
        font-weight: 600;
        line-height: 26px;
        position: relative;
        font-family: "Inter", sans-serif;
        padding: 0 0 0 36px; }
        .au-wrapper .jewelry-section-one .right-content .card h3::before {
          content: "";
          background: #b78e64;
          width: 20px;
          height: 3px;
          display: inline-block;
          position: absolute;
          left: 0;
          top: 12px; }
      .au-wrapper .jewelry-section-one .right-content .card p {
        max-width: 540px;
        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
        margin: 8px 0 0 -3px;
        color: #4b4b4b; }
  .au-wrapper .jewelry-section-two {
    margin-top: 60px;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    padding: 0 53px 0 53px; }
    .au-wrapper .jewelry-section-two .left-content {
      padding: 28px 40px 28px 26px;
      max-width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .au-wrapper .jewelry-section-two .left-content .card h3 {
        margin: 0;
        font-size: 16.25px;
        font-weight: 600;
        line-height: 26px;
        position: relative;
        font-family: "Inter", sans-serif;
        padding: 0 0 0 36px; }
        .au-wrapper .jewelry-section-two .left-content .card h3::before {
          content: "";
          background: #b78e64;
          width: 20px;
          height: 3px;
          display: inline-block;
          position: absolute;
          left: 0;
          top: 12px; }
      .au-wrapper .jewelry-section-two .left-content .card p {
        max-width: 540px;
        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
        margin: 8px 0 0 -3px;
        color: #4b4b4b; }
    .au-wrapper .jewelry-section-two .right-content {
      position: relative;
      max-width: 50%; }
  .au-wrapper .team-section {
    padding: 40px 53px 0 90px;
    background-color: white;
    overflow: hidden;
    display: flex; }
    .au-wrapper .team-section .left-content {
      max-width: 55%;
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .au-wrapper .team-section .left-content .au-team-heading h2 {
        font-family: "Spectral", serif;
        font-weight: 400;
        size: 32px;
        line-height: 41.71px; }
      .au-wrapper .team-section .left-content .au-team-details p {
        padding: 0px 0px 0 10px;
        font-family: "DM Sans", sans-serif;
        font-weight: 400;
        font-size: 15.02px;
        line-height: 23.36px; }
      .au-wrapper .team-section .left-content .au-team-details span.teammate_name {
        color: #B78E64;
        font-weight: 700; }
    .au-wrapper .team-section .right-content {
      position: relative;
      max-width: 40%;
      margin-left: 25px; }

.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; }

.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; }
  /* Per explicit instruction: the item count shouldn't sit glued
       right next to Filter -- it should read as its own, centered
       element in the row, independent of both Filter (left) and
       Sort By (right). .sort-and-pagination-filters only exists to
       group Filter + count in the markup (product-listing.html);
       display:contents removes its own box (same technique already
       used on .sort-and-pagination-sort below) so its two children --
       .show-hide-filter (the Filter button) and .category-product-
       count -- become direct flex items of .sort-and-pagination
       itself, sized and positioned independently instead of forced
       to sit together as one unit. */
  .sort-and-pagination-filters {
    display: contents; }
  /* With exactly 3 real items left on this line after the above
       (Filter, count, Sort By's fieldset -- the pager still wraps to
       its own line via flex-basis:100%, untouched), margin:auto on
       just the MIDDLE one is the standard flexbox trick for "outer
       two flush to the edges, middle one centered in whatever space
       is left between them": auto margins always split available
       free space evenly among themselves, so count's left and right
       auto margins end up equal -- which simultaneously pushes
       Filter flush left (nothing else is fighting for space before
       it) and Sort By flush right (nothing else fighting for space
       after it), while count itself lands exactly in the middle of
       the gap between them. Replaces the old margin-left:auto on
       the Sort By fieldset below, which is no longer needed once
       count's own auto margins already claim the right-hand space. */
  .category-product-count {
    margin: 0 auto; }
  .sort-and-pagination {
    /* Was flex-start (aligning Filter/count/Sort By to the same
           top edge), from back when .sort-and-pagination-filters was
           still a real flex-item box wrapping Filter + count as one
           unit -- flex-start kept that wrapper's top edge level with
           Sort By's box. Once display:contents was added to that
           wrapper (below) to let count center independently between
           Filter and Sort By, its own box stopped existing, so
           flex-start started applying directly to the count text
           itself -- pinning it to the TOP of the row instead of the
           vertical middle of the 36px-tall Filter/Sort By boxes on
           either side of it, confirmed live ("should not be top
           centered, should be centered centered"). Filter and Sort By
           are the same 36px height as each other, so centering them
           changes nothing about their own relative position -- only
           the shorter count text moves, now landing in the true
           vertical center of the row instead of flush against its
           top. */
    align-items: center; }
  /* Several rounds of trying to get Filter+count on the left and
       Sort By on the right via justify-content alone (space-between,
       then center, then space-between again at different width
       thresholds) never reliably stretched the row edge-to-edge on
       the real site, even though the exact same CSS looked correct
       in an isolated local test -- because .sort-and-pagination has
       3+ effective flex children here, not the clean 2-children case
       space-between needs to "spread across the row" predictably.
       No margin needed on the fieldset anymore -- .category-product-
       count's own auto margins (above) already claim all the space
       on both sides of it, which includes pushing this, the last
       item, flush against the right edge. .sort-and-pagination-
       sort's own class doesn't exist on this element after
       display:contents removes its wrapper box, so it's targeted by
       the fieldset's own classes instead (sort-box.html: <fieldset
       class="form-fieldset actionBar-section">). */
  .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". Previous approach (color:transparent + a fixed
       36px width) hid the text but left the box only clickable over
       that narrow 36px sliver -- confirmed live: tapping the "Sort
       By" label itself did nothing, only tapping right on the arrow
       opened it. Replaced with a different technique instead of
       tweaking widths again: the real <select> is stretched with
       position:absolute to cover this ENTIRE box (not just a corner
       of it) and made opacity:0, so it's fully invisible but every
       point in the box is a real, direct hit on the actual form
       control -- confirmed with an automated click-hit test (not
       eyeballed) before writing this, at both the label-text position
       and the arrow position, both resolve to the <select> itself.
       opacity does not inherit into a <select>'s own <option> the
       way color does (also confirmed via computed style before
       shipping this), so this doesn't reintroduce the invisible-
       dropdown-list bug from the color:transparent attempt. Since
       opacity:0 hides the select's own background-image arrow too
       (color:transparent didn't -- that's what let the old approach
       skip drawing a replacement), a small arrow is drawn separately
       below via ::after so there's still a visible affordance that
       this is a dropdown. */
  /* Root cause of "Sort By" text sitting near the TOP of its box
       instead of centered (confirmed live via screenshot, after the
       count above was already centering correctly): nothing in this
       theme's own SCSS source resets the raw <fieldset> element or
       the .form-fieldset class it carries (sort-box.html: <fieldset
       class="form-fieldset actionBar-section">) -- confirmed by
       searching every .scss file under assets/scss/components for
       "fieldset": there's a $fieldset-padding/$fieldset-margin
       Foundation SETTINGS variable defined, but nothing in the
       theme's actual component CSS ever consumes it. So the browser's
       own default fieldset styling was still active underneath: a
       border and, critically, ASYMMETRIC top/bottom padding (Chrome's
       UA default is roughly 0.35em top vs 0.625em bottom -- shorter
       on top than on bottom). .form-field below already centers
       inside its OWN 36px box, but that whole box sits inside this
       taller, top-light-bottom-heavy fieldset padding, which is what
       pushed it visually toward the top instead of true center.
       Reset directly rather than guessing at a compensating offset,
       and made a centered flex container itself so this holds
       regardless of exactly how much default padding a given browser
       applies. */
  .sort-and-pagination-sort fieldset.form-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center; }
  .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 28px 0 12px;
    position: relative; }
  .sort-and-pagination-sort .form-field::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #000;
    border-bottom: 1.5px solid #000;
    transform: translateY(-65%) rotate(45deg);
    /* Purely decorative -- without this, the arrow itself would
           intercept clicks meant for the select beneath it. */
    pointer-events: none; }
  .sort-and-pagination-sort .form-label {
    font-size: 13px;
    padding-left: 0;
    /* Clicks on the label text already open the select natively
           via its for="sort" association, but letting them fall
           through to the select underneath instead keeps every point
           in this box behaving identically rather than depending on
           two different native behaviors lining up. */
    pointer-events: none; }
  .sort-and-pagination-sort #sort {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    /* Above the label and the drawn arrow so it's always what
           actually receives the click, not just visually on top. */
    z-index: 2; }
  /* 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; } }

.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:not(.productView--quickView) .productView-thumbnails .productView-thumbnail {
    width: 50%;
    padding: 0 1px; }
    .productView:not(.productView--quickView) .productView-thumbnails .productView-thumbnail .productView-thumbnail-link {
      width: 100%;
      height: 540px;
      max-width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0; }
      .productView:not(.productView--quickView) .productView-thumbnails .productView-thumbnail .productView-thumbnail-link 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; }

.productView 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[data-layout-name="Hero Section Cat Cards"] > div {
      width: 50%;
      flex-basis: 50%;
      max-width: 50%; }
      div[data-layout-name="Hero Section Cat Cards"] > div div a img {
        height: 300px !important;
        object-fit: cover; }
      div[data-layout-name="Hero Section Cat Cards"] > div div 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; } }

/* Cart flyout redone as a full-height slide-in drawer (Tiffany & Co.-style
   "shopping bag" panel) instead of the base theme's small 320px dropdown
   card -- wider, full viewport height, bigger product imagery, a dimmed
   page behind it, and a sticky action row instead of everything scrolling
   together. Scoped to #cart-preview-dropdown only so none of this touches
   the separate "added to cart" popup (.fastCart, templates/components/
   cart/preview.html), which reuses several of the same class names
   (.previewCart, .previewCartCheckout) but is a different element entirely.

   Desktop/tablet only (min-width: 801px, this theme's usual breakpoint) --
   cart-preview.js already skips opening this dropdown at all on mobile (a
   /Mobi/ user-agent check sends shoppers straight to the full cart page
   instead), so a mobile version of this drawer would never actually
   render. */
@media screen and (min-width: 801px) {
  /* mods.scss sets width:320px !important + a small margin-top on this
       same id -- !important can only be beaten by another !important, so
       every property it marks !important has to be matched here even
       though this file loads after it and would otherwise win on source
       order alone. */
  #cart-preview-dropdown {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    margin: 0 !important;
    width: 460px !important;
    max-width: 92vw;
    height: 100vh;
    max-height: 100vh;
    background: #fff;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    border-radius: 0;
    z-index: 9001;
    transform: translateX(100%);
    transition: transform 0.35s ease; }
  #cart-preview-dropdown.is-open {
    transform: translateX(0); }
  /* Dim + block interaction with the rest of the page while the drawer
       is open. Pure CSS via :has() -- on the rare older browser without
       :has() support, the drawer still opens and works fine, it just
       won't dim the page behind it. */
  body:has(#cart-preview-dropdown.is-open) {
    overflow: hidden; }
  body:has(#cart-preview-dropdown.is-open)::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9000; }
  #cart-preview-dropdown .previewCart {
    display: flex;
    flex-direction: column;
    height: 100%; }
  /* Header: "Shopping Bag" title + close, with Checkout/View Cart
       underneath -- the theme only ever renders these three as one flat
       row (previewCartAction > checkout, viewCart, close, in that DOM
       order), so a 2-row grid re-lays them out without a template change.
       "Shopping Bag" itself doesn't exist in the markup; it's injected via
       ::before since there's no dynamic value it needs to carry. */
  #cart-preview-dropdown .previewCartAction {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title    close"
 "checkout viewcart";
    align-items: center;
    column-gap: 12px;
    row-gap: 18px;
    border: 0;
    border-bottom: 1px solid #e8e8e8;
    padding: 26px 26px 22px;
    margin: 0;
    flex: 0 0 auto; }
  #cart-preview-dropdown .previewCartAction::before {
    grid-area: title;
    content: "Shopping Bag";
    font-family: "Spectral", serif;
    font-size: 22px;
    letter-spacing: 0.01em;
    color: #000;
    justify-self: start; }
  #cart-preview-dropdown .previewCartAction--close {
    grid-area: close;
    justify-self: end;
    width: auto; }
  #cart-preview-dropdown .cart-preview-close {
    width: 34px;
    height: 34px;
    justify-content: center;
    border-radius: 50%; }
  #cart-preview-dropdown .previewCartAction-checkout {
    grid-area: checkout;
    width: auto;
    padding: 0; }
  #cart-preview-dropdown .previewCartAction-viewCart {
    grid-area: viewcart;
    width: auto;
    padding: 0; }
  #cart-preview-dropdown .previewCartAction-viewCart--sole {
    grid-column: 1 / -1; }
  #cart-preview-dropdown .previewCartAction .button {
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 13px;
    letter-spacing: 0.04em; }
  /* Scrollable item list, bigger product imagery */
  #cart-preview-dropdown .previewCartList {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 26px;
    margin: 0; }
  #cart-preview-dropdown .previewCartList .previewCartItem {
    padding: 22px 0;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start; }
  #cart-preview-dropdown .previewCartItem-image {
    flex: 0 0 120px;
    padding-right: 18px;
    align-self: flex-start; }
  #cart-preview-dropdown .previewCartItem-image img {
    width: 100%;
    height: auto; }
  #cart-preview-dropdown .previewCartItem-content {
    align-items: flex-start; }
  #cart-preview-dropdown .previewCartItem-name {
    font-size: 15px;
    font-family: "Spectral", serif;
    line-height: 1.4;
    margin-bottom: 6px; }
  #cart-preview-dropdown .previewCartItem-name a {
    color: #000; }
  #cart-preview-dropdown .previewCartItem-price {
    font-size: 14px;
    color: #000; }
  #cart-preview-dropdown .cart-preview-list-item-remove a {
    font-size: 12px;
    color: #767676;
    text-decoration: underline; }
  #cart-preview-dropdown .cart-preview-list-item-remove a:hover {
    color: #000; }
  #cart-preview-dropdown .previewCart-emptyBody {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Spectral", serif;
    font-size: 17px;
    color: #555;
    padding: 40px;
    text-align: center; }
  /* Sticky subtotal footer */
  #cart-preview-dropdown .cart-preview-footer {
    flex: 0 0 auto;
    margin: 0;
    border-top: 1px solid #e8e8e8;
    padding: 20px 26px 26px;
    background: #fff; }
  #cart-preview-dropdown .cart-preview-pricing {
    padding: 0 0 4px; }
  #cart-preview-dropdown .cart-preview-total-price-label {
    font-size: 13px;
    letter-spacing: 0.04em; }
  #cart-preview-dropdown .cart-preview-total-price {
    font-size: 17px;
    font-weight: 600; } }