)

<style>
  /* ── TOKENS ── */
  :root {
    --navy:      #0f1f3d;
    --navy2:     #162444;
    --blue:      #1d4ed8;
    --blue-lt:   #3b82f6;
    --gold:      #c9a96e;
    --gold-lt:   #e5c990;
    --gold-pale: #fdf6e9;
    --white:     #ffffff;
    --off:       #f8f9fb;
    --border:    #e8eaf0;
    --txt:       #111827;
    --txt2:      #6b7280;
    --txt3:      #9ca3af;
    --green:     #16a34a;
    --green-lt:  #dcfce7;
    --purple:    #7c3aed;
    --purple-lt: #ede9fe;
    --r:         14px;
    --r-sm:      8px;
    --shadow:    0 2px 16px rgba(15,31,61,0.08);
    --shadow-lg: 0 8px 40px rgba(15,31,61,0.14);

    /* ── CARATLANE-STYLE ACCENT SET (product page only) ── */
    --cl-purple:      #7b3fe4;
    --cl-purple-dark: #5b21b6;
    --cl-purple-lt:   #f2ecfd;
    --cl-gold:        #f4b942;
    --cl-gold-dark:   #b8860b;
    --cl-coral:       #f0506e;
    --cl-border:      #e9e6f0;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

  body {
    font-family: 'Josefin Sans', 'Helvetica Neue', sans-serif;
    background: var(--off);
    color: var(--txt);
    overflow-x: hidden;
  }

  /* ── PAGE WRAPPER ── */
  .pd-page {
    padding-top: 64px;
    min-height: 100vh;
    background: var(--off);
  }

  /* ── PAGE TITLE BLOCK ── */
  .pd-page-title-block {
    background: white;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* margin-top set dynamically by JS based on actual navbar height */
  }

  .pd-page-title-main {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--txt);
    line-height: 1.1;
  }

  .pd-page-title-sub {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--txt3);
    margin-top: 2px;
  }
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
  }

  .pd-topbar-back {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--off); border: 1px solid var(--border);
    border-radius: 50%; color: var(--txt); font-size: 15px;
    text-decoration: none; transition: all 0.2s;
    flex-shrink: 0;
  }

  .pd-topbar-title {
    text-align: center;
    flex: 1;
  }

  .pd-topbar-title-main {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 17px; font-weight: 700; color: var(--txt);
    line-height: 1.1;
  }

  .pd-topbar-title-sub {
    font-size: 9px; font-weight: 600; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--txt3);
    margin-top: 1px;
  }

  .pd-topbar-wish {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--off); border: 1px solid var(--border);
    border-radius: 50%; color: var(--txt2); font-size: 15px;
    cursor: pointer; transition: all 0.2s;
  }

  /* ── GALLERY ── */
  .pd-gallery {
    position: relative;
    background: white;
    overflow: hidden;
  }

  .pd-gallery-main {
    width: 100%;
    aspect-ratio: 10 / 7;
    max-height: 70vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
  }

  .pd-gallery-main img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: opacity 0.25s;
  }

  .pd-gallery-no-img {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; height: 100%;
    color: #bfdbfe;
  }

  .pd-gallery-no-img i { font-size: 64px; }
  .pd-gallery-no-img span {
    font-size: 11px; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--txt3);
  }

  /* Badge on gallery */
  .gallery-badge {
    position: absolute; top: 12px; left: 12px;
    background: var(--navy); color: white;
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px;
  }

  /* Thumbnails */
  .pd-thumbs {
    display: flex; gap: 8px; padding: 8px 0;
    overflow-x: auto; background: white;
    scrollbar-width: none;
  }
  .pd-thumbs::-webkit-scrollbar { display: none; }

  .pd-thumb {
    flex-shrink: 0;
    width: 60px; height: 60px;
    border: 2px solid var(--border);
    border-radius: 8px; overflow: hidden;
    cursor: pointer; transition: border-color 0.2s;
    position: relative;
  }
  .pd-thumb.active { border-color: var(--blue); }
  .pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .pd-thumb-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.55); color: white;
    font-size: 7px; font-weight: 700; text-align: center;
    padding: 2px 2px; letter-spacing: 0.04em;
  }

  /* ── TRUST STRIP ── */
  .trust-strip {
    display: flex; gap: 0;
    background: white;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow-x: auto; scrollbar-width: none;
  }
  .trust-strip::-webkit-scrollbar { display: none; }
  .trust-item {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px;
    font-size: 10px; color: var(--txt2);
    letter-spacing: 0.04em;
    border-right: 1px solid var(--border);
  }
  .trust-item:last-child { border-right: none; }
  .trust-item i { color: var(--green); font-size: 11px; }

  /* ── CONTENT SECTIONS ── */
  .pd-section {
    background: white;
    border-radius: var(--r);
    margin: 12px 12px 0;
    padding: 20px 16px;
    box-shadow: var(--shadow);
  }

  .pd-section:last-child { margin-bottom: 100px; }

  /* ── NAME / META ── */
  .pd-category-label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--blue-lt);
    margin-bottom: 6px;
  }

  .pd-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 26px; font-weight: 400; color: var(--txt);
    line-height: 1.15; margin-bottom: 8px;
  }

  .pd-meta-line {
    font-size: 11px; color: var(--txt3);
    letter-spacing: 0.06em; margin-bottom: 14px;
  }

  /* Reviews row */
  .pd-reviews-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
    padding-bottom: 16px; border-bottom: 1px solid var(--border);
  }

  .pd-stars { color: #f59e0b; font-size: 14px; letter-spacing: 1px; }
  .pd-review-count { font-size: 11px; color: var(--txt3); margin-left: 6px; }

  .pd-badges { display: flex; gap: 5px; flex-wrap: wrap; }
  .pd-badge {
    font-size: 8px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 3px 8px; border-radius: 20px;
  }
  .pd-badge-blue   { background: #dbeafe; color: #1d4ed8; }
  .pd-badge-green  { background: var(--green-lt); color: var(--green); }
  .pd-badge-yellow { background: #fef9c3; color: #854d0e; }

  /* ── PRICE BOX ── */
  .price-box {
    background: linear-gradient(135deg, #eff6ff, #e0f0fe);
    border: 1px solid #bfdbfe;
    border-radius: var(--r);
    padding: 16px;
    margin-bottom: 4px;
  }

  .price-label {
    font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--blue-lt); font-weight: 700; margin-bottom: 4px;
  }

  .price-value {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 36px; font-weight: 400; color: var(--navy);
    line-height: 1; margin-bottom: 12px;
  }

  .price-breakdown-toggle {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.7); border: 1px solid #bfdbfe;
    border-radius: 6px; padding: 7px 12px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--blue); cursor: pointer;
    width: 100%;
  }

  .breakdown-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; font-size: 12px;
    border-bottom: 1px solid #dbeafe;
  }
  .breakdown-row.total {
    border-top: 1px solid #bfdbfe; border-bottom: none;
    margin-top: 4px; padding-top: 10px; font-weight: 700;
    font-size: 13px;
  }
  .breakdown-row .key { color: var(--txt2); }
  .breakdown-row .val { color: var(--txt); }
  .breakdown-row.total .key,
  .breakdown-row.total .val { color: var(--navy); }

  /* ── VARIANTS ── */
  .section-label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--txt2);
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 12px;
  }
  .section-label i { color: var(--blue-lt); }

  .variant-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-bottom: 4px;
  }

  .variant-card {
    position: relative;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 12px;
    cursor: pointer;
    transition: all 0.18s;
    background: white;
    -webkit-tap-highlight-color: transparent;
  }
  .variant-card.selected {
    border-color: var(--blue);
    background: #f0f6ff;
  }

  .v-check {
    position: absolute; top: 8px; right: 8px;
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    background: white; transition: all 0.15s;
  }
  .variant-card.selected .v-check {
    border-color: var(--blue); background: var(--blue);
  }
  .variant-card.selected .v-check::after {
    content: '';
    width: 5px; height: 5px; border-radius: 50%;
    background: white; display: block;
  }

  .v-karat {
    font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
    padding: 2px 7px; border-radius: 4px; display: inline-block;
    margin-bottom: 5px;
    background: #f3f4f6; color: var(--txt);
  }
  .variant-card.selected .v-karat { background: #dbeafe; color: var(--blue); }

  .v-gold-info { font-size: 10px; color: var(--txt2); margin-bottom: 4px; }
  .v-price {
    font-size: 16px; font-weight: 700; color: var(--txt);
    line-height: 1; margin-bottom: 6px;
  }
  .variant-card.selected .v-price { color: var(--navy); }

  .v-in-store {
    font-size: 8px; font-weight: 700;
    padding: 2px 6px; border-radius: 4px;
    background: var(--green-lt); color: var(--green);
    display: inline-block; margin-bottom: 5px;
    letter-spacing: 0.04em;
  }

  .v-diamonds { display: flex; flex-wrap: wrap; gap: 3px; }
  .v-diamond-tag {
    font-size: 8px; color: var(--purple);
    background: var(--purple-lt); padding: 2px 6px;
    border-radius: 6px;
  }

  /* ── SIZES ── */
  .size-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .sz-pill {
    font-size: 12px; border: 1.5px solid var(--border);
    border-radius: 20px; padding: 7px 16px;
    color: var(--txt3); cursor: pointer;
    transition: all 0.15s; background: white;
    font-weight: 400; letter-spacing: 0.04em;
    -webkit-tap-highlight-color: transparent;
  }
  .sz-pill.available { border-color: var(--green); background: #f0fdf4; color: var(--green); font-weight: 600; }
  .sz-pill.selected  { border-color: var(--blue); background: #dbeafe; color: var(--blue); font-weight: 700; }

  /* ── ACTION BUTTONS ── */
  .pd-actions {
    display: flex; gap: 10px;
    margin-top: 20px;
  }

  .btn-cart {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 15px; background: var(--navy);
    color: white; border: none; border-radius: var(--r-sm);
    font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; cursor: pointer;
    transition: all 0.2s; font-family: 'Josefin Sans', sans-serif;
  }
  .btn-cart:active { background: #0a1628; transform: scale(0.98); }

  .btn-buy {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 15px;
    background: linear-gradient(135deg, #c9a96e, #a07c3d);
    color: white; border: none; border-radius: var(--r-sm);
    font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; cursor: pointer;
    transition: all 0.2s; font-family: 'Josefin Sans', sans-serif;
  }
  .btn-buy:active { transform: scale(0.98); }

  /* ── DELIVERY INFO ── */
  .delivery-row {
    display: flex; align-items: center; gap: 12px;
    font-size: 12px; color: var(--txt2);
    padding: 9px 0; border-bottom: 1px solid var(--border);
  }
  .delivery-row:last-child { border-bottom: none; padding-bottom: 0; }
  .delivery-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 13px;
  }

  /* ── DESCRIPTION ── */
  .pd-desc {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 16px; color: var(--txt2);
    line-height: 1.85;
  }

  /* ── RELATED ── */
  .related-scroll {
    display: flex; gap: 12px;
    overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px;
  }
  .related-scroll::-webkit-scrollbar { display: none; }

  .related-card {
    flex-shrink: 0; width: 160px;
    background: white; border: 1px solid var(--border);
    border-radius: var(--r); overflow: hidden;
    text-decoration: none; display: block;
    transition: transform 0.2s;
  }
  .related-card:active { transform: scale(0.97); }
  .related-card-img {
    width: 100%; aspect-ratio: 1;
    background: #f3f4f6; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .related-card-img img { width: 100%; height: 100%; object-fit: cover; }
  .related-card-body { padding: 10px; }
  .related-cat {
    font-size: 8px; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--blue-lt);
    margin-bottom: 3px;
  }
  .related-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 14px; color: var(--txt); margin-bottom: 4px;
    line-height: 1.25;
  }
  .related-price { font-size: 13px; font-weight: 700; color: var(--blue); }

  /* ── SECTION DIVIDER LABEL ── */
  .section-eyebrow {
    font-size: 9px; font-weight: 700; letter-spacing: 0.25em;
    text-transform: uppercase; color: var(--blue-lt);
    margin-bottom: 4px;
  }
  .section-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px; font-weight: 400; color: var(--txt);
    margin-bottom: 16px;
  }

  /* ══════════════════════════════════════════
     CARATLANE-STYLE COMPONENTS
  ══════════════════════════════════════════ */

  /* Spec chip row (Size / Metal / Diamond style) */
  .cl-spec-row { display: flex; gap: 8px; align-items: stretch; }
  .cl-spec-chip {
    flex: 1; border: 1.5px solid var(--cl-border); border-radius: var(--r-sm);
    padding: 8px 10px; text-align: center; background: white;
  }
  .cl-spec-chip .cl-spec-label { font-size: 9px; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; }
  .cl-spec-chip .cl-spec-value { font-size: 12px; font-weight: 700; color: var(--txt); }
  .cl-customise-btn {
    flex: 0 0 auto; border: none; border-radius: var(--r-sm);
    background: var(--cl-gold); color: #4a2f00; font-weight: 800;
    font-size: 11px; letter-spacing: 0.08em; padding: 8px 16px;
    cursor: pointer; text-transform: uppercase;
  }

  /* Segmented pill control — for Gold Quality / Gold Color */
  .cl-segment-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .cl-segment-btn {
    flex: 1 1 auto; min-width: 54px; text-align: center;
    border: 1.5px solid var(--cl-border); border-radius: 20px;
    padding: 8px 10px; font-size: 12px; font-weight: 600;
    color: var(--txt2); background: white; cursor: pointer;
    transition: all 0.15s; -webkit-tap-highlight-color: transparent;
  }
  .cl-segment-btn.active {
    border-color: var(--cl-purple); background: var(--cl-purple-lt);
    color: var(--cl-purple-dark); font-weight: 800;
  }

  /* Collapsible customise fields */
  .cl-customise-btn { display: inline-flex; align-items: center; gap: 6px; }
  .cl-customise-btn .cl-chevron { transition: transform 0.2s; font-size: 10px; }
  .cl-customise-btn.open .cl-chevron { transform: rotate(180deg); }
  .cl-customise-fields { display: none; margin-top: 14px; }
  .cl-customise-fields.open { display: block; }

  /* Add to bag (purple gradient, caratlane-style) */
  .cl-add-to-bag {
    background: linear-gradient(135deg, var(--cl-purple), var(--cl-purple-dark));
    color: white; border: none; border-radius: var(--r-sm);
    font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    font-size: 12px; cursor: pointer; transition: opacity .2s;
    font-family: 'Josefin Sans', sans-serif;
  }
  .cl-add-to-bag:active { opacity: 0.85; }
  .cl-icon-btn {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--cl-border); border-radius: var(--r-sm);
    background: white; color: var(--txt2); cursor: pointer;
  }

  /* Delivery / stores card (caratlane-style boxed rows) */
  .cl-info-card {
    border: 1.5px solid var(--cl-border); border-radius: var(--r-sm);
    padding: 12px 14px; display: flex; align-items: center; gap: 12px;
    margin-bottom: 10px; background: white;
  }
  .cl-info-card:last-child { margin-bottom: 0; }
  .cl-info-card .cl-info-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; }
  .cl-info-card .cl-info-title { font-size: 13px; font-weight: 700; color: var(--txt); }
  .cl-info-card .cl-info-sub { font-size: 11px; color: var(--txt3); margin-top: 2px; }

  /* Product Details tabs (caratlane-style) */
  .cl-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
  .cl-tab-btn {
    flex: 1; padding: 11px; border-radius: var(--r-sm);
    border: 1.5px solid var(--cl-border); background: white;
    font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--txt2); cursor: pointer;
  }
  .cl-tab-btn.active { background: var(--cl-purple-lt); border-color: var(--cl-purple); color: var(--cl-purple-dark); }
  .cl-tab-panel { display: none; }
  .cl-tab-panel.active { display: block; }

  .cl-spec-box {
    border: 1.5px solid var(--cl-border); border-radius: var(--r-sm);
    padding: 14px 16px;
  }
  .cl-spec-box .cl-spec-box-title {
    font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--cl-purple-dark);
    margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
  }
  .cl-spec-box .cl-spec-box-row { font-size: 13px; color: var(--txt); line-height: 1.7; }

  .cl-breakup-row {
    display: flex; justify-content: space-between; padding: 9px 0;
    font-size: 13px; border-bottom: 1px solid var(--cl-border); color: var(--txt2);
  }
  .cl-breakup-row.total { border-bottom: none; border-top: 1.5px solid var(--cl-border); margin-top: 4px; padding-top: 12px; font-weight: 800; color: var(--txt); }

  /* Certification strip */
  .cl-cert-strip { display: flex; justify-content: space-around; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--cl-border); }
  .cl-cert-item { text-align: center; flex: 1; }
  .cl-cert-item i { font-size: 22px; color: var(--cl-purple); margin-bottom: 6px; display: block; }
  .cl-cert-item span { font-size: 10px; color: var(--txt2); font-weight: 700; display: block; }
  .cl-cert-item small { font-size: 9px; color: var(--txt3); }

  /* Inline customer reviews (caratlane-style) */
  .cl-review-summary { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
  .cl-review-score { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 40px; font-weight: 700; color: var(--txt); line-height: 1; }
  .cl-write-review-btn {
    background: var(--cl-purple-lt); color: var(--cl-purple-dark);
    border: 1.5px solid var(--cl-purple); border-radius: var(--r-sm);
    font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 9px 16px; cursor: pointer;
  }
  .cl-review-item { border-top: 1px solid var(--cl-border); padding: 14px 0; }
  .cl-review-item:first-child { border-top: none; }

  /* Hide desktop layout on mobile */
  @media (min-width: 769px) {
    .pd-mobile-only { display: none !important; }
    /* Restore desktop layout from original */
    .product-detail-main { display: grid !important; grid-template-columns: 50% 48% !important; gap: 2% !important; }
  }

  @media (max-width: 1024px) and (min-width: 769px) {
    .product-detail-main { grid-template-columns: 52% 44% !important; gap: 4% !important; }
    .product-info-col { padding: 1rem !important; }
  }
  /* Mobile-only adjustments */
  @media (max-width: 768px) {
    .pd-desktop-only { display: none !important; }
    .pd-mobile-only  { display: block !important; }
    .pd-actions      { display: flex !important; }
  }
</style>


<div class="pd-mobile-only">

  

  <div class="pd-page">

    
    <div class="pd-page-title-block">
      <div>
        <div class="pd-page-title-main">Product Details</div>
        <div class="pd-page-title-sub">Stud Earrings</div>
      </div>
      <button class="pd-topbar-wish wishlist-toggle" onclick="toggleWishlist()"><i class="fa-regular fa-heart"></i></button>
    </div>

    
    <div class="pd-gallery">
      
      <div class="pd-gallery-main">
        <video id="mob-gallery-video" style="display:none;width:100%;height:100%;object-fit:cover" controls muted playsinline></video>
                  <img id="mob-gallery-main" src="https://amantranjewels.in/storage/products/4726/E8PehwWDp588UMe9uPettYtHSFrn2DR4ectyq94X.png" alt="Stud Earrings">
              </div>

              <div class="gallery-badge">Bestseller</div>
      
      
      
            <div style="display:flex;align-items:center;gap:6px;padding:0 1rem">
        <div class="pd-thumbs" style="flex:1">
                <div class="pd-thumb active"
             onclick="mobSetMedia('https://amantranjewels.in/storage/products/4726/E8PehwWDp588UMe9uPettYtHSFrn2DR4ectyq94X.webp','product',this)">
                      <img src="https://amantranjewels.in/storage/products/4726/E8PehwWDp588UMe9uPettYtHSFrn2DR4ectyq94X.webp" alt="">
                                      </div>
                <div class="pd-thumb "
             onclick="mobSetMedia('https://amantranjewels.in/storage/products/4726/BOa8JM1wG7ofZCkd3U1OQhCPVvESsIMXuyX6wzja.webp','product',this)">
                      <img src="https://amantranjewels.in/storage/products/4726/BOa8JM1wG7ofZCkd3U1OQhCPVvESsIMXuyX6wzja.webp" alt="">
                                      </div>
                <div class="pd-thumb "
             onclick="mobSetMedia('https://amantranjewels.in/storage/products/4726/ozew6RQaH5C8ahCOSO85IBk49Fc0LatcZzHMKwpz.webp','product',this)">
                      <img src="https://amantranjewels.in/storage/products/4726/ozew6RQaH5C8ahCOSO85IBk49Fc0LatcZzHMKwpz.webp" alt="">
                                      </div>
                </div>
      </div>
          </div>

    
    <div class="trust-strip">
            <div class="trust-item">
        <i class="fas fa-check-circle"></i> SGL Certified
      </div>
            <div class="trust-item">
        <i class="fas fa-check-circle"></i> BIS Hallmarked
      </div>
            <div class="trust-item">
        <i class="fas fa-check-circle"></i> Conflict Free
      </div>
            <div class="trust-item">
        <i class="fas fa-check-circle"></i> 80% Buyback &amp; Lifetime Exchange
      </div>
          </div>

    
    <div class="pd-section">
      <div class="pd-category-label">Earrings</div>
      <h1 class="pd-name">Stud Earrings</h1>
      <p class="pd-meta-line" id="mob-variant-meta">
        9KT · VVS-DEF · 0.006ct · Round Brilliant
      </p>
      <div class="pd-reviews-row">
        <div style="display:flex;align-items:center;">
          <span class="pd-stars">
                           ☆                            ☆                            ☆                            ☆                            ☆                       </span>
          <span class="pd-review-count" onclick="document.getElementById('reviews-modal').style.display='flex'" style="cursor:pointer;text-decoration:underline">0.0 · 0 reviews</span>
        </div>
        <div class="pd-badges">
          <span class="pd-badge pd-badge-blue">Diamond</span>
          <span class="pd-badge pd-badge-green">SGL Certified</span>
                      <span class="pd-badge pd-badge-yellow">Bestseller</span>
                  </div>
      </div>

      
                </div>

    
    <div class="pd-section">
      <div class="cl-spec-row">
                <div class="cl-spec-chip">
          <div class="cl-spec-label">Metal</div>
          <div class="cl-spec-value" id="mob-cl-spec-metal">9KT</div>
        </div>
        <div class="cl-spec-chip">
          <div class="cl-spec-label">Diamond</div>
          <div class="cl-spec-value" id="mob-cl-spec-diamond">VVS-DEF</div>
        </div>
        <button type="button" class="cl-customise-btn" id="mob-customise-btn" onclick="clToggleCustomise('mob-customise-fields', this)">Customise <i class="fas fa-chevron-down cl-chevron"></i></button>
      </div>

      
      <div id="mob-customise-fields" class="cl-customise-fields" style="margin-top:16px">
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.85rem">
        <div>
          <label style="display:block;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#6b7280;margin-bottom:0.35rem">Diamond Type</label>
          <select class="amj-diamond-type" onchange="amjSync(this)" style="width:100%;padding:0.6rem 0.7rem;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;background:white">
            <option value="CVD" selected>CVD</option><option value="Natural" >Natural</option>          </select>
        </div>
        <div>
          <label style="display:block;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#6b7280;margin-bottom:0.35rem">Diamond Quality</label>
          <select class="amj-clarity-grade" onchange="amjSync(this)" style="width:100%;padding:0.6rem 0.7rem;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;background:white">
                                        <option value="VVS-DEF" data-type="CVD" selected>VVS-DEF</option>
                            <option value="VVS-VS DEF" data-type="CVD" >VVS-VS DEF</option>
                            <option value="VVS-VS" data-type="CVD" >VVS-VS</option>
                                                      <option value="VS/DEF" data-type="Natural" >VS/DEF</option>
                            <option value="VVS-DEF" data-type="Natural" >VVS-DEF</option>
                                    </select>
        </div>
      </div>

      <div style="margin-top:0.85rem">
        <label style="display:block;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#6b7280;margin-bottom:0.4rem">Gold Quality</label>
        <select class="amj-gold-type" style="display:none">
                            <option value="5" selected>9K</option>
                            <option value="4" >14K</option>
                            <option value="3" >18K</option>
                    </select>
        <div class="cl-segment-row">
                    <button type="button" class="cl-segment-btn active" onclick="clSetSegment('amj-gold-type','5',this)">9K</button>
                    <button type="button" class="cl-segment-btn " onclick="clSetSegment('amj-gold-type','4',this)">14K</button>
                    <button type="button" class="cl-segment-btn " onclick="clSetSegment('amj-gold-type','3',this)">18K</button>
                  </div>
      </div>

      <div style="margin-top:0.85rem">
        <label style="display:block;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#6b7280;margin-bottom:0.4rem">Gold Color</label>
        <select class="amj-gold-color" style="display:none">
          <option value="yellow">Yellow Gold</option>
          <option value="white">White Gold</option>
          <option value="rose">Rose Gold</option>
        </select>
        <div class="cl-segment-row">
          <button type="button" class="cl-segment-btn active" onclick="clSetSegment('amj-gold-color','yellow',this)">Yellow Gold</button>
          <button type="button" class="cl-segment-btn" onclick="clSetSegment('amj-gold-color','white',this)">White Gold</button>
          <button type="button" class="cl-segment-btn" onclick="clSetSegment('amj-gold-color','rose',this)">Rose Gold</button>
        </div>
      </div>
      </div>
      
      
      
      <div id="mob-size-weight-info" style="display:none;margin-top:10px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:10px 14px;">
        <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px">
          <div style="font-size:10px;font-weight:700;color:#1e3a8a">SIZE: <span id="mob-size-label" style="color:#1d4ed8"></span></div>
          <div style="font-size:10px;font-weight:700;color:#1e3a8a">PRICE: <span id="mob-size-price" style="color:#1d4ed8"></span></div>
        </div>
      </div>

      
      <div style="margin-top:20px;display:flex;gap:10px">
        <button class="cl-add-to-bag" onclick="openInquiryModal()" id="mob-atc-btn" style="flex:1;padding:15px;display:flex;align-items:center;justify-content:center;gap:8px">
          <i class="fa-regular fa-envelope"></i> Enquire Now
        </button>
        <button class="wishlist-toggle cl-icon-btn" onclick="toggleWishlist()"><i class="fa-regular fa-heart"></i></button>
      </div>

    </div>

    
    <div class="pd-section">
      <div class="section-label"><i class="fas fa-truck"></i> Delivery & Care</div>
            <div class="cl-info-card">
        <i class="fas fa-truck cl-info-icon" style="color:var(--cl-purple)"></i>
        <div class="cl-info-title" style="font-size:12px">Insured shipping on all orders</div>
      </div>
            <div class="cl-info-card">
        <i class="fas fa-rotate-left cl-info-icon" style="color:var(--cl-purple)"></i>
        <div class="cl-info-title" style="font-size:12px">80% Buyback &amp; Lifetime Exchange</div>
      </div>
            <div class="cl-info-card">
        <i class="fas fa-shield-halved cl-info-icon" style="color:var(--cl-purple)"></i>
        <div class="cl-info-title" style="font-size:12px">BIS Hallmarked &amp; Certified Purity</div>
      </div>
            <div class="cl-info-card">
        <i class="fas fa-box cl-info-icon" style="color:var(--cl-purple)"></i>
        <div class="cl-info-title" style="font-size:12px">Delivered in 5–7 business days</div>
      </div>
            <div class="cl-cert-strip">
        <div class="cl-cert-item"><i class="fas fa-award"></i><span>BIS Hallmarked</span></div>
        <div class="cl-cert-item"><i class="fas fa-gem"></i><span>SGL Certified</span></div>
        <div class="cl-cert-item"><i class="fas fa-check-circle"></i><span>100% Certified</span></div>
      </div>
    </div>

    
        <div class="pd-section">
      <div class="section-label"><i class="fas fa-gem"></i> Product Details</div>
      <div style="font-size:11px;color:var(--txt3);margin-bottom:0.75rem">SKU: APNE 1846</div>
            <p class="pd-desc" style="margin-bottom:1rem">Stud earrings are classic and elegant jewelry pieces designed with a small decorative element that sits directly on the earlobe. Known for their simple and versatile style, stud earrings can feature diamonds, gemstones, pearls, gold, silver, or unique designs. Perfect for everyday wear as well as special occasions, they offer a timeless look that adds subtle sophistication and charm to any outfit.</p>
          </div>
    
    
    
    
        <div class="pd-section">
      <div class="section-eyebrow">You May Also Like</div>
      <div class="section-heading">Similar Pieces</div>
      <div class="related-scroll">
                        <a href="/products/test-celestial-drops-7Jb9" class="related-card">
          <div class="related-card-img">
                          <img src="https://amantranjewels.in/storage/products/4840/v45q4m6RiyI0qHhJaKpWe6QhuBmxFjD7S11cK0sa.png" alt="TEST Celestial Drops">
                      </div>
          <div class="related-card-body">
            <div class="related-cat">Earrings</div>
            <div class="related-name">TEST Celestial Drops</div>
            <div class="related-price">₹ 69,546.60/-</div>
          </div>
        </a>
                        <a href="/products/diamond-aura-earring-RUPm" class="related-card">
          <div class="related-card-img">
                          <img src="https://amantranjewels.in/storage/products/4717/K9LhuUS8ob4kzjKRgM4vjrgKq2iqhKG68UAzEaOd.webp" alt="Diamond Aura Earring">
                      </div>
          <div class="related-card-body">
            <div class="related-cat">Earrings</div>
            <div class="related-name">Diamond Aura Earring</div>
            <div class="related-price">₹ 46,364.40/-</div>
          </div>
        </a>
              </div>
    </div>
    
  </div>

  

</div>



<div class="pd-desktop-only">
<div style="padding-top:90px;background:#f8f9fb;min-height:100vh">
<div class="container" style="padding-top:1rem;padding-bottom:2rem">

  
  <div style="display:flex;align-items:center;gap:0.5rem;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#9ca3af;margin-bottom:1.75rem;flex-wrap:wrap">
    <a href="/" style="color:#9ca3af;text-decoration:none" onmouseover="this.style.color='#374151'" onmouseout="this.style.color='#9ca3af'">Home</a>
    <span>/</span>
    <a href="/products" style="color:#9ca3af;text-decoration:none" onmouseover="this.style.color='#374151'" onmouseout="this.style.color='#9ca3af'">Collections</a>
    <span>/</span>
    <a href="/products?cat=earrings" style="color:#9ca3af;text-decoration:none">Earrings</a>
    <span>/</span>
    <span style="color:#374151;font-weight:600">Stud Earrings</span>
  </div>

  <div class="product-detail-main" style="display:grid;grid-template-columns:50% 48%;gap:2%;align-items:start">

    
    <div style="position:sticky;top:90px;align-self:flex-start">
      <div style="aspect-ratio:1;background:white;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,0.06)">
                          <img id="gallery-main" src="https://amantranjewels.in/storage/products/4726/E8PehwWDp588UMe9uPettYtHSFrn2DR4ectyq94X.png" alt="Stud Earrings" style="width:100%;height:100%;object-fit:cover">
          <video id="gallery-main-video" style="display:none;width:100%;height:100%;object-fit:cover" controls playsinline></video>
              </div>
            <div style="display:flex;align-items:center;gap:0.5rem;margin-top:0.75rem">
        <button onclick="scrollThumbs(-1)" style="flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid #e5e7eb;background:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:#6b7280">&#8249;</button>
        <div id="thumb-track" style="display:flex;gap:0.5rem;overflow-x:scroll;scrollbar-width:none;width:calc(7*64px + 6*0.5rem);flex-shrink:0">
                <div class="thumb-btn" onclick="setMainImage('https://amantranjewels.in/storage/products/4726/E8PehwWDp588UMe9uPettYtHSFrn2DR4ectyq94X.webp',this,'product')"
             style="flex-shrink:0;width:64px;height:64px;border:2px solid #2563eb;border-radius:8px;overflow:hidden;cursor:pointer;transition:border-color 0.2s;position:relative">
                      <img src="https://amantranjewels.in/storage/products/4726/E8PehwWDp588UMe9uPettYtHSFrn2DR4ectyq94X.webp" style="width:100%;height:100%;object-fit:cover" alt="">
                                      </div>
                <div class="thumb-btn" onclick="setMainImage('https://amantranjewels.in/storage/products/4726/BOa8JM1wG7ofZCkd3U1OQhCPVvESsIMXuyX6wzja.webp',this,'product')"
             style="flex-shrink:0;width:64px;height:64px;border:2px solid #e5e7eb;border-radius:8px;overflow:hidden;cursor:pointer;transition:border-color 0.2s;position:relative">
                      <img src="https://amantranjewels.in/storage/products/4726/BOa8JM1wG7ofZCkd3U1OQhCPVvESsIMXuyX6wzja.webp" style="width:100%;height:100%;object-fit:cover" alt="">
                                      </div>
                <div class="thumb-btn" onclick="setMainImage('https://amantranjewels.in/storage/products/4726/ozew6RQaH5C8ahCOSO85IBk49Fc0LatcZzHMKwpz.webp',this,'product')"
             style="flex-shrink:0;width:64px;height:64px;border:2px solid #e5e7eb;border-radius:8px;overflow:hidden;cursor:pointer;transition:border-color 0.2s;position:relative">
                      <img src="https://amantranjewels.in/storage/products/4726/ozew6RQaH5C8ahCOSO85IBk49Fc0LatcZzHMKwpz.webp" style="width:100%;height:100%;object-fit:cover" alt="">
                                      </div>
                </div>
        <button onclick="scrollThumbs(1)" style="flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid #e5e7eb;background:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:#6b7280">&#8250;</button>
      </div>
          </div>

    
    <div class="product-info-col" style="background:white;padding:2rem;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 4px 20px rgba(0,0,0,0.06);position:sticky;top:90px;max-height:calc(100vh - 110px);overflow-y:auto;align-self:flex-start">
      <h1 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:2.3rem;font-weight:400;color:#111827;margin-bottom:0.4rem;line-height:1.15">Stud Earrings</h1>
      <p style="font-size:12px;color:#9ca3af;margin-bottom:1rem;letter-spacing:0.08em">
        <span id="variant-meta">9KT · VVS-DEF · 0.006ct · Round Brilliant</span>
      </p>
      <div style="display:flex;align-items:center;justify-content:space-between;gap:0.5rem;margin-bottom:1.5rem;flex-wrap:wrap">
        <div style="display:flex;align-items:center;gap:0.5rem">
          <span style="color:#f59e0b;font-size:15px">  ☆    ☆    ☆    ☆    ☆  </span>
          <span style="font-size:12px;color:#9ca3af;cursor:pointer;text-decoration:underline" onclick="document.getElementById('reviews-modal').style.display='flex'">0.0 · 0 reviews</span>
        </div>
        <div style="display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap">
          <span style="background:#dbeafe;color:#1d4ed8;padding:0.2rem 0.65rem;border-radius:20px;font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase">Diamond</span>
          <span style="background:#dcfce7;color:#15803d;padding:0.2rem 0.65rem;border-radius:20px;font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase">SGL Certified</span>
          <span style="background:#fef9c3;color:#854d0e;padding:0.2rem 0.65rem;border-radius:20px;font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase">Bestseller</span>        </div>
      </div>
      
      
      <div style="margin-bottom:1.75rem">
        
        <div style="margin-bottom:1.25rem;border:1.5px solid #ebe6ff;border-radius:20px;box-shadow:0 4px 24px rgba(124,62,212,0.10);background:white">

          
          
          
          <div id="breakdown-rows" style="display:none;padding:0 1.25rem 1.25rem;border-top:1px solid #f0eeff">
                                    <div style="display:flex;justify-content:space-between;align-items:center;padding:0.7rem 0;border-bottom:1px solid #f3f0ff;font-size:13px">
              <span style="color:#6b7280">Gold (9KT · 3g @ ₹6002.33/g)</span>
              <span style="font-weight:600;color:#374151">₹18,006.99</span>
            </div>
                                                <div style="display:flex;justify-content:space-between;align-items:center;padding:0.7rem 0;border-bottom:1px solid #f3f0ff;font-size:13px">
              <span style="color:#6b7280">Diamond (0.216ct · 36 stones)</span>
              <span style="font-weight:600;color:#374151">₹0.00</span>
            </div>
                                                <div style="display:flex;justify-content:space-between;align-items:center;padding:0.7rem 0;border-bottom:1px solid #f3f0ff;font-size:13px">
              <span style="color:#6b7280">Making (Fixed)</span>
              <span style="font-weight:600;color:#374151">₹4,500.00</span>
            </div>
                                                <div style="display:flex;justify-content:space-between;align-items:center;padding:0.7rem 0;border-bottom:1px solid #f3f0ff;font-size:13px">
              <span style="color:#6b7280">GST (3%)</span>
              <span style="font-weight:600;color:#374151">₹675.21</span>
            </div>
                                                                                    <div style="display:flex;justify-content:space-between;align-items:center;padding:0.85rem 0;font-size:15px;font-weight:800;border-bottom:1.5px solid #ede9ff">
              <span style="color:#1a1a2e">Total</span>
              <span style="color:var(--cl-purple-dark)">₹23,182.20</span>
            </div>
                                  </div>

        </div>

        
        <div class="cl-spec-row" style="margin-bottom:1.25rem">
                    <div class="cl-spec-chip">
            <div class="cl-spec-label">Metal</div>
            <div class="cl-spec-value" id="cl-spec-metal">9KT</div>
          </div>
          <div class="cl-spec-chip">
            <div class="cl-spec-label">Diamond</div>
            <div class="cl-spec-value" id="cl-spec-diamond">VVS-DEF</div>
          </div>
          <button type="button" class="cl-customise-btn" id="cl-customise-btn" onclick="clToggleCustomise('cl-customise-fields', this)">Customise <i class="fas fa-chevron-down cl-chevron"></i></button>
        </div>

        <div id="cl-customise-panel" style="margin-bottom:1.25rem">
          <div id="cl-customise-fields" class="cl-customise-fields">
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.85rem">
            <div>
              <label style="display:block;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#6b7280;margin-bottom:0.35rem">Diamond Type</label>
              <select class="amj-diamond-type" onchange="amjSync(this)" style="width:100%;padding:0.6rem 0.7rem;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;background:white">
                <option value="CVD" selected>CVD</option><option value="Natural" >Natural</option>              </select>
            </div>
            <div>
              <label style="display:block;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#6b7280;margin-bottom:0.35rem">Diamond Quality</label>
              <select class="amj-clarity-grade" onchange="amjSync(this)" style="width:100%;padding:0.6rem 0.7rem;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;background:white">
                                            <option value="VVS-DEF" data-type="CVD" selected>VVS-DEF</option>
                            <option value="VVS-VS DEF" data-type="CVD" >VVS-VS DEF</option>
                            <option value="VVS-VS" data-type="CVD" >VVS-VS</option>
                                                      <option value="VS/DEF" data-type="Natural" >VS/DEF</option>
                            <option value="VVS-DEF" data-type="Natural" >VVS-DEF</option>
                                        </select>
            </div>
          </div>

          <div style="margin-top:0.85rem">
            <label style="display:block;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#6b7280;margin-bottom:0.4rem">Gold Quality</label>
            <select class="amj-gold-type" style="display:none">
                            <option value="5" selected>9K</option>
                            <option value="4" >14K</option>
                            <option value="3" >18K</option>
                            </select>
            <div class="cl-segment-row">
                            <button type="button" class="cl-segment-btn active" onclick="clSetSegment('amj-gold-type','5',this)">9K</button>
                            <button type="button" class="cl-segment-btn " onclick="clSetSegment('amj-gold-type','4',this)">14K</button>
                            <button type="button" class="cl-segment-btn " onclick="clSetSegment('amj-gold-type','3',this)">18K</button>
                          </div>
          </div>

          <div style="margin-top:0.85rem">
            <label style="display:block;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#6b7280;margin-bottom:0.4rem">Gold Color</label>
            <select class="amj-gold-color" style="display:none">
              <option value="yellow">Yellow Gold</option>
              <option value="white">White Gold</option>
              <option value="rose">Rose Gold</option>
            </select>
            <div class="cl-segment-row">
              <button type="button" class="cl-segment-btn active" onclick="clSetSegment('amj-gold-color','yellow',this)">Yellow Gold</button>
              <button type="button" class="cl-segment-btn" onclick="clSetSegment('amj-gold-color','white',this)">White Gold</button>
              <button type="button" class="cl-segment-btn" onclick="clSetSegment('amj-gold-color','rose',this)">Rose Gold</button>
            </div>
          </div>
          </div>
                  </div>
      </div>
      <div style="display:flex;gap:0.75rem;margin-bottom:1.25rem">
        <button onclick="openInquiryModal()" id="atc-btn" class="cl-add-to-bag" style="flex:1;display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;padding:1rem 1.5rem;"><i class="fa-regular fa-envelope"></i> Enquire Now</button>
        <button class="wishlist-toggle cl-icon-btn" onclick="toggleWishlist()" style="width:52px;height:auto;border-radius:10px"><i class="fa-regular fa-heart"></i></button>
      </div>

      
      <div style="margin-bottom:0.5rem">
        <div class="section-label" style="margin-bottom:0.85rem">Delivery & Care</div>
                <div class="cl-info-card">
          <i class="fas fa-truck cl-info-icon" style="color:var(--cl-purple)"></i>
          <div class="cl-info-title" style="font-size:12px">Insured shipping on all orders</div>
        </div>
                <div class="cl-info-card">
          <i class="fas fa-rotate-left cl-info-icon" style="color:var(--cl-purple)"></i>
          <div class="cl-info-title" style="font-size:12px">80% Buyback &amp; Lifetime Exchange</div>
        </div>
                <div class="cl-info-card">
          <i class="fas fa-shield-halved cl-info-icon" style="color:var(--cl-purple)"></i>
          <div class="cl-info-title" style="font-size:12px">BIS Hallmarked &amp; Certified Purity</div>
        </div>
                <div class="cl-info-card">
          <i class="fas fa-box cl-info-icon" style="color:var(--cl-purple)"></i>
          <div class="cl-info-title" style="font-size:12px">Delivered in 5–7 business days</div>
        </div>
              </div>

      <div class="cl-cert-strip">
        <div class="cl-cert-item"><i class="fas fa-award"></i><span>BIS Hallmarked</span><small>Certified purity</small></div>
        <div class="cl-cert-item"><i class="fas fa-gem"></i><span>SGL Certified</span><small>Diamond assurance</small></div>
        <div class="cl-cert-item"><i class="fas fa-check-circle"></i><span>100% Certified</span><small>By Amantran</small></div>
      </div>
    </div>
  </div>

  
    <div style="background:white;border:1px solid var(--cl-border);border-radius:16px;padding:2.5rem;margin-top:2.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.04)">
    <h3 style="font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:400;margin-bottom:0.5rem;color:#111827">Product Details</h3>
    <div style="font-size:11px;color:var(--txt3);margin-bottom:1.25rem">SKU: APNE 1846</div>
        <p style="color:#6b7280;line-height:2;font-size:14px;margin-bottom:1.5rem">Stud earrings are classic and elegant jewelry pieces designed with a small decorative element that sits directly on the earlobe. Known for their simple and versatile style, stud earrings can feature diamonds, gemstones, pearls, gold, silver, or unique designs. Perfect for everyday wear as well as special occasions, they offer a timeless look that adds subtle sophistication and charm to any outfit.</p>
      </div>
  
  
  
    <div style="margin-top:3.5rem">
    <div style="margin-bottom:1.75rem">
      <span style="font-size:11px;font-weight:600;letter-spacing:0.25em;text-transform:uppercase;color:#3b82f6">You May Also Like</span>
      <h2 style="font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:400;color:#111827;margin-top:0.35rem">Similar Pieces</h2>
    </div>
    <div id="related-grid" class="product-related-grid" style="display:flex;gap:1.25rem;overflow-x:auto;scrollbar-width:none;padding-bottom:8px;scroll-behavior:smooth">
            <div style="flex-shrink:0;width:calc(25% - 1rem);min-width:260px">
        <a href="/products/test-celestial-drops-7Jb9" class="product-card fade-up" style="text-decoration:none;display:flex;flex-direction:column">
  <div class="product-img" style="position:relative;overflow:hidden">
          <img class="img-primary" src="https://amantranjewels.in/storage/products/4840/v45q4m6RiyI0qHhJaKpWe6QhuBmxFjD7S11cK0sa.png" alt="TEST Celestial Drops" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity 0.4s ease;">
              <img class="img-secondary" src="https://amantranjewels.in/storage/products/4840/kvWjEOcE4Fh1NAzMROLvRo4kA5G6ryNKdlSmncSK.png" alt="TEST Celestial Drops" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0.4s ease;">
        <span class="product-badge badge-new">New</span>    <span class="product-badge badge-hot" style="top:2.5rem">Hot</span>    <div class="product-actions">
      <button class="action-btn wishlist-toggle" onclick="event.preventDefault();event.stopPropagation();toggleWishlist(this,4840)" title="Wishlist" data-product-id="4840"><i class="far fa-heart" style=""></i></button>
      <button class="action-btn" onclick="event.preventDefault();event.stopPropagation();window.location='/products/test-celestial-drops-7Jb9'" title="Quick View"><i class="fa-regular fa-eye"></i></button>
    </div>
  </div>
  <div class="product-body" style="display:flex;flex-direction:column;flex:1">
    <div class="product-cat">Earrings</div>
    <div class="product-name">TEST Celestial Drops</div>
        <button class="product-add add-to-cart" data-id="4840" data-name="TEST Celestial Drops" onclick="event.preventDefault();event.stopPropagation();window.location='/products/test-celestial-drops-7Jb9'" style="margin-top:auto">Add to Cart</button>
  </div>
</a>
      </div>
            <div style="flex-shrink:0;width:calc(25% - 1rem);min-width:260px">
        <a href="/products/diamond-aura-earring-RUPm" class="product-card fade-up" style="text-decoration:none;display:flex;flex-direction:column">
  <div class="product-img" style="position:relative;overflow:hidden">
          <img class="img-primary" src="https://amantranjewels.in/storage/products/4717/K9LhuUS8ob4kzjKRgM4vjrgKq2iqhKG68UAzEaOd.png" alt="Diamond Aura Earring" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity 0.4s ease;">
              <img class="img-secondary" src="https://amantranjewels.in/storage/products/4717/JmuyHMgAtCHqhcGBbdBeUQWfvsNt2Z0CX9SWCJZH.webp" alt="Diamond Aura Earring" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0.4s ease;">
                <div class="product-actions">
      <button class="action-btn wishlist-toggle" onclick="event.preventDefault();event.stopPropagation();toggleWishlist(this,4717)" title="Wishlist" data-product-id="4717"><i class="far fa-heart" style=""></i></button>
      <button class="action-btn" onclick="event.preventDefault();event.stopPropagation();window.location='/products/diamond-aura-earring-RUPm'" title="Quick View"><i class="fa-regular fa-eye"></i></button>
    </div>
  </div>
  <div class="product-body" style="display:flex;flex-direction:column;flex:1">
    <div class="product-cat">Earrings</div>
    <div class="product-name">Diamond Aura Earring</div>
        <button class="product-add add-to-cart" data-id="4717" data-name="Diamond Aura Earring" onclick="event.preventDefault();event.stopPropagation();window.location='/products/diamond-aura-earring-RUPm'" style="margin-top:auto">Add to Cart</button>
  </div>
</a>
      </div>
          </div>
  </div>
  
</div>
</div>
</div>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="csrf-token" content="RxPkt2ojXrcdL8t1SN5zgrgEeexZk23SRMmezsRR">
  <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <title>Stud Earrings — Amantran Jewels</title>
  <link rel="icon" type="image/x-icon" href="/amantran-favicon-v2.ico">
  <link rel="shortcut icon" href="/amantran-favicon-v2.ico">
  <meta name="description" content="Singlestone offers exclusive diamond solitaire jewelry. IGI certified diamonds with uncompromising quality.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=family=Poppins:wght@300;400;500;600&display=swap">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <link rel="stylesheet" href="/css/singlestone.css?v=1786342400">
  <meta name="robots" content="noarchive">


<div id="inquiry-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center">
  <div style="background:white;border-radius:16px;padding:2rem;max-width:480px;width:90%;position:relative">
    <button onclick="closeInquiryModal()" style="position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280">&times;</button>
    <h3 style="font-family:'Cormorant Garamond',serif;font-size:1.4rem;margin-bottom:0.5rem;color:#1e3a8a">Enquire About This Product</h3>
    <p style="font-size:13px;color:#6b7280;margin-bottom:1.5rem">Stud Earrings</p>
    <div id="inquiry-success" style="display:none;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:1rem;color:#166534;margin-bottom:1rem;font-size:14px">
      Thank you! We'll get back to you shortly.
    </div>
    <div id="inquiry-form">
      <div style="margin-bottom:1rem">
        <label style="font-size:12px;font-weight:600;color:#374151;display:block;margin-bottom:0.35rem">Name *</label>
        <input type="text" id="inq-name" placeholder="Your name" style="width:100%;padding:0.65rem 0.75rem;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;box-sizing:border-box">
      </div>
      <div style="margin-bottom:1rem">
        <label style="font-size:12px;font-weight:600;color:#374151;display:block;margin-bottom:0.35rem">Phone *</label>
        <input type="tel" id="inq-phone" placeholder="Your phone number" style="width:100%;padding:0.65rem 0.75rem;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;box-sizing:border-box">
      </div>
      <div style="margin-bottom:1.5rem">
        <label style="font-size:12px;font-weight:600;color:#374151;display:block;margin-bottom:0.35rem">Message</label>
        <textarea id="inq-message" placeholder="Any specific requirements..." rows="3" style="width:100%;padding:0.65rem 0.75rem;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;box-sizing:border-box;resize:none"></textarea>
      </div>
      <button onclick="submitInquiry()" style="width:100%;padding:1rem;background:#1e3a8a;color:white;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer">Send Enquiry</button>
    </div>
  </div>
</div>

<script>
function openInquiryModal() {
    const m = document.getElementById('inquiry-modal');
    m.style.display = 'flex';
}
function closeInquiryModal() {
    document.getElementById('inquiry-modal').style.display = 'none';
    document.getElementById('inquiry-success').style.display = 'none';
    document.getElementById('inquiry-form').style.display = 'block';
    document.getElementById('inq-name').value = '';
    document.getElementById('inq-phone').value = '';
    document.getElementById('inq-message').value = '';
}
function submitInquiry() {
    const name = document.getElementById('inq-name').value.trim();
    const phone = document.getElementById('inq-phone').value.trim();
    const message = document.getElementById('inq-message').value.trim();
    if (!name || !phone) { alert('Please fill in name and phone.'); return; }
    fetch('/inquiry/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content || '' },
        body: JSON.stringify({ name, phone, message, product_id: 4726, product_name: 'Stud Earrings' })
    })
    .then(r => r.json())
    .then(d => {
        if (d.success) {
            document.getElementById('inquiry-form').style.display = 'none';
            document.getElementById('inquiry-success').style.display = 'block';
            setTimeout(closeInquiryModal, 2500);
        }
    })
    .catch(() => alert('Something went wrong. Please try again.'));
}
</script>

<link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap" rel="stylesheet">
</head>
<body>

<!-- NAVBAR -->
<nav id="navbar">
  <div class="nav-inner">
    <a href="/" class="nav-logo">
      <picture>
  <source srcset="/images/logos/amantran.webp" type="image/webp">
  <img src="/images/logos/amantran.png" alt="Amantran Jewels" style="height:40px;" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
</picture>
      <span style="display:none;font-family:'Cormorant Garamond',serif;font-size:1.6rem;color:var(--blue-700);letter-spacing:0.05em">Amantran Jewels</span>
    </a>
    <ul class="nav-links">
      <li><a href="/products">Collections</a></li>
            <li class="has-mega">
        <a href="/products?cat=bracelet-amj">Bracelet</a>
        <div class="mega-menu">
          <div class="mega-inner">
            <div class="mega-header" style="grid-column:1/-1">
              <span class="mega-header-title">Bracelet</span>
              <a href="/products?cat=bracelet-amj" class="mega-header-link">View All →</a>
            </div>
            <div>
              <div class="mega-col-title">Subcategories</div>
                              <p style="font-size:12px;color:#94a3b8">No subcategories</p>
                          </div>
            <div>
              <div class="mega-col-title">Price Range</div>
                            <div class="mega-price-grid">
                                <a href="/products?cat=bracelet-amj&min=0&max=50000" class="mega-price-link">
                  ₹0 – ₹50,000
                </a>
                                <a href="/products?cat=bracelet-amj&min=50000&max=100000" class="mega-price-link">
                  ₹50,000 – ₹100,000
                </a>
                                <a href="/products?cat=bracelet-amj&min=100000&max=150000" class="mega-price-link">
                  ₹100,000 – ₹150,000
                </a>
                                <a href="/products?cat=bracelet-amj&min=150000&max=200000" class="mega-price-link">
                  ₹150,000 – ₹200,000
                </a>
                                <a href="/products?cat=bracelet-amj&min=200000&max=250000" class="mega-price-link">
                  ₹200,000 – ₹250,000
                </a>
                                <a href="/products?cat=bracelet-amj&min=250000&max=300000" class="mega-price-link">
                  ₹250,000 – ₹300,000
                </a>
                                <a href="/products?cat=bracelet-amj&min=300000&max=350000" class="mega-price-link">
                  ₹300,000 – ₹350,000
                </a>
                                <a href="/products?cat=bracelet-amj&min=350000&max=400000" class="mega-price-link">
                  ₹350,000 – ₹400,000
                </a>
                                <a href="/products?cat=bracelet-amj&min=400000&max=450000" class="mega-price-link">
                  ₹400,000 – ₹450,000
                </a>
                                <a href="/products?cat=bracelet-amj&min=450000&max=500000" class="mega-price-link">
                  ₹450,000 – ₹500,000
                </a>
                                <a href="/products?cat=bracelet-amj&min=500000&max=99999999" class="mega-price-link">
                  Above ₹5,00,000
                </a>
                              </div>
                          </div>
            <div>
              <div class="mega-col-title">Featured</div>
                            <p style="font-size:12px;color:#94a3b8">No featured product</p>
                          </div>
          </div>
        </div>
      </li>
            <li class="has-mega">
        <a href="/products?cat=earring-amj">Earring</a>
        <div class="mega-menu">
          <div class="mega-inner">
            <div class="mega-header" style="grid-column:1/-1">
              <span class="mega-header-title">Earring</span>
              <a href="/products?cat=earring-amj" class="mega-header-link">View All →</a>
            </div>
            <div>
              <div class="mega-col-title">Subcategories</div>
                                              <a href="/products?cat=earring-amj&sub=test-1" class="mega-subcat-link">
                  <i class="fas fa-chevron-right" style="font-size:8px;color:#cbd5e1"></i> TEST 1
                </a>
                                          </div>
            <div>
              <div class="mega-col-title">Price Range</div>
                            <div class="mega-price-grid">
                                <a href="/products?cat=earring-amj&min=0&max=50000" class="mega-price-link">
                  ₹0 – ₹50,000
                </a>
                                <a href="/products?cat=earring-amj&min=50000&max=100000" class="mega-price-link">
                  ₹50,000 – ₹100,000
                </a>
                                <a href="/products?cat=earring-amj&min=100000&max=150000" class="mega-price-link">
                  ₹100,000 – ₹150,000
                </a>
                                <a href="/products?cat=earring-amj&min=150000&max=200000" class="mega-price-link">
                  ₹150,000 – ₹200,000
                </a>
                                <a href="/products?cat=earring-amj&min=200000&max=250000" class="mega-price-link">
                  ₹200,000 – ₹250,000
                </a>
                                <a href="/products?cat=earring-amj&min=250000&max=300000" class="mega-price-link">
                  ₹250,000 – ₹300,000
                </a>
                                <a href="/products?cat=earring-amj&min=300000&max=350000" class="mega-price-link">
                  ₹300,000 – ₹350,000
                </a>
                                <a href="/products?cat=earring-amj&min=350000&max=400000" class="mega-price-link">
                  ₹350,000 – ₹400,000
                </a>
                                <a href="/products?cat=earring-amj&min=400000&max=450000" class="mega-price-link">
                  ₹400,000 – ₹450,000
                </a>
                                <a href="/products?cat=earring-amj&min=450000&max=500000" class="mega-price-link">
                  ₹450,000 – ₹500,000
                </a>
                                <a href="/products?cat=earring-amj&min=500000&max=99999999" class="mega-price-link">
                  Above ₹5,00,000
                </a>
                              </div>
                          </div>
            <div>
              <div class="mega-col-title">Featured</div>
                            <a href="/products/test-lumiere-drops-ROUL" class="mega-featured-card">
                <div class="mega-featured-img">
                                    <img src="https://amantranjewels.in/storage/products/4842/mJiiF8VHGgF9jntve1mkj1EfoXaa5gyxt6Z9XZ1m.png" alt="TEST Lumière Drops">
                                  </div>
                <div class="mega-featured-info">
                  <div class="mega-featured-badge">Featured Pick</div>
                  <div class="mega-featured-name">TEST Lumière Drops</div>
                </div>
              </a>
                          </div>
          </div>
        </div>
      </li>
            <li class="has-mega">
        <a href="/products?cat=necklace-set-amj">Necklace Set</a>
        <div class="mega-menu">
          <div class="mega-inner">
            <div class="mega-header" style="grid-column:1/-1">
              <span class="mega-header-title">Necklace Set</span>
              <a href="/products?cat=necklace-set-amj" class="mega-header-link">View All →</a>
            </div>
            <div>
              <div class="mega-col-title">Subcategories</div>
                              <p style="font-size:12px;color:#94a3b8">No subcategories</p>
                          </div>
            <div>
              <div class="mega-col-title">Price Range</div>
                            <div class="mega-price-grid">
                                <a href="/products?cat=necklace-set-amj&min=0&max=50000" class="mega-price-link">
                  ₹0 – ₹50,000
                </a>
                                <a href="/products?cat=necklace-set-amj&min=50000&max=100000" class="mega-price-link">
                  ₹50,000 – ₹100,000
                </a>
                                <a href="/products?cat=necklace-set-amj&min=100000&max=150000" class="mega-price-link">
                  ₹100,000 – ₹150,000
                </a>
                                <a href="/products?cat=necklace-set-amj&min=150000&max=200000" class="mega-price-link">
                  ₹150,000 – ₹200,000
                </a>
                                <a href="/products?cat=necklace-set-amj&min=200000&max=250000" class="mega-price-link">
                  ₹200,000 – ₹250,000
                </a>
                                <a href="/products?cat=necklace-set-amj&min=250000&max=300000" class="mega-price-link">
                  ₹250,000 – ₹300,000
                </a>
                                <a href="/products?cat=necklace-set-amj&min=300000&max=350000" class="mega-price-link">
                  ₹300,000 – ₹350,000
                </a>
                                <a href="/products?cat=necklace-set-amj&min=350000&max=400000" class="mega-price-link">
                  ₹350,000 – ₹400,000
                </a>
                                <a href="/products?cat=necklace-set-amj&min=400000&max=450000" class="mega-price-link">
                  ₹400,000 – ₹450,000
                </a>
                                <a href="/products?cat=necklace-set-amj&min=450000&max=500000" class="mega-price-link">
                  ₹450,000 – ₹500,000
                </a>
                                <a href="/products?cat=necklace-set-amj&min=500000&max=99999999" class="mega-price-link">
                  Above ₹5,00,000
                </a>
                              </div>
                          </div>
            <div>
              <div class="mega-col-title">Featured</div>
                            <a href="/products/test-eternal-bloom-necklace-spark-earrings-H89Q" class="mega-featured-card">
                <div class="mega-featured-img">
                                    <img src="https://amantranjewels.in/storage/products/4841/laRUNyOFrvexRhQxmUA4ti6wjuPBPcur1YFLncXb.png" alt="TEST Eternal Bloom Necklace Spark Earrings">
                                  </div>
                <div class="mega-featured-info">
                  <div class="mega-featured-badge">Featured Pick</div>
                  <div class="mega-featured-name">TEST Eternal Bloom Necklace Spark Earrings</div>
                </div>
              </a>
                          </div>
          </div>
        </div>
      </li>
            <li class="has-mega">
        <a href="/products?cat=ring-amj">Ring</a>
        <div class="mega-menu">
          <div class="mega-inner">
            <div class="mega-header" style="grid-column:1/-1">
              <span class="mega-header-title">Ring</span>
              <a href="/products?cat=ring-amj" class="mega-header-link">View All →</a>
            </div>
            <div>
              <div class="mega-col-title">Subcategories</div>
                              <p style="font-size:12px;color:#94a3b8">No subcategories</p>
                          </div>
            <div>
              <div class="mega-col-title">Price Range</div>
                            <div class="mega-price-grid">
                                <a href="/products?cat=ring-amj&min=0&max=50000" class="mega-price-link">
                  ₹0 – ₹50,000
                </a>
                                <a href="/products?cat=ring-amj&min=50000&max=100000" class="mega-price-link">
                  ₹50,000 – ₹100,000
                </a>
                                <a href="/products?cat=ring-amj&min=100000&max=150000" class="mega-price-link">
                  ₹100,000 – ₹150,000
                </a>
                                <a href="/products?cat=ring-amj&min=150000&max=200000" class="mega-price-link">
                  ₹150,000 – ₹200,000
                </a>
                                <a href="/products?cat=ring-amj&min=200000&max=250000" class="mega-price-link">
                  ₹200,000 – ₹250,000
                </a>
                                <a href="/products?cat=ring-amj&min=250000&max=300000" class="mega-price-link">
                  ₹250,000 – ₹300,000
                </a>
                                <a href="/products?cat=ring-amj&min=300000&max=350000" class="mega-price-link">
                  ₹300,000 – ₹350,000
                </a>
                                <a href="/products?cat=ring-amj&min=350000&max=400000" class="mega-price-link">
                  ₹350,000 – ₹400,000
                </a>
                                <a href="/products?cat=ring-amj&min=400000&max=450000" class="mega-price-link">
                  ₹400,000 – ₹450,000
                </a>
                                <a href="/products?cat=ring-amj&min=450000&max=500000" class="mega-price-link">
                  ₹450,000 – ₹500,000
                </a>
                                <a href="/products?cat=ring-amj&min=500000&max=99999999" class="mega-price-link">
                  Above ₹5,00,000
                </a>
                              </div>
                          </div>
            <div>
              <div class="mega-col-title">Featured</div>
                            <p style="font-size:12px;color:#94a3b8">No featured product</p>
                          </div>
          </div>
        </div>
      </li>
            <li><a href="/about">Our Story</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
    <div class="nav-actions">
      <div class="nav-icon desktop-only" onclick="openSearch()" title="Search"><i class="fas fa-search"></i></div>
      <div class="nav-icon desktop-only" onclick="window.location='/wishlist'" title="Wishlist"><i class="far fa-heart"></i></div>
      <div class="nav-icon desktop-only" onclick="window.location='/cart'" title="Cart">
        <i class="fas fa-shopping-bag"></i>
                <span class="nav-badge cart-badge" style="display:none">0</span>
      </div>
      <div class="nav-icon desktop-only" onclick="window.location='/login'" title="Account"><i class="far fa-user"></i></div>
      <div class="nav-hamburger" id="hamburger"><span></span><span></span><span></span></div>
    </div>
  </div>
</nav>

<!-- MOBILE MENU -->
<div id="mobile-menu">
  <div style="display:flex;align-items:center;justify-content:space-between;padding-bottom:1.25rem;border-bottom:2px solid #1a237e;margin-bottom:1rem">
    <picture>
  <source srcset="/images/logos/amantran.webp" type="image/webp">
  <img src="/images/logos/amantran.png" alt="Amantran Jewels" style="height:32px" onerror="this.style.display='none'">
</picture>
    <span class="menu-close" id="menu-close" style="font-size:1.5rem;color:#1a237e;cursor:pointer">&times;</span>
  </div>
  <a href="/all-collections">Collections</a>
    <div class="mobile-nav-item">
    <div class="mobile-nav-header" onclick="toggleMobileAccordion(this)">
      <a href="/products?cat=bracelet-amj">Bracelet</a>
      <span class="mobile-nav-arrow">&#8250;</span>
    </div>
    <div class="mobile-nav-sub">
            <div class="mobile-nav-sub-title">Price Range</div>
            <a href="/products?cat=bracelet-amj&min=0&max=50000" class="mobile-sub-link">₹0 – ₹50,000</a>
            <a href="/products?cat=bracelet-amj&min=50000&max=100000" class="mobile-sub-link">₹50,000 – ₹100,000</a>
            <a href="/products?cat=bracelet-amj&min=100000&max=150000" class="mobile-sub-link">₹100,000 – ₹150,000</a>
            <a href="/products?cat=bracelet-amj&min=150000&max=200000" class="mobile-sub-link">₹150,000 – ₹200,000</a>
            <a href="/products?cat=bracelet-amj&min=200000&max=250000" class="mobile-sub-link">₹200,000 – ₹250,000</a>
            <a href="/products?cat=bracelet-amj&min=250000&max=300000" class="mobile-sub-link">₹250,000 – ₹300,000</a>
            <a href="/products?cat=bracelet-amj&min=300000&max=350000" class="mobile-sub-link">₹300,000 – ₹350,000</a>
            <a href="/products?cat=bracelet-amj&min=350000&max=400000" class="mobile-sub-link">₹350,000 – ₹400,000</a>
            <a href="/products?cat=bracelet-amj&min=400000&max=450000" class="mobile-sub-link">₹400,000 – ₹450,000</a>
            <a href="/products?cat=bracelet-amj&min=450000&max=500000" class="mobile-sub-link">₹450,000 – ₹500,000</a>
            <a href="/products?cat=bracelet-amj&min=500000&max=99999999" class="mobile-sub-link">Above ₹5,00,000</a>
          </div>
  </div>
    <div class="mobile-nav-item">
    <div class="mobile-nav-header" onclick="toggleMobileAccordion(this)">
      <a href="/products?cat=earring-amj">Earring</a>
      <span class="mobile-nav-arrow">&#8250;</span>
    </div>
    <div class="mobile-nav-sub">
              <div class="mobile-nav-sub-title">Subcategories</div>
                <a href="/products?cat=earring-amj&sub=test-1" class="mobile-sub-link">TEST 1</a>
                    <div class="mobile-nav-sub-title">Price Range</div>
            <a href="/products?cat=earring-amj&min=0&max=50000" class="mobile-sub-link">₹0 – ₹50,000</a>
            <a href="/products?cat=earring-amj&min=50000&max=100000" class="mobile-sub-link">₹50,000 – ₹100,000</a>
            <a href="/products?cat=earring-amj&min=100000&max=150000" class="mobile-sub-link">₹100,000 – ₹150,000</a>
            <a href="/products?cat=earring-amj&min=150000&max=200000" class="mobile-sub-link">₹150,000 – ₹200,000</a>
            <a href="/products?cat=earring-amj&min=200000&max=250000" class="mobile-sub-link">₹200,000 – ₹250,000</a>
            <a href="/products?cat=earring-amj&min=250000&max=300000" class="mobile-sub-link">₹250,000 – ₹300,000</a>
            <a href="/products?cat=earring-amj&min=300000&max=350000" class="mobile-sub-link">₹300,000 – ₹350,000</a>
            <a href="/products?cat=earring-amj&min=350000&max=400000" class="mobile-sub-link">₹350,000 – ₹400,000</a>
            <a href="/products?cat=earring-amj&min=400000&max=450000" class="mobile-sub-link">₹400,000 – ₹450,000</a>
            <a href="/products?cat=earring-amj&min=450000&max=500000" class="mobile-sub-link">₹450,000 – ₹500,000</a>
            <a href="/products?cat=earring-amj&min=500000&max=99999999" class="mobile-sub-link">Above ₹5,00,000</a>
          </div>
  </div>
    <div class="mobile-nav-item">
    <div class="mobile-nav-header" onclick="toggleMobileAccordion(this)">
      <a href="/products?cat=necklace-set-amj">Necklace Set</a>
      <span class="mobile-nav-arrow">&#8250;</span>
    </div>
    <div class="mobile-nav-sub">
            <div class="mobile-nav-sub-title">Price Range</div>
            <a href="/products?cat=necklace-set-amj&min=0&max=50000" class="mobile-sub-link">₹0 – ₹50,000</a>
            <a href="/products?cat=necklace-set-amj&min=50000&max=100000" class="mobile-sub-link">₹50,000 – ₹100,000</a>
            <a href="/products?cat=necklace-set-amj&min=100000&max=150000" class="mobile-sub-link">₹100,000 – ₹150,000</a>
            <a href="/products?cat=necklace-set-amj&min=150000&max=200000" class="mobile-sub-link">₹150,000 – ₹200,000</a>
            <a href="/products?cat=necklace-set-amj&min=200000&max=250000" class="mobile-sub-link">₹200,000 – ₹250,000</a>
            <a href="/products?cat=necklace-set-amj&min=250000&max=300000" class="mobile-sub-link">₹250,000 – ₹300,000</a>
            <a href="/products?cat=necklace-set-amj&min=300000&max=350000" class="mobile-sub-link">₹300,000 – ₹350,000</a>
            <a href="/products?cat=necklace-set-amj&min=350000&max=400000" class="mobile-sub-link">₹350,000 – ₹400,000</a>
            <a href="/products?cat=necklace-set-amj&min=400000&max=450000" class="mobile-sub-link">₹400,000 – ₹450,000</a>
            <a href="/products?cat=necklace-set-amj&min=450000&max=500000" class="mobile-sub-link">₹450,000 – ₹500,000</a>
            <a href="/products?cat=necklace-set-amj&min=500000&max=99999999" class="mobile-sub-link">Above ₹5,00,000</a>
          </div>
  </div>
    <div class="mobile-nav-item">
    <div class="mobile-nav-header" onclick="toggleMobileAccordion(this)">
      <a href="/products?cat=ring-amj">Ring</a>
      <span class="mobile-nav-arrow">&#8250;</span>
    </div>
    <div class="mobile-nav-sub">
            <div class="mobile-nav-sub-title">Price Range</div>
            <a href="/products?cat=ring-amj&min=0&max=50000" class="mobile-sub-link">₹0 – ₹50,000</a>
            <a href="/products?cat=ring-amj&min=50000&max=100000" class="mobile-sub-link">₹50,000 – ₹100,000</a>
            <a href="/products?cat=ring-amj&min=100000&max=150000" class="mobile-sub-link">₹100,000 – ₹150,000</a>
            <a href="/products?cat=ring-amj&min=150000&max=200000" class="mobile-sub-link">₹150,000 – ₹200,000</a>
            <a href="/products?cat=ring-amj&min=200000&max=250000" class="mobile-sub-link">₹200,000 – ₹250,000</a>
            <a href="/products?cat=ring-amj&min=250000&max=300000" class="mobile-sub-link">₹250,000 – ₹300,000</a>
            <a href="/products?cat=ring-amj&min=300000&max=350000" class="mobile-sub-link">₹300,000 – ₹350,000</a>
            <a href="/products?cat=ring-amj&min=350000&max=400000" class="mobile-sub-link">₹350,000 – ₹400,000</a>
            <a href="/products?cat=ring-amj&min=400000&max=450000" class="mobile-sub-link">₹400,000 – ₹450,000</a>
            <a href="/products?cat=ring-amj&min=450000&max=500000" class="mobile-sub-link">₹450,000 – ₹500,000</a>
            <a href="/products?cat=ring-amj&min=500000&max=99999999" class="mobile-sub-link">Above ₹5,00,000</a>
          </div>
  </div>
    <a href="/about">Our Story</a>
  <a href="/contact">Contact</a>
  <div style="border-top:1px solid #daeaf5;margin-top:0.5rem;padding-top:0.5rem">
    <a href="/cart"><i class="fas fa-shopping-bag" style="width:20px;color:#1a237e"></i> Cart</a>
    <a href="/wishlist"><i class="far fa-heart" style="width:20px;color:#1a237e"></i> Wishlist</a>
    <a href="/login"><i class="far fa-user" style="width:20px;color:#1a237e"></i> My Account</a>
  </div>
</div>

<main></main>

<!-- FOOTER -->
<footer>
  <div class="container">
    <div class="footer-grid">
      <div class="footer-brand">
          <img 
  src="https://amantranjewels.in/images/logos/amantran-white.png" 
  alt="Amantran Jewels" 
  onerror="this.outerHTML='<span style=\'font-family:Cormorant Garamond,serif;font-size:1.5rem;color:white;background:transparent;display:block;margin-bottom:1rem\'>'+( 'amantran' == 'crystalcut' ? 'CrystalCut' : ( 'amantran' == 'amantran' ? 'Amantran Jewels' : 'Singlestone'))+'</span>'"
>
        <p>Crafting extraordinary diamond solitaire diamonds for those who believe beauty need not come at the cost of the earth.</p>
                <div class="footer-contact" style="margin-bottom:1rem">
          <a href="tel:+917600250081" style="display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.75);text-decoration:none;font-size:0.875rem;margin-bottom:6px">
            <i class="fas fa-phone" style="font-size:0.75rem"></i> +91 76002 50081
          </a>
          <a href="mailto:info@amantranjewels.in" style="display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.75);text-decoration:none;font-size:0.875rem">
            <i class="fas fa-envelope" style="font-size:0.75rem"></i> info@amantranjewels.in
          </a>
        </div>
        <div class="footer-social">
                    <a href="#" target="_blank" class="social-link"><i class="fab fa-instagram"></i></a>
          <a href="#" target="_blank" class="social-link"><i class="fab fa-facebook-f"></i></a>
        </div>
      </div>
      <div class="footer-col">
        <h5>Shop</h5>
        <ul>
                    <li><a href="/products?cat=bracelet-amj">Bracelet</a></li>
                    <li><a href="/products?cat=earring-amj">Earring</a></li>
                    <li><a href="/products?cat=necklace-set-amj">Necklace Set</a></li>
                    <li><a href="/products?cat=ring-amj">Ring</a></li>
                  </ul>
      </div>
      <div class="footer-col">
        <h5>Help</h5>
        <ul>
          <li><a href="/size-guide">Size Guide</a></li>
          <li><a href="/faq">FAQs</a></li>


          <li><a href="/return-policy">Returns</a></li>
          <li><a href="/contact">Contact Us</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h5>Company</h5>
        <ul>
          <li><a href="/about">Our Story</a></li>
          <li><a href="/privacy">Privacy Policy</a></li>
          <li><a href="/terms">Terms & Conditions</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="footer-bottom">
      <p>&copy; 2026 Amantran Jewels. All rights reserved.</p>
      <div style="display:flex;gap:1.5rem">
        <a href="/privacy">Privacy</a>
        <a href="/terms">Terms</a>
        <a href="/return-policy">Returns</a>
      </div>
    </div>
  </div>
</footer>

<!-- WHATSAPP -->
<a href="https://wa.me/917600250081" class="whatsapp-float" target="_blank"><i class="fab fa-whatsapp"></i></a>

<!-- TOAST -->
<div id="toast-container" class="toast-container"></div>

<script src="/js/singlestone.js?v=1777984431"></script>
<script>
const csrf = document.querySelector("meta[name=csrf-token]")?.content;
function showToast(msg) {
  let t = document.getElementById("global-toast");
  if (!t) { t = document.createElement("div"); t.id="global-toast"; t.style.cssText="position:fixed;bottom:5rem;left:50%;transform:translateX(-50%);background:#1a237e;color:white;padding:.6rem 1.5rem;border-radius:50px;font-size:13px;font-weight:600;z-index:9999;transition:opacity .3s;white-space:nowrap;"; document.body.appendChild(t); }
  t.textContent = msg; t.style.opacity="1";
  clearTimeout(t._t); t._t = setTimeout(()=>{ t.style.opacity="0"; }, 2500);
}
function toggleWishlist(btn, productId) {
  fetch("/wishlist/toggle", {
    method: "POST",
    headers: {"Content-Type":"application/json","X-CSRF-TOKEN": csrf},
    body: JSON.stringify({product_id: productId})
  }).then(r=>r.json()).then(d=>{
    const icon = btn.querySelector("i");
    if(d.action==="added") { icon.className="fas fa-heart"; icon.style.color="#f87171"; btn.title="Remove from Wishlist"; showToast("Added to Wishlist ❤️"); }
    else { icon.className="far fa-heart"; icon.style.color=""; btn.title="Add to Wishlist"; showToast("Removed from Wishlist"); }
    const badge = document.querySelector('.wishlist-badge,.wishlist-count');
    if(badge && d.count!==undefined) badge.textContent=d.count;
  }).catch(()=>{});
}
</script>
<script>
// ── PRODUCT DATA ──
const PRODUCT_SLUG = "stud-earrings-pPNX";
const PRODUCT_ID   = 4726;
const variantSizeIds = [[]];
const variantBreakdowns = [{"gold":18006.99,"gold_wt":3,"gold_rate":6002.33,"diamond":9072,"dia_wt":0.216,"dia_qty":36,"dia_quality":"VVS-DEF","making":4500,"gst":947.37,"gst_pct":3,"total":32526.36,"karat":"9KT"}];
const showPrice = false;
const variantPrices  = [32526.36];
const variantImages  = [null];
const variantWeights = [3];

let currentVariant  = 0;
let currentKarat    = "9KT";
let selectedSizeId  = null;
let selectedSizeLabel = null;
let baseGoldWeight  = variantWeights[0] || 0;

// ── LIVE PRICE FETCH ──
function amjToggleBreakdown() {
    const br = document.getElementById('breakdown-rows');
    const arrow = document.getElementById('amj-breakdown-arrow');
    const arrowMob = document.getElementById('amj-breakdown-arrow-mob');
    const mbr = document.getElementById('mob-bd');
    const isHidden = br.style.display === 'none';
    br.style.display = isHidden ? 'block' : 'none';
    if (mbr) mbr.style.display = isHidden ? 'block' : 'none';
    if (arrow) arrow.textContent = isHidden ? '▴' : '▾';
    if (arrowMob) arrowMob.textContent = isHidden ? '▴' : '▾';
}

function amjSync(el) {
    const cls = el.className;
    document.querySelectorAll('.' + cls).forEach(other => { other.value = el.value; });

    // If diamond type changed, filter quality options
    if (cls.includes('amj-diamond-type')) {
        const selectedType = el.value;
        document.querySelectorAll('.amj-clarity-grade').forEach(sel => {
            let firstVisible = null;
            Array.from(sel.options).forEach(opt => {
                const show = opt.dataset.type === selectedType;
                opt.style.display = show ? '' : 'none';
                opt.disabled = !show;
                if (show && !firstVisible) firstVisible = opt.value;
            });
            if (firstVisible) sel.value = firstVisible;
        });
    }

    clUpdateSpecChips();
    amjFetchPrice();
}

// ── CARATLANE-STYLE SPEC CHIPS ──
function clUpdateSpecChips() {
    const goldType = document.querySelector('.amj-gold-type');
    const clarity = document.querySelector('.amj-clarity-grade');
    ['cl-spec-metal','mob-cl-spec-metal'].forEach(id => {
        const el = document.getElementById(id);
        if (el && goldType) el.textContent = goldType.options[goldType.selectedIndex]?.text || el.textContent;
    });
    ['cl-spec-diamond','mob-cl-spec-diamond'].forEach(id => {
        const el = document.getElementById(id);
        if (el && clarity) el.textContent = clarity.options[clarity.selectedIndex]?.text || el.textContent;
    });
}

// ── CARATLANE-STYLE PRODUCT DETAILS TABS ──
function clSwitchTab(panelId, btn) {
    document.querySelectorAll('.cl-tab-panel').forEach(p => p.classList.remove('active'));
    document.querySelectorAll('.cl-tab-btn').forEach(b => b.classList.remove('active'));
    const panel = document.getElementById(panelId);
    if (panel) panel.classList.add('active');
    if (btn) btn.classList.add('active');
}

// ── CUSTOMISE PANEL EXPAND/COLLAPSE ──
function clToggleCustomise(fieldsId, btn) {
    const fields = document.getElementById(fieldsId);
    if (!fields) return;
    const isOpen = fields.classList.toggle('open');
    if (btn) btn.classList.toggle('open', isOpen);
}

// ── SEGMENTED PILL SELECT (Gold Quality / Gold Color) ──
function clSetSegment(selectClass, value, btn) {
    document.querySelectorAll('.' + selectClass).forEach(sel => { sel.value = value; });
    const group = btn.closest('.cl-segment-row');
    if (group) group.querySelectorAll('.cl-segment-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    clUpdateSpecChips();
    amjFetchPrice();
}

async function amjFetchPrice() {
    try {
        const goldTypeId = document.querySelector('.amj-gold-type')?.value;
        const goldColor = document.querySelector('.amj-gold-color')?.value;
        const diamondType = document.querySelector('.amj-diamond-type')?.value;
        const clarityGrade = document.querySelector('.amj-clarity-grade')?.value;
        if (!goldTypeId) return;

        const params = new URLSearchParams({
            gold_type_id: goldTypeId, gold_color: goldColor,
            diamond_type: diamondType, clarity_grade: clarityGrade,
        });
        const res = await fetch(`/amantran/products/${PRODUCT_SLUG}/price?${params}`);
        const data = await res.json();
        if (!data || !data.formatted) return;

        const dp = document.getElementById('display-price');
        if (dp && showPrice) { dp.style.opacity='0'; setTimeout(()=>{ dp.textContent=data.formatted; dp.style.opacity='1'; },200); }
        const mdp = document.getElementById('mob-display-price');
        if (mdp && showPrice) { mdp.style.opacity='0'; setTimeout(()=>{ mdp.textContent=data.formatted; mdp.style.opacity='1'; },200); }

        if (data.breakdown) {
            let breakdownHtml = data.breakdown.map(r=>{
                let label = r.label;
                if (label === 'Gold value' && data.gold_weight_grams) {
                    label += ` (${parseFloat(data.gold_weight_grams).toFixed(3)}g @ ₹${parseFloat(data.gold_rate_per_gram).toLocaleString('en-IN')}/g)`;
                }
                return `
                <div style="display:flex;justify-content:space-between;align-items:center;padding:0.35rem 0;font-size:12px;${r.highlight?'border-top:1px solid #bfdbfe;margin-top:0.35rem;padding-top:0.6rem;font-weight:700':'border-bottom:1px solid #dbeafe'}">
                    <span style="color:${r.highlight?'#1e3a8a':'#6b7280'}">${label}</span>
                    <span style="color:${r.highlight?'#1e3a8a':'#374151'}">${(data.export&&data.export.symbol?data.export.symbol:'₹')}${parseFloat(r.amount).toLocaleString('en-IN',{minimumFractionDigits:2,maximumFractionDigits:2})}</span>
                </div>`;
            }).join('');

            // Diamond lines detail
            if (data.diamond_lines && data.diamond_lines.length) {
                breakdownHtml += `
                <div style="margin-top:1rem;padding:1rem;background:#faf9ff;border:1px solid #ebe6ff;border-radius:10px">
                  <div style="display:flex;align-items:center;gap:0.4rem;margin-bottom:0.65rem">
                    <span style="font-size:14px">💎</span>
                    <span style="font-size:10px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:#5b21b6">Diamond Breakdown</span>
                  </div>
                  ${data.diamond_lines.map(d => `
                  <div style="display:flex;justify-content:space-between;align-items:center;padding:0.4rem 0;font-size:12px;border-bottom:1px solid #ede9ff">
                    <span style="color:#4b5563">${d.label}</span>
                    <span style="font-weight:700;color:#5b21b6">${(data.export&&data.export.symbol?data.export.symbol:'₹')}${parseFloat(d.amount).toLocaleString('en-IN',{minimumFractionDigits:2,maximumFractionDigits:2})}</span>
                  </div>`).join('')}
                </div>`;
            }

            const br = document.getElementById('breakdown-rows');
            if (br) br.innerHTML = breakdownHtml;
            const mbr = document.getElementById('mob-breakdown-rows');
            if (mbr) {
                mbr.innerHTML = breakdownHtml;
                const mbd = document.getElementById('mob-bd');
                if (mbd) mbd.style.display = 'block';
            }
        }
    } catch(e) { console.error('amjFetchPrice error:', e); }
}

document.addEventListener('DOMContentLoaded', amjFetchPrice);

async function amjFetchPrice_UNUSED() {
    try {
        const pageSlug = window.location.pathname.split('/products/')[1] || PRODUCT_SLUG;
        const url = `/products/${pageSlug}/price?variant_index=${currentVariant}&size_id=${selectedSizeId||''}`;
        const res  = await fetch(url);
        const data = await res.json();
        if (!data || !data.formatted) return;

        // Update desktop price
        const dp = document.getElementById('display-price');
        if (dp && showPrice) { dp.style.opacity='0'; setTimeout(()=>{ dp.textContent=data.formatted; dp.style.opacity='1'; },200); }

        // Update mobile price
        const mdp = document.getElementById('mob-display-price');
        if (mdp && showPrice) { mdp.style.opacity='0'; setTimeout(()=>{ mdp.textContent=data.formatted; mdp.style.opacity='1'; },200); }

        // Update desktop breakdown
        if (data.breakdown) {
            const br = document.getElementById('breakdown-rows');
            if (br) br.innerHTML = data.breakdown.map(r=>`
                <div style="display:flex;justify-content:space-between;align-items:center;padding:0.35rem 0;font-size:12px;${r.highlight?'border-top:1px solid #bfdbfe;margin-top:0.35rem;padding-top:0.6rem;font-weight:700':'border-bottom:1px solid #dbeafe'}">
                    <span style="color:${r.highlight?'#1e3a8a':'#6b7280'}">${r.label}</span>
                    <span style="color:${r.highlight?'#1e3a8a':'#374151'}">${(data.export&&data.export.symbol?data.export.symbol:'₹')}${parseFloat(r.amount).toLocaleString('en-IN',{minimumFractionDigits:2,maximumFractionDigits:2})}</span>
                </div>`).join('');

            // Update mobile breakdown
            const mbr = document.getElementById('mob-breakdown-rows');
            if (mbr) {
                mbr.innerHTML = data.breakdown.map(r=>`
                <div class="breakdown-row ${r.highlight?'total':''}">
                    <span class="key">${r.label}</span>
                    <span class="val">${(data.export&&data.export.symbol?data.export.symbol:'₹')}${parseFloat(r.amount).toLocaleString('en-IN',{minimumFractionDigits:2,maximumFractionDigits:2})}</span>
                </div>`).join('');
                document.getElementById('mob-bd').style.display = 'block';
            }
        }

        // Update size-weight-price if visible
        const swp = document.getElementById('size-weight-price');
        const swi = document.getElementById('size-weight-info');
        if (swp && swi && swi.style.display !== 'none') swp.textContent = data.formatted;
        const mobSpEl = document.getElementById('mob-size-price');
        if (mobSpEl) mobSpEl.textContent = data.formatted;

    } catch(e) { console.error('amjFetchPrice error:', e); }
}

// ── SELECT VARIANT (Desktop) ──
function selectVariant(el, vi, price, karat, quality, carats) {
    document.querySelectorAll('.variant-card').forEach(c=>{
        c.style.border='1.5px solid #e5e7eb';
        c.style.background='white';
        const r=c.querySelector('.v-radio');
        if(r){r.style.borderColor='#d1d5db';const d=r.querySelector('span');if(d)d.remove();}
    });
    el.style.border='1.5px solid #2563eb';
    el.style.background='#f0f6ff';
    const radio=el.querySelector('.v-radio');
    if(radio){
        radio.style.borderColor='#2563eb';
        if(!radio.querySelector('span')){
            const dot=document.createElement('span');
            dot.style.cssText='width:5px;height:5px;border-radius:50%;background:#2563eb;display:block';
            radio.appendChild(dot);
        }
    }
    currentVariant = vi;
    currentKarat   = karat;
    baseGoldWeight = variantWeights[vi] || baseGoldWeight;
    document.getElementById('size-weight-info').style.display='none';
    highlightSizes(vi);
    selectedSizeId = null; selectedSizeLabel = null;

    // Show breakdown container
    const br = document.getElementById('breakdown-rows');
    if (br) br.style.display = 'block';
    // Also show on mobile
    const mbd = document.getElementById('mob-bd');
    if (mbd) mbd.style.display = 'block';

    // Update variant meta
    const metaEl = document.getElementById('variant-meta');
    if (metaEl) {
        let m = karat;
        if(quality && quality.trim()) m += ' · ' + quality.trim();
        if(carats && parseFloat(carats)>0) m += ' · ' + parseFloat(carats).toFixed(2)+'ct';
        metaEl.textContent = m;
    }

    // Update variant image
    const vi_img = variantImages[vi];
    if (vi_img) setMainImage(vi_img, null);

    // Refresh live price for new variant
    selectedSizeId = null;
    amjFetchPrice();

}

// ── SELECT VARIANT (Mobile) ──
function mobSelectVariant(el, vi, price, karat, quality, carats) {
    document.querySelectorAll('.variant-card').forEach(c=>c.classList.remove('selected'));
    el.classList.add('selected');
    currentVariant = vi;
    currentKarat   = karat;
    baseGoldWeight = variantWeights[vi] || baseGoldWeight;

    const metaEl = document.getElementById('mob-variant-meta');
    if (metaEl) {
        let m = karat;
        if(quality && quality.trim()) m += ' · ' + quality.trim();
        if(carats && parseFloat(carats)>0) m += ' · ' + parseFloat(carats).toFixed(2)+'ct';
        metaEl.textContent = m;
    }
    const vi_img = variantImages[vi];
    if (vi_img) mobSetImage(vi_img, null);

    selectedSizeId = null;
    amjFetchPrice();
}

// ── SIZE SELECTION ──
function highlightSizes(vi) {
    const ids = variantSizeIds[vi]||[];
    selectedSizeId = null; selectedSizeLabel = null;
    document.querySelectorAll('.size-chip').forEach(chip=>{
        const sid = parseInt(chip.dataset.sizeId);
        const avail = ids.includes(sid);
        chip.classList.toggle('available', avail);
        chip.classList.toggle('unavailable', !avail);
        chip.classList.remove('selected-size');
        chip.style.opacity = avail ? '1' : '0.35';
        chip.style.pointerEvents = avail ? 'auto' : 'none';
    });
}
function mobHighlightSizes(vi) { highlightSizes(vi); }

function selectSize(el, sizeId, sizeLabel, baseWt, karat, inc) {
    document.querySelectorAll('.size-chip, .sz-pill').forEach(c=>{
        c.classList.remove('selected-size','selected');
        c.style.borderColor='#e5e7eb'; c.style.background='white'; c.style.color='#9ca3af'; c.style.fontWeight='400';
    });
    el.classList.add('selected-size','selected');
    el.style.borderColor='#2563eb'; el.style.background='#dbeafe'; el.style.color='#1d4ed8'; el.style.fontWeight='700';
    // Read from dataset if params not passed
    selectedSizeId    = sizeId || parseInt(el.dataset.sizeId);
    selectedSizeLabel = sizeLabel || el.dataset.sizeLabel;
    const increment   = inc !== undefined ? inc : parseFloat(el.dataset.weightIncrement || 0);
    const base        = baseWt !== undefined ? baseWt : (baseGoldWeight || 0);
    const totalWt     = (base + increment).toFixed(3);
    const gw = document.getElementById('size-weight-grams');
    if (gw) gw.textContent = totalWt + 'g';
    const si = document.getElementById('size-weight-info');
    if (si) si.style.display = 'flex';
    const mobSi = document.getElementById('mob-size-weight-info');
    const mobSl = document.getElementById('mob-size-label');
    const mobSp = document.getElementById('mob-size-price');
    if (mobSi) mobSi.style.display = 'block';
    if (mobSl) mobSl.textContent = selectedSizeLabel;
    ['cl-spec-size','mob-cl-spec-size'].forEach(id => {
        const el = document.getElementById(id);
        if (el && selectedSizeLabel) el.textContent = selectedSizeLabel;
    });
    amjFetchPrice();
}

// ── ADD TO CART ──
function showLoginModal() {
    let overlay = document.getElementById('login-required-modal');
    if (overlay) { overlay.style.display='flex'; return; }
    overlay = document.createElement('div');
    overlay.id = 'login-required-modal';
    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:99999;display:flex;align-items:flex-end;justify-content:center;padding:0;backdrop-filter:blur(3px);';
    overlay.innerHTML = `
    <div style="background:white;width:100%;max-width:480px;border-radius:20px 20px 0 0;padding:2rem 1.5rem 2.5rem;box-shadow:0 -8px 40px rgba(0,0,0,0.18);animation:slideUp 0.3s ease;">
      <div style="width:40px;height:4px;background:#e2e8f0;border-radius:4px;margin:0 auto 1.5rem;"></div>
      <div style="text-align:center;margin-bottom:1.5rem;">
        <div style="width:56px;height:56px;background:#eff6ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;">
          <svg width="24" height="24" fill="none" stroke="#1e3a8a" stroke-width="2" viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
        </div>
        <h3 style="font-size:1.15rem;font-weight:700;color:#1e293b;margin-bottom:0.4rem;">Login to Add to Cart</h3>
        <p style="font-size:13px;color:#64748b;line-height:1.5;">Please log in to your account to add items to your cart and continue shopping.</p>
      </div>
      <a href="/login" style="display:block;width:100%;padding:15px;background:linear-gradient(135deg,#1e3a8a,#3b82f6);color:white;border:none;border-radius:12px;font-size:15px;font-weight:700;text-align:center;text-decoration:none;margin-bottom:0.75rem;letter-spacing:0.02em;">Login to Continue</a>
      <button onclick="document.getElementById('login-required-modal').style.display='none'" style="display:block;width:100%;padding:13px;background:#f1f5f9;color:#475569;border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;">Cancel</button>
    </div>
    <style>@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}</style>`;
    overlay.addEventListener('click', function(e){ if(e.target===overlay) overlay.style.display='none'; });
    document.body.appendChild(overlay);
}

function addToCart() {
    const btn = document.getElementById('atc-btn');
    const mobBtn = document.getElementById('mob-atc-btn');
    const setBtns = (html, bg, disabled) => {
        [btn, mobBtn].forEach(b => { if(b){ b.innerHTML=html; b.style.background=bg; b.disabled=disabled; }});
    };
    setBtns('<i class="fas fa-spinner fa-spin"></i> Adding...', '#374151', true);
    fetch('/amantran/cart/add',{
        method:'POST',
        headers:{'Content-Type':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name=csrf-token]').content},
        body:JSON.stringify({
            slug: PRODUCT_SLUG,
            gold_type_id: document.querySelector('.amj-gold-type')?.value,
            gold_color: document.querySelector('.amj-gold-color')?.value,
            diamond_type: document.querySelector('.amj-diamond-type')?.value,
            clarity_grade: document.querySelector('.amj-clarity-grade')?.value,
            size_id: selectedSizeId, size_label: selectedSizeLabel,
        })
    }).then(r=>{
        if(r.status===401){ setBtns('<i class="fa-regular fa-bag-shopping"></i> Add to Cart', '#1e3a8a', false); showLoginModal(); return null; }
        return r.text();
    }).then(t=>{
        if(!t) return;
        try{ return JSON.parse(t); } catch(e){ console.log('cart response:',t.substring(0,200)); return {count:0}; }
    }).then(d=>{
        if(!d) return;
        setBtns('<i class="fas fa-check"></i> Added to Cart!', '#059669', false);
        setTimeout(()=>{ setBtns('<i class="fa-regular fa-bag-shopping"></i> Add to Cart', '#1e3a8a', false); }, 2500);
        const badge=document.querySelector('.cart-badge');
        if(badge&&d.count){badge.textContent=d.count;badge.style.display='flex';}
        showCartToast(d.count);
    }).catch(e=>{ setBtns('<i class="fa-regular fa-bag-shopping"></i> Add to Cart', '#1e3a8a', false); });
}

function mobAddToCart() { addToCart(); }

function showCartToast(count) {
    let t = document.getElementById('cart-toast');
    if (!t) {
        t = document.createElement('div');
        t.id = 'cart-toast';
        t.style.cssText = 'position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(80px);background:#1a237e;color:white;padding:.65rem 1.25rem;border-radius:50px;font-size:12px;font-weight:600;letter-spacing:.05em;z-index:9999;display:flex;align-items:center;gap:.5rem;box-shadow:0 8px 30px rgba(26,35,126,.4);transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s;opacity:0;pointer-events:none;white-space:nowrap;max-width:90vw;';
        document.body.appendChild(t);
    }
    t.innerHTML = '<i class="fas fa-gem" style="color:#fbbf24;font-size:1rem"></i> Your piece is reserved! <a href="/cart" style="color:#93c5fd;text-decoration:none;margin-left:.5rem;font-size:12px;font-weight:600;">Go to Bag →</a>';
    t.style.opacity = '1';
    t.style.transform = 'translateX(-50%) translateY(0)';
    clearTimeout(t._timeout);
    t._timeout = setTimeout(() => {
        t.style.opacity = '0';
        t.style.transform = 'translateX(-50%) translateY(80px)';
    }, 3000);
}

// ── WISHLIST ──
function updateWishlistBtns(wishlisted) {
    document.querySelectorAll('.wishlist-btn, #mob-wishlist-btn, .wishlist-toggle').forEach(btn=>{
        btn.classList.toggle('wishlisted', wishlisted);
        const icon = btn.querySelector('i');
        if (icon) {
            icon.className = wishlisted ? 'fas fa-heart' : 'far fa-heart';
            icon.style.color = wishlisted ? '#ef4444' : '';
        }
    });
}
function initWishlist() {
    fetch('/wishlist/check?product_id='+PRODUCT_ID,{headers:{'X-CSRF-TOKEN':document.querySelector('meta[name=csrf-token]').content}})
    .then(r=>r.json()).then(d=>{ updateWishlistBtns(d.wishlisted); }).catch(()=>{});
}
function toggleWishlist() {
    fetch('/wishlist/toggle',{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name=csrf-token]').content},body:JSON.stringify({product_id:PRODUCT_ID})})
    .then(r=>{ if(r.status===401){ showLoginModal(); return null; } return r.json(); })
    .then(d=>{ if(!d) return; updateWishlistBtns(d.wishlisted); }).catch(()=>{});
}

// ── IMAGE GALLERY ──
function setMainImage(url, el, type) {
    const main = document.getElementById('gallery-main');
    const vid  = document.getElementById('gallery-main-video');
    if (type === 'variant-video' || type === 'product-video') {
        if (main) main.style.display = 'none';
        if (vid) { vid.src=url; vid.style.display='block'; vid.load(); }
    } else {
        if (vid) { vid.pause(); vid.style.display='none'; }
        if (main) { main.style.opacity='0'; main.style.transition='opacity 0.2s'; setTimeout(()=>{ main.src=url; main.style.display='block'; main.onload=()=>main.style.opacity='1'; if(main.complete) main.style.opacity='1'; },150); }
    }
    document.querySelectorAll('.thumb-btn').forEach(t=>{ t.style.borderColor='#e5e7eb'; });
    if (el) el.style.borderColor='#2563eb';
    document.querySelectorAll('.thumb-item').forEach(t=>{
        t.classList.remove('active');
        const ti=t.querySelector('img');
        if(ti&&(ti.src===url||ti.src===url.split('?')[0])) t.classList.add('active');
    });
}
function mobSetImage(url, el) {
    const main = document.getElementById('mob-gallery-main');
    if (main) { main.style.opacity='0'; setTimeout(()=>{ main.src=url; main.style.display='block'; main.onload=()=>main.style.opacity='1'; if(main.complete) main.style.opacity='1'; },150); }
    document.querySelectorAll('.pd-thumb').forEach(t=>{
        t.classList.remove('active');
        const ti=t.querySelector('img');
        if(ti&&(ti.src===url||ti.src===url.split('?')[0])) t.classList.add('active');
    });
}

function scrollMobThumbs(dir) {
    const track = document.querySelector(".pd-thumbs");
    if (!track) return;
    const thumbW = 72;
    track.scrollBy({ left: dir * thumbW, behavior: "smooth" });
}
function scrollThumbs(dir) {
    const track = document.getElementById("thumb-track");
    if (!track) return;
    const thumbs = track.querySelectorAll('.thumb-btn, .pd-thumb');
    if (!thumbs.length) return;
    const thumbW = thumbs[0].offsetWidth + 8;
    const maxScroll = track.scrollWidth - track.clientWidth;
    if (dir > 0 && track.scrollLeft >= maxScroll - 2) {
        track.scrollTo({ left: 0, behavior: "smooth" });
    } else if (dir < 0 && track.scrollLeft <= 2) {
        track.scrollTo({ left: maxScroll, behavior: "smooth" });
    } else {
        track.scrollBy({ left: dir * thumbW, behavior: "smooth" });
    }
}

function mobSetMedia(url, type, el) {
    const video = document.getElementById("mob-gallery-video");
    const img   = document.getElementById("mob-gallery-main");
    if (type === "variant-video" || type === "product-video") {
        if (video) { video.src = url; video.style.display = "block"; video.play(); }
        if (img)   { img.style.display = "none"; }
    } else {
        if (video) { video.pause(); video.style.display = "none"; }
        if (img)   { img.style.opacity="0"; setTimeout(()=>{ img.src=url; img.style.display="block"; img.onload=()=>img.style.opacity="1"; if(img.complete) img.style.opacity="1"; },150); }
    }
    document.querySelectorAll(".pd-thumb").forEach(t => t.classList.remove("active"));
    if (el) el.classList.add("active");
}

// ── TOAST ──
function showToast(msg) {
    const t=document.createElement('div');
    t.style.cssText='position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;padding:10px 24px;border-radius:8px;font-size:13px;z-index:9999;white-space:nowrap';
    t.textContent=msg; document.body.appendChild(t);
    setTimeout(()=>{ t.style.opacity='0'; t.style.transition='opacity 0.3s'; setTimeout(()=>t.remove(),300); },2500);
}

// ── INIT ──
document.addEventListener('DOMContentLoaded', ()=>{
    initWishlist();
    highlightSizes(0);
    amjFetchPrice();
});

// Reset on bfcache restore
window.addEventListener('pageshow', (e) => {
    const urlSlug = window.location.pathname.split('/products/')[1];
    if (urlSlug && PRODUCT_SLUG !== urlSlug && !sessionStorage.getItem('reloading_'+urlSlug)) {
        sessionStorage.setItem('reloading_'+urlSlug, '1');
        window.location.reload(true);
        return;
    }
    sessionStorage.removeItem('reloading_' + window.location.pathname.split('/products/')[1]);
    currentVariant = 0;
    selectedSizeId = null;
    amjFetchPrice();
});
</script>

<div id="reviews-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;padding:1rem">
  <div style="background:white;border-radius:16px;padding:2rem;max-width:540px;width:100%;max-height:80vh;overflow-y:auto;position:relative">
    <button onclick="document.getElementById('reviews-modal').style.display='none'" style="position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#9ca3af">×</button>
    <h3 style="font-family:'Cormorant Garamond',serif;font-size:1.4rem;margin-bottom:0.5rem;color:#1e3a8a">Customer Reviews</h3>
    <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:1.5rem">
      <span style="color:#f59e0b;font-size:1.2rem">  ☆    ☆    ☆    ☆    ☆  </span>
      <span style="font-size:13px;color:#6b7280">0.0 out of 5 · 0 reviews</span>
    </div>
        <p style="color:#9ca3af;font-size:13px">No reviews yet.</p>
      </div>
</div>

<!-- SEARCH MODAL -->
<div id="search-overlay" style="display:none;position:fixed;inset:0;background:rgba(15,23,42,0.6);z-index:9999;align-items:flex-start;justify-content:center;padding-top:80px" onclick="if(event.target===this)closeSearch()">
  <div style="background:#fff;border-radius:16px;width:100%;max-width:640px;margin:0 1rem;box-shadow:0 24px 60px rgba(15,23,42,0.2);overflow:hidden">
    <div style="display:flex;align-items:center;gap:0.75rem;padding:1rem 1.25rem;border-bottom:1px solid #e2e8f0">
      <i class="fas fa-search" style="color:#94a3b8;font-size:16px;flex-shrink:0"></i>
      <input id="search-input" type="text" placeholder="Search products, categories..." autocomplete="off"
        style="flex:1;border:none;outline:none;font-size:15px;font-family:inherit;color:#0f172a"
        oninput="handleSearch(this.value)">
      <button onclick="closeSearch()" style="background:none;border:none;cursor:pointer;color:#94a3b8;font-size:18px;padding:0 4px">&times;</button>
    </div>
    <div id="search-results" style="max-height:420px;overflow-y:auto;padding:0.75rem">
      <div style="text-align:center;padding:2rem;color:#94a3b8;font-size:13px">Start typing to search...</div>
    </div>
  </div>
</div>
<script>
function openSearch() {
  const overlay = document.getElementById("search-overlay");
  overlay.style.display = "flex";
  setTimeout(() => document.getElementById("search-input").focus(), 100);
}
function closeSearch() {
  document.getElementById("search-overlay").style.display = "none";
  document.getElementById("search-input").value = "";
  document.getElementById("search-results").innerHTML = "<div style='text-align:center;padding:2rem;color:#94a3b8;font-size:13px'>Start typing to search...</div>";
}
document.addEventListener("keydown", e => { if (e.key === "Escape") closeSearch(); });
let searchTimer;
function handleSearch(q) {
  clearTimeout(searchTimer);
  if (!q.trim()) {
    document.getElementById("search-results").innerHTML = "<div style='text-align:center;padding:2rem;color:#94a3b8;font-size:13px'>Start typing to search...</div>";
    return;
  }
  document.getElementById("search-results").innerHTML = "<div style='text-align:center;padding:2rem;color:#94a3b8;font-size:13px'><i class='fas fa-spinner fa-spin'></i> Searching...</div>";
  searchTimer = setTimeout(() => {
    fetch("/search?q=" + encodeURIComponent(q))
      .then(r => r.json())
      .then(data => renderResults(data));
  }, 300);
}
function renderResults(data) {
  const el = document.getElementById("search-results");
  let html = "";
  if (data.categories && data.categories.length) {
    html += "<div style='font-size:9px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:#94a3b8;padding:4px 8px 8px'>Categories</div>";
    data.categories.forEach(c => {
      html += "<a href='/products?cat=" + c.slug + "' style='display:flex;align-items:center;gap:0.75rem;padding:8px;border-radius:8px;text-decoration:none;color:#1e293b'>";
      html += "<div style='width:36px;height:36px;border-radius:6px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;flex-shrink:0'><i class='fas fa-layer-group' style='color:#94a3b8;font-size:13px'></i></div>";
      html += "<span style='font-size:13px;font-weight:500'>" + c.name + "</span></a>";
    });
  }
  if (data.subcategories && data.subcategories.length) {
    html += "<div style='font-size:9px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:#94a3b8;padding:8px'>Subcategories</div>";
    data.subcategories.forEach(s => {
      const catSlug = s.category ? s.category.slug : "";
      html += "<a href='/products?cat=" + catSlug + "&sub=" + s.slug + "' style='display:flex;align-items:center;gap:0.75rem;padding:8px;border-radius:8px;text-decoration:none;color:#1e293b'>";
      html += "<div style='width:36px;height:36px;border-radius:6px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;flex-shrink:0'><i class='fas fa-sitemap' style='color:#94a3b8;font-size:13px'></i></div>";
      html += "<div><div style='font-size:13px;font-weight:500'>" + s.name + "</div><div style='font-size:11px;color:#94a3b8'>" + (s.category ? s.category.name : "") + "</div></div></a>";
    });
  }
  if (data.products && data.products.length) {
    html += "<div style='font-size:9px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:#94a3b8;padding:8px'>Products</div>";
    data.products.forEach(p => {
      const img = p.primary_image ? "/storage/" + p.primary_image : null;
      html += "<a href='/products/" + p.slug + "' style='display:flex;align-items:center;gap:0.75rem;padding:8px;border-radius:8px;text-decoration:none;color:#1e293b'>";
      html += "<div style='width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0;border:1px solid #e2e8f0'>";
      html += img ? "<img src='" + img + "' style='width:100%;height:100%;object-fit:cover'>" : "<div style='width:100%;height:100%;background:#f1f5f9;display:flex;align-items:center;justify-content:center'><i class='fas fa-gem' style='color:#cbd5e1'></i></div>";
      html += "</div><div><div style='font-size:13px;font-weight:500'>" + p.name + "</div><div style='font-size:11px;color:#94a3b8'>" + (p.category ? p.category.name : "") + "</div></div></a>";
    });
  }
  if (!html) {
    html = "<div style='text-align:center;padding:2rem;color:#94a3b8;font-size:13px'>No results found</div>";
  }
  el.innerHTML = html;
}
</script>

<!-- MOBILE TAB BAR -->
<div id="mobile-tabbar" style="display:none;position:fixed;bottom:0;left:0;right:0;z-index:9995;background:#fff;border-top:1px solid #e2e8f0;box-shadow:0 -4px 16px rgba(8,68,112,0.08)">
  <div style="display:grid;grid-template-columns:repeat(5,1fr);height:60px">
    <a href="/" style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:#64748b;font-size:9px;letter-spacing:0.05em;text-transform:uppercase;transition:color 0.2s" class="tab-item ">
      <i class="fas fa-home" style="font-size:18px"></i>
      <span>Home</span>
    </a>
    <a href="/products" style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:#64748b;font-size:9px;letter-spacing:0.05em;text-transform:uppercase;transition:color 0.2s" class="tab-item tab-active">
      <i class="fa-regular fa-gem" style="font-size:18px"></i>
      <span>Collections</span>
    </a>
    <button onclick="openSearch()" style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;cursor:pointer;color:#64748b;font-size:9px;letter-spacing:0.05em;text-transform:uppercase;width:100%">
      <i class="fas fa-search" style="font-size:18px"></i>
      <span>Search</span>
    </button>
    <a href="/wishlist" style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:#64748b;font-size:9px;letter-spacing:0.05em;text-transform:uppercase;transition:color 0.2s" class="tab-item ">
      <i class="far fa-heart" style="font-size:18px"></i>
      <span>Wishlist</span>
    </a>
    <a href="https://wa.me/917600250081" target="_blank" style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:#25D366;font-size:9px;letter-spacing:0.05em;text-transform:uppercase;transition:color 0.2s">
      <i class="fab fa-whatsapp" style="font-size:22px"></i>
      <span>WhatsApp</span>
    </a>
  </div>
</div>
<style>
.tab-active i, .tab-active span { color: #1a237e !important; }
.tab-item:hover i, .tab-item:hover span { color: #1a237e; }
@media(max-width:900px) {
  #mobile-tabbar { display: block !important; }
  body { padding-bottom: 60px; }
}
</style>
</body>
</html>