body {
    background: #f4f6f9;
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
}

.container-filter {
    max-width: 1600px;
    margin: auto;
}

.grid-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-bottom: 35px;
}

.small-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.ring-size-hidden {
    display: none !important;
}

/* .box {
    border-radius: 12px;
    cursor: pointer;
    transition: 0.25s ease;
    background: #fff;
    border: 1px solid #dcdcdc;
    text-align: center;
    padding: 12px;
    font-weight: 500;
} */

.box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px !important;
    margin-bottom: 10px;
}

/* .box:hover {
    border: 1px solid #1f4e8c;
} */

.box.selected {
    border: 2px solid #1f4e8c;
    background: #e8f0fb;
}

.search-btn {
    background: #1f4e8c;
    color: #fff;
    padding: 10px 30px;
    border: none;
    border-radius: 30px !important;
    font-weight: 600;
    cursor: pointer;
}

.clear-btn {
    background: transparent;
    color: #1f4e8c;
    padding: 10px 30px;
    border: 1px solid #1f4e8c;
    border-radius: 30px !important;
    font-weight: 600;
    cursor: pointer;
}

.clear-btn:hover {
    background: #1f4e8c;
    color: #fff;
}

.filter-action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

h4 {
    color: #161616;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 16px;
}

/* .box:hover {
    border: 1px solid #1f4e8c;
} */

.box.selected {
    border: 2px solid #1f4e8c;
    background: #e8f0fb;
}

.search-btn {
    background: #1f4e8c;
}

.clear-btn {
    color: #1f4e8c;
    border: 1px solid #1f4e8c;
}

.clear-btn:hover {
    background: #1f4e8c;
    color: #fff;
}

/* .interim-theme-natural .box:hover {
    border-color: #007d79;
} */

.interim-theme-natural .box.selected {
    border-color: #007d79;
    background: rgba(0, 125, 121, 0.1);
    color: #007d79 !important;
    font-weight: 700;
}

.interim-theme-natural .search-btn {
    background: #007d79;
}

.interim-theme-natural .clear-btn {
    color: #007d79;
    border-color: #007d79;
}

.interim-theme-natural .clear-btn:hover {
    background: #007d79;
    color: #fff;
}

.interim-theme-lab-grown h4 {
    color: #d0aa62;
}

/* .interim-theme-lab-grown .box:hover {
    border-color: #d0aa62;
} */

.interim-theme-lab-grown .box.selected {
    border-color: #d0aa62;
    background: rgba(208, 170, 98, 0.15);
}

.interim-theme-lab-grown .search-btn {
    background: #d0aa62;
}

.interim-theme-lab-grown .clear-btn {
    color: #d0aa62;
    border-color: #d0aa62;
}

.interim-theme-lab-grown .clear-btn:hover {
    background: #d0aa62;
    color: #fff;
}

/* ────────────────────────────────────────
   SRCH-WRAP: override .box/.grid-boxes for pill layout
   ──────────────────────────────────────── */
.srch-wrap .grid-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-template-columns: unset;
    margin-bottom: 0;
}

.srch-price-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    margin-bottom: 10px;
}

.srch-wrap .box {
    border-radius: 50px !important;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    border: 1.5px solid #d6e5e4;
    background: #fff;
    color: #3d4f4e;
    cursor: pointer;
    transition: all 0.2s;
}

.srch-wrap .box img {
    display: none;
    /* hide category images in pill mode */
}

.srch-wrap .box:hover {
    border-color: #00837e !important;
    color: #00837e;
}

.srch-wrap .box.selected,
.srch-wrap .box.active,
.interim-theme-natural .srch-wrap .box.selected,
.interim-theme-natural .srch-wrap .box.active,
.interim-theme-lab-grown .srch-wrap .box.selected,
.interim-theme-lab-grown .srch-wrap .box.active {
    border-color: #00837e !important;
    background: #00837e !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.srch-sort-sep {
    display: flex;
    align-items: center;
    color: #d6e5e4;
    font-weight: 400;
    margin: 0 8px;
    font-size: 16px;
    user-select: none;
}

/* ----------------list */
body {
    background: #f5f6f8;
}

/* ===== CONTAINER ===== */
.jew-container {
    max-width: 100%;
    margin: auto;
    padding: 0 20px;
}

/* ===== TOP BAR ===== */
.jew-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 25px 30px;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
}

.jew-title {
    font-size: 24px;
    font-weight: 600;
}

.jew-count {
    font-size: 14px;
    color: #777;
}

.jew-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.modify-btn {
    background: #0f766e;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 30px !important;
    font-weight: 600;
    cursor: pointer;
}

.compare-btn {
    background: #fff;
    border: 1px solid #0f766e;
    color: #0f766e;
    padding: 10px 22px;
    border-radius: 30px !important;
    font-weight: 600;
}

/* ===== GRID ===== */
.jew-grid {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
}

.jew-metal-swatches {
    display: flex;
    gap: 6px;
    align-items: center;
}

.jew-metal-swatch {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    border: 2px solid #e2e8f0 !important;
    font-size: 10px;
    font-weight: 700;
    color: #333;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}

.jew-metal-swatch.selected {
    border: 3px solid #007d79 !important;
    box-shadow: 0 0 8px rgba(0, 125, 121, 0.4);
    transform: scale(1.1);
}

.jew-more-swatches {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    height: 32px;
    border-radius: 16px !important;
    background: #f1f5f9;
    border: 1px solid #e2e8f0 !important;
    font-size: 11px;
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
}

/* ════════════════════════════════════════
   WEBSITE GRID IMAGE ZOOM & GALLERY
   ════════════════════════════════════════ */
.jew-img-zoom {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #007d79;
    font-size: 16px;
    z-index: 10;
    opacity: 0;
    transform: translateY(-8px);
}

.jew-card:hover .jew-img-zoom {
    opacity: 1;
    transform: translateY(0);
}

.jew-img-zoom:hover {
    background: #007d79;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 125, 121, 0.3);
    transform: scale(1.1);
}

/* Lightbox Thumbnails Enhancements */
#jd-lightbox-thumbs {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 24px !important;
    overflow-x: auto;
    width: 100%;
}

.lb-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.lb-thumb:hover {
    opacity: 0.8;
}

.lb-thumb.active {
    opacity: 1;
    border-color: #007d79;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

@media (min-width: 576px) {
    .jew-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (min-width: 992px) {
    .jew-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (min-width: 1200px) {
    .jew-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* ===== CARD ===== */
.jew-card {
    background: #fff;
    border-radius: 20px !important;
    position: relative;
    overflow: visible;
    transition: 0.4s;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
}

.jew-img {
    position: relative;
    min-height: 280px;
    height: 280px;
    overflow: hidden;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

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

.jew-img .jew-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    color: #495057;
    font-size: 15px;
    font-weight: 600;
}

.jew-img .jew-placeholder-hidden {
    display: none !important;
}

.jew-content {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.jew-name {
    font-size: 16px;
    font-weight: 600;
}

.jew-spec {
    font-size: 13px;
    color: #777;
    margin-top: 4px;
}

.jew-price {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #c59d5f;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.price-label {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    min-width: 90px;
}

.list-price {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 5px;
}

.price-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.price-details {
    margin-top: 15px;
    font-size: 18px;
    font-weight: 700;
    color: #00837e;

    display: flex;
    flex-direction: column;
    gap: 6px;


    background: #daf3f2;
    padding: 18px 22px;
    border-radius: 12px !important;
}

/* Make price BIG like screenshot */
#selling-price-display {
    font-size: 30px;
    font-weight: 700;
    color: #00837e;
}

/* Align GST nicely */
.price-details small {
    color: #00837e;
    font-size: 13px;
    margin-left: 8px;
}


/* Label styling */
.price-label {
    font-size: 14px;
    font-weight: 500;
    color: #00837e;
}

/* Make row behave like block (better spacing) */
.price-row {
    display: block;
}

/* ===== CARD ACTIONS ===== */
.card-actions {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    gap: 10px;
}

.quick-btn,
.detail-btn {
    flex: 1;
    padding: 8px;
    border-radius: 25px !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.quick-btn {
    background: #fff;
    border: 1px solid #c59d5f;
    color: #c59d5f;
}

.detail-btn {
    background: linear-gradient(90deg, #c59d5f, #e6c27a);
    color: #fff;
}

.view-btn,
.detail-btn {
    flex: 1;
    padding: 8px;
    border-radius: 25px !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.view-btn {
    background: #fff;
    border: 1px solid #c59d5f;
    color: #c59d5f;
}

/* ===== login button css ===== */
/* Base button style */
.modal-footer .login-btn {
    flex: 1;
    padding: 8px 12px;
    border-radius: 25px !important;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    outline: none;
    box-shadow: none;
    transition: all 0.2s ease;
}

/* Login (1st) & Close (3rd) */
.modal-footer .login-btn:nth-child(1),
.modal-footer .login-btn:nth-child(3) {
    background: #fff;
    border: 1px solid #007d79;
    color: #007d79;
}

/* Register (2nd) */
.modal-footer .login-btn:nth-child(2) {
    background: #fff;
    color: #007d79;
    border: 1px solid #007d79;
}

.modal-footer .login-btn:hover {
    background: #fff !important;
    color: #007d79 !important;
    border: 1px solid #007d79 !important;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

/* Kill all focus/active glow from browser/bootstrap */
.modal-footer .login-btn:focus,
.modal-footer .login-btn:active,
.modal-footer .login-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Layout */
.modal-footer {
    display: flex;
    gap: 10px;
    justify-content: center;
}





/* ===== INLINE QUICK VIEW PANEL ===== */
.jew-card {
    position: relative;
    z-index: 1;
}

.jew-card.open-right,
.jew-card.open-left {
    z-index: 50;
    /* active card always on top */
}

.quick-panel {
    position: absolute;
    top: 0;
    width: 380px;
    background: #fff;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    padding: 25px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}

/* Open Right */
.jew-card.open-right .quick-panel {
    left: calc(100% + 20px);
    opacity: 1;
    visibility: visible;
}

/* Open Left */
.jew-card.open-left .quick-panel {
    right: calc(100% + 20px);
    opacity: 1;
    visibility: visible;
}

/* Mobile View */
@media (max-width: 768px) {
    .quick-panel {
        position: relative;
        width: 100%;
        margin-top: 15px;
        left: auto !important;
        right: auto !important;
        opacity: 1;
        visibility: visible;
        display: none;
    }

    .jew-card.mobile-open .quick-panel {
        display: block;
    }
}

.quick-panel {
    transform: scale(0.95);
}

.jew-card.open-right .quick-panel,
.jew-card.open-left .quick-panel {
    transform: scale(1);
}

.close-quick {
    position: absolute;
    top: 15px;
    right: 18px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
}

.interim-theme-natural .modify-btn {
    background: #007d79;
}

.interim-theme-natural .compare-btn {
    border-color: #007d79;
    color: #007d79;
}

.interim-theme-natural .quick-btn {
    border-color: #007d79;
    color: #007d79;
}

.interim-theme-natural .view-btn {
    border-color: #007d79;
    color: #007d79;
}

.interim-theme-natural .detail-btn {
    background: linear-gradient(90deg, #007d79, #00a39d);
}

.interim-theme-natural .jew-price {
    color: #007d79;
}

.interim-theme-lab-grown .modify-btn {
    background: #d0aa62;
}

.interim-theme-lab-grown .compare-btn {
    border-color: #d0aa62;
    color: #d0aa62;
}

.interim-theme-lab-grown .quick-btn {
    border-color: #d0aa62;
    color: #d0aa62;
}

.interim-theme-lab-grown .view-btn {
    border-color: #d0aa62;
    color: #d0aa62;
}

.interim-theme-lab-grown .detail-btn {
    background: linear-gradient(90deg, #d0aa62, #e6c27a);
}

.interim-theme-lab-grown .jew-price {
    color: #d0aa62;
}

.detail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ════════════════════════════════════════
   QUICK VIEW MODAL — Detail-page theme
   ════════════════════════════════════════ */
.qv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 20, 19, 0.62);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.qv-modal {
    background: #e1f4ff;
    width: 980px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px !important;
    padding: 0;
    position: relative;
    animation: qvFadeIn 0.28s ease;
    box-shadow: 0 24px 80px rgba(0, 50, 48, 0.25);
}

@keyframes qvFadeIn {
    from {
        transform: scale(0.94) translateY(12px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.qv-close {
    position: absolute;
    top: 4px;
    right: 10px;
    width: 25px;
    height: 25px;
    border-radius: 50% !important;
    border: 1.5px solid #d6e5e4;
    background: #fff;
    color: #3d4f4e;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s;
    line-height: 1;
}

.qv-close:hover {
    border-color: #00837e;
    color: #00837e;
    background: #daf3f2;
}

.qv-body {
    display: flex;
    gap: 0;
}

/* ──── Image Column ──── */
.qv-image-col {
    flex: 0 0 500px;
    max-width: 500px;
    background: #fff;
    border-radius: 16px 0 0 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 460px;
    border-right: 1px solid #eaf2f1;
}

.qv-image-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    position: relative;
}

.qv-image-wrap img {
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
    border-radius: 10px !important;
}

.qv-no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: #6b8280;
    background-color: #f8f9fa;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.qv-no-image i {
    font-size: 60px;
    opacity: 0.3;
}

.qv-no-image span {
    font-size: 16px;
    font-weight: 600;
}

/* ──── Details Column ──── */
.qv-details-col {
    flex: 1;
    padding: 32px 34px;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

/* Category + SKU row */
.qv-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 10px;
}

.qv-category {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #00837e;
    display: flex;
    align-items: center;
    gap: 8px;
}

.qv-category::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 2px;
    background: linear-gradient(90deg, #00837e, #88ddda);
    border-radius: 2px !important;
}

.qv-sku {
    font-size: 10px;
    color: #00847f;
    letter-spacing: 0.5px;
    background: #fff;
    padding: 3px 10px;
    border-radius: 50px !important;
    border: 1px solid #d6e5e4;
    font-weight: 800;
}

/* Title */
.qv-title {
    font-family: "Poppins", sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: #111918;
    line-height: 1.2;
    margin: 0 0 4px 0;
    letter-spacing: -0.2px;
}

.qv-subtitle {
    font-size: 12px;
    color: #008681;
    margin: 0 0 10px 0;
    line-height: 1.5;
    font-weight: 700;
}

/* Divider */
.qv-divider {
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            #d6e5e4 20%,
            #d6e5e4 80%,
            transparent);
    margin: 12px 0;
}

/* Price block */
.qv-price-block {
    background: linear-gradient(135deg,
            #daf3f2 0%,
            rgba(136, 221, 218, 0.12) 100%);
    border: 1px solid rgb(0 131 126);
    border-radius: 10px !important;
    padding: 14px 18px;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.qv-list-price {
    font-size: 16px;
    color: #aaa;
    font-weight: bold;
}

.qv-sell-price {
    font-family: "Poppins", sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #00837e;
    line-height: 1;
    letter-spacing: -0.5px;
}

.qv-sell-price small {
    font-size: 15px;
    font-weight: 400;
    opacity: 0.75;
}

.qv-gst-tag {
    font-size: 10px;
    color: #6b8280;
    align-self: center;
    margin-left: 4px;
}

/* Section title */
.qv-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #008681;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.qv-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #d6e5e4;
}

/* Specs grid */
.qv-specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #d6e5e4;
    border-radius: 10px !important;
    overflow: hidden;
    margin-bottom: 12px;
}

.qv-spec-cell {
    padding: 12px 14px;
    border-right: 1px solid #d6e5e4;
    border-bottom: 1px solid #d6e5e4;
    background: #fff;
}

.qv-spec-cell:nth-child(3n) {
    border-right: none;
}

.qv-spec-cell:nth-last-child(-n + 3) {
    border-bottom: none;
}

.qv-spec-cell .spec-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #008580;
    margin-bottom: 3px;
    display: block;
}

.qv-spec-cell .spec-value {
    font-size: 13px;
    font-weight: 600;
    color: #111918;
    font-family: "Poppins", sans-serif;
}

/* Stone details */
.qv-stones-wrap {
    margin-top: 4px;
}

.qv-stone-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #eaf2f1;
    border-radius: 10px !important;
    margin-bottom: 6px;
    transition:
        box-shadow 0.2s,
        border-color 0.2s;
}

.qv-stone-row:hover {
    box-shadow: 0 4px 16px rgba(0, 131, 126, 0.1);
    border-color: rgba(0, 131, 126, 0.25);
}

.qv-stone-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #daf3f2, rgba(136, 221, 218, 0.2));
    border: 1px solid rgba(0, 131, 126, 0.2);
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    color: #00837e;
}

.qv-stone-info {
    flex: 1;
    min-width: 0;
}

.qv-stone-name {
    font-size: 12px;
    font-weight: 600;
    color: #111918;
    margin-bottom: 2px;
}

.qv-stone-attrs {
    font-size: 10px;
    color: #6b8280;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.qv-stone-attrs .dot {
    opacity: 0.4;
}

.qv-stone-attrs strong {
    color: #3d4f4e;
}

.qv-stone-right {
    text-align: right;
    flex-shrink: 0;
}

.qv-stone-ctw {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #00837e;
    line-height: 1;
}

.qv-stone-pcs {
    background: #00837e;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px !important;
    letter-spacing: 0.5px;
    margin-top: 3px;
    display: inline-block;
}

/* Actions */
.qv-actions {
    margin-top: 14px;
}

.qv-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 10px !important;
    background: linear-gradient(90deg, #00837e 0%, #009d98 100%);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 6px 24px rgba(0, 131, 126, 0.28);
}

.qv-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(0, 131, 126, 0.32);
    background: linear-gradient(90deg, #006b67 0%, #00837e 100%);
    color: #fff;
    text-decoration: none;
}



/* Responsive */
@media (max-width: 768px) {
    .qv-body {
        flex-direction: column;
    }

    .qv-image-col {
        flex: none;
        max-width: 100%;
        width: 100%;
        border-radius: 16px 16px 0 0 !important;
        border-right: none;
        border-bottom: 1px solid #eaf2f1;
        min-height: 280px;
    }

    .qv-details-col {
        padding: 24px 20px;
    }

    .qv-specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .qv-spec-cell:nth-child(3n) {
        border-right: 1px solid #d6e5e4;
    }

    .qv-spec-cell:nth-child(2n) {
        border-right: none;
    }
}

/* a:hover {
    color: #ffffff;
    text-decoration: underline;
} */

/* -----------details */
body {
    background: #f3f4f6;
}

.product-wrapper {
    /* max-width: 1400px; */
    margin: auto;
    padding: 40px;
    box-sizing: border-box;
}

/* .product-grid {
    display: grid;
    grid-template-columns: minmax(80px, 140px) 1fr minmax(220px, 420px);
    gap: 40px;
} */
.product-grid {
    display: grid;
    grid-template-columns: minmax(80px, 120px) minmax(300px, 700px) 1fr;
    gap: 40px;
}

/* LEFT THUMBNAILS */
.thumbs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.thumbs img {
    width: 100%;
    max-width: 140px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 8px !important;
    cursor: pointer;
    padding: 8px;
    background: #fff;
    object-fit: cover;
}

.thumbs.horizontal-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* MAIN IMAGE */
.main-image {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px !important;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    padding: 40px;
}

.main-image img {
    max-width: 100%;
    max-height: 60vh;
    height: auto;
    display: block;
    object-fit: contain;
}

/* RIGHT DETAILS */
.details {
    background: #fff;
    padding: 30px;
    border-radius: 8px !important;
    border: 1px solid #ddd;
    box-sizing: border-box;
}

.price {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 700;
}

.price span {
    font-size: 0.95rem;
    color: #007d79;
}

.section-title {
    font-weight: 600;
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 20px;
}

ul {
    padding-left: 20px;
}

ul li {
    margin-bottom: 6px;
}

.metal-options button {
    padding: 10px 18px;
    border-radius: 8px !important;
    border: 1px solid #007d79;
    background: #fff;
    cursor: pointer;
    margin-right: 10px;
    margin-bottom: 10px;
    font-weight: 600;
}

.metal-options .active {
    background: #007d79;
    color: #fff;
}

.status {
    margin-top: 20px;
}

.order-btn {
    width: 100%;
    background: #007d79;
    color: #fff;
    padding: 14px;
    border: none;
    border-radius: 6px !important;
    margin-top: 20px;
    font-weight: 600;
}

.extra-btns {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.extra-btns button {
    flex: 1;
    padding: 10px;
    border-radius: 6px !important;
    border: 1px solid #007d79;
    background: #fff;
    font-weight: 600;
}

@media (max-width: 992px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

.range_field {
    border-radius: 10px !important;
    color: #161616;

    letter-spacing: 1px;
    white-space: nowrap;

    font-size: 14px;
    margin-right: 5px;

    width: 150px;

    cursor: pointer;
    transition: 0.25s ease;
    background: #fff;
    border: 1px solid #dcdcdc;
    text-align: center;
    padding: 12px;
    font-weight: 500;
}

/* ===============================
   RESPONSIVE IMPROVEMENTS
=================================*/

/* Large Laptop */
@media (max-width: 1200px) {
    .product-grid {
        grid-template-columns: minmax(80px, 120px) 1fr minmax(200px, 360px);
        gap: 30px;
    }

    .product-wrapper {
        padding: 28px;
    }
}

@media (max-width: 992px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .thumbs {
        flex-direction: row;
        justify-content: flex-start;
    }

    .thumbs img {
        max-width: 110px;
        padding: 6px;
    }

    .thumbs.horizontal-scroll {
        overflow-x: auto;
        gap: 12px;
    }

    .main-image {
        padding: 20px;
    }

    .details {
        padding: 20px;
    }

    .price {
        font-size: 22px;
    }
}

@media (max-width: 576px) {
    .product-wrapper {
        padding: 16px;
    }

    .thumbs {
        gap: 10px;
        align-items: center;
    }

    .thumbs img {
        padding: 6px;
        max-width: 84px;
    }

    .main-image {
        padding: 12px;
    }

    .price {
        font-size: 20px;
    }

    .section-title {
        font-size: 18px;
    }

    ul li {
        font-size: 14px;
    }

    .metal-options button {
        padding: 8px 12px;
        font-size: 13px;
    }

    .order-btn {
        padding: 12px;
        font-size: 14px;
    }

    .extra-btns {
        flex-direction: column;
    }

    .extra-btns button {
        width: 100%;
    }
}

/* iPad Pro Portrait & Landscape - orientation aware */
@media (min-width: 1024px) and (max-width: 1366px) {

    /* default balance for medium-large screens */
    .product-grid {
        grid-template-columns: 180px 1fr minmax(240px, 420px);
        gap: 30px;
    }

    .thumbs {
        gap: 12px;
    }

    .thumbs img {
        max-width: 160px;
        padding: 8px;
        box-sizing: border-box;
    }

    /* Main image bigger */
    .main-image {
        padding: 30px;
    }

    .main-image img {
        max-width: 100%;
        height: auto;
        max-height: 65vh;
    }

    /* Details width control */
    .details {
        padding: 25px;
    }
}

/* Landscape specific: keep three-column layout but slightly adjust widths */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .product-grid {
        grid-template-columns: 160px 1fr 360px;
        gap: 30px;
    }

    .thumbs {
        flex-direction: column;
    }

    .thumbs img {
        max-width: 140px;
    }
}

/* Portrait specific: stack into a single column for better vertical fit */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .thumbs {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        align-items: center;
    }

    .thumbs img {
        max-width: 120px;
    }

    .main-image {
        padding: 18px;
    }

    .details {
        padding: 18px;
    }
}

/* css for video */
.thumb-video {
    position: relative;
    cursor: pointer;
    width: 100%;
    max-width: 140px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 8px !important;
    cursor: pointer;
    padding: 8px;
    background: #fff;
    object-fit: cover;
}

.thumb-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px !important;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 30px;
    height: 30px;
    border-radius: 50% !important;

    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-btn i {
    color: #fff;
    font-size: 12px;
}

.main-image {
    position: relative;
}

.main-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 8px !important;
    background: #f8f8f8;
    color: #888;
    font-size: 14px;
}

.main-placeholder-hidden {
    display: none;
}

.thumb-item {
    position: relative;
    width: 100%;
    max-width: 140px;
}

.thumb-placeholder {
    display: none;
}

.thumb-placeholder-hidden {
    display: none;
}

/* detail screen stone type */
.price {
    font-size: 28px;
    font-weight: 700;
    /* margin-bottom: 15px; */
}

.gst {
    font-size: 14px;
    color: #0c8f7a;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    margin-top: 25px;
    margin-bottom: 12px;
    color: #333;
}

.diamond-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.diamond-card {
    border: 1px solid #ececec;
    border-radius: 10px !important;
    padding: 16px;
    background: #ffffff;
    transition: 0.2s;
}

.diamond-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.diamond-card-header {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
    color: #222;
}

.diamond-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 22px;
}

.diamond-item span {
    font-size: 14px;
    color: #8a8a8a;
    display: block;
    margin-bottom: 3px;
}

.diamond-item p {
    font-size: 14px;
    font-weight: 500;
    color: #222;
    margin: 0;
}

.metal-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.metal-btn {
    border: 1px solid #ddd;
    padding: 8px 14px;
    border-radius: 6px !important;
    background: white;
    cursor: pointer;
}

.metal-btn.active {
    background: #0c8f7a;
    color: white;
    border-color: #0c8f7a;
}

.order-btn {
    width: 100%;
    margin-top: 20px;
    background: #0c8f7a;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 6px !important;
}

/* ---------------------------------new details css */
.main-image {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    padding: 20px;

    max-height: 600px;
}

.main-image img {
    max-width: 100%;
    max-height: 560px;
    object-fit: contain;
}

/* Sticky only for desktop */
@media (min-width: 1024px) {
    .main-image {
        position: sticky;
        top: 20px;
    }

    .thumbs {
        position: sticky;
        top: 20px;
    }
}

/* Very large screens */
@media (min-width: 1600px) {
    .main-image {
        max-height: 660px;
    }

    .main-image img {
        max-height: 660px;
    }
}

@media (min-width: 1024px) {
    .left-gallery {
        position: sticky;
        top: 20px;
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }

    .thumbs {
        position: relative;
    }

    .main-image {
        position: relative;
    }
}

.product-grid {
    align-items: start;
}

@media (min-width: 1024px) {
    .thumbs {
        position: sticky;
        top: 30px;
        align-self: start;
    }

    .main-image {
        position: sticky;
        top: 30px;
    }
}

.details {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-size: 14px;
}

/* PRICE */
.price-container {
    border-bottom: 1px solid #eee;
    padding-bottom: 16px;
}

.list-price {
    color: #888;
    font-size: 14px;
    margin-bottom: 6px;
}

.price {
    font-size: 28px;
    font-weight: 600;
    color: #007d79;
}

.gst {
    font-size: 13px;
    color: #28a745;
    margin-left: 6px;
}

.price-label {
    font-weight: 500;
    margin-right: 6px;
    color: #555;
}

/* TITLE + CATEGORY */
.jewellerydetail {
    margin-top: 10px;
    color: #444;
    line-height: 1.6;
}

.jewellerydetail-label {
    font-weight: 600;
}

/* SECTION TITLE */
.section-title {
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
}

/* DIAMOND CARD */
.diamond-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.diamond-card {
    border: 1px solid #e6e6e6;
    border-radius: 8px !important;
    padding: 14px;
    background: #fafafa;
}

.diamond-card-header {
    font-weight: 600;
    margin-bottom: 10px;
}

/* DIAMOND GRID */
.diamond-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.diamond-item span {
    font-size: 12px;
    color: #888;
}

.diamond-item p {
    margin: 2px 0 0;
    font-weight: 500;
}

/* METAL OPTIONS */
.metal-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.metal-btn {
    border: 1px solid #ddd;
    background: #fff;
    padding: 6px 14px;
    border-radius: 20px !important;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.metal-btn:hover {
    border-color: #333;
}

.metal-btn.active {
    color: #fff;
}

/* SHARE BUTTON */
.order-btn {
    margin-top: 10px;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 6px !important;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.order-btn:hover {
    background: #084ec1;
}

.product-category {
    font-weight: 600;
    color: #007d79;
    font-size: 20px;
}

.product-title-sub {
    color: #007d79;
}

.jew-lebal {
    font-weight: 600;
}

/* ===== sssk   CARD META ROW (metal type + setting) ===== */
.jew-meta-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.jew-meta-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #c59d5f;
    background: rgba(197, 157, 95, 0.1);
    border: 1px solid rgba(197, 157, 95, 0.3);
    padding: 2px 8px;
    border-radius: 20px !important;
}

/* ===== STONE STRIP (shape · color · clarity · ctw) ===== */
.jew-stone-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 6px 0 10px;
    font-size: 12px;
    color: #888;
}

.jew-stone-strip span {
    display: inline-block;
}

.jew-stone-strip span:not(:last-child)::after {
    content: " · ";
    color: #ccc;
    margin: 0 2px;
}

.jew-stone-strip .jew-carat {
    font-weight: 600;
    color: #555;
}

/* ===== HIGHLIGHT PILLS (Gold wt / Diamond wt / Stones) ===== */
.jew-highlights {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 12px;
    padding: 10px 12px;
    background: #faf8f4;
    border-radius: 10px !important;
    border: 1px solid #f0e8d8;
}

.jew-highlight-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 60px;
    padding: 4px 6px;
    border-right: 1px solid #ede4d4;
}

.jew-highlight-item:last-child {
    border-right: none;
}

.jew-highlight-label {
    font-size: 9px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 2px;
    font-weight: 600;
    white-space: nowrap;
}

.jew-highlight-value {
    font-size: 13px;
    font-weight: 700;
    color: #333;
}

/* Theme overrides */
.interim-theme-natural .jew-meta-tag {
    color: #007d79;
    background: rgba(0, 125, 121, 0.08);
    border-color: rgba(0, 125, 121, 0.25);
}

.interim-theme-natural .jew-highlights {
    background: #f4faf9;
    border-color: #c8e8e6;
}

.interim-theme-lab-grown .jew-meta-tag {
    color: #d0aa62;
    background: rgba(208, 170, 98, 0.08);
    border-color: rgba(208, 170, 98, 0.25);
}

.interim-theme-lab-grown .jew-highlights {
    background: #fdf9f1;
    border-color: #f0ddb8;
}

.jew-type {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    font-weight: 700;
    font-size: 13px;
    padding: 2px 8px;

    /* color: #c59d5f;
    background: rgba(197, 157, 95, 0.1);
    border: 1px solid rgba(197, 157, 95, 0.3); */

    color: #007d79;
    background: rgba(0, 125, 121, 0.08);
    border: 1px solid rgba(0, 125, 121, 0.25);
}

/* ----------------------theme */
/* SEARCH FILTER — card design*/
.srch-wrap {
    font-family: "Poppins", sans-serif;
    max-width: 1600px;
    margin: auto;
    padding-bottom: 80px;
    /* space for fixed bottom bar */
}

/* Header */
.srch-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.srch-header-left h2 {
    font-family: "Poppins", sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #111918;
    margin: 0 0 4px 0;
    letter-spacing: -0.3px;
}

.srch-header-left h2 span {
    font-style: italic;
    color: #00837e;
}

.srch-header-left p {
    font-size: 13px;
    color: #6b8280;
    margin: 0;
}

/* Active filter chips */
.srch-active-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.srch-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid #00837e;
    border-radius: 50px !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #00837e;
}

.srch-chip .chip-x {
    cursor: pointer;
    font-size: 12px;
    opacity: 0.65;
    font-weight: 400;
    transition: opacity 0.15s;
}

.srch-chip .chip-x:hover {
    opacity: 1;
}

.srch-clear-all {
    font-size: 11px;
    font-weight: 600;
    color: #6b8280;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: color 0.2s;
}

.srch-clear-all:hover {
    color: #b84444 !important;
    text-decoration: none;
}

/* Filter card */
.srch-card {
    background: #fff;
    border: 1px solid #eaf2f1;
    border-radius: 14px !important;
    padding: 18px 22px;
    margin-bottom: 12px;
    box-shadow: 0 2px 16px rgba(0, 50, 48, 0.04);
}

/* Card header */
.srch-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.srch-card-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #00837e;
}

.srch-card-label i {
    font-size: 12px;
    opacity: 0.7;
}

/* Clear section link */
.srch-clear-section {
    font-size: 12px;
    color: #6b8280;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.srch-clear-section:hover {
    color: #b84444;
}

/* Search input container */
.srch-company-input {
    position: relative;
    display: flex;
    align-items: center;
}

/* Search icon */
.srch-company-input i {
    position: absolute;
    left: 12px;
    font-size: 14px;
    color: #7b9a98;
}

/* Input field */
.srch-company-input input {
    font-family: "Poppins", sans-serif !important;
    width: 100% !important;
    padding: 10px 12px 10px 34px !important;
    border-radius: 10px !important;
    border: 1px solid #dfeeee !important;
    font-size: 14px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

/* Focus effect */
.srch-company-input input:focus {
    border-color: #00837e;
    box-shadow: 0 0 0 2px rgba(0, 131, 126, 0.08);
}

/* Pill grid */
.srch-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.srch-pill {
    padding: 7px 16px;
    border-radius: 50px !important;
    border: 1.5px solid #d6e5e4;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    color: #3d4f4e;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    user-select: none;
}

.srch-pill:hover {
    border-color: #00837e;
    color: #00837e;
}

.srch-pill.selected {
    border-color: #00837e;
    background: #00837e;
    color: #fff;
    font-weight: 600;
}

/* Price range */
.srch-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.srch-price-input {
    font-family: "Poppins", sans-serif;
    width: 110px;
    padding: 10px 14px;
    border-radius: 10px !important;
    border: 1.5px solid #d6e5e4;
    font-size: 13px;
    color: #111918;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
}

.srch-price-input:focus {
    border-color: #00837e;
    box-shadow: 0 0 0 3px rgba(0, 131, 126, 0.1);
}

.srch-price-sep {
    font-size: 13px;
    color: #6b8280;
    font-weight: 500;
}

/* Bottom action bar — fixed to viewport bottom */
#search_bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

.srch-action-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 28px;
    background: #fff;
    box-shadow: 0 -2px 16px rgba(0, 50, 48, 0.1);
    border-top: 1px solid #eaf2f1;
}

.srch-filter-count {
    font-size: 12px;
    font-weight: 600;
    color: #3d4f4e;
    padding: 11px 20px;
    border: 1.5px solid #d6e5e4;
    border-radius: 50px !important;
    background: #f7fcfb;
    white-space: nowrap;
    text-transform: uppercase;
}

.srch-btn-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 34px;
    background: linear-gradient(90deg, #00837e, #009d98);
    color: #fff;
    border: none;
    border-radius: 50px !important;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 131, 126, 0.28);
    transition: all 0.25s;
}

.srch-btn-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 24px rgba(0, 131, 126, 0.35);
}

.srch-btn-reset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #fff;
    color: #00837e;
    border: 1.5px solid #00837e;
    border-radius: 50px !important;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s;
}

.srch-btn-reset:hover {
    background: #00837e;
    color: #fff;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 600px) {
    .srch-action-bar {
        padding: 12px 14px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .srch-filter-count {
        width: 100%;
        text-align: center;
        margin-bottom: 2px;
    }

    .srch-btn-search,
    .srch-btn-reset {
        flex: 1;
        justify-content: center;
        padding: 10px 14px;
        font-size: 11px;
    }
}

/* Sub-category section hidden by default */
#srch-subcategory-card {
    display: none;
}

#srch-subcategory-card.visible {
    display: block;
}

/* COMPARE PAGE — Table layout with teal theme */
.cmp-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border: 1.5px solid #d6e5e4;
    border-radius: 50px !important;
    background: #fff;
    color: #3d4f4e;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.22s;
    letter-spacing: 0.3px;
}

.cmp-back-btn:hover {
    border-color: #00837e;
    color: #00837e;
    background: #daf3f2;
    text-decoration: none;
}

.cmp-heading {
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #111918;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cmp-heading::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 3px;
    background: linear-gradient(90deg, #00837e, #88ddda);
    border-radius: 2px !important;
}

/* ──── Table ──── */
.cmp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #d6e5e4;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 50, 48, 0.07);
}

.cmp-table th,
.cmp-table td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #eaf2f1;
    font-size: 13px;
}

/* Label column (left) */
.cmp-label {
    /* background: #f0f8f7; */
    color: #00837e;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    width: 180px;
    min-width: 180px;
    border-right: 1px solid #d6e5e4;
    text-align: right;
    padding-right: 20px;
}

/* Product value columns */
.cmp-val {
    text-align: left;
    color: #111918;
    font-weight: 500;
    min-width: 220px;
    border-right: 1px solid #eaf2f1;
}

.cmp-val:last-child {
    border-right: none;
}

/* Header row */
.cmp-header-label {
    background: #00837e;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 2px solid #006b67;
    text-align: right;
    padding-right: 20px;
}

.cmp-header {
    background: #00837e;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 2px solid #006b67;
    position: relative;
}

.cmp-header:last-child {
    border-right: none;
}

/* Remove button in header */
.cmp-remove-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.cmp-remove-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
    color: #fff;
}

/* Image row */
.cmp-img-cell {
    padding: 20px 16px;
    text-align: center;
    /* background: #e1f4ff; */
}

.cmp-img-cell img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 10px !important;
    cursor: pointer;
    transition: transform 0.2s;
}

.cmp-img-cell img:hover {
    transform: scale(1.03);
}

.cmp-no-img {
    color: #6b8280;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 120px;
    justify-content: center;
}

.cmp-no-img i {
    font-size: 32px;
    opacity: 0.2;
}

/* ──── Image Lightbox ──── */
.cmp-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 20, 19, 0.85);
    backdrop-filter: blur(6px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.cmp-lightbox.active {
    display: flex;
}

.cmp-lightbox img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 12px !important;
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.5);
}

.cmp-lightbox-close {
    position: absolute;
    top: 24px;
    right: 32px;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.cmp-lightbox-close:hover {
    background: #00837e;
    border-color: #00837e;
}

/* Stone type with icon */
.cmp-stone-type-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cmp-stone-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #daf3f2, rgba(136, 221, 218, 0.2));
    border: 1px solid rgba(0, 131, 126, 0.2);
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    color: #00837e;
}

/* Price styling */
.cmp-price-cell {
    background: linear-gradient(135deg,
            #daf3f2 0%,
            rgba(136, 221, 218, 0.12) 100%);
}

.cmp-sell-price {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #00837e;
}

.cmp-list-price {
    font-size: 12px;
    color: #aaa;
    font-weight: 600;
}

/* Section separator */
.cmp-section-row td,
.cmp-section-row th {
    /* background: #f0f8f7; */
    padding: 8px 16px;
    border-bottom: 1px solid #d6e5e4;
}

.cmp-section-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #00837e;
    text-align: left !important;
}

/* View details button */
.cmp-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border: none;
    border-radius: 10px !important;
    background: linear-gradient(90deg, #00837e 0%, #009d98 100%);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(0, 131, 126, 0.14);
}

.cmp-detail-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 131, 126, 0.25);
    background: linear-gradient(90deg, #006b67 0%, #00837e 100%);
    color: #fff;
    text-decoration: none;
}

/* Stone badge */
.cmp-stone-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #daf3f2;
    border: 1px solid rgba(0, 131, 126, 0.18);
    border-radius: 50px !important;
    font-size: 12px;
    font-weight: 600;
    color: #00837e;
}

/* Alternating row colors */
.cmp-table tbody tr:nth-child(even) .cmp-val {
    background: #fafcfc;
}

/* Last row no border */
.cmp-table tbody tr:last-child td,
.cmp-table tbody tr:last-child th {
    border-bottom: none;
}

/* Empty state */
.cmp-empty {
    text-align: center;
    padding: 60px 20px;
    color: #6b8280;
}

.cmp-empty i {
    font-size: 48px;
    opacity: 0.2;
    margin-bottom: 14px;
    display: block;
}

.cmp-empty p {
    font-size: 14px;
    font-weight: 500;
}

/* Responsive */
.cmp-table-wrap {
    overflow-x: auto;
    border-radius: 16px !important;
}

/*  CSS TOKENS — colour schema unchanged */
:root {
    --gold: #00837e;
    --gold-light: #88ddda;
    --gold-pale: #daf3f2;
    --gold-deep: #00837e;
    --gold-glow: rgba(0, 131, 126, 0.14);
    --gold-glow2: rgba(0, 131, 126, 0.28);
    --ink: #111918;
    --ink-soft: #3d4f4e;
    --stone: #6b8280;
    --cream: #eef3f9;
    --cream-deep: #e4ecf3;
    --white: #ffffff;
    --border: #d6e5e4;
    --border-soft: #eaf2f1;
    --green: #1a7a5e;
    --red: #b84444;
    --shadow: rgba(0, 50, 48, 0.07);
    --shadow-lg: rgba(0, 50, 48, 0.13);
    --radius: 16px;
    --radius-sm: 10px;

    /* Typography */
    --font-display:
        "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";
    --font-body:
        "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Hide the master-layout page title + divider on this page */
.content>.mt-2>h3,
.content>.mt-2>hr {
    display: none !important;
}

/* ════════════════════════════════════════
                                       RESET / BASE
                                    ════════════════════════════════════════ */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
}

/* ════════════════════════════════════════
                                       WRAPPER
                                    ════════════════════════════════════════ */
.jd-wrapper {
    max-width: 1560px;
    margin: 0 auto;
    padding: 28px 40px 80px;
    background: var(--cream);
    min-height: 100vh;
}

/*  BACK BUTTON */
.jd-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border: 1.5px solid var(--border);
    border-radius: 50px !important;
    background: var(--white);
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.22s;
    margin-bottom: 20px;
    letter-spacing: 0.3px;
}

.jd-btn-back:hover {
    border-color: var(--gold);
    color: var(--gold-deep);
    background: var(--gold-pale);
}

.jd-btn-back i {
    font-size: 10px;
}

/* ════════════════════════════════════════
                                       BREADCRUMB
                                    ════════════════════════════════════════ */
.jd-breadcrumb {
    padding: 0 0 22px;
    font-size: 11.5px;
    color: var(--stone);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-family: var(--font-body);
}

.jd-breadcrumb a {
    color: var(--gold-deep);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.jd-breadcrumb a:hover {
    color: var(--gold);
}

.jd-breadcrumb .sep {
    opacity: 0.35;
    font-size: 10px;
}

.jd-breadcrumb .current {
    color: var(--ink-soft);
    font-weight: 600;
}

/* ════════════════════════════════════════
                                       MAIN GRID
                                    ════════════════════════════════════════ */
.jd-grid {
    display: grid;
    grid-template-columns: 96px minmax(300px, 580px) 1fr;
    gap: 28px;
    align-items: start;
}

/* ════════════════════════════════════════
                                       THUMBNAIL STRIP
                                    ════════════════════════════════════════ */
.jd-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 24px;
}

.jd-thumb-item {
    border: 2px solid var(--border-soft);
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
    cursor: pointer;
    background: var(--white);
    transition:
        border-color 0.2s,
        transform 0.2s,
        box-shadow 0.2s;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.jd-thumb-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px !important;
    background: transparent;
    transition: background 0.2s;
}

.jd-thumb-item:hover {
    border-color: var(--gold);
    transform: translateX(3px);
    box-shadow: 0 4px 14px var(--gold-glow);
}

.jd-thumb-item.active {
    border-color: var(--gold);
    box-shadow:
        0 0 0 3px var(--gold-glow),
        0 4px 14px var(--gold-glow);
}

.jd-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.jd-thumb-video {
    position: relative;
    width: 100%;
    height: 100%;
}

.jd-thumb-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jd-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.32);
}

.jd-play-icon i {
    color: #fff;
    font-size: 16px;
}

/* ════════════════════════════════════════
                                       MAIN IMAGE PANEL
                                    ════════════════════════════════════════ */
.jd-main-image {
    position: sticky;
    top: 24px;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius) !important;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 40px var(--shadow),
        0 1px 0 var(--border-soft);
    cursor: zoom-in;
}

.jd-main-image img {
    width: 100%;
    max-height: 580px;
    object-fit: contain;
    padding: 28px;
    display: block;
    transition:
        transform 0.1s ease-out,
        opacity 0.3s;
    transform-origin: center center;
    will-change: transform;
}

.jd-main-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 480px;
    color: var(--stone);
    background: linear-gradient(145deg,
            var(--cream) 0%,
            var(--cream-deep) 100%);
    width: 100%;
}

.jd-main-placeholder i {
    font-size: 52px;
    opacity: 0.2;
}

.jd-main-placeholder span {
    font-size: 13px;
    font-weight: 500;
}

/* Zoom hint badge */
.jd-img-hint {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border-soft);
    border-radius: 50px !important;
    padding: 5px 13px;
    font-size: 10.5px;
    color: var(--stone);
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.2px;
    pointer-events: none;
    box-shadow: 0 2px 8px var(--shadow);
}

/* ════════════════════════════════════════
                                       DETAILS PANEL
                                    ════════════════════════════════════════ */
.jd-details {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius) !important;
    padding: 32px 36px;
    box-shadow: 0 8px 40px var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Category + SKU row */
.jd-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
}

.jd-category {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: flex;
    align-items: center;
    gap: 8px;
}

.jd-category::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 2px !important;
}

.jd-sku {
    font-size: 10.5px;
    color: #007d79;
    letter-spacing: 0.5px;
    background: var(--cream);
    padding: 4px 10px;
    border-radius: 50px !important;
    border: 1px solid var(--border);
    font-weight: 700;
}

/* Product title */
.jd-title {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
    margin-bottom: 10px;
    letter-spacing: -0.2px;
}

/* Stone badge */
.jd-stone-title {
    font-size: 11px;
    color: var(--gold-deep);
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--gold-pale);
    border: 1px solid rgba(0, 131, 126, 0.18);
    border-radius: 50px !important;
    align-self: flex-start;
}

.jd-stone-title::before {
    content: "◆";
    font-size: 8px;
}

/* Description */
.jd-sub-title {
    font-size: 13px;
    color: var(--stone);
    margin-bottom: 18px;
    line-height: 1.65;
}

/* Divider */
.jd-divider {
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            var(--border) 20%,
            var(--border) 80%,
            transparent);
    margin: 20px 0;
}

/* ════════════════════════════════════════
                                       PRICE BLOCK — HIGHLIGHTED
                                    ════════════════════════════════════════ */
.jd-price-block {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    background: linear-gradient(135deg,
            var(--gold-pale) 0%,
            rgba(136, 221, 218, 0.12) 100%);
    border: 1px solid rgba(0, 131, 126, 0.18);
    border-radius: var(--radius-sm) !important;
    padding: 16px 20px;
    margin-bottom: 2px;
}

.jd-list-price {
    font-size: 13px;
    color: #aaa;
    text-decoration: line-through;
    font-weight: 400;
    font-family: var(--font-body);
}

.jd-sell-price {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 700;
    color: var(--gold-deep);
    line-height: 1;
    letter-spacing: -0.5px;
}

.jd-sell-price small {
    font-size: 18px;
    font-weight: 400;
    opacity: 0.75;
}

/* Savings pill */
.jd-savings-pill {
    margin-left: auto;
    background: var(--gold-deep);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 50px !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    align-self: center;
    display: none;
    /* shown via JS when discount exists */
}

/* Enhanced Price Card */
.jd-price-card {
    background: linear-gradient(135deg,
            var(--gold-pale) 0%,
            rgba(136, 221, 218, 0.18) 100%);
    border: 1.5px solid rgba(0, 131, 126, 0.22);
    border-radius: 14px !important;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
}

.jd-price-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jd-sell-price-val {
    font-size: 32px;
    font-weight: 700;
    color: var(--gold-deep);
    line-height: 1;
}

.jd-gst-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--gold-deep);
    opacity: 0.75;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ════════════════════════════════════════
                                       SECTION TITLES
                                    ════════════════════════════════════════ */
.jd-section-title {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    margin-top: 16px;
}

.jd-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ════════════════════════════════════════
                                       METAL / STONE OPTION BUTTONS
                                    ════════════════════════════════════════ */
.jd-metal-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jd-metal-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1.5px solid var(--border);
    border-radius: 50px !important;
    background: var(--white);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: all 0.22s;
    text-decoration: none;
}

.jd-metal-btn:hover,
.jd-metal-btn:focus {
    border-color: var(--gold);
    color: var(--gold-deep);
    background: var(--gold-pale);
}

.jd-metal-btn.active {
    border-color: var(--gold);
    background: var(--gold-pale);
    color: var(--gold-deep);
    font-weight: 600;
    box-shadow: 0 0 0 3px var(--gold-glow);
}

/* Swatches */
.jd-swatch {
    width: 15px;
    height: 15px;
    border-radius: 50% !important;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.sw-yg {
    background: linear-gradient(135deg, #e8c66d, #c59a2e);
}

.sw-wg {
    background: linear-gradient(135deg, #e8e8e8, #b0b0b0);
}

.sw-rg {
    background: linear-gradient(135deg, #f0b8a0, #d4855a);
}

.sw-pt {
    background: linear-gradient(135deg, #d8dce0, #9aa0a8);
}

.sw-18y {
    background: linear-gradient(135deg, #f0d060, #d4a820);
}

.sw-18w {
    background: linear-gradient(135deg, #efefef, #c0c0c0);
}

/* ════════════════════════════════════════
                                       SIZE BUTTONS
                                    ════════════════════════════════════════ */
.jd-var-options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.jd-size-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 8px 12px 6px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm) !important;
    background: var(--white);
    cursor: pointer;
    font-size: 12px;
    line-height: 1.3;
    transition: all 0.22s;
    gap: 1px;
}

.jd-size-btn .sz-label {
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.2;
}

.jd-size-btn .sz-price {
    font-size: 9.5px;
    color: var(--gold-deep);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.jd-size-btn:hover {
    border-color: var(--gold);
    background: var(--gold-pale);
}

.jd-size-btn.active {
    border-color: var(--gold);
    background: var(--gold-deep);
    color: #fff;
    box-shadow: 0 4px 14px var(--gold-glow2);
}

.jd-size-btn.active .sz-label {
    color: #fff;
}

.jd-size-btn.active .sz-price {
    color: rgba(255, 255, 255, 0.85);
}

/* Earring variant */
.jd-size-btn.earring-btn {
    min-width: 92px;
    padding: 8px 10px;
    flex-direction: row;
    gap: 7px;
    justify-content: flex-start;
}

.jd-size-btn.earring-btn .sz-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.jd-size-btn.earring-btn .sz-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.jd-size-btn.earring-btn .sz-label {
    font-size: 11px;
    font-weight: 700;
}

.jd-size-btn.earring-btn .sz-price {
    font-size: 9px;
    color: #aaa;
}

.jd-size-btn.earring-btn.active .sz-price {
    color: rgba(255, 255, 255, 0.75);
}

.jd-size-btn.has-note .sz-note {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.2px;
}

.jd-size-btn:not(.active) .sz-note {
    color: #aaa;
}

/* Size hint */
.jd-size-hint {
    font-size: 11px;
    color: var(--stone);
    margin-top: 9px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.jd-size-hint i {
    color: var(--gold-deep);
}

/* ════════════════════════════════════════
                                       SPECS GRID — HIGHLIGHTED
                                    ════════════════════════════════════════ */
.jd-specs-grid {
    display: grid;
    /* grid-template-columns: repeat(4, 1fr); */
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
    margin-top: 10px;
    word-wrap: break-word;
    /* word-spacing: -1.9px; */
}

.jd-spec-cell {
    padding: 14px 16px;
    border-right: 1px solid var(--border);
    background: var(--white);
    transition: background 0.2s;
    position: relative;
}

.jd-spec-cell:first-child {
    border-left: none;
}

.jd-spec-cell:last-child {
    border-right: none;
}

.jd-spec-cell:hover {
    background: var(--cream);
}

/* Flash highlight when a spec value updates on size change */
@keyframes spec-flash {
    0% {
        background: var(--gold-pale);
    }

    60% {
        background: var(--gold-pale);
    }

    100% {
        background: var(--white);
    }
}

.jd-spec-cell.spec-updated {
    animation: spec-flash 0.55s ease-out forwards;
}

.jd-spec-cell .spec-label {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #007d79;
    margin-bottom: 5px;
    display: block;
}

.jd-spec-cell .spec-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    font-family: var(--font-display);
}

/*  STONE DETAILS — HIGHLIGHTED
                                  */
.jd-stone-details-wrap {
    margin-top: 20px;
}

.jd-stone-details-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 14px;
    letter-spacing: 0.3px;
}

.jd-stone-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm) !important;
    margin-bottom: 8px;
    transition:
        box-shadow 0.22s,
        border-color 0.22s,
        transform 0.18s;
}

.jd-stone-row:hover {
    box-shadow: 0 6px 20px var(--gold-glow);
    border-color: rgba(0, 131, 126, 0.25);
    transform: translateX(2px);
}

.jd-stone-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg,
            var(--gold-pale),
            rgba(136, 221, 218, 0.2));
    border: 1px solid rgba(0, 131, 126, 0.2);
    border-radius: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    color: var(--gold-deep);
}

.jd-stone-info {
    flex: 1;
    min-width: 0;
}

.jd-stone-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}

.jd-stone-attrs {
    font-size: 11px;
    color: #007d79;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-weight: 600;
}

.jd-stone-attrs .dot {
    opacity: 0.4;
}

.jd-stone-attrs strong {
    color: var(--ink-soft);
}

.jd-stone-right {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.jd-stone-ctw {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--gold-deep);
    line-height: 1;
}

.jd-stone-ctw span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    color: var(--stone);
}

.jd-stone-pcs {
    background: var(--gold-deep);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 4px !important;
    letter-spacing: 0.5px;
}

/* Total bar */
.jd-stone-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, var(--ink) 0%, #1a2f2e 100%);
    color: #fff;
    border-radius: var(--radius-sm) !important;
    padding: 13px 20px;
    margin-top: 6px;
    box-shadow: 0 4px 14px rgba(0, 50, 48, 0.2);
}

.jd-stone-total-bar .tot-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 1;
}

.jd-stone-total-bar .tot-val {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--gold-light);
}

.jd-stone-total-bar .tot-val small {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-left: 4px;
}

/*  ACTION BUTTONS
                                    */
.jd-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.jd-btn-primary {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: var(--radius-sm) !important;
    background: linear-gradient(90deg, var(--gold-deep) 0%, #009d98 100%);
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 24px var(--gold-glow2);
    position: relative;
    overflow: hidden;
}

.jd-btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 60%);
    pointer-events: none;
}

.jd-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px var(--gold-glow2);
    background: linear-gradient(90deg, #006b67 0%, var(--gold-deep) 100%);
}

.jd-btn-primary:active {
    transform: translateY(0);
}

.jd-btn-secondary {
    flex: 1;
    min-width: calc(33.33% - 10px);
    padding: 12px 15px;
    border: 1.5px solid var(--gold);
    border-radius: var(--radius-sm) !important;
    background: transparent;
    color: var(--gold-deep);
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.jd-btn-secondary:hover {
    background: var(--gold-pale);
    color: var(--gold-deep);
    border-color: var(--gold-deep);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--gold-glow2);
}

.jd-btn-secondary:active {
    transform: translateY(0);
}

.jd-btn-secondary.active {
    background: var(--gold-deep);
    color: #fff;
    border-color: var(--gold-deep);
}

.jd-btn-secondary.active:hover {
    background: #006b67;
}

.jd-btn-group {
    display: flex;
    gap: 10px;
    width: 100%;
}

/* LIGHTBOX */
#jd-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.96);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    backdrop-filter: blur(6px);
}

.jd-lightbox-close {
    position: absolute;
    top: 24px;
    right: 32px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.jd-lightbox-close:hover {
    background: var(--gold);
    border-color: var(--gold);
}

#jd-lightbox-img {
    max-width: 90vw;
    max-height: 75vh;
    object-fit: contain;
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.6);
    border-radius: 10px !important;
}

#jd-lightbox-thumbs {
    margin-top: 22px;
    display: flex;
    gap: 10px;
    max-width: 90vw;
    overflow-x: auto;
    padding-bottom: 8px;
}

.lb-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px !important;
    opacity: 0.55;
    transition: all 0.2s;
    flex-shrink: 0;
}

.lb-thumb:hover,
.lb-thumb.active {
    opacity: 1;
}

.lb-thumb.active {
    border-color: var(--gold);
}

/* THEME VARS (keep existing)
                                   */
.interim-theme-natural {
    --modal-h: #007d79;
    --modal-h-dark: #005f5c;
    --modal-pill-sel: #e6f7f7;
    --modal-glow: rgba(0, 125, 121, 0.15);
}

.interim-theme-lab-grown {
    --modal-h: #88ddda;
    --modal-h-dark: #005f5c;
    --modal-pill-sel: #fdf6eb;
    --modal-glow: rgba(192, 154, 91, 0.18);
}

.jew-container {
    --modal-h: #88ddda;
    --modal-h-dark: #005f5c;
    --modal-pill-sel: #fdf8ef;
    --modal-glow: rgba(138, 110, 58, 0.15);
}

/*  RESPONSIVE — TABLET (≤1100px)
                                     */
@media (max-width: 1100px) {
    .jd-wrapper {
        padding: 20px 24px 60px;
    }

    .jd-btn-group {
        flex-direction: column;
    }


    .jd-grid {
        grid-template-columns: 80px minmax(280px, 480px) 1fr;
        gap: 20px;
    }

    .jd-details {
        padding: 24px 24px;
    }

    .jd-title {
        font-size: 26px;
    }

    .jd-specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .jd-spec-cell:nth-child(2) {
        border-right: none;
    }

    .jd-spec-cell:nth-child(3) {
        border-right: 1px solid var(--border);
        border-top: 1px solid var(--border);
    }

    .jd-spec-cell:nth-child(4) {
        border-right: none;
        border-top: 1px solid var(--border);
    }
}

/*   RESPONSIVE — SMALL TABLET (≤860px)
                                       Stack image + details side-by-side, hide thumb strip
                                */
@media (max-width: 860px) {
    .jd-wrapper {
        padding: 16px 16px 60px;
    }

    .jd-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 16px;
    }

    /* Thumb strip becomes horizontal strip below main image */
    .jd-thumbs {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-direction: row;
        overflow-x: auto;
        position: static;
        padding-bottom: 4px;
        gap: 8px;
    }

    .jd-thumb-item {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
        transform: none !important;
    }

    .jd-main-image {
        grid-column: 1;
        grid-row: 1;
        position: static;
        min-height: 320px;
    }

    .jd-details {
        grid-column: 2;
        grid-row: 1;
        position: static;
    }

    .jd-title {
        font-size: 22px;
    }

    .jd-sell-price {
        font-size: 30px;
    }
}

/*  RESPONSIVE — MOBILE (≤620px)
                                       Full single-column layout*/
@media (max-width: 620px) {
    .jd-wrapper {
        padding: 12px 12px 50px;
    }

    .jd-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .jd-thumbs {
        grid-column: 1;
        grid-row: 1;
        flex-direction: row;
        overflow-x: auto;
        position: static;
    }

    .jd-main-image {
        grid-column: 1;
        grid-row: 2;
        min-height: 280px;
    }

    .jd-details {
        grid-column: 1;
        grid-row: 3;
        padding: 20px 18px;
    }

    .jd-title {
        font-size: 24px;
    }

    .jd-sell-price {
        font-size: 32px;
    }

    .jd-specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .jd-spec-cell:nth-child(2n) {
        border-right: none;
    }

    .jd-spec-cell:nth-child(n + 3) {
        border-top: 1px solid var(--border);
    }

    .jd-btn-primary {
        font-size: 11px;
        padding: 13px;
    }

    .jd-cat-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .jd-metal-options {
        gap: 6px;
    }

    .jd-metal-btn {
        font-size: 11px;
        padding: 7px 12px;
    }

    .jd-price-block {
        padding: 14px 16px;
    }

    .jd-size-btn {
        min-width: 48px;
    }

    .jd-details {
        border-radius: var(--radius-sm) !important;
    }
}

/*  HIGHLIGHT ACCENTS — new decorative touches*/

/* Glowing active stone-row indicator */
.jd-stone-row.featured {
    border-color: rgba(0, 131, 126, 0.3);
    background: linear-gradient(135deg,
            var(--white) 80%,
            var(--gold-pale) 100%);
}

/* Section divider with icon */
.jd-divider-accent {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}

.jd-divider-accent::before,
.jd-divider-accent::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            var(--border) 40%,
            var(--border) 60%,
            transparent);
}

.jd-divider-accent span {
    font-size: 14px;
    color: var(--gold-light);
    opacity: 0.6;
}

/* Floating pulse on active thumb */
@keyframes pulse-border {

    0%,
    100% {
        box-shadow: 0 0 0 2px var(--gold-glow);
    }

    50% {
        box-shadow: 0 0 0 5px var(--gold-glow);
    }
}

.jd-thumb-item.active {
    animation: pulse-border 2.4s ease-in-out infinite;
}

/* Price shimmer highlight on load */
@keyframes price-reveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jd-price-block {
    animation: price-reveal 0.45s 0.1s both ease-out;
}

/* Staggered reveal for stone rows */
.jd-stone-row {
    animation: price-reveal 0.35s both ease-out;
}

.jd-stone-row:nth-child(1) {
    animation-delay: 0.05s;
}

.jd-stone-row:nth-child(2) {
    animation-delay: 0.1s;
}

.jd-stone-row:nth-child(3) {
    animation-delay: 0.15s;
}

.jd-stone-row:nth-child(4) {
    animation-delay: 0.2s;
}

/* Subtle shimmer on the main image panel */
@keyframes border-glow {

    0%,
    100% {
        box-shadow: 0 8px 40px var(--shadow);
    }

    50% {
        box-shadow:
            0 8px 40px var(--shadow),
            0 0 0 1px rgba(0, 131, 126, 0.1);
    }
}

.jd-main-image {
    animation: border-glow 4s ease-in-out infinite;
}

/*  BRACELET SIZE WRAPPER */
.jd-bracelet-specs {
    margin-top: 14px;
}

.jd-size-guide-link {
    font-size: 11px;
    color: var(--gold-deep);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-weight: 600;
    transition: opacity 0.2s;
}

.jd-size-guide-link:hover {
    opacity: 0.7;
}

#earring-type-wrapper {
    margin-bottom: 10px;
}

.interim-theme-natural {
    --modal-h: #007d79;
    --modal-h-dark: #005f5c;
    --modal-pill-sel: #e6f7f7;
    --modal-glow: rgba(0, 125, 121, 0.15);
}

.interim-theme-lab-grown {
    --modal-h: #c09a5b;
    --modal-h-dark: #8a6e3a;
    --modal-pill-sel: #fdf6eb;
    --modal-glow: rgba(192, 154, 91, 0.18);
}

.jew-container {
    --modal-h: #8a6e3a;
    --modal-h-dark: #5e4b25;
    --modal-pill-sel: #fdf8ef;
    --modal-glow: rgba(138, 110, 58, 0.15);
}

:root {
    --modal-h: #00837e;
    --modal-h-dark: #006360;
    --modal-pill-sel: #e6f7f7;
    --modal-glow: rgba(0, 131, 126, 0.15);
}

#dlg_share .modal-content {
    border: none;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.22);
}

#dlg_share .modal-header {
    background: #004c4a;
    border-bottom: none;
    padding: 22px 28px 20px;
    position: relative;
}

#dlg_share .modal-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 60%);
    pointer-events: none;
}

#dlg_share .modal-header .modal-title {
    color: #fff;
    font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#dlg_share .modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.75;
    transition: opacity 0.2s;
}

#dlg_share .modal-header .btn-close:hover {
    opacity: 1;
}

#dlg_share .modal-body {
    padding: 28px 32px;
    background: #fff;
}

#dlg_share .sm-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 10px;
    display: block;
}

#dlg_share .sm-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 16px;
}

#dlg_share .sm-divider hr {
    flex: 1;
    margin: 0;
    border-color: #ebebeb;
}

#dlg_share .sm-divider span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #bbb;
    white-space: nowrap;
}

#dlg_share .sm-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#dlg_share .share_pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 80px;
    padding: 14px 12px 12px;
    border-radius: 14px !important;
    border: 1.5px solid #e8e8e8;
    background: #f9f9f9;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    flex: 1;
    user-select: none;
}

#dlg_share .share_pill svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    transition: transform 0.2s;
    color: #444;
    stroke: currentColor;
}

/* stroke-based icons (Email, SMS, Copy, Price, Comment, Video) */
#dlg_share .share_pill svg[stroke] {
    stroke: #444;
    fill: none;
}

/* fill-based icons (WhatsApp) */
#dlg_share .share_pill svg:not([stroke]),
#dlg_share [onclick*="whatsapp"] svg {
    fill: #444;
    stroke: none;
}

#dlg_share .share_pill .uppercase {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #555;
    transition: color 0.2s;
    line-height: 1;
}

#dlg_share .share_pill:hover {
    border-color: #004c4a;
    background: rgba(0, 125, 121, 0.15);
    transform: translateY(-2px);
}

#dlg_share .share_pill:hover svg {
    transform: scale(1.12);
    color: #004c4a;
}

#dlg_share .share_pill:hover svg[stroke] {
    stroke: #004c4a;
}

#dlg_share [onclick*="whatsapp"]:hover svg {
    fill: #25D366;
    stroke: none;
}

#dlg_share .share_pill.active,
.share_pill.active,
.share_pill.border-2 {
    border-color: #004c4a;
    background: rgba(0, 125, 121, 0.12);
    border-width: 2px;
}

#dlg_share .share_pill.active .uppercase,
#dlg_share .share_pill.border-2 .uppercase {
    color: #004c4a;
    font-weight: 800;
}

#dlg_share .share_pill.active svg[stroke],
#dlg_share .share_pill.border-2 svg[stroke] {
    stroke: #004c4a;
}




#dlg_share #shared_by,
#dlg_share #to_email,
#dlg_share #phone_number,
#dlg_share #share_comment,
#dlg_share .form-control,
#dlg_share .form-select {
    border: 1.5px solid #e0e0e0;
    border-radius: 10px !important;
    padding: 10px 14px;
    font-size: 13px;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
    background: #fafafa;
    color: #000;
}

#dlg_share #shared_by:focus,
#dlg_share #to_email:focus,
#dlg_share #phone_number:focus,
#dlg_share #share_comment:focus,
#dlg_share .form-control:focus,
#dlg_share .form-select:focus {
    border-color: var(--modal-h);
    box-shadow: 0 0 0 3px var(--modal-glow);
    background: #fff;
    outline: none;
    color: #000;
}

#dlg_share .table thead td {
    background: #004c4a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
    padding: 10px 12px;
}

#dlg_share .modal-footer {
    background: #f6f6f6;
    border-top: 1px solid #eee;
    padding: 16px 28px;
    gap: 10px;
}

#dlg_share .btn-secondary {
    background: transparent;
    border: 1.5px solid #d0d0d0;
    color: #666;
    border-radius: 10px !important;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 22px;
    transition: all 0.2s;
}

#dlg_share .btn-secondary:hover {
    background: #eee;
    border-color: #bbb;
    color: #333;
}

#dlg_share .btn-primary {
    background: #004c4a;
    border: none;
    border-radius: 10px !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.6px;
    padding: 9px 28px;
    transition:
        background 0.2s,
        box-shadow 0.2s,
        transform 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

#dlg_share .btn-primary:hover {
    background: #004d4b;
    box-shadow: 0 6px 18px var(--modal-glow);
    transform: translateY(-1px);
}

/* Responsive modal */
@media (max-width: 620px) {
    #dlg_share .modal-body {
        padding: 20px 18px;
    }

    #dlg_share .sm-pills {
        gap: 7px;
    }

    #dlg_share .share_pill {
        min-width: 60px;
        padding: 12px 8px;
        font-size: 9px;
    }
}

/* Loader CSS Starts */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: #00000050;
    pointer-events: none;
    z-index: 50000;
}

#loader:before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.sk-chase {
    width: 60px;
    height: 60px;
    position: relative;
    animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    animation: sk-chase-dot 2s infinite ease-in-out both;
}

.sk-chase-dot:before {
    content: "";
    display: block;
    width: 25%;
    height: 25%;
    background-color: #fff;
    border-radius: 100% !important;
    animation: sk-chase-dot-before 2s infinite ease-in-out both;
}

.sk-chase-dot:nth-child(1) {
    animation-delay: -1.1s;
}

.sk-chase-dot:nth-child(2) {
    animation-delay: -1s;
}

.sk-chase-dot:nth-child(3) {
    animation-delay: -0.9s;
}

.sk-chase-dot:nth-child(4) {
    animation-delay: -0.8s;
}

.sk-chase-dot:nth-child(5) {
    animation-delay: -0.7s;
}

.sk-chase-dot:nth-child(6) {
    animation-delay: -0.6s;
}

.sk-chase-dot:nth-child(1):before {
    animation-delay: -1.1s;
}

.sk-chase-dot:nth-child(2):before {
    animation-delay: -1s;
}

.sk-chase-dot:nth-child(3):before {
    animation-delay: -0.9s;
}

.sk-chase-dot:nth-child(4):before {
    animation-delay: -0.8s;
}

.sk-chase-dot:nth-child(5):before {
    animation-delay: -0.7s;
}

.sk-chase-dot:nth-child(6):before {
    animation-delay: -0.6s;
}

@keyframes sk-chase {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes sk-chase-dot {

    80%,
    100% {
        transform: rotate(360deg);
    }
}

@keyframes sk-chase-dot-before {
    50% {
        transform: scale(0.4);
    }

    100%,
    0% {
        transform: scale(1);
    }
}

/* Loader CSS Ends */

/* new added */
.interim-theme-natural .intl_btn {
    color: white;
    background-color: #007d79;
    border: 1px solid #007d79;
}

.intl_btn {
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
    letter-spacing: 1px;
    border-radius: 5px !important;
    font-size: 17px;
}

#list_bar {
    border: 1px solid #66666660;
    margin-bottom: 10px;
    padding: 10px 10px;
}

#list_bar {
    justify-content: space-between;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
}

#list_bar p {
    color: #161616;
    letter-spacing: 1px;
    font-size: 16px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.interim-theme-natural .theme_color {
    color: #007d79;
}

.location_btn,
.compare_btn,
.boost_btn {
    font-size: 14px;
    border: 1px solid #66666660;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 5px 16px;
    cursor: pointer;
    letter-spacing: 1px;
    white-space: nowrap;
    font-weight: 500;
    margin: 5px;
    display: inline-block;
    background-color: #007d79;
}

.boost_btn.selected {
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

.interim-theme-natural .boost_btn.selected {
    background-color: #007d79;
    color: white;
    border: 1px solid #007d79;
    font-weight: bold;
}

.location_btn,
.compare_btn,
.boost_btn {
    font-size: 14px;
    border: 1px solid #66666660;
    border-radius: 10px !important;
    color: #161616;
    padding: 5px 16px;
    cursor: pointer;
    letter-spacing: 1px;
    white-space: nowrap;
    font-weight: 500;
    margin: 5px;
    display: inline-block;
}

@media (min-width: 768px) {

    .location_btn,
    .compare_btn {
        font-size: 18px;
        padding: 10px 16px;
    }
}

.location_btn.selected {
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

.interim-theme-natural .location_btn.selected {
    background-color: #007d79 !important;
    color: white !important;
    border: 1px solid #007d79 !important;
}

.jew-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
}

@media (max-width: 1200px) {
    .jew-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .jew-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .jew-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

.srch-wrap {
    max-width: 95%;
}

.srch-header-left h2 {
    color: #00837e;
}

.srch-clear-all:hover {
    color: #b84444 !important;
    background-color: transparent !important;
}

#srch-clear-all-btn:hover {
    color: #b84444 !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

#srch-filter-count {
    text-transform: uppercase !important;
}

/* Share modal: force hidden toggle sections */
#dlg_share .whatsapp_fields.d-none,
#dlg_share .email_fields.d-none,
#dlg_share .price_fields.d-none,
#dlg_share #share_comment.d-none {
    display: none !important;
}

#dlg_share .whatsapp_fields,
#dlg_share .email_fields,
#dlg_share .price_fields {
    margin-top: 12px;
}

#dlg_share .price_fields label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 8px;
    display: block;
}

#dlg_share .share-btn-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

#dlg_share .share_actions {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}

.jew-desc {
    color: black;
}

.page-prefooter {
    color: black;
}

/* ----------------------------------
   Dynamic Metal Swatches
   ---------------------------------- */
.jew-metal-swatches {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.jew-metal-swatch {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    border: 2px solid #e2e8f0;
    font-size: 10px;
    font-weight: 700;
    color: #333;
    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
    cursor: pointer;
}

.jew-metal-swatch:hover {
    transform: scale(1.1);
    border-color: #cbd5e1;
    z-index: 2;
}

.jew-metal-swatch.selected {
    border-color: #00837e !important;
    /* Theme color */
    border-width: 2px;
    box-shadow: 0 0 0 2.5px rgba(0, 131, 126, 0.2);
    transform: scale(1.05);
    z-index: 1;
}

.jew-more-swatches {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    height: 32px;
    border-radius: 16px !important;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 11px;
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
}


.unit-toggle {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 20px !important;
    overflow: hidden;
    font-size: 12px;
    cursor: pointer;
}

.unit-label {
    padding: 3px 10px;
    background: #f5f5f5;
}

.unit-label.active {
    background: #00837e;
    color: #fff;
}

.disabled-card {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(0.5);
}
 
.jew-delivery {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4faf9;
    color: #007d79;
    padding: 8px 16px;
    border-radius: 50px !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 15px;
    margin-bottom: 12px;
    width: 100%;
    border: 1px solid rgba(0, 125, 121, 0.1);
}
 
.card-actions {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    gap: 10px;
}