@extends('layouts.app')

@section('content')

<style>

/* =========================================================
   JEWELL EXCEL — PRODUCT PAGE
========================================================= */

:root {
    --jx-navy: #193653;
    --jx-navy-dark: #10283e;
    --jx-navy-light: #284c6d;

    --jx-gold: #c8a45d;
    --jx-gold-light: #dfc58e;
    --jx-gold-dark: #9d793b;

    --jx-ivory: #f8f6f1;
    --jx-white: #ffffff;

    --jx-text: #1d2730;
    --jx-muted: #70777e;

    --jx-border: #e8e4dc;

    --jx-shadow-sm: 0 8px 25px rgba(16, 40, 62, .07);
    --jx-shadow-md: 0 18px 45px rgba(16, 40, 62, .12);

    --jx-container: 1180px;
}


/* =========================================================
   RESET
========================================================= */

.jx-product-page,
.jx-product-page * {
    box-sizing: border-box;
}

.jx-product-page {
    width: 100%;
    background: var(--jx-white);
    color: var(--jx-text);
    font-family: "Inter", sans-serif;
}

.jx-product-page img {
    max-width: 100%;
    display: block;
}

.jx-product-page a {
    text-decoration: none;
    color: inherit;
}

.jx-product-page button,
.jx-product-page input,
.jx-product-page select {
    font-family: inherit;
}


/* =========================================================
   CONTAINER
========================================================= */

.jx-container {
    width: min(100% - 40px, var(--jx-container));
    margin-inline: auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.jx-breadcrumb {
    background: var(--jx-ivory);
    border-top: 1px solid rgba(200,164,93,.12);
    border-bottom: 1px solid var(--jx-border);
}

.jx-breadcrumb-inner {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.jx-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    list-style: none;

    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.jx-breadcrumb-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jx-breadcrumb-list li:not(:last-child)::after {
    content: "/";
    color: var(--jx-gold);
}

.jx-breadcrumb-list a {
    color: var(--jx-muted);
    transition: .25s ease;
}

.jx-breadcrumb-list a:hover {
    color: var(--jx-gold-dark);
}

.jx-breadcrumb-list .active {
    color: var(--jx-navy);
    font-weight: 600;
}

.jx-breadcrumb-brand {
    color: var(--jx-gold-dark);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}


/* =========================================================
   PRODUCT MAIN
========================================================= */

.jx-product-section {
    padding: 85px 0 100px;
}

.jx-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(400px, .92fr);
    gap: 80px;

    align-items: start;
}


/* =========================================================
   PRODUCT GALLERY
========================================================= */

.jx-gallery {
    min-width: 0;
}

.jx-gallery-main {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1.08;

    background: #f2eee8;

    overflow: hidden;
}

.jx-gallery-main img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    cursor: zoom-in;

    transition:
        transform .6s cubic-bezier(.2,.7,.2,1),
        opacity .25s ease;
}

.jx-gallery-main:hover img {
    transform: scale(1.035);
}


/* Product badges */

.jx-gallery-badge {
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 5;

    background: var(--jx-navy);
    color: white;

    padding: 8px 13px;

    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.jx-gallery-wishlist {
    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 5;

    width: 43px;
    height: 43px;

    border: 1px solid rgba(255,255,255,.7);

    background: rgba(255,255,255,.94);

    color: var(--jx-navy);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;

    transition: .25s ease;
}

.jx-gallery-wishlist:hover,
.jx-gallery-wishlist.active {
    background: var(--jx-gold);
    border-color: var(--jx-gold);
    color: var(--jx-navy);
}


/* Gallery arrows */

.jx-gallery-arrow {
    position: absolute;

    top: 50%;

    width: 42px;
    height: 42px;

    transform: translateY(-50%);

    z-index: 5;

    border: 1px solid rgba(255,255,255,.7);

    background: rgba(255,255,255,.9);

    color: var(--jx-navy);

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .25s ease;
}

.jx-gallery-arrow:hover {
    background: var(--jx-navy);
    color: white;
}

.jx-gallery-prev {
    left: 15px;
}

.jx-gallery-next {
    right: 15px;
}


/* Thumbnails */

.jx-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 12px;

    margin-top: 14px;
}

.jx-thumb {
    position: relative;

    aspect-ratio: 1 / 1;

    padding: 0;

    border: 1px solid var(--jx-border);

    background: #f2eee8;

    overflow: hidden;

    cursor: pointer;

    transition: .25s ease;
}

.jx-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .35s ease;
}

.jx-thumb:hover img {
    transform: scale(1.04);
}

.jx-thumb.active {
    border: 2px solid var(--jx-gold);
}


/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.jx-product-info {
    padding-top: 3px;
}

.jx-product-label {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 16px;

    color: var(--jx-gold-dark);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.jx-product-label::before {
    content: "";

    width: 35px;
    height: 1px;

    background: var(--jx-gold);
}

.jx-product-category {
    color: var(--jx-muted);

    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    margin-bottom: 10px;
}

.jx-product-title {
    font-family: "Playfair Display", serif;

    color: var(--jx-navy);

    font-size: clamp(38px, 4vw, 56px);

    font-weight: 500;

    line-height: 1.08;

    margin-bottom: 16px;
}

.jx-product-title span {
    color: var(--jx-gold-dark);
}


/* Rating */

.jx-rating-row {
    display: flex;
    align-items: center;
    gap: 13px;

    padding-bottom: 22px;

    border-bottom: 1px solid var(--jx-border);
}

.jx-stars {
    color: var(--jx-gold);

    font-size: 13px;

    letter-spacing: 2px;
}

.jx-review-link {
    color: var(--jx-muted);

    font-size: 11px;

    border-bottom: 1px solid var(--jx-border);

    padding-bottom: 2px;
}


/* Price */

.jx-price-area {
    padding: 25px 0;

    border-bottom: 1px solid var(--jx-border);
}

.jx-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
}

.jx-current-price {
    font-family: "Playfair Display", serif;

    color: var(--jx-navy);

    font-size: 30px;
}

.jx-old-price {
    color: #999;

    font-size: 14px;

    text-decoration: line-through;
}

.jx-discount {
    padding: 5px 8px;

    background: #f4eee2;

    color: var(--jx-gold-dark);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.jx-tax-note {
    margin-top: 8px;

    color: var(--jx-muted);

    font-size: 10px;
}


/* Product description */

.jx-short-description {
    padding: 23px 0;

    color: #646b72;

    font-size: 13px;

    line-height: 1.85;
}


/* =========================================================
   OPTIONS
========================================================= */

.jx-option {
    margin-bottom: 23px;
}

.jx-option-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 11px;
}

.jx-option-title {
    color: var(--jx-navy);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.jx-option-selected {
    color: var(--jx-muted);

    font-size: 10px;
}


/* Metal options */

.jx-metal-options {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.jx-metal-btn {
    min-width: 95px;

    padding: 12px 17px;

    border: 1px solid var(--jx-border);

    background: white;

    color: var(--jx-navy);

    font-size: 10px;

    transition: .25s ease;
}

.jx-metal-btn:hover,
.jx-metal-btn.active {
    border-color: var(--jx-gold);
    background: #fbf8f1;
}


/* Size */

.jx-size-options {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.jx-size-btn {
    width: 48px;
    height: 42px;

    border: 1px solid var(--jx-border);

    background: white;

    color: var(--jx-navy);

    font-size: 11px;

    transition: .25s ease;
}

.jx-size-btn:hover,
.jx-size-btn.active {
    background: var(--jx-navy);
    border-color: var(--jx-navy);
    color: white;
}


/* =========================================================
   QUANTITY + CART
========================================================= */

.jx-purchase-row {
    display: grid;

    grid-template-columns: 125px 1fr;

    gap: 12px;

    margin-top: 30px;
}

.jx-quantity {
    height: 55px;

    border: 1px solid var(--jx-border);

    display: flex;
    align-items: center;
}

.jx-quantity button {
    width: 38px;
    height: 100%;

    border: none;

    background: white;

    color: var(--jx-navy);

    font-size: 13px;
}

.jx-quantity button:hover {
    color: var(--jx-gold-dark);
}

.jx-quantity input {
    width: 49px;
    height: 100%;

    border: none;

    outline: none;

    background: white;

    color: var(--jx-navy);

    text-align: center;

    font-size: 12px;
}


.jx-add-cart {
    min-height: 55px;

    border: 1px solid var(--jx-navy);

    background: var(--jx-navy);

    color: white;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;

    transition: .3s ease;
}

.jx-add-cart:hover {
    background: var(--jx-gold);
    border-color: var(--jx-gold);
    color: var(--jx-navy);
}

.jx-buy-now {
    width: 100%;

    min-height: 53px;

    margin-top: 11px;

    border: 1px solid var(--jx-gold);

    background: transparent;

    color: var(--jx-navy);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;

    transition: .3s ease;
}

.jx-buy-now:hover {
    background: var(--jx-gold);
    color: var(--jx-navy);
}


/* Enquiry */

.jx-enquiry {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    width: 100%;

    margin-top: 12px;

    min-height: 48px;

    border: 1px solid var(--jx-border);

    background: var(--jx-ivory);

    color: var(--jx-navy);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;

    transition: .25s ease;
}

.jx-enquiry:hover {
    border-color: var(--jx-gold);
    color: var(--jx-gold-dark);
}


/* =========================================================
   BENEFITS
========================================================= */

.jx-benefits {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    border-top: 1px solid var(--jx-border);

    border-bottom: 1px solid var(--jx-border);

    margin-top: 30px;
}

.jx-benefit {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 17px 10px;

    border-bottom: 1px solid var(--jx-border);
}

.jx-benefit:nth-child(odd) {
    border-right: 1px solid var(--jx-border);
}

.jx-benefit:nth-last-child(-n+2) {
    border-bottom: none;
}

.jx-benefit i {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--jx-gold-dark);

    border: 1px solid var(--jx-gold-light);

    border-radius: 50%;

    font-size: 11px;
}

.jx-benefit strong {
    display: block;

    color: var(--jx-navy);

    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.jx-benefit span {
    display: block;

    margin-top: 2px;

    color: var(--jx-muted);

    font-size: 9px;
}


/* =========================================================
   PRODUCT META
========================================================= */

.jx-product-meta {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px 25px;

    margin-top: 22px;
}

.jx-meta-item {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding-bottom: 8px;

    border-bottom: 1px dashed var(--jx-border);

    font-size: 10px;
}

.jx-meta-item span:first-child {
    color: var(--jx-muted);
}

.jx-meta-item span:last-child {
    color: var(--jx-navy);

    font-weight: 600;
}


/* =========================================================
   TRUST STRIP
========================================================= */

.jx-trust-strip {
    background: var(--jx-navy);

    color: white;

    padding: 0;
}

.jx-trust-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);
}

.jx-trust-item {
    min-height: 110px;

    padding: 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    border-right: 1px solid rgba(255,255,255,.1);
}

.jx-trust-item:last-child {
    border-right: none;
}

.jx-trust-item i {
    color: var(--jx-gold);

    font-size: 19px;
}

.jx-trust-item strong {
    display: block;

    margin-bottom: 4px;

    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.jx-trust-item small {
    color: rgba(255,255,255,.58);

    font-size: 9px;
}


/* =========================================================
   DETAILS SECTION
========================================================= */

.jx-details-section {
    padding: 100px 0;

    background: var(--jx-white);
}

.jx-details-layout {
    display: grid;

    grid-template-columns: .7fr 1.3fr;

    gap: 80px;

    align-items: start;
}

.jx-details-heading .label {
    display: block;

    margin-bottom: 13px;

    color: var(--jx-gold-dark);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.jx-details-heading h2 {
    font-family: "Playfair Display", serif;

    color: var(--jx-navy);

    font-size: 42px;

    font-weight: 500;

    line-height: 1.15;
}

.jx-details-heading h2 span {
    color: var(--jx-gold-dark);
}


/* Accordion */

.jx-accordion {
    border-top: 1px solid var(--jx-border);
}

.jx-accordion-item {
    border-bottom: 1px solid var(--jx-border);
}

.jx-accordion-button {
    width: 100%;

    min-height: 68px;

    padding: 0;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: none;

    background: transparent;

    color: var(--jx-navy);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;

    text-align: left;
}

.jx-accordion-button i {
    color: var(--jx-gold-dark);

    transition: transform .3s ease;
}

.jx-accordion-item.active .jx-accordion-button i {
    transform: rotate(180deg);
}

.jx-accordion-content {
    max-height: 0;

    overflow: hidden;

    transition: max-height .4s ease;
}

.jx-accordion-content-inner {
    padding: 0 0 24px;

    color: var(--jx-muted);

    font-size: 12px;

    line-height: 1.9;
}


/* =========================================================
   FEATURE IMAGE
========================================================= */

.jx-feature-section {
    background: var(--jx-ivory);

    padding: 100px 0;
}

.jx-feature-layout {
    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 500px;
}

.jx-feature-image {
    overflow: hidden;
}

.jx-feature-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}

.jx-feature-layout:hover .jx-feature-image img {
    transform: scale(1.025);
}

.jx-feature-content {
    padding: 70px;

    background: var(--jx-navy);

    color: white;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.jx-feature-content .label {
    color: var(--jx-gold-light);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;

    margin-bottom: 15px;
}

.jx-feature-content h2 {
    font-family: "Playfair Display", serif;

    font-size: 45px;

    font-weight: 500;

    line-height: 1.1;

    margin-bottom: 22px;
}

.jx-feature-content h2 span {
    color: var(--jx-gold-light);
}

.jx-feature-content p {
    color: rgba(255,255,255,.72);

    font-size: 12px;

    line-height: 1.9;

    max-width: 480px;
}

.jx-feature-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: fit-content;

    margin-top: 28px;

    padding: 13px 22px;

    border: 1px solid rgba(255,255,255,.35);

    color: white;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    transition: .3s ease;
}

.jx-feature-button:hover {
    background: var(--jx-gold);
    border-color: var(--jx-gold);
    color: var(--jx-navy);
}


/* =========================================================
   RELATED PRODUCTS
========================================================= */

.jx-related-section {
    padding: 105px 0;

    background: var(--jx-white);
}

.jx-section-heading {
    text-align: center;

    max-width: 650px;

    margin: 0 auto 50px;
}

.jx-section-label {
    color: var(--jx-gold-dark);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;

    margin-bottom: 12px;
}

.jx-section-title {
    font-family: "Playfair Display", serif;

    color: var(--jx-navy);

    font-size: 43px;

    line-height: 1.15;

    font-weight: 500;

    margin-bottom: 12px;
}

.jx-section-title span {
    color: var(--jx-gold-dark);
}

.jx-section-description {
    color: var(--jx-muted);

    font-size: 12px;

    line-height: 1.8;
}


/* Related grid */

.jx-related-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}

.jx-related-card {
    background: var(--jx-white);

    border: 1px solid var(--jx-border);

    transition: .3s ease;
}

.jx-related-card:hover {
    transform: translateY(-5px);

    box-shadow: var(--jx-shadow-sm);
}

.jx-related-image {
    position: relative;

    aspect-ratio: 1 / 1.12;

    overflow: hidden;

    background: #f3eee7;
}

.jx-related-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .55s ease;
}

.jx-related-card:hover .jx-related-image img {
    transform: scale(1.05);
}

.jx-related-heart {
    position: absolute;

    right: 11px;
    top: 11px;

    width: 34px;
    height: 34px;

    border: none;

    background: rgba(255,255,255,.92);

    color: var(--jx-navy);

    display: flex;
    align-items: center;
    justify-content: center;
}

.jx-related-info {
    padding: 18px;
}

.jx-related-category {
    color: var(--jx-gold-dark);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    margin-bottom: 6px;
}

.jx-related-name {
    color: var(--jx-navy);

    font-family: "Playfair Display", serif;

    font-size: 19px;

    font-weight: 500;

    margin-bottom: 6px;
}

.jx-related-stars {
    color: var(--jx-gold);

    font-size: 9px;

    letter-spacing: 1px;

    margin-bottom: 9px;
}

.jx-related-price {
    color: var(--jx-navy);

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   ENQUIRY MODAL
========================================================= */

.jx-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    background: rgba(16,40,62,.68);

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    opacity: 0;

    visibility: hidden;

    transition: .3s ease;
}

.jx-modal.active {
    opacity: 1;
    visibility: visible;
}

.jx-modal-box {
    position: relative;

    width: min(100%, 520px);

    background: white;

    padding: 45px;

    transform: translateY(20px);

    transition: .3s ease;

    box-shadow: var(--jx-shadow-md);
}

.jx-modal.active .jx-modal-box {
    transform: translateY(0);
}

.jx-modal-close {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 38px;
    height: 38px;

    border: 1px solid var(--jx-border);

    background: white;

    color: var(--jx-navy);
}

.jx-modal-label {
    color: var(--jx-gold-dark);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;

    margin-bottom: 12px;
}

.jx-modal-title {
    color: var(--jx-navy);

    font-family: "Playfair Display", serif;

    font-size: 34px;

    font-weight: 500;

    margin-bottom: 10px;
}

.jx-modal-description {
    color: var(--jx-muted);

    font-size: 12px;

    line-height: 1.8;

    margin-bottom: 25px;
}

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

.jx-form-group label {
    display: block;

    color: var(--jx-navy);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    margin-bottom: 7px;
}

.jx-form-group input,
.jx-form-group textarea {
    width: 100%;

    border: 1px solid var(--jx-border);

    background: #fff;

    padding: 13px 14px;

    outline: none;

    font-size: 12px;

    color: var(--jx-text);

    transition: .25s ease;
}

.jx-form-group textarea {
    resize: vertical;

    min-height: 100px;
}

.jx-form-group input:focus,
.jx-form-group textarea:focus {
    border-color: var(--jx-gold);
}

.jx-modal-submit {
    width: 100%;

    min-height: 48px;

    border: 1px solid var(--jx-navy);

    background: var(--jx-navy);

    color: white;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    transition: .3s ease;
}

.jx-modal-submit:hover {
    background: var(--jx-gold);

    border-color: var(--jx-gold);

    color: var(--jx-navy);
}


/* =========================================================
   TOAST
========================================================= */

.jx-toast {
    position: fixed;

    left: 50%;

    bottom: 30px;

    z-index: 10000;

    transform: translate(-50%, 30px);

    background: var(--jx-navy);

    color: white;

    padding: 14px 23px;

    font-size: 10px;

    letter-spacing: .7px;

    box-shadow: var(--jx-shadow-md);

    opacity: 0;

    visibility: hidden;

    transition: .3s ease;
}

.jx-toast.show {
    opacity: 1;

    visibility: visible;

    transform: translate(-50%, 0);
}


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

@media (max-width: 1050px) {

    .jx-product-layout {
        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }

    .jx-product-title {
        font-size: 43px;
    }

    .jx-feature-content {
        padding: 45px;
    }

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

}


@media (max-width: 800px) {

    .jx-container {
        width: min(100% - 30px, var(--jx-container));
    }

    .jx-breadcrumb-inner {
        min-height: 55px;
    }

    .jx-breadcrumb-brand {
        display: none;
    }

    .jx-product-section {
        padding: 45px 0 65px;
    }

    .jx-product-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .jx-product-info {
        padding-top: 0;
    }

    .jx-product-title {
        font-size: 42px;
    }

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

    .jx-trust-item {
        min-height: 90px;

        border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .jx-trust-item:nth-child(2) {
        border-right: none;
    }

    .jx-details-section {
        padding: 70px 0;
    }

    .jx-details-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .jx-feature-section {
        padding: 70px 0;
    }

    .jx-feature-layout {
        grid-template-columns: 1fr;
    }

    .jx-feature-image {
        min-height: 400px;
    }

    .jx-feature-content {
        padding: 50px 30px;
    }

    .jx-related-section {
        padding: 70px 0;
    }

}


@media (max-width: 550px) {

    .jx-breadcrumb-list {
        font-size: 8px;

        gap: 7px;
    }

    .jx-breadcrumb-list li {
        gap: 7px;
    }

    .jx-gallery-thumbs {
        gap: 7px;
    }

    .jx-gallery-arrow {
        width: 37px;
        height: 37px;
    }

    .jx-gallery-badge {
        top: 12px;
        left: 12px;
    }

    .jx-gallery-wishlist {
        top: 12px;
        right: 12px;
    }

    .jx-product-title {
        font-size: 37px;
    }

    .jx-current-price {
        font-size: 27px;
    }

    .jx-purchase-row {
        grid-template-columns: 105px 1fr;
    }

    .jx-quantity button {
        width: 32px;
    }

    .jx-quantity input {
        width: 41px;
    }

    .jx-benefits {
        grid-template-columns: 1fr;
    }

    .jx-benefit {
        border-right: none !important;

        border-bottom: 1px solid var(--jx-border) !important;
    }

    .jx-benefit:last-child {
        border-bottom: none !important;
    }

    .jx-product-meta {
        grid-template-columns: 1fr;
    }

    .jx-trust-grid {
        grid-template-columns: 1fr 1fr;
    }

    .jx-trust-item {
        padding: 15px 10px;

        justify-content: flex-start;
    }

    .jx-trust-item strong {
        font-size: 8px;
    }

    .jx-trust-item small {
        font-size: 8px;
    }

    .jx-details-heading h2 {
        font-size: 36px;
    }

    .jx-section-title {
        font-size: 36px;
    }

    .jx-related-grid {
        grid-template-columns: 1fr 1fr;

        gap: 10px;
    }

    .jx-related-info {
        padding: 12px;
    }

    .jx-related-name {
        font-size: 16px;
    }

    .jx-modal-box {
        padding: 35px 22px;
    }

}

</style>


<div class="jx-product-page">


    <!-- =====================================================
         BREADCRUMB
    ====================================================== -->

    <section class="jx-breadcrumb">

        <div class="jx-container">

            <div class="jx-breadcrumb-inner">

                <ul class="jx-breadcrumb-list">

                    <li>
                        <a href="{{ url('/') }}">
                            Home
                        </a>
                    </li>

                    <li>
                        <a href="{{ url('/products') }}">
                            Products
                        </a>
                    </li>

                    <li>
                        <span class="active">
                            Classic Solitaire
                        </span>
                    </li>

                </ul>

                <div class="jx-breadcrumb-brand">
                    Jewell Excel
                </div>

            </div>

        </div>

    </section>



    <!-- =====================================================
         PRODUCT SECTION
    ====================================================== -->

    <section class="jx-product-section">

        <div class="jx-container">

            <div class="jx-product-layout">


                <!-- =================================================
                     PRODUCT GALLERY
                ================================================== -->

                <div class="jx-gallery">

                    <div class="jx-gallery-main">

                        <span class="jx-gallery-badge">
                            Bestseller
                        </span>

                        <button class="jx-gallery-wishlist"
                                id="galleryWishlist"
                                aria-label="Add to wishlist">

                            <i class="fa-regular fa-heart"></i>

                        </button>


                        <button class="jx-gallery-arrow jx-gallery-prev"
                                id="galleryPrev"
                                aria-label="Previous image">

                            <i class="fa-solid fa-chevron-left"></i>

                        </button>


                        <img id="mainProductImage"
                             src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?auto=format&fit=crop&w=1200&q=90"
                             alt="Classic Solitaire Ring">


                        <button class="jx-gallery-arrow jx-gallery-next"
                                id="galleryNext"
                                aria-label="Next image">

                            <i class="fa-solid fa-chevron-right"></i>

                        </button>

                    </div>


                    <!-- Thumbnails -->

                    <div class="jx-gallery-thumbs">

                        <button class="jx-thumb active"
                                data-image="https://images.unsplash.com/photo-1605100804763-247f67b3557e?auto=format&fit=crop&w=1200&q=90">

                            <img src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?auto=format&fit=crop&w=400&q=80"
                                 alt="Classic Solitaire Ring">


                        </button>


                        <button class="jx-thumb"
                                data-image="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=1200&q=90">

                            <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=400&q=80"
                                 alt="Gold Jewellery">

                        </button>


                        <button class="jx-thumb"
                                data-image="https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?auto=format&fit=crop&w=1200&q=90">

                            <img src="https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?auto=format&fit=crop&w=400&q=80"
                                 alt="Diamond Earrings">

                        </button>


                        <button class="jx-thumb"
                                data-image="https://images.unsplash.com/photo-1611652022419-a9419f74343d?auto=format&fit=crop&w=1200&q=90">

                            <img src="https://images.unsplash.com/photo-1611652022419-a9419f74343d?auto=format&fit=crop&w=400&q=80"
                                 alt="Gold Bracelet">

                        </button>

                    </div>

                </div>



                <!-- =================================================
                     PRODUCT INFORMATION
                ================================================== -->

                <div class="jx-product-info">

                    <div class="jx-product-label">
                        Fine Jewellery
                    </div>


                    <div class="jx-product-category">
                        Rings / Diamond Collection
                    </div>


                    <h1 class="jx-product-title">
                        Classic
                        <span>Solitaire.</span>
                    </h1>


                    <!-- Rating -->

                    <div class="jx-rating-row">

                        <div class="jx-stars">
                            ★★★★★
                        </div>

                        <a href="#reviews"
                           class="jx-review-link">

                            4.9 / 5 · 28 Reviews

                        </a>

                    </div>


                    <!-- Price -->

                    <div class="jx-price-area">

                        <div class="jx-price-row">

                            <div class="jx-current-price">
                                ₹48,900
                            </div>

                            <div class="jx-old-price">
                                ₹55,000
                            </div>

                            <div class="jx-discount">
                                11% Off
                            </div>

                        </div>

                        <div class="jx-tax-note">
                            Inclusive of applicable taxes
                        </div>

                    </div>


                    <!-- Description -->

                    <div class="jx-short-description">

                        A timeless solitaire ring designed with refined proportions,
                        exceptional brilliance and understated elegance. Crafted to
                        celebrate meaningful moments and become a cherished part
                        of your story.

                    </div>


                    <!-- Metal -->

                    <div class="jx-option">

                        <div class="jx-option-header">

                            <span class="jx-option-title">
                                Metal
                            </span>

                            <span class="jx-option-selected"
                                  id="selectedMetal">
                                18K Yellow Gold
                            </span>

                        </div>


                        <div class="jx-metal-options">

                            <button class="jx-metal-btn active"
                                    data-metal="18K Yellow Gold">

                                18K Yellow Gold

                            </button>

                            <button class="jx-metal-btn"
                                    data-metal="18K White Gold">

                                18K White Gold

                            </button>

                            <button class="jx-metal-btn"
                                    data-metal="18K Rose Gold">

                                18K Rose Gold

                            </button>

                        </div>

                    </div>


                    <!-- Size -->

                    <div class="jx-option">

                        <div class="jx-option-header">

                            <span class="jx-option-title">
                                Ring Size
                            </span>

                            <a href="#size-guide"
                               class="jx-option-selected">
                                Size Guide
                            </a>

                        </div>


                        <div class="jx-size-options">

                            <button class="jx-size-btn">
                                10
                            </button>

                            <button class="jx-size-btn">
                                12
                            </button>

                            <button class="jx-size-btn active">
                                14
                            </button>

                            <button class="jx-size-btn">
                                16
                            </button>

                            <button class="jx-size-btn">
                                18
                            </button>

                            <button class="jx-size-btn">
                                20
                            </button>

                        </div>

                    </div>


                    <!-- Purchase -->

                    <div class="jx-purchase-row">

                        <div class="jx-quantity">

                            <button type="button"
                                    id="qtyMinus">

                                <i class="fa-solid fa-minus"></i>

                            </button>

                            <input type="number"
                                   id="productQuantity"
                                   value="1"
                                   min="1"
                                   max="10"
                                   readonly>

                            <button type="button"
                                    id="qtyPlus">

                                <i class="fa-solid fa-plus"></i>

                            </button>

                        </div>


                        <button class="jx-add-cart"
                                id="addToCart">

                            <i class="fa-solid fa-bag-shopping"></i>

                            &nbsp; Add to Cart

                        </button>

                    </div>


                    <button class="jx-buy-now"
                            id="buyNow">

                        Buy It Now

                    </button>


                    <button class="jx-enquiry"
                            id="enquiryButton">

                        <i class="fa-regular fa-message"></i>

                        Enquire About This Jewellery

                    </button>


                    <!-- Benefits -->

                    <div class="jx-benefits">

                        <div class="jx-benefit">

                            <i class="fa-solid fa-certificate"></i>

                            <div>

                                <strong>
                                    Certified Jewellery
                                </strong>

                                <span>
                                    Authentic & verified
                                </span>

                            </div>

                        </div>


                        <div class="jx-benefit">

                            <i class="fa-solid fa-shield-halved"></i>

                            <div>

                                <strong>
                                    Secure Payment
                                </strong>

                                <span>
                                    100% secure checkout
                                </span>

                            </div>

                        </div>


                        <div class="jx-benefit">

                            <i class="fa-solid fa-truck-fast"></i>

                            <div>

                                <strong>
                                    Insured Delivery
                                </strong>

                                <span>
                                    Safe doorstep delivery
                                </span>

                            </div>

                        </div>


                        <div class="jx-benefit">

                            <i class="fa-solid fa-rotate-left"></i>

                            <div>

                                <strong>
                                    Easy Returns
                                </strong>

                                <span>
                                    Simple return process
                                </span>

                            </div>

                        </div>

                    </div>


                    <!-- Product Metadata -->

                    <div class="jx-product-meta">

                        <div class="jx-meta-item">

                            <span>
                                SKU
                            </span>

                            <span>
                                JX-RG-001
                            </span>

                        </div>


                        <div class="jx-meta-item">

                            <span>
                                Collection
                            </span>

                            <span>
                                Signature
                            </span>

                        </div>


                        <div class="jx-meta-item">

                            <span>
                                Availability
                            </span>

                            <span>
                                In Stock
                            </span>

                        </div>


                        <div class="jx-meta-item">

                            <span>
                                Delivery
                            </span>

                            <span>
                                5–7 Days
                            </span>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>



    <!-- =====================================================
         TRUST STRIP
    ====================================================== -->

    <section class="jx-trust-strip">

        <div class="jx-container">

            <div class="jx-trust-grid">

                <div class="jx-trust-item">

                    <i class="fa-solid fa-gem"></i>

                    <div>

                        <strong>
                            Premium Quality
                        </strong>

                        <small>
                            Finest materials
                        </small>

                    </div>

                </div>


                <div class="jx-trust-item">

                    <i class="fa-solid fa-shield-halved"></i>

                    <div>

                        <strong>
                            Secure Payments
                        </strong>

                        <small>
                            Safe checkout
                        </small>

                    </div>

                </div>


                <div class="jx-trust-item">

                    <i class="fa-solid fa-truck"></i>

                    <div>

                        <strong>
                            Insured Delivery
                        </strong>

                        <small>
                            Protected shipping
                        </small>

                    </div>

                </div>


                <div class="jx-trust-item">

                    <i class="fa-solid fa-headset"></i>

                    <div>

                        <strong>
                            Dedicated Support
                        </strong>

                        <small>
                            We're here to help
                        </small>

                    </div>

                </div>

            </div>

        </div>

    </section>



    <!-- =====================================================
         PRODUCT DETAILS
    ====================================================== -->

    <section class="jx-details-section">

        <div class="jx-container">

            <div class="jx-details-layout">


                <div class="jx-details-heading">

                    <span class="label">
                        Product Information
                    </span>

                    <h2>
                        Details that
                        <span>matter.</span>
                    </h2>

                </div>


                <div class="jx-accordion">


                    <!-- Description -->

                    <div class="jx-accordion-item active">

                        <button class="jx-accordion-button">

                            Product Description

                            <i class="fa-solid fa-chevron-down"></i>

                        </button>

                        <div class="jx-accordion-content">

                            <div class="jx-accordion-content-inner">

                                The Classic Solitaire is designed for those who
                                appreciate refined jewellery with timeless appeal.
                                Its elegant silhouette combines sophisticated
                                craftsmanship with a clean contemporary finish.

                                <br><br>

                                Every detail is carefully considered to ensure
                                exceptional comfort, brilliance and lasting beauty.

                            </div>

                        </div>

                    </div>


                    <!-- Materials -->

                    <div class="jx-accordion-item">

                        <button class="jx-accordion-button">

                            Materials & Craftsmanship

                            <i class="fa-solid fa-chevron-down"></i>

                        </button>

                        <div class="jx-accordion-content">

                            <div class="jx-accordion-content-inner">

                                Crafted using premium-quality materials with
                                carefully selected stones and precision finishing.
                                Our jewellery is designed to deliver lasting
                                elegance and everyday comfort.

                            </div>

                        </div>

                    </div>


                    <!-- Delivery -->

                    <div class="jx-accordion-item">

                        <button class="jx-accordion-button">

                            Delivery & Returns

                            <i class="fa-solid fa-chevron-down"></i>

                        </button>

                        <div class="jx-accordion-content">

                            <div class="jx-accordion-content-inner">

                                Your jewellery is securely packed and shipped
                                using insured delivery services.

                                <br><br>

                                Estimated delivery time:
                                <strong>5–7 business days.</strong>

                                <br><br>

                                Please contact our customer care team for
                                information regarding returns and exchanges.

                            </div>

                        </div>

                    </div>


                    <!-- Care -->

                    <div class="jx-accordion-item">

                        <button class="jx-accordion-button">

                            Jewellery Care

                            <i class="fa-solid fa-chevron-down"></i>

                        </button>

                        <div class="jx-accordion-content">

                            <div class="jx-accordion-content-inner">

                                Store your jewellery in a soft pouch or jewellery
                                box when not in use. Avoid direct contact with
                                perfumes, chemicals and harsh cleaning products.

                                <br><br>

                                Gently clean with a soft, lint-free cloth to
                                maintain its natural brilliance.

                            </div>

                        </div>

                    </div>


                </div>

            </div>

        </div>

    </section>



    <!-- =====================================================
         FEATURE SECTION
    ====================================================== -->

    <section class="jx-feature-section">

        <div class="jx-container">

            <div class="jx-feature-layout">


                <div class="jx-feature-image">

                    <img src="https://images.unsplash.com/photo-1603561591411-07134e71a2a9?auto=format&fit=crop&w=1200&q=90"
                         alt="Fine jewellery craftsmanship">

                </div>


                <div class="jx-feature-content">

                    <div class="label">
                        The Jewell Excel Difference
                    </div>

                    <h2>
                        Precision meets
                        <span>timeless beauty.</span>
                    </h2>

                    <p>

                        Every Jewell Excel creation begins with an idea,
                        brought to life through careful craftsmanship,
                        considered proportions and refined detailing.

                        <br><br>

                        We believe true luxury is found in the details —
                        the finishing, the comfort and the feeling that
                        stays with you long after the occasion.

                    </p>

                    <a href="{{ url('/about') }}"
                       class="jx-feature-button">

                        Discover Our Story

                    </a>

                </div>

            </div>

        </div>

    </section>



    <!-- =====================================================
         RELATED PRODUCTS
    ====================================================== -->

    <section class="jx-related-section">

        <div class="jx-container">


            <div class="jx-section-heading">

                <div class="jx-section-label">
                    You may also like
                </div>

                <h2 class="jx-section-title">
                    Complete your
                    <span>collection.</span>
                </h2>

                <p class="jx-section-description">

                    Discover more refined pieces designed to complement
                    your personal style.

                </p>

            </div>


            <div class="jx-related-grid">


                <!-- Product 1 -->

                <article class="jx-related-card">

                    <div class="jx-related-image">

                        <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=800&q=85"
                             alt="Signature Gold Necklace">

                        <button class="jx-related-heart"
                                aria-label="Add to wishlist">

                            <i class="fa-regular fa-heart"></i>

                        </button>

                    </div>

                    <div class="jx-related-info">

                        <div class="jx-related-category">
                            Necklaces
                        </div>

                        <h3 class="jx-related-name">
                            Signature Gold
                        </h3>

                        <div class="jx-related-stars">
                            ★★★★★
                        </div>

                        <div class="jx-related-price">
                            ₹72,500
                        </div>

                    </div>

                </article>


                <!-- Product 2 -->

                <article class="jx-related-card">

                    <div class="jx-related-image">

                        <img src="https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?auto=format&fit=crop&w=800&q=85"
                             alt="Pearl Drop Earrings">

                        <button class="jx-related-heart"
                                aria-label="Add to wishlist">

                            <i class="fa-regular fa-heart"></i>

                        </button>

                    </div>

                    <div class="jx-related-info">

                        <div class="jx-related-category">
                            Earrings
                        </div>

                        <h3 class="jx-related-name">
                            Pearl Drop
                        </h3>

                        <div class="jx-related-stars">
                            ★★★★★
                        </div>

                        <div class="jx-related-price">
                            ₹31,800
                        </div>

                    </div>

                </article>


                <!-- Product 3 -->

                <article class="jx-related-card">

                    <div class="jx-related-image">

                        <img src="https://images.unsplash.com/photo-1611652022419-a9419f74343d?auto=format&fit=crop&w=800&q=85"
                             alt="Heritage Gold Bracelet">

                        <button class="jx-related-heart"
                                aria-label="Add to wishlist">

                            <i class="fa-regular fa-heart"></i>

                        </button>

                    </div>

                    <div class="jx-related-info">

                        <div class="jx-related-category">
                            Bracelets
                        </div>

                        <h3 class="jx-related-name">
                            Heritage Gold
                        </h3>

                        <div class="jx-related-stars">
                            ★★★★★
                        </div>

                        <div class="jx-related-price">
                            ₹58,400
                        </div>

                    </div>

                </article>


                <!-- Product 4 -->

                <article class="jx-related-card">

                    <div class="jx-related-image">

                        <img src="https://images.unsplash.com/photo-1635767798638-3e25273a8236?auto=format&fit=crop&w=800&q=85"
                             alt="Diamond Studs">

                        <button class="jx-related-heart"
                                aria-label="Add to wishlist">

                            <i class="fa-regular fa-heart"></i>

                        </button>

                    </div>

                    <div class="jx-related-info">

                        <div class="jx-related-category">
                            Earrings
                        </div>

                        <h3 class="jx-related-name">
                            Diamond Studs
                        </h3>

                        <div class="jx-related-stars">
                            ★★★★★
                        </div>

                        <div class="jx-related-price">
                            ₹39,500
                        </div>

                    </div>

                </article>


            </div>

        </div>

    </section>



    <!-- =====================================================
         ENQUIRY MODAL
    ====================================================== -->

    <div class="jx-modal"
         id="enquiryModal">

        <div class="jx-modal-box">

            <button class="jx-modal-close"
                    id="closeEnquiry">

                <i class="fa-solid fa-xmark"></i>

            </button>


            <div class="jx-modal-label">
                Jewellery Enquiry
            </div>

            <h2 class="jx-modal-title">
                Interested in this piece?
            </h2>

            <p class="jx-modal-description">

                Share your details and our jewellery specialist
                will contact you regarding this product.

            </p>


            <form id="enquiryForm">


                <div class="jx-form-group">

                    <label>
                        Your Name
                    </label>

                    <input type="text"
                           name="name"
                           placeholder="Enter your name"
                           required>

                </div>


                <div class="jx-form-group">

                    <label>
                        Phone Number
                    </label>

                    <input type="tel"
                           name="phone"
                           placeholder="Enter your phone number"
                           required>

                </div>


                <div class="jx-form-group">

                    <label>
                        Email Address
                    </label>

                    <input type="email"
                           name="email"
                           placeholder="Enter your email">

                </div>


                <div class="jx-form-group">

                    <label>
                        Message
                    </label>

                    <textarea name="message"
                              placeholder="Tell us how we can help..."></textarea>

                </div>


                <button type="submit"
                        class="jx-modal-submit">

                    Send Enquiry

                </button>

            </form>

        </div>

    </div>



    <!-- =====================================================
         TOAST
    ====================================================== -->

    <div class="jx-toast"
         id="jxToast">

        Added to your shopping bag.

    </div>


</div>



<script>

document.addEventListener("DOMContentLoaded", function () {


    /* =====================================================
       PRODUCT GALLERY
    ===================================================== */

    const mainImage =
        document.getElementById("mainProductImage");

    const thumbnails =
        document.querySelectorAll(".jx-thumb");

    const previousButton =
        document.getElementById("galleryPrev");

    const nextButton =
        document.getElementById("galleryNext");


    let currentImage = 0;


    const imageList = Array.from(thumbnails).map(function (thumb) {

        return thumb.dataset.image;

    });


    function changeImage(index) {

        if (index < 0) {
            index = imageList.length - 1;
        }

        if (index >= imageList.length) {
            index = 0;
        }


        currentImage = index;


        mainImage.style.opacity = "0";


        setTimeout(function () {

            mainImage.src = imageList[index];

            mainImage.style.opacity = "1";

        }, 150);


        thumbnails.forEach(function (thumb, thumbIndex) {

            thumb.classList.toggle(
                "active",
                thumbIndex === index
            );

        });

    }


    thumbnails.forEach(function (thumb, index) {

        thumb.addEventListener("click", function () {

            changeImage(index);

        });

    });


    previousButton.addEventListener("click", function () {

        changeImage(currentImage - 1);

    });


    nextButton.addEventListener("click", function () {

        changeImage(currentImage + 1);

    });



    /* =====================================================
       KEYBOARD GALLERY CONTROL
    ===================================================== */

    document.addEventListener("keydown", function (event) {

        if (event.key === "ArrowLeft") {

            changeImage(currentImage - 1);

        }

        if (event.key === "ArrowRight") {

            changeImage(currentImage + 1);

        }

    });



    /* =====================================================
       METAL SELECTION
    ===================================================== */

    const metalButtons =
        document.querySelectorAll(".jx-metal-btn");

    const selectedMetal =
        document.getElementById("selectedMetal");


    metalButtons.forEach(function (button) {

        button.addEventListener("click", function () {

            metalButtons.forEach(function (item) {

                item.classList.remove("active");

            });


            button.classList.add("active");


            selectedMetal.textContent =
                button.dataset.metal;

        });

    });



    /* =====================================================
       SIZE SELECTION
    ===================================================== */

    const sizeButtons =
        document.querySelectorAll(".jx-size-btn");


    sizeButtons.forEach(function (button) {

        button.addEventListener("click", function () {

            sizeButtons.forEach(function (item) {

                item.classList.remove("active");

            });


            button.classList.add("active");

        });

    });



    /* =====================================================
       QUANTITY
    ===================================================== */

    const quantityInput =
        document.getElementById("productQuantity");

    const minusButton =
        document.getElementById("qtyMinus");

    const plusButton =
        document.getElementById("qtyPlus");


    minusButton.addEventListener("click", function () {

        let quantity =
            parseInt(quantityInput.value);

        if (quantity > 1) {

            quantity--;

            quantityInput.value = quantity;

        }

    });


    plusButton.addEventListener("click", function () {

        let quantity =
            parseInt(quantityInput.value);

        if (quantity < 10) {

            quantity++;

            quantityInput.value = quantity;

        }

    });



    /* =====================================================
       WISHLIST
    ===================================================== */

    const wishlistButton =
        document.getElementById("galleryWishlist");


    wishlistButton.addEventListener("click", function () {

        this.classList.toggle("active");


        const icon =
            this.querySelector("i");


        if (this.classList.contains("active")) {

            icon.classList.remove("fa-regular");

            icon.classList.add("fa-solid");

            showToast("Added to your wishlist");

        } else {

            icon.classList.remove("fa-solid");

            icon.classList.add("fa-regular");

            showToast("Removed from your wishlist");

        }

    });



    /* =====================================================
       RELATED WISHLIST
    ===================================================== */

    document.querySelectorAll(".jx-related-heart")
        .forEach(function (button) {

            button.addEventListener("click", function () {

                const icon =
                    button.querySelector("i");

                button.classList.toggle("active");


                if (button.classList.contains("active")) {

                    icon.classList.remove("fa-regular");

                    icon.classList.add("fa-solid");

                    showToast("Added to your wishlist");

                } else {

                    icon.classList.remove("fa-solid");

                    icon.classList.add("fa-regular");

                    showToast("Removed from your wishlist");

                }

            });

        });



    /* =====================================================
       ADD TO CART
    ===================================================== */

    const addToCart =
        document.getElementById("addToCart");


    addToCart.addEventListener("click", function () {

        const quantity =
            quantityInput.value;

        const selectedSize =
            document.querySelector(
                ".jx-size-btn.active"
            )?.textContent.trim() || "14";


        showToast(
            "Classic Solitaire added to your bag"
            + " · Qty: "
            + quantity
            + " · Size: "
            + selectedSize
        );


        this.innerHTML =
            '<i class="fa-solid fa-check"></i> Added to Cart';


        setTimeout(function () {

            addToCart.innerHTML =
                '<i class="fa-solid fa-bag-shopping"></i> &nbsp; Add to Cart';

        }, 1800);

    });



    /* =====================================================
       BUY NOW
    ===================================================== */

    const buyNow =
        document.getElementById("buyNow");


    buyNow.addEventListener("click", function () {

        showToast(
            "Proceeding to secure checkout"
        );

    });



    /* =====================================================
       ENQUIRY MODAL
    ===================================================== */

    const enquiryButton =
        document.getElementById("enquiryButton");

    const enquiryModal =
        document.getElementById("enquiryModal");

    const closeEnquiry =
        document.getElementById("closeEnquiry");


    enquiryButton.addEventListener("click", function () {

        enquiryModal.classList.add("active");

        document.body.style.overflow = "hidden";

    });


    closeEnquiry.addEventListener("click", function () {

        enquiryModal.classList.remove("active");

        document.body.style.overflow = "";

    });


    enquiryModal.addEventListener("click", function (event) {

        if (event.target === enquiryModal) {

            enquiryModal.classList.remove("active");

            document.body.style.overflow = "";

        }

    });



    /* =====================================================
       ENQUIRY FORM
    ===================================================== */

    const enquiryForm =
        document.getElementById("enquiryForm");


    enquiryForm.addEventListener("submit", function (event) {

        event.preventDefault();


        enquiryModal.classList.remove("active");

        document.body.style.overflow = "";


        enquiryForm.reset();


        showToast(
            "Thank you. Our jewellery specialist will contact you shortly."
        );

    });



    /* =====================================================
       ACCORDION
    ===================================================== */

    const accordionItems =
        document.querySelectorAll(".jx-accordion-item");


    accordionItems.forEach(function (item) {

        const button =
            item.querySelector(".jx-accordion-button");

        const content =
            item.querySelector(".jx-accordion-content");


        if (item.classList.contains("active")) {

            content.style.maxHeight =
                content.scrollHeight + "px";

        }


        button.addEventListener("click", function () {

            const isActive =
                item.classList.contains("active");


            accordionItems.forEach(function (otherItem) {

                otherItem.classList.remove("active");

                const otherContent =
                    otherItem.querySelector(
                        ".jx-accordion-content"
                    );

                otherContent.style.maxHeight = null;

            });


            if (!isActive) {

                item.classList.add("active");

                content.style.maxHeight =
                    content.scrollHeight + "px";

            }

        });

    });



    /* =====================================================
       TOAST
    ===================================================== */

    window.showToast = function (message) {

        const toast =
            document.getElementById("jxToast");


        toast.textContent = message;

        toast.classList.add("show");


        clearTimeout(window.jxToastTimer);


        window.jxToastTimer =
            setTimeout(function () {

                toast.classList.remove("show");

            }, 2800);

    };


});

</script>

@endsection