*,
body * {
    font-family: "Acumin Pro", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: normal;
}

body,
p {
    font-family: "Acumin Pro", sans-serif !important;
    font-weight: normal;
    /* color: var(--sb-text-muted); */
    margin: 0px;
}

body {
    overflow-x: hidden;
}

ul.foot_lists li {
    margin-bottom: 10px;
}


.newradio-list-item {
    background: #262626;
    border-radius: 30px;
}

.cursor-pointer {
    cursor: pointer;
}

h1 {
    font-family: "Acumin Pro", sans-serif;
    font-weight: bold;
    margin: 0px;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: "Acumin Pro", sans-serif;
    font-weight: 500;
    margin: 0px;
}

.modal-content {
    background: var(--sb-header-solid);
}


h2 {
    font-size: 18px;
    color: #fff;
}

a {
    outline: none;
    box-shadow: none;
    text-decoration: none;
    color: #e6e6e6;
}

.form-group select.form-control {
    background: url("../images/select_down_arrow.png");
    background-repeat: no-repeat;
    background-position: 97% 50%;
}

a:hover {
    color: var(--sb-text-muted) !important;
}

.form-control option {
    background: #262626;
}


.form-group #w_postal_code,
.form-group #j_postal_code {
    border-radius: 30px 0 0 30px;
}

.form-group #w_postcode_lookup,
.form-group #j_postcode_lookup {
    border-radius: 0 30px 30px 0;
}

.category_list_cols {
    overflow: hidden;
}

.iti__country-list {
    background: #000 !important;
}

.my-bag-modal .modal-title {
    color: #fff !important;
}

.my-bag-modal .prct_content_infos h3 {
    color: #E6E6E6 !important;
}

.my-bag-modal .modal-footer .btn {
    border-radius: 16px !important;
    text-transform: uppercase !important;
    color: #fff !important;
}

.my-bag-modal .continue-shopping {
    background: #262626 !important;
    color: #E6E6E6 !important;
    border: none !important;
}

a:hover {
    color: #f5f5f5 !important;
}

a.btn_links:hover {
    color: var(--sb-text) !important;
}


/* PDP details-card as a grid of named areas:
     title | heart
     name  | sku
     price (spans both)
   `align-items: baseline` makes each row baseline-align, so the SKU sits on the PRODUCT
   NAME's baseline and the heart sits on the title line. Heart & SKU are in the right
   (auto) column → flush to the box's right edge. Robust when the title wraps. */
.details-card {
    background: #262626;
    border-radius: 20px;
    padding: 30px 30px;
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title heart"
        "name  sku"
        "price price";
    align-items: baseline;
    column-gap: 16px;
    row-gap: 6px;
    width: 100%;
}

/* Flatten the legacy wrapper DIVs (left column + .product-catagory + .details-meta) with
   display:contents so the real leaf elements become direct grid items and can be placed
   into the areas above — no DOM changes needed. */
.details-card>div,
.details-card .product-catagory,
.details-card .details-meta {
    display: contents;
}

.details-card .product-details-info-short {
    grid-area: title;
    margin: 0;
}

.details-card .toggle-wishlist {
    grid-area: heart;
    align-self: center;
    /* heart glyph vertically centred on the title line, flush to the box's right edge */
    justify-self: end;
    text-align: right;
}

/* .product-catagory keeps Bootstrap's `.d-flex` (display:flex !important beats our
   display:contents), so it stays ONE grid item wrapping the name + price. Pin it to the
   `name` area so it always lands in the wide left column. Without this, on a page with no
   heart (product_outofstock) it auto-flows into the empty narrow heart cell and squishes. */
.details-card .product-catagory {
    grid-area: name;
}

.details-card .product-name {
    grid-area: name;
    margin-top: 20px;
}

.details-card .details-sku {
    grid-area: sku;
    margin: 0;
    white-space: nowrap;
    text-align: right;
}

.details-card .product-price {
    grid-area: price;
    margin-top: 6px;
    /* keep the price/status (e.g. "Out of stock") on one line — the .divider-line's
       width:100% would otherwise squish and wrap the preceding text. */
    white-space: nowrap;
}

/* Empty legacy spacer — would otherwise auto-place into a stray grid cell. */
.details-card .price-icon {
    display: none !important;
}

.container {
    max-width: 100%;
    padding: 0px 2vw !important;
}

a.white:hover {
    color: #fff !important;
}

.double-container-col {
    padding-inline: 5%;
}

/* #434: auth image removed — centre the sign-in / register form so the now
   full-width column doesn't leave the fields stranded on the left. */
.login-register-wrapper .auth-centered {
    width: 100%;
    max-width: 60%;
    margin-inline: auto;
    margin-top: 20vh;
}

.bg-to-white {
    background-color: var(--sb-header-solid) !important;
    color: #E6E6E6;
}

.bg-to-secondary {
    background-color: #000 !important;
}

.auth-title {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 25px;
    /* position: absolute;
    top: 145px; */
}

.auth-footer {
    padding: 16px 0 !important;
    text-align: left !important;
    margin: 0 !important;
}

.auth-footer-right {
    padding: 16px 5vw !important;
}

.auth-footer-left {
    margin: 50px 0 !important;
}

.product_collection_lists .product_items_data .product_collection_image,
.jewellery_item_datas .inn_prdct_img {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
}

.product_collection_lists .product_items_data .product_collection_image,
.jewellery_item_datas {
    overflow: hidden;
}

.product_collection_lists .product_items_data .product_collection_image,
.jewellery_item_datas .inn_prdct_img a img {
    transition: transform 0.3s ease;
}

.product_collection_lists .product_items_data .product_collection_image:hover,
.jewellery_item_datas .inn_prdct_img a img:hover {
    transform: scale(1.2);
}

.inn_prdct_img_jewellery_home {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
}

.inn_prdct_img_jewellery_home>a {
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.inn_prdct_img_jewellery_home img {
    height: 100%;
    transition: transform 0.4s ease;
}

.inn_prdct_img_jewellery_home:hover img {
    transform: scale(1.2);
}

.category_list_cols .collection_img {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
}

img {
    object-fit: cover;
}

.w-80p {
    width: 75%;
}

.img-fit {
    object-fit: contain;
}

.fill {
    object-fit: cover !important;
}

.container {
    max-width: 100%;
    padding: 0px 5%;
}

.btn {
    font-weight: 700;
    font-size: 16px;
    /*/*line-height: 100%;*/
    line-height: normal;
    letter-spacing: 0;
    text-align: center;
    border-radius: 0px;
    outline: none;
    box-shadow: none;
    padding: 15px 0;
    border-radius: 30px;
}

.my-image {
    width: 100% !important;
    height: 720px !important;
}

.btn:focus,
.btn:active {
    outline: none;
    box-shadow: none;
}

.btn-black {
    background: #373b3c;
    color: #ffffff;
    border-radius: 30px;
}

.btn-black:hover {
    background: #000;
    color: #fff !important;
}

/* Ask A Question / Notify-me modals — use the v3 brand font everywhere
   (form controls don't inherit font-family by default, so set them too) */
#chatmodel,
#nofityModel,
#chatmodel .modal-title,
#nofityModel .modal-title,
#chatmodel .form-control,
#nofityModel .form-control,
#chatmodel label,
#nofityModel label,
#enquiry-form .btn-enq,
#notify-form .btn-enq {
    font-family: "Acumin Pro", sans-serif;
}

/* Ask A Question / Notify-me modal submit button (v3 brand) */
#enquiry-form .btn-enq,
#notify-form .btn-enq {
    background: #373b3c;
    color: #fff;
    border: none;
    border-radius: 0;
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.5s ease-in-out 0s;
}

#enquiry-form .btn-enq:hover,
#notify-form .btn-enq:hover {
    background: #c9c9c9;
    color: #fff;
}

.btn-gray {
    background: #f3f5f6;
    color: #373b3c;
}

.inner_header_data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

.middle_header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.middle_header img {
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
}

.right_head_data {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.left_head_data {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
}

header.main_header>.container {
    padding: 10px 5%;
    background: #ffffff;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.12);
    position: relative;
    position: sticky;
    top: 0;
    z-index: 3;
}

.main_header {
    position: sticky;
    z-index: 999;
    padding: 10px 0;
    background: #ffffff;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.12);
    top: 0;
}

.top_left_infos {
    display: flex;
    gap: 40px;
    height: 28px;
    align-items: center;
}

.trust_badges {
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;
    align-items: center;
    height: 28px;
}

.user_account_data {
    display: flex;
    gap: 40px;
    height: 28px;
}

.user_account_data a {
    font-size: 16px;
    color: #373b3c;
    text-decoration: none;
    transition: all 0.5s ease-in-out 0s;
    font-family: "Acumin Pro", sans-serif;
    font-weight: 500;
}

.user_account_data a:hover {
    color: #c9c9c9;
}

.top_left_infos a.links {
    font-size: 12px;
    color: #FFF;
    transition: all 0.5s ease-in-out 0s;
}

.top_left_infos a.links:hover {
    color: #c9c9c9;
}

.menu_data {
    display: flex;
    align-items: center;
    height: 28px;
    margin-top: auto;
}

.menu_data a.menu_links {
    text-decoration: none;
    color: #373b3c;
    font-family: "Acumin Pro", sans-serif;
    font-weight: 500;
}

.inner_featured_in h2 {
    font-size: 18px;
    margin: 0px;
}

.inner_featured_in h2 {
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    letter-spacing: 0;
    margin: 0px;
    color: #373b3c;
}

.inner_featured_in {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.featured_logos {
    display: flex;
    justify-content: space-between;
}

.featured_in_secs {
    background: #fff;
    padding: 45px 0px 45px;
    overflow: hidden;
}

.featured_in_secs .owl-stage-outer {
    overflow: hidden !important;
}

.featured_logos_slider.owl-carousel .owl-item img {
    width: auto;
    max-width: 100%;
    height: 40px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Per-logo height overrides — tuned to each logo's aspect ratio for visual balance */
/* Logo 1: */
.featured_logos_slider.owl-carousel .owl-item img.fl-1 {
    height: 75px;
}

/* Logo 2: */
.featured_logos_slider.owl-carousel .owl-item img.fl-2 {
    height: 69px;
}

/* Logo 3: */
.featured_logos_slider.owl-carousel .owl-item img.fl-3 {
    height: 60px;
}

/* Logo 4: */
.featured_logos_slider.owl-carousel .owl-item img.fl-4 {
    height: 69px;
}

/* Logo 5: */
.featured_logos_slider.owl-carousel .owl-item img.fl-5 {
    height: 33px;
}

/* Logo 6: */
.featured_logos_slider.owl-carousel .owl-item img.fl-6 {
    height: 34.5px;
}

/* Logo 7: */
.featured_logos_slider.owl-carousel .owl-item img.fl-7 {
    height: 38px;
}

/* Scroll animation - fade in on scroll */
.featured_logos_slider.owl-carousel .item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.featured_logos_slider.owl-carousel .item.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.luxury_watches_secs {
    position: relative;
    z-index: 1;
}

.watches_content_cols {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 158px 10%;
}

.bg_column_watch {
    background: #f3f5f6;
}

.luxury_prdct_content h2 {
    font-size: 18px;
    margin-bottom: 5px;
}

.luxury_prdct_content p {
    font-size: 16px;
    color: rgb(55 59 60 / 66%);
    margin-bottom: 15px;
}

.link-dark a:hover {
    color: var(--sb-text-muted) !important;
}

.luxury_watches_btns {
    display: flex;
    gap: 30px;
}

.luxury_watches_btns a.btn_links {
    font-size: 16px;
    color: #373b3c;
    transition: all 0.5s ease-in-out 0s;
    font-family: "Acumin Pro", sans-serif;
    font-weight: normal;
}

.prdct_img {
    text-align: center;
}

.luxury_watches_btns a.btn_links:hover {
    color: var(--sb-text-muted) !important;
}

.watch_repair_contents h2 {
    font-size: 18px;
    color: #E6E6E6;
    margin: 0;
}

.jewellery_shop_contents.watch_repair_contents .see_more_btn {
    margin-top: 15px;
}

.jewellery_shop_contents.watch_repair_contents .see_more_btn a {
    color: #666666;
    white-space: nowrap;
}

.jewellery_shop_contents.watch_repair_contents .see_more_btn a img {
    width: 26px;
}

.watch_repair_contents {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0;
    max-width: 393px;
    margin: auto;
}

#my-bag-modal .btn-close {
    border: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    outline: none !important;
}

#my-bag-modal .btn-close:focus,
#my-bag-modal .btn-close:active {
    box-shadow: none !important;
    outline: none !important;
}

.watch_repair_contents.homepage-getdirection {
    gap: 5px;
}

.watch_repair_contents.homepage-getdirection .btn_links {
    margin-top: 10px;
}

.about-us-section .watch_repair_contents {
    max-width: 576px;
    gap: 0;
}

.about-us-section .watch_repair_contents h2 {
    margin-bottom: 15px;
}

.watch_repair_contents.about-get-directions.about-visit-desktop h2 {
    margin-bottom: 5px;
}

.watch_repair_contents.about-get-directions p:not(:last-child) {
    margin-bottom: 10px;
}

.watch_repair_contents.about-get-directions .btn_links {
    margin-top: 15px;
}

.watch_repair_contents .custom-nav {
    padding-top: 15px;
}

.watch_repair_contents p {
    margin: 0;
    /* color: rgb(55 59 60 / 66%); */
    font-size: 16px;
    line-height: 19px;
    height: 76px;
}

.h-25 {
    height: 25px !important;
}

.h-55 {
    height: 55px !important;
}

.about-us-section .watch_repair_contents p {
    color: var(--sb-text-muted);
}

.about-us-section .watch_repair_contents p:not(:last-child) {
    margin-bottom: 30px;
}

a.btn_links {
    color: #fff;
    font-size: 16px;
    transition: all 0.5s ease-in-out 0s;
}

a.btn_links:hover {
    color: var(--sb-text) !important;
}

.main_footer {
    background: linear-gradient(180deg, #e8ebed 0%, #ffffff 100%);
    padding: 45px 0px 35px;
}

.inner_foot_conts {
    display: flex;
    gap: 50px;
    position: relative;
    justify-content: space-between;
}

.left_footer_data {
    max-width: calc(100% - 480px);
}

.inner_foot_rows {
    display: grid;
    grid-template-columns: repeat(5, auto);
    row-gap: 30px;
    column-gap: 90px;
    width: fit-content;
}

.right_footer_data {
    max-width: 353px;
}

.foot_cols h4 {
    font-size: 16px;
    color: rgb(55 59 60 / 66%);
    font-weight: 400;
    font-family: "Acumin Pro", sans-serif;
}

.lamna_money_clients img {
    width: 200px;
}

.foot_cols {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

ul.foot_lists {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.foot_lists li a {
    font-size: 16px;
    color: #373b3c;
    font-family: "Acumin Pro", sans-serif;
    font-weight: 500;
    text-decoration: none;
    /* line-height: 180%; */
    transition: all 0.5s ease-in-out 0s;
}

ul.foot_lists li a:hover {
    color: #c9c9c9;
}

ul.foot_lists li:not(:last-child) {}

.finance_available_datas {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 45px;
}

.finance_available_datas h3 {
    font-size: 16px;
    color: #373b3c;
    font-weight: 400;
    margin-bottom: 5px;
}

.finance_available_datas p {
    font-size: 14px;
    color: rgb(55 59 60 / 66%);
    margin-bottom: 30px;
}

.finance_available_datas a.btn_links {
    font-size: 14px;
    color: rgb(55 59 60 / 66%);
    font-family: "Acumin Pro", sans-serif;
    font-weight: bold;
}

.finance_available_datas a.btn_links:hover {
    color: var(--sb-text) !important;
}

.payment_method {
    display: flex;
    justify-content: flex-end;
}

.footer-top {
    padding: 39px 0;
    background: #f3f5f6;
    display: block;
    width: 100%;
}

.footer-top h2 {
    font-family: "Acumin Pro", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    letter-spacing: 0;
    color: #373b3c;
    margin: 0px 0px 5px;
}

.footer-top p {
    font-family: "Acumin Pro", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    color: #373b3ca8;
    margin: 0px 0px 15px;
    padding: 0px;
}

.footer-top a {
    font-family: "Acumin Pro", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    color: #373b3c;
}

.footer_copyright p {
    font-size: 10px;
    color: rgb(55 59 60 / 66%);
    margin: 15px 0px 0px;
    text-align: right;
}

.footer_copyright {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-top: 45px;
    max-width: 665px;
}

.jewellery_shop_contents.watch_repair_contents {
    max-width: 393px;
    margin: 0px auto;
    padding: 0px;
}

.owl-theme .owl-dots {
    background: #ababab;
    border-radius: 100px;
    width: 50px;
    height: 26px;
}

.shop_branded_jewellery_secs .owl-dots {
    counter-reset: slides-num;
    position: absolute;
    top: 70%;
    left: 70%;
    margin-top: 15px;
}

.owl-theme .owl-dots:after {
    content: counter(slides-num);
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    vertical-align: middle;
    padding-left: 5px;
    color: #fff;
}

.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    counter-increment: slides-num;
    margin-right: 5px;
}

.owl-theme .owl-dots .owl-dot span {
    display: none !important;
}

.owl-theme .owl-dots .owl-dot.active:before {
    content: counter(slides-num) " |";
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: #fff;
}

.owl-theme .owl-dots .owl-dot {
    margin-right: 0;
}

.custom-nav button {
    background: unset;
    border: none;
    padding: 0;
}

.branded_new_slides {
    position: relative;
}

.custom_owl_navigation {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    position: absolute;
    right: 0;
    width: 41.66666667%;
    padding-left: 75px;
    bottom: 165px;
    z-index: 1;
}

.custom-nav {
    display: flex;
    align-items: center;
    gap: 40px;
    border-top: 1px solid #ddd;
    width: 100%;
    padding-top: 30px;
}

.custom-dots {
    display: flex;
    align-items: center;
    background: #6b6b6b;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 400;
    color: #fff;
    width: 50px;
    height: 26px;
    justify-content: center;
}

.custom-dots span {
    font-size: 14px;
}

.latest_jewellery_secs {
    background: #0e0e0e;
    padding: 39px 0px 70px;
    overflow-x: hidden;
}

.latest_jewellery_secs .owl-item.active {
    margin-bottom: 0px !important;
}

.featured_in_secs .inner_jewellery_data h2 {
    margin-bottom: 15px;
    /* Align "Featured In" title with first logo - match carousel visual start */
    /* Since carousel items are flex containers with centered images, ensure title aligns with first item's visual start */
    padding-left: 0;
}

/* On smaller screens, carousel may have different alignment - adjust if needed */
@media (max-width: 599px) {
    .featured_in_secs .inner_jewellery_data h2 {
        padding-left: 0;
    }
}

.inner_jewellery_data h2 {
    font-size: 18px;
    color: #373b3c;
    margin-bottom: 45px;
    /* Align title with first product in carousel by matching stagePadding */
    padding-left: 11px;
}

/* Match carousel stagePadding at different breakpoints */
@media (min-width: 600px) {
    .inner_jewellery_data h2 {
        padding-left: 0px;
    }
}

@media (min-width: 1300px) {
    .inner_jewellery_data h2 {
        padding-left: 0px;
    }
}

@media (max-width: 575.98px) {
    #filteroption {
        display: none !important;
    }
}

@media (min-width: 1680px) {
    .inner_jewellery_data h2 {
        padding-left: 40px;
    }
}

.jewellery_item_datas {
    background: #262626;
    padding: 0px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.prct_content_infos {
    align-items: flex-start;
    gap: 12px;
    padding: 0px 15px 20px 15px;
    margin-top: auto;
    flex-direction: column;
}

.prct_content_infos h3 {
    line-height: 15px;
}

.prct_content_infos h3 a {
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: "Acumin Pro", sans-serif !important;
    color: #e6e6e6 !important;
    margin: 0 !important;
    text-decoration: none !important;
    line-height: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prct_content_infos h3 a:hover {
    color: #ffffff;
    opacity: 0.8;
}

.pricing_datas {
    font-size: 14px;
    font-family: "Acumin Pro", sans-serif;
    /* font-weight: 700; */
    align-self: flex-start;
    color: #e6e6e6 !important;
}

.see_more_btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
}

.see_more_btn a {
    color: #666666;
    font-size: 16px;
    text-decoration: none;
    display: flex;
    gap: 16px;
    align-items: center;
    font-family: "Acumin Pro", sans-serif;
    font-weight: 700;
}

.latest_jewellery_slides .owl-stage-outer {
    overflow: visible !important;
    /* Make right side visible */
}

/* .latest_jewellery_slides .pricing_datas {
    padding-right: 5px;
    padding-left: 5px;
} */

.latest_jewellery_slides .pricing_datas.p-extra {
    padding-right: 9px;
    padding-left: 9px;
}

.banner_content_datas {
    position: relative;
}

.banner_content_parts {
    position: absolute;
    height: 100%;
    top: 0;
    width: 100%;
    left: 50%;
    max-width: 1920px;
    transform: translateX(-50%);
    padding: 45px 2vw 113.6px;
}

.inner_conts_parts {
    max-width: 434px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.top_banner_heads h1 {
    color: #fff;
    font-size: 47.14px;
    font-family: "Acumin Pro", sans-serif;
    font-weight: bold;
    margin-bottom: 6px;
}

.top_banner_heads p {
    font-size: 23.61px;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

.price_items {
    font-size: 14px;
    color: #fff;
    font-family: "Acumin Pro", sans-serif;
    font-weight: bold;
    margin-bottom: 18px;
}

.bottom_banner_foots p {
    font-size: 16px;
    color: #fff;
    margin: 0;
    line-height: 20px;
}

.banner_carousel_datas {
    margin-top: 0px;
}

section.home_banner {
    position: relative;
}

.custom-dots.banner_dots {
    background-color: rgba(0, 0, 0, 0.33);
    backdrop-filter: blur(4px);
}

.home_banner .custom_owl_navigation {
    width: 100%;
    max-width: 1920px;
    padding: 0px 2vw !important;
    margin: 0 auto;
    left: 0;
    bottom: 30px;
}

.home_banner .custom_owl_navigation .custom-nav {
    border: none;
    padding: 0;
}

.inner_faq_data .accordion .accordion-header {
    border: none;
}

.inner_faq_data .accordion .accordion-header button.accordion-button {
    border: none;
    color: #fff;
    font-size: 14px;
    border-radius: 0px;
    padding: 0px 0px;
    outline: none;
    background: none;
    box-shadow: none;
    font-family: "Acumin Pro", sans-serif;
    font-weight: normal;
}

.inner_faq_data .accordion .accordion-item {
    border: none;
    border-radius: 15px;
    background: #262626 !important;
}

.inner_faq_data .accordion .accordion-item button {
    padding: 19px 20px !important;
}

.inner_faq_data .accordion .accordion-item:not(:last-child) {
    margin-bottom: 10px;
    background: #262626 !important;
}

.inner_faq_data .accordion .accordion-item:nth-child(2n) {
    background: #262626;
}

.inner_faq_data .accordion .accordion-header button.accordion-button::after {
    content: "";
    background: url("../images/arrow_right.svg") no-repeat;
    width: 13px;
    height: 7px;
    background-size: contain;
    transition: all 0.5s ease-in-out 0s;
}

.inner_faq_data .accordion .accordion-header button.accordion-button:not(.collapsed)::after {
    background: url("../images/arrow_left.png") no-repeat;
    width: 13px;
    height: 7px;
    background-size: contain;
    transform: rotate(0deg);
}

.accordion-body p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
}

.accordion-body b {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.accordion-collapse {
    transition: height 0.35s ease;
}

.accordion-collapse.collapsing {
    transition: height 0.35s ease;
}

.accordion-button {
    transition: all 0.3s ease;
}

.inner_faq_data .accordion .accordion-item .accordion-body {
    padding: 0px 20px 19px 20px;
    text-align: left;
}

.inner_faq_data .accordion .accordion-header button.accordion-button[aria-expanded="true"]::after {
    transform: rotate(0deg);
}

.inner_faq_data h2 {
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 28px;
}

.faq_data_secs {
    padding-bottom: 45px;
}

.faq_data_secs .accordion-collapse {
    transition: height 0.35s ease !important;
}

.faq_data_secs .accordion-collapse.collapsing {
    transition: height 0.35s ease !important;
}

.faq_data_secs .accordion-button {
    transition: all 0.3s ease;
}

.collection_secs {
    padding: 45px 0px;
}

.coll_items_data ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.coll_items_data ul li a {
    font-size: 16px;
    color: var(--sb-text-muted);
    text-decoration: none;
    transition: all 0.5s ease-in-out 0s;
}

.coll_items_data ul li {
    width: calc(100% / 7);
}

.coll_items_data ul li:not(:last-child) {
    margin-bottom: 0.6em;
}

.inner_collections_data h2 {
    margin-bottom: 30px;
}

.coll_items_data ul li a:hover {
    color: #c9c9c9;
}

.coll_lists {
    display: flex;
    justify-content: space-between;
}

.main_category_secs {
    /* background: var(--sb-header-solid); */
    padding: 70px 0px;
}

.inner_category_data {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.footer_copyright {
    margin-top: 0px;
}

.collection_img {
    overflow: hidden;
}

.collection_img img {
    width: 100%;
    transition: all 0.5s ease-in-out 0s;
    transform: scale(1);
    height: 100%;
    object-fit: cover;
}

.category_list_cols:hover .collection_img img {
    transform: scale(1.1);
}

.category_list_cols {
    /* padding-top: 10px; */
    background: #262626;
    border-radius: 15px;
    position: relative;
    display: flex;
    flex-direction: column;
    /* padding-top: 10px; */
}

.collection_contents {
    padding: 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.collection_contents h3 {
    font-size: 14px;
    /* color: #373b3c; */
}

.collection_contents h3 a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.5s ease-in-out 0s;
}

.collection_contents h3 a:hover {
    color: #c9c9c9;
}

.collection_contents h3 a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.collection_contents p {
    margin: 0;
    font-size: 16px;
    /* color: rgb(55 59 60 / 66%); */
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

.top_short_banner {
    padding: 0px 0px 15px;
}

.breadcrumbs ul {
    list-style-type: none;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--sb-text-muted);
    padding: 5px 10px;
    max-width: fit-content;
    border-radius: 16px;
}

.breadcrumbs ul li {
    font-size: 12px;
    color: #373b3c;
    font-family: "Acumin Pro", sans-serif !important;
}

.breadcrumbs ul li:nth-child(even) {
    width: 16px;
    height: 16px;
    background-image: url("../images/arrow_right.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-size: 0;
}

.breadcrumbs ul li a {
    color: #373b3c;
    text-decoration: none;
    font-family: "Acumin Pro", sans-serif !important;
    transition: all 0.5s ease-in-out 0s;
}

.breadcrumbs ul li a:hover {
    color: #c9c9c9;
}

.title_banner h1 {
    font-size: 21px;
    color: #fff;
    font-family: "Acumin Pro", sans-serif;
    font-weight: 500;
    margin-bottom: 0;
}

.title_banner p {
    font-size: 16px;
    color: var(--sb-text-muted);
}

.breadcrumbs {
    /* margin-top: 30px;
  margin-bottom: 30px;*/
    display: inline-block;
    width: 100%;
    margin-bottom: 45px;
}

.jump_brands {
    display: flex;
    justify-content: flex-end;
}

.jump_brands a {
    color: var(--sb-text-muted);
    font-size: 14px;
    transition: all 0.5s ease-in-out 0s;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0%;
    text-decoration: none;
}

.jump_brands a:hover {
    color: #c9c9c9;
}

.jump_brands a.dropdown-toggle {
    background: unset !important;
    border: none;
    padding: 0;
    color: #fff;
    outline: none;
}

.jump_brands a.dropdown-toggle::after {
    content: "";
    background: url("../images/dropdown_arrow.svg") no-repeat;
    width: 10px;
    height: 8px;
    border: none;
    vertical-align: middle;
    margin-left: 5px;
    background-size: cover;
}

.jump_brands .dropdown .dropdown-menu a.dropdown-item {
    font-size: 13px;
    background: unset !important;
}

.top_product_select {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.dropdown.filter_cols a.dropdown-toggle {
    background: rgb(235 235 235 / 50%) !important;
    border: none;
    color: #373b3c;
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 400;
}

.dropdown.filter_cols a.dropdown-toggle::after {
    content: "";
    background: url("../images/dropdown_arrow.svg") no-repeat;
    width: 9px;
    height: 7px;
    border: none;
    vertical-align: middle;
    margin-left: 5px;
    background-size: cover;
}

.dropdown.filter_cols .dropdown-menu a.dropdown-item {
    font-size: 12px;
    background: unset !important;
    color: rgb(55 59 60 / 66%);
}

.latest_jewellery_slides.owl-carousel .owl-stage {
    display: flex;
}

.latest_jewellery_slides.owl-carousel .owl-stage .item {
    height: 100%;
}

.product_collection_lists {
    margin: 35px 0px 45px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 15px;
}

.details_slider .product_collection_lists,
.product_grid_data_secs .product_collection_lists {
    /* Full gap (row + column) = 15px, so cards are spaced 15px both horizontally AND
       vertically. `gap` (0,2,0) beats the mobile `.product_collection_lists{row-gap:0}`
       (0,1,0), which is why the old margin-bottom hack was needed — this replaces it.
       (The finance "New in Watches" grid had row-gap only + no column-gap, so its cards
       touched horizontally.) */
    gap: 15px;
}

.product_collection_lists .product_items_data .product_collection_image,
.latest_jewellery_slides .jewellery_item_datas .inn_prdct_img {
    height: 346px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.latest_jewellery_slides .jewellery_item_datas .inn_prdct_img {
    height: 426px;
}

.latest_jewellery_slides .jewellery_item_datas .inn_prdct_img.pcard-carousel-wrap>a {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product_collection_lists .product_items_data .product_collection_image img,
.latest_jewellery_slides .jewellery_item_datas .inn_prdct_img img {
    /* height: 100%; */
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover !important;
    object-position: center;
}

/* Make the .product_collection_lists cards (Shop Similar In Stock, New in Watches, related
   products, etc.) match the product-grid cards: unified rounded dark tile, equal card height,
   larger/bolder title, tight contents padding, and a subtle IMAGE zoom on hover. */

/* Card box: flex column + fill the grid row height, so every card is the SAME height and the
   price bottom-aligns regardless of how long the title is (1 vs 2 lines). Rounded dark tile
   like the grid card (was transparent + no radius). Scoped to items that actually contain a
   product image so the finance section's promo tiles (full image / "Lock into prices" block)
   are left alone. */
.product_collection_lists .product_items_data:has(.product_collection_image) {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #262626;
    border-radius: 16px;
}

.product_collection_lists .faq_items_data {
    height: auto;
    display: flex;
    flex-direction: column;
    background: #262626;
    border-radius: 16px;
}

.product_collection_lists .product_items_data .product_collection_contents {
    padding: 0px 15px 20px 15px !important;
    gap: 12px;
    /* grow to fill the card so the price can be pushed to the bottom */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
}

/* Push price/finance to the bottom of the card → all prices align across the row. */
.product_collection_lists .product_items_data .pricing_conts {
    margin-top: auto;
}

.product_collection_lists .product_items_data .product_collection_contents h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product_collection_lists .product_items_data .product_collection_image img {
    transition: transform 0.35s ease;
}

/* Cancel the old "scale the whole tile" hover; zoom the image instead (tile has overflow
   hidden, so it clips cleanly like the grid). */
.product_collection_lists .product_items_data .product_collection_image:hover {
    transform: none;
}

.product_collection_lists .product_items_data .product_collection_image:hover img {
    transform: scale(1.08);
}

/* Home "Latest In …" carousels — mirror the product-grid image treatment: the whole
   product is contained (no crop) inside a square block and VERTICALLY CENTRED, so every
   card reads the same height with a consistent image size. `!important` beats the global
   `.fill { object-fit: cover }` used on the jewellery carousel images. */
.latest_jewellery_slides .pcard-slides,
.latest_jewellery_slides .pcard-track,
.latest_jewellery_slides .inn_prdct_img_jewellery_home>a {
    height: 100%;
}

.latest_jewellery_slides .pcard-slide,
.latest_jewellery_slides .inn_prdct_img img,
.latest_jewellery_slides .inn_prdct_img_jewellery_home img {
    /* height: 100% !important; */
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover !important;
    object-position: center;
}

.latest_jewellery_slides .jewellery_item_datas .prct_content_infos {
    margin-top: auto;
    padding: 0px 15px 20px 15px;
}

.latest_jewellery_slides .jewellery_item_datas .prct_content_infos.d-flex {
    /* #432: equal 15px padding on all four edges, tighter title/price gap */
    padding: 15px;
    margin-top: auto;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.latest_jewellery_slides .jewellery_item_datas .prct_content_infos .pricing_datas {
    line-height: 1;
}

/* #432: homepage cards match the listing grid — white title, reserved 2-line
   title box, and a price block with a bright current price beside a muted struck
   original, plus finance line. */
/* Home cards are bottom-anchored, so the price already aligns across cards
   regardless of title length; keep the title reserve to one line (calc(15px*2))
   and let two-line titles grow naturally (#432). */
.latest_jewellery_slides .jewellery_item_datas .prct_content_infos h3 {
    min-height: calc(15px * 2);
}
.latest_jewellery_slides .jewellery_item_datas .prct_content_infos h3 a {
    color: #fff !important;
}
.latest_jewellery_slides .jewellery_item_datas .pricing_datas,
.latest_jewellery_slides .jewellery_item_datas .pricing_datas .price_value,
.latest_jewellery_slides .jewellery_item_datas .pricing_datas .price_value > span {
    color: #fff !important;
}
.latest_jewellery_slides .jewellery_item_datas .pricing_datas .price_value del {
    color: var(--sb-text-muted) !important;
}

.product_collection_contents {
    padding: 0px 15px 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #262626;
    position: relative;
    z-index: 99
}

.product_collection_contents h3 {
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product_collection_contents h3 a {
    text-decoration: none;
    color: #ffffff;
    position: relative;
    transition: all 0.5s ease-in-out 0s;
    font-size: 14px;
}

.product_collection_contents h3 a:hover {
    color: #ffffff;
    opacity: 0.8;
}

.price_value {
    font-size: 14px;
    color: #e6e6e6;
    font-family: "Acumin Pro", sans-serif;
    font-weight: normal !important;
}

.price_value span {
    display: block;
    font-size: 14px;
    color: rgb(55 59 60 / 66%);
    font-family: "Acumin Pro", sans-serif;
    font-weight: normal;
}

.product_collection_image img {
    width: 100%;
    transform-origin: center;
    transform: scale(1);
    transition: transform 0.45s ease;
}

.product_collection_image:hover img {
    transform: scale(1.05);
}

.product_items_data {
    position: relative;
}

.faq_items_data {
    position: relative;
    background: #262626;
    border-radius: 16px;
    padding: 15px;
    height: auto;
    display: flex;
    flex-direction: column;
}

.faq_items_data .inner_faq_data {
    height: auto;
    min-height: 0;
}

.product_collection_contents h3 a::before {
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.order_success_secs {
    background: url("../images/order_success_bg.png");
    width: 100%;
    padding: 140px 0px;
    background-size: cover;
    background-position: center;
    height: 720px;
}

.booking_success_secs {
    width: 100%;
    padding: 140px 0px;
    background-size: 100% !important;
    background-position: center;
    height: 720px;
}

.desktop-d-none {
    display: none !important;
}

.iframe-adjust iframe {
    width: 387px !important;
    height: 327px !important;
}

.iframe-adjust .watched_book_repairs {
    justify-content: start !important;
}

.iframe-adjust .end-area {
    width: 392px !important;
}

.iframe-adjust .schedule_heading {
    font-weight: 500;
}

.iframe-adjust .watched_book_repairs {
    margin-top: 15px !important;
}

.iframe-adjust .watched_book_repairs a {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.thank_you_message {
    background: rgb(255 255 255 / 90%);
    padding: 15px;
    border-radius: 9px;
    text-align: center;
    backdrop-filter: blur(15.300000190734863px);
}

.thank_you_message h1 {
    font-size: 46px;
    color: #373b3c;
    line-height: 141%;
    margin: 15px 0px 5px;
}

.thank_you_message h5.order_nums {
    font-size: 18px;
    color: #373b3c;
    margin: 0;
}

.inner_success_data {
    max-width: 660px;
    margin: 0 auto;
}

.confirmation_message {
    background: rgb(255 255 255 / 85%);
    padding: 15px;
    border-radius: 9px;
    display: flex;
    gap: 15px;
    font-size: 14px;
    color: #373b3c;
    align-items: center;
    backdrop-filter: blur(15.300000190734863px);
}

.confirmation_message a {
    color: #373b3c;
}

.main_confirmation_messages {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}

.confirmation_message .img-icon {
    width: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bottom_support_datas {
    padding: 45px 0px 100px;
}

.right_404_data.contact_support_infos {
    max-width: 393px;
}

.order_calcelled_secs .inner_success_data {
    max-width: 460px;
}

.order_calcelled_secs .inner_success_data .thank_you_message {
    padding: 15px;
}

.trustpilot-section {
    width: 60%;
    display: block;
    padding: 30px 0 0;
    margin-top: 50px;
}

.order_calcelled_secs .inner_success_data .thank_you_message h1 {
    line-height: 130%;
    margin-bottom: 15px;
}

.main_blog_data_sec {
    padding: 30px 0px;
}

.main_blog_data_sec .heading_data {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 23px;
}

.heading_data h1 {
    font-size: 21px;
    color: #fff;
    font-weight: 500;
}

.heading_data p {
    font-size: 16px;
    /* color: rgb(55 59 60 / 66%); */
    margin: 0;
}

.heading_data {
    margin-bottom: 25px;
}

.blog_lists_data {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.owl-stage {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.home_topcategory {
    width: 100%;
    display: block;
    margin-top: -30px;
}

.home_topcategory .sectiontitle {
    width: 100%;
    padding: 30px 10%;
    background: #f3f5f6;
}

.home_topcategory .sectiontitle a {
    font-family: "Acumin Pro", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    letter-spacing: 0;
    color: #373b3c;
    text-decoration: none;
}

.blog_img img {
    width: 100%;
}

.blog_conts {
    padding: 30px 30.5px 36px 30.5px;
}

.blog_conts>a {
    font-weight: 400;
    font-size: 14px;
    display: inline-flex;
    line-height: 100%;
    letter-spacing: 0;
    text-decoration: none;
    color: #373b3c;
    margin-top: 15px;
    flex-direction: column;
    align-items: flex-start;
}

/* Removed after effect from Read More links
.blog_conts > a:after {
  content: "";
  width: 8px;
  height: 1px;
  background: #373b3c;
  display: inline-flex;
}
*/

.blog_conts h3 {
    font-size: 14px;
    margin-bottom: 15px;
}

.blog_lists_data {
    row-gap: 23px;
}

.blog_conts h3 a {
    color: #E6E6E6;
    text-decoration: none;
    transition: all 0.5s ease-in-out 0s;
    font-size: 14px;
}

.blog_conts h3 a:hover {
    color: #c9c9c9;
}

.blog_items {
    position: relative;
    background: #262626;
    border-radius: 20px;
    overflow: hidden;
}

.blog_conts h3 a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.blog_conts p {
    margin: 0;
    font-size: 16px;
    /* color: rgb(55 59 60 / 66%); */
}

.main_blog_data_sec .blog_navigation {
    margin-top: 15px;
    margin-bottom: 0px;
}

.booking-success-header {
    display: block;
    padding: 30px 0;
}

.booking-success-header h1 {
    margin: 0px;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #373b3c;
}

.booking-here {
    padding-bottom: 0px !important;
}

.booking-here .faq_conts_data p {
    font-size: 14px;
}

.booking-here .faq_conts_data h3 {
    font-size: 14px;
    font-weight: 500;
}

.booking-here .week_times {
    justify-content: space-between;
}

.booking-here .open_now_data {
    padding: 15px 0;
}

.booking-here .schedule_heading {
    margin-top: 15px;
    margin-bottom: 7px;
    font-size: 14px;
}

.booking-here .watched_book_repairs {
    margin-bottom: 30px;
}

.blog_navigation .custom-nav {
    border: none;
    padding: 0;
}

.blog_dots {
    display: flex;
    align-items: center;
    background: #00000054;
    padding: 5px 14px;
    border-radius: 20px;
    font-weight: 400;
    color: #fff;
    min-width: 50px;
    height: 28px;
    justify-content: center;
    backdrop-filter: blur(4px);
    white-space: nowrap;
}

.blog_dots span {
    font-size: 14px;
}

.main_services_secs {
    margin-bottom: 45px;
}

.service_top_head {
    padding: 30px 0;
}

.service_top_head .heading_data {
    margin: 0px 0px 0px 0px;
    display: inline-flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.service_details_banner {
    background: url("../images/service_detail_banner.png");
    padding: 30px 0 75px 0px;
    height: 614px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/*.service_top_head .breadcrumbs*/
.service_details_banner .breadcrumbs {
    /* padding: 0px 0px 30px; */
    color: #fff;
    margin-top: 50px;
}

.service_details_banner .upper_service_details_data {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/*.service_top_head .breadcrumbs ul li a,
.service_top_head .breadcrumbs ul li,*/
.service_details_banner .breadcrumbs ul li a,
.service_details_banner .breadcrumbs ul li {
    color: #fff;
}

.inner_service_details {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    height: 100%;
    justify-content: space-between;
}

.repair_btn {
    background: #fff;
    width: max-content;
    font-size: 16px;
    color: #000;
    text-decoration: none;
    padding: 13px 60px;
    font-weight: bold;
    transition: all 0.5s ease-in-out 0s;
    width: 100%;
    max-width: 393px;
    text-align: center;
    border-radius: 30px;
}

.left_cleanings_data {
    display: inline-block;
    max-width: 632px;
}

/*.repair_btn:hover {
  background: #fff;
  color: #373B3C;
}
*/
.repair_btn:hover {
    background: #000;
    color: #fff;
}

.upper_service_details_data h1 {
    font-size: 48px;
    color: #fff;
}

.upper_service_details_data p {
    margin: 0;
    font-size: 23px;
    color: #fff;
}

.service_details_banner .container {
    height: 100%;
}

.srvice_details_conts_datas {
    padding: 60px 0px;
}

.inner_how_works_lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.unlock_how_works .inner_how_works_lists {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

@media (min-width: 426px) {
    .unlock_how_works .inner_how_works_lists {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.question_answers_opens {
    padding: 28.5px 20px;
    background: #262626;
    display: flex;
    gap: 15px;
    align-items: center;
}

.question_answers_opens.border-rounded:first-child {
    border-top-left-radius: 15px;
}

.question_answers_opens.border-rounded:last-child {
    border-bottom-right-radius: 15px;
}

.faq_numbers {
    width: 20px;
    height: 20px;
    border: 0.6px solid #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #FFF;
}

.faq_conts_data h3 {
    font-size: 16px;
    color: #FFF;
}

.faq_conts_data p {
    font-size: 16px;
    /* color: var(--sb-text-muted); */
    margin: 0;
    max-width: 70%;
    line-height: 120%;
}

.faq_conts_data {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jewellery_cleaning_datas .left_cleanings_data h2 {
    margin-bottom: 10px;
}

.question_answers_opens:nth-child(3n-2) {
    background: #373b3c;
}

.col-2n .question_answers_opens:nth-child(2n-1) {
    background: #f8f8f8;
}

.jewellery_cleaning_datas {
    margin: 45px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.right_cleaning_data {
    display: flex;
    justify-content: flex-end;
}

.left_cleanings_data p {
    color: var(--sb-text-muted);
    margin: 0;
    font-size: 16px;
}

.cleaning_images {
    display: flex;
    margin: 30px 0px 15px;
    gap: 30px;
}

.cleaning_images img:last-child {
    max-width: 227px;
}

.visit_us a {
    font-size: 16px;
    color: var(--sb-text-muted);
    transition: all 0.5s ease-in-out 0s;
}

.visit_us a:hover {
    color: #c9c9c9;
}

.service_details_faqs {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
}

.open_now_data h2 {
    color: 3eb226;
}

.color-inherit h2 {
    color: #373b3c;
}

.faq_left_maps iframe {
    border-radius: 10px;
    margin: 13px 0px 30px;
    overflow: hidden;
}

.open_now_data {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.week_times {
    display: flex;
    gap: 30px;
}

.week_times p {
    margin: 0;
    font-size: 16px;
}

.service_faqs_right.inner_faq_data {}

.how_it_works_datas {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.book_repair_data {
    padding-top: 45px;
    margin-bottom: 15px;
}

.repair_banner_contents {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.repair_banner_contents h1 {
    font-size: 48px;
    /* color: #373b3c; */
}

.repair_banner_contents p {
    font-family: "Acumin Pro", sans-serif;
    font-size: 16px;
    margin: 0px;
    font-weight: 400;
    /* color: #373b3ca8; */
    font-style: normal;
    line-height: 100%;
}

.repair_watch_form .submit_data {
    margin-top: 30px;
    display: inline-block;
    width: 100%;
}

.book_repair_data img {
    width: 100%;
}

.repair_watch_bottom_conts {
    position: relative;
    /* No black bar — the area above the shelf is the page background (blends seamlessly). */
    background: transparent;
    /* Room for the lighter "shelf" that sits BELOW the watches. */
    padding-bottom: 0px;
    overflow: hidden;
}

/* Lighter shelf bar at the very bottom. Its TOP edge lines up with the bottom of the
   watch image (where the watches cut off), so the watches appear to rest on it. */
.repair_watch_bottom_conts::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    background: #262626;
    z-index: 0;
}

.repair_watch_img {
    position: relative;
    z-index: 1;
    /* above the shelf */
    max-width: 606px;
    margin: 0 auto;
    display: flex;
}

.repair_watch_form {
    max-width: 606px;
    margin: 45px auto 60px;
}

.service-form-heading {
    margin-top: 45px;
    margin-bottom: 45px;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
}

.form-group label {
    font-size: 16px;
    color: #E6E6E6;
    font-family: "Acumin Pro", sans-serif;
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
}

.form-group label span {
    /* color: #373b3ca8; */
}

.form-group label astrick {
    color: #E6E6E6;
}

.form-group .form-control {
    height: 60px;
    width: 100%;
    border: 1px solid #fff;
    border-radius: 30px;
    outline: none;
    padding: 20px 20px;
    font-size: 15px;
    color: #fff;
    box-shadow: none;
    background: transparent;
}

.form-group {
    margin-bottom: 15px;
}

.submit_data .btn.btn-primary {
    background: #373b3c;
    font-size: 16px;
    color: #fff;
    border-radius: 0px;
    width: 100%;
    padding: 12px;
    font-family: "Acumin Pro", sans-serif;
    font-weight: bold;
    transition: all 0.5s ease-in-out 0s;
    border: none;
}

.submit_data .btn.btn-primary:hover {
    background: #c9c9c9;
}

.repair_watch_img img {
    max-width: 100%;
    margin: 0 auto;
}

.submit_data {}

.repair_watch_form .form-group select.form-control {
    background: url("../images/select_down_arrow.png");
    background-repeat: no-repeat;
    background-position: 97% 50%;
}

.upload-btn-wrapper {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
}

.upload-btn-wrapper .btn {
    border: none;
    color: #373b3c;
    background-color: #ebeded;
    padding: 13px 20px;
    border-radius: 0px;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    cursor: pointer;
    pointer-events: none;
    border-radius: 30px;
}

.upload-btn-wrapper input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    font-size: 16px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.main_contact_datas {
    padding: 30px 0px 45px;
}

.contact_data {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact_data p,
.contact_data p a,
.contact_data ul li {
    font-size: 16px;
    color: var(--sb-text-muted);
    text-decoration: none;
    margin: 0;
}

.day_time {
    display: flex;
    gap: 40px;
}

.day_time ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.day_time ul li {
    font-size: 16px;
    /* color: rgb(55 59 60 / 66%); */
}

.contact_message_form h3,
.address_datas h3 {
    font-size: 16px;
    /* color: #373b3c; */
}

.address_datas p {
    font-size: 16px;
    /* color: rgb(55 59 60 / 66%); */
}

.contact_map_address {
    width: 100%;
    overflow: hidden;
}

.contact_map_address iframe {
    border-radius: 10px;
    max-width: 100%;
    width: 100%;
    display: block;
}

.contact_data:not(:last-child) {
    margin-bottom: 40px;
}

.contact_data h3 {
    font-size: 14px;
    color: #E6E6E6;
}

.contact_submit_btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}

.contact_submit_btn button.btn.btn-primary {
    background: #373b3c;
    font-size: 16px;
    color: #fff;
    border-radius: 30px;
    padding: 12px 50px;
    font-family: "Acumin Pro", sans-serif;
    font-weight: bold;
    transition: all 0.5s ease-in-out 0s;
    border: none;
}

.form-group textarea.form-control {
    height: 170px;
}

.form-control::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--sb-text-muted);
}

.form-control::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--sb-text-muted);
}

.form-control:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--sb-text-muted);
}

.form-control:-moz-placeholder {
    /* Firefox 18- */
    color: var(--sb-text-muted);
}

.main_blog_details_datas {
    padding: 0px 0px;
}

.inner_main_headings h1 {
    font-size: 48px;
    color: #373b3c;
    margin-bottom: 5px;
}

.inner_main_headings {
    max-width: 75%;
}

.inner_main_headings p.date_time {
    font-size: 23px;
    color: rgb(55 59 60 / 66%);
    margin: 0;
    text-transform: uppercase;
}

.main_blog_imgs img {
    width: 100%;
}

.main_blog_imgs {
    margin: 30px 0px 0px;
}

.inner_blog_contents p {
    font-size: 16px;
    margin-bottom: 20px;
}

.inner_blog_contents h2 {
    margin-bottom: 15px;
}

.inner_blog_contents {
    padding-bottom: 30px;
}

.inner_blog_contents h3 {
    font-size: 16px;
    margin-bottom: 15px;
}

.inner_blog_contents img {
    margin-bottom: 20px;
    max-width: 100%;
}

.inner_blog_contents ul li {
    font-size: 16px;
}

.inner_blog_contents ul li:not(:last-child) {
    margin-bottom: 6px;
}

.main_faq_page {
    padding: 30px 0px;
}

.faqs_headings {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faqs_headings h1 {
    font-size: 21px;
    font-weight: 500;
}

.faqs_headings p {
    color: rgb(55 59 60 / 66%);
    font-size: 16px;
    margin: 0;
}

.faq_categories_datas ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    border-bottom: 1px solid #f3f5f6;
    gap: 5px;
}

.subcategories_datas {
    margin: 15px 0px;
}

.faq_categories_datas ul li a {
    background: #f3f5f6;
    color: rgb(55 59 60 / 66%);
    font-size: 14px;
    text-decoration: none;
    padding: 8px 17px;
    border-radius: 8px 8px 0px 0px;
    font-family: "Acumin Pro", sans-serif;
    font-weight: 500;
}

.faq_categories_datas ul li {
    display: flex;
}

.faq_categories_datas ul li.active a {
    color: #373b3c;
}

.faqs_headings {
    margin-bottom: 15px;
}

.main_faq_page_accordion {
    margin-bottom: 15px;
}

.inner_blog_contents a {
    color: #373b3c;
    transition: all 0.5s ease-in-out 0s;
}

.inner_blog_contents a:hover {
    color: #c9c9c9;
}

/*------------------- Product page styling ---------------------*/
.product-main {
    padding-top: 84px;
}

.product-main .breadcrumbs {
    margin-bottom: 37px;
}

.latest_jewellery_secs.shop-in-stock {
    background: transparent;
    padding-bottom: 45px;
}

.shop-in-stock h2 {
    margin-bottom: 15px;
}

.shop-in-stock .prct_content_infos h3 {
    font-size: 14px;
    text-decoration: none;
}

.shop-in-stock .pricing_datas {
    font-size: 14px;
}

.shop-in-stock .prct_content_infos {
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.shop-in-stock .prct_content_infos h6 {
    margin-top: -10px;
    margin-bottom: 0;
    width: 100%;
    font-weight: 400;
    font-size: 10px;
    color: #373b3ca8;
}

.product-main-inner .col-lg-4 {
    width: 37%;
}

.product-main-inner .col-lg-7 {
    width: 55%;
}

.product-catagory {
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    margin-bottom: 5px;
    font-family: "Acumin Pro", sans-serif;
}

.product-catagory span {
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #373b3c80;
}

.product-name {
    margin: 20px 0;
    /* width: 70%; */
}

.product-details .product-price {
    font-weight: 400;
    font-size: 18px;
    /* margin: 0px 0 30px; */
    display: flex;
    width: 100%;
    align-items: center;
    gap: 15px;
}

.product-details .product-price .divider-line {
    height: 1px;
    width: 100%;
    background: #e7e7e7;
}

.product-details .product-price .price-icon {
    display: inline-flex;
    align-items: center;
    gap: 15px;
}

.product-details .product-price .price-icon a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.product-description p {
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
    color: #373b3ca8;
}

.product-description h5 {
    color: #373b3c;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 15px;
}

.product-description {
    margin-block: 40px;
}

.product-details-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.product-details-buttons .btn,
.product-details-buttons form,
.product-details-buttons .quantity-wrapper,
.product-details-buttons .quantity-error-msg,
.checkout-payment-details .btn.btn-primary.btn-lg {
    width: 100%;
}

.product-details-buttons form .btn {
    width: 100%;
}

.product-details-buttons .btn,
.checkout-payment-details .btn.btn-primary.btn-lg {
    /* background: #373b3c; */
    border-radius: 0;
    border: none;
    height: 50px;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
}

.product-details-buttons a.btn {
    background-color: #ebeded;
}

.product-details-buttons .btn:active {
    background: #373b3c;
}

.product-details-buttons>* {
    margin-bottom: 10px;
}

.product-details-buttons>*:last-child {
    margin-bottom: 0;
}

.btn.finance-cart-btn {
    background: #5926b8 !important;
    color: #fff !important;
}

.btn.finance-cart-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#finance-see-calc-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn.gpay-cart-btn {
    background: #000 !important;
}

.btn.call-the-shop-btn {
    background: #ebeded !important;
    color: #373b3c !important;
}

.product-tabs button.btn-primary {
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    width: 100%;
    background: transparent !important;
    border: none;
    /* color: #000000 !important; */
    text-align: left;
    border-top: 1px solid #e7e7e7 !important;
    border-radius: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.product-tabs .trustpilot-widget {
    padding-top: 30px;
    border-top: 1px solid #e7e7e7 !important;
}

.plus-minus {
    display: flex;
    width: 60px;
    height: 60px;
    /* border-left: 1px solid #e7e7e7; */
    align-items: center;

    justify-content: end;
}

.plus-minus:after {
    color: #cbcbcb;
    content: "";
    font-size: 20px;
    display: inline-block;
    font-family: auto;
    background: url("../images/arrow_right.svg") no-repeat;
    width: 12px;
    height: 12px;
    background-size: contain;
    background-position: center;
}

.offcanvas {
    box-shadow: 0px 4px 15px 0px #00000020;
    padding: 50px 70px !important;
    width: 480px !important;
    border: none !important;
}

.flex-offcanvas {
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    overscroll-behavior-y: contain;
}

.flex-offcanvas .offcanvas-header {
    position: absolute;
    right: 0;
    top: 80px;
    z-index: 999;
}

.flex-offcanvas .offcanvas-body {
    position: relative;
    width: 333px !important;
    padding: 0 !important;
    z-index: 20;
    overflow: scroll;
}

.flex-offcanvas .offcanvas-body .offcanvas-inner {
    margin-top: 130px;
}

.offcanvas-backdrop {
    display: none;
}

.offcanvas-body {
    margin-top: 20px;
    padding: 0px 76px 80px 0px;
}

.offcanvas-inner p {
    font-size: 16px;
    font-family: "Acumin Pro", sans-serif;
}

.offcanvas-inner h2 {
    font-weight: 700;
    font-style: Bold;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    font-family: "Acumin Pro", sans-serif;
}

/*#offcanvasRight1 .offcanvas-body {
  margin-top: 0px;
}*/

#offcanvasRight1 .offcanvas-body h2 {
    margin-bottom: 15px;
    font-weight: 700;
    margin-right: 36px;
}

.limited-lifetime-warranty {
    color: #373b3c;
    display: flex;
    flex: 1;
    align-items: center;
}

.offcanvas-inner {
    display: flex;
    flex-direction: column;
    font-family: "Acumin Pro", sans-serif;
}

.offcanvas-inner ul {
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid #e7e7e7;
}

.offcanvas-inner ul li {
    padding-block: 20px;
    border-bottom: 1px solid #e7e7e7;
    display: flex;
    align-items: center;
    gap: 30px;
}

.offcanvas-inner ul li span {
    font-weight: 500;
    font-size: 14px;
    width: 60px;
    /* color: #000000; */
}

.offcanvas-inner ul li p {
    margin: 0;
    color: var(--sb-text-muted);
    font-size: 16px;
}

/*----------Product page slider----------*/

.gallery-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 38px;
}

.gallery-main {
    aspect-ratio: 1;
    /* display: flex; */
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    height: 512px;
}

.gallery-main .swiper-wrapper,
.gallery-main .swiper-slide {
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
}

.gallery-main .swiper-slide img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

/* Bulletproof: the main gallery image (productDetails + product_outofstock share this
   .gallery-main markup) must ALWAYS show the whole product — `contain`, never cropped —
   regardless of breakpoint or the generic `.swiper-slide img { object-fit: cover }`. */
body.theme-v3 .gallery-main .swiper-slide img,
body.theme-v3 .gallery-container .gallery-main .swiper-slide img {
    /* #429: Spencer asked for the main image "full size, not cropped" — show the WHOLE
       product (contain), never crop it, matching the client's repeated request. */
    object-fit: contain !important;
    object-position: center !important;
}

.slider-arrowscustom {
    margin-top: 16px;
}

.swiper-slide {
    cursor: pointer;
}

.swiper-slide-count {
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
}

.gallery-main .swiper-button-prev,
.gallery-main .swiper-button-next {
    position: unset;
    color: #000;
    margin: 0px 8px 0;
    height: auto;
}

.gallery-main .swiper-button-prev::after,
.gallery-main .swiper-button-next::after {
    font-size: 14px;
}

.gallery-title {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 16px;
    font-weight: 700;
    text-align: right;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    color: #ffffff;
    display: none;
}

.swiper-slide-active .gallery-title {
    -webkit-animation: slide-in 0.3s ease-in both;
    animation: slide-in 0.3s ease-in both;
}

.gallery-thumbs {
    order: -1;
    width: 93px;
    height: 484px;
    overflow: hidden;
    flex: 0 0 93px;
}

.gallery-thumbs .swiper-slide img {
    transition: 0.3s;
    height: 93px;
    border-radius: 16px;
}

.gallery-thumbs .swiper-slide-active {
    opacity: 0.9;
}

.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

@-webkit-keyframes slide-in {
    from {
        opacity: 0;
        right: -50%;
    }
}

@keyframes slide-in {
    from {
        opacity: 0;
        right: -50%;
    }
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-main-inner {
    justify-content: space-between;
}

.swiper-vertical>.swiper-wrapper .swiper-slide {
    padding-bottom: 5px;
}

/*----------my-bag-popup----------*/
.my-bag-popup .modal-header {
    padding: 30px 20px;
    border: none;

    border-radius: 20px 20px 0 0;
}

.my-bag-popup .modal-title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.cta-modal .modal-sub-title {
    font-size: 14px;
    margin-top: 10px;
}

.my-bag-popup .modal-footer {
    padding: 30px 20px;
    border: none;
}

.my-bag-popup .product-details-buttons {
    margin: 0;
    width: 100%;
}

.my-bag-popup .product-details-buttons .btn:not(:last-child) {
    margin-bottom: 15px;
}

.my-bag-popup .modal-body {
    padding: 0 20px;
}

.my-bag-item {
    display: block !important;
    align-items: center;
    gap: 10px;
}

.my-bag-item .inn_prdct_img {
    width: 100%;
    max-width: 50%;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    .my-bag-item .inn_prdct_img {
        width: 100%;
        margin-right: 2%;
        max-width: 48%;
    }
}

.my-bag-item .inn_prdct_img img {
    width: 100%;
}

.my-bag-item .prct_content_infos h3,
.my-bag-item .pricing_datas {
    font-size: 16px;
    display: flex;
    flex-direction: row !important;
    justify-content: space-between;
}

.my-bag-item .product-description {
    margin: 10px 0 15px;
}

.my-bag-item .product-description * {
    color: #373b3ca8;
    font-size: 14px;
    font-weight: 400;
    font-family: "Acumin Pro", sans-serif;
}

.pricing_datas+h6 {
    text-decoration: underline;
    font-size: 14px;
    font-weight: 400;
    margin: 5px 0 0;
    font-family: "Acumin Pro", sans-serif;
}

.my-bag-item+.my-bag-item {
    margin-top: 20px;
}

.my-bag-popup .modal-content {
    border-radius: 20px 20px 0 0;
    border: none;
    background: rgb(255 255 255 / 95%);
    backdrop-filter: blur(8px);
}

.my-bag-popup.show~.modal-backdrop {
    display: none;
}

.my-bag-popup .prct_content_infos {
    flex: 1;
    margin-left: 2%;
    margin-top: 2%;
}

.my-bag-popup .modal-dialog {
    max-width: 400px;
    margin: 0 70px 0 auto;
    align-items: flex-end;
    min-height: 100%;
}

/*----------Checkout-popup----------*/
.checkout-popup .modal-dialog {
    max-width: 1212px;
}

/* Embedded popup - don't extend beyond page */
.checkout-popup .modal-content {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.checkout-main {
    padding: 20px 18px;
    border-radius: 8px;
    gap: 20px;
    display: flex;
    justify-content: space-between;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #262626;
}

/* Left column with sticky button */
.checkout-pop-left {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.checkout-left-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.checkout-form-scrollable {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
    margin-right: -10px;
}

.checkout-button-sticky {
    position: sticky;
    bottom: 0;
    background: transparent;
    padding-top: 0;
    margin-top: 42px;
    border-top: none;
    z-index: 10;
    flex-shrink: 0;
}

/* Restore original Complete Payment button styling */
.checkout-button-sticky .btn.btn-primary.btn-lg {
    background: #373b3c;
    width: 100%;
    border-radius: 0;
    border: none;
    height: 50px;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    color: #fff;
    margin-top: 0;
}

.checkout-button-sticky .btn.btn-primary.btn-lg:hover {
    background: #000;
}

/* Right column with scrollable product list */
.checkout-pop-right {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Multi-product layout - ensure proper spacing */
.checkout-pop-right.checkbox-new-right {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Images stay fixed, product list scrolls */
.checkout-pop-right .checkout-img,
.checkout-pop-right .checkout-img-line-strip {
    flex-shrink: 0;
}

.checkout-pop-right .checkout-img-line-strip {
    margin: 20px 0;
}

.checkout-product-list-scrollable {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* Custom scrollbar styling */
.checkout-form-scrollable::-webkit-scrollbar,
.checkout-product-list-scrollable::-webkit-scrollbar {
    width: 6px;
}

.checkout-form-scrollable::-webkit-scrollbar-track,
.checkout-product-list-scrollable::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.checkout-form-scrollable::-webkit-scrollbar-thumb,
.checkout-product-list-scrollable::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.checkout-form-scrollable::-webkit-scrollbar-thumb:hover,
.checkout-product-list-scrollable::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Single product layout adjustments */
.checkout-pop-right:not(.checkbox-new-right) {
    display: flex;
    flex-direction: column;
}

.checkout-pop-right:not(.checkbox-new-right) .checkout-img {
    flex-shrink: 0;
}

.checkout-pop-right:not(.checkbox-new-right) .checkout-pop-img-text {
    flex-shrink: 0;
}

.finance-modal .checkout-payment-details {
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 20px;
}

.finance-modal form {
    display: flex;
    flex-direction: column;
    height: 624px;
    gap: 5px;
    margin-top: 0px !important;
}

.finance-modal .checkout-pop-right {
    height: 624px;
}

.finance-modal form .modal-middle-finace {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
}

.finance-modal form .modal-middle-finace p {
    font-weight: 400;
    font-size: 12px;
    line-height: 142%;
    letter-spacing: 0%;
    color: white;
    margin-bottom: 25px;
}

.finance-modal form .modal-middle-finace .logo-brand {
    width: 110px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
}

/* v3 checkout Hitachi/Novuna "Before Proceeding" modal — single column (no product image).
   Make .checkout-main the single scroll container and let the column overflow:visible so the
   Cancel/Proceed buttons are never clipped (same approach as the product-details finance modal). */
#hitachi_modal .modal-dialog {
    max-width: 480px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#hitachi_modal .checkout-main {
    align-items: flex-start;
    overflow-y: auto;
}

#hitachi_modal .checkout-pop-left {
    width: 100%;
    overflow: visible;
}

/* v3 "Finance available from … per month" note on the checkout calculator */
.hitachi-payment .finance-available-note {
    text-align: center;
    margin: 12px 0;
    font-family: "Acumin Pro", sans-serif;
}

.hitachi-payment .finance-available-note label {
    margin: 0;
}

.checkout-pop-right img {
    border-radius: 8px;
    width: 100%;
    object-fit: cover;
}

/* Single product layout - image can take full height */
.checkout-pop-right:not(.checkbox-new-right) img {
    height: 100%;
}

/* Multi-product layout - smaller image height so product list is visible */
.checkout-pop-right.checkbox-new-right img {
    height: 300px;
    flex-shrink: 0;
    object-fit: cover;
}

.checkout-pop-img-text {
    background: #1a1a1a;
    padding: 15px 25px;
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    border-radius: 8px;
}

.checkout-pop-img-text h3 {
    font-size: 21px;
    margin-bottom: 5px;
}

.checkout-pop-img-btm-text h4 {
    color: #c9c9c9;
    margin: 0;
    text-transform: uppercase;
    font-size: 14px;
    display: inline-block;
}

.checkout-tags {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: end;
    gap: 5px;
}

.checkout-pop-img-btm-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkout-tags li {
    font-size: 16px;
    background: #f8f8f8;
    border-radius: 10px;
    padding: 8px 15px;
    line-height: normal;
    font-family: "Acumin Pro", sans-serif;
}

.checkout-popup button.btn-close {
    position: absolute;
    right: -50px;
    top: 0;
    background-color: #ffffff;
    opacity: 1;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: none;
}

.checkout-pop-left .modal-title {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}

.checkout-payment-details {
    padding: 57px 38px 15px;
}

.checkout-payment-details p {
    font-size: 12px;
    font-weight: 400;
    font-style: regular;
    color: #000000cc;
    font-family: "Acumin Pro", sans-serif;
}

.checkout-payment-details form {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
}

.checkout-payment-details form .form-label {
    color: #000000a8;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 5px;
    font-family: "Acumin Pro", sans-serif;
}

form .form-control,
form .form-select {
    font-size: 14px;
    color: #000;
    padding: 10px;
    line-height: normal;
    font-family: "Acumin Pro", sans-serif;
    border: 1px solid #ececec;
    height: 40px;
}

.checkout-payment-details .row>* {
    margin-top: 15px;
}

.shipping-address {
    display: flex;
    align-items: end;
    gap: 5px;
    margin-bottom: 5px;
}

.checkout-payment-details .btn.btn-primary.btn-lg {
    margin-top: 42px;
    font-weight: 400;
}

.shipping-address button.btn.btn-primary {
    background: #ebeded;
    border: none;
    height: 40px;
    font-size: 14px;
    text-align: center;
    color: #373b3c;
    width: 120px;
    border-radius: 4px;
}

.form-check:not(:last-child) {
    margin-bottom: 15px;
}

.form-check:before {
    content: "";
    position: absolute;
    width: 21px;
    height: 21px;
    border: 1px solid #ececec;
    left: 0;
    border-radius: 4px;
    top: 2px;
    background: #fff;
}

.form-check:after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    left: 4px;
    border-radius: 2px;
    top: 6.1px;
    background-color: #000;
    transition: all 0.3s;
    opacity: 0;
}

.form-check:has(:checked):after {
    opacity: 1;
}

.form-check {
    position: relative;
    padding-left: 31px;
    cursor: pointer;
}

.form-check input {
    opacity: 0;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.form-check-label {
    font-size: 14px;
    color: #000000;
    cursor: pointer;
}

.form-check-label a {
    color: #000000;
}

.shipping-address input#address {
    flex: 1;
}

.shipping-address button.btn.btn-primary:hover {
    background: #373b3c;
    color: #fff;
}

.checkout-payment-details .btn.btn-primary.btn-lg:hover {
    background: #000;
}

.checkout-popup h2 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 5px;
    font-family: "Acumin Pro", sans-serif;
}

.checkbox-new-right img {
    height: 475px;
    object-fit: cover;
}

.checkout-popup .modal-content {
    background: #f4f4f4;
    border: 0px;
    backdrop-filter: blur(8px);
}

.checkout-img-list {
    margin: 0;
    padding: 15px 25px;
    background: #fff;
    border-radius: 8px;
    list-style: none;
}

.checkout-img-list li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f3f3f3;
    padding: 10px 0;
}

.checkout-img-list h3 {
    font-size: 18px;
    color: #373b3c;
    margin: 0;
    max-width: 67%;
}

.checkout-img-list a {
    text-decoration: none;
}

.checkbox-price-right {
    text-align: right;
    flex: 1;
}

.checkout-img-list li:before {
    background: #eeeeee;
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50px;
    margin-right: 20px;
    transition: all 0.3s;
}

.checkout-img-list li:hover:before {
    background: #5a3e67;
}

.checkout-img-line-strip {
    margin-block: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.checkout-img-line-strip span {
    height: 4px;
    flex: 1px;
    background: #eeeeee;
}

.checkout-img-list .pricing_datas {
    font-size: 16px;
    font-weight: 600;
    color: #373b3c;
}

.checkout-img-list h6,
.checkout-img-list h6 a {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.checkout-img-list h6 a:hover {
    color: #000;
}

.checkout-popup-second button.btn.btn-primary {
    background: #373b3c;
    color: #fff;
    padding: 0px;
    border-radius: 0px;
}

.checkout-popup-second button.btn.btn-primary:hover {
    background: #000;
}

.preference_heading {
    margin: 12px 0px 18px;
}

.pre-owned_watches {
    background: #262626;
    min-height: 100%;
    padding: 20px 50px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    gap: 30px;
    border-radius: 20px;
}

.top_pre_owned p {
    font-size: 14px;
    color: var(--sb-text-muted);
    margin-top: 5px;
}

.pre-owned_watches a {
    font-size: 14px;
    color: var(--sb-text);
    transition: all 0.5s ease-in-out 0s;
}

.pre-owned_watches a:hover {
    color: #c9c9c9;
}

.prdct_grid_img_conts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.prdct_grid_img_conts .pre_owned_img {
    width: 100%;
}

.prdct_grid_img_conts .pre_owned_img img {
    width: 100%;
    height: 100%;
}

.product_items_data.prdct_img_grid {
    grid-column-start: 3;
    grid-column-end: 5;
}

.main_repair_btn {
    display: flex;
    margin-top: 45px;
    position: relative;
    z-index: 1;
    max-width: 60%;
}

.unlock_repair_secs {
    margin-top: -120px;
    margin-bottom: 45px;
}

.unlock_repair_secs::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    background: #000;
    z-index: -1;
}

.lamna_money_clients {
    margin-bottom: 60px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    align-items: flex-start;
}

.lamna_clients p {
    font-size: 16px;
    /* color: rgb(55 59 60 / 66%); */
    margin: 0;
}

.lamna_clients {
    max-width: 60%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
    background: #262626;
    padding: 20px;
    border-radius: 16px;
}

.experienced_trusted {
    background-image: url("../images/experience_trusted.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 12px;
    padding: 21px 20px;
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.top_experience ul {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.top_experience ul li {
    font-size: 16px;
    color: #373b3c;
    font-family: "Acumin Pro", sans-serif;
    font-weight: 500;
}

.experience_lists {
    list-style-type: none;
    padding: 0;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.experience_lists li {
    font-size: 16px;
    color: #373b3c;
    position: relative;
    padding-left: 20px;
}

.experience_lists li::before {
    content: "";
    background: #00acec;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 0;
}

.unlock_how_works .faq_conts_data h3 {
    margin: 0;
}

.unlock_how_works .question_answers_opens {
    padding: 15px 20px;
    background: transparent;
    border-radius: 8px;
}

.unlock_how_works .question_answers_opens:nth-child(odd) {
    background: #f8f8f8;
    padding: 15px 20px;
    border-radius: 0;
    width: fit-content;
    max-width: 100%;
}

.unlock_how_works .question_answers_opens:nth-child(even) {
    background: transparent;
    padding: 15px 20px;
}

.watched_jewellery_secs_data {
    /* background: #f3f5f6; */
    padding: 45px 0px;
    margin: 45px 0px;
}

.inner_watch_jewellery_cards {
    max-width: 896px;
    margin: 0 auto;
    display: grid;
    gap: 45px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jewellery_cards_data img {
    width: 100%;
    border-radius: 20px 20px 0 0;
}

.unlock_watch_content {
    background: #262626;
    padding: 28px 20px 30px;
    border-radius: 0 0 20px 20px;
}

.unlock_watch_content h3 {
    font-size: 14px;
    color: #fff;
}

.unlock_watch_content p {
    margin: 0;
    font-size: 16px;
    /* color: rgb(55 59 60 / 66%); */
}

.watched_book_repairs {
    display: flex;
    justify-content: center;
    margin: 45px 0px;
}

.unlock_faq_datas {
    margin-bottom: 30px;
}

.product_collection_image {
    position: relative;
    overflow: hidden;
}

.quick_view_data a {
    background: rgb(0 0 0 / 33%);
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 100px;
}

.quick_view_data {
    position: absolute;
    bottom: -50px;
    left: 15px;
    display: flex;
    z-index: 9;
    transition: all 0.5s ease-in-out 0s;
}

.product_collection_image:hover .quick_view_data {
    bottom: 15px;
    display: inline-block !important;
}

img.hover-image {
    position: absolute;
    width: auto !important;
    min-width: 100%;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.product_collection_image:hover img.hover-image {
    opacity: 1;
    transform: scale(1.05);
    transition: all 0.5s ease-in-out;
}

/* ── Per-card image carousel ─────────────────────────────────────────── */
.pcard-carousel-wrap {
    position: relative;
    overflow: visible;
}

.pcard-slides {
    position: relative;
    overflow: hidden;
    display: block;
    touch-action: pan-y;
    /* allow vertical scroll, hand horizontal to JS */
}

.pcard-track {
    display: flex;
    transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    touch-action: pan-y;
}

.pcard-slide {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
}

.pcard-slide.pcard-hidden {
    display: none !important;
}

/* <a> inside carousel wrap acts as the arrow positioning context */
.pcard-carousel-wrap>a {
    position: relative;
    display: block;
}

/* Prev / Next arrows — uses same SVG as site-wide custom nav */
.pcard-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pcard-arrow img {
    display: block;
    width: 26px;
    height: 27px;
    pointer-events: none;
}

.pcard-arrow.pcard-prev {
    left: 8px;
    border: none;
}

.pcard-arrow.pcard-next {
    right: 8px;
    border: none;
}

.pcard-carousel-wrap:hover .pcard-arrow {
    opacity: 1;
    border: none;
}

/* Dot indicators — sit below the image, not overlapping it */
.pcard-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 6px 0 2px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.pcard-carousel-wrap:hover .pcard-dots {
    opacity: 1;
}

.pcard-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sb-text-muted);
    cursor: pointer;
    transition: background 0.2s;
    pointer-events: auto;
    flex-shrink: 0;
    display: inline-block;
}

.pcard-dot.active {
    background: #fff;
}

/* Quick-view dots stay on top of the image (absolute) */
#productQuickView .pcard-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.33);
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
}

#productQuickView .pcard-dot {
    background: rgba(255, 255, 255, 0.55);
}

#productQuickView .pcard-dot.active {
    background: #fff;
}

/* Quick-view carousel: arrows show on hover, slightly larger */
#productQuickView .pcard-carousel-wrap:hover .pcard-arrow {
    opacity: 1;
}

#productQuickView .pcard-arrow img {
    width: 32px;
    height: 33px;
}

#productQuickView .pcard-arrow.pcard-prev {
    left: 6px;
    border: none;
}

#productQuickView .pcard-arrow.pcard-next {
    right: 6px;
    border: none;
}


/* Keep home product images fixed inside their card frame on hover. */
.jewellery_item_datas .inn_prdct_img a img:hover,
.inn_prdct_img_jewellery_home:hover img,
.inn_prdct_img.pcard-carousel-wrap:hover a img,
.inn_prdct_img_jewellery_home.pcard-carousel-wrap:hover img,
.pcard-carousel-wrap:hover .pcard-slide {
    transform: none !important;
}

/* Keep homepage content/service slider images static within their own frame. */
.watch_repair_services_secs .slide-img-link,
.shop_branded_jewellery_secs .slide-img-link,
.luxury_watches_secs .slide-img-link,
.jewellery_workshop_secs .slide-img-link {
    overflow: hidden;
}

.watch_repair_services_secs .slide-img-link img,
.shop_branded_jewellery_secs .slide-img-link img,
.luxury_watches_secs .slide-img-link img,
.jewellery_workshop_secs .slide-img-link img {
    transform: none !important;
    transition: none !important;
}

.watch_repair_services_secs .slide-img-link:hover img,
.watch_repair_services_secs .slide-img-link:focus img,
.shop_branded_jewellery_secs .slide-img-link:hover img,
.shop_branded_jewellery_secs .slide-img-link:focus img,
.luxury_watches_secs .slide-img-link:hover img,
.luxury_watches_secs .slide-img-link:focus img,
.jewellery_workshop_secs .slide-img-link:hover img,
.jewellery_workshop_secs .slide-img-link:focus img {
    transform: none !important;
}

/* Mobile: hide carousel arrows and dots everywhere — use swipe instead */
@media (max-width: 767.98px) {

    .pcard-carousel-wrap .pcard-arrow,
    .pcard-carousel-wrap .pcard-dots {
        display: none !important;
    }
}

/* ── Quick View offcanvas — mobile stability fixes ─────────────────────
   Multiple root causes fixed here:
   1. Offcanvas width 480px is wider than mobile screens — override to 100%
   2. .detailinfo .offcanvas-header is position:fixed to viewport — causes
      header to detach visually when iOS elastic scroll moves the viewport
   3. .detailinfo .offcanvas-body has overflow:visible — no scroll container,
      touch events fall through to the page and trigger page bounce
   4. No overscroll-behavior — scroll chains from offcanvas to page (iOS bounce)
   5. margin-top:85px on body + fixed header at top:62px = misaligned on mobile
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

    /* Full-width; the offcanvas element itself is the scroll container */
    #productQuickView.offcanvas {
        width: 100% !important;
        padding: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* Unpin from viewport — sticky inside the offcanvas scroll context */
    #productQuickView .offcanvas-header {
        position: sticky !important;
        top: 0 !important;
        right: auto !important;
        background: #fff;
        z-index: 10;
        padding: 12px 16px;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Body: no horizontal padding — let image go edge-to-edge */
    #productQuickView .offcanvas-body {
        margin-top: 0 !important;
        padding: 0 0 40px !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* Row: reset Bootstrap g-4 negative margins */
    #productQuickView .offcanvas-inner {
        flex-direction: column !important;
        gap: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* All columns: full width, strip Bootstrap gutter padding */
    #productQuickView .offcanvas-inner>[class*="col-"] {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Image container: full-bleed, square — maximum use of screen width */
    #productQuickView .prdct_quick_img {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        min-height: 0 !important;
    }

    /* Image: no max-width cap, fills the full container */
    #productQuickView .quick-view-img {
        width: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    /* Text section: restore horizontal padding */
    #productQuickView .quick_view_prdct_conts {
        padding: 20px 20px 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────── */

.quick_view_prdct_conts p {
    font-size: 14px;
}

.with_box_data a {
    background: #f4f4f4;
    color: #373b3c;
    font-size: 14px;
    text-decoration: none;
    padding: 8px 14px;
}

.with_box_data {
    display: flex;
    gap: 15px;
}

.quick_view_prdct_conts .product-price {
    margin: 25px 0px 15px;
}

.main_desktop_menu {
    background: #f5f7f7;
    padding: 50px 0px;
    position: absolute;
    top: 122px;
    z-index: 2;
    width: 100%;
    border-top: 1px solid #e1e1e1;
    backdrop-filter: blur(8px);
}

.inner_megamenu {
    display: grid;
    gap: 45px;
    grid-template-columns: 160px 160px 1fr;
}

.thumbnail_menu_lists {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 15px;
    align-items: start;
    grid-auto-rows: min-content;
}

.card_menu_datas {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.card_menu_image_wrapper {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.card_menu_datas img {
    width: 100%;
    border-radius: 8px;
    height: 299px;
    object-fit: cover;
    transition: transform 0.5s ease-in-out;
    display: block;
    margin: 0;
}

@media (min-width: 992px) {

    /* Header mega-menu category cards: use 16:9 on desktop to distinguish from square upsells */
    .card_menu_image_wrapper {
        aspect-ratio: 16 / 9;
        display: block;
    }

    .inner_faq_data {
        max-width: 60%;
        margin: 0 auto;
    }

    .card_menu_datas img {
        width: 100%;
        height: 90%;
        object-fit: cover;
        display: block;
    }
}

@media (max-width: 375px) {
    .visit-btn {
        margin-top: 50px !important;
    }
}

.card_menu_image_wrapper:hover img {
    transform: scale(1.1);
}

.jcat img {
    height: 158px;
}

.jcat h3 {
    margin: 10px 0;
    font-size: 16px;
}

.jcat h3 a {
    color: #373b3c;
    text-decoration: none;
}

.watchbrand-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 15px;
    margin-top: 57px;
}

.watchbrand-list p {
    margin: 0px;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #a8a8a8;
}

.watchbrand-list ul {
    display: grid;
    padding: 0px;
    margin: 0px;
    list-style: none;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.watchbrand-list ul li a {
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    text-decoration: none;
}

.watchbrand-listmobile {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0px;
    margin-top: 0px;
}

.watchbrand-listmobile p {
    margin: 0px;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #a8a8a8;
    padding: 20px;
}

.watchbrand-listmobile ul {
    display: grid;
    padding: 0px;
    margin: 0px;
    list-style: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0px;
}

.watchbrand-listmobile ul li {
    border-bottom: 1px solid #e7e7e7;
}

.watchbrand-listmobile ul li:nth-child(2n + 1) {
    border-right: 1px solid #e7e7e7;
}

.watchbrand-listmobile ul li:nth-child(1),
.watchbrand-listmobile ul li:nth-child(2) {
    border-top: 1px solid #e7e7e7;
}

.watchbrand-listmobile ul li a {
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    text-decoration: none;
    width: 100%;
    padding: 20px;
    display: flex;
}

.card_menu_datas h2 {
    font-size: 14px;
    margin: 8px 0px 0px;
}

.card_menu_datas h2 a {
    color: #373b3c;
    text-decoration: none;
    transition: all 0.5s ease-in-out 0s;
}

.card_menu_datas p {
    font-size: 16px;
    color: rgb(55 59 60 / 66%);
    margin: 0;
}

.card_menu_datas h2 a:hover {
    color: #c9c9c9;
}

.menus ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menus ul li a {
    color: #373b3c;
    text-decoration: none;
    transition: all 0.5s ease-in-out 0s;
    font-size: 16px;
}

.menus ul li:not(:last-child) {
    margin-bottom: 8px;
}

.menu_lists ul li a {
    font-family: "Acumin Pro", sans-serif;
    font-weight: 500;
    color: #373b3c;
    font-size: 18px;
}

.submenu_lists ul li a {
    font-weight: 400;
}

.menu_lists ul li.active a,
.submenu_lists ul li.active a {
    color: #000000;
}

.menu_lists ul li:not(:last-child) {
    margin-bottom: 18px;
}

#main_desktop_menu {
    visibility: hidden;
    top: -1000vh;
    transition: none;
}

#main_desktop_menu.open {
    visibility: visible;
    top: 95px;
    transition: none;
    max-height: calc(100vh - 130px);
    overflow: auto;
}

.menu_close {
    cursor: pointer;
    font-weight: 500;
}

.menu_close img {
    height: 16px;
    width: 16px;
}

.header_icons {
    display: none;
}

.mobile_logo {
    display: none;
}

.home_banner_mobile_content {
    display: none;
}

.inner_mobile_content_banner {
    padding: 20px 0px 15px;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0;
    color: #373b3ca8;
}

.mobilemenu-card .jcat img {
    height: 221px;
    border-radius: 0px;
}

.mobilemenu-card .jcat h3 {
    margin: 15px 0px 5px;
    padding: 0px 20px;
    color: #373b3c;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
}

.mobilemenu-card .jcat p {
    padding: 0px 20px 30px;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #373b3ca8;
}

.top_banner_data ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

.top_banner_data ul li {
    font-size: 14px;
    color: rgb(55 59 60 / 66%);
}

.cheapest_data a {
    background: #f3f5f6;
    border-radius: 8px;
    padding: 10px 20px;
    color: #373b3c;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cheapest_data {
    display: flex;
    margin: 15px 0px;
}

.available_prices {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.uk_price {
    color: #373b3c;
    font-size: 14px;
    font-weight: bold;
}

.available_prices a {
    color: #373b3c;
    font-size: 14px;
}

.mobile_service_banner_content {
    display: none;
}

.desktop-only {
    display: block;
}

body.menu-open {
    overflow: hidden;
}

.mobile_search {
    display: none;
    /* Symmetric vertical padding + align-items:center → the icon/input/Go sit vertically
       centered in the bar's area (was `30px … 0`, which pinned them to the bottom). */
    padding: 14px 20px;
    align-items: center;
}

.mobile_search.active {
    display: flex;
}

.mobile_search img {
    height: 16px;
    width: 16px;
}

.mobile_search input {
    outline: none;
    box-shadow: none;
    width: 100%;
    border: 0px;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    padding: 0px 16px;
    color: #3c3c3c;
    font-family: "Acumin Pro", sans-serif;
}

.mobile_search input:placeholder {
    color: #3c3c3c80;
    font-family: "Acumin Pro", sans-serif;
}

.mobile_search button {
    border: 0px;
    background: none;
    font-weight: 400;
    font-size: 16px;
    outline: none;
    box-shadow: none;
    line-height: normal;
    color: #ffffff;
    font-family: "Acumin Pro", sans-serif;
}

.mobile_menu_data.active nav.slide-out-menu {
    transform: translateZ(0);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s, visibility 0ms,
        transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.mobile_menu_data nav.navbar {
    padding: 10px;
}

nav.slide-out-menu {
    z-index: 9000;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 20px);
    /* Flex column so the primary list sits at the top and the policy links pin to the
       bottom, with the translucent blurred backdrop showing through the gap between. */
    display: flex;
    flex-direction: column;
    transition: opacity 0.2s, visibility 0ms linear 0.2s,
        transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translate3d(-290px, 0, 0);
}

nav.slide-out-menu div.menu-panels {
    overflow: hidden;
    height: 100%;
}

nav.slide-out-menu div.menu-panels button.menu-link,
.filter-panels .primary-menu-panel button.menu-link,
.filter-panels .menu-panel button.menu-link {
    position: relative;
    text-align: left;
    width: 100%;
    display: block;
    padding: 0px 0px 0px 20px;
    background: transparent;
    margin: 0;
    border: none;
    height: 60px;
    color: #222222;
    -webkit-text-fill-color: #222222;
}

nav.slide-out-menu div.menu-panels button.menu-link svg {
    position: absolute;
    top: 50%;
    margin-top: -7px;
    height: 14px;
}

.menu-panels {
    border-top: 1px solid #e7e7e7;
}

span.menu_arrow {
    position: absolute;
    right: 0;
    width: 60px;
    border-left: 1px solid #e7e7e7;
    height: 60px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

span.menu_arrow_down {
    position: absolute;
    right: 0;
    width: 60px;
    border-left: 1px solid #e7e7e7;
    height: 60px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

span.menu_arrow_down img {
    position: relative;
    transform: rotate(-90deg);
}

nav.slide-out-menu div.menu-panels button.menu-link svg.arrow-right,
.filter-panels .menu-panel button.menu-link svg.arrow-right {
    right: 10px;
}

nav.slide-out-menu div.menu-panels button.menu-link svg.arrow-left,
.filter-panels .menu-panel button.menu-link svg.arrow-left {
    left: 10px;
}

nav.slide-out-menu div.menu-panels button.menu-link.menu-header,
.filter-panels .menu-panel button.menu-link.menu-header {
    text-align: left;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    padding-right: 80px;
}

.bottom_mobile_policy_menus {
    padding: 20px;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

.bottom_mobile_policy_menus a {
    color: #373b3c;
    text-decoration: none;
    font-size: 13px;
    margin-top: 2px;
    transition: all 0.5s ease-in-out 0s;
}

.bottom_mobile_policy_menus a:hover {
    color: #c9c9c9;
}

.primary-menu-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

span.left_top_menu {
    position: absolute;
    left: 0;
    width: 60px;
    border-right: 1px solid #e7e7e7;
    height: 60px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

nav.slide-out-menu div.menu-panels ul,
.filter-panels .primary-menu-panel ul,
.filter-panels .menu-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav.slide-out-menu div.menu-panels ul li,
.filter-panels .primary-menu-panel ul li,
.filter-panels .menu-panel ul li {
    font-size: 16px;
    border-bottom: 1px solid #e7e7e7;
}

nav.slide-out-menu div.menu-panels ul li a,
.filter-panels .primary-menu-panel ul li a,
.filter-panels .menu-panel ul li a {
    width: 100%;
    display: block;
    padding: 14px 20px;
    color: #373b3c;
    text-decoration: none;
}

nav.slide-out-menu div.menu-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    z-index: 0;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    visibility: hidden;
    transform: translateX(-290px);
}

nav.slide-out-menu div.menu-panel.is-active {
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s;
    transform: translateX(0);
    z-index: 1;
}

.mobile_menu_close img {
    width: 18px;
}

/* ===== Mobile accordion menu ===== */
/* ===== Mobile slide-panel menu (was an accordion) ===== */
.mobile-primary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

/* No positioning here: submenus are absolute and must resolve against .slide-out-menu
   (the fixed full-screen container), not an individual row, so they cover the whole menu. */
.mobile-menu-item {
    position: static;
}

.mobile-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-menu-row .mobile-menu-link {
    flex: 1;
    display: block;
    padding: 20px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #222222;
    text-decoration: none;
    font-family: "neue-haas-grotesk-text", "Acumin Pro", sans-serif;
}

.mobile-menu-toggle {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.mobile-menu-toggle img {
    width: 15px;
    height: auto;
}

/* Each submenu is a full slide-in panel that covers the primary list. */
.mobile-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100vh;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 2;
}

.mobile-submenu.is-active {
    transform: translateX(0);
}

.mobile-submenu li a {
    display: block;
    padding: 20px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #373b3c;
    text-decoration: none;
    font-family: "neue-haas-grotesk-text", "Acumin Pro", sans-serif;
}

/* Back header prepended to each opened submenu (built in JS). */
.mobile-submenu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    height: 58px;
}

.mobile-submenu-back {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    background: transparent no-repeat center / 22px 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
}

.mobile-submenu-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #222222;
    font-family: "neue-haas-grotesk-text", "Acumin Pro", sans-serif;
}

/* ===== End mobile slide-panel menu ===== */

.product-main-inner {
    justify-content: space-between;
    display: flex;
    gap: 30px;
}

.product-details {
    flex: 1 1 50%;
    width: 50%;
    display: flex;
    justify-content: center;
}

/* Fill the column consistently. Without a width, the single .inner child is a flex
   item that sizes to its own content — so it looked narrow on products with less
   content and full-width on others. The ≤1500px media query still caps it at 90%. */
.product-details .inner {
    width: 100%;
}

.product-slider {
    flex: 1 1 50%;
    width: 50%;
    display: flex;
    overflow: hidden;
}

.main_faq_page_accordion .accordion .accordion-item:not(:last-child) {
    margin-bottom: 10px;
    background: #262626;
}

/* .main_faq_page_accordion .accordion .accordion-item:nth-child(2n) button.accordion-button {
    background: #000;
} */

.offcanvas-header {
    padding: 15px 70px 15px 15px;
}

.btn-close:focus {
    outline: none !important;
    box-shadow: none;
}

/* ---------------------Faq-tabs--------------------------------*/
.faq_tabs_main .nav-pills .nav-link {
    background: #f3f5f6;
    color: rgb(55 59 60 / 66%);
    font-size: 14px;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px 8px 0px 0px;
    font-family: "Acumin Pro", sans-serif;
    font-weight: 400;
}

.faq_tabs_main .nav-pills {
    list-style-type: none;
    padding: 0;
    margin: 0 0px 15px;
    display: flex;
    border-bottom: 1px solid #f3f5f6;
    gap: 5px;
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.faq_tabs_main .nav-pills .nav-link.active,
.faq_tabs_main .nav-pills .nav-link:hover {
    color: #373b3c;
}

.faq_tabs_main {
    margin-bottom: 15px;
}

.faq_tabs_main .nav-pills::-webkit-scrollbar {
    height: 5px;
    border-radius: 50px;
}

.faq_tabs_main .nav-pills::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 50px;
}

.faq_tabs_main .nav-pills::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
    border-radius: 50px;
}

.tab-pane {
    font-size: 14px;
}

.range-container {
    width: 393px;
    padding: 20px 20px 10px;
    background: rgb(245 245 245);
    border-radius: 0px 8px 8px 8px;
    text-align: center;
    position: relative;
    margin-top: 13px;
}

.range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: rgb(55 59 60 / 66%);
    margin-top: 10px;
}

.slider-container {
    position: relative;
    width: 100%;
}

.range-slider {
    -webkit-appearance: none;
    position: absolute;
    width: 100%;
    height: 2px;
    background: #373b3c;
    border-radius: 5px;
    outline: none;
    left: 0;
    pointer-events: none;
    top: 0;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 11px;
    height: 11px;
    background: #373b3c;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
}

.range_updates {
    display: flex;
    justify-content: flex-end;
}

.update-btn {
    margin-top: 15px;
    color: #373b3c;
    border: none;
    background: none !important;
    font-family: "Acumin Pro", sans-serif;
    font-weight: bold;
    padding: 0;
    transition: all 0.5s ease-in-out 0s;
}

.update-btn:hover {
    color: #c9c9c9;
}

.dropdown-menu.range_dropdown_mwnu {
    border: none;
    padding: 0;
    background: unset;
}

/* ── Desktop filter bar (above results, horizontal scroll) ──────── */
.dsk-filter-bar-section {
    overflow: visible;
}

@media (max-width: 767px) {

    .details-card {
        background: unset;
        padding: unset;
    }

    .inner_how_works_lists .question_answers_opens {
        background: var(--sb-header-solid);
        padding: 0;
        margin-bottom: 10px
    }

    .inner_how_works_lists .question_answers_opens .faq_numbers {
        background: #262626;
        padding: 20px;
        border: none;
        color: #fff;
    }

    .faq_conts_data {
        background: #262626;
        padding: 15px;
        border-radius: 16px;
    }


    .dsk-filter-bar-section {
        display: none !important;
    }
}

.dsk-active-filters-row {
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 8px;
}

.dsk-filter-btn-row {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    /* padding-left: 5%; */
    padding-right: 5%;
    padding-bottom: 0;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dsk-filter-btn-row::-webkit-scrollbar {
    display: none;
}

.dsk-filter-btn-row .filter_cols {
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────── */

/* ── Desktop price filter redesign ─────────────────────────────── */
.dsk-price-dropdown {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-top: 15px !important;
    min-width: 260px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Text inputs row */
.dsk-price-text-input {
    flex: 1;
    border: 1px solid #c8c8c8;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    color: #373b3c;
    outline: none;
    width: 0;
    min-width: 0;
    -moz-appearance: textfield;
}

.dsk-price-text-input::-webkit-outer-spin-button,
.dsk-price-text-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dsk-price-text-input:focus {
    border-color: #373b3c;
}

.dsk-price-sep {
    color: #373b3c;
    font-size: 14px;
    flex-shrink: 0;
}

/* Multi-range slider container */
.dsk-multi-range-slider {
    position: relative;
    height: 36px;
    margin: 8px 0 4px;
    display: flex;
    align-items: center;
}

/* Track wrapper */
.dsk-slider-track-wrapper {
    position: absolute;
    width: 100%;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
}

.dsk-slider-track {
    position: absolute;
    width: 100%;
    height: 2px;
    background: #d0d0d0;
    border-radius: 1px;
    z-index: 1;
}

.dsk-slider-progress {
    position: absolute;
    height: 2px;
    background: #373b3c;
    border-radius: 1px;
    z-index: 2;
    left: 0%;
    right: 0%;
}

/* Range inputs stacked */
.dsk-range-slider {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    pointer-events: none;
    z-index: 3;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
}

.dsk-range-slider::-webkit-slider-runnable-track {
    height: 2px;
    background: transparent;
}

.dsk-range-slider::-moz-range-track {
    height: 2px;
    background: transparent;
}

.dsk-range-slider::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    height: 18px;
    width: 18px;
    background: #373b3c;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 0.15s;
}

.dsk-range-slider::-webkit-slider-thumb:hover {
    background: #000;
    transform: translateY(-50%) scale(1.1);
}

.dsk-range-slider::-moz-range-thumb {
    pointer-events: auto;
    height: 18px;
    width: 18px;
    background: #373b3c;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

/* Labels below slider */
.dsk-price-label-val {
    font-size: 12px;
    color: #373b3c;
}

/* Cancel / Update buttons */
.dsk-price-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0;
    font-size: 13px;
    color: #373b3c;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s;
    font-weight: 600;
}

.dsk-price-btn:hover,
.dsk-price-btn:focus,
.dsk-price-btn:active {
    color: #000;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────── */

.dropdown.filter_cols a.dropdown-toggle.show::before {
    content: "";
    background: rgb(245 245 245);
    height: 15px;
    width: 100%;
    position: absolute;
    bottom: -15px;
    left: 0;
}

.dropdown.filter_cols a.dropdown-toggle.show {
    border-radius: 8px 8px 0px 0px;
}

.metal_contents {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.metal_cols a {
    color: #000;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.5s ease-in-out;
}

.metal_cols {
    text-align: left;
}

.metal_cols a:not(:last-child) {
    margin-bottom: 12px;
    display: inline-block;
    width: 100%;
}

.metal_cols a:hover {
    color: #c9c9c9;
}

.range_updates.update_cancel_btn {
    justify-content: space-between;
}

.range-container.metal-containers {
    width: 491px;
}

.banner_featured_img {
    display: flex;
    align-items: center;
    max-height: 720px;
}

::-webkit-scrollbar {
    display: none;
}

.single-page-content {
    display: flex;
    width: 100%;
    padding: 30px 0px 97px;
    flex-direction: column;
    gap: 30px;
}

.single-page-content h2 {
    font-weight: 700;
    font-size: 47.14px;
    line-height: normal;
    letter-spacing: 0;
    margin: 0px 0px 6px;
    color: #fff;
}

.single-page-content h4 {
    font-weight: 400;
    font-size: 23.61px;
    line-height: normal;
    letter-spacing: 0;
    color: #fff;
    text-transform: uppercase;
}

.content-spacing {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.content-spacing {
    gap: 15px;
}

.content-spacing img,
.content-spacing h5 {
    margin: 15px 0;
}

.content-spacing p strong {
    display: inline-block;
    margin-top: 15px;
}

.content-spacing * {
    margin: 0px;
}

.content-spacing h5 {
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    letter-spacing: 0;
    color: #373b3c;
    line-height: normal;
}

.content-spacing p {
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    line-height: normal;
    color: var(--sb-text-muted);
}

.content-spacing p a {
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    color: #fff;
    line-height: normal;
    text-decoration-thickness: 0%;
}

.content-spacing p strong {
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    color: #fff;
    line-height: normal;
}

.content-spacing ul li {
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    /* color: #373b3c; */
    line-height: normal;
}

.content-spacing ul li strong {
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
}

.seaction_page_heading {
    padding: 30px 0;
    display: block;
    width: 100%;
}

.seaction_page_heading h2 {
    font-weight: 700;
    font-size: 47.14px;
    line-height: normal;
    letter-spacing: 0;
    margin: 0px 0px 30px;
    color: #fff;
}

.seaction_page_heading h4 {
    font-weight: 400;
    font-size: 23px;
    line-height: normal;
    letter-spacing: 0;
    color: #E6E6E6;
    text-transform: uppercase;
}

.seactionbanner {
    display: flex;
    min-height: 614px;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.seactionbanner p {
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0;
    color: #ffffff;
    margin-bottom: 10px;
}

.seactionbanner p:last-child {
    margin-bottom: 0px;
}

.serivce-repaire-banner {
    display: block;
    width: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    height: 405px;
}

.serivce-repaire-banner .breadcrumbs {
    margin-bottom: 0px;
    padding-top: 80px;
}

.repair_watch_form .form-group .input-group {
    flex-wrap: nowrap;
}

.modal-content.repair_watch_form .form-group .input-group .input-group-text {
    border-right: 0px;
    border-left: 1px solid var(--bs-border-color);
    background: #fff;
}

.repair_watch_form .form-group .input-group .input-group-text {
    background: none;
    border-left: 0;
    padding: 0px 20px;
}

.modal-content.repair_watch_form .form-group .input-group .form-control {
    border-left: 0px;
    border-right: 1px solid var(--bs-border-color);
    padding-left: 0px;
    padding-right: 10px;
}

.repair_watch_form .form-group .input-group .form-control {
    border-right: 0px;
    padding-right: 0px;
}

.modal-content.repair_watch_form .form-group label {
    color: #000000a8;
    margin-bottom: 5px;
}

.cta-modal .modal-content .form-group .form-control {
    font-size: 16px;
}

#chatmodel .form-group .input-group {
    flex-wrap: nowrap;
}

#chatmodel .form-group .input-group .input-group-text {
    height: 60px;
    display: flex;
    align-items: center;
    border: 1px solid #e7e7e7;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: transparent;
    padding: 0 15px;
}

#chatmodel .form-group .input-group .form-control {
    border-left: 0;
    border-radius: 0 8px 8px 0;
}

#chatmodel input[type="number"]::-webkit-outer-spin-button,
#chatmodel input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#chatmodel input[type="number"] {
    -moz-appearance: textfield;
}

.cta-modal .modal-content .form-group textarea.form-control {
    height: 80px;
}

.modal-content.repair_watch_form .form-group .custom-checkbox label {
    font-size: 14px;
    font-weight: 400;
    color: #000;
}

.serivce-repaire-banner img {
    width: 100%;
}

.serivce-repaire-banner .container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
}

.serivce-repaire-banner .container .breadcrumbs li,
.serivce-repaire-banner .container .breadcrumbs li a {
    color: #fff;
}

.product_luxury {
    background: #0e0e0e;
}

.product_luxury h2 {
    margin-bottom: 15px;
}

.product_luxury p {
    color: #ffffffa8;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    margin: 0px;
}

.product_luxury ul {
    list-style: none;
    align-items: center;
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 45px;
    margin-bottom: 45px;
}

.product_luxury ul li {
    display: inline-flex;
    gap: 45px;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0;
    align-items: center;
}

.product_luxury ul li:not(:last-child):after {
    content: "";
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 6px;
}

.product_luxury ul li img {
    max-width: 67px;
}

.product_luxury .product_collection_lists {
    margin-top: 45px !important;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product_luxury .product_collection_lists .product_items_data .product_collection_image {
    height: 426px;
}

.product_luxury .product_collection_lists .product_items_data {
    background: #262626;
    display: flex;
    flex-direction: column;
}

.product_luxury .product_collection_lists .product_collection_contents {
    display: flex;
    align-items: end;
    gap: 10px;
    padding: 13.45px 23.45px 24.22px 23.71px;
    flex-direction: row;
    margin-top: auto;
}

.product_luxury .product_collection_lists .product_collection_contents h3 {
    margin: 0px;
    padding: 0px;
}

.product_luxury .product_collection_lists .product_collection_contents h3 a {
    font-size: 16px;
}

.product_luxury .product_collection_lists .product_collection_contents .price_value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0;
    text-align: right;
    color: #7d3cff;
    vertical-align: bottom;
}

.product_luxury .product_collection_lists .product_collection_contents .price_value span {
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    text-align: right;
    vertical-align: bottom;
    white-space: nowrap;
    color: #7d3cff;
}

.service_payment {
    display: block;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 153px 0;
    position: relative;
    margin-bottom: 45px;
}

.service_payment img {
    display: none;
}

.py-45 {
    padding-top: 45px;
    padding-bottom: 45px;
}

.service_payment:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0.7;

    height: 100%;
    background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
}

.service_payment h2 {
    position: relative;
    z-index: 1;
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    letter-spacing: 0;
    color: #fff;
    margin: 0px 0 27px;
}

.service_payment p {
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0;
    color: #fff;
    position: relative;
    z-index: 1;
    margin: 0px;
}

.radiobuttons {
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.radiobuttons input {
    display: none;
}

.radiobuttons label {
    background: #f3f5f6;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0;
    color: #373b3c;
    cursor: pointer;
}

.radiobuttons input:checked+label {
    background: #000000;
    color: #fff;
    font-weight: bold;
    box-shadow: 0px 4px 15px 0px #00000020;
}

.repair_watch_form .form-group select.form-control option:first-child {
    opacity: 0.3;
}

.product-count {
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0;
    color: #373b3c;
}

.title_banner .radiobuttons input:checked+label:after {
    content: "X";
    margin-left: 8px;
    font-weight: 600;
}

.filteroption {
    gap: 30px;
}

.inputcheck {
    display: inline-flex;
}

.inputcheck input {
    display: none;
}

.gx-30 {
    gap: 30px;
}

.btn-filter {
    border-radius: 8px;
    padding: 10px 20px;
    background: white;
    backdrop-filter: blur(4px);
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0;
    color: #373b3c;
    border: 0px;
    text-decoration: none;
}

.btn-filter.active {
    background: #000;
    color: fff;
}

.btn-filter-active {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}

.btn-filter-active .badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

.btn-filter-active.dropdown-toggle::after {
    border-top-color: #fff !important;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
}

.btn-filter-clear-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    font-size: 16px;
    line-height: 1;
    opacity: 0.75;
    cursor: pointer;
    vertical-align: middle;
}

.btn-filter-clear-x:hover {
    opacity: 1;
}

.btn-filter-clear {
    flex-shrink: 0;
    border-radius: 8px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid #1a1a1a;
    font-weight: 500;
    font-size: 13px;
    line-height: normal;
    color: #1a1a1a;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.btn-filter-clear:hover {
    background: #1a1a1a;
    color: #fff;
}

.inputcheck .checkboxinput {
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0;
    color: var(--sb-text-muted);
    position: relative;
}

.inputcheck input[type="checkbox"]+.checkboxinput:before {
    content: "";
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border-radius: 7px;
    border: 1px solid white;
    display: inline-block;
    margin-right: 0px;
}

.inputcheck input[type="radio"]+.checkboxinput:before {
    content: "";
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border-radius: 7px;
    box-shadow: 0px 0px 0px 1px #e7e7e7;
    display: inline-block;
    margin-right: 0px;
}

.inputcheck input:checked+.checkboxinput:before {
    background: #3a3a3a;
    border-radius: 9px;
    background: white;
}

.searchdesktop {
    display: flex;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    background: #000;
    justify-content: space-between;
    align-items: center;
}

.searchdesktop input {
    border: none !important;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    box-shadow: none;
    outline: none;
    color: #E6E6E6;
    background: transparent;
    width: 100%;
}

.searchdesktop input:placeholder {
    color: var(--sb-text-muted);
}

.searchdesktop input:focus {
    color: #E6E6E6;
    background: transparent !important;
    box-shadow: none;

}

.searchdesktop button {
    color: #FFF;
    background: transparent;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    padding: 10px;
    border: 0px;
    box-shadow: none;
    outline: none;
}

.accordion .search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-bottom: 15px;
}

.accordion .search input {
    width: 100%;
    border: 0px;
    outline: none;
    box-shadow: none;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    color: #373b3c;
    padding: 10px;
}

.accordion .search input:placeholder {
    color: #373b3ca8;
}

.book_repaire_form {
    width: 100%;
    padding: 0 0 45px 0;
    display: block;
}

.book_repaire_form .form-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.mb-30f {
    margin-bottom: 30px !important;
}

.book_repaire_form .form-group label .form-control {
    margin-top: 10px;
}

.book_repaire_form .form-group label {
    margin: 0px;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    /* color: #373b3c; */
    padding: 0px;
}

.book_repaire_form .form-group label.lable-mobile {
    font-size: 14px;
}

.newradio-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

.newradio-list input {
    display: none;
}

.newradio-list label {
    display: flex;
    padding-left: 60px !important;
    position: relative;
    cursor: pointer;
}

.newradio-list label svg {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.newradio-list label svg:first-child {
    left: 22px;
}

.newradio-list label svg+svg {
    left: 29.5px;
}

.newradio-list label:last-child {
    border-bottom: 0px;
}

.newradio-list label span {
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    color: var(--sb-text-muted);
    font-family: "Acumin Pro", sans-serif;
    padding: 20px 10px 20px 30px;
    display: inline-block;
    width: 100%;
}

.newradio-list input:checked+label span {
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    color: #000;
    font-family: "Acumin Pro", sans-serif;
}

.newradio-list input:checked+label svg+svg {
    display: none;
}

/* .newradio-list input:checked+label svg path {
    stroke: #373b3c;
} */

/* Highlight selected item - CSS only solution */
.newradio-list-item:has(input:checked) {
    background: #fff;
    border-radius: 30px;
}

/* Active state for newradio-list-item - managed by JavaScript */
.newradio-list-item.active {
    /* Add visual feedback for active state */
    background: rgba(255, 255, 255, 0.05);
    border-radius: 30px;
    transition: background 0.2s ease;
}

.newradio-list-item {
    border-radius: 30px;
    transition: background 0.2s ease;
}

.book_repaire_form h3 {
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    /* color: #373b3ca8; */
    padding: 0px 20px 25px;
}

.book_repaire_form .btn-secondary {
    background: #ebeded;
    border-color: #ebeded;
    color: #636363;
    padding: 15px;
    border-radius: 30px;
}

.book_repaire_form .form-group a {
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    color: #fff;
    margin-top: 10px;
    display: inline-block;
}

.book_repaire_form .form-group .yellowtext {
    margin-top: 20px;
    display: inline-block;
    width: 100%;
    color: #926a2e;
}

.productinfo {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 30px;
}

.productinfo .productinfo-image {
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: center;
}

.productinfo .productinfo-image img {
    max-width: 100%;
}

.productinfo .productinfo-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 50%;
}

.productinfo .productinfo-content h2 {
    font-weight: 400;
    font-size: 21px;
    line-height: normal;
    letter-spacing: 0;
    color: #373b3c;
    margin: 0px;
}

.productinfo .productinfo-content h2 span {
    font-weight: 700;
    font-size: 21px;
    line-height: normal;
    letter-spacing: 0;
}

.productinfo .productinfo-content p {
    margin: 0px;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    color: #373b3ca8;
}

.book_repaire_form .form-group h4 {
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    color: #373b3c;
    margin: 0px 0px;
    padding: 0px;
}

.book_repaire_form .form-group ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: inline-flex;
    width: 100%;
    gap: 5px;
    flex-wrap: wrap;
}

.book_repaire_form .form-group ul li {
    display: inline-flex;
}

.book_repaire_form .form-group ul li a {
    display: inline-flex;
    gap: 20px;
    border-radius: 8px;
    padding: 15px;
    background: #f2f2f2c3;
    font-weight: 400;
    font-size: 16px;
    line-height: 142%;
    letter-spacing: 0;
    color: #000000;
    margin: 0px;
    text-decoration: none;
}

.book_repaire_form .form-group p {
    margin: 0px;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    color: #373b3c;
}

.book_repaire_form .form-group .custom-checkbox input {
    display: none;
}

.book_repaire_form .form-group .custom-checkbox label {
    padding-top: 45px;
    padding-bottom: 45px;
    font-weight: 400;
    font-size: 16px;
    line-height: 142%;
    letter-spacing: 0;
    display: flex;
    align-items: center;
}

.book_repaire_form .form-group .custom-checkbox label a {
    text-decoration: underline;
    margin-top: 0;
    margin-left: 5px;
    font-weight: 400;
    font-size: 16px;
    line-height: 142%;
    letter-spacing: 0;
}

.book_repaire_form .form-group .custom-checkbox input[type="checkbox"]+label:before {
    content: "";
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border-radius: 6px;
    box-shadow: 0px 0px 0px 1px #e7e7e7;
    display: inline-block;
    margin-right: 10px;
}

.book_repaire_form .form-group .custom-checkbox input[type="radio"]+label:before {
    content: "";
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border-radius: 8px;
    box-shadow: 0px 0px 0px 1px #e7e7e7;
    display: inline-block;
    margin-right: 10px;
}

.book_repaire_form .form-group .custom-checkbox input:checked+label:before {
    background: #3a3a3a;
    border: 4px solid #fff;
    border-radius: 8px;
}

.book_repaire_form .form-group table {
    width: 100%;
}

.book_repaire_form .form-group table th {
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    padding: 7px 0;
    color: #373b3c;
}

.book_repaire_form .form-group table th span {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0;
    font-family: "Acumin Pro", sans-serif;
    color: #373b3ca8;
}

.book_repaire_form .form-group table td {
    text-align: right;
    color: #373b3c;
    font-weight: 700;
    padding: 7px 0;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
}

.min-h-100 {
    min-height: 100%;
}

.detailinfo,
.aboutinfo {
    overflow: auto;
    padding-top: 0px;
}

.detailinfo.offcanvas {
    padding: 50px 70px 50px 20px !important;
    /* Last value (0.3) is the background opacity — lower it toward 0 to show more of the
       content behind, raise it toward 1 for a more solid background. */
    background: rgba(14, 14, 14, 0.3);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
}

.aboutinfo .offcanvas-header,
.detailinfo .offcanvas-header {
    position: fixed;
    right: 0px;
    top: 80px;
}

.aboutinfo .offcanvas-body,
.detailinfo .offcanvas-body {
    margin-top: 139px;
    padding-top: 0;
    overflow: visible;
}

.detailinfo .offcanvas-body {
    padding-left: 20px;
    padding-right: 70px;
}

.specification-heading {
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    margin-bottom: 20px;
    color: #373b3c;
}

span.search_close img {
    width: 17px;
}

.latest_jewellery_secs.shop-in-stock.details_slider .inner_jewellery_data {
    overflow: hidden;
}

.mt-45 {
    margin-top: 45px;
}

.mb-45 {
    margin-bottom: 45px;
}

/******** Contact us ************/
.address_datas {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-left: 44px;
    padding-top: 45px;
    width: 100%;
}

.contact_message_form {
    padding-top: 45px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/************** 404 ***************/

.main_404_errors_data {
    background: #f3f5f6;
    margin-bottom: 100px;
    padding: 212px 0px;
}

.inner_404_conts {
    max-width: 776px;
    display: flex;
    gap: 70px;
    margin: 0 auto;
}

.left_404_data h1 {
    font-size: 48px;
    color: #373b3c;
    margin-bottom: 10px;
}

.left_404_data h4 {
    font-size: 18px;
    color: #373b3c;
    margin: 0px 0px 5px;
}

.left_404_data {
    width: 305px;
    text-align: center;
}

.right_404_data {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.left_404_data p {
    font-size: 16px;
    color: rgb(55 59 60 / 66%);
    margin-bottom: 30px;
}

.right_404_data h5 {
    font-size: 14px;
    color: #373b3c;
    padding: 0px 20px;
}

.right_404_data p {
    font-size: 14px;
    color: rgb(55 59 60 / 66%);
    padding: 0px 20px;
}

.contact_404_info {
    background: #fff;
    padding: 20px;
    border: 1px solid #e7e7e7;
    transition: all 0.1s ease-in-out 0s;
}

.contact_404_info a {
    font-size: 16px;
    color: #373b3c;
    text-decoration: none;
}

.contact_404_info:hover {
    background: #373b3c;
}

.contact_404_info:hover a {
    color: #fff !important;
}

.left_404_data p a {
    color: rgb(55 59 60 / 66%);
    transition: all 0.5s ease-in-out 0s;
}

.left_404_data p a:hover {
    color: #c9c9c9;
}

.right_404_data .contact_404_info {
    margin-top: 10px;
}

.order_calcelled_secs .inner_success_data .thank_you_message {
    padding: 40px 25px;
}

.order_calcelled_secs .inner_success_data .thank_you_message img {
    width: 33px;
    height: 33px;
}

.service_top_head.servicepage-breadcrumb .breadcrumbs {
    margin-bottom: 30px;
}

.tdb-service-withoutbanner {
    padding-top: 30px;
}

.tdb-service-withoutbanner .breadcrumbs {
    margin-bottom: 30px;
    margin-top: 60px;
}

.mt-15 {
    margin-top: 15px;
}

.categorybox a img {
    height: 532px;
    object-fit: cover;
}

.w-550 {
    max-width: 550px;
}

.title_banner {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

.title_banner .gap-2 {
    gap: 15px !important;
}

.prdct_grid_banner {
    margin-bottom: 6px;
}

.prdct_grid_banner img {
    height: 260px;
    width: 100%;
}

.productgrid {
    padding-top: 15px;
}

.productgrid .breadcrumbs {
    margin-bottom: 15px;
}

.productgrid-list {
    padding-bottom: 45px;
    display: flex;
    flex-direction: column;
}

.productgrid-list .product_collection_contents {
    display: flex;
    flex-direction: column;
    gap: 0px;
    border-radius: 16px
}

.productgrid .radiobuttons input:checked+label {
    font-weight: 400;
}

.productgrid-list .dropdown.filter_cols a.dropdown-toggle {
    font-weight: 400;
}

.productgrid-list .jump_brands a.dropdown-toggle {
    font-size: 14px;
}

.seemore-btn-product {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 30px;
}

.seemore-btn-product p {
    margin: 0px;
    padding: 0px;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
}

.product-info-cart.detailinfo .offcanvas-header {
    top: 62px;
}

.product-info-cart.detailinfo .offcanvas-body {
    margin-top: 85px;
}

.product-info-cart.detailinfo .offcanvas-body .offcanvas-inner {
    gap: 15px;
}

.product-info-cart.detailinfo .offcanvas-body .offcanvas-inner .quick_view_prdct_conts .product-price {
    margin: 30px 0px 15px;
    font-size: 14px;
    font-weight: 500;
}

.product-info-cart.detailinfo .offcanvas-body .offcanvas-inner .with_box_data {
    margin-top: 15px;
}

.product-info-cart.detailinfo .offcanvas-body .offcanvas-inner .with_box_data a {
    font-weight: 500;
    padding: 5px 15px;
}

.product-info-cart.detailinfo .offcanvas-body .offcanvas-inner .quick_view_prdct_conts p {
    font-size: 14px;
    color: #373b3ca8;
    margin-top: 15px;
}

.mb-15p {
    margin-bottom: 15px;
}

.card-number-inputs-group {
    display: flex;
    gap: 15px;
}

.card-number-inputs-group .card-number-inputs {
    width: 100%;
}

.card-number-inputs-group .card-number-inputs:nth-child(2) {
    width: 62px;
    flex: 0 0 62px;
}

.card-number-inputs-group .card-number-inputs:nth-child(3) {
    width: 83px;
    flex: 0 0 83px;
}

.customtextbox {
    height: auto !important;
}

.customtextbox textarea {
    border: 0px;
    width: 100%;
    resize: none;
    outline: none;
    background: none;
    box-shadow: none;
}

.product-finance-details {
    margin: 25px auto;
    background: #f3f5f6;
    max-width: 590px;
    width: 100%;
    gap: 30px;
    padding: 45px;
    overflow-y: scroll;
}

.product-finance-details .logo-brand {
    width: 110px;
    margin-bottom: 10px;
}

.product-finance-details p {
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #373b3c;
}

.product-finance-details form {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 20px;
}

.product-finance-details form .form-group {
    margin-bottom: 30px;
}

.product-finance-details form .form-group label {
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000a8;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.product-finance-details form .form-group label br {
    display: block;
    width: 100%;
}

.product-finance-details form .form-group .input-group {
    gap: 30px;
}

.product-finance-details form .form-group .input-group .form-check {
    display: inline-flex;
    align-items: center;
    padding-left: 31px;
    gap: 10px;
}

.product-finance-details form .form-group .input-group .form-check,
.product-finance-details form .form-group .input-group .form-check label {
    margin-bottom: 0px;
}

.product-finance-details form .form-group label span {
    display: inline-flex;
    font-weight: 400;
    color: #000000a8;
    gap: 4px;
    width: 100%;
}

.product-finance-details form .form-group .precentage-bages {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.product-finance-details form .form-group .precentage-bages .percentage-item input {
    display: none;
}

.product-finance-details form .form-group .precentage-bages .percentage-item label {
    margin: 0px;
    padding: 1px 3px;
    display: inline-flex;
    border-radius: 8px;
    border-width: 1px;
    border: 1px solid #e7e7e7;
    background: #ffffff;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    cursor: pointer;
    min-width: 42px;
    justify-content: center;
    letter-spacing: 0%;
    text-align: center;
    color: #000000;
}

.product-finance-details form .form-group .precentage-bages .percentage-item input:checked+label {
    color: #7d3efb;
    border-color: #7d3efb;
}

.paydeposit {
    color: #7e3efa;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
}

.product-finance-details form .form-group .btn {
    padding-left: 10px;
    padding-right: 10px;
}

.table-view-deposit {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    gap: 5px;
    margin-bottom: 35px;
}

.table-view-deposit .table-deposite-item:first-child {
    margin-bottom: 40px;
}

.table-view-deposit .table-deposite-item {
    display: flex;
    justify-content: space-between;
}

.table-view-deposit .table-deposite-item .deposite-label {
    width: 241px;
}

.table-view-deposit+p {
    margin-bottom: 30px;
    font-size: 14px;
    font-weight: 400;
    color: #000000a8;
}

.product-finance-details form .add-to-bag-finance-btn {
    margin-bottom: 20px !important;
}

.owl-stage {
    padding: 0 !important;
}

/* Finance Available Modal Responsive Styles */
.finance-available-modal {
    max-width: 50%;
    margin: 20px auto;
}

.finance-available-content {
    max-height: 90vh;
    overflow-y: auto;
}

/* Make close button visible on all three finance desktop modals */
#exampleModalToggle_oldfinace button.btn-close,
#exampleModalToggle_availablefinace button.btn-close,
#exampleModalToggle_yourdetails button.btn-close {
    display: block !important;
    position: absolute !important;
    right: 15px !important;
    top: 15px !important;
    z-index: 1051 !important;
    width: 32px !important;
    height: 32px !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
}

/* Address results dropdown (shown after postcode search) */
.address-select {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background-color: #fff;
    padding: 10px 14px;
    font-size: 14px;
    color: #1a1a1a;
    width: 100%;
    appearance: auto;
}

/* Postcode search — two separate rounded elements with gap */
.postcode-group {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.postcode-group .form-control {
    border-radius: 8px;
    flex: 1;
}

.btn-postcode-search {
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 400;
    padding: 8px 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-postcode-search:hover {
    background: #e4e4e4;
    border-color: #ccc;
}

/* Deposit percentage pill buttons */
.deposit-bages {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.deposit-bages .percentage-item {
    flex: 1 1 auto;
    max-width: 58px;
}

.deposit-bages .percentage-item input {
    display: none;
}

.deposit-bages .percentage-item label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 50px;
    border: 1px solid #e7e7e7;
    background: #f8f8f8;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
    color: #000;
    transition: border-color 0.15s, color 0.15s;
}

.deposit-bages .percentage-item input:checked+label {
    color: #7d3efb;
    border-color: #7d3efb;
    background: #fff;
}

.deposit-bages .percentage-item label:hover {
    border-color: #7d3efb;
    color: #7d3efb;
}

@media (max-width: 767px) {
    .custom-dots {
        width: 75%;
    }

    .deposit-bages>.d-flex {
        width: 100%;
        justify-content: space-evenly !important;
    }

    .deposit-bages .percentage-item {
        flex: 1;
        max-width: 55px;
    }
}

/* modal 1 — scrollable middle so action buttons stay visible */
#exampleModalToggle_oldfinace .finance-modal form .modal-middle-finace {
    margin: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

#exampleModalToggle_oldfinace .finance-modal form>.btn {
    flex-shrink: 0;
}

/* Finance modal step 2 — shared finance control styles */
#exampleModalToggle_availablefinace .finance-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #373b3c;
    margin-bottom: 8px;
}

#exampleModalToggle_availablefinace .finance-subtitle {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #373b3c;
}

#exampleModalToggle_availablefinace .finance-options-desc {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.65);
    margin-bottom: 10px;
}

#exampleModalToggle_availablefinace .yes_no_option {
    position: relative;
}

#exampleModalToggle_availablefinace .radi_btn {
    display: inline-block;
    position: relative;
    margin-right: 6px;
    margin-bottom: 6px;
}

#exampleModalToggle_availablefinace .radi_btn input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#exampleModalToggle_availablefinace .radi_btn .checkmark,
#exampleModalToggle_availablefinace #termField .radi_btn label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    background: #f8f8f8;
    font-size: 13px;
    font-weight: 400;
    color: #373b3c;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
    text-transform: capitalize;
    margin-bottom: 0;
    line-height: 1.2;
}

/* UK yes/no — Figma sizes these to hug their text, not the 110px min-width used by term pills */
#exampleModalToggle_availablefinace .yes_no_option .radi_btn .checkmark {
    min-width: 0;
    padding: 10px 20px;
}

/* Finance type options — purple-outline pill (matches UK yes/no, deposit %, repayment-term pills) */
#exampleModalToggle_availablefinace .finance-type-options .finance-type-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    background: #f8f8f8;
    color: #373b3c;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
    text-transform: capitalize;
    margin-bottom: 0;
    line-height: 1.2;
}

#exampleModalToggle_availablefinace .finance-type-options .radi_btn input:checked+.finance-type-label,
#exampleModalToggle_availablefinace .finance-type-options .finance-type-btn:only-of-type .finance-type-label {
    background: #fff;
    color: #7d3efb;
    border-color: #7d3efb;
}

#exampleModalToggle_availablefinace .finance-type-options .finance-type-label:hover {
    border-color: #7d3efb;
    color: #7d3efb;
}

/* Issue #5345: Custom Amount chip + £ input */
#exampleModalToggle_availablefinace .custom-deposit-amount-group {
    margin: 15px 0 12px;
}

#exampleModalToggle_availablefinace .custom-deposit-amount-group .finance-subtitle {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 200;
}

#exampleModalToggle_availablefinace .custom-deposit-amount-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    background: #fff;
    font-size: 15px;
    color: #373b3c;
}

#exampleModalToggle_availablefinace .custom-deposit-amount-input:focus {
    outline: none;
    border-color: #7d3efb;
}

#exampleModalToggle_availablefinace .custom-deposit-amount-hint {
    display: block;
    color: #7d3efb;
    font-size: 14px;
    margin-top: 8px;
}

#exampleModalToggle_availablefinace .custom-deposit-amount-error {
    display: block;
    color: #d10932;
    font-size: 12px;
    margin-top: 6px;
    min-height: 0;
}

#exampleModalToggle_availablefinace .radi_btn input:checked+.checkmark,
#exampleModalToggle_availablefinace #termField .radi_btn input:checked+label {
    color: #7d3efb;
    border-color: #7d3efb;
    background: #fff;
}

#exampleModalToggle_availablefinace .radi_btn .checkmark:hover,
#exampleModalToggle_availablefinace #termField .radi_btn label:hover {
    border-color: #7d3efb;
    color: #7d3efb;
}

#exampleModalToggle_availablefinace .error_mess {
    display: none;
    color: #d10932;
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.4;
}

#exampleModalToggle_availablefinace .hitachi_percent {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

#exampleModalToggle_availablefinace .hitachi_percent li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    background: #f8f8f8;
    font-size: 14px;
    font-weight: 400;
    color: #000;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

#exampleModalToggle_availablefinace .hitachi_percent li:hover {
    border-color: #7d3efb;
    color: #7d3efb;
}

#exampleModalToggle_availablefinace .hitachi_percent li.active {
    color: #7d3efb;
    border-color: #7d3efb;
    background: #fff;
}

#exampleModalToggle_availablefinace .finance-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#exampleModalToggle_availablefinace #termField {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#exampleModalToggle_availablefinace .finance-calculation-sect h3.pay {
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 10px;
}

#exampleModalToggle_availablefinace .finance-calculation-sect h3.pay .deposit_percentage {
    font-weight: 600;
    color: #7d3efb;
}

/* Finance available modal — keep two-column flex layout */
#exampleModalToggle_availablefinace .checkout-main {
    display: flex;
}

/* modal-middle-finace scrolls in modals 2 & 3 (more content than modal 1) */
#exampleModalToggle_availablefinace .modal-middle-finace,
#exampleModalToggle_yourdetails .modal-middle-finace {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding-right: 4px;
}

/* Tablet and smaller desktop adjustments */
@media (max-width: 1280px) {
    .finance-available-modal {
        max-width: 65%;
    }
}

@media (max-width: 1024px) {
    .finance-available-modal {
        max-width: 80%;
    }
}

.product-icons-f {
    gap: 15px;
}

.trust_badges img {
    height: 16px;
    width: auto;
    object-fit: contain;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.swiper-custom-pagination {
    margin-top: 15px !important;
    position: unset !important;
    display: flex;
    margin-top: 10px;
    width: 100%;
    justify-content: center;
}

.swiper-custom-pagination .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
    background-color: #000;
    opacity: 0.33 !important;
}

.swiper-custom-pagination .dot.active {
    background-color: #000;
    opacity: 1 !important;
}

.schedule-containerbooking {
    max-width: 393px;
}

.schedule-containerbooking .schedule_heading {
    padding-left: 20px;
    padding-right: 20px;
}

.schedule-containerbooking .schedule_content {
    padding-left: 20px;
    padding-right: 20px;
}

/* ---------------------Responsive---------------------------------*/
@media screen and (min-width: 1921px) {
    .shop_branded_jewellery_secs .container {
        max-width: none !important;
        width: 100vw !important;
        padding: 0 !important;

        /* cancels the usual centered-container offset so it hits both viewport edges */
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
    .inner_conts_parts {
        max-width: 578.67px;
    }

    .banner_content_parts {
        padding: 45px 2vw 90.6px;
    }

    .home_banner .custom_owl_navigation {
        bottom: 40px;
    }

    /* .repair_watch_img {
        margin: 0 25%;
    } */

    .repair_watch_img .mx-auto {}

    .iframe-adjust iframe {
        width: 550px !important;
        height: 550px !important;
    }

    .repair_watch_img img {
        scale: 1.3;
    }

    .service_details_banner {
        height: calc(100vh - 127px) !important;
    }

    .max-lg-w-550 {
        max-width: 550px !important;
    }

    .my-image {
        width: 960px !important;
        height: 966px !important;
    }

    /* .featured_in_secs{
        padding: 45px 0 0;
    }
    .featured_logos_slider.owl-carousel{
        margin-top: -40px;
    }
    .featured_logos_slider.owl-carousel .owl-item img {
        width: 100%;
        max-width: 100%;
    } */
    .unlock_repair_secs::after {
        bottom: -40px !important;
    }
}

@media screen and (max-width: 1100px) {
    .product_collection_lists {
        display: flex;
        flex-wrap: wrap;
    }

    .product_collection_lists .product_items_data {
        width: 33.33%;
    }

    .product_collection_lists .product_items_data.prdct_img_grid {
        width: 100%;
    }

    .product_collection_lists .product_items_data.prdct_img_grid img {
        height: 314px;
    }
}

@media (min-width: 1025px) {
    .aboutusimage {
        max-height: 640px;
        overflow: hidden;
    }
}

@media (min-width: 768px) {
    .faq-container {
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 15px;
    }

    .double-container-col {
        padding-inline: 10%;
    }

    .bg-to-white {
        background-color: #000 !important;
        color: #E6E6E6;
    }

    .h-cover {
        height: 100% !important;
        object-fit: cover !important;
    }

    .bg-to-secondary {
        background-color: var(--sb-header-solid) !important;
    }

    .auth-title {
        font-size: 26px;
        font-weight: 500;
        /* position: absolute;
        top: 130px; */
    }

    .bg-md-white {
        /* background-color: #ffffff !important; */
    }

    .auth-footer {
        padding: 39px 5vw !important;
        text-align: left !important;
        margin: 0 !important;
    }

    .auth-footer-right {
        max-width: 50%;
        padding: 39px 5vw !important;
        text-align: left !important;
        margin: 0 !important;
    }
}

.prdct_grid_img_conts .pre_owned_img {
    position: relative;
}

.prdct_grid_img_conts .pre_owned_img img {
    position: absolute;
}

.max-md-w-387 {
    max-width: 387px;
}


@media screen and (max-width: 1500px) {
    .product-details .inner {
        /* Fill the right column (was 90%, which left ~5% empty on each side because
           .product-details is justify-content:center). */
        max-width: 100%;
    }
}

@media (max-width: 1440px) {
    .auth-fields {
        padding-top: 100px !important;
    }

    .inner_foot_rows {
        grid-template-columns: repeat(3, auto);
    }

    .order_success_secs {
        height: 614px;
    }

    .searchdesktop {
        width: 280px;
    }

    .footer_copyright {
        margin-top: -45px;
    }

    .banner_content_parts {
        padding: 65px 2vw 77.2px;
    }

    .banner_featured_img {
        max-height: 614px;
    }

    .watches_content_cols {
        gap: 30px;
    }

    /* .featured_logos_slider.owl-carousel .owl-item img{
        width: 200px;
        height: 50px;
        object-fit: contain;
    } */
}

@media (max-width: 1280px) {
    .checkout-popup .modal-dialog {
        max-width: 88%;
    }

    .custom_owl_navigation {
        bottom: 125px;
    }

    .home_banner .custom_owl_navigation {
        padding: 0px 2vw !important;
    }

    .pre_owned_img img {
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

    .pre-owned_watches {
        padding: 80px 20px 45px;
    }

    .top_product_select {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
    }

    .coll_items_data ul li {
        width: calc(100% / 5);
    }
}

@media only screen and (max-width: 1199px) {
    .searchdesktop {
        width: 240px;
    }

    .left_footer_data {
        /* width: 60%; */
        max-width: 100%;
    }

    .luxury_watches_btns {
        gap: 10px;
    }

    .luxury_watches_btns a.btn_links {
        font-size: 14px;
    }

    .footer_copyright {
        max-width: 60%;
    }

    .watch_repair_contents {
        padding: 20px 50px;
    }

    .card_menu_datas p {
        font-size: 12px;
    }

    .menus ul li a {
        font-size: 14px;
    }

    .menu_lists ul li a {
        font-size: 16px;
    }

    .card_menu_datas h2 {
        font-size: 12px;
    }

    .custom_owl_navigation {
        bottom: 85px;
    }

    .banner_content_parts {
        padding: 40px 2vw 85px;
    }

    .coll_items_data ul li a {}

    .finance_available_datas {}

    .pre_owned_img {
        width: 50%;
        overflow: hidden;
    }

    .pre-owned_watches {
        flex: 1;
    }

    .inner_main_headings {
        max-width: 100%;
    }

    .subcategories_datas.faq_categories_datas ul {
        flex-wrap: wrap;
        border: none;
    }

    .faq_categories_datas ul li a {
        border-radius: 8px;
    }

    .inner_faq_data .accordion .accordion-item {
        margin-bottom: 0px;
    }

    .faq_categories_datas ul {
        border: none;
    }

    .unlock_repair_secs {
        margin-top: 0;
    }

    /* .product-details {
    width: 100%;
  }*/

    /*.product-slider {
    width: 100%;
  }*/

    .product-main-inner {
        padding: 0;
    }
}

@media (max-width: 1024px) {
    .login-fields {
        padding-top: 70px !important;
    }

    .aboutusimage img {
        width: 100%;
    }

    .contact_data {
        padding-bottom: 60px;
    }

    .contact_data:not(:last-child) {
        margin-bottom: 0px;
    }

    .product-main-inner .col-lg-4 {
        width: 40%;
    }

    .banner_content_parts {
        padding: 20px 2vw 85px;
    }

    .top_banner_heads h1 {
        font-size: 40px;
    }

    .top_banner_heads p {
        font-size: 18px;
    }

    .bottom_banner_foots p {
        font-size: 12px;
    }

    .price_items {
        margin-bottom: 10px;
    }

    .thumbnail_menu_lists {
        grid-column-start: 1;
        grid-column-end: 4;
    }

    .featured_logos img {
        height: 35px;
    }

    .watch_repair_img img {
        width: 100%;
    }

    .watch_repair_contents {
        padding: 30px 20px;
        max-width: 100%;
    }

    .seactionbanner.mb-45 {
        margin-bottom: 0px;
    }

    section.seactionbanner.mt-45 {
        margin-top: 0px;
    }

    .seactionbanner {
        min-height: 542px;
    }

    .watches_content_cols {
        padding: 15px 20px;
    }

    .googlemap .watch_repair_contents {
        padding-bottom: 30px;
    }

    .luxury_watches_secs .bg_column_watch {
        background: transparent;
    }

    .jewellery_shop_contents.watch_repair_contents {
        padding: 15px 20px 0;
        margin-top: 0;
        max-width: 100%;
    }

    .custom_owl_navigation {
        bottom: -70px;
        right: auto;
        left: 0;
        padding-left: 0;
        width: 100%;
    }

    ul.foot_lists li a {}

    .foot_cols h4 {}

    .product_collection_contents {
        padding: 15px 20px 0px;
    }

    .pre-owned_watches {
        padding: 30px 20px;
    }

    .top_pre_owned h2 {
        font-size: 15px;
    }

    .top_pre_owned p {
        font-size: 14px;
    }

    .pre-owned_watches a {
        font-size: 13px;
    }

    .prdct_grid_img_conts {
        height: 100%;
    }

    .repair_btn {
        padding: 13px 50px;
        background: white;
        color: #262626;
        border-radius: 30px;
    }

    .service_details_faqs {
        gap: 20px;
    }

    .blog_conts {
        padding: 20px 0px;
    }

    .inner_main_headings h1 {
        font-size: 38px;
    }

    .inner_main_headings p.date_time {
        font-size: 18px;
    }

    .contact_address_form [class*="col-"]:last-child {
        order: -1;
    }

    .address_datas {
        padding-left: 0px;
        padding-top: 0px;
    }

    .contact_message_form {
        padding-top: 0px;
    }

    .contact_map_address {
        margin-bottom: 60px;
    }

    .main_contact_datas {
        padding-bottom: 60px;
    }

    .watch_repair_contents {
        gap: 8px;
    }

    .home_topcategory .sectiontitle {
        padding: 15px 5%;
    }

    .lamna_clients {
        max-width: 100%;
    }

    .inner_watch_jewellery_cards {
        gap: 20px;
    }

    .gallery-container {
        justify-content: flex-start;
        gap: 10px;
    }

    .product-main-inner .col-lg-7 {
        width: 60%;
    }

    /*.gallery-main {
    width: calc(100% - 92px);
  }*/

    .jewellery_item_datas {
        padding: 0;
    }

    .product-tabs button.btn-primary {
        font-size: 14px;
    }

    .plus-minus {
        width: 50px;
        height: 50px;
    }

    .product-catagory {
        /* margin-bottom: 15px; */
        font-weight: 700;
        font-size: 16px;
    }

    .checkout-payment-details {
        padding: 20px 10px 0;
    }

    .checkout-img-list h3 {
        font-size: 16px;
        max-width: 57%;
        font-weight: 700;
    }

    .checkout-img-list .pricing_datas {
        font-size: 16px;
        font-weight: 500;
    }

    .checkout-popup button.btn-close {
        right: -40px;
        width: 25px;
        height: 25px;
        font-size: 12px;
    }

    .checkout-payment-details form .form-label {
        font-size: 14px;
    }

    .checkbox-new-right img {
        height: 250px;
        object-fit: cover;
    }

    .container {
        padding: 0px 5%;
    }

    .static-brand-list {
        padding: 0px 30px !important;
    }

    /*.product-details {
    width: 100%;
  }

  .product-slider {
    width: 100%;
  }*/

    .latest_jewellery_slides .jewellery_item_datas {
        padding: 0px;
    }

    .coll_items_data ul li {
        width: calc(100% / 4);
    }

    .contact_data:not(:last-child) {
        margin-bottom: 0px;
    }

    .contact_data {
        padding-bottom: 60px;
        margin-bottom: 0px;
        width: calc(50% - 3px);
        display: inline-block;
    }

    .contact_data h3 {
        margin-bottom: 15px;
    }

    .contact_data+.contact_data {
        float: left;
        width: 37%;
    }
}

@media only screen and (max-width: 767px) {
    .w-80p {
        width: 100%;
    }

    .m-h-25 {
        height: 25px !important;
    }

    .mb-pb-0 {
        padding-bottom: 0 !important;
    }

    .product_collection_lists.m-expand .product_items_data {
        width: 100% !important;
    }

    .product_luxury .product_collection_lists.m-expand .product_collection_contents {
        margin-top: 0 !important;
    }

    #main_desktop_menu {
        display: none;
    }

    .booking_success_secs {
        display: none;
    }

    .desktop-d-none {
        display: block !important;
    }

    .iframe-adjust iframe {
        width: 100% !important;
        height: 327px !important;
    }

    .iframe-adjust .end-area {
        width: 100% !important;
    }

    .iframe-adjust .px-3 {
        padding: 0 !important;
    }

    .iframe-adjust .watched_book_repairs {
        margin-top: 30px !important;
    }

    .iframe-adjust a:hover {
        color: #fff !important;
    }

    .iframe-adjust .schedule_heading {
        padding: 0 !important;
    }

    .span-adjust span {
        margin-bottom: 10px !important;
    }

    /* .product-main {
        padding-top: 17px;
    } */

    .my-bag-popup .modal-dialog {
        margin-right: 0px;
    }

    .flex-offcanvas .offcanvas-header {
        top: 5px;
        right: 5px;
    }

    .product_collection_lists .product_items_data {
        width: 50% !important;
    }

    .product_collection_lists .product_items_data.prdct_img_grid {
        width: 100% !important;
    }

    .product-main .breadcrumbs {
        margin-bottom: 17px;
        overflow-x: auto;
        overflow-y: hidden;
        direction: rtl;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .product-main .breadcrumbs::-webkit-scrollbar {
        display: none;
    }

    .product-main .breadcrumbs ul {
        direction: ltr;
        flex-wrap: nowrap;
        width: max-content;
    }

    .order_success_secs {
        height: 403px;
    }

    .bottom_support_datas {
        padding-top: 0px;
    }

    .categorybox a img {
        height: 220px;
    }

    .mobile_service_banner_content {
        margin-bottom: 5px;
    }

    .desktop-only {
        display: none !important;
    }

    .home_topcategory .sectiontitle a {
        font-size: 14px;
        font-weight: 500;
    }

    .faq-mobile-nav .swiper-button-prev,
    .faq-mobile-nav .swiper-button-next {
        color: #000;
        width: auto;
    }

    .main_blog_data_sec .blog_navigation {
        margin-top: 25px;
        margin-bottom: 0px;
    }

    .main_blog_data_sec {
        padding-bottom: 40px;
    }

    .blog_img {
        display: block;
        border-radius: 8px;
        overflow: hidden;
    }

    .faqs_headings {
        margin-bottom: 45px;
    }

    .faqs_headings p {
        display: none;
    }

    .faq-mobile-nav .swiper-button-prev:after,
    .faq-mobile-nav .swiper-button-next:after {
        font-size: 14px;
    }

    .faq_tabs_main .nav-pills .nav-link {
        border-radius: 8px;
        background: #f3f5f6;
    }

    .faq_tabs_main .nav-pills .nav-link.active,
    .faq_tabs_main .nav-pills .nav-link:hover {
        background: #000000;
        box-shadow: 0px 4px 15px 0px #00000020;
        color: #ffffff;
        font-weight: 700;
    }

    .mobile_search button {
        padding: 0px;
    }

    .mt-45 {
        margin-top: 0px;
    }

    .mb-45 {
        margin-bottom: 0px;
    }

    .seactionbanner p {
        font-weight: 400;
        font-size: 14px;
        line-height: normal;
        letter-spacing: 0;
    }

    .aboutinfo .offcanvas-header,
    .detailinfo .offcanvas-header {
        top: 21px;
    }

    .aboutinfo .offcanvas-body,
    .detailinfo .offcanvas-body {
        margin-top: 85px;
    }

    .mobilesideheading {
        font-weight: 500;
        font-size: 14px;
        line-height: normal;
        letter-spacing: 0;
        /* color: #373b3c; */
        margin-bottom: 34px;
    }

    .featured_in_secs {
        padding-bottom: 45px;
    }

    .watch_repair_contents p {
        height: 40px !important;
    }

    .watch_repair_contents p.h-25 {
        height: 25px !important;
    }

    .about-us-section .watch_repair_contents p {
        height: auto !important;
    }

    .shop_branded_jewellery_secs.bg_column_watch {
        /* Fit the (now doubled) slider height instead of a fixed 480px — otherwise the
           720px swiper overflows and luxury_watches_secs (z-index:1) overlaps it. */
        height: auto;
    }

    .unlock_watch_content {
        background: #f3f5f6;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .service_details_banner {
        background: none !important;
    }

    .book_repair_data {
        padding-top: 0px;
    }

    .book_repair_data {
        margin: 30px 0;
    }

    .tdb-service-withoutbanner {
        margin-top: 17px;
    }

    .tdb-service-withoutbanner .repair_banner_contents h1 {
        max-width: 245px;
    }

    .service-form-heading {
        margin-bottom: 33px;
        font-weight: 400;
        font-size: 16px;
        line-height: normal;
        letter-spacing: 0;
    }

    .serivce-repaire-banner .container {
        position: relative;
        left: 0;
        transform: none;
        top: -50px;
        margin: 0px 0;
    }

    /* .serivce-repaire-banner .breadcrumbs {
        padding: 17px 0;
    } */

    .service_details_banner img {
        height: 271px;
        object-fit: cover;
        width: 95% !important;
        margin: auto;
        border-radius: 16px;
    }

    .service_details_banner .breadcrumbs {
        padding: 17px 0;
    }

    .serivce-repaire-banner {
        height: 180px;
        /* margin-top: 50px; */
    }

    .watched_jewellery_secs_data {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    #pills-tabContent #pills-tab {
        display: none;
    }

    .watched_jewellery_secs_data .container {
        padding: 0px;
    }

    .serivce-repaire-banner .container .breadcrumbs li,
    .serivce-repaire-banner .container .breadcrumbs li a {
        color: #fff;
    }

    .service_payment {
        padding: 0px;
        background: none !important;
        margin-bottom: 30px;
    }

    .service_payment h2 {
        color: #373b3c;
        font-weight: 400;
        font-size: 16px;
        margin: 0px;
    }

    .service_payment p {
        color: #373b3c;
        font-size: 14px;
        font-weight: 400;
        color: #373b3ca8;
        margin-top: 5px;
    }

    .service_payment:before {
        display: none;
    }

    .service_payment img {
        display: block;
        margin-bottom: 30px;
        height: 347px;
        object-fit: cover;
    }

    .featured_logos img {
        height: auto;
        flex: 0 0 20%;
    }

    .bottom_banner_foots {
        display: none;
    }

    .banner_featured_img img {
        height: 400px;
        object-fit: cover;
    }

    .banner_content_parts {
        padding: 19px 2vw 85px;
    }

    .home_banner .custom_owl_navigation {
        padding: 0px 2vw !important;
        bottom: 50px !important;
    }

    .home_banner .custom_owl_navigation .custom-nav {
        justify-content: space-between;
    }

    .container {
        padding: 0px 5%;
    }

    .jewellery_shop_contents.watch_repair_contents.m-adjust {
        padding-bottom: 0 !important;
    }

    .jewellery_shop_contents.watch_repair_contents.m-adjust .custom_owl_navigation {
        margin-top: 0px !important;
    }

    .featured_in_secs .container {
        padding-right: 0px;
    }

    .watch_repair_contents p {
        font-size: 14px;
    }

    .watch_repair_contents h2 {
        font-size: 16px;
    }

    .about-us-section .watch_repair_contents p {
        line-height: 120%;
    }

    a.btn_links {
        font-size: 14px;
    }

    .watch_repair_contents.about-get-directions .about-visit-mobile h2 {
        margin-bottom: 5px;
    }

    .watch_repair_contents.about-get-directions .about-visit-mobile .btn_links {
        font-size: 14px;
    }

    .about-paragraph-spacing {
        margin-top: 10px;
    }

    .watch_repair_img img {
        width: 100%;
    }

    .prct_content_infos {
        padding: 14px;
        gap: 14px;
        margin-top: 10px;
    }

    .watch_repair_services_secs .swiper-slide img,
    .shop_branded_jewellery_secs .swiper-slide img {
        height: 361px !important;
    }

    .shop_branded_jewellery_secs .watch_repair_contents,
    .watch_repair_services_secs .watch_repair_contents {
        gap: 5px;
        padding: 15px 20px 30px;
    }

    .watch_repair_contents .custom-nav {
        padding-top: 25px;
    }

    /*.watch_repair_services_secs .watch_repair_contents .btn_links,
.shop_branded_jewellery_secs .watch_repair_contents .btn_links{
  display: none;
}*/
    .shop_branded_jewellery_secs .swiper-slide .jewellery_prev img,
    .shop_branded_jewellery_secs .swiper-slide .jewellery_next img,
    .shop_branded_jewellery_secs .swiper-slide .jewellery_prev2 img,
    .shop_branded_jewellery_secs .swiper-slide .jewellery_next2 img,
    .watch_repair_services_secs .swiper-slide .middle_banner_2_prev img,
    .watch_repair_services_secs .swiper-slide .middle_banner_2_next img {
        height: 35px !important;
        width: 35px !important;
    }

    .jewellery_shop_contents.watch_repair_contents .see_more_btn {
        margin-top: 0px;
        position: absolute;
        right: 20px;
    }

    .jewellery_shop_contents.watch_repair_contents .see_more_btn a {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
    }

    .luxury_watches_secs {
        padding: 15px 0;
    }

    .prdct_img img {
        height: 237px;
        object-fit: cover;
    }

    .luxury_watches_secs .watches_content_cols {
        gap: 5px;
    }

    .jewellery_shop_contents.watch_repair_contents .see_more_btn a img {
        display: inline-block;
        height: 26px !important;
    }

    .jewellery_workshop_secs [class*="col-lg-"]:last-child {
        order: unset;
    }

    .luxury_prdct_content {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    /* The jewellery sliders now use the same full-bleed `.wr_slide_pager` overlay as
       watch_repair_services_secs, so the old jewellery-specific pager overrides (which set
       `position: unset` and pushed the nav below the slide, hiding the arrows on mobile)
       are removed — the shared `.wr_slide_pager` styling makes both sections match. */

    .luxury_watches_secs::before {
        display: none;
    }

    .inner_foot_conts {
        gap: 45px;
        flex-direction: column;
    }

    .main_footer {
        padding: 45px 0;
    }

    .footer_copyright {
        max-width: 100%;
        position: unset;
        margin-top: 0px;
    }

    .payment_method {
        display: flex;
        justify-content: flex-start;
    }

    .footer_copyright p {
        text-align: left;
    }

    .finance_available_datas {
        margin-bottom: 30px;
    }

    .left_footer_data {
        width: 100%;
    }

    .luxury_prdct_content p {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .luxury_prdct_content h2 {
        font-size: 16px;
        margin-bottom: 0px;
    }

    .watches_content_cols {
        gap: 30px;
    }

    .luxury_watches_btns a.btn_links {
        font-size: 12px;
    }

    .prdct_img {
        position: relative;
    }

    .prdct_img::before {
        width: calc(100% + 40px);
        position: absolute;
        height: 109px;
        z-index: -1;
        top: auto;
        content: "";
        bottom: 0;
        left: -20px;
    }

    .user_account_data {
        display: flex;
        gap: 40px;
        display: none;
    }

    .header_icons {
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .mobile_logo {
        display: block;
    }

    .middle_header {
        display: none;
    }

    .inner_header_data {
        grid-template-columns: repeat(2, 1fr);
    }

    .menu_data {
        display: none;
    }

    .mobile_logo img {
        height: 30px;
        width: auto;
        image-rendering: -webkit-optimize-contrast;
        transform: translateZ(0);
    }

    header.main_header>.container {
        padding: 15px 5%;
    }

    .trust_badges {
        gap: 8px;
    }

    .home_banner_mobile_content {
        display: block;
    }

    .breadcrumbs {
        /*margin-top: 15px;
    margin-bottom: 15px;*/
        margin-bottom: 30px;
    }

    .jump_brands {
        justify-content: flex-end;
        margin-top: 0px;
    }

    .title_banner p {
        font-size: 14px;
    }

    .inner_category_data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .collection_contents {
        padding: 15px 20px;
    }

    .category_list_cols {
        padding: 0px;
    }

    .collection_contents p {
        font-size: 14px;
    }

    .coll_lists {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    .coll_items_data ul li {
        margin-bottom: 0;
        /* border: 1px solid #e7e7e7; */
        padding: 20px;
        border-bottom: 0px;
    }

    .coll_items_data ul li:nth-child(2n + 1) {
        border-right: 0px;
    }

    .coll_items_data ul li:not(:last-child) {
        margin-bottom: 0px;
    }

    .product_collection_lists {
        /* margin: 30px -20px 30px; */
        display: flex;
        row-gap: 0;
        flex-wrap: wrap;
        /* width: calc(100% + 40px); */
    }

    .product_items_data {
        width: 100%;
    }

    .top_product_select {
        flex-wrap: wrap;
    }

    .top_short_banner {
        padding: 0px 0px 0;
    }

    .prdct_grid_banner img {
        height: 180px;
        object-fit: cover;
    }

    .product_items_data.prdct_img_grid {
        width: 100%;
    }

    .heading_data p {
        font-size: 14px;
    }

    .book_repair_data img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }

    .repair_banner_contents h1 {
        font-size: 24px;
    }

    .repair_banner_contents p {
        font-size: 16px;
        color: var(--sb-text-muted);
        font-weight: 400;
    }

    .unlock_repair_secs {
        margin-bottom: 0px;
    }

    .repair_watch_form {
        margin: 30px auto 0px;
    }

    .inner_how_works_lists {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        border-radius: 13px;
        overflow: hidden;
    }

    .jewellery_cleaning_datas {
        margin: 30px 0;
    }

    .jewellery_cleaning_datas .left_cleanings_data h2 {
        font-size: 16px;
    }

    .faq_left_maps h2 {
        font-size: 16px;
    }

    .question_answers_opens:nth-child(3n-2) {
        /* background: #262626; */
    }

    /* .question_answers_opens:nth-child(2n-1) {
        background: #373b3c;
    } */

    .faq_conts_data p {
        font-size: 14px;
        max-width: 100%;
    }

    .faq_conts_data h3 {
        font-size: 14px;
    }

    .question_answers_opens {
        padding: 20px;
    }

    .right_cleaning_data {
        display: none;
    }

    .left_cleanings_data p {
        font-size: 14px;
        max-width: 100%;
    }

    .visit_us a {
        font-size: 14px;
    }

    .service_details_faqs {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .service_faqs_right.inner_faq_data {
        margin-top: 10px;
    }

    .faq_left_maps iframe {
        margin: 10px 0px 15px;
    }

    .srvice_details_conts_datas {
        padding: 0px 0px 23px 0px;
    }

    .how_it_works_datas h2 {
        font-size: 20px;
        font-weight: 700;
    }

    .mobile_service_banner_content {
        display: block;
        padding-top: 45px;
    }

    .upper_service_details_data p {
        margin: 0;
        font-size: 14px;
        color: var(--sb-text-muted);
    }

    .upper_service_details_data h1 {
        font-size: 30px;
        color: #fff;
    }

    .upper_service_details_data {
        margin-bottom: 45px;
        width: 228px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .inner_service_details {
        max-width: 100%;
        display: none;
    }

    .mobile_service_banner_content .inner_service_details {
        display: block;
    }

    .service_details_banner {
        padding: 0;
        background: none;
        height: auto;
    }

    .service_details_banner .container {
        height: auto;
    }

    .service_details_banner .breadcrumbs ul li a,
    .service_details_banner .breadcrumbs ul li {
        color: #373b3c;
    }

    .inner_404_conts {
        gap: 0px;
        flex-direction: column;
    }

    .service_payment {
        margin-bottom: 30px;
    }

    .left_404_data {
        width: 100%;
        text-align: center;
        height: 440px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .main_404_errors_data {
        padding: 0px 0px 0px;
    }

    .right_404_data.contact_support_infos {
        width: 100%;
        max-width: 100%;
    }

    .buttonslist {
        width: 100%;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 49px;
        padding: 0px 20px;
    }

    .main_404_errors_data .container,
    .bottom_support_datas .container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .right_404_data {
        padding-top: 49px;
        background: #fff;
    }

    .right_404_data:before {
        content: "";
        width: 100%;
        display: block;
        margin: 0px 20px 49px;
        width: calc(100% - 40px);
        border: 1px solid #e7e7e7;
    }

    .right_404_data h5,
    .right_404_data p {
        padding: 0px 20px;
    }

    .thank_you_message h1 {
        font-size: 18px;
        font-weight: 500;
    }

    .thank_you_message h5.order_nums {
        font-size: 14px;
        font-weight: 400;
    }

    .thank_you_message h5.order_nums.light-text {
        color: #373b3ca8;
    }

    .confirmation_message {
        font-size: 14px;
    }

    .order_success_secs {
        padding: 42px 0px;
        background-size: cover;
        background-position: center;
    }

    .blog_lists_data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog_conts p {
        font-size: 14px;
    }

    .inner_main_headings h1 {
        font-size: 24px;
    }

    .inner_main_headings p.date_time {
        font-size: 14px;
    }

    .main_blog_imgs {
        margin: 20px 0px 0px;
    }

    .main_blog_details_datas {
        padding: 0px 0px 20px;
    }

    .inner_blog_contents p {
        font-size: 14px;
    }

    .subcategories_datas.faq_categories_datas {
        display: none;
    }

    .faq_categories_datas ul {
        list-style-type: none;
        padding: 0;
        margin: 0px 0px 20px;
        display: flex;
        border-bottom: none;
        gap: 5px;
    }

    .faq_categories_datas ul li a {
        border-radius: 8px;
    }

    .main_repair_btn {
        margin-top: 30px;
        max-width: 100%;
    }

    .experience_lists li {
        font-size: 14px;
    }

    .experience_lists li::before {
        top: 7px;
    }

    .gallery-thumbs {
        display: none;
    }

    .product-main-inner .col-lg-7 {
        width: 50%;
    }

    .product-main-inner .col-lg-4 {
        width: 50%;
    }

    .gallery-main {
        width: 100%;
        height: auto;
        overflow: visible;
        aspect-ratio: unset;
    }

    .checkout-main {
        flex-direction: column-reverse;
        background: #fff;
        gap: 30px;
    }

    .checkbox-new-right {
        display: flex;
        flex-direction: column-reverse;
    }

    .checkout-img-list {
        padding: 0px;
    }

    .checkout-img-list li:not(:last-child) {
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .checkbox-new-right img {
        height: 145px;
    }

    .checkout-pop-left .modal-title {
        display: none;
    }

    /* Show finance modal title on mobile */
    .finance-modal .checkout-pop-left .modal-title {
        display: block !important;
        text-align: left !important;
    }

    .pricing_datas+h6 {
        display: none;
    }

    .mobile-header-checkout {
        align-items: center;
        gap: 20px;
        margin-bottom: 30px;
    }

    .mobile-header-checkout h2 {
        font-weight: 500;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #373b3c;
        white-space: nowrap;
    }

    .mobile-header-checkout .checkout-devider {
        width: 100%;
        height: 1px;
        background: #e4e4e4;
    }

    .mobile-header-checkout .checkout-amount {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-header-checkout .checkout-amount strong {
        font-weight: 500;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #373b3c;
        white-space: nowrap;
    }

    .mobile-header-checkout .checkout-amount span {
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        white-space: nowrap;
        letter-spacing: 0%;
        color: #373b3c;
    }

    .mobile-header-checkout .checkout-amount a {
        text-decoration: none;
        display: inline-block;
        line-height: 0;
    }

    .checkout-pop-left,
    .checkout-pop-right {
        width: 100%;
    }

    .checkout-payment-details {
        padding: 0px 0px 13px;
    }

    .checkout-popup .modal-dialog {
        max-width: 84%;
    }

    .product-main-inner {
        flex-direction: column;
        gap: 30px;
    }

    .slider-arrowscustom {
        margin-top: 30px;
        display: none !important;
    }

    .gallery-main .swiper-wrapper,
    .gallery-main .swiper-slide {
        height: 393px;
    }

    .gallery-main .swiper-slide img {
        height: 100%;
        width: 100%;
        margin-left: 0;
        object-fit: contain;
        object-position: center;
    }

    .product-slider {
        flex: 1 1 100%;
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
    }

    .product-details {
        flex: 1 1 100%;
        width: 100%;
        margin-top: 0px;
    }

    .my-bag-popup .modal-dialog {
        max-width: 100%;
    }

    .checkout-popup .modal-dialog {
        max-width: 100%;
        margin: 0px;
        border-radius: 0px;
    }

    /*.product-slider {
    width: 100%;
  }

  .product-details {
    width: 100%;
  }*/

    .top_banner_heads h1 {
        font-size: 28px;
    }

    .top_banner_heads p {
        font-size: 14px;
        font-weight: 400;
    }

    .top_left_infos a.links {
        text-decoration: none;
    }

    .seaction_page_heading h2,
    .single-page-content h2 {
        font-size: 24px;
        font-weight: 500;
    }

    .seaction_page_heading h4 {
        font-size: 16px;
        font-weight: 500;
    }

    .about-us-section.seaction_page_heading h4 {
        text-transform: none;
    }

    .single-page-content h4 {
        font-weight: 400;
        font-size: 14px;
        line-height: normal;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .content-spacing p,
    .content-spacing ul li {
        font-size: 14px;
        font-weight: 400;
        line-height: normal;
    }

    .content-spacing ul li strong {
        font-size: 14px;
        line-height: normal;
        font-weight: 500;
    }

    .content-spacing ul li:not(:last-child) {
        margin-bottom: 10px;
    }

    .repair_banner_contents {
        gap: 15px;
    }

    .repair_watch_bottom_conts {
        padding-top: 30px;
        margin-bottom: 3px;
    }

    .product_luxury ul {
        margin-bottom: 30px;
        gap: 30px;
    }

    .product_luxury ul li {
        gap: 30px;
    }

    .product_luxury ul li:nth-child(2):after {
        display: none;
    }

    .product_luxury ul li:last-child {
        width: 100%;
    }

    .product_luxury .product_collection_lists {
        gap: 0px;
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-top: 30px !important;
    }

    .product_luxury .product_collection_lists .product_items_data {
        display: flex;
        background: transparent;
        padding: 0px;
        align-items: center;
        flex-direction: row;
    }

    .product_luxury .product_collection_lists .product_items_data .product_collection_image {
        width: 50%;
        background: #fff;
        height: 197px;
    }

    .product_luxury .product_collection_lists .product_collection_contents {
        flex-direction: column;
        width: 50%;
        gap: 15px;
    }

    .product_luxury .product_collection_lists .product_items_data:nth-child(2n) .product_collection_image {
        order: 2;
    }

    .product_luxury .product_collection_lists .product_collection_contents h3 a {
        font-size: 20px;
        font-weight: 700;
    }

    section.product_grid_data_secs {
        overflow-x: hidden;
    }

    section.product_grid_data_secs.py-45.d-block.w-100 {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .product_collection_contents {
        display: flex;
        gap: 0px;
        flex-direction: column;
    }

    .product_collection_contents h3 a {
        font-size: 14px;
        font-weight: 500;
    }

    .price_value {
        font-size: 14px;
        font-weight: 700;
    }

    .price_value span {
        font-size: 14px;
        font-weight: 400;
    }

    .prodcutadd-full-img-mob {
        width: 100%;
        margin: 15px 0 0px;
    }

    .product-add-content-mob {
        width: 100%;
        background: #fff;
        padding: 0px 20px;
    }

    .product-add-content-mob .pre-owned_watches {
        background: none;
        padding: 15px 0;
    }

    .product-add-content-mob .pre-owned_watches>a {
        display: none;
    }

    .top_pre_owned {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .product_luxury .product_collection_lists .product_collection_contents .price_value {
        display: flex;
        width: 100%;
        text-align: left;
        font-weight: 400;
        font-size: 14px;
        line-height: normal;
        letter-spacing: 0;
        color: #373b3ca8;
        flex-direction: row;
        justify-content: flex-start;
        gap: 3px;
    }

    .product_luxury .product_collection_lists .product_collection_contents .pricing_conts {
        width: 100%;
        text-align: left;
    }

    .product_luxury .product_collection_lists .product_collection_contents .price_value span {
        display: inline-block;

        font-weight: 400;
        font-size: 14px;
        line-height: normal;
        letter-spacing: 0;
        color: #373b3ca8;
    }

    section.product_luxury.py-45 {
        padding-bottom: 0px;
        padding-top: 30px;
    }

    .watched_jewellery_secs_data {
        margin-bottom: 0px;
        margin-top: 0px;
    }

    .pr-20 {
        padding-right: 20px;
    }

    .service_top_head {
        padding: 17px 0 45px;
    }

    .faq_tabs_main .nav-pills {
        gap: 10px;
        border-bottom: 0;
    }

    .book_repaire_form .container,
    .book_repaire_form .container .row .col-12 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .book_repaire_form .container .row {
        margin-left: 0px;
        margin-right: 0px;
    }

    .submit_data {
        padding: 0px 20px;
    }

    .book_repaire_form .form-group label {
        font-weight: 500;
        font-size: 14px;
        padding: 0px 20px;
    }

    .book_repaire_form .form-group label.lable-mobile {
        font-size: 14px;
    }

    .single-page-content {
        padding-bottom: 30px;
    }

    .single-page-content .container,
    .single-page-content .container .row .col-12 {
        padding: 0px;
    }

    .single-page-content .container .row {
        margin: 0px;
    }

    .seaction_heading {
        padding: 0px 20px;
    }

    .content-spacing p {
        padding-left: 20px;
        padding-right: 20px;
    }

    .content-spacing h5 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mb-md-30f {
        margin-bottom: 30px !important;
    }

    .book_repaire_form h3 {
        font-size: 14px;
        font-weight: 500;
    }

    .book_repaire_form .form-group a {
        font-size: 14px;
        font-weight: 500;
    }

    .book_repaire_form .form-group .custom-checkbox label {
        font-size: 14px;
        font-weight: 400;
        padding: 30px 20px 0;
    }

    .productinfo .productinfo-content h2 {
        font-size: 20px;
        font-weight: 700;
    }

    .productinfo .productinfo-content h2 span {
        font-size: 16px;
        font-weight: 700;
    }

    .productinfo {
        padding: 0px 20px;
    }

    .productinfo .productinfo-content p {
        font-size: 14px;
    }

    .productinfo~.form-group {
        padding: 0px 20px;
    }

    .productpricing {
        padding: 0px 20px;
    }

    .book_repaire_form .form-group table th,
    .book_repaire_form .form-group table td {
        font-size: 14px;
    }

    .book_repaire_form .form-group p,
    .book_repaire_form .form-group ul li a {
        font-size: 14px;
    }

    .book_repaire_form .form-group h4 {
        font-size: 14px;
    }

    .service_top_head.servicepage-breadcrumb {
        padding-top: 15px;
        padding-bottom: 30px;
    }

    .service_top_head.servicepage-breadcrumb .breadcrumbs {
        margin-bottom: 17px;
    }

    .jewellery_cleaning_datas .repair_btn {
        display: none;
    }

    .unlock_how_works .faq_conts_data h3 {
        font-size: 14px;
        font-weight: 400;
    }

    .unlock_watch_content {
        padding: 30px 20px;
        background: transparent;
    }

    .featured_in_secs.unlock_watch_feature .inner_jewellery_data h2 {
        font-size: 20px;
        font-weight: 700;
    }

    .unlock_watch_faq-label {
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
        margin-bottom: 15px !important;
    }

    .unlock_faq_datas .watched_book_repairs {
        margin-top: 15px;
    }

    .unlock_faq_datas .watched_book_repairs.thetimes {
        display: inline-flex;
        margin-bottom: 0px;
        width: 100%;
    }

    .watched_book_repairs .repair_btn {
        width: 100%;
        text-align: center;
    }

    .sectionheading {
        padding: 15px 20px;
        font-size: 20px;
        font-weight: 700;
    }

    .searvicetype1 img {
        height: auto;
        margin-top: 60px;
    }

    .searvicetype1 h1 {
        max-width: 100% !important;
        font-size: 24px;
        font-weight: 500;
    }

    .searvicetype1 p {
        font-weight: 400 !important;
    }

    .searvicetype1 .main_repair_btn {
        margin-top: 55px;
    }

    .jewellery_cards_data img {
        height: 288px;
        object-fit: cover;
    }

    /* .coll_lists {
        width: calc(100% + 40px);
        margin: -20px;
    } */

    .productgrid-list .product_collection_lists {
        row-gap: 15px;
    }

    .productgrid-list {
        padding-bottom: 30px;
    }

    .product_collection_lists .product_items_data .product_collection_image,
    .latest_jewellery_slides .jewellery_item_datas .inn_prdct_img {
        height: 210px;
    }

    .product-slider {
        overflow: visible;
    }

    .checkout-popup-second.show {
        position: unset;
    }

    .checkout-popup-second.show~.modal-backdrop {
        display: none !important;
    }

    .product-details-info-short h2 {
        margin-bottom: 0px;
    }

    /* .product-details-info-short {
        margin-bottom: 30px;
    } */

    .product-details-info-short .product-price {
        margin-bottom: 14px;
        font-weight: 700;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0%;
        text-align: right;
        width: auto;
    }

    .product-description {
        margin-block: 30px;
    }

    .productgrid {
        padding-top: 17px;
        padding-bottom: 17px;
    }

    .productgrid .title_banner h1 {
        gap: 15px;
    }

    .mt-17mb {
        padding: 17px 20px 15px 20px;
        margin-bottom: 0px;
    }

    .product-count {
        margin-top: 15px;
    }

    .top_pre_owned h2 {
        font-size: 14px;
        font-weight: 500;
    }

    .top_pre_owned p {
        /* color: #373b3ca8; */
        font-size: 10px;
    }

    .pre-owned_watches a {
        font-size: 14px;
        font-weight: 400;
    }

    .prdct_grid_img_conts .pre_owned_img img {
        height: 314px;
    }

    .product_items_data .main_faq_page_accordion {
        display: none;
    }

    .details_slider .product_collection_lists,
    .product_grid_data_secs .product_collection_lists {
        /* Clean 2-col grid on mobile (base flips these to flex-wrap with 0 gap); the 15px
           gap comes from the non-media `gap:15px` rule above. */
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .details_slider .product_collection_lists .product_items_data,
    .product_grid_data_secs .product_collection_lists .product_items_data {
        width: 100% !important;
        /* vertical spacing handled by the grid's row-gap (see the `gap:15px` rule) */
    }

    .checoutscreen .product-main-inner,
    .checoutscreen .faq_data_secs,
    .checoutscreen .latest_jewellery_secs {
        display: none;
    }

    .checoutscreen {
        display: flex;
        flex-direction: column;
    }

    .checoutscreen .main_header {
        order: 1;
    }

    .checoutscreen .product-main {
        order: 2;
    }

    .checoutscreen .checkout-popup-second.show {
        order: 3;
    }

    .checoutscreen .footer-top {
        order: 4;
    }

    .checoutscreen .main_footer {
        order: 5;
    }

    .footer-top {
        padding: 24px 0 !important;
    }

    .right_footer_data {
        max-width: 100% !important;
    }

    .product-finance-details {
        margin-top: 30px;
        padding: 45px 19px;
        margin-left: -20px;
        width: calc(100% + 40px);
        margin-bottom: 30px;
    }

    .mobile-filterproduct {
        padding: 15px 0;
    }

    .selecte-list {
        gap: 10px;
        overflow: auto;
        display: none !important;
    }

    .selecte-list .filterselected {
        border-radius: 8px;
        padding: 10px 20px;
        gap: 10px;
        background: #373b3c;
        box-shadow: 0px 4px 15px 0px #00000020;
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #fff;
        display: inline-flex;
        white-space: nowrap;
    }

    .filter-panels {
        width: calc(100% + 40px);
        margin-left: -20px;
    }

    .filter-panels .inputcheck {
        padding: 30px 20px;
        border-bottom: 1px solid #e7e7e7;
    }

    .filter-panels .primary-menu-panel button.menu-link,
    .filter-panels .menu-panel button.menu-link {
        display: flex;
        align-items: center;
        padding-right: 80px;
        justify-content: space-between;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
    }

    .filter-panels .menu-panel button.menu-link {
        padding-right: 20px;
    }

    .filter-panels .primary-menu-panel button.menu-link span,
    .filter-panels .menu-panel button.menu-link span {
        font-weight: 500;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
        text-align: right;
        color: #373b3ca8;
    }

    .filter-panels .menu-panel .range-container {
        width: 100%;
        background: none;
        display: flex;
        flex-direction: column;
        padding-top: 129px;
        padding-bottom: 129px;
    }

    .filter-panels .menu-panel ul li.selected a {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .filter-panels .menu-panel .range_updates {
        display: flex;
        width: 100%;
        padding: 0px 20px;
        margin-bottom: 30px;
    }

    .filter-panels .menu-panel .update-btn {
        background: #ebeded !important;
        width: 100%;
        height: 50;
        padding-top: 15px;
        padding-bottom: 15px;
        font-weight: 700;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
        text-align: center;
        color: #373b3c;
    }

    .filter-panels .menu-panel {
        display: none;
    }

    .filter-panels .menu-panel.is-active {
        display: block;
    }

    .filter-panels .primary-menu-panel.is-notactive {
        display: none;
    }

    .unlock-value-of-jewelley-trustpilot {
        padding-left: 0 !important;
        width: 100% !important;
    }
}

@media only screen and (max-width: 575px) {
    .main_repair_btn .repair_btn {
        max-width: 100%;
    }

    .image262 {
        height: 262px;
        object-fit: cover;
    }

    .main_repair_btn .repair_btn {
        width: 100%;
        text-align: center;
        display: block;
    }

    .contact_data h2 {
        margin-bottom: 15px;
    }

    .blog_img img {
        height: 236px;
        object-fit: cover;
    }

    .repair_watch_form .form-group {
        margin-bottom: 15px;
    }

    .repair_watch_form .submit_data {
        padding: 0px;
    }

    .cleaning_images img:last-child {
        max-width: 200px;
    }

    .cleaning_images {
        justify-content: space-between;
        gap: 0px;
    }

    .trust_badges {
        width: 120%;
    }

    .trust_badges img {
        height: 16px;
        width: 50%;
        max-width: none;
        object-fit: contain !important;
    }

    .left_head_data {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 8px;
    }

    /* Mobile Filter Panel Styles - Commented out since inline styles in grid-page.blade.php handle this */
    /*
.mobile-filter-panel {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: 300px;
    height: 100vh;
    background: #fff;
    z-index: 9999;
    transition: left 0.3s ease-in-out !important;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    display: none; 
  }

  .mobile-filter-panel.open {
    left: 0 !important;
  }
  */

    .mobile-filter-header {
        padding: 20px;
        border-bottom: 1px solid #e5e5e5;
        background: #f8f9fa;
    }

    .mobile-filter-header h3 {
        margin: 0;
        font-weight: 600;
        font-size: 1.1rem;
    }

    .mobile-filter-header .btn-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        color: #666;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .mobile-filter-header .btn-close:hover {
        background: #f0f0f0;
        color: #000;
    }

    .mobile-breadcrumbs {
        padding: 15px 0;
        border-bottom: 1px solid #e5e5e5;
    }

    .mobile-breadcrumbs .d-flex {
        align-items: center;
    }

    .mobile-breadcrumbs .btn-close {
        background: none;
        border: none;
        font-size: 1.2rem;
        color: #6c757d;
        cursor: pointer;
        padding: 5px;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-breadcrumbs .btn-close:hover {
        background: #f0f0f0;
        color: #000;
    }

    .mobile-breadcrumbs .breadcrumbs ul {
        font-size: 0.875rem;
    }

    .mobile-breadcrumbs .breadcrumbs a {
        color: #6c757d;
    }

    .mobile-breadcrumbs .breadcrumbs a:hover {
        color: #000;
    }

    .mobile-product-count {
        margin-top: 8px;
    }

    .mobile-product-count .product-count {
        font-size: 0.875rem;
        color: #6c757d;
        margin: 0;
    }

    /* Mobile full-width header elements */
    @media (max-width: 767.98px) {

        .product-header-row .col-lg-8,
        .product-header-row .col-md-7 {
            width: 100% !important;
            max-width: 100% !important;
            flex: 0 0 100% !important;
        }

        .product-header-row .col-lg-4,
        .product-header-row .col-md-5 {
            width: 100% !important;
            max-width: 100% !important;
            flex: 0 0 100% !important;
            margin-top: 15px;
        }

        .product-header-row .jump_brands {
            justify-content: flex-start !important;
        }

        .product-header-main {
            width: 100%;
        }

        .mobile-product-count {
            width: 100%;
        }

        .product-header-filters {
            width: 100%;
        }
    }

    .right_head_data {
        gap: 20px;
    }

    .top_left_infos {
        gap: 20px;
    }

    .inner_jewellery_data h2 {
        margin-bottom: 30px;
    }

    .see_more_btn {
        margin-top: 30px;
    }

    .see_more_btn img {
        display: none;
    }

    .latest_jewellery_secs {
        padding: 30px 0px 30px;
    }

    .latest_jewellery_secs.shop-in-stock {
        padding-top: 0;
    }

    .product-main-faqs h2 {
        margin-bottom: 15px;
        font-size: 16px;
        font-weight: 700px;
    }

    .inner_foot_rows {
        grid-template-columns: repeat(2, auto);
    }

    .main_category_secs {
        /* background: #fff; */
        padding: 0;
    }

    .inner_category_data {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 15px;
    }

    .collection_img img {}

    .main_category_secs .container {
        padding: 0;
    }

    .coll_items_data ul li {
        width: calc(100% / 2);
    }

    .inner_faq_data .accordion .accordion-item {
        margin-bottom: 10px;
    }

    .inner_faq_data .accordion {
        /* margin-left: -20px;
        margin-right: -20px; */
        overflow: hidden;
    }

    .inner_faq_data .accordion .row {
        margin-left: 0px;
        margin-right: 0px;
    }

    .inner_faq_data .accordion .row .col-lg-6 {
        padding: 0px;
    }

    .inner_service_details a.repair_btn {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        max-width: 100%;
    }

    .left_404_data h1 {
        font-size: 28px;
    }

    .left_404_data h4 {
        font-size: 16px;
    }

    .left_404_data p {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .blog_lists_data {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        row-gap: 10px;
    }

    .jump_brands.collection_zump_brands {
        justify-content: flex-start;
        margin-bottom: 20px;
    }

    .contact_submit_btn button.btn.btn-primary {
        width: 100%;
    }

    .unlock_repair_secs {
        margin-top: 30px;
    }

    .lamna_money_clients {
        margin: 68px 0px 38px;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 30px;
    }

    .lamna_clients h2 {
        font-size: 20px;
        font-weight: 700;
    }

    .experience_lists {}

    .inner_watch_jewellery_cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .product-main-inner {
        flex-direction: column;
        gap: 30px;
    }

    .product-main-inner .col-lg-7 {
        width: 100%;
    }

    .product-main-inner .col-lg-4 {
        width: 100%;
    }

    .product-slider {
        overflow: visible;
    }

    .product-name {
        margin-bottom: 14px;
        font-size: 14px;
    }

    .product-price {
        font-size: 18px;
        /* margin: 0px 0 20px; */
    }

    .my-bag-popup .modal-dialog {
        margin: 0 0px 0 auto;
    }

    .checkout-popup .modal-dialog {
        max-width: 100%;
    }

    /* Finance Available Modal - make close button visible on tablet */
    #exampleModalToggle_availablefinace button.btn-close {
        display: block !important;
        position: absolute !important;
        right: 15px !important;
        top: 15px !important;
        z-index: 1051 !important;
        width: 32px !important;
        height: 32px !important;
        opacity: 1 !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        border: none !important;
    }

    .checkout-popup button.btn-close {
        right: 10px;
        top: 10px;
        z-index: 9;
    }

    .offcanvas {
        padding: 0px;
    }

    .offcanvas-header {
        padding: 15px 20px 15px 15px;
    }

    .offcanvas-body {
        padding: 0px 20px 20px 20px;
    }

    .watched_book_repairs .repair_btn {
        width: 100%;
        text-align: center;
        max-width: 100%;
    }
}

.schedule_heading {
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    letter-spacing: 0;
    /* color: #373b3c; */
    margin-bottom: 15px;
}

.schedule_content {
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0;
    /* color: #373b3ca8; */
    margin-bottom: 0px;
}

.featured_logos_slider.owl-carousel .owl-stage {
    display: flex;
    align-items: center;
}

.featured_logos_slider.owl-carousel .item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-container .swiper-slide a {
    display: block;
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
}

.gallery-container .gallery-main .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    /* contain (not cover) so the whole product image shows at full height without being
       cropped top/bottom — client repeat-report. */
    object-fit: contain;
    object-position: center;
    transition: transform 0.2s ease;
    transform-origin: center center;
    border-radius: 15px;
}

body.offcanvas-open {
    overflow: none !important;
    height: 100%;
}

/* modal */

/* General modal improvements for all screen sizes */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: 100vh;
    justify-content: center;
    margin: 0 auto;
}

/* My-Bag popup specific positioning for large screens */
@media (min-width: 769px) {
    .my-bag-popup .modal-dialog {
        position: fixed;
        bottom: 0;
        right: -70 !important;
        margin: 0;
        max-width: 600px;
        min-height: auto;
        align-items: flex-end;
        justify-content: flex-end;
        padding: 0 70px 0 0;
    }

    .my-bag-popup .modal-content {
        border-radius: 20px 20px 0 0;
        margin-bottom: 0;
    }
}

.modal-content {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    border-radius: 12px !important;
    /* background-color: #fff !important; */
}

/* Ensure modals are centered on all devices */
.modal.show .modal-dialog {
    transform: none !important;
    margin: 0 auto !important;
}

/* Add backdrop blur effect */
.modal-backdrop {
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Enhanced modal animations */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: scale(0.8);
}

.modal.show .modal-dialog {
    transform: scale(1);
}

/* Improve modal content spacing */
.modal-content {
    position: relative;
    z-index: 1050;
}

/* Better close button positioning */
.modal .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1051;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    filter: invert(1) !important;
    opacity: unset;
}

/* Medium screen modal adjustments */
@media (max-width: 768px) and (min-width: 481px) {
    .main_header {
        /* padding: 21px 0 !important; */
    }

    .modal-dialog {
        max-width: 90% !important;
        margin: 20px auto !important;
        min-height: 100vh;
    }

    .modal-content {
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
        border: none !important;
    }

    .checkout-popup .modal-dialog {
        max-width: 90% !important;
    }

    /* Make close button visible on all finance modals on medium screens */
    #exampleModalToggle_oldfinace button.btn-close,
    #exampleModalToggle_availablefinace button.btn-close,
    #exampleModalToggle_yourdetails button.btn-close,
    #exampleModalTogglemobilefinance button.btn-close {
        display: block !important;
        position: absolute !important;
        right: 15px !important;
        top: 15px !important;
        z-index: 1051 !important;
        width: 32px !important;
        height: 32px !important;
        opacity: 1 !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        border: none !important;
    }

    .my-bag-popup .modal-dialog {
        max-width: 90% !important;
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100vh !important;
    }

    .cta-modal .modal-dialog {
        max-width: 90% !important;
    }
}

/* Small screen modal responsiveness */
@media (max-width: 480px) {

    /* increase distance from top for mobile screens */
    nav.slide-out-menu {
        bottom: 0 !important;
        border-top: 1px solid #e5e5e5;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.05);
    }

    /* add downward shadow to main header */
    .main_header {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        padding: 21px 0;
    }

    /* Reduce modal width and height for small screens — exclude bag modal */
    .modal-dialog:not(.my-bag-dialog) {
        max-width: 85% !important;
        margin: 20px auto !important;
        display: flex;
        align-items: center;
        min-height: 100vh;
        justify-content: center;
    }

    /* Reduce modal content height — exclude bag modal */
    .modal-content:not(.my-bag-content) {
        max-height: 70vh;
        overflow-y: auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
        border: none !important;
    }

    /* Add rounded borders to all modals — exclude bag modal */
    .modal-content:not(.my-bag-content) {
        border-radius: 15px !important;
    }

    /* Specific adjustments for checkout modals */
    .checkout-popup .modal-dialog {
        max-width: 95% !important;
        margin: 10px auto !important;
    }

    .checkout-main {
        padding: 15px 10px !important;
    }

    /* Reduce form spacing for small screens */
    .checkout-popup .form-group {
        margin-bottom: 15px;
    }

    .checkout-popup .row.g-3>* {
        padding: 0.5rem;
    }

    /* Adjust button sizes */
    .checkout-popup .btn {
        padding: 12px 8px;
        font-size: 14px;
    }

    /* My bag popup adjustments */
    .my-bag-popup .modal-dialog {
        max-width: 95% !important;
        margin: 10px auto !important;
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100vh !important;
    }

    .my-bag-popup .modal-content {
        border-radius: 15px !important;
    }

    /* CTA modal adjustments */
    .cta-modal .modal-dialog {
        max-width: 95% !important;
        margin: 10px auto !important;
    }

    .cta-modal .modal-content {
        border-radius: 15px !important;
    }

    /* Finance modal adjustments */
    .finance-modal .modal-dialog {
        max-width: 95% !important;
        margin: 10px auto !important;
    }

    .finance-modal .modal-content {
        border-radius: 15px !important;
    }

    /* Finance Available Modal mobile adjustments */
    /* .finance-available-modal {
        max-width: 100% !important;
        margin: 0 !important;
        width: calc(100% - 20px) !important;
    }

    .finance-available-content {
        max-height: 95vh !important;
        border-radius: 15px !important;
    }

    /* Make close button visible for finance available modal */
    #exampleModalToggle_availablefinace button.btn-close {
        display: block !important;
        position: absolute !important;
        right: 15px !important;
        top: 15px !important;
        z-index: 1051 !important;
        width: 32px !important;
        height: 32px !important;
        opacity: 1 !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        border: none !important;
    }

    #exampleModalToggle_availablefinace .modal-body {
        padding: 15px !important;
    }

    #exampleModalToggle_availablefinace .checkout-main,
    #exampleModalToggle_yourdetails .checkout-main {
        padding: 10px !important;
        gap: 0 !important;
        flex-direction: column !important;
    }

    #exampleModalToggle_availablefinace .checkout-payment-details,
    #exampleModalToggle_yourdetails .checkout-payment-details {
        margin: 0 !important;
    }

    #exampleModalToggle_availablefinace .checkout-payment-details form,
    #exampleModalToggle_yourdetails .checkout-payment-details form {
        height: auto !important;
        max-height: 55vh;
        overflow-y: auto;
        padding-right: 10px;
    }

    #exampleModalToggle_availablefinace .modal-middle-finace,
    #exampleModalToggle_yourdetails .modal-middle-finace {
        flex: unset !important;
        overflow-y: unset !important;
    }

    #exampleModalToggle_availablefinace .checkout-pop-right,
    #exampleModalToggle_yourdetails .checkout-pop-right {
        display: none !important;
    }

    /* Reduce modal header and footer padding */
    .modal-header {
        padding: 15px 15px !important;
    }

    .modal-footer {
        padding: 15px 15px !important;
    }

    .modal-body {
        padding: 15px !important;
    }

    /* Adjust close button position for small screens */
    .modal .btn-close {
        right: 10px !important;
        top: 10px !important;
        width: 25px !important;
        height: 25px !important;
    }
}

/* ---------------------------------------------------------------
   Finance modal mobile overrides (≤767px)
   Applies to modals 2 & 3 which are also shown on mobile via
   the pre-qualification flow. Hide image panel, single column.
--------------------------------------------------------------- */
@media (max-width: 767px) {

    /* Prevent column-reverse from breaking finance modal layout */
    #exampleModalToggle_availablefinace .checkout-main,
    #exampleModalToggle_yourdetails .checkout-main {
        flex-direction: column !important;
    }

    /* Hide product image panel — not needed on mobile */
    #exampleModalToggle_availablefinace .checkout-pop-right,
    #exampleModalToggle_yourdetails .checkout-pop-right {
        display: none !important;
    }

    /* Form height auto so content is not clipped */
    #exampleModalToggle_availablefinace .finance-bag,
    #exampleModalToggle_yourdetails #finance-details-form {
        height: auto !important;
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Scrollable content area fills remaining space */
    #exampleModalToggle_availablefinace .modal-middle-finace,
    #exampleModalToggle_yourdetails .modal-middle-finace {
        flex: unset !important;
        overflow-y: unset !important;
        margin: 0 !important;
    }

    /* Close button for ALL finance modals including mobile pre-qual */
    #exampleModalToggle_oldfinace button.btn-close,
    #exampleModalToggle_availablefinace button.btn-close,
    #exampleModalToggle_yourdetails button.btn-close,
    #exampleModalTogglemobilefinance button.btn-close {
        display: block !important;
        position: absolute !important;
        right: 12px !important;
        top: 12px !important;
        z-index: 1051 !important;
        width: 28px !important;
        height: 28px !important;
        opacity: 1 !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        border: none !important;
    }

    /* Mobile pre-qual modal — full width single column */
    #exampleModalTogglemobilefinance .checkout-main {
        flex-direction: column !important;
        padding: 15px !important;
    }

    #exampleModalTogglemobilefinance .checkout-pop-left {
        width: 100% !important;
    }
}

/* ---------------------------------------------------------------
   Filter dropdown z-index fix
   testimonials.blade.php and its children use Bootstrap's
   .position-relative class (position: relative !important).
   Being later in the DOM they can overlay filter dropdowns.
   Setting them all to static removes them from stacking entirely.
--------------------------------------------------------------- */
#testimonials,
#testimonials .position-relative {
    position: static !important;
}

/* ── findWatchToggle: centered on desktop, bottom sheet on mobile ── */

/* Desktop: standard centered modal */
@media (min-width: 768px) {
    #findWatchToggle .modal-dialog {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: 520px !important;
        margin: 1.75rem auto !important;
        min-height: auto !important;
        display: block !important;
    }

    #findWatchToggle .modal-content {
        border-radius: 0.5rem !important;
        border: 1px solid var(--sb-border) !important;
        background-color: var(--sb-surface-2) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        max-height: none !important;
        overflow-y: visible !important;
    }

    #findWatchToggle .modal-content::before {
        display: none !important;
    }
}

/* Mobile: full-width bottom sheet */
@media (max-width: 767px) {
    .serivce-repaire-banner .breadcrumbs {
        padding-top: 155px;
    }
    .whats-app-float {
        bottom: 100px !important;
        right: 5% !important;
    }

    /* When Bootstrap adds .show, turn the overlay into a flex column
     anchored to the bottom — no position:fixed fight needed */
    #findWatchToggle.show {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #findWatchToggle .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        min-height: auto !important;
        display: block !important;
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
    }

    /* Start off-screen below */
    #findWatchToggle.fade .modal-dialog {
        transform: translateY(100%) !important;
        opacity: 1 !important;
    }

    /* Slide into place */
    #findWatchToggle.show .modal-dialog {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    #findWatchToggle .modal-content {
        border-radius: 20px 20px 0 0 !important;
        border: none !important;
        background-color: var(--sb-surface-2) !important;
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5) !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
    }

    #findWatchToggle .modal-content::before {
        content: "";
        display: block !important;
        width: 36px;
        height: 4px;
        background: #d1d1d6;
        border-radius: 2px;
        margin: 8px auto 4px;
        flex-shrink: 0;
    }
}

/* ── Sell Your Watch page layout ── */
.sell-watch-layout {
    margin-top: 12px;
    display: flex;
    gap: 20px;
}

.sell-watch-form-section {
    flex: 1 1 50%;
    min-width: 0;
    max-width: none;
}

/* Sell watch (v3 theme only) — match Form Builder fields to native V3 form-group design */
.theme-v3 .sell-watch-form-section #fb-rendered-form .form-group,
.theme-v3 .find-watch-form-section #fb-rendered-form .form-group {
    margin-bottom: 15px;
}

.theme-v3 .sell-watch-form-section #fb-rendered-form .form-group>label,
.theme-v3 .sell-watch-form-section #fb-rendered-form .form-group label.formbuilder-label,
.theme-v3 .find-watch-form-section #fb-rendered-form .form-group>label,
.theme-v3 .find-watch-form-section #fb-rendered-form .form-group label.formbuilder-label {
    font-size: 16px;
    color: #E6E6E6;
    font-family: "Acumin Pro", sans-serif;
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
}

.theme-v3 .sell-watch-form-section #fb-rendered-form .form-group label .formbuilder-required,
.theme-v3 .find-watch-form-section #fb-rendered-form .form-group label .formbuilder-required {
    color: #E6E6E6;
}

.theme-v3 .sell-watch-form-section #fb-rendered-form .form-group .form-control,
.theme-v3 .sell-watch-form-section #fb-rendered-form .form-group input.form-control,
.theme-v3 .sell-watch-form-section #fb-rendered-form .form-group select.form-control,
.theme-v3 .find-watch-form-section #fb-rendered-form .form-group .form-control,
.theme-v3 .find-watch-form-section #fb-rendered-form .form-group input.form-control,
.theme-v3 .find-watch-form-section #fb-rendered-form .form-group select.form-control,
.theme-v3 .find-watch-form-section #fb-rendered-form .form-group textarea.form-control {
    height: 60px;
    width: 100%;
    border: 1px solid #E6E6E6;
    border-radius: 30px;
    outline: none;
    padding: 20px;
    font-size: 15px;
    color: #fff;
    box-shadow: none;
    background-color: transparent;
}

.theme-v3 .sell-watch-form-section #fb-rendered-form .form-group select.form-control,
.theme-v3 .find-watch-form-section #fb-rendered-form .form-group select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("../images/select_down_arrow.png");
    background-repeat: no-repeat;
    background-position: 97% 50%;
    background-size: auto;
    padding-right: 40px;
    cursor: pointer;
}

.theme-v3 .find-watch-form-section #fb-rendered-form .form-group textarea.form-control {
    height: auto;
    min-height: 120px;
}

.theme-v3 .sell-watch-form-section #fb-rendered-form .form-group .form-control::-webkit-input-placeholder,
.theme-v3 .find-watch-form-section #fb-rendered-form .form-group .form-control::-webkit-input-placeholder {
    color: var(--sb-text-muted);
}

.theme-v3 .sell-watch-form-section #fb-rendered-form .form-group .form-control::-moz-placeholder,
.theme-v3 .find-watch-form-section #fb-rendered-form .form-group .form-control::-moz-placeholder {
    color: var(--sb-text-muted);
}

.theme-v3 .sell-watch-form-section #fb-rendered-form .form-group .form-control:-ms-input-placeholder,
.theme-v3 .find-watch-form-section #fb-rendered-form .form-group .form-control:-ms-input-placeholder {
    color: var(--sb-text-muted);
}

.theme-v3 .sell-watch-form-section #fb-rendered-form .form-group .form-control::placeholder,
.theme-v3 .find-watch-form-section #fb-rendered-form .form-group .form-control::placeholder {
    color: var(--sb-text-muted);
}

.theme-v3 .sell-watch-form-section #fb-rendered-form .form-group .form-control:focus,
.theme-v3 .find-watch-form-section #fb-rendered-form .form-group .form-control:focus {
    border-color: #e7e7e7;
    box-shadow: none;
}

.theme-v3 .sell-watch-file-list {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    font-size: 14px;
    color: #373b3c;
}

.theme-v3 .sell-watch-file-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.theme-v3 .sell-watch-file-list li {
    position: relative;
    padding: 6px 0 6px 22px;
    line-height: 1.4;
    word-break: break-word;
}

.theme-v3 .sell-watch-file-list li+li {
    border-top: 1px solid #ebecec;
}

.theme-v3 .sell-watch-file-list li::before {
    content: "-";
    position: absolute;
    left: 0;
    top: 6px;
    font-weight: 700;
    font-size: 13px;
}

@media (max-width: 767px) {
    .sell-watch-layout {
        flex-direction: column;
        gap: 0;
    }

    .sell-watch-form-section {
        order: 2;
        width: 100%;
    }

    .sell-watch-trustpilot-section {
        order: 1;
        width: 100%;
    }

    .sell-watch-layout .repair_watch_form {
        max-width: 100%;
        margin: 20px 0;
    }

    .sell-watch-layout .form-control {
        width: 100%;
    }
}

/* ── Find a Watch page layout ── */
.find-watch-layout {
    margin-top: 12px;
    display: flex;
    gap: 20px;
}

.find-watch-form-section {
    flex: 1 1 50%;
    min-width: 0;
    max-width: none;
}

.find-watch-trustpilot-section {
    flex: 1 1 50%;
    min-width: 0;
    width: auto;
    margin-top: 140px;
}

.theme-v3 .find-watch-form-section .hide {
    display: none;
}

.theme-v3 .find-watch-form-section #valid-msg {
    color: #00c900;
    font-size: 14px;
    margin-top: 6px;
}

.theme-v3 .find-watch-form-section #error-msg {
    color: #e55468;
    font-size: 14px;
    margin-top: 6px;
}

.theme-v3 .find-watch-form-section .iti {
    width: 100%;
}

@media (max-width: 767px) {
    .find-watch-layout {
        flex-direction: column;
        gap: 0;
    }

    .find-watch-form-section {
        order: 2;
        width: 100%;
    }

    .find-watch-trustpilot-section {
        order: 1;
        width: 100%;
        margin-top: 0;
    }

    .find-watch-layout .repair_watch_form {
        max-width: 100%;
        margin: 20px 0;
    }
}

/* ===== Desktop Category Drop-Down Navigation ===== */

/* Disable old side-drawer on desktop — replaced by new category bar */
@media (min-width: 768px) {
    .desktop_menu_overlay {
        display: none !important;
    }
}

/* Hidden by default; JS adds .is-open */
.dsk-cat-nav,
.dsk-mega-wrap {
    display: none;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}

/* Full-width within these bars — override Bootstrap container */
.dsk-cat-nav .container,
.dsk-mega-wrap .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.dsk-cat-nav.is-open {
    display: block;
    position: fixed;
    top: var(--dsk-menu-top, 108px);
    left: 0;
    right: 0;
    z-index: 998;
    animation: dskSlideDown 0.22s ease both;
}

.dsk-mega-wrap.is-open {
    display: block;
    position: fixed;
    top: calc(var(--dsk-menu-top, 108px) + 10vh);
    left: 0;
    right: 0;
    z-index: 997;
    animation: dskSlideDown 0.18s ease both;
}

@keyframes dskSlideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Layer 1 — category bar */
.dsk-cat-nav-inner {
    display: flex;
    align-items: center;
    height: 10vh;
}

.dsk-cat-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 82px;
    padding-right: 36px;
    padding-left: 0;
    font-size: 16px;
    color: #373b3c;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: "Acumin Pro", sans-serif;
    font-weight: 400;
    white-space: nowrap;
    line-height: 1;
}

/* Short centered separator — 22px tall, vertically centred */
.dsk-cat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5px;
    height: 22px;
    background: #d0d0d0;
}

.dsk-cat-item:hover {
    color: #000;
    font-weight: 400;
}

.dsk-cat-item.is-active {
    font-weight: 500;
    color: #000;
}

/* Layer 2 — mega panel */
.dsk-mega-panel {
    display: none;
}

.dsk-mega-panel.is-active {
    display: block;
}

.dsk-mega-subnav {
    display: flex;
    align-items: center;
    height: 10vh;
}

.dsk-mega-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 82px;
    padding-right: 36px;
    font-size: 15px;
    color: #373b3c;
    text-decoration: none;
    white-space: nowrap;
    font-family: "Acumin Pro", sans-serif;
    font-weight: 400;
    line-height: 1;
}

/* Short centered separator on Layer 2 tabs */
.dsk-mega-tab:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: #d0d0d0;
}

.dsk-mega-tab:hover {
    font-weight: 400;
    color: #000;
}

.dsk-mega-tab.is-active {
    font-weight: 500;
    color: #000;
}

/* ===== Layer 3 — Brand mega panel ===== */
.dsk-layer3-wrap {
    display: none;
    position: fixed;
    top: calc(var(--dsk-menu-top, 108px) + 20vh);
    /* header + L1(82px) + L2(82px) */
    left: 0;
    right: 0;
    height: 60vh;
    overflow-y: auto;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    z-index: 996;
}

.dsk-layer3-wrap.is-open {
    display: block;
    animation: dskSlideDown 0.2s ease both;
}

.dsk-layer3-panel {
    display: none;
    padding: 28px 0 32px;
}

.dsk-layer3-panel.is-active {
    display: block;
}

/* Brand image grid — 4 columns */
.dsk-l3-brand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 20px;
    margin-bottom: 28px;
}

.dsk-l3-brand-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.dsk-l3-brand-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f3f3;
    margin-bottom: 8px;
}

.dsk-l3-brand-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.dsk-l3-brand-card:hover .dsk-l3-brand-img img {
    transform: scale(1.03);
}

.dsk-l3-brand-name {
    font-size: 14px;
    color: #373b3c;
    font-family: "Acumin Pro", sans-serif;
    font-weight: 400;
}

/* All Brands text list */
.dsk-l3-all-brands {
    border-top: 1px solid #e8e8e8;
    padding-top: 20px;
}

.dsk-l3-all-brands-label {
    font-size: 11px;
    color: #a8a8a8;
    margin: 0 0 12px;
    font-family: "Acumin Pro", sans-serif;
}

.dsk-l3-brands-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px 16px;
}

.dsk-l3-brand-link {
    display: block;
    font-size: 14px;
    color: #373b3c;
    text-decoration: none;
    font-family: "Acumin Pro", sans-serif;
    line-height: 2;
}

.dsk-l3-brand-link:hover {
    color: #000;
    text-decoration: underline;
}

/* Hide on mobile */
@media (max-width: 767px) {

    .dsk-mega-wrap,
    .dsk-layer3-wrap {
        display: none !important;
    }
}

/* Allow page scrolling while the bag modal is open (Bootstrap adds `modal-open` and disables it). */
body.my-bag-open.modal-open {
    overflow-y: auto !important;
    padding-right: 0 !important;
}


/* --- 1. Price typography --- */
.checkout-modal .totalamount,
.checkout-modal .totalamount strong,
.checkout-modal .mobile-price .price,
.checkout-modal .mobile-price .price span,
.checkout-modal .checkout-right .product-items .item-list .price-column .price-amount,
.checkout-modal .price,
.checkout-modal .price strong,
.checkout-modal .price span {
    font-weight: 300 !important;
    /* color: #373b3c !important; */
}

/* pure black only on hover */
.checkout-modal .totalamount:hover,
.checkout-modal .totalamount strong:hover,
.checkout-modal .mobile-price .price:hover,
.checkout-modal .price:hover,
.checkout-modal .price strong:hover,
.checkout-modal .checkout-right .product-items .item-list .price-column .price-amount:hover {
    color: #000 !important;
}

/* keep the price inside the (dark) Complete Payment button white & legible */
.checkout-modal #makePaymentBtn,
.checkout-modal #makePaymentBtn strong,
.checkout-modal #makePaymentBtn .cart-total-price {
    color: #fff !important;
    font-weight: 400 !important;
}

/* --- 2. Complete Payment button: inactive until the whole form is valid ---
   .co-locked is our own lock (JS) so checkout.js toggling `disabled` can't override it. */
.checkout-modal #makePaymentBtn:disabled,
.checkout-modal #makePaymentBtn[disabled],
.checkout-modal #makePaymentBtn.co-locked {
    background: #BCC0C2 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    border-radius: 30px;
}

/* =====================================================================
   QA: Quantity stepper as a SINGLE bordered box ( − n + ) — bag + checkout.
   The wrapper becomes the one outlined/rounded container; the −/+ buttons
   and the number input go borderless & transparent inside it.
   ===================================================================== */
#my-bag-modal .my-bag-quantity-wrapper,
#checkout-modal .checkout-quantity-wrapper {
    display: inline-flex !important;
    align-items: center;
    gap: 0 !important;
    width: -moz-fit-content;
    width: fit-content;
    background: #fff;
    border: 1px solid #cfd3d4;
    border-radius: 8px;
    overflow: hidden;
}

#my-bag-modal .my-bag-qty-btn,
#checkout-modal .checkout-qty-btn {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #373b3c !important;
    width: auto !important;
    height: auto !important;
    min-width: 36px;
    padding: 8px 12px !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#my-bag-modal .my-bag-qty-btn:hover,
#checkout-modal .checkout-qty-btn:hover {
    background: #f3f5f6 !important;
}

#my-bag-modal .my-bag-qty-input,
#checkout-modal .checkout-qty-input {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: center;
    width: 20px !important;
    height: auto !important;
    padding: 8px 0 !important;
    color: #373b3c !important;
    font-size: 15px;
    font-weight: 600;
}

/* =====================================================================
   Product gallery navigation (QA): clear arrows on desktop.
   - main image: prev/next on either side
   - thumbnail column: up/down arrows (+ mouse-wheel handled in proslider.js)
   ===================================================================== */

/* Thumbnail column wrapper: arrow ▲ overlaid at top, thumbs, arrow ▼ at bottom.
   Overlay (absolute) keeps the swiper's own height/thumb sizing intact. */
.gallery-thumbs-col {
    order: -1;
    flex: 0 0 93px;
    width: 93px;
    position: relative;
}

.thumbs-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: 40px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e7e7e7;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    color: #373b3c;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: border-color .2s, color .2s, background .2s;
}

.thumbs-button-prev {
    top: 0;
}

.thumbs-button-next {
    bottom: 0;
}

.thumbs-nav:hover {
    border-color: #7d3efb;
    color: #7d3efb;
}

.thumbs-nav.swiper-button-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

@media (min-width: 768px) {

    /* main image: prev / next arrows on either side, clearly visible */
    .gallery-main {
        position: relative;
        margin-bottom: 10px;
    }

    .gallery-main .swiper-button-prev,
    .gallery-main .swiper-button-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        color: #373b3c;
        z-index: 12;
        transition: background .2s, box-shadow .2s;
    }

    .gallery-main .swiper-button-prev {
        left: 12px;
    }

    .gallery-main .swiper-button-next {
        right: 12px;
    }

    .gallery-main .swiper-button-prev:hover,
    .gallery-main .swiper-button-next:hover {
        background: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    }

    .gallery-main .swiper-button-prev::after,
    .gallery-main .swiper-button-next::after {
        font-size: 15px;
        font-weight: 700;
    }

    /* Keep the arrow visible but DISABLED when there's no previous / next image
       (the first/last slide, or when there's only a single image). Swiper hides
       "locked" nav by default — force it shown so the control is always present. */
    .gallery-main .swiper-button-prev.swiper-button-disabled,
    .gallery-main .swiper-button-next.swiper-button-disabled,
    .gallery-main .swiper-button-prev.swiper-button-lock,
    .gallery-main .swiper-button-next.swiper-button-lock {
        display: flex !important;
        opacity: 0.4 !important;
        cursor: default;
        pointer-events: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
}

/* Mobile: thumbnails move BELOW the main image as a horizontal, swipeable row.
   (This block is later in the file than the earlier `.gallery-thumbs{display:none}`, so it
   wins at equal specificity — no !important needed.) */
@media (max-width: 767px) {
    .gallery-container {
        flex-direction: column;
    }

    /* Thumb column → full-width row under the main image. The gallery is full-bleed (its
       left edge is ~12px past the container), while the .product-details content below
       starts ~27px in. Pad the first thumbnail to that same content edge so it aligns with
       the product title / price. */
    .gallery-thumbs-col {
        display: block;
        order: 1;
        flex: 0 0 auto;
        width: 100%;
        margin-top: 12px;
        padding-left: 39px;
    }

    /* Up/down arrows don't fit a horizontal row — swipe the row instead. */
    .gallery-thumbs-col .thumbs-nav {
        display: none;
    }

    /* Thumbnail swiper: horizontal, full width, auto height. order:1 keeps it BELOW the
       main image in BOTH gallery structures — productDetails (thumbs wrapped in
       .gallery-thumbs-col) and product_outofstock (thumbs are a direct flex child, which
       otherwise inherits the desktop `order:-1` and jumps above the image). */
    .gallery-thumbs {
        display: block;
        order: 1;
        width: 100%;
        height: auto;
        flex: 0 0 auto;
        overflow: hidden;
    }

    .gallery-thumbs .swiper-slide {
        height: auto;
    }

    .gallery-thumbs .swiper-slide img {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 10px;
    }
}

.mobile_search {
    position: relative;
    /* anchor the absolute dropdown to the search bar */
}

.mobile_search .customsearch {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 60vh;
    background: #0e0e0e;
}

/* neutralise Bootstrap `.row` negative margins inside the dropdown */
.customsearch .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0;
    flex-wrap: nowrap;
    align-items: center;
}

.customsearch .row:hover {
    color: #000;
}

.customsearch [class*="col-"] {
    min-width: 0;
    /* let the text column shrink & wrap */
}

.customsearch .col-3 {
    flex: 0 0 auto;
    width: 52px;
    /* compact fixed thumb column */
    padding-left: 0;
    padding-right: 8px;
}

.customsearch .col-9 {
    flex: 1 1 auto;
    width: auto;
}

/* Bootstrap `.dropdown-item` is nowrap by default — let long names wrap */
.customsearch .dropdown-item,
.customsearch .col-9 {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: white;
}

.customsearch img.img-fluid {
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* ==========================================================================
   STOCKBOX-DARK THEME
   Dark re-skin layered on top of the v3 clone. Everything below overrides the
   light v3 surfaces. Palette tokens live in :root; sections are grouped so the
   ongoing dark pass (home sections, then all inner pages) can extend this block.
   Header  = MENU / SEARCH / BAG / CONTACT + badges + logo, frosted overlay on
             the home hero, solid sticky dark bar on scroll and on inner pages.
   Footer  = centered brand mark, 5 columns, slim FCA line + copyright.
   ========================================================================== */
:root {
    --sb-bg: #0e0e0e;
    /* page background */
    --sb-surface: #262626;
    /* image tiles / elevated cards (per design) */
    --sb-surface-2: #1a1a1a;
    /* bars, drawers, menus */
    --sb-text: #f5f5f5;
    /* primary text */
    --sb-text-muted: #a3a3a3;
    /* secondary text */
    --sb-border: rgba(255, 255, 255, 0.10);
    --sb-accent: #c9c9c9;
    /* existing v3 hover accent — reads well on dark */
    --sb-header-solid: #0e0e0e;
    /* solid header bar */
    --sb-header-h: 64px;
    /* kept in sync by JS in header.blade */
}

/* ---- Global surfaces ---- */
body.theme-v3 {
    background: var(--sb-bg);
    color: var(--sb-text);
    /* Kill phantom horizontal overflow that let the page be swiped sideways (the whole
       page was shifting left, cutting the left of the hero/text). `clip` — unlike
       `hidden` — creates no scroll container, so the sticky/fixed header and its
       viewport-anchored dropdowns/menu are unaffected; it only stops sideways scroll. */
    overflow-x: clip;
}

/* Apply the same clip to the actual scroll root so horizontal scroll can't originate
   there either (some browsers scroll the documentElement, not <body>). */
html:has(body.theme-v3) {
    overflow-x: clip;
}

/* Owl sliders must be measurable (not display:none) when their JS init runs.
   owl.carousel.css is loaded async and sets `.owl-carousel{display:none}`; if that
   base rule has applied by the time home-scripts.js re-inits these carousels
   (items:3, autoWidth:false), the container is 0-wide and the cards collapse into
   a single column. These higher-specificity rules keep the home sliders visible so
   owl measures a real width and lays the items out in a row. */
body.theme-v3 .latest_jewellery_slides.owl-carousel,
body.theme-v3 .new_jewellery_carousel.owl-carousel,
body.theme-v3 .featured_logos_slider.owl-carousel {
    display: block;
}

/* home-scripts.js destroys the blade-inited owl and re-inits it, but its destroy
   path STRIPS the `owl-carousel` class — so the base rule
   `.latest_jewellery_slides.owl-carousel .owl-stage{display:flex}` stops matching and
   the cards fall back to a vertical stack (owl.carousel.css's `float:left` is loaded
   async and doesn't reliably apply either). Force the stage to a row independent of
   the `owl-carousel` class so it survives the re-init. */
body.theme-v3 .latest_jewellery_slides .owl-stage {
    display: flex;
}

body.theme-v3 .latest_jewellery_slides .owl-stage .owl-item {
    float: none;
    flex: 0 0 auto;
    /* Flex items default to min-width:auto, so a long (2-line) product title forces
       the card WIDER than owl's computed width — making cards uneven. Pin min-width:0
       so each card keeps owl's width and the title wraps inside it instead. */
    min-width: 0;
}

body.theme-v3 .latest_jewellery_slides .jewellery_item_datas {
    min-width: 0;
    max-width: 100%;
    border-radius: 20px;
}

body.theme-v3 .latest_jewellery_slides .prct_content_infos {
    min-width: 0;
}

body.theme-v3 .latest_jewellery_slides .prct_content_infos h3 {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

/* Equal card HEIGHT across the row. The owl-stage is a flex row (align-items:stretch),
   so each owl-item stretches to the tallest — but the height only reaches the card if
   the chain below also fills 100%. The base rule that did this
   (`.latest_jewellery_slides.owl-carousel .owl-stage .item{height:100%}`) depends on the
   `owl-carousel` class that home-scripts.js strips on re-init, so a 2-line title made
   that one card taller. Re-assert the chain without the class dependency. */
body.theme-v3 .latest_jewellery_slides .owl-stage .item {
    height: 100%;
}

body.theme-v3 .latest_jewellery_slides .jewellery_item_datas {
    height: 100%;
    border-radius: 20px;
}

/* Keep the content block pinned to the bottom so prices line up across cards even
   when a neighbour's title wraps to two lines. */
body.theme-v3 .latest_jewellery_slides .prct_content_infos.d-flex {
    margin-top: auto;
}

/* Owl auto-generates empty `.owl-nav`/`.owl-dots` (with `disabled`) even when nav/dots
   are off. Owl normally hides them via `.owl-carousel .owl-nav.disabled{display:none}`,
   but that rule dies once home-scripts.js strips the `owl-carousel` class — so hide the
   disabled ones independently of the class. Scoped to the "Latest In" sliders only. */
body.theme-v3 .latest_jewellery_slides .owl-nav.disabled,
body.theme-v3 .latest_jewellery_slides .owl-dots.disabled {
    display: none;
}

/* ---- Latest In Watches / Jewellery: dark text (surfaces are already dark in the
   base CSS — only the light-theme text colours remained, so titles were invisible). --- */
body.theme-v3 .inner_jewellery_data h2 {
    color: var(--sb-text);
}

body.theme-v3 .prct_content_infos h3 a {
    color: var(--sb-text) !important;
}

body.theme-v3 .prct_content_infos h3 a:hover {
    color: #ffffff !important;
}

body.theme-v3 .latest_jewellery_slides .pricing_datas,
body.theme-v3 .prct_content_infos .card-title a {
    color: var(--sb-text);
}

body.theme-v3 .see_more_btn a {
    color: var(--sb-text-muted);
}

body.theme-v3 .see_more_btn a:hover {
    color: var(--sb-text);
}

/* ==========================  HEADER  ================================= */
/* Inner pages: solid dark bar, sticky in flow (occupies space — no overlap). */
body.theme-v3 header.main_header>.container {
    background: transparent;
    box-shadow: none;
}

/* Floating translucent bar on every page & breakpoint. The bar itself carries NO
   backdrop-filter — on mobile that would make it a containing block and trap the fixed
   slide-out menu — so the frosted 0.95 panel lives on ::before instead (a leaf pseudo,
   never an ancestor of the menu). It's sticky on inner pages (content scrolls under the
   blur) and fixed on home (floats over the hero). */
body.theme-v3 .main_header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 8px 0;
    background: transparent;
    box-shadow: 0 1px 0 var(--sb-border);
}

body.theme-v3 .main_header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Last value (0.7) is the bar's opacity — lower it toward 0 to show more of the
       content behind, raise it toward 1 for a more solid bar. */
    background: rgba(14, 14, 14, 0.3);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Home hero sits behind the bar, so there the bar floats (fixed) over it. */
body.theme-v3:has(.home_banner) .main_header {
    position: fixed;
    box-shadow: none;
}

/* Push the hero heading clear of the overlaid bar. */
body.theme-v3:has(.home_banner) .home_banner .banner_content_parts {
    padding-top: calc(var(--sb-header-h) + 28px);
}

/* The header's first layer is now floating pills (position:fixed), so every inner page must
   start its content BELOW them to avoid overlap. The pills' bottom edge is ~72px on desktop
   and ~97px on mobile (they sit lower there), so the clearance is breakpoint-aware. Home is
   excluded — its hero sits full-bleed behind the islands.
   NB: the clearance is on <main>, NOT <body>, so the sticky demo-trial timer (which sits
   before <main>) stays pinned at the very top and the page content scrolls behind it,
   instead of the timer being pushed down by the body padding. */
/* body.theme-v3:not(:has(.home_banner)) main {
    padding-top: 84px;
}

@media (max-width: 767.98px) {
    body.theme-v3:not(:has(.home_banner)) main {
        padding-top: 104px;
    }
} */

/* ══ Desktop header = floating islands (mirrors the mobile header) ══
   Top-left: CALL | EMAIL pill · Top-right: Trustpilot/Google pill ·
   Bottom: nav island — MENU · SEARCH · BAG · CONTACT (left) + logo (right).
   Same containing-block discipline as mobile: the header carries no bar background,
   and the bottom island (inner_header_data) must NOT hold backdrop-filter directly,
   because the two TOP islands are its DOM descendants and would get trapped as fixed
   children. All blur lives on ::before pseudos / leaf islands only. */
@media (min-width: 768px) {

    /* Kill the floating bar — the header is now just a positioning context. */
    body.theme-v3 .main_header::before {
        display: none;
    }

    body.theme-v3 .main_header {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    /* display:contents lifts the legacy left/right wrappers so their children become
       flex items / independent fixed islands — no DOM changes, all JS hooks kept. */
    body.theme-v3 .main_header .left_head_data,
    body.theme-v3 .main_header .right_head_data {
        display: contents;
    }

    body.theme-v3 .main_header .mobile_logo,
    body.theme-v3 .main_header .header_icons {
        display: none !important;
    }

    /* ── Bottom NAV island: fixed to the viewport bottom, rounded pill (not full width).
       MENU · SEARCH · BAG · CONTACT on the left, logo on the right. Centered via
       margin:auto (NO transform) and blurred via ::before, so it never becomes the
       containing block for the fixed top islands. ── */
    body.theme-v3 .main_header .inner_header_data {
        position: fixed;
        bottom: 22px;
        left: 0;
        right: 0;
        /* width: ; */
        max-width: calc(100% - 48px);
        margin: 0 auto;
        z-index: 1000;
        display: flex !important;
        grid-template-columns: none !important;
        align-items: center;
        /* gap:0 — spacing between MENU│SEARCH│BAG│CONTACT is carried by the per-link
           padding/margin around each divider (see below), like the CALL|EMAIL pill. */
        gap: 0;
        /* !important to beat the global `.container{padding:0 2vw !important}`. */
        padding: 14px 34px !important;
        border-radius: 100px;
        background: rgba(38, 38, 38, 0.66);
        /* slight white outline */
        border: 1px solid rgba(255, 255, 255, 0.15);
        overflow: visible;
    }

    body.theme-v3 .main_header .inner_header_data::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(5px);
    }

    body.theme-v3 .main_header .menu_data {
        order: 1;
        display: flex;
        align-items: center;
        margin-top: 0;
        height: auto;
    }

    body.theme-v3 .main_header .user_account_data {
        order: 2;
        display: flex;
        align-items: center;
        gap: 0;
        height: auto;
    }

    body.theme-v3 .main_header .user_account_data #accounthidden {
        display: none;
        /* Account moved into the MENU drawer */
    }

    /* ── Vertical dividers between MENU │ SEARCH │ BAG │ CONTACT (like CALL|EMAIL) ──
       Each link carries a right hairline with symmetric breathing room; the last link
       (Contact) drops its border so no line appears before the logo. #accounthidden is
       display:none so its border never renders. */
    body.theme-v3 .main_header .menu_data a.menu_links,
    body.theme-v3 .main_header .user_account_data>a {
        border-right: 1px solid rgba(255, 255, 255, 0.25);
        padding-right: 18px;
        margin-right: 18px;
        line-height: 2;
    }

    body.theme-v3 .main_header .user_account_data>a.hdr-contact-link {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
    }

    /* Bottom-bar MENU ↔ ✕ toggle: when the menu is open the "MENU" text is swapped
       (via .d-none, toggled in scripts.js open/closeMobileMenu) for a matching "✕" glyph
       in the same slot, keeping the divider before SEARCH. */
    body.theme-v3 .main_header .menu_data .menu_close {
        display: inline-flex;
        align-items: center;
        color: var(--sb-text);
        font-size: 15px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        cursor: pointer;
        border-right: 1px solid rgba(255, 255, 255, 0.25);
        padding-right: 18px;
        margin-right: 18px;
        line-height: 2;
    }

    body.theme-v3 .main_header .menu_data .menu_close img {
        display: none;
    }

    body.theme-v3 .main_header .menu_data .menu_close::before {
        content: "\2715";
    }

    /* Logo → far right of the island. */
    body.theme-v3 .main_header .middle_header {
        order: 3;
        margin-left: auto;
        justify-content: flex-end;
    }

    body.theme-v3 .main_header .middle_header img {
        max-height: 44px;
        /* Dark wordmark → white so it reads on the translucent dark island. */
        /* filter: brightness(0) invert(1); */
    }

    /* Search bar opens at the TOP of the viewport (below the demo timer if present), not
       hanging off the bottom island. Fixed + top:var(--demo-banner-h) sits it under the
       timer; z-index below the timer (10050) but above the header pills. */
    body.theme-v3 .main_header .searchdesktop {
        position: fixed;
        top: var(--demo-banner-h, 0px);
        bottom: auto;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 10040;
        border: none;
        border-bottom: 1px solid var(--sb-border);
        border-radius: 0;
        background: var(--sb-surface-2);
        padding: 12px 2vw;
        align-items: center;
    }

    /* The form fills the bar; the ✕ sits at the far right. */
    body.theme-v3 .main_header .searchdesktop form {
        flex: 1;
    }

    body.theme-v3 .searchdesktop-close {
        flex: 0 0 auto;
        margin-left: 16px;
        padding: 0 6px;
        background: transparent;
        border: none;
        color: var(--sb-text);
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }

    body.theme-v3 .searchdesktop-close:hover {
        color: var(--sb-text-muted);
    }

    /* Keep the top pills BELOW the open search bar (they'd otherwise sit behind/over it).
       Drop them by the bar's height (--search-bar-h, set in scripts.js; 56px fallback),
       on top of any demo-timer offset. */
    body.theme-v3.desktop-search-open .main_header .top_left_infos,
    body.theme-v3.desktop-search-open .main_header .trust_badges {
        top: calc(24px + var(--demo-banner-h, 0px) + var(--search-bar-h, 56px)) !important;
    }

    /* ── When the full-page MENU overlay is open, keep the bottom nav island (layer 2:
       MENU|SEARCH|BAG|CONTACT + logo) visible ON TOP of the overlay (z 9000), and hide
       the two top pills (layer 1) so they don't collide with the overlay's own ✕. ── */
    body.theme-v3.menu-open .main_header .inner_header_data {
        z-index: 9500;
    }

    body.theme-v3.menu-open .main_header .top_left_infos,
    body.theme-v3.menu-open .main_header .trust_badges {
        display: none !important;
    }

    /* Demo-trial banner (sticky, top:0) overlaps the fixed top pills and clips the nav.
       When it's present, push the pills down by its height. --demo-banner-h is set in
       scripts.js; the 44px fallback keeps them clear before JS runs. */
    body.theme-v3:has(#demo-trial-countdown-banner) .main_header .top_left_infos,
    body.theme-v3:has(#demo-trial-countdown-banner) .main_header .trust_badges {
        top: calc(24px + var(--demo-banner-h, 44px));
    }

    /* ── Top-left island: CALL | EMAIL ── */
    body.theme-v3 .main_header .top_left_infos {
        position: fixed;
        top: 24px;
        left: 24px;
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 0;
        width: fit-content;
        height: 48px;
        border-radius: 100px;
        background: rgba(38, 38, 38, 0.66);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        padding: 10px 22px;
    }

    body.theme-v3 .main_header .top_left_infos a.links {
        color: var(--sb-text);
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-decoration: none;
    }

    body.theme-v3 .main_header .top_left_infos a.links:first-child {
        border-right: 1px solid rgba(255, 255, 255, 0.25);
        padding-right: 16px;
        margin-right: 16px;
    }

    /* ── Top-right island: Trustpilot + Google ── */
    body.theme-v3 .main_header .trust_badges {
        position: fixed;
        top: 24px;
        right: 24px;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 18px;
        width: fit-content;
        height: 48px;
        border-radius: 100px;
        background: rgba(38, 38, 38, 0.66);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        padding: 10px 22px;
        margin: 0;
    }

    body.theme-v3 .main_header .trust_badges img {
        width: auto;
        height: auto;
        max-height: 22px;
        object-fit: contain;
    }

    /* Clear the fixed bottom nav island so page-end content isn't hidden behind it. */
    body.theme-v3 {
        padding-bottom: 96px;
    }
}

/* Bar link typography (both breakpoints) */
body.theme-v3 .main_header .menu_data a.menu_links,
body.theme-v3 .main_header .user_account_data a,
body.theme-v3 .main_header .hdr-contact-link {
    color: var(--sb-text);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    font-style: bold;
}

body.theme-v3 .main_header .menu_data a.menu_links:hover,
body.theme-v3 .main_header .user_account_data a:hover,
body.theme-v3 .main_header .hdr-contact-link:hover {
    color: var(--sb-accent);
}

body.theme-v3 .main_header .cart-count {
    top: -12px;
}


/* Desktop search dropdown on dark */
body.theme-v3 .searchdesktop .customsearch {
    background: var(--sb-surface);
    color: var(--sb-text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

body.theme-v3 .searchdesktop .customsearch li a,
body.theme-v3 .searchdesktop .customsearch .dropdown-item {
    color: var(--sb-text);
}

/* ---- Desktop MENU drawer (3-panel) + mega nav + layer3 → dark ---- */
body.theme-v3 .desktop_menu_panel {
    background: var(--sb-surface-2);
    border-right-color: var(--sb-border);
}

body.theme-v3 .desktop_menu_primary_item,
body.theme-v3 .desktop_menu_secondary_item,
body.theme-v3 .desktop_menu_tertiary_card {
    color: var(--sb-text);
    border-bottom-color: var(--sb-border);
}

body.theme-v3 .desktop_menu_tertiary_card:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.theme-v3 .desktop_menu_tertiary_card_title,
body.theme-v3 .desktop_menu_brand_name {
    color: var(--sb-text);
}

body.theme-v3 .desktop_menu_brand_desc,
body.theme-v3 .desktop_menu_arrow,
body.theme-v3 .static-brand-heading,
body.theme-v3 .dsk-l3-all-brands-label {
    color: var(--sb-text-muted);
}

body.theme-v3 .desktop_menu_tertiary_card_img,
body.theme-v3 .watchbrand-list,
body.theme-v3 .static-brand-list {
    background: var(--sb-surface);
}

body.theme-v3 .dsk-cat-nav,
body.theme-v3 .dsk-mega-wrap,
body.theme-v3 .dsk-mega-panel,
body.theme-v3 .dsk-layer3-wrap,
body.theme-v3 .dsk-layer3-panel {
    background: var(--sb-surface-2);
}

body.theme-v3 .dsk-cat-item,
body.theme-v3 .dsk-mega-tab,
body.theme-v3 .dsk-l3-brand-name,
body.theme-v3 .dsk-l3-brand-link,
body.theme-v3 .watchbrand-column ul li a,
body.theme-v3 .brand-nav-link {
    color: var(--sb-text);
}

/* The base stylesheet forces EVERY link black on hover (`a:hover{color:#000!important}`),
   which is invisible on the dark theme — this is what turned the menu subcategories black.
   Defeat it globally without changing the hue: `inherit` takes the surface's own text colour,
   so it stays correct on dark AND on any still-light surface. No opacity here, so image-card
   links don't fade on hover. */
body.theme-v3 a:hover {
    /* color: inherit !important; */
}

/* Menu navigation only: dim slightly on hover as the affordance (no colour change). */
body.theme-v3 .main_header a:hover,
body.theme-v3 .dsk-cat-nav a:hover,
body.theme-v3 .dsk-mega-wrap a:hover,
body.theme-v3 .dsk-layer3-wrap a:hover,
body.theme-v3 .desktop_menu_overlay a:hover,
body.theme-v3 .mobile_menu_data a:hover,
body.theme-v3 .dsk-cat-item:hover {
    opacity: 0.7;
}

/* Active (selected) nav/tab stays light, never black */
body.theme-v3 .dsk-cat-item.is-active,
body.theme-v3 .dsk-mega-tab.is-active {
    color: var(--sb-text);
}

/* ---- Mobile header + slide-out menu → dark ---- */
@media (max-width: 767.98px) {

    body.theme-v3 .main_header::before {
        display: none;
    }

    body.theme-v3 .main_header {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    body.theme-v3 .main_header .left_head_data,
    body.theme-v3 .main_header .right_head_data {
        display: contents;
    }

    body.theme-v3 .main_header .menu_data,
    body.theme-v3 .main_header .user_account_data,
    body.theme-v3 .main_header .middle_header,
    body.theme-v3 .main_header .desktop_menu_overlay {
        display: none !important;
    }

    /* ── Bottom NAV island: fixed to the viewport bottom, rounded pill (not full width),
       holds icons (left) + logo (right). Centered via margin:auto (NO transform) and blur
       via ::before, so it never becomes the containing block for the fixed top islands. ── */
    body.theme-v3 .main_header .inner_header_data {
        position: fixed;
        bottom: 16px;
        left: 0;
        right: 0;
        width: 100%;
        max-width: calc(100% - 24px);
        margin: 0 auto;
        z-index: 1000;
        display: flex !important;
        grid-template-columns: none !important;
        align-items: center;
        gap: 60px;
        /* !important to beat the global `.container{padding:0 2vw !important}` (line 137). */
        padding: 12px 22px !important;
        border-radius: 100px;
        background: rgba(14, 14, 14, 0.55);
        /* slight white outline */
        border: 1px solid rgba(255, 255, 255, 0.15);
        overflow: visible;
    }

    body.theme-v3 .main_header .inner_header_data::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    body.theme-v3 .main_header .header_icons {
        order: 1;
        display: flex;
        align-items: center;
        /* gap:0 — spacing between the icons is carried by the per-icon padding/margin around
           each divider (like the CALL|EMAIL / desktop nav dividers). */
        gap: 0;
        width: auto;
        padding: 0;
        background: transparent;
        border-radius: 0;
    }

    /* Vertical hairline divider between the bottom-island icons (menu │ search │ bag │ phone),
       matching the desktop MENU│SEARCH│BAG│CONTACT dividers. Last icon has no trailing line. */
    body.theme-v3 .main_header .header_icons>a:not(:last-child) {
        display: inline-flex;
        align-items: center;
        border-right: 1px solid rgba(255, 255, 255, 0.22);
        padding-right: 11px;
        margin-right: 11px;
    }

    body.theme-v3 .main_header .mobile_logo {
        order: 2;
        display: block !important;
        /* Island is now full-width, so pin the logo to the far RIGHT (icons stay left). */
        margin: 0 0 0 auto;
        padding: 0;
    }

    body.theme-v3 .main_header .mobile_logo img {
        height: 26px;
        width: auto;
    }

    /* Demo-trial banner offset (mobile) — see desktop rule above. */
    body.theme-v3:has(#demo-trial-countdown-banner) .main_header .top_left_infos,
    body.theme-v3:has(#demo-trial-countdown-banner) .main_header .trust_badges {
        top: calc(53px + var(--demo-banner-h, 44px));
    }

    /* ── Top-left island: CALL | EMAIL ── */
    body.theme-v3 .main_header .top_left_infos {
        position: fixed;
        top: 53px;
        left: 22px;
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 0;
        width: fit-content;
        height: 44px;
        border-radius: 100px;
        background: rgba(38, 38, 38, 0.66);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        padding: 8px 16px;
    }

    body.theme-v3 .main_header .top_left_infos a.links {
        color: var(--sb-text);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    body.theme-v3 .main_header .top_left_infos a.links:first-child {
        border-right: 1px solid rgba(255, 255, 255, 0.25);
        padding-right: 12px;
        margin-right: 12px;
    }

    /* ── Top-right island: Trustpilot + Google (its own card now) ── */
    body.theme-v3 .main_header .trust_badges {
        position: fixed;
        top: 53px;
        right: 12px;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        width: fit-content;
        max-width: 52vw;
        height: 44px;
        border-radius: 100px;
        background: rgba(38, 38, 38, 0.66);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        padding: 8px 14px;
        margin: 0;
        overflow: hidden;
    }

    body.theme-v3 .main_header .trust_badges img {
        width: auto;
        height: auto;
        max-height: 16px;
        max-width: 46%;
        object-fit: contain;
    }

    /* Content must clear the floating islands: space at the bottom (all pages) and at the
       top (inner pages only — home's hero sits full-bleed behind the top islands). */
    body.theme-v3 {
        padding-bottom: 84px;
    }

    /* body.theme-v3:not(:has(.home_banner)) {
        padding-top: 66px;
    } */
}

/* ============================================================================
   Full-page slide-panel MENU — shared by mobile (#menu-toggle) and desktop
   (.menu_links "Menu"). These rules are intentionally UN-GATED so the same
   dark-glass full-screen overlay styles the menu at ALL widths. The slide
   structure (fixed positioning, translateX panels) is already un-gated in the
   base; only this glass/colour skin used to be mobile-only.
   ============================================================================ */

/* Menu + submenu panels: translucent dark with a blurred view of the page behind.
       IMPORTANT: do NOT put backdrop-filter on the .mobile_menu_data WRAPPER — it is an
       ancestor of the fixed .slide-out-menu, and backdrop-filter on an ancestor makes it
       the containing block for fixed descendants, which sized the menu against the ~0-height
       wrapper and collapsed it to nothing. The blur lives on the panels themselves only. */
body.theme-v3 .slide-out-menu,
body.theme-v3 .mobile-submenu {
    background: rgba(14, 14, 14, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Full-page overlay: cover the header too, with a 60px blurred strip at the very top.
       top:0 wins over the JS-set inline `top`. Never collapses (top+bottom pinned). */
body.theme-v3 nav.slide-out-menu {
    top: 0 !important;
    bottom: 0 !important;
    border-top: none !important;
}

/* 60px clear space above the first tab (blurred), in both the primary list and every
       slid-in submenu panel. */
body.theme-v3 .mobile-primary-list,
body.theme-v3 .mobile-submenu {
    padding-top: 60px;
}

/* The header's own ✕ is now behind the overlay (and its .header_icons pill has a
       backdrop-filter that traps fixed positioning), so the overlay carries its own close
       ✕ in the top strip. It sits above the tabs and any open submenu. */
body.theme-v3 .slide-menu-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 10;
    width: 42px;
    height: 42px;
    border: none;
    cursor: pointer;
    background: transparent no-repeat center / 20px 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Rows have no background of their own — fully transparent glass over the blurred page. */
body.theme-v3 .mobile-menu-row,
body.theme-v3 .mobile-submenu li a,
body.theme-v3 .mobile-submenu-head {
    position: relative;
    background: #0e0e0e;
}

/* 3px vertical gap between rows — the blurred background shows through the gap so each
       dark bar reads as separate. */
body.theme-v3 .mobile-menu-item,
body.theme-v3 .mobile-submenu li {
    margin-bottom: 3px;
}

/* Opening a submenu "closes" the first list: hide the primary tabs + footer behind the
       (translucent) submenu so they don't bleed through. Back re-shows them; ✕ closes all. */
body.theme-v3 .mobile_menu_data.submenu-open .mobile-menu-row,
body.theme-v3 .mobile_menu_data.submenu-open .bottom_mobile_policy_menus {
    visibility: hidden;
}

/* Soft gold hairline divider under every tab (fades at the edges). */
body.theme-v3 .mobile-menu-row::after,
body.theme-v3 .mobile-submenu li a::after,
body.theme-v3 .mobile-submenu-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
            rgba(197, 168, 116, 0) 0%,
            rgba(197, 168, 116, 0.55) 50%,
            rgba(197, 168, 116, 0) 100%);
}

body.theme-v3 .mobile-menu-link,
body.theme-v3 .mobile-submenu li a,
body.theme-v3 .mobile-submenu-title {
    color: var(--sb-text);
    /* No dark bar behind the text now, so add a soft shadow to keep it legible over
           whatever (bright hero image etc.) shows through the glass. */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

body.theme-v3 .bottom_mobile_policy_menus a {
    color: #E6E6E6;
}

body.theme-v3 .mobile-menu-toggle img {
    filter: brightness(0) invert(1);
}

/* White back-arrow for the dark submenu header. */
body.theme-v3 .mobile-submenu-back {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
}

/* ── Desktop: the persistent bottom nav island (layer 2) floats over the open menu,
   so the scrollable menu + submenu must END above it (≈128px reserved) instead of
   running behind it. The submenu scrolls INTERNALLY within that reduced height so a
   long list (e.g. Watches) becomes scrollable earlier and its tail never hides under
   the bar; the primary list clears it via padding-bottom on the scroll container. ── */
@media (min-width: 768px) {
    body.theme-v3 nav.slide-out-menu {
        padding-bottom: 128px;
    }

    /* Keep the submenu box full-height (seamless dark) but end its LIST 128px early so
       the last item stays above the bar. The overlay scroll (nav) reveals the tail. */
    body.theme-v3 .mobile-submenu {
        padding-bottom: 128px;
    }
}

/* Mobile-only search bar skin (the desktop header has its own search). */
@media (max-width: 767.98px) {
    body.theme-v3 .mobile_search {
        background: var(--sb-surface-2);
    }

    /* When opened, the mobile search is a fixed bar at the TOP of the viewport, sitting
       just below the demo timer (via --demo-banner-h) and above the header's first-layer
       pills — z-index below the timer (10050) but above the pills so it never hides behind
       the timer. --demo-banner-h falls back to 0 when there's no timer. */
    body.theme-v3 .mobile_search.active {
        position: fixed;
        top: var(--demo-banner-h, 0px);
        left: 0;
        right: 0;
        z-index: 10040;
    }

    body.theme-v3 .mobile_search input {
        background: transparent;
        color: var(--sb-text);
    }

    body.theme-v3 .mobile_search img {
        filter: brightness(0) invert(1);
    }
}

/* ==========================  FOOTER  ================================= */
body.theme-v3 .footer-top {
    background: var(--sb-surface-2);
}

body.theme-v3 .footer-top h2,
body.theme-v3 .footer-top a {
    color: var(--sb-text);
}

body.theme-v3 .footer-top p {
    color: var(--sb-text-muted);
}

body.theme-v3 .main_footer {
    background: rgba(38, 38, 38, 1);
    padding: 56px 0 28px;
}

body.theme-v3 .footer_brand {
    text-align: center;
    margin-bottom: 44px;
}

body.theme-v3 .footer_brand_link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}

body.theme-v3 .footer_brand_link:hover,
body.theme-v3 .footer_brand_link .footer_brand_name {
    text-decoration: none !important;
}

body.theme-v3 .footer_logo {
    max-height: 46px;
    width: auto;
    /* filter: brightness(0) invert(1); */
}

body.theme-v3 .footer_brand_name {
    color: var(--sb-text);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

body.theme-v3 .inner_foot_conts {
    display: block;
}

body.theme-v3 .left_footer_data {
    max-width: 100%;
}

body.theme-v3 .inner_foot_rows {
    grid-template-columns: repeat(5, auto);
    column-gap: 60px;
    row-gap: 34px;
}

body.theme-v3 .foot_cols h3 {
    color: var(--sb-text);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

body.theme-v3 ul.foot_lists li a {
    color: #E6E6E6;
    font-weight: 400;
}

body.theme-v3 ul.foot_lists li a:hover {
    color: var(--sb-text);
}

body.theme-v3 .footer_fca_line {
    border-top: 1px solid var(--sb-border);
    margin-top: 44px;
    padding-top: 20px;
}

body.theme-v3 .footer_fca_line p {
    color: var(--sb-text-muted);
    font-size: 11px;
    line-height: 1.65;
    margin: 0;
}

body.theme-v3 .main_footer .footer_copyright {
    position: static;
    right: auto;
    bottom: auto;
    max-width: 100%;
    margin-top: 14px;
}

body.theme-v3 .main_footer .footer_copyright p {
    color: var(--sb-text-muted);
    font-size: 11px;
    text-align: left;
    margin-top: 50px;
}

@media (max-width: 991.98px) {
    body.theme-v3 .inner_foot_rows {
        grid-template-columns: repeat(3, auto);
    }
}

@media (max-width: 575.98px) {
    body.theme-v3 .inner_foot_rows {
        grid-template-columns: repeat(2, auto);
    }
}

/* ==========================  HOME PAGE (remaining) ==================== */
/* Featured In: dark section. The press logos are white-background raster images
   (JPEG embedded in SVG), so they render as light tiles on the dark section — round
   them so they read as intentional. A seamless mono-white look needs the logos
   re-exported as transparent/white SVGs. */
body.theme-v3 .featured_in_secs {
    background: var(--sb-bg);
}

body.theme-v3 .featured_logos_slider .owl-item img {
    border-radius: 6px;
}

/* Get Directions block (bottom of home) — heading/address were light-theme dark grey */
body.theme-v3 .homepage-getdirection h2 {
    color: var(--sb-text);
}

body.theme-v3 .homepage-getdirection p,
body.theme-v3 .homepage-getdirection p span {
    color: rgba(255, 255, 255, 0.7);
}

body.theme-v3 .homepage-getdirection .btn_links,
body.theme-v3 .homepage-getdirection .visit-btn {
    color: var(--sb-text);
}

body.theme-v3 .homepage-getdirection .btn_links:hover,
body.theme-v3 .homepage-getdirection .visit-btn:hover {
    color: var(--sb-accent);
}

/* Mobile-only "about" text shown under the hero */
body.theme-v3 .inner_mobile_content_banner {
    color: rgba(255, 255, 255, 0.65);
}

/* Safety: light column bg behind the (now full-bleed) branded slider */
body.theme-v3 .shop_branded_jewellery_secs.bg_column_watch {
    background: var(--sb-bg);
}

/* ==================  PRODUCT DETAILS + GRID CARDS  =================== */
/* Breadcrumbs */
body.theme-v3 .breadcrumbs ul li,
body.theme-v3 .breadcrumbs ul li a {
    color: #E6E6E6;
}

body.theme-v3 .breadcrumbs ul li a:hover {
    color: var(--sb-accent);
}

/* Category / title / price / description */
body.theme-v3 .product-catagory,
body.theme-v3 .product-catagory span {
    color: var(--sb-text-muted);
}

body.theme-v3 .product-name,
body.theme-v3 .product-details .product-price {
    color: var(--sb-text);
}

body.theme-v3 .product-details .product-price .divider-line {
    background: var(--sb-border);
}

/* The card lives on the container, not on <p>, so it wraps EVERY tag the Word-pasted
   description emits (ul/li, headings, tables, spans) — not just the first paragraph. */
body.theme-v3 .product-description {
    color: var(--sb-text-muted);
    background: #262626;
    padding: 20px;
    border-radius: 20px;
}

/* Word content ships arbitrary inline color/background (e.g. black-on-white) and stray
   borders. Force everything onto the dark card so no tag renders light-on-light. */
body.theme-v3 .product-description * {
    background: transparent !important;
    color: var(--sb-text-muted) !important;
    border-color: var(--sb-border) !important;
}

body.theme-v3 .product-description ul,
body.theme-v3 .product-description ol {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

body.theme-v3 .product-description li {
    margin-bottom: 0.35rem;
}

body.theme-v3 .product-description> :last-child {
    margin-bottom: 0;
}

body.theme-v3 .product-description h1,
body.theme-v3 .product-description h2,
body.theme-v3 .product-description h3,
body.theme-v3 .product-description h4,
body.theme-v3 .product-description h5,
body.theme-v3 .product-description h6,
body.theme-v3 .product-description strong,
body.theme-v3 .product-description b {
    color: var(--sb-text) !important;
}

body.theme-v3 .product-description a {
    color: var(--sb-accent) !important;
}

/* Buttons: keep the primary dark button but force legible white text; convert the
   light secondary buttons (Add to wishlist, Call the shop, search) to a dark surface. */
body.theme-v3 .product-details-buttons .btn {
    color: #fff;
    border-radius: 15px;
    text-transform: uppercase;
    background: #262626;
}

body.theme-v3 .product-details-buttons a.btn,
body.theme-v3 .btn.call-the-shop-btn,
body.theme-v3 .search-button {
    background: #B0B0B0 !important;
    color: black !important;
    border: 1px solid var(--sb-border) !important;
}

/* Product tabs (accordion header buttons) */
body.theme-v3 .product-tabs button.btn-primary {
    color: #E6E6E6;
    border-top-color: #262626 !important;
    background-color: #262626 !important;
    padding: 0 20px;
    border-radius: 15px;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 10px;
}

body.theme-v3 .product-tabs .trustpilot-widget {
    border-top-color: var(--sb-border) !important;
}

/* Bootstrap accordion (product tabs + FAQ) → dark */
body.theme-v3 .product-main .accordion-item,
body.theme-v3 .product-main-faqs .accordion-item {
    border-color: var(--sb-border);
    margin: 10px 0;
    border-radius: 20px;
}

body.theme-v3 .product-main .accordion-button,
body.theme-v3 .product-main-faqs .accordion-button {
    color: var(--sb-text);
}

body.theme-v3 .accordion-body,
body.theme-v3 .accordion-body p,
body.theme-v3 .accordion-body b {
    color: var(--sb-text-muted);
}

/* chevron icon → visible on dark */
body.theme-v3 .product-main .accordion-button::after,
body.theme-v3 .product-main-faqs .accordion-button::after,
body.theme-v3 .inner_faq_data .accordion-button::after {
    filter: brightness(0) invert(1);
}

/* Accordion search field */
body.theme-v3 .accordion .search {
    border-bottom: 1px solid var(--sb-border);
}

body.theme-v3 .accordion .search input {
    color: var(--sb-text);
    background: transparent;
}

body.theme-v3 .accordion .search input::placeholder {
    color: var(--sb-text-muted);
}

/* Mobile details / about offcanvas panel (Bootstrap default is white) */
body.theme-v3 .detailinfo,
body.theme-v3 .aboutinfo,
body.theme-v3 .detailinfo.offcanvas,
body.theme-v3 .aboutinfo.offcanvas {
    background-color: transparent !important;
    color: var(--sb-text);
}

body.theme-v3 .specification-heading {
    color: var(--sb-text);
}

/* Deposit / finance summary table */
body.theme-v3 .table-view-deposit,
body.theme-v3 .table-view-deposit .table-deposite-item,
body.theme-v3 .table-view-deposit .deposite-label {
    color: var(--sb-text);
}

body.theme-v3 .table-view-deposit+p {
    color: var(--sb-text-muted);
}

/* Related products + grid cards (these classes are also used on the listing page).
   The area behind the product photo becomes the #262626 image tile. */
body.theme-v3 .product_collection_image {
    background: var(--sb-surface);
    border-radius: 16px 16px 0 0;
}

body.theme-v3 .product_collection_contents h3,
body.theme-v3 .product_collection_contents h3 a {
    color: #e6e6e6 !important;
}

body.theme-v3 .product_collection_contents h3 a:hover {
    color: var(--sb-text);
}

body.theme-v3 .price_value {
    color: var(--sb-text);
}

body.theme-v3 .price_value span {
    color: var(--sb-text-muted);
}

body.theme-v3 .shop-in-stock .prct_content_infos h6 {
    color: var(--sb-text-muted);
}

body.theme-v3 .product-card-link:hover .product_collection_contents h3,
body.theme-v3 .product-card-link:hover .product_collection_contents .price_value {
    color: #fff;
}

/* ==================  PRODUCT LISTING — FILTER PANEL  ================ */
/* The dropdowns DID open — the menus just had `background: unset` (transparent) with
   dark text, so on the dark page they were invisible (they show fine on v3's light
   page). The dark surfaces below make them visible. The single-row horizontal-scroll
   UX (overflow-x:auto + the order:1/2 active-first ordering) is intentional and left
   untouched. */

/* Filter toggle buttons (light `.btn-filter` / Bootstrap `.btn-outline-dark`) → dark */
body.theme-v3 .btn-filter {
    background: var(--sb-surface);
    color: var(--sb-text);
    border: 1px solid var(--sb-border);
}

body.theme-v3 .btn-filter-clear {
    border-color: var(--sb-border);
    color: var(--sb-text);
}

body.theme-v3 .btn-filter-clear:hover {
    background: var(--sb-surface);
    color: #fff;
}

/* Menu surface + border/radius are owned by grid-page.blade.php (.range_dropdown_mwnu)
   so both price and brand/attribute menus stay consistent. We only keep the price
   panel's inner box dark here, since that rule doesn't reach it. */
body.theme-v3 .dsk-price-dropdown {
    background: var(--sb-surface-2) !important;
    border-color: var(--sb-border) !important;
}

/* Inner price box (the actual visible panel) + metal filter variant were light */
body.theme-v3 .range-container {
    background: var(--sb-surface-2);
}

body.theme-v3 .range-labels {
    color: var(--sb-text-muted);
}

/* Options / search / update buttons */
body.theme-v3 .filter-option,
body.theme-v3 .filter-option span {
    color: var(--sb-text);
}

body.theme-v3 .filter-search.form-control {
    background: transparent;
    border-color: var(--sb-border);
    color: var(--sb-text);
}

body.theme-v3 .filter-search.form-control::placeholder {
    color: var(--sb-text-muted);
}

/* Bootstrap turns .form-control white on focus — keep it dark */
body.theme-v3 .filter-search.form-control:focus {
    background: transparent;
    color: var(--sb-text);
    border-color: var(--sb-text-muted);
    box-shadow: none;
}

/* Checkboxes in the brand / attribute option lists */
body.theme-v3 .filter-option .form-check-input {
    background-color: transparent;
    border-color: var(--sb-border);
}

body.theme-v3 .filter-option .form-check-input:checked {
    background-color: var(--sb-accent);
    border-color: var(--sb-accent);
}

body.theme-v3 .update-btn {
    color: var(--sb-text);
}

/* Price slider + number inputs */
body.theme-v3 .dsk-price-text-input {
    background: transparent;
    border-color: var(--sb-border);
    color: var(--sb-text);
}

body.theme-v3 .dsk-price-text-input:focus {
    border-color: var(--sb-text-muted);
}

body.theme-v3 .dsk-price-sep,
body.theme-v3 .dsk-price-label-val {
    color: var(--sb-text);
}

body.theme-v3 .dsk-slider-track {
    background: rgba(255, 255, 255, 0.18);
}

body.theme-v3 .dsk-slider-progress {
    background: var(--sb-text);
}

body.theme-v3 .dsk-range-slider::-webkit-slider-thumb {
    background: var(--sb-text);
}

body.theme-v3 .dsk-range-slider::-webkit-slider-thumb:hover {
    background: #fff;
}

body.theme-v3 .dsk-range-slider::-moz-range-thumb {
    background: var(--sb-text);
}

/* Price filter Cancel/Update → match the other filters' update/cancel buttons
   (uppercase, no underline; Cancel grey, Update white). */
body.theme-v3 .dsk-price-btn {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    font-weight: 600;
    color: #555;
}

body.theme-v3 #update-price-filter.dsk-price-btn {
    color: #fff;
}

body.theme-v3 .dsk-price-btn:hover,
body.theme-v3 .dsk-price-btn:focus,
body.theme-v3 .dsk-price-btn:active {
    color: #fff;
}

/* ==================  PRODUCT DETAILS — MODALS → dark  =============== */
/* Enquiry / info / finance modals (Bootstrap defaults to white). Scoped to these
   modal roots so the bag/checkout modal keeps its own styling. */
body.theme-v3 #findWatchToggle .modal-content,
body.theme-v3 #chatmodel .modal-content,
body.theme-v3 #mindedPriceModal .modal-content,
body.theme-v3 .checkout-popup .modal-content {
    background: var(--sb-surface-2);
    color: var(--sb-text);
    border: 1px solid var(--sb-border);
}

body.theme-v3 #findWatchToggle .modal-header,
body.theme-v3 #findWatchToggle .modal-footer,
body.theme-v3 #chatmodel .modal-header,
body.theme-v3 #mindedPriceModal .modal-footer,
body.theme-v3 .checkout-popup .modal-header,
body.theme-v3 .checkout-popup .modal-footer {
    border-color: var(--sb-border) !important;
}

/* chatmodel body already carries Bootstrap .bg-dark — normalise to the theme surface */
body.theme-v3 #chatmodel .modal-body.bg-dark {
    background: var(--sb-surface-2) !important;
}

/* Titles / labels / text */
body.theme-v3 #findWatchToggle .modal-title,
body.theme-v3 #chatmodel .modal-title,
body.theme-v3 #findWatchToggle label,
body.theme-v3 #chatmodel label,
body.theme-v3 #mindedPriceModal h4,
body.theme-v3 #mindedPriceModal p,
body.theme-v3 .checkout-popup label {
    color: var(--sb-text);
}

/* Close buttons → visible on dark */
body.theme-v3 #findWatchToggle .btn-close,
body.theme-v3 #chatmodel .btn-close {
    filter: brightness(0) invert(1);
}

body.theme-v3 #mindedPriceModal .close {
    color: var(--sb-text);
    opacity: 0.8;
    text-shadow: none;
}

/* Form fields */
body.theme-v3 #findWatchToggle .form-control,
body.theme-v3 #chatmodel .form-control,
body.theme-v3 .checkout-popup .form-control {
    background: transparent;
    /* border-color: var(--sb-border); */
    color: var(--sb-text);
}

body.theme-v3 #findWatchToggle .form-control::placeholder,
body.theme-v3 #chatmodel .form-control::placeholder,
body.theme-v3 .checkout-popup .form-control::placeholder {
    color: var(--sb-text-muted);
}

body.theme-v3 #findWatchToggle .form-control:focus,
body.theme-v3 #chatmodel .form-control:focus,
body.theme-v3 .checkout-popup .form-control:focus {
    background: transparent;
    color: var(--sb-text);
    border-color: var(--sb-text-muted);
    box-shadow: none;
}

/* <select> options render against the OS menu — give them a dark surface */
body.theme-v3 #findWatchToggle select.form-control option {
    background: var(--sb-surface-2);
    color: var(--sb-text);
}

/* input-group prefix (the £ on the offer field) */
body.theme-v3 #chatmodel .input-group-text {
    background: var(--sb-surface);
    /* border-color: var(--sb-border); */
    color: var(--sb-text);
}

/* Disclaimer / checkbox labels */
body.theme-v3 #findWatchToggle .custom-checkbox label,
body.theme-v3 #chatmodel .custom-checkbox label {
    color: var(--sb-text-muted);
}


/* Text → light (spare the intentional colours: purple months, red errors, muted) */
body.theme-v3 .checkout-popup .checkout-payment-details p,
body.theme-v3 .checkout-popup .checkout-pop-left .modal-title,
body.theme-v3 .checkout-popup .modal-middle-finace h2,
body.theme-v3 .checkout-popup .finance-subtitle,
body.theme-v3 .checkout-popup .pay,
body.theme-v3 .checkout-popup .deposit_txt,
body.theme-v3 .checkout-popup .deposit_percentage,
body.theme-v3 .checkout-popup .hitachi_percent li,
body.theme-v3 .checkout-popup .detail-price-total,
body.theme-v3 .checkout-popup .finance-type-label,
body.theme-v3 .checkout-popup .checkmark,
body.theme-v3 .checkout-popup .checkout-pop-img-text h3,
body.theme-v3 .checkout-popup .checkout-pop-img-btm-text h4 {
    color: var(--sb-text) !important;
}

/* Step-1 / Step-2 section titles are scoped to the modal IDs — beat them */
body.theme-v3 #exampleModalToggle_oldfinace .finance-section-title,
body.theme-v3 #exampleModalToggle_availablefinace .finance-section-title,
body.theme-v3 #exampleModalToggle_availablefinace .finance-subtitle,
body.theme-v3 #exampleModalTogglemobilefinance .finance-section-title {
    color: var(--sb-text) !important;
}

/* Muted helper text */
body.theme-v3 .checkout-popup .finance-options-desc,
body.theme-v3 .checkout-popup .text-muted {
    color: var(--sb-text-muted) !important;
}

/* deposit % chips: keep a visible border on dark */
body.theme-v3 .checkout-popup .hitachi_percent li {
    border-color: var(--sb-border) !important;
}

/* Close button → explicit dark circle with a white X (no filter, so bg stays dark) */
body.theme-v3 .checkout-popup .btn-close {
    opacity: 1;
    border-radius: 50%;
    padding: 0.9em;
    background: var(--sb-surface) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f4f6f8'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 0.85em auto no-repeat;
}

/* Cancel button (btn-white) → dark outline with light text */
body.theme-v3 .checkout-popup .btn-white {
    background: transparent !important;
    color: var(--sb-text) !important;
    border: 1px solid var(--sb-border) !important;
}

/* Toggle pills (Yes/No, repayment terms) — were light chips with dark text.
   `!important` beats the #exampleModalToggle_availablefinace-scoped base rules. */
body.theme-v3 .checkout-popup .radi_btn .checkmark,
body.theme-v3 .checkout-popup #termField .radi_btn label {
    background: transparent !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text) !important;
}

body.theme-v3 .checkout-popup .radi_btn input:checked+.checkmark,
body.theme-v3 .checkout-popup #termField .radi_btn input:checked+label {
    background: #7d3efb !important;
    border-color: #7d3efb !important;
    color: #fff !important;
}

body.theme-v3 .checkout-popup .radi_btn .checkmark:hover,
body.theme-v3 .checkout-popup #termField .radi_btn label:hover {
    border-color: #7d3efb !important;
    color: #fff !important;
}

/* Finance type buttons (Zero % / Interest Bearing) */
body.theme-v3 .checkout-popup .finance-type-options .finance-type-label {
    background: transparent !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text) !important;
}

body.theme-v3 .checkout-popup .finance-type-options .radi_btn input:checked+.finance-type-label,
body.theme-v3 .checkout-popup .finance-type-options .finance-type-btn:only-of-type .finance-type-label {
    background: #7d3efb !important;
    border-color: #7d3efb !important;
    color: #fff !important;
}

/* Deposit % chips */
body.theme-v3 .checkout-popup .hitachi_percent li {
    background: transparent !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text) !important;
}

body.theme-v3 .checkout-popup .hitachi_percent li:hover,
body.theme-v3 .checkout-popup .hitachi_percent li.active {
    background: #7d3efb !important;
    border-color: #7d3efb !important;
    color: #fff !important;
}

/* ====================================================================================
   DARK THEME — "Request Yours" (.checkout-popup) + "Notify Me" (#nofityModel) modals.
   Both were inherited light from the v3 clone (#f4f4f4 / bg-white, black labels/inputs,
   Bootstrap-blue button). Repaint them onto the dark theme.
   ==================================================================================== */

/* ---- Request Yours (checkout-popup) ---- */
body.theme-v3 .checkout-popup .modal-content {
    background: var(--sb-surface-2) !important;
    color: var(--sb-text);
}

body.theme-v3 .checkout-popup .modal-title,
body.theme-v3 .checkout-popup h2,
body.theme-v3 .checkout-popup h3,
body.theme-v3 .checkout-popup h4,
body.theme-v3 .checkout-popup h5,
body.theme-v3 .checkout-payment-details .form-label,
body.theme-v3 .checkout-payment-details form .form-label,
body.theme-v3 .checkout-popup .form-check-label {
    color: var(--sb-text) !important;
}

body.theme-v3 .checkout-payment-details p,
body.theme-v3 .checkout-popup .modal-sub-title {
    color: var(--sb-text-muted) !important;
}

body.theme-v3 .checkout-popup .form-control,
body.theme-v3 .checkout-popup .form-select {
    background: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border: 1px solid var(--sb-border) !important;
}

body.theme-v3 .checkout-popup .form-control::placeholder {
    color: var(--sb-text-muted) !important;
}

body.theme-v3 .checkout-popup .form-check-input {
    background-color: var(--sb-surface);
    border-color: var(--sb-border);
}

body.theme-v3 .checkout-popup .form-check-input:checked {
    background-color: var(--sb-text);
    border-color: var(--sb-text);
}

/* Submit button → theme primary (was Bootstrap blue). Matches ADD TO BAG. */
body.theme-v3 .checkout-payment-details .btn.btn-primary,
body.theme-v3 .checkout-popup .btn.btn-primary.btn-lg {
    background: #262626 !important;
    color: #fff !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: 15px !important;
    text-transform: uppercase;
}

body.theme-v3 .checkout-payment-details .btn.btn-primary:hover,
body.theme-v3 .checkout-popup .btn.btn-primary.btn-lg:hover {
    background: #000 !important;
}

body.theme-v3 .checkout-popup button.btn-close {
    filter: invert(1) grayscale(1);
}

/* ---- Notify Me (#nofityModel) — was bg-white ---- */
body.theme-v3 #nofityModel .modal-content,
body.theme-v3 #nofityModel .modal-body.bg-white {
    background: var(--sb-surface-2) !important;
}

body.theme-v3 #nofityModel .modal-title,
body.theme-v3 #nofityModel label {
    color: var(--sb-text) !important;
}

body.theme-v3 #nofityModel .form-control {
    background: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border: 1px solid var(--sb-border) !important;
}

body.theme-v3 #nofityModel .form-control::placeholder {
    color: var(--sb-text-muted) !important;
}

body.theme-v3 #nofityModel .btn-enq,
body.theme-v3 #nofityModel .btn.btn-primary {
    background: #262626 !important;
    color: #fff !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: 15px !important;
    text-transform: uppercase;
}

body.theme-v3 #nofityModel button.btn-close {
    filter: invert(1) grayscale(1);
}

/* ============================================================================
   CLIENT DIRECTIVE — NO DROP SHADOWS anywhere on the Stockbox (new) sites:
   home banner, homepage, and every other page. Flattens all box-shadows and
   text-shadows inherited from the v3 clone (cards, modals, drawers, the hero
   title, etc.). Placed LAST and matched via `[class]` as well as `*` so it
   out-specifies multi-class `!important` shadows declared in per-page inline
   <style> blocks. `filter`/`backdrop-filter` are deliberately untouched so the
   header/menu glass blur and logo colour-inversion still work.
   ============================================================================ */
body.theme-v3 *,
body.theme-v3 *::before,
body.theme-v3 *::after,
body.theme-v3 [class],
body.theme-v3 [class]::before,
body.theme-v3 [class]::after {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-shadow: none !important;
}

/* Smartsupp chat widget button — raise it so it clears the fixed bottom header.
   The widget is injected by Smartsupp JS with an inline bottom, so override with
   !important (external !important beats a non-important inline style). */
[data-testid="widgetButtonFrame"] {
    bottom: 200px !important;
}

/* ======================== END STOCKBOX-DARK ========================== */