{"id":1084080,"date":"2023-01-18T10:31:25","date_gmt":"2023-01-18T09:31:25","guid":{"rendered":"https:\/\/www.bongioielli.com\/home-page\/"},"modified":"2026-02-25T11:42:12","modified_gmt":"2026-02-25T10:42:12","slug":"home-page","status":"publish","type":"page","link":"https:\/\/www.bongioielli.com\/en\/","title":{"rendered":"Home Page"},"content":{"rendered":"<style>.aspect__one{aspect-ratio: 1\/1;object-fit: cover;} .item__box .jewellery__box a:hover{box-shadow:none;} \n    .natural__diamonds>p, .fine__jewellery .heading--2, .shop__diamonds .heading--2 {\n        margin-bottom: 25px;\n    }<\/p>\n<p>    .natural__diamonds .position-relative{\n    width:100%;\n    }<\/p>\n<p>    .slider-wrap{\npadding:60px 0;\n}\n.collection-slider{\nmargin:0;\nbackground:#f3f2f3;\n}\n    @media screen and (max-width: 767px) {\n        .heading--1, .heading--2 {\n            font-size: 24px !important;\n            font-weight:500;\n            line-height: 33px;\n        }\n    }\n.animated.is-in{\nmargin-bottom:0;\n}\n    .glass-icon-prefooter{\n        width: 100px;\n          height: 100px;\n    margin-bottom:15px;\n          background: radial-gradient(circle at top left, rgba(255,255,255,0.2), rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.4));\n          backdrop-filter: blur(20px);\n          -webkit-backdrop-filter: blur(20px);\n          border-radius: 50%;\n          box-shadow:\n            inset 0 5px 15px rgba(255, 255, 255, 0.4), inset 0 5px 20px rgba(0, 0, 0, 0.3), 0 25px 40px rgba(0, 0, 0, 0.1);\n          border: 1px solid rgba(255, 255, 255, 0.15);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          cursor: pointer;\n    }<\/p>\n<p>    @media screen and (min-width: 768px) {\n        .w-image.details__section .row__box img {\n            height: 50px;\n        }\n    }\n    @media screen and (max-width: 767px) {\n        .details__section .row__box {\n            width: 100%;\n            margin-bottom: 24px !important;\n        }\n    }\n    .details__section .row__box img {\n        width: 50px;\n        margin-bottom: 0 !important;\n    }\n    .img-fluid {\n        max-width: 100%;\n        height: auto;\n    }\n    img {\n        vertical-align: middle;\n        border-style: none;\n    }\n    *, ::after, ::before {\n        box-sizing: inherit;\n    }\n    * {\n        margin: 0;\n        padding: 0;\n    }\n    *, ::after, ::before {\n        box-sizing: border-box;\n    }\n    img[Attributes Style] {\n        width: 116px;\n        aspect-ratio: auto 116 \/ 78;\n        height: 78px;\n        aspect-ratio: auto 116 \/ 78;\n    }\n    user agent stylesheet\n    img {\n        overflow-clip-margin: content-box;\n        overflow: clip;\n    }<\/p>\n<p>    .top__jeweler{\n    gap:0 !important;\n    }<\/p>\n<p>    @media only screen and (min-width: 750px) and (max-width: 1281px) {\n        .heading--2 {\n            font-size: 25px;\n            margin-bottom: 10px;\n        }\n    }<\/p>\n<p>    @media only screen and (min-width: 750px) and (max-width: 1001px) {\n        .natural__diamonds div.position-absolute {\n            width: 80% !important;\n        }\n    }<\/p>\n<p>    .sliderView .heading--2, .sliderView div.align-items-center {\n        margin-bottom: 30px;\n    }<\/p>\n<p>    @media (max-width: 767px){\n    .dropdown-menu {\n      position: static !important;\n    }\n    .btn__hover {\n        padding: 0 12px !important;\n      }\n    div.since--text .position-absolute {\n        z-index: 1;\n        color: var(--bg-text);\n        left: 40% !important;\n        top: 47% !important;\n        transform: translate(-50%, -50%);\n        text-align: center;\n    }\n    }<\/p>\n<p>    .mt-10{\n    float:left !important;\n    margin-top:0 !important;\n    }<\/p>\n<p>        .zoomView {\n            margin: 0 !important;\n        }<\/p>\n<p>    .top__jeweler>div{\n    background:#fff;\n    }\n    @media (max-width: 1800px) and (min-width: 1200px) {\n        .top__jeweler>div {\n            padding: 0 25px 0 25px !important;\n        }\n    }\n    .bg__light{\n    background-color:#fff !important;\n    }<\/p>\n<p>    .diamond-jewellery-section .box{\n      background-size: cover;\n      background-position: center center;\n      background-repeat: no-repeat;\n      width: 500px;\n      height:400px;\n      border-radius:0;\n      position: relative;\n      overflow: hidden;\n      display: flex;\n      align-items: flex-end;\n    }<\/p>\n<p>    @media (max-width: 768px) {\n      .diamond-jewellery-section .box {\n        width: 100%;\n        height: 250px;\n      }\n    }<\/p>\n<p>    @media screen and (max-width: 767px) {\n        .first-slide .mobSlider__img {\n            height: 400px;\n            object-fit: cover;\n        }\n    }<\/p>\n<p>    .box-content {\n      display: block;\n      width: 100%;\n      text-decoration: none;\n      color: black;\n    }<\/p>\n<p>    .jewellery__box p, .mt-10{\n        padding: 10px 0 0 0;\n        font-size: 18px;\n        font-weight: 500;\n        text-align: left;\n    }<\/p>\n<p>    .box-text {\n      background-color: rgba(255, 255, 255, 0.7);\n      padding: 20px;\n      text-align: left;\n    }<\/p>\n<p>    .box-text h3 {\n      margin: 0;\n      font-size: 20px;\n    }<\/p>\n<p>    .box-text p {\n      font-size: 14px;\n    }<\/p>\n<p>    .btn-sl{\n        background-color:#fff !important;\n        color:#000 !important; \n        float:left;\n        } \n    .btn-sl:hover{\n        background-color:#071b33!important;\n        color:#fff !important; \n        float:left;\n        } <\/p>\n<p>    @media screen and (min-width: 767px) {\n        .banner__content {\n            position: absolute;\n            bottom: 25.84%;\n            left: 3%;\n            right: 0;\n        }\n    }\n    @media (max-width: 1550px) and (min-width: 1200px) {\n        .home-page-banner .banner__content {\n            bottom: 37% !important;\n            left: 7.5% !important;\n        }\n    }<\/p>\n<p>    .banner__content .btn {\n        margin: 0 auto;\n        border: 0 !important;\n    }<\/p>\n<p>    .heading--2{\n    font-size:30px;\n    margin-bottom:10px;\n    }<\/p>\n<p>    @media screen and (min-width: 767px) {\n        .item__box .row__box {\n            margin-top: 25px;\n        }\n    }<\/p>\n<p>    @media only screen and (min-width: 750px) and (max-width: 1281px) {\n        .home-page-banner .banner__content {\n            position: absolute;\n            bottom: 31%;\n            left: 8.88%;\n        }\n       .heading--2{\n            font-size:30px;\n    margin-bottom:10px;\n    }\n    }<\/p>\n<p>    @media (max-width: 1800px) and (min-width: 1200px) {\n        .home-page-banner .banner__content {\n            left: 7.88% !important;\n        }\n    }<\/p>\n<p>    .home-page-banner .banner__content .btn:hover{color: #fff !important;border:0 !important;background:#071B33;}<\/p>\n<p>    .diamond-choice-video {\n      height: 750px;\n      object-fit: cover;\n      object-position: center;\n    }<\/p>\n<p>    .color__blue{\n       color:#071B33 !important;\n    }<\/p>\n<p>    @media only screen and (max-width: 767px) {\n        .home-page-banner .banner__content {\n            position: absolute;\n            bottom: 10%;\n            left: 0;\n    color:#fff !important;\n        }<\/p>\n<p>    .title-mob,.text-mob{\n    text-align:center !important;\n    color:#fff !important;\n    }<\/p>\n<p>    .title-mob{\n    font-size:25px;\n    }<\/p>\n<p>    .text-mob{\n      font-size:14px;\n    }<\/p>\n<p>    .home-page-banner .banner__content .btn{\n    background-color: transparent; \n    border: 0 !important;\n    float:none !important;\n        margin: 0 auto !important;\n    color:#000 !important;\n    }\n      .ds-mobile-home-video-banner{\n      height: 550px;\n      object-fit: cover;\n      object-position: center;\n    }\n    }<\/p>\n<p>    .section-ring-builder {\n      padding: 50px 20px;\n      background: #f9f9f9;\n      overflow-x: hidden;\n    overflow-y: hidden;\n    }<\/p>\n<p>    .ring-builder-inner {\n      max-width: 1300px;\n      margin: 0 auto;\n      display: grid;\n      grid-template-columns: 1fr 1fr 1fr;\n      align-items: center;\n      text-align: center;\n      gap: 30px;\n    }\n    .ring-center {\n    grid-column: 2 \/ 3;\n    }<\/p>\n<p>    .ring-side {\n      padding: 20px;\n    }<\/p>\n<p>    .ring-side .ring-icon {\n      width: 60px;\n      margin-bottom: 20px;\n    }<\/p>\n<p>    div.since--text .position-absolute span:last-child{\n    font-size:18px;\n    }<\/p>\n<p>    .ring-side h3 {\n      font-size: 40px;\n      text-transform:uppercase;\n      font-weight: 500;\n      margin-bottom: 25px;\n      color: var(--site-bg) !important;\n    }<\/p>\n<p>    .ring-side p {\n      font-size: 20px;\n      margin-bottom: 10px;\n    }\n    .ring-side__material{\n       font-size:16px !important;\n}<\/p>\n<p>    .ring-button {\n      background: #000;\n      color: #fff;\n      font-size: 16px;\n      padding: 14px 24px;\n      border: none;\n      border-radius: 999px;\n      cursor: pointer;\n      width: 250px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      line-height: 1;\n      text-decoration: none;\n    }<\/p>\n<p>    .ring-button:hover {\n      background: #000;\n      color: #fff;\n    }<\/p>\n<p>    .ring-center {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }<\/p>\n<p>    .ring-animated-wrapper {\n      position: relative;\n      width: 420px;\n      height: 420px;\n    }<\/p>\n<p>    .ring-animated-wrapper .setting {\n        position: absolute;\n        bottom: -60px;\n        left: 20px;\n        width: 100%;\n        z-index: 1;\n        display: block;<\/p>\n<p>    }<\/p>\n<p>    .ring-animated-wrapper .diamond {\n      position: absolute;\n      bottom: 315px;\n      left: 54%;\n      width: 380px;\n      transform: translateX(-50%);\n      z-index: 2;\n    }<\/p>\n<p>    @keyframes floatDiamond {\n      0%   { transform: translate(-50%, 0); }\n      50%  { transform: translate(-50%, -30px); }\n      100% { transform: translate(-50%, 0); }\n    }<\/p>\n<p>    .animate-diamond {\n      animation: floatDiamond 3s ease-in-out infinite;\n    }<\/p>\n<p>    .ring-builder-mobile {\n      display: none;\n      text-align: center;\n      padding: 0;\n      background: #fafafa;\n    }<\/p>\n<p>    .ring-mobile-icons {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      margin-bottom: 15px;\n    }<\/p>\n<p>    .ring-mobile-icons span {\n      font-size: 36px;\n      display: inline-block;\n      line-height: 1;\n    }<\/p>\n<p>    .ring-mobile-title {\n      font-size: 25px;\n      font-weight: 600;\n      margin-bottom: 30px;\n    }<\/p>\n<p>    .ring-animated-wrapper-mobile {\n      position: relative;\n      width: 500px;\n      height: 520px;\n      margin: 0 auto 20px auto;\n    }<\/p>\n<p>    .ring-animated-wrapper-mobile .setting {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      z-index: 1;\n      display: block;\n    }<\/p>\n<p>    .ring-animated-wrapper-mobile {\n      position: relative;\n      width: 100%;\n      max-width: 420px;\n      height: auto;\n      aspect-ratio: 5 \/ 6;\n      margin: 0 auto 20px auto;\n    }\n    .ring-animated-wrapper-mobile .setting,\n    .ring-animated-wrapper-mobile .diamond {\n      width: 100%;\n      max-width: 100%;\n    }\n    .ring-animated-wrapper-mobile .diamond {\n      position: absolute;\n      bottom: 75%;\n      left: 50%;\n      width: 100%;\n      transform: translateX(-50%);\n      z-index: 2;\n    }\n    .img-svg{\n    margin-bottom:0px;\n    }<\/p>\n<p>    .ring-mobile-text {\n      font-size: 16px;\n      margin-bottom: 20px;\n    }<\/p>\n<p>    .ring-mobile-buttons .ring-button {\n      margin: 10px auto;\n      display: block;\n      width: 80%;\n    }<\/p>\n<p>    @media (max-width: 767px) {\n      .ring-builder-inner {\n        display: none;\n      }<\/p>\n<p>      .ring-builder-mobile {\n        display: block;\n      }\n    }<\/p>\n<p>    @media (max-width: 1279px) and (min-width: 768px) {\n      .ring-builder-inner {\n        grid-template-columns: 1fr 1fr;\n        grid-template-areas:\n          \"left right\"\n          \"center center\";\n        gap: 40px;\n        text-align: center;\n      }<\/p>\n<p>      .ring-side:first-child {\n        grid-area: left;\n      }<\/p>\n<p>      .ring-side:last-child {\n        grid-area: right;\n      }<\/p>\n<p>      .ring-center {\n        grid-area: center;\n      }\n    }<\/p>\n<p>    .dropdown-wrapper {\n      text-align: center;\n      position: relative;\n      margin: 15px 0;\n    }<\/p>\n<p>    .dropdown-toggle {\n      background: transparent !important;\n      border:1px solid var(--site-bg) !important;\n      color: #fff;\n      font-size: 18px;\n      padding: 14px 24px;\n      border-radius: 30px;\n      cursor: pointer;\n      width: 250px;\n      text-decoration: none;\n    }<\/p>\n<p>    .dropdown-toggle:hover {\n      background: var(--site-bg)!important;\n      color:#fff !important;\n    }<\/p>\n<p>    .ring-mobile-icons span{\n    color:var(--site-bg)!important;\n    }<\/p>\n<p>    .dropdown-menu {\n      display: none;\n      position: absolute;\n      top: 55px;\n      left: 0;\n      text-align:center;\n      padding:0;\n      transform: none;\n      width: 100%;\n      box-sizing: border-box;\n      border-radius: 15px;\n      box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n      background: #fff;\n      z-index: 10;\n    }<\/p>\n<p>    .dropdown-item-1, .dropdown-item-2 {\n      display: block;\n      padding: 10px;\n      color: #000;\n      text-decoration: none;\n      border-bottom: 1px solid #eee;\n      font-size: 16px;\n    }<\/p>\n<p>    .dropdown-item-1 {\n      border-bottom: 1px solid #eee;\n    }<\/p>\n<p>    .dropdown-item-2:last-child {\n      border:none;\n    }<\/p>\n<p>    .dropdown-item-1:hover {\n      border-radius:15px 15px 0 0;\n      background: #f1f1f1;\n    }<\/p>\n<p>    .dropdown-item-2:hover {\n      border-radius: 0 0 15px 15px;\n      background: #f1f1f1;\n    }<\/p>\n<p>    .dropdown-toggle {\n      background: transparent;\n      color: var(--site-bg)!important;\n      font-size: 16px;\n      padding: 14px 24px;\n      border: none;\n      border-radius: 999px;\n      cursor: pointer;\n      width: 250px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      line-height: 1;\n    }<\/p>\n<p>    .dropdown-label {\n      display: inline-block;\n    }<\/p>\n<p>    .dropdown-toggle a:hover {\n      color:#fff;\n    }<\/p>\n<p>    .chevron-icon {\n      transition: transform 0.3s ease;\n      position: relative;\n      top: 1px;\n    }<\/p>\n<p>    .dropdown-wrapper.open .chevron-icon {\n      transform: rotate(180deg);\n    }<\/p>\n<p>    .ring-side {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }<\/p>\n<p>    .ring-mobile-buttons .ring-button,\n    .ring-mobile-buttons .dropdown-toggle {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 80%;\n      margin: 10px auto;\n      gap: 10px;\n    }<\/p>\n<p>    .ring-side .dropdown-wrapper {\n      width: 250px;\n    }<\/p>\n<p>    .ring-side .dropdown-toggle,\n    .ring-side .ring-button {\n      width: 100%;\n      max-width: 100%;\n      box-sizing: border-box;\n    }<\/p>\n<p>    .ring-mobile-buttons .ring-button,\n    .ring-mobile-buttons .dropdown-toggle {\n      width: 100%;\n      max-width: 100%;\n      margin: 10px auto;\n      box-sizing: border-box;\n    }<\/p>\n<p>    .dropdown-toggle::after {\n      display:none;\n    }<\/p>\n<p>    .ring-button,\n    .dropdown-toggle {\n      background: transparent;\n      color: #071B33;\n      border: 1px solid #071B33;\n      transition: all 0.3s ease;\n    }<\/p>\n<p>    .ring-button:hover,\n    .dropdown-toggle:hover {\n      background: #071B33;\n      color: #fff;\n    }<\/p>\n<p>    .ring-button svg,\n    .dropdown-toggle svg {\n      stroke: #071B33;\n      transition: stroke 0.3s ease;\n    }<\/p>\n<p>    .ring-button:hover svg,\n    .dropdown-toggle:hover svg {\n      stroke: #fff;\n    }\n    .site-wapper-sect{\n    max-width:100%;\n    }<\/p>\n<p>    .site-wapper-sect-diamonds{\n    max-width:100%;\n    padding:80px 0 !important;\n    background:#f9f9f9;\n    margin-bottom:60px;\n    }\n    .section-title-ring {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      margin-bottom: 2rem;\n    }<\/p>\n<p>    .ring-preview {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }<\/p>\n<p>      .ring-preview img {\n          width: 300px;\n          height: auto;\n        }<\/p>\n<p>        .shape {\n          cursor: pointer;\n          border-bottom: 3px solid transparent;\n          padding-bottom: 0.5rem;\n          transition: border-color 0.3s ease;\n          width: 70px;\n          flex-shrink: 0;\n          text-align:center;\n        }<\/p>\n<p>        .shape.selected {\n          border-color: #071B33;\n        }<\/p>\n<p>        .shape img {\n          width: 80%;\n          height: auto;\n          display: block;\n          margin: 0 auto 1rem;\n        }<\/p>\n<p>        .shape p {\n          margin: 0;\n          font-size: 1.5rem;\n    text-align: center;\n        }\n    .ring-side {\n    max-width:100%;\n    margin: 0 auto;\n}\n        .mobile-layout {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 5rem;\n        }<\/p>\n<p>        .diamond-slider {\n          display: flex;\n          overflow-x: auto;\n          gap: 5rem;\n          padding: 1rem;\n          scroll-snap-type: x mandatory;\n          -webkit-overflow-scrolling: touch;\n          touch-action: pan-x;\n          width: 100%;\n        }<\/p>\n<p>        .diamond-slider::-webkit-scrollbar {\n          display: none;\n        }<\/p>\n<p>        .diamond-slider .shape {\n          scroll-snap-align: center;\n        }<\/p>\n<p>        .main-layout {\n          display: none;\n        }<\/p>\n<p>        @media (min-width: 1250px) {\n          .main-layout {\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            gap: 15rem;\n          }<\/p>\n<p>          .diamond-rows {\n            display: flex;\n            flex-direction: column;\n            gap: 3rem;\n          }<\/p>\n<p>          .diamond-row {\n            display: flex;\n            justify-content: space-between;\n            width: 750px;\n            max-width: 90vw;\n            margin: 0 auto;\n          }<\/p>\n<p>          .mobile-layout {\n            display: none !important;\n          }\n        }\n    .arrow-btn {\n          background: none;\n          border: none;\n          font-size: 2rem;\n          cursor: pointer;\n          padding: 0 1rem;\n          color: #333;\n        }\n    .diamond-slider-wrapper {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 100%;\n        }<\/p>\n<p>        .diamond-slider {\n          display: flex;\n          overflow-x: auto;\n          padding: 1rem;\n          scroll-snap-type: x mandatory;\n          -webkit-overflow-scrolling: touch;\n          touch-action: pan-x;\n          width: 100%;\n        }<\/p>\n<p>        .diamond-slider::-webkit-scrollbar {\n          display: none;\n        }<\/p>\n<p>        .diamond-slider .shape {\n          scroll-snap-align: center;\n        }\n    .diamond-slider .shape {\n        scroll-snap-align: center;\n    }\n    .shape.selected {\n        border-color: #071B33;\n        transform: scale(1.2);\n        opacity: 1;\n    }\n    .arrow-btn-custom {\n      border-radius: 50%;\n      border: none;\n      background: rgba(255, 255, 255, 0.7);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n      transition: transform 0.2s ease, box-shadow 0.3s ease;\n      padding: 10px;\n    }<\/p>\n<p>    .arrow-btn-custom:hover {\n      transform: scale(1.08);\n      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n    }<\/p>\n<p>    .arrow-btn-custom .chevron-icon {\n      stroke: #000;\n      width: 24px;\n      height: 24px;\n    }<\/p>\n<\/style>\n<p>    <script>\n    document.addEventListener('DOMContentLoaded', function () {\n      document.querySelectorAll('.dropdown-wrapper').forEach(wrapper => {\n        const toggle = wrapper.querySelector('.dropdown-toggle');\n        const menu = wrapper.querySelector('.dropdown-menu');<\/p>\n<p>        toggle.addEventListener('click', function (e) {\n          e.stopPropagation();\n          const isOpen = wrapper.classList.toggle('open');\n          menu.style.display = isOpen ? 'block' : 'none';\n        });\n      });<\/p>\n<p>      document.addEventListener('click', function () {\n        document.querySelectorAll('.dropdown-wrapper').forEach(wrapper => {\n          wrapper.classList.remove('open');\n          const menu = wrapper.querySelector('.dropdown-menu');\n          if (menu) menu.style.display = 'none';\n        });\n      });\n    });<\/p>\n<p>      const ringImages = document.querySelectorAll(\"#main-ring, #main-ring-mobile\");\n        const allShapes = document.querySelectorAll(\".shape\");<\/p>\n<p>        allShapes.forEach(shape => {\n          shape.addEventListener(\"click\", () => {\n            const newImg = shape.getAttribute(\"data-img\");\n            ringImages.forEach(img => img.src = newImg);\n            allShapes.forEach(s => s.classList.remove(\"selected\"));\n            shape.classList.add(\"selected\");\n          });<\/p>\n<p>          shape.addEventListener(\"mouseenter\", () => {\n            const newImg = shape.getAttribute(\"data-img\");\n            ringImages.forEach(img => img.src = newImg);\n            allShapes.forEach(s => s.classList.remove(\"selected\"));\n            shape.classList.add(\"selected\");\n          });\n        });<\/p>\n<p>    const ringImage = document.getElementById(\"main-ring-mobile\");\n        const shapes = Array.from(document.querySelectorAll(\".diamond-slider .shape\"));\n        const slider = document.getElementById(\"diamond-slider\");\n        const arrowLeft = document.getElementById(\"scroll-left\");\n        const arrowRight = document.getElementById(\"scroll-right\");<\/p>\n<p>        let currentIndex = 0;\n        let scrollTimeout;<\/p>\n<p>        function selectShape(index) {\n          if (index < 0 || index >= shapes.length) return;\n          shapes.forEach(s => s.classList.remove(\"selected\"));\n          const selected = shapes[index];\n          selected.classList.add(\"selected\");\n          ringImage.src = selected.getAttribute(\"data-img\");\n          currentIndex = index;\n        }<\/p>\n<p>        shapes.forEach((shape, index) => {\n          shape.addEventListener(\"click\", () => selectShape(index));\n        });<\/p>\n<p>        arrowLeft.addEventListener(\"click\", () => {\n      const newIndex = currentIndex - 1;\n      if (newIndex >= 0) {\n        shapes[newIndex].scrollIntoView({ behavior: \"smooth\", inline: \"center\", block: \"nearest\" });\n        selectShape(newIndex);\n      }\n    });<\/p>\n<p>    arrowRight.addEventListener(\"click\", () => {\n      const newIndex = currentIndex + 1;\n      if (newIndex < shapes.length) {\n        shapes[newIndex].scrollIntoView({ behavior: \"smooth\", inline: \"center\", block: \"nearest\" });\n        selectShape(newIndex);\n      }\n    });\n    \n    \n        slider.addEventListener(\"scroll\", () => {\n          clearTimeout(scrollTimeout);\n          scrollTimeout = setTimeout(() => {\n            const sliderRect = slider.getBoundingClientRect();\n            let closestIndex = 0;\n            let closestDistance = Infinity;<\/p>\n<p>            shapes.forEach((shape, index) => {\n              const rect = shape.getBoundingClientRect();\n              const center = rect.left + rect.width \/ 2;\n              const distance = Math.abs(center - (sliderRect.left + sliderRect.width \/ 2));\n              if (distance < closestDistance) {\n                closestDistance = distance;\n                closestIndex = index;\n              }\n            });\n    \n            selectShape(closestIndex);\n          }, 100);\n        });\n    <\/script><\/p>\n<p>    <main class=\"main__space\"><\/p>\n<div class=\"site-wapper-sect main__space\">\n<style>\n    :root{\n      --100vh: 100vh;\n      --header-h-phone: 100px;\n      --header-h-tablet: 160px;\n      --header-h-desktop: 160px;\n      --safeX: max(32px, calc(20px + env(safe-area-inset-left)));\n      --safeR: max(16px, calc(16px + env(safe-area-inset-right)));\n      --safeY: max(40px, calc(20px + env(safe-area-inset-bottom)));\n      --textW: 700px;\n      --btn-bg: rgba(255,255,255,.92);\n      --btn-fg: #111;\n      --easing: cubic-bezier(0,0,.35,1);\n    }<\/p>\n<p>    .site-wapper-sect.main__space{\n      margin-top:0;\n      padding-top:0;\n    }<\/p>\n<p>    .hero{\n      position:relative;\n      isolation:isolate;\n      background:#000;\n      color:#fff;\n      height:calc(var(--100vh) - var(--header-h-phone));\n    }\n    .media{\n      position:relative;\n      height:100%;\n    }\n@media (max-width:767px){\n  .hero{\n    height: min(600px, calc(var(--100vh) - var(--header-h-phone))) !important;\n    min-height: 600px !important;\n  }\n}<\/p>\n<p>    .media::before{content:none}<\/p>\n<p>    .video{\n      position:absolute;\n      inset:0;\n      width:100%;\n      height:100%;\n      object-fit:cover;\n      display:block;\n      background:#000;\n    }\n    .video--desktop{display:none}\n    .video--mobile{display:block}<\/p>\n<p>    .linkbox{position:absolute;inset:0;z-index:1}<\/p>\n<p>    .hero .overlay{\n      position:absolute;\n      left:0;\n      right:0;\n      bottom:0;\n      pointer-events:none;\n      display:block;\n      z-index:2;\n    }\n    .hero .overlay::before{\n      content:\"\";\n      position:absolute;\n      left:0;\n      right:0;\n      bottom:0;\n      height:40%;\n      background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));\n      z-index:0;\n    }\n    .hero .content{\n      position:relative;\n      z-index:2;\n      pointer-events:auto;\n      max-width:var(--textW);\n      margin-left:16px;\n      margin-right:16px;\n      margin-bottom:28px;\n      display:grid;\n      gap:10px;\n      align-items:start;\n      justify-items:start;\n      transition: transform 0.1s linear;\n      will-change: transform;\n      transform: translateY(-13.275px) translateZ(0px);\n    }\n    .hero .content h2{\n      font-weight:500;\n      margin:0;\n      letter-spacing:-.01em;\n      font-size:clamp(22px, 5.6vw, 28px);\n      line-height:1.12;\n      color:#fff;\n    }\n    .hero .content p{\n      margin:0;\n      color:#fff;\n      opacity:.95;\n      font-size:clamp(14px, 4vw, 16px);\n      line-height:1.4;\n      max-width:56ch;\n    }<\/p>\n<p>    .cta{\n      display:inline-block;\n      margin-top:6px;\n      color:#fff;\n      text-decoration:none;\n      position:relative;\n      font-weight:500;\n      letter-spacing:.08em;\n      text-transform:uppercase;\n      font-size:16px;\n    }<\/p>\n<p>    .cta-anim{\n      padding-bottom:6px;\n      overflow:hidden;\n    }<\/p>\n<p>    .cta-anim::after{\n      content:\"\";\n      position:absolute;\n      left:0;\n      bottom:0;\n      width:100%;\n      height:2px;\n      background:currentColor;\n      -webkit-transform: translateX(-100%);\n      -moz-transform: translateX(-100%);\n      -ms-transform: translateX(-100%);\n      transform: translateX(-100%);\n      -webkit-transition: transform 0.4s var(--easing);\n      transition: transform 0.4s var(--easing);\n    }<\/p>\n<p>    .cta-anim:hover::after{\n      -webkit-transform: translateX(0);\n      -moz-transform: translateX(0);\n      -ms-transform: translateX(0);\n      transform: translateX(0);\n    }\n   .cta{\ncolor:#fff !important;\n}<\/p>\n<p>    .controls{position:absolute;right:var(--safeR);bottom:16px;z-index:3}\n    .pp-btn{\n      border:0;\n      border-radius:999px;\n      width:44px;\n      height:44px;\n      background:var(--btn-bg);\n      color:var(--btn-fg);\n      display:grid;\n      place-items:center;\n      cursor:pointer;\n      box-shadow:0 1px 8px rgba(0,0,0,.18);\n    }\n    .pp-ico{width:22px;height:22px;display:block}<\/p>\n<p>    @media (min-width:768px) and (max-width:991px){\n      .hero{\n        height:calc(var(--100vh) - var(--header-h-tablet));\n      }\n    }<\/p>\n<p>    @media (min-width:992px){\n      .hero{\n        height:calc(var(--100vh) - var(--header-h-desktop));\n      }<\/p>\n<p>      .video--desktop{display:block}\n      .video--mobile{display:none}<\/p>\n<p>      .hero .overlay::before{\n        height:38%;\n        background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));\n      }<\/p>\n<p>      .hero .content{\n        max-width:var(--textW);\n        margin-left:var(--safeX);\n        margin-right:var(--safeX);\n        margin-bottom:var(--safeY);\n        gap:14px;\n      }\n      .hero .content h2{\n        font-size:clamp(32px, 2.4vw + 8px, 40px);\n        line-height:1.05;\n      }\n      .hero .content p{\n        font-size:clamp(15px,.35vw + 14px,18px);\n        line-height:1.35;\n      }\n      .cta{\n        font-size:16px;\n        margin-top:14px;\n      }\n      .cta-anim::after{\n        height:2px;\n      }\n    }<\/p>\n<p>    .animated{\n      opacity:0;\n      transition:opacity 1000ms var(--easing);\n    }\n    .animated.is-in{\n      opacity:1;\n    }\n    @media (prefers-reduced-motion:reduce){ .animated{transition:none} }\n  <\/style>\n<p>      <svg width=\"0\" height=\"0\" style=\"position:absolute;left:-9999px;top:-9999px\" aria-hidden=\"true\" focusable=\"false\">\n        <symbol id=\"icon-play\" viewBox=\"0 0 24 24\">\n          <path d=\"M9 6 L18 12 L9 18 Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\n                stroke-linejoin=\"round\" stroke-linecap=\"round\"\/>\n        <\/symbol>\n        <symbol id=\"icon-pause\" viewBox=\"0 0 24 24\">\n          <line x1=\"9\"  y1=\"6\" x2=\"9\"  y2=\"18\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"\/>\n          <line x1=\"15\" y1=\"6\" x2=\"15\" y2=\"18\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"\/>\n        <\/symbol>\n      <\/svg><\/p>\n<section class=\"hero animated js-hero\"\n               role=\"group\"\n               aria-label=\"Unique Engagement Rings\"><\/p>\n<div class=\"media\">\n          <video class=\"video video--mobile\" \nsrc=\"https:\/\/nemusych.sirv.com\/VIDEO\/BG_HERO_MB.mp4\"\n                 muted autoplay playsinline webkit-playsinline x5-playsinline\n                 loop preload=\"auto\" poster=\"\"><\/video><\/p>\n<p>          <video class=\"video video--desktop\" \nsrc=\"https:\/\/nemusych.sirv.com\/VIDEO\/BG_HERO_DK.mp4\"\n                 muted autoplay playsinline webkit-playsinline x5-playsinline\n                 loop preload=\"auto\" poster=\"\"><\/video><\/p>\n<div class=\"controls\">\n            <button class=\"pp-btn\" aria-label=\"Pausa\" aria-pressed=\"true\"><br \/>\n              <svg class=\"pp-ico\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <use href=\"#icon-pause\"><\/use>\n              <\/svg><br \/>\n            <\/button>\n          <\/div>\n<div class=\"overlay\">\n<div class=\"content\">\n<h2>Unique Engagement Rings<\/h2>\n<p>Engagement Rings that capture your heart.<br \/>\n                 With Bon Jewellery, every \"yes\" becomes an unforgettable moment.<br \/>\n                 Find the perfect engagement ring with IGI and GIA certified diamonds,<br \/>\n                 a true masterpiece that tells your love story in a unique way.<\/p>\n<p>              <a class=\"cta cta-anim\" href=\"https:\/\/www.bongioielli.com\/en\/diamond-engagement-rings\/\">Shop Diamond Engagement Ring<\/a>\n            <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>    <script>\n  (function(){\n    const ua = navigator.userAgent || navigator.vendor || window.opera;\n    const isIOS   = \/iP(ad|hone|od)\/.test(ua);\n    const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;<\/p>\n<p>    const isMobileLike = isTouch;<\/p>\n<p>    function setVHVar(){\n      if (isMobileLike) {\n        document.documentElement.style.setProperty('--100vh', '100vh');\n      } else {\n        const h = window.innerHeight;\n        document.documentElement.style.setProperty('--100vh', h + 'px');\n      }\n    }<\/p>\n<p>    document.addEventListener('DOMContentLoaded', function(){\n      setVHVar();\n      if (!isMobileLike) {\n        window.addEventListener('resize', setVHVar);\n      }<\/p>\n<p>      const MAX_TRANSLATE = 141.3;\n      const heroes = [];\n      let ticking = false;<\/p>\n<p>      document.querySelectorAll('.hero.js-hero').forEach((hero) => {\n        const media   = hero.querySelector('.media');\n        const vMob    = hero.querySelector('.video--mobile');\n        const vDesk   = hero.querySelector('.video--desktop');\n        const content = hero.querySelector('.content');\n        const btn     = hero.querySelector('.pp-btn');<\/p>\n<p>        if (!media || !vMob || !vDesk || !content) return;<\/p>\n<p>        hero.classList.add('is-in');<\/p>\n<p>        const cfg = { hero, media, vMob, vDesk, content, btn };\n        heroes.push(cfg);<\/p>\n<p>        function activeVideo(){\n          return getComputedStyle(vDesk).display !== 'none' ? vDesk : vMob;\n        }<\/p>\n<p>        if (btn){\n          const useEl = btn.querySelector('use');<\/p>\n<p>          function sync(){\n            const v = activeVideo();\n            if (!v || !useEl) return;<\/p>\n<p>            if (v.paused){\n              useEl.setAttribute('href', '#icon-play');\n              useEl.setAttribute('xlink:href', '#icon-play');\n              btn.setAttribute('aria-label','Play');\n              btn.setAttribute('aria-pressed','false');\n            }else{\n              useEl.setAttribute('href', '#icon-pause');\n              useEl.setAttribute('xlink:href', '#icon-pause');\n              btn.setAttribute('aria-label','Pausa');\n              btn.setAttribute('aria-pressed','true');\n            }\n          }<\/p>\n<p>          btn.addEventListener('click', ()=>{\n            const v = activeVideo();\n            if (!v) return;\n            if (v.paused){ v.play(); } else { v.pause(); }\n            sync();\n          });<\/p>\n<p>          [vDesk, vMob].forEach(v => {\n            if (!v) return;\n            v.addEventListener('play',  sync);\n            v.addEventListener('pause', sync);\n          });<\/p>\n<p>          window.addEventListener('resize', sync);\n          document.addEventListener('loadeddata', sync, true);\n          requestAnimationFrame(sync);\n        }<\/p>\n<p>        if (window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches){\n          [vDesk, vMob].forEach(v=>{ try{ v.pause(); }catch(_){} });\n        }\n      });<\/p>\n<p>      function updateTextScrollFor(cfg){\n        const media   = cfg.media;\n        const content = cfg.content;\n        if (!media || !content) return;<\/p>\n<p>        const rect = media.getBoundingClientRect();\n        const vh   = window.innerHeight || document.documentElement.clientHeight;<\/p>\n<p>        const start = vh * 0.2;\n        const end   = -vh * 0.8;<\/p>\n<p>        let progress;\n        if (rect.top <= end) {\n          progress = 1;\n        } else if (rect.top >= start) {\n          progress = 0;\n        } else {\n          progress = (start - rect.top) \/ (start - end);\n        }<\/p>\n<p>        progress = Math.max(0, Math.min(1, progress));<\/p>\n<p>        const y = -MAX_TRANSLATE * progress;<\/p>\n<p>        content.style.transform = \"translateY(\" + y + \"px) translateZ(0px)\";\n      }<\/p>\n<p>      function updateAllHeroes(){\n        heroes.forEach(cfg => updateTextScrollFor(cfg));\n      }<\/p>\n<p>      function requestScrollUpdate(){\n        if (!ticking){\n          ticking = true;\n          requestAnimationFrame(function(){\n            updateAllHeroes();\n            ticking = false;\n          });\n        }\n      }<\/p>\n<p>      window.addEventListener('scroll', requestScrollUpdate, { passive: true });<\/p>\n<p>      if (!isMobileLike) {\n        window.addEventListener('resize', requestScrollUpdate);\n      }<\/p>\n<p>      requestAnimationFrame(updateAllHeroes);\n    });\n  })();\n<\/script><\/p><\/div>\n<div class=\"collection-slider\">\n  <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/swiper@10\/swiper-bundle.min.css\" \/>\n<style>\n    figure {\n      margin: 0;\n    }<\/p>\n<p>    .slider-wrap .slider-head {\n      padding-left: 24px;\n      padding-right: 24px;\n      box-sizing: border-box;\n    }<\/p>\n<p>    @media (min-width:1440px){\n      .slider-wrap .slider-head {\n        padding-left: 28px;\n        padding-right: 28px;\n      }\n    }<\/p>\n<p>    .slider-wrap{\n      color:#101010;\n      position:relative;\n      overflow-x:hidden;\n      -webkit-tap-highlight-color:transparent;\n    }<\/p>\n<p>    .slider-head{\n      display:grid;\n      grid-template-columns:1fr auto;\n      align-items:center;\n      gap:8px 24px;\n      margin:0 0 30px;\n    }<\/p>\n<p>    .slide-head-text{\n      display:flex;\n      flex-direction:column;\n      gap:6px;\n      min-width:0;\n      margin:0;\n    }<\/p>\n<p>    .slider-head h2{\n      margin:0;\n      color:#000 !important;\n      font-size:clamp(20px,2.6vw,34px)\n    }<\/p>\n<p>    .slider-head p{\n      margin:0;\n      opacity:.9;\n      color:#000;\n      font-size:16px;\n    }<\/p>\n<p>    .slider-nav{\n      display:flex;\n      gap:10px;\n      justify-self:end\n    }<\/p>\n<p>    .slider-btn{\n      width:60px;\n      height:60px;\n      border-radius:9999px;\n      display:flex;\n      align-items:center;\n      justify-content:center;\n      background:#fff;\n      border:0;\n      cursor:pointer;\n      transition:transform .18s ease, opacity .2s ease\n    }<\/p>\n<p>    .slider-btn svg{\n      width:30px;\n      height:30px;\n      color:#000 !important;\n    }<\/p>\n<p>    .slider-btn:active{\n      transform:scale(.95)\n    }<\/p>\n<p>    .slider-prev[aria-disabled=\"true\"],\n    .slider-next[aria-disabled=\"true\"]{\n      opacity:.80;\n      pointer-events:none\n    }<\/p>\n<p>    .swiper-container{\n      position:relative;\n      overflow:hidden;\n      padding-bottom:16px\n    }<\/p>\n<p>    .swiper-container,\n    .swiper-container *{\n      scrollbar-width:none;\n      -ms-overflow-style:none\n    }<\/p>\n<p>    .swiper-container ::-webkit-scrollbar{\n      display:none\n    }<\/p>\n<p>    .swiper-wrapper{\n      align-items:stretch;\n      height:auto\n    }<\/p>\n<p>    .swiper-slide{\n      height:auto;\n      margin:0 0 15px\n    }<\/p>\n<p>    .slide-card{\n      position:relative;\n      overflow:hidden;\n      border-radius:0;\n      background:#fff;\n      aspect-ratio:3\/4;\n    }<\/p>\n<p>    @supports not (aspect-ratio:1){\n      .slide-card{\n        height:0;\n        padding-bottom:133%\n      }\n    }<\/p>\n<p>    .slide-card img{\n      position:absolute;\n      inset:0;\n      width:100%;\n      height:100%;\n      object-fit:cover;\n      transition:transform .4s ease;\n      display:block\n    }<\/p>\n<p>    .slide-card:hover img{\n      transform:scale(1.10)\n    }<\/p>\n<p>    .slide-meta{\n      margin:10px 0 0;\n      line-height:1.35\n    }<\/p>\n<p>    .slide-meta a{\n      display:block;\n      text-decoration:none;\n      color:inherit;\n      padding:6px 0\n    }<\/p>\n<p>    .slide-title{\n      margin:0 0 4px;\n      font-weight:600;\n      font-size:clamp(16px,1.6vw,20px);\n      color:#000;\n    }<\/p>\n<p>    .slide-text{\n      margin:0;\n      font-size:14px;\n      color:#6b6b6b\n    }<\/p>\n<p>    .swiper-container > .swiper-pagination{\n      position:absolute !important;\n      left:50% !important;\n      bottom:0 !important;\n      transform:translateX(-50%) !important;\n      margin:0 !important;\n      width:max-content;\n      display:flex;\n      gap:3px;\n      align-items:center;\n      justify-content:center;\n      z-index:5;\n      padding-bottom:4px;\n    }<\/p>\n<p>    .swiper-container > .swiper-pagination .swiper-pagination-bullet{\n      width:6px;\n      height:6px;\n      border-radius:50%;\n      background:#cbcbcb;\n      opacity:1;\n      position:relative;\n      transition:all .25s ease\n    }<\/p>\n<p>    .swiper-container > .swiper-pagination .swiper-pagination-bullet-active{\n      background:none\n    }<\/p>\n<p>    .swiper-pagination-bullet-active{\n      background:#000 !important;\n    }<\/p>\n<p>    .swiper-container > .swiper-pagination .swiper-pagination-bullet-active::after{\n      content:'';\n      position:absolute;\n      top:50%;\n      left:50%;\n      transform:translate(-50%,-50%);\n      width:8px;\n      height:8px;\n      border-radius:50%;\n      background:#000 !important;\n    }<\/p>\n<p>    @media (max-width:768px){\n      .slider-head{\n        grid-template-columns:1fr;\n        gap:8px 0\n      }<\/p>\n<p>      .slider-head .slider-nav{\n        display:none;\n      }<\/p>\n<p>      .slide-title{\n        font-size:clamp(18px,5vw,20px);\n        color:#000;\n      }<\/p>\n<p>      .slide-text{\n        font-size:clamp(13px,3.6vw,14px)\n      }<\/p>\n<p>      .swiper-slide{\n        height:auto !important;\n        max-height:100% !important;\n        display:flex !important;\n        flex-direction:column !important;\n        justify-content:flex-start !important\n      }<\/p>\n<p>      .slide-card{\n        flex:1 1 auto !important;\n        height:100% !important;\n        max-height:inherit !important\n      }<\/p>\n<p>      .slide-card img{\n        height:100% !important;\n        object-fit:cover !important\n      }<\/p>\n<p>      .swiper-container{\n        overflow:visible;\n      }<\/p>\n<p>      .swiper-container .slider-nav.slider-nav--overlay{\n        position:absolute;\n        top:0;\n        right:14px;\n        transform:translateY(-60%);\n        z-index:50;\n        display:flex;\n        gap:10px;\n      }<\/p>\n<p>      .swiper-container .slider-nav.slider-nav--overlay .slider-btn{\n        width:40px;\n        height:40px;\n        background:rgba(255,255,255,.92);\n        backdrop-filter:blur(6px);\n        -webkit-backdrop-filter:blur(6px);\n      }<\/p>\n<p>      .slider-btn svg{\n        width: 20px;\n        height: 20px;\n        color: #000 !important;\n      }\n    }<\/p>\n<p>    .slider-wrap .swiper-container{\n      padding: 0 !important;\n      box-sizing: border-box !important;\n    }<\/p>\n<p>    @media (min-width:640px){\n      .slider-wrap .swiper-container{\n        padding-left: 24px !important;\n        padding-right: 24px !important;\n      }\n    }<\/p>\n<p>    @media (min-width:1440px){\n      .slider-wrap .swiper-container{\n        padding-left: 28px !important;\n        padding-right: 28px !important;\n      }\n    }<\/p>\n<p>    .slider-nav--overlay{\n      display: none !important;\n    }<\/p>\n<p>    .slider-nav--overlay{\n      display: none !important;\n    }\n    .slider-nav--head{\n      display: flex !important;\n    }<\/p>\n<p>    @media (max-width:991px){\n      .slider-nav--head{\n        display: none !important;\n      }<\/p>\n<p>      .slider-nav--overlay{\n        display: flex !important;\n        position: absolute;\n        top: 0;\n        right: 14px;\n        transform: translateY(-60%);\n        z-index: 50;\n        gap: 10px;\n      }<\/p>\n<p>      .slider-nav--overlay .slider-btn{\n        width: 40px;\n        height: 40px;\n        background: rgba(255,255,255,.92);\n        backdrop-filter: blur(6px);\n        -webkit-backdrop-filter: blur(6px);\n      }<\/p>\n<p>      .slider-nav--overlay .slider-btn svg{\n        width: 20px;\n        height: 20px;\n      }<\/p>\n<p>      .swiper-container{\n        overflow: visible;\n      }\n    }\n  <\/style>\n<div class=\"slider-wrap\">\n<div class=\"slider-head\">\n<div class=\"slide-head-text\">\n<h2 class=\"heading--2 text-left mobtext-left mobm-b0 fontMedium\" style=\"margin-bottom:0; font-weight:600;\">Shop by Category<\/h2>\n<p class=\"text-left mobm-b15 mobtext-left\">Handcrafted Jewelry Made in Italy<\/p>\n<\/p><\/div>\n<div class=\"slider-nav slider-nav--head\">\n        <button class=\"slider-btn slider-prev\" aria-label=\"Slide precedente\" aria-disabled=\"true\"><br \/>\n          <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\">\n            <path d=\"M15 6l-6 6 6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg><br \/>\n        <\/button><br \/>\n        <button class=\"slider-btn slider-next\" aria-label=\"Slide successiva\"><br \/>\n          <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\">\n            <path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg><br \/>\n        <\/button>\n      <\/div>\n<\/p><\/div>\n<div class=\"swiper swiper-container\">\n<div class=\"swiper-wrapper\">\n<div class=\"swiper-slide\">\n<figure class=\"slide-card\">\n            <img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/BG_ENGAGEMENT_RING_COLLECTION.webp\" alt=\"Diamond Engagement Ring\"><br \/>\n            <a href=\"https:\/\/www.bongioielli.com\/en\/diamond-engagement-rings\/\" aria-label=\"Diamond Engagement Ring\" style=\"position:absolute; inset:0; z-index:3; display:block;\"><\/a><br \/>\n          <\/figure>\n<div class=\"slide-meta\">\n            <a href=\"https:\/\/www.bongioielli.com\/en\/diamond-engagement-rings\/\"><\/p>\n<h3 class=\"slide-title\">Engagement Rings<\/h3>\n<p><\/a>\n          <\/div>\n<\/p><\/div>\n<div class=\"swiper-slide\">\n<figure class=\"slide-card\">\n            <img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/BG_PENDANT_COLLECTION.webp\" alt=\"Diamond Pendants\"><br \/>\n            <a href=\"https:\/\/www.bongioielli.com\/en\/fine-jewellery\/necklaces\/\" aria-label=\"Pendants\" style=\"position:absolute; inset:0; z-index:3; display:block;\"><\/a><br \/>\n          <\/figure>\n<div class=\"slide-meta\">\n            <a href=\"https:\/\/www.bongioielli.com\/en\/fine-jewellery\/necklaces\/\"><\/p>\n<h3 class=\"slide-title\">Pendants<\/h3>\n<p><\/a>\n          <\/div>\n<\/p><\/div>\n<div class=\"swiper-slide\">\n<figure class=\"slide-card\">\n            <img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/BG_ETERNITY_RING_COLLECTION.webp\" alt=\"Diamond Anniversary Rings\"><br \/>\n            <a href=\"https:\/\/www.bongioielli.com\/en\/wedding-rings\/eternity-rings\/\" aria-label=\"Anniversary Rings\" style=\"position:absolute; inset:0; z-index:3; display:block;\"><\/a><br \/>\n          <\/figure>\n<div class=\"slide-meta\">\n            <a href=\"https:\/\/www.bongioielli.com\/en\/wedding-rings\/eternity-rings\/\"><\/p>\n<h3 class=\"slide-title\">Anniversary Rings<\/h3>\n<p><\/a>\n          <\/div>\n<\/p><\/div>\n<div class=\"swiper-slide\">\n<figure class=\"slide-card\">\n            <img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/BG_WEDDING_BANDS_COLLECTION.webp\" alt=\"Wedding Rings\"><br \/>\n            <a href=\"https:\/\/www.bongioielli.com\/en\/wedding-rings\/classic-rings\/\" aria-label=\"Wedding Ring\" style=\"position:absolute; inset:0; z-index:3; display:block;\"><\/a><br \/>\n          <\/figure>\n<div class=\"slide-meta\">\n            <a href=\"https:\/\/www.bongioielli.com\/en\/wedding-rings\/classic-rings\/\"><\/p>\n<h3 class=\"slide-title\">Wedding Rings<\/h3>\n<p><\/a>\n          <\/div>\n<\/p><\/div>\n<div class=\"swiper-slide\">\n<figure class=\"slide-card\">\n            <img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/BG_BRACELETS_COLLECTION.webp\" alt=\"Diamonds Tennis Bracelets\"><br \/>\n            <a href=\"https:\/\/www.bongioielli.com\/en\/fine-jewellery\/bracelets\/\" aria-label=\"Bracelets\" style=\"position:absolute; inset:0; z-index:3; display:block;\"><\/a><br \/>\n          <\/figure>\n<div class=\"slide-meta\">\n            <a href=\"https:\/\/www.bongioielli.com\/en\/fine-jewellery\/bracelets\/\"><\/p>\n<h3 class=\"slide-title\">Bracelets<\/h3>\n<p><\/a>\n          <\/div>\n<\/p><\/div>\n<div class=\"swiper-slide\">\n<figure class=\"slide-card\">\n            <img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/BG_EARRINGS_COLLECTION.webp\" alt=\"Diamond Earrings\"><br \/>\n            <a href=\"https:\/\/www.bongioielli.com\/en\/fine-jewellery\/earrings\/\" aria-label=\"Diamond Earrings\" style=\"position:absolute; inset:0; z-index:3; display:block;\"><\/a><br \/>\n          <\/figure>\n<div class=\"slide-meta\">\n            <a href=\"https:\/\/www.bongioielli.com\/en\/fine-jewellery\/earrings\/\"><\/p>\n<h3 class=\"slide-title\">Earrings<\/h3>\n<p><\/a>\n          <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"slider-nav slider-nav--overlay\" aria-hidden=\"false\">\n        <button class=\"slider-btn slider-prev\" aria-label=\"Slide precedente\" aria-disabled=\"true\"><br \/>\n          <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\">\n            <path d=\"M15 6l-6 6 6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg><br \/>\n        <\/button><br \/>\n        <button class=\"slider-btn slider-next\" aria-label=\"Slide successiva\"><br \/>\n          <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\">\n            <path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg><br \/>\n        <\/button>\n      <\/div>\n<div class=\"swiper-pagination\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>  <script src=\"https:\/\/unpkg.com\/swiper@10\/swiper-bundle.min.js\"><\/script><br \/>\n  <script>\n    (function(){\n      const block = document.querySelector('.collection-slider');\n      if (!block) return;<\/p>\n<p>      const root = block.querySelector('.swiper-container');\n      const pag  = block.querySelector('.swiper-pagination');<\/p>\n<p>      const prevOverlay = block.querySelector('.slider-nav--overlay .slider-prev');\n      const nextOverlay = block.querySelector('.slider-nav--overlay .slider-next');<\/p>\n<p>      const prevHead = block.querySelector('.slider-nav--head .slider-prev');\n      const nextHead = block.querySelector('.slider-nav--head .slider-next');<\/p>\n<p>      if (!root || !pag || !prevOverlay || !nextOverlay) return;<\/p>\n<p>      const sw = new Swiper(root, {\n        speed: 600,\n        grabCursor: true,\n        watchSlidesProgress: true,\n        slidesPerGroup: 1,\n        roundLengths: true,\n        slidesPerView: 1.15,\n        spaceBetween: 16,\n        slidesOffsetBefore: 16,\n        slidesOffsetAfter: 16,<\/p>\n<p>        navigation: { prevEl: prevOverlay, nextEl: nextOverlay },\n        pagination: { el: pag, clickable: true, type: 'bullets' },\n        watchOverflow: false,<\/p>\n<p>        breakpoints: {\n          0: {\n            slidesPerView: 1.30,\n            spaceBetween: 16,\n            slidesOffsetBefore: 16,\n            slidesOffsetAfter: 16\n          },\n          768: {\n            slidesPerView: 2.5,\n            spaceBetween: 24,\n            slidesOffsetBefore: 0,\n            slidesOffsetAfter: 0\n          },\n          1024: {\n            slidesPerView: 3.5,\n            spaceBetween: 24,\n            slidesOffsetBefore: 0,\n            slidesOffsetAfter: 0\n          },\n          1440: {\n            slidesPerView: 3.5,\n            spaceBetween: 28,\n            slidesOffsetBefore: 0,\n            slidesOffsetAfter: 0\n          }\n        },<\/p>\n<p>        on: {\n          init(s){ syncAria(s); fixBulletsCenter(); },\n          slideChange(s){ syncAria(s); }\n        }\n      });<\/p>\n<p>      if (prevHead && nextHead){\n        prevHead.addEventListener('click', () => sw.slidePrev());\n        nextHead.addEventListener('click', () => sw.slideNext());\n      }<\/p>\n<p>      function syncAria(s){\n        prevOverlay.setAttribute('aria-disabled', s.isBeginning);\n        nextOverlay.setAttribute('aria-disabled', s.isEnd);\n        if (prevHead && nextHead){\n          prevHead.setAttribute('aria-disabled', s.isBeginning);\n          nextHead.setAttribute('aria-disabled', s.isEnd);\n        }\n      }<\/p>\n<p>      function fixBulletsCenter(){\n        const center = () => {\n          pag.style.left = '50%';\n          pag.style.transform = 'translateX(-50%)';\n        };\n        center();\n        window.addEventListener('resize', center, { passive:true });\n      }\n    })();\n  <\/script>\n<\/div>\n<div id=\"engagement-parallax\" class=\"px-stack\">\n<div class=\"px-sticky\">\n<div class=\"px-layer px-hero\">\n<div class=\"site-wapper-sect main__space\">\n<style>\n          :root{\n            --vh: 1vh;<\/p>\n<p>            --header-h-phone: 100px;\n            --header-h-tablet: 160px;\n            --header-h-desktop: 160px;<\/p>\n<p>            --safeX: max(32px, calc(20px + env(safe-area-inset-left)));\n            --safeR: max(16px, calc(16px + env(safe-area-inset-right)));\n            --safeY: max(40px, calc(20px + env(safe-area-inset-bottom)));<\/p>\n<p>            --easing: cubic-bezier(0,0,.35,1);<\/p>\n<p>            --overlay-strong: rgba(0,0,0,.62);\n            --overlay-mid:    rgba(0,0,0,.26);\n            --overlay-clear:  rgba(0,0,0,0);<\/p>\n<p>            --hero-pos-m: 50% 35%;\n            --hero-pos-d: 60% 40%;\n            --hero-zoom-m: 1.02;\n            --hero-zoom-d: 1.02;\n          }<\/p>\n<p>          .site-wapper-sect.main__space{ margin-top:0; padding-top:0; }<\/p>\n<p>          .hero.hero-img{\n            position:relative;\n            isolation:isolate;\n            background:#000;\n            color:#fff;<\/p>\n<p>            height: calc((var(--vh) * 100) - var(--header-h-phone));\n            min-height: 640px;<\/p>\n<p>            overflow:hidden;\n          }<\/p>\n<p>          @media (max-width:767px){\n            .hero.hero-img{\n              height: min(680px, calc((var(--vh) * 100) - var(--header-h-phone))) !important;\n              min-height: 640px !important;\n            }\n          }<\/p>\n<p>          @media (min-width:768px) and (max-width:991px){\n            .hero.hero-img{\n              height: calc((var(--vh) * 100) - var(--header-h-tablet));\n              min-height: auto;\n            }\n          }<\/p>\n<p>          @media (min-width:992px){\n            .hero.hero-img{\n              height: calc((var(--vh) * 100) - var(--header-h-desktop));\n              min-height: auto;\n            }\n          }<\/p>\n<p>          .hero.hero-img .media{\n            position:relative;\n            height:100%;\n            width:100%;\n            background:#000;\n          }<\/p>\n<p>          .hero.hero-img .hero-bg{\n            position:absolute;\n            inset:0;\n            width:100%;\n            height:100%;\n            object-fit:cover;\n            object-position: var(--hero-pos-m);\n            transform: scale(var(--hero-zoom-m));\n            will-change: transform;\n            display:block;\n            filter: saturate(1.05) contrast(1.06);\n          }<\/p>\n<p>          @media (min-width:992px){\n            .hero.hero-img .hero-bg{\n              object-position: var(--hero-pos-d);\n              transform: scale(var(--hero-zoom-d));\n            }\n          }<\/p>\n<p>          .hero.hero-img .shade{\n            position:absolute;\n            inset:0;\n            z-index:1;\n            background:\n              radial-gradient(1200px 520px at 18% 74%, rgba(0,0,0,.58), rgba(0,0,0,0) 60%),\n              linear-gradient(to top, var(--overlay-strong) 0%, var(--overlay-mid) 35%, var(--overlay-clear) 65%),\n              linear-gradient(to bottom, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 35%);\n            pointer-events:none;\n          }<\/p>\n<p>          .hero.hero-img .linkbox{\n            position:absolute;\n            inset:0;\n            z-index:2;\n          }<\/p>\n<p>          .hero.hero-img .overlay{\n            position:absolute;\n            inset:0;\n            z-index:3;\n            display:flex;\n            align-items:flex-end;\n            pointer-events:none;\n          }<\/p>\n<p>          .animated{ opacity:0; transition:opacity 900ms var(--easing); }\n          .animated.is-in{ opacity:1; }\n          @media (prefers-reduced-motion:reduce){ .animated{transition:none} }<\/p>\n<p>          #engagement-parallax .px-chev{\n            position:absolute;\n            left:50%;\n            bottom:18px;\n            transform:translateX(-50%);\n            z-index:9999;\n            width:52px;height:52px;\n            border-radius:9999px;\n            border:1px solid rgba(255,255,255,.28);\n            background:rgba(0,0,0,.28);\n            backdrop-filter: blur(8px);\n            -webkit-backdrop-filter: blur(8px);\n            display:grid;\n            place-items:center;\n            cursor:pointer;\n            pointer-events:auto;\n            transition:transform .18s ease, background .2s ease, border-color .2s ease;\n          }\n          #engagement-parallax .px-chev:hover{\n            transform:translateX(-50%) translateY(-2px);\n            background:rgba(255,255,255,.14);\n            border-color:rgba(255,255,255,.45);\n          }\n          #engagement-parallax .px-chev svg{ width:22px;height:22px; color:#fff; }<\/p>\n<p>          #engagement-parallax .px-chev[data-tip]::after{\n            content:attr(data-tip);\n            position:absolute;\n            bottom: calc(100% + 10px);\n            left:50%;\n            transform:translateX(-50%);\n            background:rgba(0,0,0,.72);\n            color:#fff;\n            font-size:12px;\n            padding:8px 10px;\n            border-radius:10px;\n            white-space:nowrap;\n            opacity:0;\n            pointer-events:none;\n            transition:opacity .18s ease, transform .18s ease;\n          }\n          #engagement-parallax .px-chev:hover::after{\n            opacity:1;\n            transform:translateX(-50%) translateY(-2px);\n          }<\/p>\n<p>          @media (max-width:768px){\n            #engagement-parallax .px-chev{\n              width:46px;height:46px;\n              bottom:14px;\n            }\n            #engagement-parallax .px-chev svg{ width:20px;height:20px; }\n          }<\/p>\n<p>          .hero.hero-img .marquee-hero{\n            pointer-events:none;\n            width:100%;\n            margin-bottom: 34px;\n          }<\/p>\n<p>          @media (min-width:992px){\n            .hero.hero-img .marquee-hero{\n              margin-bottom: calc(var(--safeY) + 10px);\n            }\n          }<\/p>\n<p>          .hero.hero-img .marquee-wrap{\n            width:100%;\n            overflow:hidden;\n            padding-left:16px;\n            padding-right:16px;\n          }<\/p>\n<p>          @media (min-width:992px){\n            .hero.hero-img .marquee-wrap{\n              padding-left:var(--safeX);\n              padding-right:var(--safeX);\n            }\n          }<\/p>\n<p>          .hero.hero-img .marquee-track{\n            will-change: transform;\n            transform: translate3d(0,0,0);\n          }<\/p>\n<p>          .hero.hero-img .marquee-text{\n            display:inline-block;\n            white-space:nowrap;\n            font-weight:600;\n            line-height:1.05;\n            letter-spacing:0.22em;\n            text-transform:uppercase;\n            color:#fff;\n            font-size: clamp(22px, 6.2vw, 82px);\n            text-shadow: 0 14px 40px rgba(0,0,0,.45);\n          }<\/p>\n<p>          @media (max-width:768px){\n            .hero.hero-img .marquee-hero{ margin-bottom: 26px; }\n            .hero.hero-img .marquee-text{\n              letter-spacing:0.16em;\n              font-size: clamp(20px, 7vw, 34px);\n            }\n          }<\/p>\n<p>          @media (prefers-reduced-motion:reduce){\n            .hero.hero-img .marquee-track{ transform:none !important; }\n          }\n        <\/style>\n<section class=\"hero hero-img animated js-hero-img\" role=\"group\" aria-label=\"Anelli di Fidanzamento Unici\">\n<div class=\"media\">\n            <picture><source media=\"(max-width: 767px)\" srcset=\"https:\/\/nemusych.sirv.com\/IMAGES\/BYOR_SECT_MB.jpg\"><img decoding=\"async\" class=\"hero-bg\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/BYOR_SECT_DT.jpg\" alt=\"Anello di fidanzamento Bon Gioielli\" loading=\"eager\" fetchpriority=\"high\">\n            <\/picture>\n<div class=\"shade\" aria-hidden=\"true\"><\/div>\n<div class=\"overlay\">\n<div class=\"marquee-hero\" aria-label=\"Design your own marquee\">\n<div class=\"marquee-wrap\">\n<div class=\"marquee-track\" id=\"heroMarqueeTrack\">\n                    <span class=\"marquee-text\"><br \/>\n                      DESIGN YOUR OWN \u2022 DESIGN YOUR OWN \u2022 DESIGN YOUR OWN \u2022 DESIGN YOUR OWN \u2022 DESIGN YOUR OWN \u2022 DESIGN YOUR OWN \u2022 DESIGN YOUR OWN \u2022<br \/>\n                      DESIGN YOUR OWN \u2022 DESIGN YOUR OWN \u2022 DESIGN YOUR OWN \u2022 DESIGN YOUR OWN \u2022 DESIGN YOUR OWN \u2022 DESIGN YOUR OWN \u2022 DESIGN YOUR OWN \u2022<br \/>\n                    <\/span>\n                  <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>            <button class=\"px-chev\" type=\"button\" data-px-next=\"montature\" data-tip=\"Visualizza montature\" aria-label=\"Visualizza montature\"><br \/>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                <path d=\"M6 9l6 6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n              <\/svg><br \/>\n            <\/button>\n          <\/div>\n<\/section>\n<p>        <script>\n        (function(){\n          const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n          if(reduceMotion) return;<\/p>\n<p>          function setVh(){\n            const vh = (window.innerHeight || 0) * 0.01;\n            document.documentElement.style.setProperty('--vh', vh + 'px');\n          }<\/p>\n<p>          const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n          const isMobileLike = isTouch;<\/p>\n<p>          function clamp(v,min,max){ return v<min?min:(v>max?max:v); }<\/p>\n<p>          document.addEventListener('DOMContentLoaded', function(){\n            setVh();\n            window.addEventListener('resize', setVh, {passive:true});\n            window.addEventListener('orientationchange', setVh, {passive:true});<\/p>\n<p>            const hero = document.querySelector('.hero.hero-img.js-hero-img');\n            if(!hero) return;<\/p>\n<p>            hero.classList.add('is-in');<\/p>\n<p>            const media   = hero.querySelector('.media');\n            const bg      = hero.querySelector('.hero-bg');\n            if(!media || !bg) return;<\/p>\n<p>            const MAX_ZOOM = 0.035;\n            let ticking = false;<\/p>\n<p>            function update(){\n              ticking = false;\n              const rect = media.getBoundingClientRect();\n              const vh = window.innerHeight || 1;<\/p>\n<p>              const start = vh * 0.25;\n              const end   = -vh * 0.85;<\/p>\n<p>              let p;\n              if(rect.top >= start) p = 0;\n              else if(rect.top <= end) p = 1;\n              else p = (start - rect.top) \/ (start - end);\n\n              p = clamp(p,0,1);\n\n              const baseZoom = window.matchMedia('(max-width: 767px)').matches\n                ? parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--hero-zoom-m')) || 1.02\n                : parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--hero-zoom-d')) || 1.02;\n\n              const z = baseZoom + (MAX_ZOOM * p);\n              bg.style.transform = `scale(${z})`;\n            }\n\n            function onScroll(){\n              if(ticking) return;\n              ticking = true;\n              requestAnimationFrame(update);\n            }\n\n            window.addEventListener('scroll', onScroll, {passive:true});\n            if(!isMobileLike) window.addEventListener('resize', onScroll, {passive:true});\n\n            requestAnimationFrame(update);\n          });\n        })();\n        <\/script><\/p>\n<p>        <script>\n          (function(){\n            const hero = document.querySelector('.hero.hero-img.js-hero-img');\n            if(!hero) return;<\/p>\n<p>            const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n            if(reduceMotion) return;<\/p>\n<p>            const track = hero.querySelector('#heroMarqueeTrack');\n            if(!track) return;<\/p>\n<p>            function speed(){\n              return (window.innerWidth <= 768) ? 0.18 : 0.32;\n            }\n\n            function tick(){\n              const offset = window.scrollY * speed();\n              track.style.transform = `translate3d(${-offset}px,0,0)`;\n            }\n\n            window.addEventListener('scroll', tick, {passive:true});\n            window.addEventListener('resize', tick, {passive:true});\n            document.addEventListener('DOMContentLoaded', tick);\n            requestAnimationFrame(tick);\n          })();\n        <\/script>\n      <\/div>\n<\/p><\/div>\n<div class=\"px-layer px-montature\">\n<div id=\"settings-hero\">\n<style>\n      #settings-hero{\n        background: linear-gradient(rgb(0 0 0) 0%, #000000 0, #071b33 35%, #071b33 85%, #000 110%);\n        --text: #fff;\n        --dot: #fff;\n        --dot-soft: #fff;\n        --dot-active-scale: 1.35;\n        --maxw: 1600px;\n        --overlap-desktop: .06;\n        --overlap-mobile: .25;<\/p>\n<p>        --swatch-size: 25px;\n        --swatch-gap: 14px;\n        --swatch-ring: #1f4b4b;\n      }\n      #settings-hero *{box-sizing:border-box;}<\/p>\n<p>      #settings-hero,\n      #settings-hero section.hero-settings{\n        position:relative;\n        z-index:0 !important;\n        isolation:isolate;\n      }\n      #settings-hero .stage,\n      #settings-hero .track,\n      #settings-hero .slot,\n      #settings-hero .img{\n        z-index:0 !important;\n      }\n      #settings-hero .slider-head,\n      #settings-hero .bottom-ui,\n      #settings-hero .sect-style-left-text{\n        z-index:1 !important;\n      }<\/p>\n<p>      #settings-hero section.hero-settings{\n        min-height:100svh;\n        display:flex;\n        align-items:center;\n        justify-content:center;\n        background:\n          radial-gradient(circle at 20% 0%, var(--bg-grad-light) 0, var(--bg-main) 40%, var(--bg-grad-dark) 100%);\n        overflow:hidden;\n      }<\/p>\n<p>      #settings-hero .slider-head{\n        position:absolute;\n        top:90px;\n        left:50%;\n        transform:translateX(-50%);\n        width:100%;\n        max-width:var(--maxw);\n        padding:0 28px;<\/p>\n<p>        display:flex;\n        align-items:center;\n        justify-content:space-between;\n        gap:20px;<\/p>\n<p>        pointer-events:none;\n      }\n      #settings-hero .slide-head-text{\n        color:#fff;\n        pointer-events:auto;\n      }<\/p>\n<p>      #settings-hero .stage{\n        position:relative;\n        width:100%;\n        max-width:var(--maxw);\n        height:100%;\n        min-height:70vh;\n        display:flex;\n        align-items:center;\n        justify-content:center;\n        margin:auto;\n        pointer-events:auto;\n        touch-action:pan-y;\n        cursor:grab;\n        user-select:none;\n        transition: padding .35s ease;\n      }\n      #settings-hero .stage.dragging{cursor:grabbing;}<\/p>\n<p>      #settings-hero .track{\n        position:absolute;\n        inset:0;\n        display:flex;\n        align-items:center;\n        will-change:transform;\n      }<\/p>\n<p>      #settings-hero .slot{\n        width:360px;\n        height:100%;\n        flex:0 0 360px;\n        display:flex;\n        align-items:center;\n        justify-content:center;\n        position:relative;\n        margin-left:calc(-360px * var(--overlap-desktop));\n      }\n      #settings-hero .slot:first-child{margin-left:0;}\n      #settings-hero .ghost{opacity:0;pointer-events:none;}<\/p>\n<p>      #settings-hero .img{\n        max-height:min(75vh,820px);\n        width:auto;\n        object-fit:contain;\n        transform-origin:center;\n        transition:\n          transform 0.9s cubic-bezier(.19,1,.22,1),\n          opacity  0.35s ease,\n          filter   0.6s ease;\n        pointer-events:none;\n      }<\/p>\n<p>      #settings-hero.init-hide .img{\n        opacity:0 !important;\n        transition:none !important;\n      }<\/p>\n<p>      #settings-hero .nav-arrows{\n        display:flex;\n        gap:10px;\n        pointer-events:auto;\n      }<\/p>\n<p>      #settings-hero .btn{\n        width:60px;\n        height:60px;\n        border-radius:9999px;\n        display:flex;\n        align-items:center;\n        justify-content:center;\n        background:#fff;\n        border:0;\n        cursor:pointer;\n        box-shadow:0 6px 18px rgba(0,0,0,.18);\n        transition:transform .18s ease, opacity .2s ease;\n      }\n      #settings-hero .btn:active{transform:scale(.95);}\n      #settings-hero .btn svg{width:30px;height:30px;color:#000;}\n      #settings-hero .btn[aria-disabled=\"true\"]{opacity:.80;pointer-events:none;}<\/p>\n<p>      #settings-hero .bottom-ui{\n        position:absolute;\n        bottom:36px;\n        left:50%;\n        transform:translateX(-50%);\n        text-align:center;\n        display:flex;\n        flex-direction:column;\n        gap:10px;\n        pointer-events:none;\n      }<\/p>\n<p>      #settings-hero .caption{\n        margin:0;\n        font-size:20px;\n        letter-spacing:.10em;\n        text-transform:uppercase;\n        color:var(--text);\n      }<\/p>\n<p>      #settings-hero .dots{display:flex;gap:8px;justify-content:center;}\n      #settings-hero .dot{\n        width:6px;height:6px;border-radius:999px;background:var(--dot-soft);\n        transition:all .2s ease;\n        pointer-events:auto;\n        cursor:pointer;\n        border:0;\n        padding:0;\n      }\n      #settings-hero .dot.active{\n        background:var(--dot);\n        transform:scale(var(--dot-active-scale));\n      }<\/p>\n<p>      #settings-hero .metal-switch{\n        display:flex;\n        justify-content:center;\n        gap:var(--swatch-gap);\n        pointer-events:auto;\n        margin-top:10px;\n        margin-bottom:10px;\n      }\n      #settings-hero .metal{\n        width:var(--swatch-size);\n        height:var(--swatch-size);\n        border-radius:9999px;\n        border:0;\n        padding:0;\n        cursor:pointer;\n        position:relative;\n        background:transparent;\n      }\n      #settings-hero .metal::before{\n        content:\"\";\n        position:absolute;\n        inset:0;\n        border-radius:inherit;\n        background:var(--fill, #ddd);\n      }\n      #settings-hero .metal.active::after{\n        content:\"\";\n        position:absolute;\n        inset:-1px;\n        border-radius:inherit;\n        box-shadow: 0 0 0 2px #fff;\n      }<\/p>\n<p>      #settings-hero .sect-style-left-text{\n        display:block;\n        position:absolute;\n        left:50%;\n        transform:translateX(-50%);\n        width:100%;\n        max-width: var(--maxw);\n        padding: 0 16px;\n        pointer-events:none;\n        z-index: 2 !important;\n      }<\/p>\n<p>      @media (min-width: 992px){\n        #settings-hero .slide-head-text{ display:none !important; }\n        #settings-hero .slider-head{ justify-content:flex-end !important; }\n        #settings-hero .nav-arrows{ margin-left:auto !important; }<\/p>\n<p>        #settings-hero .sect-style-left-text{\n          top:50%;\n          transform:translateX(-50%) translateY(10px);\n          padding: 0 28px;\n          opacity:0;\n          transition: opacity .22s ease, transform .22s ease;\n        }\n        #settings-hero.intro-ready:not(.settings-grabbing):not(.settings-interacted) .sect-style-left-text{\n          opacity:1;\n          transform:translateX(-50%) translateY(0);\n        }\n        #settings-hero .sect-style-left-text .sect-style-left-title{\n          margin:0;\n          max-width: 360px;\n          font-size: clamp(28px, 2.2vw, 44px);\n          line-height: 1.05;\n          letter-spacing: -0.02em;\n          font-weight: 600;\n          color:#fff;\n        }\n        #settings-hero .sect-style-left-text .sect-style-left-subtitle{\n          margin: 14px 0 0 0;\n          max-width: 360px;\n          font-size: 14px;\n          line-height: 1.65;\n          opacity: .86;\n          color:#fff;\n        }<\/p>\n<p>        #settings-hero .stage{ padding-left: 420px; padding-right: 20px; }\n        #settings-hero.settings-interacted .stage{ padding-left: 0; padding-right: 0; }\n      }<\/p>\n<p>      @media (max-width: 991px){\n        #settings-hero .sect-style-left-text{\n          top: calc(var(--nav-h, 72px) + env(safe-area-inset-top) + 10px);\n          text-align:left;\n          opacity:1;\n          transform:translateX(-50%);\n        }\n        #settings-hero .sect-style-left-text .sect-style-left-title{\n          margin:0;\n          max-width: 520px;\n          font-size: clamp(18px, 5.2vw, 26px);\n          line-height: 1.15;\n          font-weight: 600;\n          color:#fff;\n        }\n        #settings-hero .sect-style-left-text .sect-style-left-subtitle{\n          margin: 10px 0 0 0;\n          max-width: 520px;\n          font-size: 13px;\n          line-height: 1.55;\n          opacity:.88;\n          color:#fff;\n        }\n      }<\/p>\n<p>      @media (max-width:768px){\n        #settings-hero{ --nav-h: 72px; }<\/p>\n<p>        #settings-hero .bottom-ui{ bottom:24px; }\n        #settings-hero .img{ max-height:60vh; }\n        #settings-hero .slot{\n          width:220px;\n          flex:0 0 220px;\n          margin-left:calc(-220px * var(--overlap-mobile));\n        }\n        #settings-hero{ --swatch-size: 25px; --swatch-gap: 12px; }<\/p>\n<p>        #settings-hero .slider-head{\n          flex-direction:column;\n          align-items:flex-start;\n          gap:12px;\n          top: calc(var(--nav-h) + env(safe-area-inset-top) + 12px);\n          padding:0 16px;\n        }\n        #settings-hero .slider-head .nav-arrows{ align-self:flex-end; }<\/p>\n<p>        #settings-hero section.hero-settings{\n          padding-top: calc(var(--nav-h) + 96px);\n          padding-bottom: 150px;\n        }\n        #settings-hero .stage{\n          min-height: calc(100svh - (var(--nav-h) + 96px) - 150px);\n          padding-top: 6px;\n          padding-bottom: 10px;\n        }\n        #settings-hero .bottom-ui{\n          bottom: calc(22px + env(safe-area-inset-bottom));\n          gap: 12px;\n        }\n        #settings-hero .caption{\n          font-size: 18px;\n          letter-spacing: .14em;\n        }\n        #settings-hero .metal-switch{ margin-top: 6px; margin-bottom: 6px; }\n        #settings-hero .dots{ margin-top: 2px; }\n      }<\/p>\n<p>      @media (max-width: 991px){\n        #settings-hero .slide-head-text{\n          display: none !important;\n        }\n      }<\/p>\n<p>      @media (max-width:991px){\n        #settings-hero .btn{\n          width:40px;\n          height:40px;\n          background:rgba(255,255,255,.92);\n          backdrop-filter:blur(6px);\n          -webkit-backdrop-filter:blur(6px);\n        }\n        #settings-hero .btn svg{width:20px;height:20px;}\n      }<\/p>\n<p>      #settings-hero .px-chev{ bottom: 14px; }\n    <\/style>\n<section class=\"hero-settings\">\n<div class=\"slider-head\">\n<div class=\"slide-head-text\">\n<h2 class=\"heading--2 text-left mobtext-left mobm-b0 fontMedium\" style=\"margin-bottom:0; font-weight:600; color:#fff !important;\">\n            Choose the Style of Your Engagement Ring<br \/>\n          <\/h2>\n<\/p><\/div>\n<div class=\"nav-arrows\">\n          <button class=\"btn prev\" aria-label=\"Slide precedente\" aria-disabled=\"true\"><br \/>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M15 6l-6 6 6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg><br \/>\n          <\/button><\/p>\n<p>          <button class=\"btn next\" aria-label=\"Slide successiva\" aria-disabled=\"false\"><br \/>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg><br \/>\n          <\/button>\n        <\/div>\n<\/p><\/div>\n<div class=\"sect-style-left-text\">\n<h2 class=\"sect-style-left-title\">Choose the Style of Your Engagement Ring<\/h2>\n<p class=\"sect-style-left-subtitle\">\n<\/p><\/div>\n<div class=\"stage\">\n<div id=\"track\" class=\"track\"><\/div>\n<\/p><\/div>\n<div class=\"bottom-ui\">\n<p class=\"caption\" id=\"caption\">settings<\/p>\n<div class=\"metal-switch\" id=\"metalSwitch\"><\/div>\n<div class=\"dots\"><\/div>\n<\/p><\/div>\n<p>      <button class=\"px-chev\" type=\"button\" data-px-next=\"diamanti\" data-tip=\"View Diamond Shapes\" aria-label=\"View Diamond Shapes\"><br \/>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M6 9l6 6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg><br \/>\n      <\/button><br \/>\n    <\/section>\n<p>    <script>\n      (function(){\n        const root     = document.getElementById('settings-hero');\n        root.classList.add('init-hide');<\/p>\n<p>        const stage    = root.querySelector('.stage');\n        const track    = root.querySelector('#track');\n        const prevBtn  = root.querySelector('.btn.prev');\n        const nextBtn  = root.querySelector('.btn.next');\n        const caption  = root.querySelector('#caption');\n        const dotsWrap = root.querySelector('.dots');\n        const metalWrap= root.querySelector('#metalSwitch');<\/p>\n<p>        let interacted = false;\n        let leftFirst  = false;<\/p>\n<p>        function isDesktopIntro(){\n          return window.matchMedia('(min-width: 992px)').matches;\n        }<\/p>\n<p>        function safeRender(){\n          requestAnimationFrame(()=>{ try{ renderAnimated(); }catch(e){} });\n        }<\/p>\n<p>        function hideIntro(){\n          if (!interacted) interacted = true;\n          root.classList.add('settings-interacted');\n          root.classList.remove('settings-grabbing');\n        }<\/p>\n<p>        function showIntro(){\n          root.classList.remove('settings-interacted');\n          root.classList.remove('settings-grabbing');\n        }<\/p>\n<p>        function updateIntroBySlide(){\n          if (!isDesktopIntro()) return;<\/p>\n<p>          if (active !== 0) leftFirst = true;<\/p>\n<p>          if (!interacted){\n            root.classList.remove('settings-interacted');\n            root.classList.remove('settings-grabbing');\n            return;\n          }<\/p>\n<p>          if (active === 0 && leftFirst){\n            showIntro();\n          } else {\n            hideIntro();\n          }\n        }<\/p>\n<p>        function hideOnRealDragStart(){\n          if (!isDesktopIntro()) return;\n          root.classList.add('settings-grabbing');\n          if (!interacted) interacted = true;\n        }<\/p>\n<p>        function markInteracted(){\n          hideIntro();\n          safeRender();\n        }<\/p>\n<p>        const METALS = [\n          { key:'wg', label:'Oro bianco', fill:'linear-gradient(135deg,#f2f2f2 0%,#cfcfcf 45%,#f7f7f7 100%)' },\n          { key:'yg', label:'Oro giallo', fill:'linear-gradient(135deg,#f6e7b3 0%,#d9bd63 45%,#fff1c6 100%)' },\n          { key:'rg', label:'Oro rosa',   fill:'linear-gradient(135deg,#f4d2c5 0%,#d9a089 45%,#f8dfd6 100%)' }\n        ];<\/p>\n<p>        const slides = [\n          { label:\"Solitaire\", scale:1.00, defaultMetal:\"wg\", metals:{\n            wg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/SLWG.png\",\n            yg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/SLYG.png\",\n            rg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/SLRG.png\"\n          }},\n          { label:\"Halo\", scale:0.90, defaultMetal:\"wg\", metals:{\n            wg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/HWG.png\",\n            yg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/HYG.png\",\n            rg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/HRG.png\"\n          }},\n          { label:\"Hidden Halo\", scale:0.98, defaultMetal:\"wg\", metals:{\n            wg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/HHWG.png\",\n            yg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/HHYG.png\",\n            rg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/HHRG.png\"\n          }},\n          { label:\"Pav\u00e9\", scale:0.85, defaultMetal:\"wg\", metals:{\n            wg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/PVWG.png\",\n            yg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/PVYG.png\",\n            rg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/PVRG.png\"\n          }},\n          { label:\"Three Stones\", scale:0.92, defaultMetal:\"wg\", metals:{\n            wg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/TRIWG.png\",\n            yg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/TRIYG.png\",\n            rg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/TRIRG.png\"\n          }},\n          { label:\"Hidden Halo Pav\u00e9\", scale:0.95, defaultMetal:\"wg\", metals:{\n            wg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/HPWG.png\",\n            yg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/HPYG.png\",\n            rg:\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/HPRG.png\"\n          }}\n        ];<\/p>\n<p>        const BASE_URL = \"https:\/\/www.bongioielli.com\/\";<\/p>\n<p>        const METAL_PARAM = {\n          wg: \"18k-white-gold\",\n          yg: \"18k-yellow-gold\",\n          rg: \"18k-rose-gold\"\n        };<\/p>\n<p>        const STYLE_PATHS = {\n          solitaire: \"en\/diamond-engagement-rings\/solitaire\/\/\",\n          halo: \"en\/diamond-engagement-rings\/halo\/\/\",\n          hiddenHalo: \"en\/diamond-engagement-rings\/hidden-halo-rings\/\/\",\n          pave: \"en\/diamond-engagement-rings\/pave\/\/\",\n          threeStones: \"en\/diamond-engagement-rings\/three-stone\/\/\",\n          hiddenHaloPave: \"en\/diamond-engagement-rings\/\/?ring_style=pave%2Chidden-halo-rings\"\n        };<\/p>\n<p>        const SLIDE_TO_STYLE = [\n          \"solitaire\",\n          \"halo\",\n          \"hiddenHalo\",\n          \"pave\",\n          \"threeStones\",\n          \"hiddenHaloPave\"\n        ];<\/p>\n<p>        function buildStyleUrl(styleKey, metalKey){\n          const metalVal = METAL_PARAM[metalKey] || METAL_PARAM.wg;\n          const path = STYLE_PATHS[styleKey] || STYLE_PATHS.solitaire;<\/p>\n<p>          if (path.includes(\"?\")) {\n            return BASE_URL + path + \"&cat_filter_metal=\" + metalVal;\n          }\n          return BASE_URL + path + \"?cat_filter_metal=\" + metalVal;\n        }<\/p>\n<p>        function goToActiveStyle(){\n          const styleKey = SLIDE_TO_STYLE[active] || \"solitaire\";\n          const metalKey = selectedMetalGlobal || \"wg\";\n          window.location.href = buildStyleUrl(styleKey, metalKey);\n        }<\/p>\n<p>        const __prefetched = new Set();<\/p>\n<p>        function prefetchUrl(url){\n          if (!url || __prefetched.has(url)) return;\n          __prefetched.add(url);<\/p>\n<p>          try{\n            const l = document.createElement('link');\n            l.rel = 'prefetch';\n            l.as  = 'document';\n            l.href = url;\n            document.head.appendChild(l);\n          }catch(e){}<\/p>\n<p>          try{\n            fetch(url, { credentials:'include', cache:'force-cache' }).catch(()=>{});\n          }catch(e){}\n        }<\/p>\n<p>        function prefetchActiveStyle(){\n          const styleKey = SLIDE_TO_STYLE[active] || \"solitaire\";\n          const metalKey = selectedMetalGlobal || \"wg\";\n          prefetchUrl(buildStyleUrl(styleKey, metalKey));\n        }<\/p>\n<p>        let selectedMetalGlobal = (slides[0]?.defaultMetal) || 'wg';<\/p>\n<p>        function load(img, src){ img.src = src; }<\/p>\n<p>        function makeSlot(cls, child){\n          const d = document.createElement('div');\n          d.className = 'slot ' + (cls || '');\n          if (child) d.appendChild(child);\n          track.appendChild(d);\n          return d;\n        }<\/p>\n<p>        makeSlot('ghost');<\/p>\n<p>        slides.forEach((s)=>{\n          const img = document.createElement('img');\n          img.className = 'img';\n          img.draggable = false;\n          load(img, s.metals[selectedMetalGlobal]);\n          makeSlot('', img);\n        });<\/p>\n<p>        makeSlot('ghost');<\/p>\n<p>        const slotNodes = Array.from(track.querySelectorAll('.slot'));<\/p>\n<p>        const dots = slides.map((s,i)=>{\n          const d = document.createElement('button');\n          d.type = 'button';\n          d.className = 'dot';\n          d.addEventListener('click', (e)=>{\n            e.stopPropagation();\n            markInteracted();\n            go(i);\n          });\n          dotsWrap.appendChild(d);\n          return d;\n        });<\/p>\n<p>        const metalBtns = METALS.map(m=>{\n          const b = document.createElement('button');\n          b.type = 'button';\n          b.className = 'metal';\n          b.setAttribute('aria-label', m.label);\n          b.style.setProperty('--fill', m.fill);<\/p>\n<p>          b.addEventListener('click', (e)=>{\n            e.stopPropagation();\n            applyMetalToAllSlides(m.key, true);\n          });<\/p>\n<p>          metalWrap.appendChild(b);\n          return { key: m.key, el: b };\n        });<\/p>\n<p>        let active = 0;\n        let SLOT_W = 360;\n        let STAGE_W= stage.getBoundingClientRect().width || window.innerWidth;\n        let currentOffset = 0;\n        let hasEntered = false;<\/p>\n<p>        const DESKTOP = { OVERLAP:.06, SCALE_ACTIVE:1.15, SCALE_NEAR:0.60, SCALE_FAR:0.45, OPACITY_REST:0.60, NUDGE:220 };\n        const MOBILE  = { OVERLAP:.25, SCALE_ACTIVE:1.00, SCALE_NEAR:0.30, SCALE_FAR:0.22, OPACITY_REST:0.55, NUDGE:80 };<\/p>\n<p>        const mqMobile = window.matchMedia('(max-width: 768px)');\n        let P = mqMobile.matches ? MOBILE : DESKTOP;<\/p>\n<p>        function updateParams(){ P = mqMobile.matches ? MOBILE : DESKTOP; }<\/p>\n<p>        function measure(){\n          const sample = slotNodes[1];\n          if (sample){\n            const w = sample.getBoundingClientRect().width;\n            if (w && !isNaN(w)) SLOT_W = w;\n          }\n          const sw = stage.getBoundingClientRect().width;\n          if (sw && !isNaN(sw)) STAGE_W = sw;\n          if (!STAGE_W) STAGE_W = window.innerWidth || 1200;\n        }<\/p>\n<p>        function computeFinalOffset(index){\n          const idx = (typeof index === 'number') ? index : active;\n          const c = idx + 1;\n          const center = ((c + 0.5) * SLOT_W) - (c * P.OVERLAP * SLOT_W);\n          return (STAGE_W \/ 2) - center;\n        }<\/p>\n<p>        function syncAria(){\n          prevBtn.setAttribute('aria-disabled', active === 0);\n          nextBtn.setAttribute('aria-disabled', active === slides.length - 1);\n        }<\/p>\n<p>        function syncMetalUI(){\n          const m = selectedMetalGlobal;\n          metalBtns.forEach(x => x.el.classList.toggle('active', x.key === m));\n        }<\/p>\n<p>        function ensureActiveSlideHasRightMetalImage(){\n          const metalKey = selectedMetalGlobal;\n          const slot = slotNodes[active + 1];\n          const img  = slot?.querySelector('img');\n          const src  = slides[active]?.metals?.[metalKey];\n          if (img && src && img.src !== src) img.src = src;\n        }<\/p>\n<p>        function applyMetalToAllSlides(metalKey, withFade = true){\n          selectedMetalGlobal = metalKey;\n          syncMetalUI();<\/p>\n<p>          prefetchActiveStyle();<\/p>\n<p>          slides.forEach((s, idx)=>{\n            const slot = slotNodes[idx + 1];\n            const img  = slot?.querySelector('img');\n            const src  = s?.metals?.[metalKey];\n            if(!img || !src) return;<\/p>\n<p>            if(!withFade){\n              img.src = src;\n              return;\n            }<\/p>\n<p>            img.style.opacity = 0;\n            setTimeout(()=>{\n              img.src = src;\n              img.onload = () => { img.style.opacity = 1; };\n              setTimeout(()=>{ img.style.opacity = 1; }, 140);\n            }, 120);\n          });\n        }<\/p>\n<p>        function applyFinalTransforms(offset){\n          currentOffset = offset;\n          track.style.transform = `translate3d(${offset}px,0,0)`;<\/p>\n<p>          slotNodes.forEach((slot, i)=>{\n            const img = slot.querySelector('img');\n            if (!img) return;\n            const real = i - 1;\n            const dist = Math.abs(real - active);\n            const slide = slides[real];\n            if (!slide){ img.style.opacity = 0; return; }<\/p>\n<p>            const baseScale = slide.scale || 1;\n            const scale = (real === active)\n              ? P.SCALE_ACTIVE * baseScale\n              : (dist >= 2 ? P.SCALE_FAR : P.SCALE_NEAR);<\/p>\n<p>            const nudge = (real === active)\n              ? 0\n              : Math.sign(real - active) * P.NUDGE * dist;<\/p>\n<p>            const op   = (real === active) ? 1 : P.OPACITY_REST;\n            const blur = (real === active) ? 0 : 4;<\/p>\n<p>            img.style.transform = `translate3d(${nudge}px,0,0) scale(${scale})`;\n            img.style.opacity   = op;\n            img.style.filter    = blur ? `blur(${blur}px)` : 'none';\n          });<\/p>\n<p>          caption.textContent = slides[active].label;\n          dots.forEach((d,i)=>d.classList.toggle('active', i===active));<\/p>\n<p>          syncMetalUI();\n          syncAria();\n          updateIntroBySlide();\n        }<\/p>\n<p>        function renderAnimated(){\n          measure();\n          const finalOffset = computeFinalOffset();\n          track.style.transition = 'transform 0.9s cubic-bezier(.41,0,.52,1)';\n          slotNodes.forEach(slot=>{\n            const img = slot.querySelector('img');\n            if (!img) return;\n            img.style.transition =\n              'transform 0.9s cubic-bezier(.19,1,.22,1),'+\n              'opacity 0.35s ease, filter 0.6s ease';\n          });<\/p>\n<p>          ensureActiveSlideHasRightMetalImage();\n          applyFinalTransforms(finalOffset);\n        }<\/p>\n<p>        function go(n){\n          active = Math.max(0, Math.min(slides.length-1, n));\n          ensureActiveSlideHasRightMetalImage();\n          syncMetalUI();<\/p>\n<p>          prefetchActiveStyle();<\/p>\n<p>          if (hasEntered){\n            renderAnimated();\n          } else {\n            measure();\n            const offset = computeFinalOffset();\n            track.style.transition = 'none';\n            slotNodes.forEach(slot=>{\n              const img = slot.querySelector('img');\n              if (!img) return;\n              img.style.transition = 'none';\n            });\n            applyFinalTransforms(offset);\n          }\n        }<\/p>\n<p>        function centerZoomKick(done){\n          const idx  = active + 1;\n          const slot = slotNodes[idx];\n          if (!slot){ done && done(); return; }\n          const img  = slot.querySelector('img');\n          if (!img){ done && done(); return; }<\/p>\n<p>          const slide    = slides[active];\n          const baseScale= slide.scale || 1;\n          const base     = P.SCALE_ACTIVE * baseScale;\n          const zoom     = base * 1.10;<\/p>\n<p>          img.style.transition =\n            'transform 0.55s cubic-bezier(.19,1,.22,1),'+\n            'opacity 0.35s ease, filter 0.4s ease';\n          img.style.transform = `translate3d(0,0,0) scale(${zoom})`;<\/p>\n<p>          setTimeout(()=>{ done && done(); }, 600);\n        }<\/p>\n<p>        function entranceOnce(){\n          updateParams();\n          measure();<\/p>\n<p>          const finalOffset = computeFinalOffset();\n          const startOffset = finalOffset - STAGE_W * 0.8;\n          track.style.transition = 'none';\n          track.style.transform  = `translate3d(${startOffset}px,0,0)`;<\/p>\n<p>          const total   = slides.length;\n          const spacing = SLOT_W * 0.7;<\/p>\n<p>          slotNodes.forEach((slot, i)=>{\n            const img  = slot.querySelector('img');\n            const real = i - 1;\n            if (!img || real < 0 || real >= slides.length){\n              if (img) img.style.opacity = 0;\n              return;\n            }<\/p>\n<p>            const idx = real;\n            const x   = (idx - (total - 1)\/2) * spacing;\n            const isActive = (real === active);<\/p>\n<p>            const startScale   = isActive ? 0.26 : 0.45;\n            const startBlur    = isActive ? 0.3  : 0.8;\n            const startOpacity = isActive ? 1    : 0.9;<\/p>\n<p>            img.style.transition = 'none';\n            img.style.transform  = `translate3d(${x}px,-20px,0) scale(${startScale})`;\n            img.style.opacity    = startOpacity;\n            img.style.filter     = `blur(${startBlur}px)`;\n          });<\/p>\n<p>          root.classList.remove('init-hide');<\/p>\n<p>          requestAnimationFrame(()=>{\n            const DURATA = 2.8;<\/p>\n<p>            slotNodes.forEach(slot=>{\n              const img = slot.querySelector('img');\n              if (!img) return;\n              img.style.transition =\n                `transform ${DURATA}s cubic-bezier(.23,1,.32,1),`+\n                `opacity  ${DURATA}s ease-out,`+\n                `filter   ${DURATA}s ease-out`;\n            });<\/p>\n<p>            track.style.transition =\n              `transform ${DURATA}s cubic-bezier(.23,1,.32,1)`;<\/p>\n<p>            ensureActiveSlideHasRightMetalImage();\n            applyFinalTransforms(finalOffset);<\/p>\n<p>            const FRAZIONE_ZOOM = 0.7;<\/p>\n<p>            setTimeout(()=>{\n              centerZoomKick(()=>{\n                hasEntered = true;<\/p>\n<p>                root.classList.add('intro-ready');\n                updateIntroBySlide();<\/p>\n<p>                slotNodes.forEach(slot=>{\n                  const img = slot.querySelector('img');\n                  if (!img) return;\n                  img.style.transition = '';\n                });\n                track.style.transition = '';\n              });\n            }, DURATA*1000*FRAZIONE_ZOOM);\n          });\n        }<\/p>\n<p>        let dragging   = false;\n        let maybeDrag  = false;\n        let startX     = 0;\n        let startY     = 0;\n        let dx         = 0;\n        let dragStartActive = 0;\n        const DRAG_THRESHOLD = 8;<\/p>\n<p>        let didDrag = false;<\/p>\n<p>        stage.addEventListener('pointerdown', e => {\n          maybeDrag = true;\n          dragging  = false;\n          startX    = e.clientX;\n          startY    = e.clientY;\n          dx        = 0;\n          dragStartActive = active;\n          didDrag = false;\n        });<\/p>\n<p>        window.addEventListener('pointermove', e => {\n          if (!maybeDrag && !dragging) return;<\/p>\n<p>          const moveX = e.clientX - startX;\n          const moveY = e.clientY - startY;<\/p>\n<p>          if (!dragging) {\n            if (Math.abs(moveY) > Math.abs(moveX)) {\n              maybeDrag = false;\n              dragging  = false;\n              return;\n            }\n            if (Math.abs(moveX) < DRAG_THRESHOLD) return;\n\n            hideOnRealDragStart();\n\n            dragging  = true;\n            maybeDrag = false;\n            stage.classList.add('dragging');\n            track.style.transition = 'none';\n            startX = e.clientX;\n            dx     = 0;\n            didDrag = true;\n          }\n\n          dx = e.clientX - startX;\n          track.style.transform = `translate3d(${currentOffset + dx}px,0,0)`;\n        });\n\n        function endDrag(){\n          if (!dragging) {\n            maybeDrag = false;\n            return;\n          }\n\n          dragging  = false;\n          maybeDrag = false;\n          stage.classList.remove('dragging');\n\n          updateParams();\n          const STEP  = SLOT_W * (1 - P.OVERLAP);\n          const moved = -dx \/ STEP;\n          let delta   = Math.round(moved);\n\n          if (Math.abs(moved) < 0.3){\n            renderAnimated();\n            return;\n          }\n          if (delta === 0){\n            delta = (moved > 0 ? 1 : -1);\n          }<\/p>\n<p>          active = Math.max(0, Math.min(slides.length - 1, dragStartActive + delta));<\/p>\n<p>          markInteracted();<\/p>\n<p>          ensureActiveSlideHasRightMetalImage();\n          syncMetalUI();\n          renderAnimated();<\/p>\n<p>          prefetchActiveStyle();\n        }<\/p>\n<p>        window.addEventListener('pointerup', endDrag);\n        window.addEventListener('pointercancel', endDrag);<\/p>\n<p>        stage.addEventListener('click', (e)=>{\n          if (didDrag) { didDrag = false; return; }<\/p>\n<p>          if (e.target.closest('.slider-head')) return;\n          if (e.target.closest('.bottom-ui')) return;\n          if (e.target.closest('.px-chev')) return;<\/p>\n<p>          goToActiveStyle();\n        });<\/p>\n<p>        prevBtn.addEventListener('click',(e)=>{\n          e.stopPropagation();\n          markInteracted();\n          go(active-1);\n        });\n        nextBtn.addEventListener('click',(e)=>{\n          e.stopPropagation();\n          markInteracted();\n          go(active+1);\n        });<\/p>\n<p>        window.addEventListener('resize',()=>{\n          updateParams();\n          measure();\n          if (hasEntered) renderAnimated();\n        });<\/p>\n<p>        mqMobile.addEventListener('change',()=>{\n          updateParams();\n          measure();\n          if (hasEntered) renderAnimated();\n        });<\/p>\n<p>        syncMetalUI();<\/p>\n<p>        prefetchActiveStyle();<\/p>\n<p>        let started = false;\n        function startMontature(){\n          if(started) return;\n          started = true;\n          entranceOnce();\n        }\n        window.addEventListener('byor:montatureEnter', startMontature);<\/p>\n<p>        setTimeout(()=>{\n          const montLayer = document.querySelector('#engagement-parallax .px-montature');\n          if(!montLayer) return;\n          const op = parseFloat(getComputedStyle(montLayer).opacity || '0');\n          if(op > 0.35) startMontature();\n        }, 350);<\/p>\n<p>      })();\n    <\/script>\n  <\/div>\n<\/div>\n<div class=\"px-layer px-diamanti\">\n<section class=\"dr-section\" id=\"diamond-rev\" style=\"margin-bottom:0;\">\n    <script type=\"application\/json\" id=\"diamond-rev-manual-urls\">\n    {\n      \"round\":   \"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/11\/round.webp\",\n      \"oval\":    \"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/11\/oval.webp\",\n      \"cushion\": \"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/11\/cushion.webp\",\n      \"princess\":\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/11\/princess.webp\",\n      \"emerald\": \"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/11\/emerald.webp\",\n      \"radiant\": \"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/11\/radiant.webp\",\n      \"pear\":    \"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/11\/pear.webp\",\n      \"marquise\":\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/11\/marquise.webp\",\n      \"asscher\": \"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/11\/asscher.webp\",\n      \"heart\":   \"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/11\/heart.webp\"\n    }\n    <\/script><\/p>\n<div class=\"hero-head\" id=\"diamond-head\">\n<h1>Choose the Diamond Shape<\/h1>\n<\/p><\/div>\n<div class=\"stage-wrap\">\n<div class=\"stage\" id=\"stage\">\n<div class=\"diamond-cta-center\" id=\"diamondCtaCenter\" aria-label=\"Select the Nature of Your Diamond\">\n<div class=\"diamond-cta-inner\">\n<div class=\"diamond-cta-title\">Select the Nature of Your Diamond:<\/div>\n<div class=\"diamond-cta-row\">\n              <a class=\"cta cta-pill\" href=\"https:\/\/www.bongioielli.com\/en\/loose-diamonds\/\"><br \/>\n                <span class=\"cta-ico\" aria-hidden=\"true\"><br \/>\n                  <span class=\"icon\"><br \/>\n  <svg viewBox=\"0 0 49 49\" width=\"49\" height=\"49\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\">\n    <path d=\"M25.983 24.5301C26.085 24.7867 26.3757 24.912 26.6323 24.81C26.8889 24.708 27.0142 24.4173 26.9122 24.1607L25.983 24.5301ZM24.5 19.7131H24V19.8088L24.0354 19.8978L24.5 19.7131ZM26.9122 24.1607C26.4453 22.9861 26.1874 22.4047 25.9308 21.8265C25.6772 21.2549 25.425 20.6864 24.9646 19.5284L24.0354 19.8978C24.5023 21.0724 24.7602 21.6538 25.0168 22.232C25.2704 22.8036 25.5226 23.372 25.983 24.5301L26.9122 24.1607ZM25 19.7131C25 17.3572 26.91 15.4473 29.2658 15.4473V14.4473C26.3577 14.4473 24 16.805 24 19.7131H25ZM29.2658 15.4473H34.0386V14.4473H29.2658V15.4473Z\" fill=\"currentColor\"><\/path>\n<path d=\"M24.5 38C21.83 38 19.2199 37.2082 16.9998 35.7248C14.7797 34.2414 13.0494 32.133 12.0276 29.6662C11.0058 27.1994 10.7385 24.485 11.2594 21.8663C11.7803 19.2475 13.066 16.8421 14.9541 14.9541C16.8421 13.066 19.2475 11.7803 21.8663 11.2594C24.485 10.7385 27.1994 11.0058 29.6662 12.0276C32.133 13.0494 34.2414 14.7797 35.7248 16.9998C37.2082 19.2199 38 21.83 38 24.5\"\n          stroke=\"currentColor\" stroke-linecap=\"round\" fill=\"none\"><\/path>\n<path d=\"M11.1831 23.4982C11.6013 24.3773 12.2242 24.6743 13.0136 24.645C14.0429 24.6068 14.6526 23.5467 14.8624 23.1818C15.1475 22.6863 15.1447 22.3984 15.4779 21.0282C15.6644 20.2613 15.8379 19.6414 15.9548 19.2397C16.8954 19.0807 17.836 18.9218 18.7766 18.7628C19.8681 18.3723 20.6771 17.6257 20.6843 16.8551C20.6925 15.9855 19.6769 15.3763 18.6972 14.7883C17.7897 14.2438 16.949 13.9958 16.4108 13.8743\"\n          stroke=\"currentColor\" stroke-miterlimit=\"10\" fill=\"none\"><\/path>\n<path d=\"M12.8403 31.0123C12.9249 30.5361 13.1116 29.8018 13.5706 29.0168C13.9339 28.3957 14.3533 27.6754 14.8424 27.7052C15.4122 27.7399 15.7774 28.7744 16.0827 29.6388C16.4145 30.5785 16.5296 31.4091 16.5712 31.9976C16.5831 33.0886 16.5952 34.1799 16.6071 35.2709\"\n          stroke=\"currentColor\" stroke-miterlimit=\"10\" fill=\"none\"><\/path>\n<path d=\"M21.3711 31.6668L26.3115 26.7114H36.7596L41.7 31.6668L31.5306 40.7114L21.3711 31.6668Z\"\n          stroke=\"currentColor\" stroke-miterlimit=\"10\" fill=\"none\"><\/path>\n<path d=\"M29.6836 34.6301L26.3887 31.6976L28.3073 29.7737\"\n          stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" fill=\"none\"><\/path>\n<path d=\"M31.5312 40.5869L36.0564 31.7108L32.5867 26.7266\"\n          stroke=\"currentColor\" stroke-miterlimit=\"10\" fill=\"none\"><\/path>\n  <\/svg><br \/>\n<\/span><\/p>\n<p>                <\/span><br \/>\n                NATURAL<br \/>\n              <\/a><\/p>\n<p>              <a class=\"cta cta-pill\" href=\"https:\/\/www.bongioielli.com\/en\/lab-diamonds\/\"><br \/>\n                <span class=\"cta-ico\" aria-hidden=\"true\"><br \/>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"49\" height=\"49\" viewBox=\"0 0 49 49\" fill=\"none\">\n                    <path d=\"M21.3711 31.6668L26.3115 26.7114H36.7596L41.7 31.6668L31.5306 40.7114L21.3711 31.6668Z\" stroke=\"currentColor\" stroke-miterlimit=\"10\"\/>\n                    <path d=\"M29.6836 34.6301L26.3887 31.6976L28.3073 29.7737\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\"\/>\n                    <path d=\"M31.5312 40.5869L36.0564 31.7108L32.5867 26.7266\" stroke=\"currentColor\" stroke-miterlimit=\"10\"\/>\n                    <path d=\"M19.8633 11.6667H29.2485\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\"\/>\n                    <path d=\"M27.3716 18.563V11.6667\" stroke=\"currentColor\" stroke-miterlimit=\"10\"\/>\n                    <path d=\"M21.7402 11.6667V18.563\" stroke=\"currentColor\" stroke-miterlimit=\"10\"\/>\n                    <path d=\"M21.74 18.563L14.1189 33.805C13.3084 35.4261 14.4872 37.3334 16.2997 37.3334H23.7698M27.3711 18.563L30.1811 24.3413\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\"\/>\n                    <path d=\"M16.8042 27.4483H21.7861\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\"\/>\n                  <\/svg><br \/>\n                <\/span><br \/>\n                LAB GROWN<br \/>\n              <\/a>\n            <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"infobar\">\n      <button class=\"btn\" id=\"prev\" aria-label=\"Indietro\">\u2039<\/button><\/p>\n<div class=\"info\">\n<div class=\"cut\" id=\"cutTitle\">\u2014<\/div>\n<div class=\"desc\" id=\"cutDesc\">\u2014<\/div>\n<\/p><\/div>\n<p>      <button class=\"btn\" id=\"next\" aria-label=\"Avanti\">\u203a<\/button>\n    <\/div>\n<div class=\"diamond-cta-mobile\" aria-label=\"Select the Nature of Your Diamond\">\n<div class=\"diamond-cta-title\">Select the Nature of Your Diamond:<\/div>\n<div class=\"diamond-cta-row\">\n        <a class=\"cta cta-pill\" href=\"https:\/\/www.bongioielli.com\/en\/loose-diamonds\/\/\"><br \/>\n          <span class=\"cta-ico\" aria-hidden=\"true\"><br \/>\n              <svg viewBox=\"0 0 49 49\" width=\"49\" height=\"49\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\">\n    <path d=\"M25.983 24.5301C26.085 24.7867 26.3757 24.912 26.6323 24.81C26.8889 24.708 27.0142 24.4173 26.9122 24.1607L25.983 24.5301ZM24.5 19.7131H24V19.8088L24.0354 19.8978L24.5 19.7131ZM26.9122 24.1607C26.4453 22.9861 26.1874 22.4047 25.9308 21.8265C25.6772 21.2549 25.425 20.6864 24.9646 19.5284L24.0354 19.8978C24.5023 21.0724 24.7602 21.6538 25.0168 22.232C25.2704 22.8036 25.5226 23.372 25.983 24.5301L26.9122 24.1607ZM25 19.7131C25 17.3572 26.91 15.4473 29.2658 15.4473V14.4473C26.3577 14.4473 24 16.805 24 19.7131H25ZM29.2658 15.4473H34.0386V14.4473H29.2658V15.4473Z\" fill=\"currentColor\"><\/path>\n<path d=\"M24.5 38C21.83 38 19.2199 37.2082 16.9998 35.7248C14.7797 34.2414 13.0494 32.133 12.0276 29.6662C11.0058 27.1994 10.7385 24.485 11.2594 21.8663C11.7803 19.2475 13.066 16.8421 14.9541 14.9541C16.8421 13.066 19.2475 11.7803 21.8663 11.2594C24.485 10.7385 27.1994 11.0058 29.6662 12.0276C32.133 13.0494 34.2414 14.7797 35.7248 16.9998C37.2082 19.2199 38 21.83 38 24.5\"\n          stroke=\"currentColor\" stroke-linecap=\"round\" fill=\"none\"><\/path>\n<path d=\"M11.1831 23.4982C11.6013 24.3773 12.2242 24.6743 13.0136 24.645C14.0429 24.6068 14.6526 23.5467 14.8624 23.1818C15.1475 22.6863 15.1447 22.3984 15.4779 21.0282C15.6644 20.2613 15.8379 19.6414 15.9548 19.2397C16.8954 19.0807 17.836 18.9218 18.7766 18.7628C19.8681 18.3723 20.6771 17.6257 20.6843 16.8551C20.6925 15.9855 19.6769 15.3763 18.6972 14.7883C17.7897 14.2438 16.949 13.9958 16.4108 13.8743\"\n          stroke=\"currentColor\" stroke-miterlimit=\"10\" fill=\"none\"><\/path>\n<path d=\"M12.8403 31.0123C12.9249 30.5361 13.1116 29.8018 13.5706 29.0168C13.9339 28.3957 14.3533 27.6754 14.8424 27.7052C15.4122 27.7399 15.7774 28.7744 16.0827 29.6388C16.4145 30.5785 16.5296 31.4091 16.5712 31.9976C16.5831 33.0886 16.5952 34.1799 16.6071 35.2709\"\n          stroke=\"currentColor\" stroke-miterlimit=\"10\" fill=\"none\"><\/path>\n<path d=\"M21.3711 31.6668L26.3115 26.7114H36.7596L41.7 31.6668L31.5306 40.7114L21.3711 31.6668Z\"\n          stroke=\"currentColor\" stroke-miterlimit=\"10\" fill=\"none\"><\/path>\n<path d=\"M29.6836 34.6301L26.3887 31.6976L28.3073 29.7737\"\n          stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" fill=\"none\"><\/path>\n<path d=\"M31.5312 40.5869L36.0564 31.7108L32.5867 26.7266\"\n          stroke=\"currentColor\" stroke-miterlimit=\"10\" fill=\"none\"><\/path>\n  <\/svg><br \/>\n          <\/span><br \/>\n          NATURAL<br \/>\n        <\/a><\/p>\n<p>        <a class=\"cta cta-pill\" href=\"https:\/\/www.bongioielli.com\/en\/lab-diamonds\/\"><br \/>\n          <span class=\"cta-ico\" aria-hidden=\"true\"><br \/>\n            <svg viewBox=\"0 0 49 49\" width=\"49\" height=\"49\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\">\n    <path d=\"M25.983 24.5301C26.085 24.7867 26.3757 24.912 26.6323 24.81C26.8889 24.708 27.0142 24.4173 26.9122 24.1607L25.983 24.5301ZM24.5 19.7131H24V19.8088L24.0354 19.8978L24.5 19.7131ZM26.9122 24.1607C26.4453 22.9861 26.1874 22.4047 25.9308 21.8265C25.6772 21.2549 25.425 20.6864 24.9646 19.5284L24.0354 19.8978C24.5023 21.0724 24.7602 21.6538 25.0168 22.232C25.2704 22.8036 25.5226 23.372 25.983 24.5301L26.9122 24.1607ZM25 19.7131C25 17.3572 26.91 15.4473 29.2658 15.4473V14.4473C26.3577 14.4473 24 16.805 24 19.7131H25ZM29.2658 15.4473H34.0386V14.4473H29.2658V15.4473Z\" fill=\"currentColor\"><\/path>\n<path d=\"M24.5 38C21.83 38 19.2199 37.2082 16.9998 35.7248C14.7797 34.2414 13.0494 32.133 12.0276 29.6662C11.0058 27.1994 10.7385 24.485 11.2594 21.8663C11.7803 19.2475 13.066 16.8421 14.9541 14.9541C16.8421 13.066 19.2475 11.7803 21.8663 11.2594C24.485 10.7385 27.1994 11.0058 29.6662 12.0276C32.133 13.0494 34.2414 14.7797 35.7248 16.9998C37.2082 19.2199 38 21.83 38 24.5\"\n          stroke=\"currentColor\" stroke-linecap=\"round\" fill=\"none\"><\/path>\n<path d=\"M11.1831 23.4982C11.6013 24.3773 12.2242 24.6743 13.0136 24.645C14.0429 24.6068 14.6526 23.5467 14.8624 23.1818C15.1475 22.6863 15.1447 22.3984 15.4779 21.0282C15.6644 20.2613 15.8379 19.6414 15.9548 19.2397C16.8954 19.0807 17.836 18.9218 18.7766 18.7628C19.8681 18.3723 20.6771 17.6257 20.6843 16.8551C20.6925 15.9855 19.6769 15.3763 18.6972 14.7883C17.7897 14.2438 16.949 13.9958 16.4108 13.8743\"\n          stroke=\"currentColor\" stroke-miterlimit=\"10\" fill=\"none\"><\/path>\n<path d=\"M12.8403 31.0123C12.9249 30.5361 13.1116 29.8018 13.5706 29.0168C13.9339 28.3957 14.3533 27.6754 14.8424 27.7052C15.4122 27.7399 15.7774 28.7744 16.0827 29.6388C16.4145 30.5785 16.5296 31.4091 16.5712 31.9976C16.5831 33.0886 16.5952 34.1799 16.6071 35.2709\"\n          stroke=\"currentColor\" stroke-miterlimit=\"10\" fill=\"none\"><\/path>\n<path d=\"M21.3711 31.6668L26.3115 26.7114H36.7596L41.7 31.6668L31.5306 40.7114L21.3711 31.6668Z\"\n          stroke=\"currentColor\" stroke-miterlimit=\"10\" fill=\"none\"><\/path>\n<path d=\"M29.6836 34.6301L26.3887 31.6976L28.3073 29.7737\"\n          stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" fill=\"none\"><\/path>\n<path d=\"M31.5312 40.5869L36.0564 31.7108L32.5867 26.7266\"\n          stroke=\"currentColor\" stroke-miterlimit=\"10\" fill=\"none\"><\/path>\n  <\/svg><br \/>\n          <\/span><br \/>\n          LAB GROWN<br \/>\n        <\/a>\n      <\/div>\n<\/p><\/div>\n<style>\n      :root{\n        --text:#eef7ff;\n        --stage-h: clamp(520px, 70vh, 720px);\n        --gap-top: clamp(18px, 4vh, 48px);\n        --item-max: clamp(70px, 20vmin, 138px);\n        --strip-y: 6px;<\/p>\n<p>        --s-min: 0.36; --s-max: 0.98; --boost: 0.18; --boost-pow: 1.6;\n        --rx: 34vw; --ry: 26vh;<\/p>\n<p>        --cta-gap: 14px;\n      }<\/p>\n<p>      @media (min-width:1024px){\n        :root{\n          --stage-h: clamp(520px, 62vh, 760px);\n          --item-max: clamp(72px, 11vmin, 140px);\n        }\n      }<\/p>\n<p>      @media (max-width:1023px){\n        :root{\n          --stage-h: clamp(320px, 45vh, 520px);\n        }\n      }\n      @media (max-width:768px){\n        :root{\n                  --strip-y: 70px;\n        --gap-top: 70px;\n        --stage-h: clamp(200px, 25vh, 420px);\n        }\n        .diamond-cta-title{\n        font-size:20px !important;\n        font-weight:600;\n      }\n      }<\/p>\n<p>      #diamond-rev *{ box-sizing:border-box }\n      #diamond-rev{\n        color:var(--text);\n        padding: 60px;\n        overflow-x:hidden !important;\n        overflow-y:visible !important;\n        padding-bottom: clamp(50px, 7vh, 110px) !important;\n        background: linear-gradient(rgb(0 0 0) 0%, #000000 0, #071b33 35%, #071b33 85%, #000 110%);\n      }<\/p>\n<p>      #diamond-rev .hero-head{\n        position:relative;\n        z-index:3;\n        padding:0 24px;\n        margin-top: clamp(16px, 2.2vh, 34px);\n      }\n      #diamond-rev .hero-head h2{\n        font-weight:600 !important;\n      }<\/p>\n<p>      #diamond-rev h1{\n        font-size:clamp(30px,2.6vw,34px);\n        margin:0 0 14px;\n        text-align:center;\n        color:#fff;\n      }<\/p>\n<p>      #diamond-rev .stage-wrap{\n        width:min(1600px,100%);\n        max-width:100vw;\n        margin:var(--gap-top) auto 0;\n        position:relative;\n        contain:content;\n        overflow-x: clip;\n        overflow-y: visible !important;\n        z-index:1;\n      }\n      #diamond-rev .stage{\n        height:var(--stage-h);\n        position:relative;\n        isolation:isolate;\n        user-select:none;\n        touch-action:pan-y;\n        will-change:transform;\n        overflow: visible !important;\n        z-index:1;\n      }<\/p>\n<p>      #diamond-rev .d-item{\n        position:absolute;\n        transform-origin:center;\n        filter:drop-shadow(0 6px 18px rgba(0,0,0,.25));\n        cursor:pointer;\n        will-change: transform, opacity;\n        transition: transform 1.25s cubic-bezier(.20,1,.25,1), opacity .55s ease-in-out;\n        backface-visibility:hidden;\n        transform-style:preserve-3d;\n      }\n      #diamond-rev .stage.no-anim .d-item{ transition:none !important; }\n      #diamond-rev .d-item img{\n        width:100%; height:100%;\n        object-fit:contain;\n        display:block;\n        pointer-events:none;\n        user-select:none;\n      }<\/p>\n<p>      #diamond-rev .infobar{\n        width:min(1100px,94vw);\n        margin:clamp(4px,2vh,18px) auto 0;\n        background:transparent;\n        padding:16px clamp(12px,3vw,28px);\n        display:grid;\n        grid-template-columns:max-content 1fr max-content;\n        align-items:center;\n        gap:clamp(2px,1.2vw,10px);\n        position:relative;\n        z-index:2;\n      }<\/p>\n<p>      #diamond-rev .infobar .btn{\n        width:60px;\n        height:60px;\n        border-radius:9999px;\n        display:grid;\n        place-items:center;\n        padding:0;\n        background:#fff;\n        border:0;\n        cursor:pointer;\n        transition:transform .18s ease, opacity .2s ease;\n        box-shadow:none;\n        font-size:0;\n        line-height:0;\n        position:relative;\n        color:#000;\n      }\n      #diamond-rev .infobar .btn:active{ transform:scale(.95); }\n      #diamond-rev .infobar .btn[aria-disabled=\"true\"]{ opacity:.80; pointer-events:none; }\n      #diamond-rev .infobar .btn::before{\n        content:\"\";\n        position:absolute;\n        left:50%;\n        top:50%;\n        width:12px;\n        height:12px;\n        border-right:2px solid #000;\n        border-bottom:2px solid #000;\n        transform:translate(-50%,-50%) rotate(135deg);\n      }\n      #diamond-rev .infobar #next::before{ transform:translate(-50%,-50%) rotate(-45deg); }<\/p>\n<p>      #diamond-rev .info{\n        display:flex;\n        flex-direction:column;\n        align-items:center;\n        gap:6px;\n        text-align:center;\n      }\n      #diamond-rev .cut{ font-weight:700; font-size:clamp(20px,2.6vmax,28px); color:#fff; }\n      #diamond-rev .desc{ font-size:14px; color:#fff; opacity:.9; }<\/p>\n<p>      .diamond-cta-title{\n        text-align:center;\n        color:#fff;\n        font-size:25px;\n        margin:0 0 12px;\n      }\n      .diamond-cta-row{\n        display:flex;\n        align-items:center;\n        justify-content:center;\n        gap:var(--cta-gap);\n        flex-wrap:wrap;\n      }<\/p>\n<p>      #diamond-rev .cta{\n        display:inline-flex;\n        align-items:center;\n        gap:10px;\n        color:#fff !important;\n        text-decoration:none !important;\n        font-weight:600;\n        letter-spacing:.06em;\n        text-transform:uppercase;\n        white-space:nowrap;\n      }<\/p>\n<p>      #diamond-rev .cta.cta-pill{\n        padding: 10px 14px;\n        font-size: 13px;\n        border-radius: 9999px;\n        background: rgba(255,255,255,.08);\n        border: 1px solid rgba(255,255,255,.14);\n        backdrop-filter: blur(10px);\n        -webkit-backdrop-filter: blur(10px);\n        box-shadow: 0 8px 22px rgba(0,0,0,.18);\n        transition: transform .18s ease, background .18s ease, border-color .18s ease;\n      }\n      #diamond-rev .cta.cta-pill:hover{\n        background: rgba(255,255,255,.11);\n        border-color: rgba(255,255,255,.20);\n      }<\/p>\n<p>      #diamond-rev .cta.cta-pill .cta-ico{\n            width: 34px;\n    height: 34px;\n    flex: 0 0 34px;\n    border-radius: 9999px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: 0;\n}\n      }\n      #diamond-rev .cta.cta-pill .cta-ico svg{\n        width:40px; height:40px;\n        display:block;\n        color:#fff;\n      }<\/p>\n<p>      #diamond-rev .cta.cta-pill::after,\n      #diamond-rev .cta.cta-pill::before{\n        content:none !important;\n        display:none !important;\n      }<\/p>\n<p>      .diamond-cta-center{\n        position:absolute;\n        left:50%;\n        top:50%;\n        transform:translate(-50%,-50%);\n        z-index:6;\n        pointer-events:auto;\n        text-align:center;\n        padding: 8px 10px;\n      }\n      .diamond-cta-inner{\n        display:flex;\n        flex-direction:column;\n        align-items:center;\n        justify-content:center;\n      }\n      @media (max-width:1023px){\n        .diamond-cta-center{ display:none !important; }\n      }<\/p>\n<p>      .diamond-cta-mobile{\n        width:min(1100px,94vw);\n        margin: 10px auto 0;\n        text-align:center;\n        position: relative;\n        z-index: 3;\n      }\n      @media (min-width:1024px){\n        .diamond-cta-mobile{ display:none !important; }\n      }<\/p>\n<p>      @media (max-width:1023px){\n        #diamond-rev{\n          padding: 88px 16px 18px !important;\n          display:flex !important;\n          flex-direction:column !important;\n          min-height:100svh !important;\n        }<\/p>\n<p>        #diamond-rev .stage-wrap{ flex:0 0 auto !important; }<\/p>\n<p>        #diamond-rev .infobar{\n          flex:0 0 auto !important;\n          margin-top: 8px !important;\n          margin-bottom: 0 !important;\n        }<\/p>\n<p>        #diamond-rev .diamond-cta-mobile{\n          margin-top: auto !important;\n          padding-top: 14px !important;\n          padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;\n        }\n      }<\/p>\n<p>      @media (max-width: 768px){\n        #diamond-rev .infobar{\n          width:100% !important;\n          max-width:100% !important;\n          display:block !important;\n          position:relative !important;\n          padding:14px 0 14px !important;\n          min-height:64px;\n        }\n        #diamond-rev .infobar .info{\n          margin:0 auto !important;\n          max-width: calc(100% - 124px) !important;\n        }\n        #diamond-rev #prev,\n        #diamond-rev #next{\n          position:absolute !important;\n          top:50% !important;\n          transform:translateY(-50%) !important;\n        }\n        #diamond-rev #prev{ left:max(0px, env(safe-area-inset-left)) !important; }\n        #diamond-rev #next{ right:max(0px, env(safe-area-inset-right)) !important; }<\/p>\n<p>        #diamond-rev .infobar .btn{\n          width:40px !important;\n          height:40px !important;\n          background:rgba(255,255,255,.92) !important;\n          backdrop-filter:blur(6px);\n          -webkit-backdrop-filter:blur(6px);\n        }\n        #diamond-rev .infobar .btn::before{ width:10px; height:10px; }\n      }\n    <\/style>\n<p>    <script>\n      (function(){\n        const root = document.getElementById('diamond-rev');\n        if(!root) return;<\/p>\n<p>        if (root.dataset.diamondsInit === \"1\") return;\n        root.dataset.diamondsInit = \"1\";<\/p>\n<p>        const stage   = root.querySelector('#stage');\n        const prevBtn = root.querySelector('#prev');\n        const nextBtn = root.querySelector('#next');\n        const cutTitle= root.querySelector('#cutTitle');\n        const cutDesc = root.querySelector('#cutDesc');\n        const headEl  = root.querySelector('#diamond-head');\n        const ctaCenter = root.querySelector('#diamondCtaCenter');<\/p>\n<p>        stage.querySelectorAll('.d-item').forEach(n => n.remove());<\/p>\n<p>        const CUTS = [\n          { key:'round',    name:'Round'},\n          { key:'oval',     name:'Oval'},\n          { key:'cushion',  name:'Cushion'},\n          { key:'princess', name:'Princess'},\n          { key:'emerald',  name:'Emerald'},\n          { key:'radiant',  name:'Radiant'},\n          { key:'pear',     name:'Pear'},\n          { key:'marquise', name:'Marquise'},\n          { key:'asscher',  name:'Asscher'},\n          { key:'heart',    name:'Heart'}\n        ];<\/p>\n<p>        let URLS = {};\n        try {\n          const conf = root.querySelector('#diamond-rev-manual-urls');\n          if (conf) URLS = JSON.parse(conf.textContent.trim());\n        } catch(e){}<\/p>\n<p>        const items = [];\n        CUTS.forEach((c)=>{\n          const url = (URLS && URLS[c.key]) ? String(URLS[c.key]) : '';\n          if(!url) return;\n          const el  = document.createElement('div');\n          el.className='d-item';\n          const img = document.createElement('img');\n          img.alt=c.name; img.loading='lazy'; img.src=url;\n          el.appendChild(img);\n          stage.appendChild(el);\n          items.push({el, ...c});\n        });<\/p>\n<p>        if(items.length===0){\n          stage.insertAdjacentHTML('beforeend','<\/p>\n<p style=\"text-align:center;color:#fff;opacity:.85;padding-top:80px\">Nessun diamante caricato. Controlla il JSON URL.<\/p>\n<p>');\n          cutTitle.textContent='\u2014';\n          cutDesc.textContent='\u2014';\n          return;\n        }<\/p>\n<p>        const clamp=(v,min,max)=> v<min?min:(v>max?max:v);\n        const modN=(x,n)=> ((x%n)+n)%n;\n        const cssVar=(n,f)=>{\n          const v=parseFloat(getComputedStyle(document.documentElement).getPropertyValue(n));\n          return Number.isFinite(v)?v:f;\n        };\n        const vw=p=> innerWidth  * (p\/100);\n        const vh=p=> innerHeight * (p\/100);<\/p>\n<p>        let focusPos = 0;\n        let camOffsetX = 0;\n        let camSquash  = 0;<\/p>\n<p>        let dragging=false, sx=0, sy=0, totalDx=0, totalDy=0, gestureMode=null;\n        let raf=0, animToken=0;<\/p>\n<p>        const DUR = () => (window.innerWidth < 1024 ? 520 : 820);\n\n        function resetCamera(){ camOffsetX = 0; camSquash = 0; }\n\n        function computeBounds(){\n          const headRect  = headEl.getBoundingClientRect();\n          const stageRect = stage.getBoundingClientRect();\n          const TOP_BOUND = (headRect.bottom - stageRect.top) + 18;\n          const BOTTOM_BOUND = stageRect.height - 14;\n          return {TOP_BOUND, BOTTOM_BOUND};\n        }\n\n        function positionCtaAtEllipseCenter(cx, cy){\n          if(!ctaCenter) return;\n          if(window.innerWidth < 1024) return;\n          ctaCenter.style.left = cx + 'px';\n          ctaCenter.style.top  = cy + 'px';\n          ctaCenter.style.transform = 'translate(-50%,-50%)';\n        }\n\n        function layoutOrbit(){\n          const r  = stage.getBoundingClientRect();\n          const cx = r.width * 0.5;\n\n          const {TOP_BOUND, BOTTOM_BOUND} = computeBounds();\n          const cy = (TOP_BOUND + BOTTOM_BOUND) \/ 2;\n\n          const ITEMMAX = cssVar('--item-max',140);\n          const S_MIN   = cssVar('--s-min',0.36);\n          const S_MAX   = cssVar('--s-max',0.98);\n          const BOOST   = cssVar('--boost',0.18);\n          const POW     = cssVar('--boost-pow',1.6);\n\n          const baseScaleAtT = t =>\n            (S_MIN + (S_MAX - S_MIN)*t) * (1 + BOOST*Math.pow(t,POW));<\/p>\n<p>          const half = t => (ITEMMAX * baseScaleAtT(t)) * 0.5 + 4;<\/p>\n<p>          const baseRX = Math.max(0, Math.min(vw(cssVar('--rx',34)), (r.width*0.5) - half(1)));\n          let   baseRY = Math.min(vh(cssVar('--ry',26)), r.height*0.5 - half(1));<\/p>\n<p>          const available = (BOTTOM_BOUND - TOP_BOUND) - ITEMMAX;\n          const maxRY = Math.max(0, available \/ 2);\n          baseRY = Math.min(baseRY, maxRY);<\/p>\n<p>          const RX = baseRX * (1 + camOffsetX * 0.25);\n          let deformY = (1 - camSquash * 0.45);\n          deformY = clamp(deformY, 0.75, 1.10);\n          let RY = Math.min(baseRY * deformY, maxRY);<\/p>\n<p>          const N = items.length;\n          const STEP = (2*Math.PI)\/N;<\/p>\n<p>          for(let i=0;i<N;i++){\n            let rel = i - focusPos;\n            if (rel >  N\/2) rel -= N;\n            if (rel < -N\/2) rel += N;\n\n            const a = Math.PI\/2 + rel * STEP;\n            const s = Math.sin(a);\n            const c = Math.cos(a);\n            const t = (s+1)\/2;\n\n            let x = cx + RX*c;\n            let y = cy + RY*s;\n\n            if (s < 0){\n              const wTop = Math.min(1,-s);\n              y -= 16*wTop;\n            }\n\n            let sc = (S_MIN + (S_MAX - S_MIN)*t) * (1 + BOOST*Math.pow(t,POW));\n            if (Math.abs(rel) < 0.001) sc *= 1.12;\n\n            const el = items[i].el;\n            el.style.width  = ITEMMAX+'px';\n            el.style.height = ITEMMAX+'px';\n            el.style.transform = `translate3d(${x-ITEMMAX\/2}px, ${y-ITEMMAX\/2}px, 0) scale(${sc})`;\n            el.style.zIndex  = String(1000 + Math.round(1000*t));\n            el.style.opacity = 1;\n            el.style.pointerEvents = 'auto';\n          }\n\n          positionCtaAtEllipseCenter(cx, cy);\n\n          const idx = modN(Math.round(focusPos), N);\n          cutTitle.textContent = items[idx].name;\n          cutDesc.textContent  = items[idx].desc;\n        }\n\n        function layoutStrip(){\n          const r = stage.getBoundingClientRect();\n          const W = r.width, H = r.height;\n          const short = Math.min(W, H);\n\n          let base = short * 0.40;\n          const sC  = 1.0, sS1 = 0.74, sS2 = 0.50;\n\n          let side1 = base * (sS1 \/ sC);\n          let side2 = base * (sS2 \/ sC);\n\n          let innerGap = short * 0.080;\n          let sideGap  = short * 0.048;\n\n          const margin = 10;\n          const required = base + 2*innerGap + 2*side1 + 2*sideGap + 2*side2;\n          if (required > W - margin){\n            const fit = (W - margin) \/ Math.max(required,1);\n            base *= fit; side1 *= fit; side2 *= fit; innerGap *= fit; sideGap *= fit;\n          }<\/p>\n<p>          const {TOP_BOUND, BOTTOM_BOUND} = computeBounds();\n          const cx  = Math.round(W\/2);\n          const xL1 = Math.round(cx - (base\/2 + innerGap + side1\/2));\n          const xR1 = Math.round(cx + (base\/2 + innerGap + side1\/2));\n          const xL2 = Math.round(xL1 - (side1\/2 + sideGap + side2\/2));\n          const xR2 = Math.round(xR1 + (side1\/2 + sideGap + side2\/2));<\/p>\n<p>          const stripYVar = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--strip-y')) || 6;\n          let y = Math.round(H*0.55 + stripYVar);<\/p>\n<p>          const MIN_Y = TOP_BOUND + base*0.55;\n          const MAX_Y = BOTTOM_BOUND - base*0.55;\n          y = clamp(y, MIN_Y, MAX_Y);<\/p>\n<p>          const N = items.length;\n          focusPos = modN(focusPos, N);<\/p>\n<p>          const lerp=(a,b,t)=> a+(b-a)*t;\n          function slotX(rel){\n            if(rel <= -1){\n              const t = clamp(rel + 2, 0, 1);\n              return lerp(xL2, xL1, t);\n            } else if(rel <= 0){\n              const t = clamp(rel + 1, 0, 1);\n              return lerp(xL1, cx, t);\n            } else if(rel <= 1){\n              const t = clamp(rel, 0, 1);\n              return lerp(cx, xR1, t);\n            } else {\n              const t = clamp(rel - 1, 0, 1);\n              return lerp(xR1, xR2, t);\n            }\n          }\n          function slotSize(absR){\n            if(absR <= 1) return lerp(base, side1, absR);\n            return lerp(side1, side2, clamp(absR-1,0,1));\n          }\n          function slotOpacity(absR){\n            if(absR <= 1) return lerp(1.0, 0.9, absR);\n            return lerp(0.9, 0.65, clamp(absR-1,0,1));\n          }\n\n          for(let i=0;i<N;i++){\n            let rel = i - focusPos;\n            if (rel >  N\/2) rel -= N;\n            if (rel < -N\/2) rel += N;\n\n            const absRel = Math.abs(rel);\n\n            if(absRel > 2.2){\n              const el = items[i].el;\n              el.style.opacity = 0;\n              el.style.pointerEvents = 'none';\n              el.style.zIndex = '0';\n              el.style.transform = `translate3d(${cx}px, ${y}px, 0) scale(0.001)`;\n              continue;\n            }<\/p>\n<p>            const xPos = slotX(rel);\n            const size = slotSize(absRel);\n            const op   = slotOpacity(absRel);<\/p>\n<p>            const el = items[i].el;\n            el.style.width  = size+'px';\n            el.style.height = size+'px';\n            el.style.transform = `translate3d(${xPos - size\/2}px, ${y - size\/2}px, 0)`;\n            el.style.opacity = op;\n            el.style.zIndex  = String(1000 - Math.round(absRel*10));\n            el.style.pointerEvents = (op > 0.75 ? 'auto':'none');\n          }<\/p>\n<p>          const idx = modN(Math.round(focusPos), N);\n          cutTitle.textContent = items[idx].name;\n          cutDesc.textContent  = items[idx].desc;\n        }<\/p>\n<p>        function render(){\n          if(window.innerWidth >= 1024) layoutOrbit();\n          else layoutStrip();\n        }<\/p>\n<p>        function animateTo(targetIdx, duration){\n          const N = items.length;\n          targetIdx = modN(targetIdx, N);\n          duration = duration || DUR();<\/p>\n<p>          animToken++;\n          const token = animToken;\n          cancelAnimationFrame(raf);<\/p>\n<p>          const start = focusPos;\n          let delta = targetIdx - start;\n          if (Math.abs(delta) > N\/2) delta += (delta > 0 ? -N : N);\n          const end = start + delta;<\/p>\n<p>          const t0 = performance.now();\n          const ease = t => 1 - Math.pow(1 - t, 3);<\/p>\n<p>          function tick(now){\n            if(token !== animToken) return;\n            const p = Math.min(1, (now - t0) \/ duration);\n            focusPos = modN(start + (end - start) * ease(p), N);\n            render();\n            if(p < 1) raf = requestAnimationFrame(tick);\n            else { focusPos = targetIdx; render(); }\n          }\n          raf = requestAnimationFrame(tick);\n        }\n\n        function panLikeGo(dir){\n          const N = items.length;\n          const isMobile = window.innerWidth < 1024;\n          const target = modN(Math.round(focusPos) + dir, N);\n\n          if(!isMobile){ animateTo(target, DUR()); return; }\n\n          animToken++;\n          cancelAnimationFrame(raf);\n\n          stage.classList.add('no-anim');\n          focusPos = modN(focusPos + dir * 0.22, N);\n          render();\n\n          requestAnimationFrame(()=>{\n            stage.classList.remove('no-anim');\n            animateTo(target, DUR());\n          });\n        }<\/p>\n<p>        prevBtn.addEventListener('click', ()=> panLikeGo(-1));\n        nextBtn.addEventListener('click', ()=> panLikeGo(+1));<\/p>\n<p>        items.forEach((it, idx)=>{\n          it.el.addEventListener('click', ()=>{\n            const isMobile = window.innerWidth < 1024;\n            if(!isMobile){ animateTo(idx, DUR()); return; }\n\n            animToken++;\n            cancelAnimationFrame(raf);\n            stage.classList.add('no-anim');\n\n            const N = items.length;\n            let delta = idx - focusPos;\n            if (Math.abs(delta) > N\/2) delta += (delta > 0 ? -N : N);\n            focusPos = modN(focusPos + Math.sign(delta)*0.22, N);\n            render();<\/p>\n<p>            requestAnimationFrame(()=>{\n              stage.classList.remove('no-anim');\n              animateTo(idx, DUR());\n            });\n          });\n        });<\/p>\n<p>        const onDown = (e)=>{\n          dragging = true;\n          const p = ('touches' in e ? e.touches[0] : e);\n          sx = p.clientX; sy = p.clientY;\n          totalDx=0; totalDy=0; gestureMode=null;<\/p>\n<p>          animToken++;\n          cancelAnimationFrame(raf);\n          stage.classList.add('no-anim');\n        };<\/p>\n<p>        const onMove = (e)=>{\n          if(!dragging) return;\n          const p = ('touches' in e ? e.touches[0] : e);\n          const x = p.clientX, y = p.clientY;\n          const dx = x - sx, dy = y - sy;\n          sx = x; sy = y;<\/p>\n<p>          totalDx += dx; totalDy += dy;<\/p>\n<p>          if(!gestureMode){\n            const d2 = totalDx*totalDx + totalDy*totalDy;\n            if(d2 > 100) gestureMode = Math.abs(totalDx) >= Math.abs(totalDy) ? 'h' : 'v';\n          }<\/p>\n<p>          if(gestureMode === 'h'){\n            const STEP_PIX = innerWidth * (window.innerWidth < 1024 ? 0.28 : 0.16);\n            focusPos = modN(focusPos - dx \/ STEP_PIX, items.length);\n\n            if(window.innerWidth >= 1024){\n              camOffsetX = clamp(camOffsetX + dx*0.0018, -1, 1);\n              camSquash  = clamp(camSquash  + dy*0.0012, -1, 1);\n            } else {\n              camOffsetX = 0; camSquash = 0;\n            }<\/p>\n<p>            render();\n          }\n        };<\/p>\n<p>        const onUp = ()=>{\n          if(!dragging) return;\n          dragging=false;\n          gestureMode=null;\n          resetCamera();\n          stage.classList.remove('no-anim');\n          animateTo(Math.round(focusPos), DUR());\n        };<\/p>\n<p>        stage.addEventListener('mousedown', onDown);\n        stage.addEventListener('touchstart', onDown, {passive:true});\n        addEventListener('mousemove', onMove, {passive:true});\n        addEventListener('touchmove', onMove, {passive:true});\n        addEventListener('mouseup', onUp);\n        addEventListener('touchend', onUp, {passive:true});<\/p>\n<p>        addEventListener('resize', ()=>{\n          animToken++;\n          cancelAnimationFrame(raf);\n          stage.classList.add('no-anim');\n          render();\n          requestAnimationFrame(()=> stage.classList.remove('no-anim'));\n        }, {passive:true});<\/p>\n<p>        let introDone = false;<\/p>\n<p>        function startDiamondIntro(){\n          if(introDone) return;\n          if(window.innerWidth < 1024) return;\n          introDone = true;\n\n          const N = items.length;\n          if(!N) return;\n\n          const ROUND_INDEX = 0;\n          const SPIN_MS = 1900;\n          const SPINS   = 1.0;\n\n          stage.classList.add('no-anim');\n          const t0 = performance.now();\n          const start = focusPos;\n\n          const easeOutCubic = t => 1 - Math.pow(1 - t, 3);<\/p>\n<p>          function tick(now){\n            const p = Math.min(1, (now - t0) \/ SPIN_MS);\n            const e = easeOutCubic(p);<\/p>\n<p>            focusPos = modN(start + (SPINS * N * e), N);<\/p>\n<p>            camOffsetX = Math.sin(e * Math.PI * 2) * (1 - e) * 0.6;\n            camSquash  = Math.cos(e * Math.PI * 2) * (1 - e) * 0.22;<\/p>\n<p>            render();<\/p>\n<p>            if(p < 1){\n              requestAnimationFrame(tick);\n            } else {\n              camOffsetX = 0; camSquash = 0;\n              stage.classList.remove('no-anim');\n              animateTo(ROUND_INDEX, 850);\n            }\n          }\n          requestAnimationFrame(tick);\n        }\n\n        window.addEventListener('byor:diamantiEnter', startDiamondIntro);\n\n        setTimeout(()=>{\n          const diaLayer = document.querySelector('#engagement-parallax .px-diamanti');\n          if(!diaLayer) return;\n          const op = parseFloat(getComputedStyle(diaLayer).opacity || '0');\n          if(op > 0.35) startDiamondIntro();\n        }, 450);<\/p>\n<p>        render();\n      })();\n    <\/script><br \/>\n  <\/section>\n<\/div><\/div>\n<\/div>\n<style>\n  #engagement-parallax.px-stack{\n    position: relative;\n    height: 320vh;\n    background: #000;\n    overflow: clip;\n    z-index: 0;\n  }\n  #engagement-parallax .px-sticky{\n    position: sticky;\n    top: 0;\n    height: 100vh;\n    width: 100%;\n    overflow: hidden;\n    isolation: isolate;\n  }\n  #engagement-parallax .px-layer{\n    position: absolute;\n    inset: 0;\n    will-change: transform, opacity, filter;\n    transform: translate3d(0,0,0);\n    opacity: 0;\n    pointer-events: none;\n  }\n  #engagement-parallax .px-hero{\n    opacity: 1;\n    pointer-events: auto;\n  }\n  #engagement-parallax .px-layer > section,\n  #engagement-parallax .px-layer > div{\n    height: 100%;\n  }\n  #engagement-parallax .px-layer #diamond-rev{\n    margin: 0 !important;\n    height: 100%;\n  }\n  #engagement-parallax .px-layer #settings-hero section.hero-settings{\n    min-height: 100% !important;\n  }<\/p>\n<p>  #engagement-parallax .px-hero .hero.hero-img{\n    height: 100% !important;\n    min-height: 100% !important;\n  }<\/p>\n<p>  #engagement-parallax .px-hero .site-wapper-sect.main__space,\n  #engagement-parallax .px-hero .site-wapper-sect.main__space > .hero{\n    height: 100% !important;\n  }\n<\/style>\n<p><script>\n(function(){\n  const root = document.getElementById('engagement-parallax');\n  if(!root) return;<\/p>\n<p>  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  if(reduceMotion) return;<\/p>\n<p>  const heroLayer = root.querySelector('.px-hero');\n  const montLayer = root.querySelector('.px-montature');\n  const diaLayer  = root.querySelector('.px-diamanti');<\/p>\n<p>  const clamp = (v,min,max)=> v<min?min:(v>max?max:v);\n  const lerp  = (a,b,t)=> a+(b-a)*t;\n  const range01 = (t,a,b)=> clamp((t-a)\/(b-a),0,1);<\/p>\n<p>  let ticking = false;<\/p>\n<p>  function setLayer(layer, {y=0, scale=1, op=1, blur=0}){\n    layer.style.opacity = op;\n    layer.style.filter = blur ? `blur(${blur}px)` : 'none';\n    layer.style.transform = `translate3d(0, ${y}px, 0) scale(${scale})`;\n    layer.style.pointerEvents = (op > 0.03) ? 'auto' : 'none';\n  }<\/p>\n<p>  function getProgress(){\n    const rect = root.getBoundingClientRect();\n    const vh   = window.innerHeight || 1;\n    const total = rect.height - vh;\n    const scrolled = clamp(-rect.top, 0, total);\n    const p = total ? (scrolled \/ total) : 0;\n    return {p, total, rectTop: rect.top};\n  }<\/p>\n<p>  function update(){\n    ticking = false;<\/p>\n<p>    const {p} = getProgress();<\/p>\n<p>    const hIn  = range01(p, 0.00, 0.18);\n    const hOut = range01(p, 0.22, 0.44);<\/p>\n<p>    const mIn  = range01(p, 0.28, 0.48);\n    const mOut = range01(p, 0.52, 0.74);<\/p>\n<p>    const dIn  = range01(p, 0.62, 0.82);\n    const dHold= range01(p, 0.82, 1.00);<\/p>\n<p>    const heroOpacity = clamp(1 - hOut, 0, 1);\n    const heroScale   = lerp(1.03, 1.00, hIn);\n    const heroY       = lerp(0, -46, hOut);<\/p>\n<p>    setLayer(heroLayer, {\n      y: heroY,\n      scale: heroScale,\n      op: heroOpacity,\n      blur: lerp(0, 2.6, hOut)\n    });<\/p>\n<p>    const montOpacity = clamp(mIn - mOut*0.95 + 0.02, 0, 1);\n    const montYIn     = lerp(90, 0, mIn);\n    const montYOut    = lerp(0, -70, mOut);\n    const montY       = montYIn + montYOut;\n    const montScale   = lerp(0.985, 1.00, mIn);<\/p>\n<p>    setLayer(montLayer, {\n      y: montY,\n      scale: montScale,\n      op: montOpacity,\n      blur: lerp(7, 0, mIn) + lerp(0, 2, mOut)\n    });<\/p>\n<p>    if (!window.__BYOR_MONT_STARTED && montOpacity > 0.35) {\n      window.__BYOR_MONT_STARTED = true;\n      window.dispatchEvent(new CustomEvent('byor:montatureEnter'));\n    }<\/p>\n<p>    const diaOpacity = clamp(dIn*1.05, 0, 1);\n    const diaY       = lerp(110, 0, dIn);\n    const diaScale   = lerp(0.99, 1.00, dIn);<\/p>\n<p>    setLayer(diaLayer, {\n      y: diaY,\n      scale: diaScale,\n      op: diaOpacity,\n      blur: lerp(9, 0, dIn)\n    });<\/p>\n<p>    if (!window.__BYOR_DIA_STARTED && diaOpacity > 0.35) {\n      window.__BYOR_DIA_STARTED = true;\n      window.dispatchEvent(new CustomEvent('byor:diamantiEnter'));\n    }<\/p>\n<p>    if(dHold > 0){\n      diaLayer.style.transform = `translate3d(0,0,0) scale(1)`;\n    }\n  }<\/p>\n<p>  function onScroll(){\n    if(ticking) return;\n    ticking = true;\n    requestAnimationFrame(update);\n  }<\/p>\n<p>  window.addEventListener('scroll', onScroll, {passive:true});\n  window.addEventListener('resize', ()=> requestAnimationFrame(update), {passive:true});\n  requestAnimationFrame(update);<\/p>\n<p>  const STEP_P = {\n    hero: 0.00,\n    montature: 0.42,\n    diamanti: 0.78\n  };<\/p>\n<p>  function scrollToStep(step){\n    const {total} = getProgress();\n    const rootTopAbs = window.scrollY + root.getBoundingClientRect().top;<\/p>\n<p>    const targetP = STEP_P[step];\n    if(typeof targetP !== 'number') return;<\/p>\n<p>    const y = rootTopAbs + (targetP * total) + (window.innerHeight * 0.15);<\/p>\n<p>    window.scrollTo({ top: y, behavior: 'smooth' });\n  }<\/p>\n<p>  root.addEventListener('click', (e)=>{\n    const btn = e.target.closest('[data-px-next]');\n    if(!btn) return;<\/p>\n<p>    e.preventDefault();\n    e.stopPropagation();<\/p>\n<p>    const step = btn.getAttribute('data-px-next');\n    if(step === 'montature') scrollToStep('montature');\n    else if(step === 'diamanti') scrollToStep('diamanti');\n  }, {passive:false});<\/p>\n<p>})();\n<\/script><\/p>\n<div class=\"hotspot-heading\">\n<h2 class=\"heading--2 text-left mobtext-left mobm-b0 fontMedium\" style=\"margin-bottom:0; font-weight:600; color:#000;\">Ready-to-Ship Jewelry<\/h2>\n<p class=\"text-left mobm-b15 mobtext-left\" style=\"color:#000;\">Discover ready-to-wear engagement rings, bracelets, earrings and necklaces.<\/p>\n<\/div>\n<div class=\"hotspot-section\">\n<style>\n    :root{\n      --hotspot-header-offset-desktop: 0px;\n      --hotspot-header-offset-mobile: 0px;<\/p>\n<p>      --c-cream:#f6f1ea;\n      --c-ink:#111;\n      --c-muted:#6f6a64;\n      --c-line:rgba(0,0,0,.10);\n    }<\/p>\n<p>    .hotspot-heading{\n      width:100vw;\n      margin-left:calc(50% - 50vw);\n      margin-right:calc(50% - 50vw);\n      box-sizing:border-box;\n      background:#f3f3f3;\n      padding: 60px 60px 30px;\n    }\n    .hotspot-heading h2{ margin:0 !important; }\n    .hotspot-heading p{ margin:10px 0 0 !important; color: var(--c-muted); }\n    @media (max-width: 991px){\n      .hotspot-heading{ padding: 30px 24px;}\n    }<\/p>\n<p>    .hotspot-section{\n      background:#f3f3f3;\n      width:100vw;\n      margin-left:calc(50% - 50vw);\n      margin-right:calc(50% - 50vw);\n      box-sizing:border-box;\n      position:relative;\n      z-index:1;\n    }\n    @media (max-width:991px){\n      .hotspot-section{ padding:var(--hotspot-header-offset-mobile) 0 0; }\n    }<\/p>\n<p>    .hotspot-block{ position:relative; width:100%; margin:0 auto; }\n    .hotspot-block__inner{ position:relative; width:100%; height:100%; padding:0 !important; }<\/p>\n<p>    .hotspot-layout{\n      width:100%;\n      margin:0 auto;\n      display:grid;\n      grid-template-columns: 1.25fr 0.9fr;\n      gap:28px;\n      padding: 0 60px 60px;\n      box-sizing:border-box;\n      align-items:start;\n    }<\/p>\n<p>    .hotspot-stage{\n      position:-webkit-sticky !important;\n      position:sticky !important;\n      top:var(--hotspot-header-offset-desktop) !important;\n      align-self:start;\n      border-radius:0 !important;\n      overflow:hidden;\n      height:calc(100vh - var(--hotspot-header-offset-desktop)) !important;\n      min-height:520px;\n      z-index:2;\n    }<\/p>\n<p>    .hotspot-picture{ display:block; width:100%; height:100%; }\n    .hotspot-picture img{\n      display:block;\n      width:100%;\n      height:100%;\n      object-fit:cover;\n      object-position:center;\n    }<\/p>\n<p>    .look-cta{\n      position:absolute;\n      left:50%;\n      bottom:18px;\n      transform:translateX(-50%);\n      display:inline-flex;\n      align-items:center;\n      gap:0;\n      padding:0 12px;\n      height:44px;\n      border-radius:999px;\n      border:1px solid rgba(255,255,255,.85);\n      background:rgba(0,0,0,.28);\n      color:#fff;\n      cursor:pointer;\n      user-select:none;\n      -webkit-tap-highlight-color:transparent;\n      backdrop-filter: blur(8px);\n      -webkit-backdrop-filter: blur(8px);\n      transition:background .2s ease, border-color .2s ease, gap .25s ease, padding .25s ease;\n      z-index:10;\n    }\n    .look-cta:hover{\n      background:rgba(0,0,0,.38);\n      border-color:rgba(255,255,255,.98);\n      gap:10px;\n      padding:0 14px;\n    }\n    .look-cta__icon{ width:22px; height:22px; display:inline-block; flex:0 0 auto; }\n    .look-cta__label{\n      font-size:12px;\n      letter-spacing:.14em;\n      text-transform:uppercase;\n      white-space:nowrap;\n      max-width:0;\n      opacity:0;\n      overflow:hidden;\n      transition:max-width .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease;\n    }\n    .look-cta:hover .look-cta__label{ max-width:240px; opacity:1; }<\/p>\n<p>    .hotspot-cats{ position:relative; height:auto; }\n    .hotspot-cats__grid{ display:grid; grid-template-columns:1fr; gap:26px; height:auto; }<\/p>\n<p>    .cat-card{\n      position:relative;\n      display:block;\n      text-decoration:none !important;\n      color:inherit;\n      border-radius:0;\n      width:100%;\n      min-height:420px;\n      padding:28px 28px 22px;\n      overflow:hidden;\n      transition:filter .2s ease, transform .2s ease;\n      background:#f6eee4;\n    }<\/p>\n<p>    .cat-card::before{\n      content:\"\";\n      position:absolute;\n      inset:0;\n      background-image: var(--cat-bg-image);\n      background-size: cover;\n      background-position: center;\n      background-repeat: no-repeat;\n      z-index:0;\n    }<\/p>\n<p>    .cat-card::after{\n      content:\"\";\n      position:absolute;\n      inset:0;\n      z-index:1;\n    }<\/p>\n<p>    .cat-card__badge,\n    .cat-card__media,\n    .cat-card__arrow,\n    .cat-card__meta{ position:relative; z-index:2; }<\/p>\n<p>    .cat-card--anelli{ --cat-bg-image: url('https:\/\/nemusych.sirv.com\/IMAGES\/RTS_ENGAGEMENT_RINGS.jpg'); }\n    .cat-card--bracciali{ --cat-bg-image: url('https:\/\/nemusych.sirv.com\/IMAGES\/RTS_TENNIS_BRACELET.jpg'); }\n    .cat-card--collane{ --cat-bg-image: url('https:\/\/nemusych.sirv.com\/IMAGES\/RTS_PENDANTS.jpg'); }\n    .cat-card--orecchini{ --cat-bg-image: url('https:\/\/nemusych.sirv.com\/IMAGES\/RTS_EARRINGS.jpg'); }\n    .cat-card--eternity{ --cat-bg-image: url('https:\/\/nemusych.sirv.com\/IMAGES\/RTS_ETERNITY.jpg'); }<\/p>\n<p>    .cat-card__badge{\n      position:absolute;\n      top:18px;\n      left:18px;\n      font-size:12px;\n      letter-spacing:.06em;\n      color:#b25b4a;\n      z-index:3;\n    }\n    .cat-card__media{\n      position:absolute;\n      inset:0;\n      display:grid;\n      place-items:center;\n      padding:56px 40px 120px;\n      z-index:2;\n    }\n    .cat-card__media img{\n      max-width:72%;\n      max-height:78%;\n      width:auto;\n      height:auto;\n      object-fit:contain;\n      display:block;\n    }\n    .cat-card__arrow{\n      position:absolute;\n      right:18px;\n      top:50%;\n      transform:translateY(-50%);\n      width:44px;\n      height:44px;\n      border-radius:999px;\n      display:grid;\n      place-items:center;\n      color:#1a1a1a;\n      opacity:.75;\n      transition:opacity .2s ease, transform .2s ease;\n      pointer-events:none;\n      z-index:3;\n    }\n    .cat-card__arrow svg{ width:18px; height:18px; }<\/p>\n<p>    .cat-card__meta{\n      position:absolute;\n      left:0;\n      right:0;\n      bottom:0;\n      padding:18px 22px 18px;\n      z-index:2;\n    }\n    .cat-card__kicker{ font-size:12px; color:#8a7a6f; margin:0 0 8px; letter-spacing:.02em; }\n    .cat-card__title{ font-size:18px; line-height:1.2; font-weight:500; margin:0 0 10px; color:#fff !important; letter-spacing:.01em; }\n    .cat-card__price{ font-size:20px; font-weight:800; margin:0; color:#111; letter-spacing:.01em; }<\/p>\n<p>    body.panel-open{ overflow:hidden; }\n    html, body{ height:100%; overscroll-behavior:none; }<\/p>\n<p>    .product-panel-backdrop{\n      position:fixed;\n      inset:0;\n      background:rgba(0,0,0,0.5);\n      opacity:0;\n      pointer-events:none;\n      transition:opacity .25s ease;\n      z-index:2147483646 !important;\n      touch-action:none;\n    }\n    .product-panel-backdrop.is-open{ opacity:1; pointer-events:auto; }<\/p>\n<p>    .product-panel{\n      position:fixed;\n      top:0;\n      left:0;\n      width:min(980px, 96vw);\n      height:100vh;\n      background:#fff;\n      box-shadow:6px 0 18px rgba(0,0,0,0.25);\n      transform:translateX(-100%);\n      transition:transform .28s ease;\n      z-index:2147483647 !important;\n      display:flex;\n      flex-direction:column;\n      overscroll-behavior:contain;\n      touch-action:pan-y;\n    }\n    .product-panel.is-open{ transform:translateX(0); }<\/p>\n<p>    .product-panel__header{\n      padding:18px 24px;\n      display:flex;\n      align-items:center;\n      justify-content:space-between;\n      background:#fff;\n      border-bottom:none !important;\n    }\n    .product-panel__title{\n          font-size: 18px;\n    font-weight: 500;\n    margin: 0;\n    text-transform: uppercase;\n    flex: 1;\n    text-align: left;\n    color: var(--c-ink);\n    }\n    .product-panel__close{\n      border:1px solid rgba(0,0,0,.12);\n      background:#fff;\n      width:34px;\n      height:34px;\n      border-radius:999px;\n      display:grid;\n      place-items:center;\n      cursor:pointer;\n      font-size:18px;\n      color:var(--c-ink);\n    }\n    .product-panel__body{\n      padding:22px 26px 34px;\n      overflow-y:auto;\n      -webkit-overflow-scrolling:touch;\n      overscroll-behavior:contain;\n    }<\/p>\n<p>    .look-grid{\n      display:grid;\n      grid-template-columns:repeat(2, minmax(0, 1fr));\n      gap:34px;\n      align-items:start;\n    }\n    .look-card{ position:relative; display:block; text-decoration:none !important; color:inherit; }<\/p>\n<p>    .look-card__badge{ display:none !important; }<\/p>\n<p>    .look-card__tile{\n      position:relative;\n      background:#fff !important;\n      border:none !important;\n      outline:none !important;\n      border-radius:0;\n      overflow:hidden;\n      aspect-ratio: 1 \/ 1;\n      display:grid;\n      place-items:center;\n      padding:0 !important;\n    }<\/p>\n<p>    .look-card__img{\n      width:100%;\n      height:100%;\n      display:block;\n      border:1px solid #efefef;\n    }\n    .look-card__img img{\n      width:100%;\n      height:100%;\n      object-fit:contain;\n      display:block;\n      max-width:none !important;\n      max-height:none !important;\n    }<\/p>\n<p>    .look-card__meta{\n      text-align:center;\n      padding:18px 8px 0;\n      display:flex;\n      flex-direction:column;\n      gap:10px;\n    }\n    .look-card__title{ margin:0; font-size:16px; line-height:1.35; font-weight:600; color:var(--c-ink);}\n    .look-card__material{ margin:0; font-size:13px; color:var(--c-muted); letter-spacing:.06em; }\n    .look-card__price{ margin:0; font-size:15px; font-weight:700; color:var(--c-ink); letter-spacing:.02em; }<\/p>\n<p>    .look-nav{ display:none; }\n    .no-panel-transition .product-panel,\n    .no-panel-transition .product-panel-backdrop{ transition:none !important; }<\/p>\n<p>    @media (max-width: 991px){\n      .hotspot-layout{\n        width:100%;\n        padding:0;\n        grid-template-columns:1fr;\n        gap:0;\n      }\n      .hotspot-stage{\n        position:relative !important;\n        top:auto !important;\n        height:auto !important;\n        min-height:auto !important;\n      }\n      .hotspot-picture{ height:auto; }\n      .hotspot-picture img{ height:auto; object-fit:cover; }<\/p>\n<p>      .look-cta{\n        bottom:14px;\n        height:42px;\n        gap:10px;\n        padding:0 14px;\n      }\n      .look-cta__label{ max-width:240px; opacity:1; }<\/p>\n<p>      .hotspot-cats__grid{\n        gap:0;\n        grid-template-columns:repeat(2, minmax(0, 1fr));\n        border-top:0;\n      }\n      .cat-card{\n        min-height:340px !important;\n        padding:18px 16px 16px;\n        border:0;\n      }\n      .cat-card:nth-child(2n){ border-right:none; }\n      .cat-card__badge{ top:12px; left:12px; font-size:12px; }\n      .cat-card__media{ padding:36px 18px 130px; }\n      .cat-card__media img{ max-width:72%; max-height:68%; }\n      .cat-card__meta{ padding:16px 14px 14px; }\n      .cat-card__kicker{ font-size:12px; margin:0 0 10px; }\n      .cat-card__title{ font-size:18px; line-height:1.16; margin:0 0 10px; }\n      .cat-card__price{ font-size:22px; }\n      .cat-card__arrow{ display:none; }<\/p>\n<p>      .product-panel{\n        left:0; right:0; bottom:0; top:auto;\n        width:100%;\n        height:auto;\n        max-height:85vh;\n        background:transparent;\n        transform:translateY(100%);\n        transition:transform .32s cubic-bezier(0.25, 0.1, 0.25, 1);\n        box-shadow:none;\n      }\n      .product-panel.is-open{ transform:translateY(0); }<\/p>\n<p>      .product-panel__header{\n        background:#fff;\n        padding:16px 16px 0;\n        border-radius:18px 18px 0 0;\n        border-bottom:none !important;\n      }\n      .product-panel__body{\n        background:#fff;\n        padding:12px 16px 18px;\n        max-height:calc(85vh - 58px);\n      }<\/p>\n<p>      .look-grid{ grid-template-columns:1fr; gap:0; }\n      .look-slide{ position:relative; width:100%; }<\/p>\n<p>      .look-nav{\n        display:block;\n        position:absolute;\n        inset:0;\n        pointer-events:none;\n        z-index:20;\n      }\n      .look-arrow{\n        pointer-events:auto;\n        position:absolute;\n        top:50%;\n        transform:translateY(-50%);\n        width:42px;\n        height:42px;\n        border-radius:999px;\n        border:none;\n        background:rgba(255,255,255,.92);\n        box-shadow:0 10px 26px rgba(0,0,0,.14);\n        cursor:pointer;\n        display:grid;\n        place-items:center;\n        transition:transform .15s, background .2s;\n        color:var(--c-ink);\n      }\n      .look-arrow:hover{ background:#fff; transform:translateY(-50%) translateY(-1px); }\n      .look-arrow--prev{ left:10px; }\n      .look-arrow--next{ right:10px; }\n      .look-arrow svg{ width:18px; height:18px; }<\/p>\n<p>      .look-card__tile{\n        padding:0 !important;\n        max-width:360px;\n        margin:0 auto;\n        aspect-ratio:1\/1;\n      }\n      .look-card__meta{ padding:14px 8px 0; gap:8px; }\n      .look-card__title{ font-size:14px; }\n      .look-card__material{ font-size:12px; }\n      .look-card__price{ font-size:13px; }\n    }<\/p>\n<p>    @media (min-width: 992px){\n      .hotspot-section,\n      .hotspot-section .hotspot-block,\n      .hotspot-section .hotspot-layout{\n        overflow: visible !important;\n        transform: none !important;\n        filter: none !important;\n        perspective: none !important;\n        contain: none !important;\n      }\n    }\n  <\/style>\n<div class=\"hotspot-block\">\n<div class=\"hotspot-layout\">\n<div class=\"hotspot-stage\">\n<div class=\"hotspot-block__inner\">\n<picture class=\"hotspot-picture\"><source srcset=\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/HT-JEWELS-COLLECTION-MB.jpg\" media=\"(max-width: 991px)\"><img decoding=\"async\" src=\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/HT_DSK-scaled.png\" alt=\"Jewellery Collection\">\n          <\/picture>\n<p>          <button class=\"look-cta\" type=\"button\" id=\"look-cta\" aria-label=\"Shop the Style\"><br \/>\n            <span class=\"look-cta__icon\" aria-hidden=\"true\"><br \/>\n              <svg xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" focusable=\"false\" role=\"img\" aria-label=\"shopping-bag\" width=\"22\" height=\"22\">\n                <defs>\n                  <symbol xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 16 16\" id=\"shopping-bag\">\n                    <path fill=\"currentColor\" d=\"M12.95 4.93H10.7v-.22A2.71 2.71 0 0 0 8 2a2.71 2.71 0 0 0-2.7 2.71v.22H3.05l-.62 7.74c-.03.34.09.68.32.93s.56.4.91.4h8.68a1.236 1.236 0 0 0 1.23-1.33zM6.3 4.71C6.3 3.77 7.06 3 8 3s1.7.77 1.7 1.71v.22H6.3zm6.21 8.22s-.08.08-.17.08H3.66a.21.21 0 0 1-.17-.08.22.22 0 0 1-.06-.18l.54-6.81H5.3v.97c0 .28.22.5.5.5s.5-.22.5-.5v-.97h3.4v.97c0 .28.22.5.5.5s.5-.22.5-.5v-.97h1.33l.54 6.82c0 .09-.04.15-.06.18z\"><\/path>\n                  <\/symbol>\n                <\/defs>\n                <use role=\"presentation\" xlink:href=\"#shopping-bag\"><\/use>\n              <\/svg><br \/>\n            <\/span><br \/>\n            <span class=\"look-cta__label\">Shop the Style<\/span><br \/>\n          <\/button><\/p><\/div>\n<\/p><\/div>\n<aside class=\"hotspot-cats\" aria-label=\"Featured Categories\">\n<div class=\"hotspot-cats__grid\">\n<p>          <a class=\"cat-card cat-card--anelli\" href=\"https:\/\/www.bongioielli.com\/en\/diamond-engagement-rings\/preset\/\" aria-label=\"Ready to ship Engagement Ring\"><\/p>\n<div class=\"cat-card__meta\">\n<p class=\"cat-card__title\">Engagement Ring<\/p>\n<\/p><\/div>\n<p>          <\/a><\/p>\n<p>          <a class=\"cat-card cat-card--bracciali\" href=\"https:\/\/www.bongioielli.com\/en\/fine-jewellery\/preset-bracelets\/\" aria-label=\"Ready to ship tennis bracelets\"><\/p>\n<div class=\"cat-card__meta\">\n<p class=\"cat-card__title\">Bracelets<\/p>\n<\/p><\/div>\n<p>          <\/a><\/p>\n<p>          <a class=\"cat-card cat-card--collane\" href=\"https:\/\/www.bongioielli.com\/en\/fine-jewellery\/preset-necklaces\/\" aria-label=\"Ready to ship pendant\"><\/p>\n<div class=\"cat-card__meta\">\n<p class=\"cat-card__title\">Pendants<\/p>\n<\/p><\/div>\n<p>          <\/a><\/p>\n<p>          <a class=\"cat-card cat-card--orecchini\" href=\"https:\/\/www.bongioielli.com\/en\/fine-jewellery\/preset-earrings\/\" aria-label=\"Ready to ship earrings\"><\/p>\n<div class=\"cat-card__meta\">\n<p class=\"cat-card__title\">Earrings<\/p>\n<\/p><\/div>\n<p>          <\/a><\/p><\/div>\n<\/aside><\/div>\n<\/p><\/div>\n<div class=\"product-panel-backdrop\" id=\"product-panel-backdrop\"><\/div>\n<aside class=\"product-panel\" id=\"product-panel\" aria-hidden=\"true\">\n<div class=\"product-panel__header\">\n<h3 class=\"product-panel__title\">SHOP THE STYLE<\/h3>\n<p>      <button class=\"product-panel__close\" type=\"button\" aria-label=\"Chiudi pannello\" id=\"pp-close\">\u2715<\/button>\n    <\/div>\n<div class=\"product-panel__body\">\n<div class=\"look-grid\" id=\"look-grid\"><\/div>\n<\/p><\/div>\n<\/aside>\n<p>  <script>\n    (function(){\n      const LOOK_PRODUCTS = [\n        {\n          id:\"p1\",\n          isNew:true,\n          title:\"Antilia Pendente Punto Luce con Diamante Lab Grown\",\n          material:\"Oro bianco 18Kt\",\n          price:\"\u20ac3.050\",\n          url:\"https:\/\/www.bongioielli.com\/collane-preimpostate\/pendente-punto-luce-antilia-con-diamante-lab-grown-rotondo-da-100-ct\/?shape=Rotondo&cat_filter_metal=18k-oro-bianco\",\n          image:\"https:\/\/www.bongioielli.com\/wp-content\/product-images\/2025\/05\/6825c2e27ec4a-676a865278801-BPD0031-2.webp\"\n        },\n        {\n          id:\"p2\",\n          isNew:true,\n          title:\"Anello di Fidanzamento Trilogy Harmonia con Diamanti Lab\",\n          material:\"Oro bianco 18Kt\",\n          price:\"\u20ac2.712\",\n          url:\"https:\/\/www.bongioielli.com\/anelli-di-fidanzamento-in-pronta-consegna\/anello-di-fidanzamento-trilogy-harmonia-con-diamanti-lab-grown-rotondo-da-1.52-ct-2\/\",\n          image:\"https:\/\/www.bongioielli.com\/wp-content\/product-images\/2025\/11\/69184217e011d-BR0590-2.webp\"\n        },\n        {\n          id:\"p3\",\n          isNew:true,\n          title:\"Nashira Anello Eternity con Diamanti Lab Grown\",\n          material:\"Oro bianco 18Kt\",\n          price:\"\u20ac6.400\",\n          url:\"https:\/\/www.bongioielli.com\/anelli-di-fidanzamento-in-pronta-consegna\/diana-anello-eternity-con-diamanti-lab-grown-da-617-ct\/?cat_filter_metal=18k-oro-bianco\",\n          image:\"https:\/\/www.bongioielli.com\/wp-content\/product-images\/2025\/07\/68849a10b76fa-BR0843-1.webp\"\n        },\n        {\n          id:\"p4\",\n          isNew:true,\n          title:\"Anello di Fidanzamento Solitario Ankaa con Diamante Lab Grown\",\n          material:\"Oro bianco 18Kt\",\n          price:\"\u20ac2.400\",\n          url:\"https:\/\/www.bongioielli.com\/anelli-di-fidanzamento-in-pronta-consegna\/anello-di-fidanzamento-solitario-ankaa-con-diamante-lab-grown-rotondo-da-1.41\/?cat_filter_metal=18k-oro-bianco&shape=Rotondo\",\n          image:\"https:\/\/www.bongioielli.com\/wp-content\/product-images\/2025\/04\/680207849ac63-BR0810-2.webp\"\n        },\n        {\n          id:\"p5\",\n          isNew:true,\n          title:\"Anello di Fidanzamento \u201cLeo\u201d con Halo Nascosto e Diamante Lab\",\n          material:\"Oro bianco 18Kt\",\n          price:\"\u20ac2.290\",\n          url:\"https:\/\/www.bongioielli.com\/anelli-di-fidanzamento-con-diamanti\/anello-di-fidanzamento-leo-con-halo-nascosto-e-diamante-lab-certificato-da-114-ct-rotondo\/?cat_filter_metal=18k-oro-bianco&shape=Rotondo\",\n          image:\"https:\/\/www.bongioielli.com\/wp-content\/product-images\/2024\/11\/673cb9760183e-BR0532-150-2.webp\"\n        }\n      ];<\/p>\n<p>      const backdrop = document.getElementById('product-panel-backdrop');\n      const panel    = document.getElementById('product-panel');\n      const ctaBtn   = document.getElementById('look-cta');\n      const closeEl  = document.getElementById('pp-close');\n      const gridEl   = document.getElementById('look-grid');<\/p>\n<p>      if(!panel || !backdrop || !ctaBtn || !gridEl) return;<\/p>\n<p>      (function moveOverlayToBody(){\n        if (panel.parentElement !== document.body) document.body.appendChild(panel);\n        if (backdrop.parentElement !== document.body) document.body.appendChild(backdrop);\n      })();<\/p>\n<p>      function preventBackgroundScroll(e){ e.preventDefault(); }\n      backdrop.addEventListener('touchmove', preventBackgroundScroll, { passive:false });\n      backdrop.addEventListener('wheel', preventBackgroundScroll, { passive:false });\n      panel.addEventListener('touchmove', function(e){ e.stopPropagation(); }, { passive:true });<\/p>\n<p>      const mqPanel = window.matchMedia('(max-width: 991px)');<\/p>\n<p>      function desiredTransform(){\n        const mobile = mqPanel.matches;\n        const open = panel.classList.contains('is-open');\n        if (open) return 'translate3d(0,0,0)';\n        return mobile ? 'translate3d(0,100%,0)' : 'translate3d(-100%,0,0)';\n      }<\/p>\n<p>      function hardFreezeTransitions(){\n        document.documentElement.classList.add('no-panel-transition');\n        panel.style.transition = 'none';\n        backdrop.style.transition = 'none';\n      }<\/p>\n<p>      function unfreezeTransitions(){\n        panel.style.transition = '';\n        backdrop.style.transition = '';\n        setTimeout(() => document.documentElement.classList.remove('no-panel-transition'), 60);\n      }<\/p>\n<p>      function syncPanelTransformNoJump(){\n        if (!panel || !backdrop) return;\n        hardFreezeTransitions();\n        panel.style.transform = desiredTransform();\n        void panel.offsetHeight;\n        requestAnimationFrame(() => {\n          requestAnimationFrame(() => {\n            panel.style.transform = '';\n            unfreezeTransitions();\n          });\n        });\n      }<\/p>\n<p>      if (mqPanel.addEventListener) mqPanel.addEventListener('change', syncPanelTransformNoJump);\n      else mqPanel.addListener(syncPanelTransformNoJump);<\/p>\n<p>      let resizeTimer = null;\n      window.addEventListener('resize', () => {\n        clearTimeout(resizeTimer);\n        resizeTimer = setTimeout(syncPanelTransformNoJump, 80);\n      });<\/p>\n<p>      const isMobile = () => window.matchMedia('(max-width: 991px)').matches;\n      let index = 0;<\/p>\n<p>      function escapeHtml(str){\n        return String(str || '')\n          .replaceAll('&','&amp;')\n          .replaceAll('<','&lt;')\n          .replaceAll('>','&gt;')\n          .replaceAll('\"','&quot;')\n          .replaceAll(\"'\",\"&#039;\");\n      }<\/p>\n<p>      const chevronLeft = `\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M14.5 6.5L9 12l5.5 5.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>`;\n      const chevronRight = `\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M9.5 6.5L15 12l-5.5 5.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>`;<\/p>\n<p>      function cardHTML(p){\n        const img = p.image ? `<img decoding=\"async\" src=\"${p.image}\" alt=\"${escapeHtml(p.title)}\">` : '';\n        const url = p.url || '#';\n        return `\n          <a class=\"look-card\" href=\"${url}\"><\/p>\n<div class=\"look-card__tile\">\n<div class=\"look-card__img\">${img}<\/div>\n<\/p><\/div>\n<div class=\"look-card__meta\">\n<p class=\"look-card__title\">${escapeHtml(p.title)}<\/p>\n<p class=\"look-card__material\">${escapeHtml(p.material || '')}<\/p>\n<p class=\"look-card__price\">${escapeHtml(p.price || '')}<\/p>\n<\/p><\/div>\n<p>          <\/a>\n        `;\n      }<\/p>\n<p>      function render(){\n        if (!isMobile()){\n          gridEl.innerHTML = LOOK_PRODUCTS.map(p => cardHTML(p)).join('');\n          return;\n        }<\/p>\n<p>        if (index < 0) index = LOOK_PRODUCTS.length - 1;\n        if (index >= LOOK_PRODUCTS.length) index = 0;<\/p>\n<p>        gridEl.innerHTML = `<\/p>\n<div class=\"look-slide\">\n<div class=\"look-nav\" aria-label=\"Navigazione prodotti look\">\n              <button class=\"look-arrow look-arrow--prev\" id=\"look-prev\" type=\"button\" aria-label=\"Precedente\">${chevronLeft}<\/button>\n              <button class=\"look-arrow look-arrow--next\" id=\"look-next\" type=\"button\" aria-label=\"Successivo\">${chevronRight}<\/button>\n            <\/div>\n<p>            ${cardHTML(LOOK_PRODUCTS[index])}\n          <\/p><\/div>\n<p>        `;<\/p>\n<p>        const prevBtn = document.getElementById('look-prev');\n        const nextBtn = document.getElementById('look-next');<\/p>\n<p>        prevBtn && prevBtn.addEventListener('click', (e) => {\n          e.preventDefault(); e.stopPropagation();\n          index--;\n          render();\n        });<\/p>\n<p>        nextBtn && nextBtn.addEventListener('click', (e) => {\n          e.preventDefault(); e.stopPropagation();\n          index++;\n          render();\n        });\n      }<\/p>\n<p>      function showPanel(){\n        document.body.classList.add('panel-open');\n        panel.classList.add('is-open');\n        backdrop.classList.add('is-open');\n        panel.setAttribute('aria-hidden','false');\n      }<\/p>\n<p>      function closePanel(){\n        panel.classList.remove('is-open');\n        backdrop.classList.remove('is-open');\n        panel.setAttribute('aria-hidden','true');\n        document.body.classList.remove('panel-open');\n      }<\/p>\n<p>      backdrop.addEventListener('click', closePanel);\n      closeEl.addEventListener('click', closePanel);\n      document.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape' && panel.classList.contains('is-open')) closePanel();\n      });<\/p>\n<p>      ctaBtn.addEventListener('click', (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        index = 0;\n        render();\n        showPanel();\n      });<\/p>\n<p>      gridEl.addEventListener('click', (e) => {\n        const a = e.target.closest('a.look-card');\n        if (!a) return;\n        const href = a.getAttribute('href') || '';\n        if (href === '#' || href.trim() === '') e.preventDefault();\n      });<\/p>\n<p>      window.addEventListener('resize', () => {\n        if (panel.classList.contains('is-open')) render();\n      });<\/p>\n<p>    })();\n  <\/script>\n<\/div>\n<section class=\"hero animated js-hero\"\n               role=\"group\"\n               aria-label=\"60+ Years of Trust and Excellence\"><\/p>\n<div class=\"media\">\n          <video class=\"video video--mobile\" \nsrc=\"https:\/\/nemusych.sirv.com\/VIDEO\/BG_ABOUT_US_MB.mp4\"\n                 muted autoplay playsinline webkit-playsinline x5-playsinline\n                 loop preload=\"auto\" poster=\"\"><\/video><\/p>\n<p>          <video class=\"video video--desktop\" \nsrc=\"https:\/\/nemusych.sirv.com\/VIDEO\/BG_ABOUT_US_DK.mp4\"\n                 muted autoplay playsinline webkit-playsinline x5-playsinline\n                 loop preload=\"auto\" poster=\"\"><\/video><\/p>\n<div class=\"controls\">\n            <button class=\"pp-btn\" aria-label=\"Pausa\" aria-pressed=\"true\"><br \/>\n              <svg class=\"pp-ico\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <use href=\"#icon-pause\"><\/use>\n              <\/svg><br \/>\n            <\/button>\n          <\/div>\n<div class=\"overlay\">\n<div class=\"content\">\n<h2>60+ Years of Trust and Excellence<\/h2>\n<p>A story of passion and tradition. We look forward to welcoming you, guiding you through our jewelry collections, and offering all the information you need with an in-store or online appointment.<\/p>\n<p>              <a class=\"cta cta-anim\" href=\"https:\/\/www.bongioielli.com\/en\/about-us\/\">About Us<\/a><br \/>\n              <a class=\"cta cta-anim\" href=\"https:\/\/www.bongioielli.com\/en\/appointment-in-store\/\">Book an Appointment<\/a>\n            <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<section style=\"margin-bottom:0;\">\n<style>\n.reviews-slider{width:100%;padding:60px 0 40px;background:#fff;color:#111827;box-sizing:border-box}\n.reviews-slider .reviews-header{padding:0 48px 28px}\n.reviews-slider .reviews-header-inner{max-width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between}\n.reviews-slider .reviews-title{font-size:40px;font-weight:500;margin:0}\n.reviews-slider .reviews-swiper-container{padding:0 48px 10px}\n.reviews-slider .reviews-swiper-wrap{position:relative}\n.reviews-slider .reviews-nav--cards{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);z-index:20;display:flex;justify-content:space-between;padding:0 48px;pointer-events:none}\n.reviews-slider .reviews-nav--cards button{pointer-events:auto;width:52px;height:52px;border-radius:999px;border:1px solid rgba(15,23,42,.16);background:rgba(255,255,255,.92);backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.12);cursor:pointer}\n.reviews-slider .reviews-nav--cards button:hover{background:#fff}\n@media (max-width:768px){.reviews-slider .reviews-nav--cards{padding:0 10px}.reviews-slider .reviews-nav--cards button{width:44px;height:44px}}\n.reviews-slider .review-card{background:#fff;border-radius:24px;display:flex;overflow:hidden;min-height:250px;height:250px}\n.reviews-slider .review-media{flex:0 0 40%}\n.reviews-slider .review-media img{width:100%;height:100%;object-fit:cover;display:block}\n.reviews-slider .review-content{padding:24px 28px 22px;display:flex;flex-direction:column;flex:1;background:#F9F9F9;min-height:0}\n.reviews-slider .review-top{display:flex;align-items:center;margin-bottom:10px}\n.reviews-slider .review-avatar{width:34px;height:34px;border-radius:999px;overflow:hidden;margin-right:10px;flex:0 0 auto;background:#e5e7eb}\n.reviews-slider .review-avatar img{width:100%;height:100%;object-fit:cover}\n.reviews-slider .review-name{font-weight:600;font-size:15px;margin:0}\n.reviews-slider .review-stars{margin:6px 0 8px}\n.reviews-slider .review-stars svg{width:18px;height:18px;fill:#fbbf24}\n.reviews-slider .review-text{font-size:15px;line-height:1.5;color:#111827;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}\n.reviews-slider .review-more{display:none;align-self:flex-start;border:none;background:transparent;padding:0;margin:0 0 14px;cursor:pointer;font-size:14px;font-weight:600;color:#111827;text-decoration:underline}\n.reviews-slider .review-footer{align-items:center;gap:8px;font-size:10px;color:#6b7280;display:flex}\n.reviews-slider .review-source-logo img{height:20px;width:auto;display:block;margin-top:0}\n.reviews-modal{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:20px}\n.reviews-modal.is-open{display:flex}\n.reviews-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}\n.reviews-modal-shell{position:relative;width:min(1200px,calc(100% - 40px));height:min(720px,calc(100vh - 40px));z-index:1;display:flex;align-items:center;justify-content:center}\n.reviews-modal-dialog{position:relative;width:100%;height:100%;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 20px 70px rgba(0,0,0,.28)}\n.reviews-modal .reviews-modal-swiper,.reviews-modal .reviews-modal-swiper .swiper-wrapper,.reviews-modal .reviews-modal-swiper .swiper-slide{width:100%;height:100%}\n.reviews-modal .review-card{width:100%;height:100%;border-radius:0;overflow:hidden;background:#fff;display:flex;margin:0;min-height:0}\n.reviews-modal .review-media{flex:0 0 52%;height:100%;background:#f3f4f6}\n.reviews-modal .review-media img{width:100%;height:100%;object-fit:cover;display:block}\n.reviews-modal .review-content{flex:1;height:100%;background:#fff;padding:48px 56px;display:flex;flex-direction:column;box-sizing:border-box;min-height:0}\n.reviews-modal .review-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}\n.reviews-modal .review-text{flex:1;overflow:auto;margin:10px 0 16px;padding-right:10px;min-height:0;display:block;-webkit-line-clamp:unset;-webkit-box-orient:unset}\n.reviews-modal .review-footer{display:flex;align-items:center;gap:10px;color:#6b7280;font-size:13px;margin-top:0}\n.reviews-modal .review-source-logo img{height:20px;margin-top:0}\n.reviews-modal-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:999px;border:1px solid rgba(15,23,42,.16);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:50}\n.reviews-modal-close:hover{background:#f3f4f6}\n.reviews-modal-close svg{width:18px;height:18px;stroke:#111827}\n.reviews-modal-prev,.reviews-modal-next{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.18)}\n.reviews-modal-prev{left:-64px}\n.reviews-modal-next{right:-64px}\n.reviews-modal-prev:hover,.reviews-modal-next:hover{background:rgba(255,255,255,1)}\n.reviews-modal-prev svg,.reviews-modal-next svg{width:18px;height:18px;stroke:#111827}\n@media (max-width:768px){\n  .reviews-modal-shell{width:calc(100% - 24px);height:600px !important;max-height:86vh}\n  .reviews-modal-dialog{height:auto !important;max-height:86vh;border-radius:18px}\n  .reviews-modal .reviews-modal-swiper,.reviews-modal .reviews-modal-swiper .swiper-wrapper,.reviews-modal .reviews-modal-swiper .swiper-slide{height:100%;max-height:86vh}\n  .reviews-modal .review-card{flex-direction:column;height:100%;max-height:86vh}\n  .reviews-modal .review-media{flex:0 0 auto;height:220px;max-height:30vh}\n  .reviews-modal .review-media img{width:100%;height:100%;object-fit:cover}\n  .reviews-modal .review-content{flex:1 1 auto;min-height:0;padding:16px 14px;overflow:hidden}\n  .reviews-modal .review-text{flex:1;min-height:0;overflow:auto;padding-right:6px}\n  .reviews-modal-prev,.reviews-modal-next{width:40px;height:40px;top:52%}\n  .reviews-modal-prev{left:-14px}\n  .reviews-modal-next{right:-14px}\n  .reviews-modal-close{top:10px;right:10px;width:42px;height:42px}\n}\n.reviews-slider .reviews-header-badges{display:flex;align-items:center;gap:12px;flex:0 0 auto}\n.reviews-slider .reviews-header-badges a{display:inline-flex;align-items:center}\n.reviews-slider .reviews-header-badges img{height:70px;width:auto;display:block}\n@media (max-width:768px){\n  .reviews-slider .reviews-header-inner{flex-direction:column;align-items:center;gap:12px}\n  .reviews-slider .reviews-title{font-size:25px}\n  .reviews-slider .reviews-header-badges img{height:60px}\n}\n<\/style>\n<div class=\"reviews-slider\">\n<div class=\"reviews-header\">\n<div class=\"reviews-header-inner\">\n<h2 class=\"reviews-title\">What Our Customers Say<\/h2>\n<div class=\"reviews-header-badges\">\n        <a href=\"https:\/\/maps.app.goo.gl\/V7sfypgAMPDa4RnYA\" target=\"_blank\" rel=\"noopener\" aria-label=\"Vedi recensioni Google\"><br \/>\n          <img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/icons\/google-badge-reviews.svg\" alt=\"Google reviews\"><br \/>\n        <\/a><br \/>\n        <a href=\"https:\/\/it.trustpilot.com\/review\/bongioielli.com\" target=\"_blank\" rel=\"noopener\" aria-label=\"Vedi recensioni Trustpilot\"><br \/>\n          <img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/icons\/trustpilot-badge-reviews.svg\" alt=\"Trustpilot reviews\"><br \/>\n        <\/a>\n      <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"reviews-swiper-wrap\">\n<div class=\"reviews-nav reviews-nav--cards\">\n      <button class=\"reviews-prev\" type=\"button\" aria-label=\"Previous reviews\"><br \/>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M15 6l-6 6 6 6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><br \/>\n      <\/button><br \/>\n      <button class=\"reviews-next\" type=\"button\" aria-label=\"Next reviews\"><br \/>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 6l6 6-6 6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><br \/>\n      <\/button>\n    <\/div>\n<div class=\"swiper reviews-swiper-container\">\n<div class=\"swiper-wrapper\">\n<div class=\"swiper-slide\">\n<div class=\"review-card\">\n<div class=\"review-media\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/REVIEWS\/andrea_corsale.webp\" alt=\"\"><\/div>\n<div class=\"review-content\">\n<div class=\"review-top\">\n<div class=\"review-avatar\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a-\/ALV-UjUHjNE5zOZ3whhem3mJVq44XgbU8Z0TeGzrHGurWCJFg4awrD4_=s64-c-rp-mo-br100\" alt=\"\"><\/div>\n<div>\n<div class=\"review-name\">Andrea Corsale<\/div>\n<\/div><\/div>\n<div class=\"review-stars\" aria-label=\"5 stars\">\n                <svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg>\n              <\/div>\n<div class=\"review-text\">Ho fatto la proposta con questo anello alla mia fidanzata e le \u00e8 piaciuto tantissimo, ma voglio davvero ringraziare per il servizio impeccabile. Avevo un dubbio sulla misura e mi hanno mandato gratuitamente il misuratore: grazie a quello sono riuscito a misurare di nascosto uno dei suoi anelli senza farle sospettare nulla. Missione compiuta e misura PERFETTA al primo colpo. Anche la confezione era super elegante, perfetta per un regalo importante. Spedizione veloce, assistenza gentilissima e prodotto top!<\/div>\n<p>              <button class=\"review-more\" type=\"button\">Pi\u00f9<\/button><\/p>\n<div class=\"review-footer\">Posted on <span class=\"review-source-logo\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/icons\/google_logo.svg\" alt=\"Google\"><\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"swiper-slide\">\n<div class=\"review-card\">\n<div class=\"review-media\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/REVIEWS\/teresa-stanziani.webp\" alt=\"\"><\/div>\n<div class=\"review-content\">\n<div class=\"review-top\">\n<div class=\"review-avatar\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocJBgSNp7GZ0wTVZ6FrTVKhDPg_ZLHmlY4CHfTWzBTmM2km6Ww=s64-c-rp-mo-br100\" alt=\"\"><\/div>\n<div>\n<div class=\"review-name\">Teresa Stanziani<\/div>\n<\/div><\/div>\n<div class=\"review-stars\" aria-label=\"5 stars\">\n                <svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg>\n              <\/div>\n<div class=\"review-text\">Fin da piccola ho sognato l\u2019anello di fidanzamento perfetto. Ma questo li supera tutti. Il mio fidanzato si \u00e8 trovato benissimo con Francesco, non conosceva la misura del mio dito, quindi gli ha inviato il kit per misurare. Top super consigliato.<\/div>\n<p>              <button class=\"review-more\" type=\"button\">Pi\u00f9<\/button><\/p>\n<div class=\"review-footer\">Posted on <span class=\"review-source-logo\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/icons\/google_logo.svg\" alt=\"Google\"><\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"swiper-slide\">\n<div class=\"review-card\">\n<div class=\"review-media\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/REVIEWS\/elena-signoriello.webp\" alt=\"\"><\/div>\n<div class=\"review-content\">\n<div class=\"review-top\">\n<div class=\"review-avatar\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a-\/ALV-UjUbvQvxLNdXh5G1gzzHmizfP15AGyjDm7cZMOJG0zvACoXklnFr=s64-c-rp-br100-mo\" alt=\"\"><\/div>\n<div>\n<div class=\"review-name\">Elena Signoriello<\/div>\n<\/div><\/div>\n<div class=\"review-stars\" aria-label=\"5 stars\">\n                <svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg>\n              <\/div>\n<div class=\"review-text\">Pienamente soddisfatta della mia esperienza di acquisto con Bon Gioielli. Dalla scelta della pietra ai dettagli della montatura. Assistenza sempre presente in ogni fase pre e post acquisto. Li consiglio!<\/div>\n<p>              <button class=\"review-more\" type=\"button\">Pi\u00f9<\/button><\/p>\n<div class=\"review-footer\">Posted on <span class=\"review-source-logo\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/icons\/google_logo.svg\" alt=\"Google\"><\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"swiper-slide\">\n<div class=\"review-card\">\n<div class=\"review-media\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/REVIEWS\/jonathan-lezzi.webp\" alt=\"\"><\/div>\n<div class=\"review-content\">\n<div class=\"review-top\">\n<div class=\"review-avatar\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocJBL2Ar3m2VD5m-Kvy0LKQIxss5fUN4-pqSkBYaBDjkDscfxA=s64-c-rp-mo-br100\" alt=\"\"><\/div>\n<div>\n<div class=\"review-name\">Jonathan Lezzi<\/div>\n<\/div><\/div>\n<div class=\"review-stars\" aria-label=\"5 stars\">\n                <svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg>\n              <\/div>\n<div class=\"review-text\">L\u2019idea iniziale era quella di regalarle un anello dal design classico, ma ascoltando i suoi desideri ho scelto un diamante taglio marquise. Il servizio \u00e8 stato eccellente. Francesco mi ha seguito passo dopo passo, dalla selezione della pietra alla definizione del design dell\u2019anello. La misura \u00e8 risultata perfetta. Ho ricevuto a casa un pratico kit per misurare, in modo discreto, la misura degli anelli che la mia fidanzata indossa abitualmente all\u2019anulare sinistro.<\/div>\n<p>              <button class=\"review-more\" type=\"button\">Pi\u00f9<\/button><\/p>\n<div class=\"review-footer\">Posted on <span class=\"review-source-logo\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/icons\/google_logo.svg\" alt=\"Google\"><\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"swiper-slide\">\n<div class=\"review-card\">\n<div class=\"review-media\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/REVIEWS\/%D0%98%D0%BB%D0%BE%D0%BD%D0%B0_%D0%A8%D0%B0%D0%BF%D0%BE%D0%B2%D0%B0%D0%BB%D0%BE%D0%B2%D0%B0.webp\" alt=\"\"><\/div>\n<div class=\"review-content\">\n<div class=\"review-top\">\n<div class=\"review-avatar\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocL3QgrlaEYYYSHaMBodl8QZF1YxNf6eZV6lhkdV1rgVl5uIPQ=w65-h65-p-rp-mo-br100\" alt=\"\"><\/div>\n<div>\n<div class=\"review-name\">\u0418\u043b\u043e\u043d\u0430 \u0428\u0430\u043f\u043e\u0432\u0430\u043b\u043e\u0432\u0430<\/div>\n<\/div><\/div>\n<div class=\"review-stars\" aria-label=\"5 stars\">\n                <svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg>\n              <\/div>\n<div class=\"review-text\">I ordered my diamond ring from the Bon Gioielli website and picked it up directly in store at the Rome boutique during my vacation. The experience was flawless: fast pickup, friendly staff, and a ring even more stunning than in the online photos. Plus, thanks to the Tax Free service, I easily got my refund. A purchase that made my stay in Rome truly unforgettable!<\/div>\n<p>              <button class=\"review-more\" type=\"button\">Pi\u00f9<\/button><\/p>\n<div class=\"review-footer\">Posted on <span class=\"review-source-logo\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/icons\/google_logo.svg\" alt=\"Google\"><\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"swiper-slide\">\n<div class=\"review-card\">\n<div class=\"review-media\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/REVIEWS\/zied.webp\" alt=\"\"><\/div>\n<div class=\"review-content\">\n<div class=\"review-top\">\n<div class=\"review-avatar\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a-\/ALV-UjVWq2bXeorOIk6PXrr1G6Dl0bNkU406W4buLTQ6FMtGnc27teilEw=w65-h65-p-rp-mo-br100\" alt=\"\"><\/div>\n<div>\n<div class=\"review-name\">Dr Zied Abbes<\/div>\n<\/div><\/div>\n<div class=\"review-stars\" aria-label=\"5 stars\">\n                <svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg>\n              <\/div>\n<div class=\"review-text\">I had an outstanding experience with Bon Gioielli. The craftsmanship was exceptional, with every detail done with remarkable precision. What really stood out was the level of professionalism and flexibility throughout the process. Even when the ring size turned out slightly bigger than expected, they managed to resize it perfectly within just one day\u2014and personally delivered it back. This kind of care and dedication is rare. Highly recommended for anyone looking for quality work and exceptional customer service. Thank you for such service!<\/div>\n<p>              <button class=\"review-more\" type=\"button\">Pi\u00f9<\/button><\/p>\n<div class=\"review-footer\">Posted on <span class=\"review-source-logo\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/icons\/google_logo.svg\" alt=\"Google\"><\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"swiper-slide\">\n<div class=\"review-card\">\n<div class=\"review-media\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/REVIEWS\/andrea-micocci.webp\" alt=\"\"><\/div>\n<div class=\"review-content\">\n<div class=\"review-top\">\n<div class=\"review-avatar\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a-\/ALV-UjUkhLPRsxKKY2kRJvsFMQbVFiZhWG2w9pzK0rDHqy240PEgU1Na=s64-c-rp-mo-br100\" alt=\"\"><\/div>\n<div>\n<div class=\"review-name\">Andrea Micocci<\/div>\n<\/div><\/div>\n<div class=\"review-stars\" aria-label=\"5 stars\">\n                <svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg>\n              <\/div>\n<div class=\"review-text\">La mia fidanzata mi aveva descritto l\u2019anello dei suoi sogni, suggerendomi anche il taglio del diamante. Cercando online, ho trovato una competenza e una professionalit\u00e0 che non mi aspettavo. Mi sono lasciato guidare con fiducia in ogni fase: dal design alla scelta della misura, dal diamante taglio smeraldo all\u2019incisione. Il risultato finale mi ha pienamente soddisfatto.<\/div>\n<p>              <button class=\"review-more\" type=\"button\">Pi\u00f9<\/button><\/p>\n<div class=\"review-footer\">Posted on <span class=\"review-source-logo\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/icons\/google_logo.svg\" alt=\"Google\"><\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"swiper-slide\">\n<div class=\"review-card\">\n<div class=\"review-media\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/REVIEWS\/federica_mattucci.webp\" alt=\"\"><\/div>\n<div class=\"review-content\">\n<div class=\"review-top\">\n<div class=\"review-avatar\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a-\/ALV-UjVGQKOjcQF2L7GZ_TVzFmGJMT7XMGhEbpzOn2RbUCt4xUt9oXW-YA=s64-c-rp-mo-br100\" alt=\"\"><\/div>\n<div>\n<div class=\"review-name\">Federica Mattucci<\/div>\n<\/div><\/div>\n<div class=\"review-stars\" aria-label=\"5 stars\">\n                <svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg>\n              <\/div>\n<div class=\"review-text\">Il sito Bon gioielli \u00e8 intuitivo. Francesco, esperto gemmologo, mi ha supportato tramite videocall nella scelta del diamante ideale. Altamente consigliato, sono molto soddisfatta di aver preso parte nella creazione dell\u2019anello.<\/div>\n<p>              <button class=\"review-more\" type=\"button\">Pi\u00f9<\/button><\/p>\n<div class=\"review-footer\">Posted on <span class=\"review-source-logo\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/icons\/google_logo.svg\" alt=\"Google\"><\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"swiper-slide\">\n<div class=\"review-card\">\n<div class=\"review-media\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/IMAGES\/REVIEWS\/maristella_nigro.webp\" alt=\"\"><\/div>\n<div class=\"review-content\">\n<div class=\"review-top\">\n<div class=\"review-avatar\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocL4B3j_0j3BYksDgEimP7TsHl5b-G9LBpVxcw9M1WH04wY-CX4i=s64-c-rp-mo-br100\" alt=\"\"><\/div>\n<div>\n<div class=\"review-name\">Maristella Nigro<\/div>\n<\/div><\/div>\n<div class=\"review-stars\" aria-label=\"5 stars\">\n                <svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg><svg viewBox=\"0 0 20 20\"><polygon points=\"10 1.5 12.9 7.1 19 7.8 14 11.9 15.4 18 10 14.8 4.6 18 6 11.9 1 7.8 7.1 7.1 10 1.5\"\/><\/svg>\n              <\/div>\n<div class=\"review-text\">Ho avuto il piacere di aiutare il compagno della mia migliore amica nella scelta del suo anello di fidanzamento. Abbiamo acquistato tramite il loro sito, davvero originale e che permette di creare l'anello su misura, a qualsiasi ora del giorno! Dopo alcune prove, abbiamo trovato il design perfetto e ottenuto un trilogy spettacolare, con diamanti grandi e super luminosi. Il risultato \u00e8 stato semplicemente mozzafiato. La mia amica? Non potrebbe essere pi\u00f9 felice! \u00c8 stato un momento emozionante, ed \u00e8 stato un onore poter contribuire a rendere il suo sogno realt\u00e0.<\/div>\n<p>              <button class=\"review-more\" type=\"button\">Pi\u00f9<\/button><\/p>\n<div class=\"review-footer\">Posted on <span class=\"review-source-logo\"><img decoding=\"async\" src=\"https:\/\/nemusych.sirv.com\/icons\/google_logo.svg\" alt=\"Google\"><\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"reviews-modal\" id=\"reviewsModal\" aria-hidden=\"true\">\n<div class=\"reviews-modal-backdrop\" data-reviews-close><\/div>\n<div class=\"reviews-modal-shell\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Recensioni\">\n      <button class=\"reviews-modal-prev\" type=\"button\" aria-label=\"Previous review\"><br \/>\n<svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\">\n            <path d=\"M15 6l-6 6 6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n          <\/svg>      <\/button><br \/>\n      <button class=\"reviews-modal-next\" type=\"button\" aria-label=\"Next review\"><br \/>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 6l6 6-6 6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><br \/>\n      <\/button><\/p>\n<div class=\"reviews-modal-dialog\">\n        <button class=\"reviews-modal-close\" type=\"button\" aria-label=\"Close\" data-reviews-close><br \/>\n<svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\">\n            <path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n          <\/svg>        <\/button><\/p>\n<div class=\"swiper reviews-modal-swiper\">\n<div class=\"swiper-wrapper\" id=\"reviewsModalWrapper\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script src=\"https:\/\/unpkg.com\/swiper@10\/swiper-bundle.min.js\"><\/script><br \/>\n<script>\n(function(){\n  const thumbEl = document.querySelector(\".reviews-swiper-container\");\n  if(!thumbEl || !window.Swiper) return;<\/p>\n<p>  const thumbSlides = Array.from(thumbEl.querySelectorAll(\".swiper-wrapper>.swiper-slide:not(.swiper-slide-duplicate)\"));\n  thumbSlides.forEach((s,i)=>s.dataset.reviewIndex=String(i));<\/p>\n<p>  thumbEl.swiper || new Swiper(thumbEl,{\n    slidesPerView:3,\n    spaceBetween:18,\n    navigation:{nextEl:\".reviews-next\",prevEl:\".reviews-prev\"},\n    breakpoints:{0:{slidesPerView:1.08,spaceBetween:14},768:{slidesPerView:2,spaceBetween:18},1024:{slidesPerView:3,spaceBetween:18}}\n  });<\/p>\n<p>  const modal = document.getElementById(\"reviewsModal\");\n  const modalWrapper = document.getElementById(\"reviewsModalWrapper\");\n  if(!modal || !modalWrapper) return;<\/p>\n<p>  modalWrapper.innerHTML = thumbSlides.map(slide=>{\n    const card = slide.querySelector(\".review-card\");\n    return card ? `<\/p>\n<div class=\"swiper-slide\">${card.outerHTML}<\/div>\n<p>` : \"\";\n  }).join(\"\");<\/p>\n<p>  const modalSwiper = new Swiper(\".reviews-modal-swiper\",{\n    slidesPerView:1,\n    allowTouchMove:true,\n    navigation:{nextEl:\".reviews-modal-next\",prevEl:\".reviews-modal-prev\"}\n  });<\/p>\n<p>  function updateMoreButtons(){\n    thumbSlides.forEach(slide=>{\n      const txt = slide.querySelector(\".review-text\");\n      const btn = slide.querySelector(\".review-more\");\n      if(!txt || !btn) return;\n      const needsMore = (txt.scrollHeight - txt.clientHeight) > 4;\n      btn.style.display = needsMore ? \"inline-flex\" : \"none\";\n    });\n  }\n  requestAnimationFrame(updateMoreButtons);\n  window.addEventListener(\"resize\",()=>{\n    clearTimeout(window.__reviewsMoreT);\n    window.__reviewsMoreT=setTimeout(updateMoreButtons,120);\n  });<\/p>\n<p>  let scrollY = 0;\n  let prevPaddingRight = \"\";\n  let prevPosition = \"\";\n  let prevTop = \"\";\n  let prevLeft = \"\";\n  let prevRight = \"\";\n  let prevWidth = \"\";<\/p>\n<p>  function lockScroll(){\n    scrollY = window.scrollY || document.documentElement.scrollTop || 0;<\/p>\n<p>    const scrollbarW = window.innerWidth - document.documentElement.clientWidth;\n    prevPaddingRight = document.body.style.paddingRight;\n    if(scrollbarW > 0) document.body.style.paddingRight = (parseFloat(getComputedStyle(document.body).paddingRight) + scrollbarW) + \"px\";<\/p>\n<p>    prevPosition = document.body.style.position;\n    prevTop = document.body.style.top;\n    prevLeft = document.body.style.left;\n    prevRight = document.body.style.right;\n    prevWidth = document.body.style.width;<\/p>\n<p>    document.body.style.position = \"fixed\";\n    document.body.style.top = `-${scrollY}px`;\n    document.body.style.left = \"0\";\n    document.body.style.right = \"0\";\n    document.body.style.width = \"100%\";\n  }<\/p>\n<p>  function unlockScroll(){\n    document.body.style.position = prevPosition;\n    document.body.style.top = prevTop;\n    document.body.style.left = prevLeft;\n    document.body.style.right = prevRight;\n    document.body.style.width = prevWidth;\n    document.body.style.paddingRight = prevPaddingRight;\n    window.scrollTo(0, scrollY);\n  }<\/p>\n<p>  function openModal(i){\n    lockScroll();\n    modal.classList.add(\"is-open\");\n    modal.setAttribute(\"aria-hidden\",\"false\");\n    modalSwiper.slideTo(i,0,false);\n    modalSwiper.update();\n  }<\/p>\n<p>  function closeModal(){\n    modal.classList.remove(\"is-open\");\n    modal.setAttribute(\"aria-hidden\",\"true\");\n    unlockScroll();\n  }<\/p>\n<p>  document.addEventListener(\"click\", function(e){\n    const moreBtn = e.target.closest(\".reviews-swiper-container .review-more\");\n    if(moreBtn){\n      e.preventDefault(); e.stopPropagation();\n      const slide = moreBtn.closest(\".swiper-slide\");\n      const idx = slide ? parseInt(slide.dataset.reviewIndex || \"0\", 10) : 0;\n      openModal(Number.isFinite(idx) ? idx : 0);\n      return;\n    }<\/p>\n<p>    const slideCard = e.target.closest(\".reviews-swiper-container .swiper-slide\");\n    if(slideCard && !e.target.closest(\"a,button\")){\n      e.preventDefault(); e.stopPropagation();\n      const idx = parseInt(slideCard.dataset.reviewIndex || \"0\", 10);\n      openModal(Number.isFinite(idx) ? idx : 0);\n      return;\n    }<\/p>\n<p>    if(e.target.closest(\"[data-reviews-close]\")){\n      e.preventDefault(); e.stopPropagation();\n      closeModal();\n      return;\n    }\n  });<\/p>\n<p>  document.addEventListener(\"keydown\", function(e){\n    if(e.key===\"Escape\" && modal.classList.contains(\"is-open\")) closeModal();\n  });\n})();\n<\/script><br \/>\n<\/section>\n<p>    <\/main><\/p>\n<section class=\"bon-icons-section\">\n<div class=\"bon-icons-header\">\n<h2 style=\"color:#fff;\">Why Bon Gioielli?<\/h2>\n<\/p><\/div>\n<div class=\"bon-icons-wrapper\">\n<div class=\"bon-icon-item\">\n      <img decoding=\"async\" src=\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/bon-gioielli-new-icons-01.png\" alt=\"Design Unici e Personalizzati\"><\/p>\n<p>Unique &<br \/>Custom Designs<\/p>\n<\/p><\/div>\n<div class=\"bon-icon-item\">\n      <img decoding=\"async\" src=\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/bon-gioielli-new-icons-02.png\" alt=\"Diamanti Provenienza Sostenibile\"><\/p>\n<p>Ethically Sourced<br \/>Diamonds<\/p>\n<\/p><\/div>\n<div class=\"bon-icon-item\">\n      <img decoding=\"async\" src=\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/bon-gioielli-new-icons-03.png\" alt=\"100% Made in Italy\"><\/p>\n<p>100%<br \/>Made in Italy<\/p>\n<\/p><\/div>\n<div class=\"bon-icon-item\">\n      <img decoding=\"async\" src=\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/bon-gioielli-new-icons-04.png\" alt=\"Realizzato a mano da Maestri Orafi\"><\/p>\n<p>Handcrafted by<br \/>Master Goldsmiths<\/p>\n<\/p><\/div>\n<div class=\"bon-icon-item\">\n      <img decoding=\"async\" src=\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/bon-gioielli-new-icons-05.png\" alt=\"Supporto Dedicato\"><\/p>\n<p>Dedicated<br \/>Support<\/p>\n<\/p><\/div>\n<div class=\"bon-icon-item\">\n      <img decoding=\"async\" src=\"https:\/\/www.bongioielli.com\/wp-content\/uploads\/2025\/12\/bon-gioielli-new-icons-07.png\" alt=\"Spedizione Gratuita e Resi in 15 Giorni\"><\/p>\n<p>Free Shipping<br \/>& 15-Day Returns<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p class=\"bon-icons-desc\">\n    Our passion for design and innovation gives our jewelry an irresistible allure.\n  <\/p>\n<\/section>\n<style>\n.bon-icons-section {\n  background-color: #071a33;\n  color: #fff;\n  padding: 60px 20px 80px;\n  text-align: center;\n  border-bottom: 1px solid #fff;\n}<\/p>\n<p>.bon-icons-header {\n  max-width: 900px;\n  margin: 0 auto 50px;\n}<\/p>\n<p>.bon-icons-header h2 {\n  font-size: 36px;\n  font-weight: 600;\n  margin: 0;\n  letter-spacing: 0.5px;\n}<\/p>\n<p>.bon-icons-wrapper {\n  display: flex;\n  justify-content: center;\n  gap: 50px;\n  max-width: 1100px;\n  margin: 0 auto 40px;\n}<\/p>\n<p>.bon-icon-item img {\n  width: 90px;\n  height: auto;\n}<\/p>\n<p>.bon-icon-item p {\n  margin-top: 12px;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 1.3;\n}<\/p>\n<p>.bon-icons-desc {\n  font-size: 20px;\n  line-height: 1.6;\n  max-width: 900px;\n  margin: 0 auto;\n}<\/p>\n<p>@media (max-width: 768px) {<\/p>\n<p>  .bon-icons-section {\n    padding: 50px 16px 70px;\n  }<\/p>\n<p>  .bon-icons-header h2 {\n    font-size: 28px;\n  }<\/p>\n<p>  .bon-icons-wrapper {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 30px 20px;\n  }<\/p>\n<p>  .bon-icon-item img {\n    width: 70px;\n  }<\/p>\n<p>  .bon-icon-item p {\n    font-size: 15px;\n  }<\/p>\n<p>  .bon-icons-desc {\n    font-size: 18px;\n  }\n}\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Unique Engagement Rings Engagement Rings that capture your heart. With Bon Jewellery, every &#8220;yes&#8221; becomes an unforgettable moment. Find the perfect engagement ring with IGI and GIA certified diamonds, a true masterpiece that tells your love story in a unique way. Shop Diamond Engagement Ring Shop by Category Handcrafted Jewelry Made in Italy Engagement Rings [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6977849,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/home.php","meta":{"footnotes":""},"class_list":["post-1084080","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bongioielli.com\/en\/wp-json\/wp\/v2\/pages\/1084080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bongioielli.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bongioielli.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bongioielli.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bongioielli.com\/en\/wp-json\/wp\/v2\/comments?post=1084080"}],"version-history":[{"count":126,"href":"https:\/\/www.bongioielli.com\/en\/wp-json\/wp\/v2\/pages\/1084080\/revisions"}],"predecessor-version":[{"id":6978842,"href":"https:\/\/www.bongioielli.com\/en\/wp-json\/wp\/v2\/pages\/1084080\/revisions\/6978842"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bongioielli.com\/en\/wp-json\/wp\/v2\/media\/6977849"}],"wp:attachment":[{"href":"https:\/\/www.bongioielli.com\/en\/wp-json\/wp\/v2\/media?parent=1084080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}