@extends('frontend.master')

@section('content')
<section class="pd_page" id="pd_page">
    <div class="pd_container">
        <!-- PRODUCT DETAILS TOP -->
        <div class="pd_details_grid">
            <div class="pd_gallery_area">
                <div class="pd_main_image_box" id="pd_main_image_box">
                    <span class="pd_discount_badge">
                        <strong>22%</strong>
                        <small>ছাড়</small>
                    </span>

                    <img
                        src="https://images.unsplash.com/photo-1594633312681-425c7b97ccd1?auto=format&fit=crop&w=900&q=90"
                        alt="Light Green Printed And Embroidered Mixed Cotton Saree"
                        class="pd_main_image"
                        id="pd_main_image"
                    />
                </div>

                <div class="pd_thumb_list">
                    <button
                        type="button"
                        class="pd_thumb_item pd_active"
                        data-image="https://images.unsplash.com/photo-1594633312681-425c7b97ccd1?auto=format&fit=crop&w=900&q=90"
                    >
                        <img
                            src="https://images.unsplash.com/photo-1594633312681-425c7b97ccd1?auto=format&fit=crop&w=180&q=90"
                            alt="Product thumbnail"
                        />
                    </button>

                    <button
                        type="button"
                        class="pd_thumb_item"
                        data-image="https://images.unsplash.com/photo-1618932260643-eee4a2f652a6?auto=format&fit=crop&w=900&q=90"
                    >
                        <img
                            src="https://images.unsplash.com/photo-1618932260643-eee4a2f652a6?auto=format&fit=crop&w=180&q=90"
                            alt="Product thumbnail"
                        />
                    </button>
                </div>
            </div>

            <div class="pd_info_area">
                <div class="pd_breadcrumb">
                    <a href="/">Home</a>
                    <span>/</span>
                    <a href="/category/kids-fashion">Kids Fashion</a>
                </div>

                <h1 class="pd_product_title">
                    Light Green Printed And Embroidered Mixed Cotton Saree
                </h1>

                <div class="pd_price_area">
                    <del>৳2390</del>
                    <span>৳1870</span>
                </div>

                <div class="pd_rating_area">
                    <span class="pd_star_text">☆ ☆ ☆ ☆ ☆</span>
                    <span class="pd_rating_text">0.00/5</span>
                    <a href="#pd_review_section">See Reviews</a>
                </div>

                <div class="pd_product_code">
                    প্রোডাক্ট কোড : P0227
                </div>

                <p class="pd_brand_text">
                    <strong>Brand :</strong> N/A
                </p>

                <div class="pd_qty_area">
                    <button type="button" class="pd_qty_btn" id="pd_minus_btn">−</button>
                    <input type="text" value="1" id="pd_qty_input" readonly />
                    <button type="button" class="pd_qty_btn pd_plus_btn" id="pd_plus_btn">+</button>
                </div>

                <div class="pd_action_buttons">
                    <button type="button" class="pd_add_cart_btn">
                        কার্টে যোগ করুন
                    </button>

                    <button type="button" class="pd_order_now_btn">
                        অর্ডার করুন
                    </button>
                </div>

                <a href="tel:+880185678956" class="pd_call_btn">
                    ☎ +880185678956
                </a>

                <a href="https://wa.me/880185678956" target="_blank" class="pd_whatsapp_btn">
                    ☎ এই পণ্যটি সম্পর্কে জিজ্ঞাসা করুন
                </a>

                <div class="pd_delivery_box">
                    <div class="pd_delivery_icon">▣</div>
                    <div class="pd_delivery_text">
                        <span>ঢাকার ভিতরে ৭০ টাকা</span>
                        <span>ঢাকার বাইরে ১২০ টাকা</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- REVIEW SECTION -->
        <div class="pd_review_section" id="pd_review_section">
            <div class="pd_review_summary">
                <div class="pd_average_row">
                    <h2>0.0</h2>

                    <div>
                        <p>Average Rating</p>
                        <span class="pd_review_stars_gray">☆☆☆☆☆</span>
                        <small>(0 Reviews)</small>
                    </div>
                </div>

                <div class="pd_recommend_row">
                    <strong>0.00%</strong>
                    <span>Recommended (1 of 3)</span>
                </div>

                <div class="pd_rating_bar_group">
                    <div class="pd_rating_bar_row">
                        <span>★★★★★</span>
                        <div><i style="width: 0%"></i></div>
                        <small>0%</small>
                    </div>

                    <div class="pd_rating_bar_row">
                        <span>★★★★☆</span>
                        <div><i style="width: 0%"></i></div>
                        <small>0%</small>
                    </div>

                    <div class="pd_rating_bar_row">
                        <span>★★★☆☆</span>
                        <div><i style="width: 0%"></i></div>
                        <small>0%</small>
                    </div>

                    <div class="pd_rating_bar_row">
                        <span>★★☆☆☆</span>
                        <div><i style="width: 0%"></i></div>
                        <small>0%</small>
                    </div>

                    <div class="pd_rating_bar_row">
                        <span>★☆☆☆☆</span>
                        <div><i style="width: 0%"></i></div>
                        <small>0%</small>
                    </div>
                </div>
            </div>

            <div class="pd_review_form_area">
                <div class="pd_section_title">
                    <h2>Submit Your Review</h2>
                    <span></span>
                </div>

                <p class="pd_review_note">
                    Your email address will not be published. Required fields are marked *
                </p>

                <label class="pd_form_label">Write your opinion about the product</label>
                <textarea class="pd_review_textarea" placeholder="Write Your Review Here..."></textarea>

                <label class="pd_form_label">Your Rating:</label>

                <div class="pd_review_submit_row">
                    <select class="pd_rating_select">
                        <option>Select One</option>
                        <option>5 Star</option>
                        <option>4 Star</option>
                        <option>3 Star</option>
                        <option>2 Star</option>
                        <option>1 Star</option>
                    </select>

                    <button type="button" class="pd_submit_review_btn">
                        SUBMIT REVIEW
                    </button>
                </div>
            </div>
        </div>

        <!-- RELATED PRODUCTS -->
        <div class="pd_related_section">
            <div class="pd_related_header">
                <div class="pd_section_title pd_related_title">
                    <h2>Related Products</h2>
                    <span></span>
                </div>

                <a href="/products" class="pd_more_product">
                    More Products
                    <span>→</span>
                </a>
            </div>

            <div class="pd_related_grid">
                <div class="pd_product_card">
                    <a href="#" class="pd_product_img">
                        <img
                            src="https://images.unsplash.com/photo-1587049352846-4a222e784d38?auto=format&fit=crop&w=600&q=85"
                            alt="Natural Honeycomb"
                        />
                    </a>

                    <a href="#" class="pd_product_name">
                        Natural Honeycomb-1500gm (Briefcase)
                    </a>

                    <div class="pd_product_price">৳3,750</div>

                    <button type="button" class="pd_stock_out_btn">
                        Stock Out
                    </button>
                </div>

                <div class="pd_product_card">
                    <a href="#" class="pd_product_img">
                        <img
                            src="https://images.unsplash.com/photo-1471943311424-646960669fbc?auto=format&fit=crop&w=600&q=85"
                            alt="Lychee Flower Honey 250g"
                        />
                    </a>

                    <a href="#" class="pd_product_name">
                        Lychee Flower Honey 250g
                    </a>

                    <div class="pd_product_price">৳300</div>

                    <button type="button" class="pd_add_cart_outline">
                        🛒 Add To Cart
                    </button>
                </div>

                <div class="pd_product_card">
                    <span class="pd_small_badge pd_badge_orange">New Arrival</span>
                    <span class="pd_small_badge pd_badge_green">Save 10%</span>

                    <a href="#" class="pd_product_img">
                        <img
                            src="https://images.unsplash.com/photo-1558642452-9d2a7deb7f62?auto=format&fit=crop&w=600&q=85"
                            alt="Kashmiri Sidr Honey"
                        />
                    </a>

                    <a href="#" class="pd_product_name">
                        Kashmiri Sidr Honey 800g
                    </a>

                    <div class="pd_product_price">
                        ৳1,800 <del>৳2,000</del>
                    </div>

                    <button type="button" class="pd_add_cart_outline">
                        🛒 Add To Cart
                    </button>
                </div>

                <div class="pd_product_card">
                    <span class="pd_small_badge pd_badge_green">Save 8%</span>

                    <a href="#" class="pd_product_img">
                        <img
                            src="https://images.unsplash.com/photo-1471943311424-646960669fbc?auto=format&fit=crop&w=600&q=85"
                            alt="Lychee Flower Honey 500g"
                        />
                    </a>

                    <a href="#" class="pd_product_name">
                        Lychee Flower Honey 500g
                    </a>

                    <div class="pd_product_price">
                        ৳550 <del>৳600</del>
                    </div>

                    <button type="button" class="pd_add_cart_outline">
                        🛒 Add To Cart
                    </button>
                </div>

                <div class="pd_product_card">
                    <span class="pd_small_badge pd_badge_green">Save 12%</span>

                    <a href="#" class="pd_product_img">
                        <img
                            src="https://images.unsplash.com/photo-1471943311424-646960669fbc?auto=format&fit=crop&w=600&q=85"
                            alt="African Organic Wild Honey"
                        />
                    </a>

                    <a href="#" class="pd_product_name">
                        African Organic Wild Honey 500g
                    </a>

                    <div class="pd_product_price">
                        ৳1,100 <del>৳1,250</del>
                    </div>

                    <button type="button" class="pd_add_cart_outline">
                        🛒 Add To Cart
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="pd_toast" id="pd_toast">Added to cart</div>
</section>

<style>
    .pd_page {
        width: 100%;
        background: #f7f7f7;
        padding: 22px 0 40px;
        font-family: Arial, Helvetica, sans-serif;
        color: #000000;
    }

    .pd_container {
        width: 100%;
        max-width: 1490px;
        margin: 0 auto;
        padding: 0 16px;
    }

    .pd_details_grid {
        display: grid;
        grid-template-columns: minmax(0, 700px) minmax(0, 730px);
        gap: 24px;
        align-items: start;
        justify-content: center;
        margin-bottom: 54px;
    }

    .pd_gallery_area {
        width: 100%;
    }

    .pd_main_image_box {
        position: relative;
        width: 100%;
        height: 502px;
        background: #ffffff;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: zoom-in;
    }

    .pd_main_image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
        transition: transform 0.18s ease;
        transform-origin: center center;
    }

    .pd_main_image_box:hover .pd_main_image {
        transform: scale(2.35);
    }

    .pd_discount_badge {
        position: absolute;
        top: 14px;
        right: 8px;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #e91e63;
        color: #ffffff;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .pd_discount_badge strong {
        font-size: 12px;
        line-height: 1;
        font-weight: 900;
    }

    .pd_discount_badge small {
        font-size: 11px;
        line-height: 1.1;
        font-weight: 700;
    }

    .pd_thumb_list {
        display: flex;
        align-items: center;
        gap: 11px;
        margin-top: 10px;
    }

    .pd_thumb_item {
        width: 137px;
        height: 82px;
        border: 1px solid #dddddd;
        border-radius: 5px;
        background: #ffffff;
        padding: 4px;
        cursor: pointer;
        overflow: hidden;
        transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .pd_thumb_item.pd_active {
        border-color: #ff0033;
    }

    .pd_thumb_item:hover {
        border-color: #ff0033;
        box-shadow: 0 4px 12px rgba(255, 0, 51, 0.12);
    }

    .pd_thumb_item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .pd_info_area {
        width: 100%;
        min-height: 502px;
        background: #ffffff;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        padding: 12px 20px 34px;
    }

    .pd_breadcrumb {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #8b8b8b;
        font-size: 16px;
        line-height: 1.3;
        margin-bottom: 17px;
    }

    .pd_breadcrumb a {
        color: #8b8b8b;
        text-decoration: none;
    }

    .pd_breadcrumb a:hover {
        color: #ff0028;
    }

    .pd_product_title {
        margin: 0 0 15px;
        color: #000000;
        font-size: 24px;
        line-height: 1.34;
        font-weight: 900;
        max-width: 520px;
    }

    .pd_price_area {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 13px;
    }

    .pd_price_area del {
        color: #b2b2b2;
        font-size: 21px;
        line-height: 1;
        font-weight: 800;
    }

    .pd_price_area span {
        color: #000000;
        font-size: 27px;
        line-height: 1;
        font-weight: 900;
    }

    .pd_rating_area {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 13px;
        color: #000000;
        font-size: 14px;
    }

    .pd_star_text {
        color: #8f8f8f;
        font-size: 18px;
        letter-spacing: -1px;
    }

    .pd_rating_text {
        color: #000000;
        font-size: 14px;
    }

    .pd_rating_area a {
        color: #000000;
        text-decoration: underline;
        margin-left: 11px;
    }

    .pd_product_code {
        display: inline-flex;
        align-items: center;
        min-height: 31px;
        background: #ff0028;
        color: #ffffff;
        font-size: 14px;
        line-height: 1;
        font-weight: 800;
        padding: 8px 30px 8px 10px;
        margin-bottom: 13px;
        clip-path: polygon(0 0, 100% 0, 87% 50%, 100% 100%, 0 100%);
    }

    .pd_brand_text {
        margin: 0 0 18px;
        color: #000000;
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
    }

    .pd_qty_area {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .pd_qty_btn,
    .pd_qty_area input {
        width: 43px;
        height: 40px;
        border: 1px solid #111111;
        background: #ffffff;
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .pd_qty_btn {
        font-size: 20px;
        line-height: 1;
        font-weight: 900;
        cursor: pointer;
    }

    .pd_qty_area input {
        border-left: none;
        border-right: none;
        font-size: 16px;
        font-weight: 900;
        outline: none;
    }

    .pd_plus_btn {
        background: #2554d8;
        color: #ffffff;
        border-color: #2554d8;
    }

    .pd_action_buttons {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin-bottom: 8px;
    }

    .pd_add_cart_btn,
    .pd_order_now_btn {
        height: 45px;
        border: none;
        border-radius: 4px;
        color: #ffffff;
        font-size: 19px;
        line-height: 1;
        font-weight: 900;
        cursor: pointer;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .pd_add_cart_btn {
        background: #ff0028;
    }

    .pd_order_now_btn {
        background: #000000;
    }

    .pd_add_cart_btn:hover,
    .pd_order_now_btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
    }

    .pd_call_btn,
    .pd_whatsapp_btn {
        width: 100%;
        height: 44px;
        border-radius: 5px;
        background: #1d8f58;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 16px;
        line-height: 1;
        font-weight: 800;
        margin-bottom: 9px;
        transition: background 0.25s ease, transform 0.25s ease;
    }

    .pd_call_btn:hover,
    .pd_whatsapp_btn:hover {
        background: #15784a;
        color: #ffffff;
        transform: translateY(-1px);
    }

    .pd_delivery_box {
        min-height: 76px;
        background: #c9f6ff;
        border: 1px solid #94d7e7;
        border-radius: 5px;
        display: flex;
        align-items: center;
        gap: 17px;
        padding: 13px 18px;
        color: #00829a;
    }

    .pd_delivery_icon {
        color: #00829a;
        font-size: 35px;
        line-height: 1;
    }

    .pd_delivery_text span {
        display: block;
        color: #00829a;
        font-size: 15px;
        line-height: 1.45;
        font-weight: 600;
    }

    .pd_review_section {
        background: #ffffff;
        border-radius: 7px;
        box-shadow: 0 1px 8px rgba(15, 23, 42, 0.12);
        padding: 34px 24px 84px;
        display: grid;
        grid-template-columns: 430px minmax(0, 1fr);
        gap: 56px;
        margin-bottom: 34px;
    }

    .pd_average_row {
        display: flex;
        align-items: flex-start;
        gap: 18px;
        margin-bottom: 13px;
    }

    .pd_average_row h2 {
        margin: 0;
        color: #012b29;
        font-size: 64px;
        line-height: 0.9;
        font-weight: 900;
    }

    .pd_average_row p {
        margin: 4px 0 5px;
        color: #444444;
        font-size: 14px;
    }

    .pd_review_stars_gray {
        color: #8b8b8b;
        font-size: 17px;
        letter-spacing: -1px;
    }

    .pd_average_row small {
        color: #8b8b8b;
        font-size: 12px;
        margin-left: 6px;
    }

    .pd_recommend_row {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
    }

    .pd_recommend_row strong {
        color: #1f2937;
        font-size: 27px;
        line-height: 1;
        font-weight: 900;
    }

    .pd_recommend_row span {
        color: #4b5563;
        font-size: 14px;
    }

    .pd_rating_bar_group {
        width: 326px;
    }

    .pd_rating_bar_row {
        display: grid;
        grid-template-columns: 82px 1fr 32px;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
    }

    .pd_rating_bar_row span {
        color: #ff9b32;
        font-size: 17px;
        letter-spacing: -1px;
    }

    .pd_rating_bar_row div {
        height: 8px;
        background: #eeeeee;
        border-radius: 999px;
        overflow: hidden;
    }

    .pd_rating_bar_row div i {
        display: block;
        height: 100%;
        background: #ff9b32;
        border-radius: inherit;
    }

    .pd_rating_bar_row small {
        color: #666666;
        font-size: 12px;
    }

    .pd_section_title {
        position: relative;
        padding-bottom: 14px;
        margin-bottom: 26px;
    }

    .pd_section_title h2 {
        margin: 0;
        color: #242933;
        font-size: 21px;
        line-height: 1.2;
        font-weight: 800;
    }

    .pd_section_title span {
        position: absolute;
        left: 0;
        bottom: -1.5px;
        width: 60px;
        height: 3px;
        background: #ff7a1a;
        border-radius: 999px;
    }

    .pd_review_note {
        margin: 0 0 28px;
        color: #777777;
        font-size: 15px;
        line-height: 1.5;
    }

    .pd_form_label {
        display: block;
        margin-bottom: 10px;
        color: #666666;
        font-size: 15px;
        line-height: 1.2;
    }

    .pd_review_textarea {
        width: 100%;
        height: 132px;
        border: 1px solid #e5e5e5;
        padding: 14px 20px;
        outline: none;
        color: #111827;
        font-size: 14px;
        resize: vertical;
        margin-bottom: 24px;
    }

    .pd_review_submit_row {
        display: grid;
        grid-template-columns: 1fr 166px;
        align-items: center;
        gap: 32px;
    }

    .pd_rating_select {
        width: 100%;
        height: 40px;
        border: 1px solid #e5e5e5;
        color: #666666;
        padding: 0 22px;
        outline: none;
        background: #ffffff;
    }

    .pd_submit_review_btn {
        height: 39px;
        border: none;
        background: #444444;
        color: #ffffff;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
    }

    .pd_related_section {
        width: 100%;
    }

    .pd_related_header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        border-bottom: 1px solid #d9d9d9;
        margin-bottom: 20px;
    }

    .pd_related_title {
        margin-bottom: 0;
    }

    .pd_more_product {
        margin-top: 3px;
        color: #ff6a00;
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }

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

    .pd_product_card {
        position: relative;
        background: #ffffff;
        border: 1px solid #cfcfcf;
        border-radius: 4px;
        padding: 14px 8px 8px;
        overflow: hidden;
        transition: 0.25s ease;
    }

    .pd_product_card:hover {
        border-color: #ff6a00;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
        transform: translateY(-4px);
    }

    .pd_product_img {
        width: 100%;
        height: 260px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin-bottom: 14px;
    }

    .pd_product_img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .pd_product_card:hover .pd_product_img img {
        transform: scale(1.06);
    }

    .pd_product_name {
        display: block;
        min-height: 44px;
        color: #111827;
        font-size: 17px;
        line-height: 20px;
        font-weight: 400;
        text-decoration: none;
        margin-bottom: 8px;
    }

    .pd_product_price {
        color: #ff6a00;
        font-size: 17px;
        line-height: 1;
        font-weight: 800;
        margin-bottom: 15px;
    }

    .pd_product_price del {
        color: #9ca3af;
        font-size: 15px;
        font-weight: 400;
        margin-left: 7px;
    }

    .pd_add_cart_outline,
    .pd_stock_out_btn {
        width: 100%;
        height: 40px;
        border: 1px solid #ff3d00;
        border-radius: 4px;
        background: #ffffff;
        color: #ff6a00;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: 0.25s ease;
    }

    .pd_stock_out_btn {
        color: #ff001f;
        border-color: #ff001f;
    }

    .pd_add_cart_outline:hover {
        background: #ff6a00;
        color: #ffffff;
    }

    .pd_stock_out_btn:hover {
        background: #ff001f;
        color: #ffffff;
    }

    .pd_small_badge {
        position: absolute;
        top: 14px;
        z-index: 4;
        min-height: 20px;
        padding: 5px 7px;
        border-radius: 4px;
        color: #ffffff;
        font-size: 10px;
        line-height: 1;
        font-weight: 800;
    }

    .pd_badge_orange {
        left: 14px;
        background: #ff7a1a;
    }

    .pd_badge_green {
        right: 14px;
        background: #22b978;
    }

    .pd_toast {
        position: fixed;
        top: 18px;
        right: 18px;
        z-index: 99999;
        background: #111827;
        color: #ffffff;
        padding: 12px 18px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 700;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: 0.25s ease;
    }

    .pd_toast.pd_show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    @media (max-width: 1199px) {
        .pd_container {
            max-width: 1000px;
        }

        .pd_details_grid {
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }

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

        .pd_product_img {
            height: 230px;
        }
    }

    @media (max-width: 991px) {
        .pd_container {
            max-width: 720px;
        }

        .pd_details_grid {
            grid-template-columns: 1fr;
            gap: 16px;
            margin-bottom: 30px;
        }

        .pd_main_image_box {
            height: 500px;
        }

        .pd_info_area {
            min-height: auto;
        }

        .pd_review_section {
            grid-template-columns: 1fr;
            gap: 28px;
            padding: 26px 18px 34px;
        }

        .pd_related_grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
    }

    @media (max-width: 767px) {
        .pd_page {
            padding: 10px 0 30px;
        }

        .pd_container {
            padding: 0 12px;
        }

        .pd_main_image_box {
            height: 385px;
        }

        .pd_info_area {
            padding: 12px 14px 22px;
        }

        .pd_breadcrumb {
            font-size: 13px;
            margin-bottom: 12px;
        }

        .pd_product_title {
            font-size: 20px;
            line-height: 1.35;
            margin-bottom: 13px;
        }

        .pd_price_area span {
            font-size: 24px;
        }

        .pd_price_area del {
            font-size: 19px;
        }

        .pd_rating_area {
            flex-wrap: wrap;
            gap: 6px;
        }

        .pd_rating_area a {
            margin-left: 4px;
        }

        .pd_action_buttons {
            grid-template-columns: 1fr;
        }

        .pd_add_cart_btn,
        .pd_order_now_btn {
            font-size: 17px;
        }

        .pd_thumb_item {
            width: 108px;
            height: 74px;
        }

        .pd_review_submit_row {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .pd_rating_bar_group {
            width: 100%;
        }

        .pd_related_header {
            align-items: center;
        }

        .pd_section_title h2 {
            font-size: 20px;
        }

        .pd_related_grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .pd_product_img {
            height: 160px;
        }

        .pd_product_name {
            min-height: 38px;
            font-size: 13px;
            line-height: 17px;
        }

        .pd_product_price {
            font-size: 14px;
        }

        .pd_add_cart_outline,
        .pd_stock_out_btn {
            height: 36px;
            font-size: 12px;
        }
    }

    @media (max-width: 480px) {
        .pd_main_image_box {
            height: 315px;
        }

        .pd_main_image_box:hover .pd_main_image {
            transform: scale(1.85);
        }

        .pd_discount_badge {
            width: 42px;
            height: 42px;
        }

        .pd_product_title {
            font-size: 18px;
        }

        .pd_delivery_box {
            padding: 12px 14px;
        }

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

        .pd_review_section {
            padding: 22px 14px 28px;
        }

        .pd_average_row h2 {
            font-size: 52px;
        }

        .pd_recommend_row {
            gap: 14px;
        }

        .pd_recommend_row strong {
            font-size: 24px;
        }

        .pd_product_img {
            height: 135px;
        }
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const pd_main_image_box = document.getElementById("pd_main_image_box");
        const pd_main_image = document.getElementById("pd_main_image");
        const pd_thumbs = document.querySelectorAll(".pd_thumb_item");
        const pd_minus_btn = document.getElementById("pd_minus_btn");
        const pd_plus_btn = document.getElementById("pd_plus_btn");
        const pd_qty_input = document.getElementById("pd_qty_input");
        const pd_toast = document.getElementById("pd_toast");

        function pd_show_toast(message) {
            if (!pd_toast) return;

            pd_toast.textContent = message;
            pd_toast.classList.add("pd_show");

            setTimeout(function () {
                pd_toast.classList.remove("pd_show");
            }, 1800);
        }

        pd_thumbs.forEach(function (thumb) {
            thumb.addEventListener("click", function () {
                const image = thumb.getAttribute("data-image");

                pd_thumbs.forEach(function (item) {
                    item.classList.remove("pd_active");
                });

                thumb.classList.add("pd_active");

                if (pd_main_image && image) {
                    pd_main_image.src = image;
                }
            });
        });

        if (pd_main_image_box && pd_main_image) {
            pd_main_image_box.addEventListener("mousemove", function (event) {
                const rect = pd_main_image_box.getBoundingClientRect();
                const x = ((event.clientX - rect.left) / rect.width) * 100;
                const y = ((event.clientY - rect.top) / rect.height) * 100;

                pd_main_image.style.transformOrigin = x + "% " + y + "%";
            });

            pd_main_image_box.addEventListener("mouseleave", function () {
                pd_main_image.style.transformOrigin = "center center";
            });
        }

        if (pd_minus_btn) {
            pd_minus_btn.addEventListener("click", function () {
                let qty = parseInt(pd_qty_input.value, 10) || 1;
                qty = qty > 1 ? qty - 1 : 1;
                pd_qty_input.value = qty;
            });
        }

        if (pd_plus_btn) {
            pd_plus_btn.addEventListener("click", function () {
                let qty = parseInt(pd_qty_input.value, 10) || 1;
                pd_qty_input.value = qty + 1;
            });
        }

        document.querySelectorAll(".pd_add_cart_btn, .pd_add_cart_outline").forEach(function (btn) {
            btn.addEventListener("click", function () {
                pd_show_toast("Product added to cart");
            });
        });

        document.querySelectorAll(".pd_order_now_btn").forEach(function (btn) {
            btn.addEventListener("click", function () {
                pd_show_toast("Order process started");
            });
        });

        document.querySelectorAll(".pd_submit_review_btn").forEach(function (btn) {
            btn.addEventListener("click", function () {
                pd_show_toast("Review submitted successfully");
            });
        });
    });
</script>
@endsection