<?= $this->include('templates/header', ['title' => '925 Sterling Silver Diamond Cut Anchor Chain | APA Sales']) ?>

<style>
/* =========================================================
           ROOT
        ========================================================= */

        :root {

            --black: #161616;
            --black-soft: #242424;

            --gold: #b5965a;
            --gold-light: #d7bf8a;

            --cream: #f8f7f4;
            --white: #ffffff;

            --border: #e7e3dc;
            --border-dark: #d5d0c7;

            --muted: #77736d;
            --success: #15803d;

            --shadow: 0 15px 45px rgba(0,0,0,.06);
        }


        /* =========================================================
           GLOBAL
        ========================================================= */

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {

            margin: 0;

            background: var(--cream);

            color: var(--black);

            font-family: "DM Sans", sans-serif;

            -webkit-font-smoothing: antialiased;
        }


        button {
            font-family: inherit;
        }


        /* =========================================================
           PAGE
        ========================================================= */

        .luxury-product-page {

            padding: 55px 0 90px;

            overflow: hidden;
        }


        .product-wrapper {

            max-width: 1450px;

            margin: auto;
        }


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

        /* .product-breadcrumb {

            display: flex;

            align-items: center;

            gap: 9px;

            margin-bottom: 30px;

            font-size: 12px;

            color: var(--muted);

            letter-spacing: .2px;
        }


        .product-breadcrumb a {

            color: var(--muted);

            text-decoration: none;

            transition: .25s ease;
        }


        .product-breadcrumb a:hover {

            color: var(--gold);
        }


        .product-breadcrumb i {

            font-size: 10px;
        } */


        /* =========================================================
           GALLERY CARD
        ========================================================= */

        .product-gallery {

            background: var(--white);

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

            padding: 20px;

            position: relative;

            box-shadow: var(--shadow);

            overflow: hidden;
        }


        .gallery-layout {

            display: flex;

            gap: 20px;
        }


        /* =========================================================
           THUMBNAILS
        ========================================================= */

        .thumbnail-wrapper {

            width: 76px;

            flex-shrink: 0;

            display: flex;

            flex-direction: column;

            gap: 12px;
        }


        .thumbnail {

            width: 76px;

            height: 76px;

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

            background: #fff;

            cursor: pointer;

            overflow: hidden;

            position: relative;

            transition:
                border-color .3s ease,
                transform .3s ease,
                box-shadow .3s ease;
        }


        .thumbnail::after {

            content: "";

            position: absolute;

            inset: 0;

            border: 2px solid transparent;

            transition: .3s ease;
        }


        .thumbnail:hover {

            transform: translateY(-2px);

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


        .thumbnail.active {

            border-color: var(--gold);

            box-shadow: 0 5px 18px rgba(181,150,90,.16);
        }


        .thumbnail.active::after {

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


        .thumbnail img {

            width: 100%;

            height: 100%;

            object-fit: cover;

            transition: transform .5s ease;
        }


        .thumbnail:hover img {

            transform: scale(1.06);
        }


        /* =========================================================
           MAIN IMAGE
        ========================================================= */

        .main-image-area {

            flex: 1;

            min-height: 620px;

            position: relative;

            display: flex;

            justify-content: center;

            align-items: center;

            background:
                radial-gradient(
                    circle at center,
                    #ffffff 0%,
                    #ffffff 55%,
                    #faf9f6 100%
                );

            overflow: hidden;
        }


        /* Decorative circles */

        .main-image-area::before {

            content: "";

            position: absolute;

            width: 430px;

            height: 430px;

            border-radius: 50%;

            border: 1px solid rgba(181,150,90,.12);

            animation: rotateRing 18s linear infinite;
        }


        .main-image-area::after {

            content: "";

            position: absolute;

            width: 330px;

            height: 330px;

            border-radius: 50%;

            border: 1px solid rgba(181,150,90,.09);
        }


        @keyframes rotateRing {

            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }


        .main-product-image {

            width: 100%;

            max-width: 720px;

            height: 620px;

            object-fit: contain;

            position: relative;

            z-index: 2;

            transition:
                opacity .35s ease,
                transform .5s ease;
        }


        .main-product-image.image-changing {

            opacity: 0;

            transform: scale(.96);
        }


        .main-image-area:hover .main-product-image {

            transform: scale(1.025);
        }


        /* =========================================================
           IMAGE LABEL
        ========================================================= */

        .gallery-label {

            position: absolute;

            top: 22px;

            left: 22px;

            z-index: 5;

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

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

            padding: 7px 12px;

            font-size: 10px;

            font-weight: 700;

            letter-spacing: 1.2px;

            text-transform: uppercase;

            color: var(--gold);
        }


        /* =========================================================
           ZOOM BUTTON
        ========================================================= */

        .gallery-zoom {

            position: absolute;

            right: 22px;

            bottom: 22px;

            z-index: 5;

            width: 42px;

            height: 42px;

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

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

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 16px;

            color: var(--black);

            cursor: pointer;

            transition: .3s ease;
        }


        .gallery-zoom:hover {

            background: var(--black);

            color: #fff;

            border-color: var(--black);

            transform: rotate(5deg);
        }


        /* =========================================================
           ROLLOVER
        ========================================================= */

        .rollover-text {

            text-align: center;

            margin-top: 14px;

            font-size: 11px;

            color: var(--muted);

            letter-spacing: .2px;
        }


        .rollover-text i {

            margin-right: 6px;

            color: var(--gold);
        }


        /* =========================================================
           PRODUCT INFO
        ========================================================= */

        .product-info {

            background: var(--white);

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

            padding: 38px 40px 42px;

            position: sticky;

            top: 25px;

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


        /* =========================================================
           PRODUCT LABEL
        ========================================================= */

        .product-overline {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            margin-bottom: 12px;

            color: var(--gold);

            font-size: 11px;

            font-weight: 700;

            letter-spacing: 1.7px;

            text-transform: uppercase;
        }


        .product-overline::before {

            content: "";

            width: 25px;

            height: 1px;

            background: var(--gold);
        }


        /* =========================================================
           TITLE
        ========================================================= */

        .product-title {

            font-family: "Playfair Display", serif;

            font-size: clamp(28px, 3vw, 40px);

            line-height: 1.2;

            font-weight: 600;

            margin: 0 0 10px;

            max-width: 650px;
        }


        .sku {

            color: var(--muted);

            font-size: 12px;

            letter-spacing: .4px;
        }


        /* =========================================================
           RATING
        ========================================================= */
/* 
        .product-rating {

            display: flex;

            align-items: center;

            gap: 9px;

            margin-top: 17px;

            font-size: 12px;
        }


        .rating-stars {

            color: var(--gold);

            letter-spacing: 2px;
        }


        .rating-count {

            color: var(--muted);
        } */


        /* =========================================================
           DIVIDER
        ========================================================= */

        .divider {

            height: 1px;

            background: var(--border);

            margin: 25px 0 28px;
        }


        /* =========================================================
           OPTION
        ========================================================= */

        .option-section {

            margin-bottom: 27px;
        }


        .option-header {

            display: flex;

            align-items: center;

            justify-content: space-between;

            margin-bottom: 11px;
        }


        .option-label {

            font-size: 13px;

            font-weight: 700;

            color: var(--black);
        }


        .option-value {

            font-weight: 500;

            color: var(--gold);
        }


        .option-buttons {

            display: flex;

            flex-wrap: wrap;

            gap: 8px;
        }


        .option-btn {

            min-height: 40px;

            padding: 7px 16px;

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

            background: #fff;

            color: #444;

            font-size: 12px;

            border-radius: 0;

            cursor: pointer;

            position: relative;

            transition:
                border-color .25s ease,
                background .25s ease,
                color .25s ease,
                transform .25s ease;
        }


        .option-btn:hover {

            border-color: var(--gold);

            color: var(--black);

            transform: translateY(-1px);
        }


        .option-btn.active {

            background: var(--black);

            border-color: var(--black);

            color: #fff;
        }


        .option-btn.disabled {

            color: #aaa;

            background: #fafafa;

            text-decoration: line-through;

            cursor: not-allowed;
        }


        /* =========================================================
           PRICE BOX
        ========================================================= */

        .price-box {

            background: #faf9f6;

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

            padding: 20px 22px;

            margin: 7px 0 25px;
        }


        .price-main {

            display: flex;

            align-items: baseline;

            justify-content: space-between;
        }


        .price-label {

            font-size: 12px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 1px;

            color: var(--muted);
        }


        .price {

            font-size: 30px;

            font-weight: 700;

            color: var(--black);

            letter-spacing: -.5px;
        }


        .price-per-gram {

            margin-top: 5px;

            font-size: 12px;

            color: var(--muted);
        }


        .price-per-gram strong {

            color: #444;
        }


        /* =========================================================
           PRODUCT DETAILS
        ========================================================= */

        .product-details {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 12px;

            margin-bottom: 24px;
        }


        .detail-item {

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

            padding-bottom: 12px;
        }


        .detail-label {

            display: block;

            font-size: 10px;

            text-transform: uppercase;

            letter-spacing: 1px;

            color: var(--muted);

            margin-bottom: 5px;
        }


        .detail-value {

            font-size: 13px;

            font-weight: 600;

            color: var(--black);
        }


        /* =========================================================
           STOCK
        ========================================================= */

        .stock-section {

            margin-bottom: 27px;
        }


        .stock-header {

            display: flex;

            align-items: center;

            justify-content: space-between;

            margin-bottom: 9px;
        }


        .stock-title {

            font-size: 12px;

            font-weight: 700;
        }


        .stock {

            color: var(--success);

            font-size: 12px;

            font-weight: 600;

            display: flex;

            align-items: center;

            gap: 7px;
        }


        .stock-dot {

            width: 7px;

            height: 7px;

            border-radius: 50%;

            background: var(--success);

            position: relative;
        }


        .stock-dot::after {

            content: "";

            position: absolute;

            inset: -4px;

            border-radius: 50%;

            border: 1px solid rgba(21,128,61,.35);

            animation: stockPulse 1.7s infinite;
        }


        @keyframes stockPulse {

            0% {
                transform: scale(.7);
                opacity: 1;
            }

            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }


        .stock-bar {

            width: 100%;

            height: 4px;

            background: #e9eee9;

            overflow: hidden;
        }


        .stock-progress {

            width: 76%;

            height: 100%;

            background: var(--success);

            animation: stockLoad 1.2s ease forwards;
        }


        @keyframes stockLoad {

            from {
                width: 0;
            }

            to {
                width: 76%;
            }
        }


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

        .purchase-row {

            display: flex;

            align-items: center;

            gap: 14px;

            margin-bottom: 14px;
        }


        .quantity-label {

            font-size: 12px;

            font-weight: 700;

            min-width: 65px;
        }


        .quantity-box {

            display: flex;

            height: 45px;

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

            background: #fff;
        }


        .quantity-box button {

            width: 42px;

            border: 0;

            background: #fff;

            color: #555;

            font-size: 18px;

            cursor: pointer;

            transition: .25s ease;
        }


        .quantity-box button:hover {

            background: #f4f2ed;

            color: var(--black);
        }


        .quantity-box input {

            width: 45px;

            border: 0;

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

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

            text-align: center;

            outline: none;

            font-size: 13px;

            font-weight: 600;
        }


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

        .add-cart-btn {

            width: 100%;

            height: 54px;

            background: var(--black);

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

            color: #fff;

            font-size: 13px;

            font-weight: 700;

            letter-spacing: 1px;

            text-transform: uppercase;

            position: relative;

            overflow: hidden;

            cursor: pointer;

            transition: .35s ease;
        }


        .add-cart-btn::before {

            content: "";

            position: absolute;

            top: 0;

            left: -100%;

            width: 100%;

            height: 100%;

            background: linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,.15),
                transparent
            );

            transition: .6s ease;
        }


        .add-cart-btn:hover {

            background: var(--gold);

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


        .add-cart-btn:hover::before {

            left: 100%;
        }


        .add-cart-btn i {

            margin-right: 8px;
        }


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

        .save-btn {

            width: 100%;

            height: 48px;

            margin-top: 10px;

            background: #fff;

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

            color: var(--black);

            font-size: 12px;

            font-weight: 600;

            cursor: pointer;

            transition: .3s ease;
        }


        .save-btn:hover {

            border-color: var(--black);

            background: #faf9f6;
        }


        .save-btn i {

            transition: .3s ease;
        }


        .save-btn:hover i {

            color: #b5965a;

            transform: scale(1.15);
        }


        /* =========================================================
           TRUST ITEMS
        ========================================================= */

        .trust-items {

            display: grid;

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

            gap: 8px;

            margin-top: 24px;

            padding-top: 20px;

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


        .trust-item {

            text-align: center;

            color: var(--muted);

            font-size: 9px;

            line-height: 1.4;

            text-transform: uppercase;

            letter-spacing: .5px;
        }


        .trust-item i {

            display: block;

            font-size: 17px;

            color: var(--gold);

            margin-bottom: 6px;
        }


        /* =========================================================
           DESCRIPTION
        ========================================================= */

        .description-card {

            background: var(--white);

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

            margin-top: 25px;

            padding: 32px;

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


        .section-heading {

            display: flex;

            align-items: center;

            gap: 15px;

            margin-bottom: 20px;
        }


        .section-heading::after {

            content: "";

            flex: 1;

            height: 1px;

            background: var(--border);
        }


        .section-title {

            font-family: "Playfair Display", serif;

            font-size: 23px;

            font-weight: 600;

            margin: 0;

            white-space: nowrap;
        }


        .description-text {

            color: #555;

            font-size: 13px;

            line-height: 1.9;

            margin: 0 0 25px;
        }


        /* =========================================================
           SPEC TABLE
        ========================================================= */

        .spec-table {

            width: 100%;

            border-collapse: collapse;
        }


        .spec-table th,
        .spec-table td {

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

            padding: 12px 8px;

            text-align: left;

            font-size: 12px;
        }


        .spec-table th {

            font-weight: 700;

            color: var(--black);

            background: #faf9f6;
        }


        .spec-table td {

            color: #555;
        }


        .spec-table tbody tr {

            transition: .25s ease;
        }


        .spec-table tbody tr:hover {

            background: #faf9f6;
        }


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

        @media (max-width: 1199px) {

            .luxury-product-page {

                padding: 35px 0 70px;
            }


            .main-image-area {

                min-height: 530px;
            }


            .main-product-image {

                height: 530px;
            }


            .product-info {

                padding: 30px;
            }

        }


        @media (max-width: 991px) {

            .product-info {

                position: relative;

                top: auto;
            }


            .product-gallery {

                margin-bottom: 20px;
            }


            .main-image-area {

                min-height: 500px;
            }


            .main-product-image {

                height: 500px;
            }

        }


        @media (max-width: 767px) {

            .luxury-product-page {

                padding: 15px 0 50px;
            }


            /* .product-breadcrumb {

                margin-bottom: 18px;

                padding: 0 4px;
            } */


            .product-gallery {

                padding: 10px;

                box-shadow: none;
            }


            .gallery-layout {

                display: block;
            }


            .thumbnail-wrapper {

                width: 100%;

                display: flex;

                flex-direction: row;

                gap: 8px;

                margin-bottom: 10px;

                overflow-x: auto;

                padding-bottom: 2px;

                scrollbar-width: none;
            }


            .thumbnail-wrapper::-webkit-scrollbar {

                display: none;
            }


            .thumbnail {

                min-width: 64px;

                width: 64px;

                height: 64px;
            }


            .main-image-area {

                min-height: 390px;
            }


            .main-product-image {

                height: 390px;
            }


            .main-image-area::before {

                width: 280px;

                height: 280px;
            }


            .main-image-area::after {

                width: 220px;

                height: 220px;
            }


            .gallery-label {

                top: 12px;

                left: 12px;
            }


            .gallery-zoom {

                right: 12px;

                bottom: 12px;
            }


            .rollover-text {

                display: none;
            }


            .product-info {

                padding: 25px 20px;

                box-shadow: none;
            }


            .product-title {

                font-size: 27px;
            }


            .product-details {

                grid-template-columns: 1fr 1fr;
            }


            .description-card {

                padding: 25px 20px;

                box-shadow: none;
            }

        }


        @media (max-width: 480px) {

            .product-title {

                font-size: 24px;
            }


            .main-image-area {

                min-height: 310px;
            }


            .main-product-image {

                height: 310px;
            }


            .option-buttons {

                gap: 6px;
            }


            .option-btn {

                padding: 7px 12px;

                font-size: 11px;
            }


            .price {

                font-size: 26px;
            }


            .product-details {

                grid-template-columns: 1fr;
            }


            .trust-items {

                gap: 4px;
            }


            .trust-item {

                font-size: 8px;
            }


            .description-card {

                padding: 22px 16px;
            }

        }
</style>

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


    <div class="container-fluid product-wrapper">


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

        <!-- <div class="product-breadcrumb"
             data-aos="fade-down"
             data-aos-duration="700">

            <a href="#">Home</a>

            <i class="bi bi-chevron-right"></i>

            <a href="#">Chains</a>

            <i class="bi bi-chevron-right"></i>

            <span>Anchor Chain</span>

        </div> -->



        <div class="row g-4">


            <!-- =================================================
                 LEFT COLUMN
            ================================================== -->

            <div class="col-lg-6">


                <!-- GALLERY -->

                <div class="product-gallery"
                     data-aos="fade-right"
                     data-aos-duration="900">


                    <div class="gallery-layout">


                        <!-- THUMBNAILS -->

                        <div class="thumbnail-wrapper">


                            <div class="thumbnail active"
                                 onclick="changeImage('chain.jpg', this)">

                                <img src="<?= base_url('chain.jpg') ?>"
                                     alt="925 Sterling Silver Anchor Chain">

                            </div>


                            <div class="thumbnail"
                                 onclick="changeImage('chain.jpg', this)">

                                <img src="<?= base_url('chain.jpg') ?>"
                                     alt="Anchor Chain Detail">

                            </div>


                            <div class="thumbnail"
                                 onclick="changeImage('chain.jpg', this)">

                                <img src="<?= base_url('chain.jpg') ?>"
                                     alt="Diamond Cut Anchor Chain">

                            </div>


                            <div class="thumbnail"
                                 onclick="changeImage('chain.jpg', this)">

                                <img src="<?= base_url('chain.jpg') ?>"
                                     alt="Sterling Silver Chain">

                            </div>


                        </div>



                        <!-- MAIN IMAGE -->

                        <div class="main-image-area">


                            <div class="gallery-label">
                                925 Sterling Silver
                            </div>


                            <img id="mainProductImage"
                                 class="main-product-image"
                                 src="<?= base_url('chain.jpg') ?>"
                                 alt="925 Sterling Silver Diamond Cut Anchor Chain">


                            <button class="gallery-zoom"
                                    type="button"
                                    title="Zoom Image">

                                <i class="bi bi-zoom-in"></i>

                            </button>


                        </div>


                    </div>


                    <div class="rollover-text">

                        <i class="bi bi-arrows-angle-expand"></i>

                        Roll over image to zoom in

                    </div>


                </div>



                <!-- DESCRIPTION -->

                <div class="description-card"
                     data-aos="fade-up"
                     data-aos-duration="800">


                    <div class="section-heading">

                        <h2 class="section-title">
                            Description
                        </h2>

                    </div>


                    <p class="description-text">

                        Elevate your jewelry collection with this stunning
                        925 sterling silver anchor chain, expertly crafted
                        with a diamond cut finish that catches light
                        beautifully from every angle.

                        The anchor link design offers timeless appeal and
                        reliable durability, making it perfect as a
                        standalone piece or as a versatile base for pendants.

                        Authentic sterling silver ensures lasting quality
                        and a brilliant shine that won't fade.

                        Whether you're dressing for a special occasion or
                        adding everyday elegance to your look, this chain
                        delivers classic sophistication with modern flair.

                    </p>



                    <table class="spec-table">

                        <thead>

                            <tr>

                                <th>Gauge</th>

                                <th>Width</th>

                            </tr>

                        </thead>


                        <tbody>

                            <tr>

                                <td>030</td>

                                <td>1.2mm</td>

                            </tr>


                            <tr>

                                <td>035</td>

                                <td>1.4mm</td>

                            </tr>


                            <tr>

                                <td>060</td>

                                <td>2mm</td>

                            </tr>

                        </tbody>

                    </table>


                </div>


            </div>



            <!-- =================================================
                 RIGHT COLUMN
            ================================================== -->

            <div class="col-lg-6">


                <div class="product-info"
                     data-aos="fade-left"
                     data-aos-duration="900">


                    <!-- PRODUCT CATEGORY -->

                    <div class="product-overline">
                        Sterling Silver Collection
                    </div>



                    <!-- TITLE -->

                    <h1 class="product-title">

                        925 Sterling Silver
                        Diamond Cut Anchor Chain

                    </h1>


                    <div class="sku">
                        SKU: CH716A-16
                    </div>



                    <!-- RATING -->

                    <!-- <div class="product-rating">

                        <div class="rating-stars">

                            ★★★★★

                        </div>

                        <span>
                            4.9
                        </span>

                        <span class="rating-count">
                            (28 Reviews)
                        </span>

                    </div> -->



                    <div class="divider"></div>



                    <!-- =================================================
                         PLATING
                    ================================================== -->

                    <div class="option-section">


                        <div class="option-header">

                            <div class="option-label">

                                Plating:
                                <span class="option-value"
                                      id="platingText">
                                    Basic Non-Plated
                                </span>

                            </div>

                        </div>


                        <div class="option-buttons">


                            <button class="option-btn active"
                                    onclick="selectOption(this,'platingText')">

                                Basic Non-Plated

                            </button>


                            <button class="option-btn"
                                    onclick="selectOption(this,'platingText')">

                                Rhodium

                            </button>


                            <button class="option-btn"
                                    onclick="selectOption(this,'platingText')">

                                Gold

                            </button>


                            <button class="option-btn"
                                    onclick="selectOption(this,'platingText')">

                                Rose Gold

                            </button>


                        </div>

                    </div>



                    <!-- =================================================
                         WIDTH
                    ================================================== -->

                    <div class="option-section">


                        <div class="option-header">

                            <div class="option-label">

                                Width:
                                <span class="option-value"
                                      id="widthText">
                                    2mm
                                </span>

                            </div>

                        </div>


                        <div class="option-buttons">


                            <button class="option-btn active"
                                    onclick="selectOption(this,'widthText')">

                                2mm

                            </button>


                        </div>

                    </div>



                    <!-- =================================================
                         LENGTH
                    ================================================== -->

                    <div class="option-section">


                        <div class="option-header">

                            <div class="option-label">

                                Length:
                                <span class="option-value"
                                      id="lengthText">
                                    16"
                                </span>

                            </div>

                        </div>


                        <div class="option-buttons">


                            <button class="option-btn active"
                                    onclick="selectOption(this,'lengthText')">

                                16"

                            </button>


                            <button class="option-btn disabled">

                                18"

                            </button>


                            <button class="option-btn disabled">

                                20"

                            </button>


                            <button class="option-btn disabled">

                                22"

                            </button>


                            <button class="option-btn disabled">

                                24"

                            </button>


                            <button class="option-btn"
                                    onclick="selectOption(this,'lengthText')">

                                30"

                            </button>


                        </div>

                    </div>



                    <!-- =================================================
                         PRICE
                    ================================================== -->

                    <div class="price-box"
                         data-aos="zoom-in"
                         data-aos-duration="600">


                        <div class="price-main">


                            <div class="price-label">
                                Our Price
                            </div>


                            <div class="price">
                                $17.45
                            </div>


                        </div>


                        <div class="price-per-gram">

                            <strong>Price Per Gram:</strong>

                            $4.05

                        </div>


                    </div>



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

                    <div class="product-details">


                        <div class="detail-item">

                            <span class="detail-label">
                                Weight
                            </span>

                            <span class="detail-value">
                                4.3 grams
                            </span>

                        </div>


                        <div class="detail-item">

                            <span class="detail-label">
                                Material
                            </span>

                            <span class="detail-value">
                                925 Sterling Silver
                            </span>

                        </div>


                    </div>



                    <!-- =================================================
                         STOCK
                    ================================================== -->

                    <div class="stock-section">


                        <div class="stock-header">


                            <span class="stock-title">
                                Availability
                            </span>


                            <span class="stock">

                                <span class="stock-dot"></span>

                                In stock — 366 grams

                            </span>


                        </div>


                        <div class="stock-bar">

                            <div class="stock-progress"></div>

                        </div>


                    </div>



                    <!-- =================================================
                         QUANTITY
                    ================================================== -->

                    <div class="purchase-row">


                        <div class="quantity-label">
                            Quantity
                        </div>


                        <div class="quantity-box">


                            <button type="button"
                                    onclick="decreaseQuantity()">

                                −

                            </button>


                            <input type="text"
                                   id="quantity"
                                   value="1"
                                   readonly>


                            <button type="button"
                                    onclick="increaseQuantity()">

                                +

                            </button>


                        </div>


                    </div>



                    <!-- =================================================
                         CART
                    ================================================== -->

                    <button class="add-cart-btn"
                            type="button">

                        <i class="bi bi-bag"></i>

                        Add to Cart

                    </button>



                    <button class="save-btn"
                            type="button">

                        <i class="bi bi-heart me-1"></i>

                        Add to Wishlist

                    </button>



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

                    <div class="trust-items">


                        <div class="trust-item">

                            <i class="bi bi-shield-check"></i>

                            Secure
                            Checkout

                        </div>


                        <div class="trust-item">

                            <i class="bi bi-gem"></i>

                            Premium
                            Quality

                        </div>


                        <div class="trust-item">

                            <i class="bi bi-box-seam"></i>

                            Fast
                            Shipping

                        </div>


                    </div>


                </div>

            </div>


        </div>

    </div>

</div>



<!-- =========================================================
     BOOTSTRAP
========================================================= -->




<!-- =========================================================
     AOS
========================================================= -->




<script>


/* =========================================================
   AOS INITIALIZATION
========================================================= */

AOS.init({

    duration: 800,

    once: true,

    offset: 70,

    easing: "ease-out-cubic"

});



/* =========================================================
   IMAGE CHANGE
========================================================= */

function changeImage(image, element) {

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


    /*
     * Add fade animation
     */

    mainImage.classList.add("image-changing");


    /*
     * Change image after fade
     */

    setTimeout(function () {

        mainImage.src = image;

        mainImage.onload = function () {

            mainImage.classList.remove("image-changing");

        };

    }, 180);


    /*
     * Active thumbnail
     */

    document.querySelectorAll(".thumbnail")
        .forEach(function (item) {

            item.classList.remove("active");

        });


    element.classList.add("active");

}



/* =========================================================
   OPTION SELECTION
========================================================= */

function selectOption(button, textId) {


    /*
     * Get all buttons from same group
     */

    const parent = button.parentElement;


    parent.querySelectorAll(".option-btn")
        .forEach(function (btn) {

            btn.classList.remove("active");

        });


    /*
     * Activate selected button
     */

    button.classList.add("active");


    /*
     * Update selected value
     */

    document.getElementById(textId).innerText =
        button.innerText.trim();

}



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

function increaseQuantity() {

    const input =
        document.getElementById("quantity");


    let quantity =
        parseInt(input.value);


    quantity++;


    input.value = quantity;

}



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

function decreaseQuantity() {

    const input =
        document.getElementById("quantity");


    let quantity =
        parseInt(input.value);


    if (quantity > 1) {

        quantity--;

    }


    input.value = quantity;

}



/* =========================================================
   ADD CART MICRO ANIMATION
========================================================= */

document.querySelector(".add-cart-btn")
    .addEventListener("click", function () {


        const button = this;


        const originalHTML =
            button.innerHTML;


        button.innerHTML =
            '<i class="bi bi-check2"></i> Added to Cart';


        button.style.background =
            "#15803d";


        button.style.borderColor =
            "#15803d";


        setTimeout(function () {

            button.innerHTML =
                originalHTML;


            button.style.background =
                "";


            button.style.borderColor =
                "";

        }, 1800);

    });



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

document.querySelector(".save-btn")
    .addEventListener("click", function () {


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


        icon.classList.toggle("bi-heart");

        icon.classList.toggle("bi-heart-fill");


        if (icon.classList.contains("bi-heart-fill")) {

            icon.style.color =
                "#b5965a";

        } else {

            icon.style.color =
                "";

        }

    });


</script>

<?= $this->include('templates/footer') ?>
