.bon-hero{ position:relative; overflow:hidden; width:100%; height:21.3vw; min-height:240px; max-height:324px; display:flex; align-items:center;
  font-family: var(--font-body, "Gantari", system-ui, sans-serif);
  background:url("/editorial/hero-diamond-listing.png") center / cover no-repeat; background-color:#0a1b2a; }
.bon-hero-inner{ position:relative; z-index:2; max-width:1680px; margin:0 auto; padding:0 56px; width:100%; }
.bon-hero-title{ color:#fff; font-size:clamp(22px,1.9vw,32px); font-weight:600; line-height:1.2; letter-spacing:.01em; max-width:560px; margin:0 0 12px; }
.bon-hero-sub{ color:#d3dce6; font-size:clamp(13px,.95vw,15px); line-height:1.55; max-width:500px; margin:0; }
@media(max-width:760px){ .bon-hero{ display:none; } }

@media(min-width:761px){ .bon-mlist-h1, .bon-mlist-lead{ display:none; } }

.dp-scope .dp-byor-strip-container .step-icon-img svg{ color:#5e5e5e; }
.dp-scope .dp-byor-strip-container .steps.active .step-icon-img svg{ color:#fff; }

.dp-scope .site-wapper{ padding-left:0px !important; padding-right:0px !important; max-width:100% !important; }

.bon-mlist{ max-width:1680px; margin:0 auto; padding:18px 24px 80px; color:#1f1b16;
  font-family: var(--font-body, "Gantari", system-ui, sans-serif); }

.dp-scope .bon-mlist, .dp-scope .bon-mlist *,
.dp-scope .bon-breadcrumb, .dp-scope .bon-mobile-bar, .dp-scope .bon-drawer, .dp-scope .bon-dropdown{
  font-family: var(--font-body, "Gantari", system-ui, sans-serif) !important;
}

.dp-scope .bon-breadcrumb{ max-width:1680px; margin:0 auto; padding:20px 24px 20px; display:flex; align-items:center; gap:8px; font-size:14px; color:#8a8a8a; }
.dp-scope .bon-breadcrumb a{ color:#8a8a8a; text-decoration:none; }
.dp-scope .bon-breadcrumb a:hover{ color:#1a1a1a; }
.dp-scope .bon-breadcrumb .sep{ color:#c8c8c8; }
.dp-scope .bon-breadcrumb .cur{ color:#1a1a1a; }

.bon-mlist-h1{ font-size:clamp(24px,2.2vw,34px); font-weight:600; color:#141414; letter-spacing:.01em; margin:6px 0 14px; }
.bon-mlist-lead{ font-size:clamp(15px,1vw,17px); line-height:1.6; color:#4a463f; max-width:760px; margin:0 0 30px; }

.bon-mlist-title{ text-align:center; font-size:28px; font-weight:600; letter-spacing:.2px; margin:8px 0 36px; }

.bon-style-row{ display:flex; justify-content:center; gap:28px; flex-wrap:nowrap; margin-bottom:40px; }
.bon-style-item{ display:flex; flex-direction:column; align-items:center; gap:12px; cursor:pointer; background:none; border:0; }
.bon-style-icon{ width:100px; height:100px; border-radius:50%; background:#f9f9f9; border:1px solid #ececec; display:flex; align-items:center; justify-content:center; overflow:hidden; transition:box-shadow .2s,outline .15s; outline:2px solid transparent; }
.bon-style-item:hover .bon-style-icon{ box-shadow:0 6px 20px rgba(0,0,0,.08); }
.bon-style-item.active .bon-style-icon{ outline-color:#0a1b2a; }

.bon-style-icon img{ width:100%; height:100%; object-fit:contain; object-position:center; }
.bon-style-label{ font-size:14px; font-weight:600; color:#1f1b16; }
.bon-style-item.active .bon-style-label{ color:#0a1b2a; }

.bon-tabs{ display:flex; gap:30px; border-bottom:1px solid #e7e4df; }
.bon-tab{ display:flex; align-items:center; gap:8px; padding:14px 2px; background:none; border:0; cursor:pointer; font-size:17px; color:#6f685f; border-bottom:2px solid transparent; margin-bottom:-1px; }
.bon-tab.active{ color:#0a1b2a; font-weight:600; border-bottom-color:#0a1b2a; }
.bon-tab svg{ width:22px; height:22px; }
.bon-tab img{ width:22px; height:22px; }

.bon-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:22px 0 26px; flex-wrap:wrap; }
.bon-tools{ display:flex; gap:14px; flex-wrap:wrap; }

.bon-tool-btn{ display:flex; align-items:center; gap:8px; height:43px; padding:11px 16px; border:1px solid #c6c6c6; border-radius:8px; background:#fff; cursor:pointer; font-size:16px; font-weight:600; color:#000; line-height:1; }
.bon-tool-btn.ghost{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #c6c6c6; padding:11px 16px !important; border-radius:8px; color:#000; font-weight:600 !important; width:auto !important; }
.bon-tool-btn:hover{ border-color:#919191; }
.bon-tool-btn.act{ border-color:#081B33; color:#081B33; }
.bon-tool-btn svg{ width:17px; height:17px; }
.bon-badge{ background:#0a1b2a; color:#fff; border-radius:999px; padding:0 7px; font-size:12px; margin-left:2px; }
.bon-results{ font-size:15px; font-weight:600; color:#2a261f; }

@media(max-width:760px){
  .bon-toolbar{ flex-direction:column; align-items:stretch; gap:12px; width:100%; min-width:0; max-width:100%; }

  .bon-tools{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; min-width:0; max-width:100%; width:100%; }
  .bon-tools::-webkit-scrollbar{ display:none; }

  .bon-tools > *{ flex:0 0 auto; white-space:nowrap; }
  .bon-tools .bon-tool-btn{ white-space:nowrap; }
}
.bon-tool-wrap{ position:relative; }

.bon-dropdown{ position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:240px; background:#fff; border:1px solid #DEDEDE; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:8px 0; }
.bon-dropdown button{ display:block; width:100%; text-align:left; padding:7px 16px; border:0; background:none; cursor:pointer; font-size:14px; color:#000; border-radius:0; }
.bon-dropdown button:hover{ background:#f6f6f6; }
.bon-dropdown button.active{ background:#081b33; color:#fff; font-weight:600; border-radius:8px; margin:0 8px; width:calc(100% - 16px); padding-left:8px; padding-right:8px; }
.bon-dropdown-head{ display:none; }

.bon-no-anim .bon-drawer, .bon-no-anim .bon-drawer-back, .bon-no-anim .bon-mobile-bar,
.bon-no-anim .bon-dropdown, .bon-no-anim .bon-editorial, .bon-no-anim .bon-card,
.bon-no-anim .bon-card *, .bon-no-anim .bon-acc-body{ transition:none !important; animation:none !important; }

.bon-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; align-items:start; grid-auto-flow:dense; grid-auto-columns:minmax(0,1fr); }

@media(max-width:1100px){
  .bon-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }

  .bon-editorial{ grid-column:1 / -1 !important; grid-row:auto !important; align-self:auto !important;
    aspect-ratio:auto; height:500px; width:auto; margin-left:-24px !important; margin-right:-24px !important; border-radius:0 !important; }
  .bon-editorial img{ width:100% !important; border-radius:0 !important; object-position:10% 73%; }
}

@media(max-width:991px){ .bon-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }

@media(max-width:320px){ .dp-scope .bon-grid{ grid-template-columns:1fr !important; } .dp-scope .bon-view-toggle{ display:none !important; } }

@media(max-width:760px){ .bon-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:28px 16px; grid-auto-rows:auto !important; } .bon-card-imgbox{ height:auto !important; min-height:auto !important; aspect-ratio:auto !important; } .bon-card-imgbox img.bon-ring{ height:auto !important; aspect-ratio:1/1 !important; } .bon-card-imgbox.skel{ aspect-ratio:1/1 !important; } }

.bon-cell{ position:relative; min-width:0; }

.bon-card{ cursor:pointer; min-width:0; position:relative; isolation:isolate; }

.bon-card-inner{ background:#fff; border-radius:18px; transition:box-shadow .2s ease, border-radius .2s ease; }
.bon-card:hover{ z-index:5; }
@media(min-width:761px){
  .bon-card{ height:487px; }
  .bon-card-inner{ position:absolute; top:0; left:0; right:0; }

  .bon-card:hover .bon-card-inner{ top:-10px; left:-10px; right:-10px; padding:10px;
    border-radius:10px; box-shadow:0 2px 4px 0 #0000004d; overflow:visible; }
}

.bon-card-imgbox{ position:relative; background:#fff; border:1px solid #ececec; border-radius:8px; padding:0; height:340px; min-height:215px; display:flex; align-items:center; justify-content:center; overflow:hidden; }

.bon-card-imgbox img.bon-ring{ width:100%; height:340px; max-width:100%; object-fit:cover !important; border-radius:8px; transition:transform .5s ease; }
.bon-card:hover .bon-card-imgbox img.bon-ring{ transform:scale(1.05); }
.bon-card-imgbox img.bon-ring.bon-fade{ animation:bonfadein .28s ease; }

.bon-card-imgbox img.bon-ring.fill{ object-fit:cover; }

.bon-card-imgbox img.bon-ring.life{ mix-blend-mode:normal; object-fit:cover; }
@keyframes bonfadein{ from{ opacity:0; } to{ opacity:1; } }
.bon-swatch{ cursor:pointer; }
.bon-heart{ position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid #e6e6e6; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.06); z-index:4; }
.bon-heart svg{ width:19px; height:19px; }
.bon-card-name{ margin-top:16px; font-size:18px; font-weight:500; color:#1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bon-card-metal{ font-size:15px; color:#8a8a8a; margin-top:6px; }
.bon-swatches{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.bon-swatch{ width:26px; height:26px; border-radius:50%; flex:0 0 auto; }
.bon-swatch.sel{ outline:2px solid #0a1b2a; outline-offset:0; }
.bon-swatch.white{ background:radial-gradient(circle at 38% 32%, #ffffff, #d9d9d9); }
.bon-swatch.rose{ background:radial-gradient(circle at 38% 32%, #f6dccf, #e0a899); }
.bon-swatch.yellow{ background:radial-gradient(circle at 38% 32%, #f7e7ad, #e3bf3f); }
.bon-swatch.pt{ display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#5b5b5b; background:radial-gradient(circle at 38% 32%, #f0f0f0, #cfcfcf); border-color:#cfcfcf; }
.bon-card-price{ margin-top:14px; font-size:18px; }
.bon-card-price b{ font-weight:700; color:#1a1a1a; }
.bon-card-price span{ color:#8a8a8a; font-size:15px; font-weight:400; }

.bon-nav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; background:#fff; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.14); opacity:0; transition:opacity .18s; z-index:4; color:#1a1a1a; }
.bon-nav.prev{ left:14px; } .bon-nav.next{ right:14px; }
.bon-nav svg{ width:20px; height:20px; }
.bon-card:hover .bon-nav{ opacity:1; }

.bon-scroll{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(20,20,30,.10); overflow:hidden; opacity:0; transition:opacity .18s; z-index:4; }
.bon-card:hover .bon-scroll{ opacity:1; }
.bon-scroll-thumb{ position:absolute; left:0; top:0; bottom:0; background:#141414; transition:width .35s ease; }

.bon-card-extra{ display:none; margin-top:14px; }
.bon-card:hover .bon-card-extra{ display:block; }
.bon-choose{ width:100%; padding:16px; border:0; border-radius:6px; background:#0a1b2a; color:#fff; font-size:16px; font-weight:600; cursor:pointer; transition:opacity .2s; }
.bon-choose:hover{ opacity:.9; }
.bon-klarna{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; font-size:14px; color:#5b5b5b; }
.bon-klarna img{ height:18px; width:auto; display:inline-block; vertical-align:middle; }

.bon-card.bon-skel{ background:#fff; }
.bon-card.bon-skel::after{ display:none; }

.bon-card-imgbox.skel, .skel-line, .skel-dot{ background:#f1f1f1; position:relative; overflow:hidden; }
.bon-card-imgbox.skel::after, .skel-line::after, .skel-dot::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(0,0,0,.045),transparent); transform:translateX(-100%); animation:bonshimmer 1.3s infinite; }
@keyframes bonshimmer{ 100%{ transform:translateX(100%);} }

.skel-line{ height:14px; border-radius:7px; margin-top:14px; }
.skel-name{ width:72%; }
.skel-metal{ width:42%; height:11px; margin-top:10px; }
.skel-price{ width:34%; height:16px; margin-top:14px; }
.skel-swatches{ display:flex; gap:10px; margin-top:14px; }
.skel-dot{ width:26px; height:26px; border-radius:50%; }

.bon-editorial{ position:relative; grid-column:var(--ed-col); grid-row:var(--ed-row); align-self:stretch; border-radius:18px; overflow:hidden; min-width:0; min-height:0; }
.bon-editorial img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.bon-editorial-cap{ position:absolute; left:0; right:0; bottom:0; padding:34px 28px; text-align:center; background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)); pointer-events:none; }
.bon-editorial-title{ display:block; color:#fff; font-weight:600; font-size:clamp(22px,2vw,32px); line-height:1.15; }
.bon-editorial-sub{ display:block; margin-top:8px; color:#fff; font-size:clamp(14px,1vw,17px); text-decoration:underline; text-underline-offset:3px; }

@media(max-width:760px){
  .bon-editorial{ grid-column:1 / -1; grid-row:auto; align-self:start; height:430px; aspect-ratio:auto; margin:22px -14px !important; border-radius:0 !important; }
  .bon-editorial img{ object-position:10% 90%; }
  .bon-mlist-title{ text-align:left !important; }
}

.bon-view-toggle{ display:none !important; }
@media(max-width:760px){ .bon-view-toggle{ display:inline-flex !important; } }

@media(max-width:760px){
  .bon-grid.bon-list{ grid-template-columns:1fr !important; grid-auto-rows:auto !important; gap:24px; }
  .bon-list .bon-card{ max-width:none; width:100%; margin:0 auto; }
  .bon-list .bon-card:hover{ box-shadow:none; }
  .bon-list .bon-card-imgbox{ height:auto !important; aspect-ratio:1/1 !important; }
  .bon-list .bon-card-extra{ display:none !important; }

  .bon-list .bon-editorial{ grid-column:1 / -1 !important; grid-row:auto !important; aspect-ratio:auto !important; height:430px !important; }
}

.bon-mobile-bar{ display:none; }
@media(max-width:760px){

  .bon-mobile-bar{ display:flex; align-items:stretch; position:fixed; bottom:18px; left:50%; z-index:60;
    background:#fff; border:1px solid #e8e8e8; border-radius:6px; box-shadow:0 8px 26px rgba(0,0,0,.20); overflow:hidden;
    transform:translate(-50%, 26px); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
  .bon-mobile-bar.show{ transform:translate(-50%, 0); opacity:1; pointer-events:auto; }
  .bon-mobile-bar button{ display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; background:none; border:0; font-size:15px; font-weight:500; color:#141414; cursor:pointer; white-space:nowrap; line-height:1; }
  .bon-mobile-bar button svg{ width:18px; height:18px; }
  .bon-mobile-bar-sep{ width:1px; background:#e8e8e8; }

  .bon-drawer{ top:auto !important; bottom:0 !important; left:0 !important; right:0 !important; width:100% !important; max-width:none !important; height:82vh !important; transform:translateY(100%) !important; border-radius:20px 20px 0 0 !important; box-shadow:0 -10px 30px rgba(0,0,0,.18); }
  .bon-drawer.open{ transform:translateY(0) !important; }

  .bon-dropdown{ position:fixed; left:0; right:0; bottom:0; top:auto; width:100%; min-width:0; border-radius:20px 20px 0 0; z-index:1060; padding:0 12px 26px; box-shadow:0 -10px 30px rgba(0,0,0,.18); }
  .bon-dropdown-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 8px 12px; margin-bottom:6px; border-bottom:1px solid #efece7; }
  .bon-dropdown-head span{ font-size:17px; font-weight:600; color:#1f1b16; }

  .bon-dropdown-head .bon-dropdown-x{ flex:0 0 auto; width:36px !important; height:36px; display:inline-flex; align-items:center; justify-content:center; border:0; background:#f4f2ef; border-radius:50%; color:#5a544c; cursor:pointer; padding:0; }
  .bon-dropdown-head .bon-dropdown-x:active{ background:#e8e5e0; }
  .bon-dropdown button{ padding:16px 4px; font-size:16px; }
  .bon-sort-back{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1059; }
}
.bon-sort-back{ display:none; }

.bon-loadmore-wrap{ display:flex; justify-content:center; padding:44px 0 8px; }
.bon-loadmore{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:210px; padding:13px 40px; border:1px solid #0a1b2a; border-radius:10px; background:#fff; cursor:pointer; font-size:15px; font-weight:600; color:#0a1b2a; transition:background .2s,color .2s; }
.bon-loadmore:hover{ background:#0a1b2a; color:#fff; }
.bon-loadmore.loading{ background:#0a1b2a; color:#fff; cursor:default; }

.bon-spinner{ width:17px; height:17px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:bonspin .7s linear infinite; flex:0 0 auto; }
@keyframes bonspin{ to{ transform:rotate(360deg); } }

.bon-skel-card{ animation:bonfadein .3s ease both; }

.bon-drawer-back{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1040; opacity:0; pointer-events:none; transition:opacity .25s; }
.bon-drawer-back.open{ opacity:1; pointer-events:auto; }
.bon-drawer{ position:fixed; top:0; right:0; height:100%; width:100%; max-width:520px; background:#fff; z-index:1050; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column; box-shadow:-8px 0 30px rgba(0,0,0,.12); }
.bon-drawer.open{ transform:translateX(0); }
.bon-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #eceae5; }
.bon-drawer-head h3{ margin:0; font-size:20px; font-weight:600; }
.bon-drawer-x{ background:none; border:0; font-size:26px; line-height:1; cursor:pointer; color:#2a261f; }
.bon-drawer-body{ flex:1; overflow:auto; padding:8px 24px; }
.bon-acc{ border-bottom:1px solid #eceae5; }
.bon-acc-head{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:18px 0; background:none; border:0; cursor:pointer; font-size:16px; font-weight:600; color:#1f1b16; }
.bon-acc-head .chev{ display:inline-flex; align-items:center; color:#8b8479; transition:transform .25s ease; }
.bon-acc.open .chev{ transform:rotate(180deg); }

.bon-acc-body{ max-height:0; overflow:hidden; padding:0; transition:max-height .3s ease, padding .3s ease; }
.bon-acc.open .bon-acc-body{ max-height:760px; padding:4px 0 24px; }

.bon-fstyle{ display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; }
.bon-fstyle button{ display:flex; flex-direction:column; align-items:center; gap:9px; background:none; border:0; cursor:pointer; width:72px; }
.bon-fstyle .ic{ width:72px; height:72px; border-radius:50%; background:#f2f1ef; display:flex; align-items:center; justify-content:center; overflow:hidden; outline:2px solid transparent; }
.bon-fstyle button.on .ic{ outline-color:#0a1b2a; }
.bon-fstyle .ic img{ width:100%; height:100%; object-fit:contain; object-position:center; }
.bon-fstyle span{ font-size:14px; line-height:1.25; color:#1f1b16; text-align:center; }
.bon-fmetal{ display:flex; flex-wrap:wrap; gap:16px; }
.bon-fmetal button{ display:flex; flex-direction:column; align-items:center; gap:9px; background:none; border:0; cursor:pointer; width:auto; }
.bon-fmetal .dot{ width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:#2a2a2a; }
.bon-fmetal button.on .dot{ box-shadow:0 0 0 2px #0a1b2a; }
.bon-fmetal .dot.white{ background:linear-gradient(135deg,#fafafa,#d9d9d9); }
.bon-fmetal .dot.yellow{ background:linear-gradient(135deg,#f5e3a3,#e6c200); color:#5a4a00; }
.bon-fmetal .dot.rose{ background:linear-gradient(135deg,#f3d3c8,#e0a899); color:#6a3b30; }
.bon-fmetal .dot.platinum{ background:linear-gradient(135deg,#eaeaea,#c9cdd1); }
.bon-fmetal span{ font-size:14px; color:#1f1b16; white-space:nowrap; }

.bon-fshape{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px 6px; justify-items:center; }
.bon-fshape button{ display:flex; flex-direction:column; align-items:center; gap:9px; background:none; border:0; cursor:pointer; padding:0; width:auto; }
.bon-fshape .sh-ic{ width:64px; height:64px; border-radius:50%; background:#f2f1ef; display:flex; align-items:center; justify-content:center; overflow:hidden; outline:2px solid transparent; }
.bon-fshape .sh-ic img{ width:78%; height:78%; object-fit:contain; object-position:center; }
.bon-fshape button.on .sh-ic{ outline-color:#0a1b2a; }
.bon-fshape span{ font-size:14px; color:#1f1b16; text-align:center; }

.bon-prange{ padding:14px 8px 6px; }
.bon-prange-boxes{ display:flex; justify-content:space-between; gap:16px; margin-top:24px; }

.bon-prange-box{ flex:1; display:flex; align-items:center; gap:3px; padding:11px 12px; border:1px solid #ddd9d2; border-radius:8px; font-size:16px; font-weight:600; color:#1f1b16; cursor:text; }
.bon-prange-box:focus-within{ border-color:#0a1b2a; }
.bon-prange-box .cur{ color:#8a8479; flex:0 0 auto; }
.bon-prange-box input{ width:100%; min-width:0; border:0; outline:0; background:none; font:inherit; color:inherit; padding:0; }
.bon-prange-track{ position:relative; height:4px; background:#e6e2db; border-radius:4px; margin:0 10px; }
.bon-prange-fill{ position:absolute; top:0; bottom:0; background:#0a1b2a; border-radius:4px; }
.bon-prange-track input[type=range]{ position:absolute; top:50%; left:0; width:100%; margin:0; transform:translateY(-50%); -webkit-appearance:none; appearance:none; background:none; pointer-events:none; height:0; }
.bon-prange-track input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid #0a1b2a; box-shadow:0 1px 4px rgba(0,0,0,.22); cursor:pointer; }
.bon-prange-track input[type=range]::-moz-range-thumb{ pointer-events:auto; width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid #0a1b2a; box-shadow:0 1px 4px rgba(0,0,0,.22); cursor:pointer; }
.bon-drawer-foot{ display:flex; gap:12px; padding:18px 24px; border-top:1px solid #eceae5; }
.bon-drawer-foot button{ flex:1; padding:13px; border-radius:10px; cursor:pointer; font-size:15px; }
.bon-drawer-foot .reset{ background:#fff; border:1px solid #0a1b2a; color:#0a1b2a; }
.bon-drawer-foot .apply{ background:#0a1b2a; border:1px solid #0a1b2a; color:#fff; }

@media(max-width:760px){
  .bon-mlist{ padding:20px 14px 60px; }
  .bon-mlist-title{ font-size:20px; margin:4px 0 22px; }
  .bon-style-row{ gap:18px; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding:0 2px 6px; }
  .bon-style-item{ flex:0 0 auto; gap:8px; }
  .bon-style-icon{ width:76px; height:76px; }
  .bon-style-label{ font-size:13px; white-space:nowrap; }
  .bon-tab{ font-size:15px; }
  .bon-tool-btn{ padding:9px 12px; font-size:13px; }

  .bon-card-name{ font-size:14px; margin-top:10px; }
  .bon-card-metal{ font-size:12px; margin-top:3px; }
  .bon-swatches{ gap:8px; margin-top:8px; }
  .bon-swatch{ width:20px; height:20px; }
  .bon-card-price{ font-size:15px; margin-top:8px; }
  .bon-card-price span{ font-size:12px; }
  .bon-heart{ width:34px; height:34px; top:10px; right:10px; }
  .bon-heart svg{ width:16px; height:16px; }
  .bon-editorial-cap{ padding:22px 18px; }
  .bon-editorial-title{ font-size:26px; }
  .bon-editorial-sub{ font-size:16px; margin-top:6px; }
  .bon-mlist-h1{ font-size:22px; }
  .bon-mlist-lead{ font-size:15px; }
  .dp-scope .bon-breadcrumb{ padding:14px 14px 0; font-size:13px; }

  .bon-card:hover{ padding:0; margin:0; box-shadow:none; border-radius:18px; z-index:auto; }
  .bon-card-extra{ display:none !important; }
  .bon-nav{ display:none !important; }
  .bon-scroll{ opacity:1 !important; }
}
.dp-scope .bon-swatches{ margin:8px 0; }

.bottom-banner{ width:100%; height:416px; position:relative; background-color:#081b33; margin-top:92px; overflow:hidden; }
.bottom-img{ position:absolute; top:0; right:2px; height:100%; min-width:620px; }
#ba-container{ position:relative; display:flex; height:416px; }
.img-wrapper-ba{ position:absolute; width:100%; height:100%; overflow:hidden; inset:0; }
.img-wrapper-ba:nth-child(2){ background:#081b33; }

.bottom-img img{ height:600px; aspect-ratio:20/12; width:auto; max-width:none; position:absolute; top:4px; object-fit:contain; left:-229px; transition:transform .6s ease; }
#line-ba{ position:absolute; transform:translateX(-50%); width:.2rem; height:100%; background-color:#fafafa; }
#slider-ba{ appearance:none; -webkit-appearance:none; background-color:transparent; position:absolute; width:calc(100% + 60px); height:100%; left:-3.125rem; padding:0 !important; }
#slider-ba::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; height:60px; width:60px; border:.25rem solid #fff; border-radius:50%; box-shadow:0 0 8px 2px rgba(0,0,0,.1); background-color:#fff; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 18'><path d='M0.0649843 2.22481L1.39123 0.899807L8.61498 8.12106C8.73143 8.23677 8.82384 8.37436 8.8869 8.52592C8.94996 8.67749 8.98242 8.84002 8.98242 9.00418C8.98242 9.16834 8.94996 9.33087 8.8869 9.48244C8.82384 9.634 8.73143 9.7716 8.61498 9.88731L1.39123 17.1123L0.0662336 15.7873L6.84623 9.00605L0.0649843 2.22481Z' fill='%23071B33'/></svg>"); background-repeat:no-repeat; background-position:center; background-size:10px 18px; cursor:grab; }
#slider-ba::-moz-range-thumb{ height:60px; width:60px; border:.25rem solid #fff; border-radius:50%; box-shadow:0 0 8px 2px rgba(0,0,0,.1); background-color:#fff; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 18'><path d='M0.0649843 2.22481L1.39123 0.899807L8.61498 8.12106C8.73143 8.23677 8.82384 8.37436 8.8869 8.52592C8.94996 8.67749 8.98242 8.84002 8.98242 9.00418C8.98242 9.16834 8.94996 9.33087 8.8869 9.48244C8.82384 9.634 8.73143 9.7716 8.61498 9.88731L1.39123 17.1123L0.0662336 15.7873L6.84623 9.00605L0.0649843 2.22481Z' fill='%23071B33'/></svg>"); background-repeat:no-repeat; background-position:center; background-size:10px 18px; }
#slider-ba:active::-webkit-slider-thumb{ cursor:grabbing; }
.bottom-banner .item-text{ position:absolute; top:50%; margin-left:92px; transform:translateY(-50%); width:50%; text-align:left; }
.bottom-banner .item-text h3{ font-size:30px; font-weight:500; margin-bottom:2%; color:#fff; }
.bottom-banner .item-text p{ font-size:16px; font-weight:500; color:#fff; max-width:600px; }
.bottom-banner button{ border-radius:8px; border:1px solid #fff; background-color:#fff; padding:12px 36px; margin-top:4%; font-size:16px; font-weight:500; color:#000; cursor:pointer; }

@media(min-width:992px) and (max-width:1024px){
  .bottom-banner{ height:370px; }
  .bottom-img{ right:5%; }
  .bottom-img > img{ object-position:50px 0; }
  .bottom-banner .item-text{ width:50% !important; }
}

.tailor-bottom{ display:none; padding:0 14px; margin-bottom:40px; font-size:16px; font-weight:500; }
.tailor-bottom h3{ font-size:26px; font-weight:500; margin-bottom:15px; color:#000; }
.tailor-bottom p{ font-size:16px; font-weight:500; color:#000; }
.tailor-bottom button{ border-radius:8px; border:1px solid #081b33; background-color:#fff; padding:12px 16px; margin-top:20px; font-size:16px; font-weight:500; color:#000; cursor:pointer; }
@media(max-width:991px){
  .bottom-banner{ height:357px; }
  .bottom-img{ position:static; height:110%; width:100%; right:0; min-width:100%; }
  .bottom-img img{ height:520px; aspect-ratio:20/12; width:auto; max-width:none; position:absolute; top:4px; object-fit:contain; left:-216px; }
  #slider-ba{ top:-30px; }
  .bottom-banner .item-text{ display:none; }
  .tailor-bottom{ display:block; }
}

.bottom-seo-text{ padding:48px 76px; }
.bottom-seo-text h2{ font-size:30px; font-weight:500; color:#000; margin-bottom:24px; text-align:center; }
.bottom-seo-text p{ font-size:16px; font-weight:500; }
.bottom-seo-text p a{ text-decoration:underline; color:#000; }
@media(max-width:991px){
  .bottom-seo-text{ padding:30px 15px; }
  .bottom-seo-text h2{ font-size:26px; text-align:left; margin-bottom:18px; }
}

.dp-scope .bon-card.bon-skel span.skel-line{ display:inline-block; vertical-align:middle; margin:0; height:.8em; border-radius:6px; }
.dp-scope .bon-skel .bon-card-name .skel-line{ width:78%; }
.dp-scope .bon-skel .bon-card-price .skel-line{ width:42%; }
.dp-scope .bon-skel .bon-card-metal .skel-line{ width:30%; }
.dp-scope .bon-skel .bon-swatch.skel-dot{ outline:0; cursor:default; }
.dp-scope .bon-skel .bon-card-imgbox.skel{ background:#f1f1f1 !important; }
.dp-scope.bon-new-cards .bon-skel .bon-card-imgbox.skel{
  background:transparent !important; aspect-ratio:auto !important; flex:1 1 0 !important; min-height:0 !important;
}
.dp-scope.bon-new-cards .bon-skel .bon-card-metal,
.dp-scope.bon-new-cards .bon-skel .bon-card-name,
.dp-scope.bon-new-cards .bon-skel .bon-card-price{ flex-shrink:0; }
.dp-scope.bon-new-cards .bon-skel .skel-line,
.dp-scope.bon-new-cards .bon-skel .skel-dot{ background:rgba(8,27,51,.08) !important; }
.dp-scope .bon-skel{ pointer-events:none; }
.dp-scope.bon-new-cards .bon-card.bon-skel{ background:transparent !important; border-radius:0 !important; box-shadow:none !important; }