<?php $__env->startPush('meta'); ?>
    <?php echo $__env->make('frontend.partials.product-seo', ['product' => $product], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php $__env->stopPush(); ?>


<?php $__env->startSection('content'); ?>
    <div class="container mt-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item text-capitalize"><a href="#"><?php echo e($product->name); ?></a></li>

            </ol>
        </nav>
    </div>
    <!-- end breadcrumb -->
    <div class="container">
        <section class="product-section">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                    <div class="image-container">

                        <div id="carouselExample" class="carousel slide">
                            <div class="carousel-inner">
                                <?php $__currentLoopData = $product->galleries; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $gallery): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <div class="carousel-item <?php echo e($key == 0 ? 'active' : ''); ?>">
                                        <img src="<?php echo e(asset('storage/' . $gallery->image)); ?>" class="d-block w-100"
                                            alt="Gallery Image">
                                    </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample"
                                data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#carouselExample"
                                data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                        </div>

                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                    <div class="d-flex flex-column justify-content-center mt-4">
                        
                        <?php
                            $hasDiscount = !is_null($product->discount_price) && $product->discount_price > 0;
                            $basePrice   = $product->price ?: 0;
                            $finalPrice  = $hasDiscount ? $product->discount_price : $basePrice;
                        
                            $discountPercent = $hasDiscount && $basePrice > 0
                                ? round((($basePrice - $product->discount_price) / $basePrice) * 100)
                                : null;
                        ?>

                    
                        <div class="pro-info text-center">
                            <h3><?php echo e($product->name); ?></h3>
                            <p><?php echo e($product->product_code); ?></p>
                        
                            <h3 class="price">
                                BDT: <?php echo e(number_format($finalPrice, 2)); ?> Tk
                        
                                <?php if($hasDiscount): ?>
                                    <span class="text-muted text-decoration-line-through fs-6 ms-2">
                                        <?php echo e(number_format($basePrice, 2)); ?> Tk
                                    </span>
                                <?php endif; ?>
                            </h3>
                        
                            <?php if($discountPercent): ?>
                                <span class="badge bg-danger rounded-pill px-3 py-2 mt-2">
                                    <?php echo e($discountPercent); ?>% OFF
                                </span>
                            <?php endif; ?>
                        </div>

                        <?php
                            $hasSize = false;
                            foreach ($product->variants as $item) {
                                if (!is_null($item->size)) {
                                    $hasSize = true;
                                    break;
                                }
                            }
                        ?>

                        <input type="hidden" id="hasSize" value="<?php echo e($hasSize ? 'true' : 'false'); ?>">

                        <?php if($hasSize): ?>
                            <div class="size-guid">
                                <div class="view-size d-flex justify-content-between align-items-center">
                                    <h5>Select Size</h5>
                                    <p><a class="size-guide" href="" data-bs-toggle="modal"
                                            data-bs-target="#staticBackdrop">View Size Guide</a></p>
                                </div>

                                <!-- ---modal-- -->
                                <!-- Modal -->
                                <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static"
                                    data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel"
                                    aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h1 class="modal-title fs-5" id="staticBackdropLabel">Cotton Panjabi
                                                </h1>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <ul class="nav nav-pills mb-1 d-flex justify-content-start w-100"
                                                    id="pills-tab" role="tablist">

                                                    <li class="nav-item mt-2" role="presentation">
                                                        <button class="pill-item nav-link modal-button active"
                                                            id="pills-home-tab" data-bs-toggle="pill"
                                                            data-bs-target="#pills-home" type="button" role="tab"
                                                            aria-controls="pills-home" aria-selected="true">IN</button>

                                                    </li>
                                                    <li class="nav-item mt-2" role="presentation">
                                                        <button class="pill-item nav-link modal-button"
                                                            id="pills-profile-tab" data-bs-toggle="pill"
                                                            data-bs-target="#pills-profile" type="button" role="tab"
                                                            aria-controls="pills-profile" aria-selected="false">CM</button>

                                                    </li>

                                                </ul>
                                                <!-- start card section -->
                                                <div class="tab-content" id="pills-tabContent">

                                                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                                                        aria-labelledby="pills-home-tab" tabindex="0">
                                                        <h5 class="text-center">Regular Fit (Set)</h5>
                                                        <div class="size-table">
                                                            <table class="table">
                                                                <tbody>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Size Guide for
                                                                            Kabli</th>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Measurement
                                                                            Points</th>
                                                                        <td>XS</td>
                                                                        <td>S</td>
                                                                        <td>M</td>
                                                                        <td>L</td>
                                                                        <td>XL</td>
                                                                        <td>2XL</td>
                                                                        <td>3XL</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">1/2 CHEST
                                                                        </th>
                                                                        <td>19.75</td>
                                                                        <td>20.5</td>
                                                                        <td>21.75</td>
                                                                        <td>22.75</td>
                                                                        <td>24</td>
                                                                        <td>25.25</td>
                                                                        <td>26.75</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">BODY LENGTH
                                                                        </th>
                                                                        <td>41.25</td>
                                                                        <td>42</td>
                                                                        <td>43.25</td>
                                                                        <td>46.5</td>
                                                                        <td>47.25</td>
                                                                        <td>47.25</td>
                                                                        <td>47.25</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Size Guide
                                                                            for
                                                                            Trousers</th>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">WAIST RANGE
                                                                        </th>
                                                                        <td>27-29</td>
                                                                        <td>30-32</td>
                                                                        <td>33-34</td>
                                                                        <td>35-36</td>
                                                                        <td>37-38</td>
                                                                        <td>39-42</td>
                                                                        <td>43-47</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">FULL LENGTH
                                                                        </th>
                                                                        <td>37.75</td>
                                                                        <td>38.5</td>
                                                                        <td>39.25</td>
                                                                        <td>40</td>
                                                                        <td>41</td>
                                                                        <td>41.75</td>
                                                                        <td>42.5</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">FULL LEG
                                                                            OPENING</th>
                                                                        <td>12.25</td>
                                                                        <td>12.5</td>
                                                                        <td>13</td>
                                                                        <td>13.25</td>
                                                                        <td>13.75</td>
                                                                        <td>14</td>
                                                                        <td>14.5</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>

                                                    </div>

                                                    <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                                                        aria-labelledby="pills-profile-tab" tabindex="0">
                                                        <h5 class="text-center">Regular fit (Set)</h5>
                                                        <div class="size-table">
                                                            <table class="table">
                                                                <tbody>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Size Guide
                                                                            for
                                                                            Kabli</th>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Measurement
                                                                            Points</th>
                                                                        <td>XS</td>
                                                                        <td>S</td>
                                                                        <td>M</td>
                                                                        <td>L</td>
                                                                        <td>XL</td>
                                                                        <td>2XL</td>
                                                                        <td>3XL</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">1/2 Chest
                                                                        </th>
                                                                        <td>50</td>
                                                                        <td>52.5</td>
                                                                        <td>55</td>
                                                                        <td>58</td>
                                                                        <td>61</td>
                                                                        <td>64</td>
                                                                        <td>68</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Body Length
                                                                        </th>
                                                                        <td>105</td>
                                                                        <td>107</td>
                                                                        <td>110</td>
                                                                        <td>118</td>
                                                                        <td>120</td>
                                                                        <td>120</td>
                                                                        <td>120</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Size Guide
                                                                            for
                                                                            Trousers</th>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Waist Range
                                                                        </th>
                                                                        <td>68.5 - 73.5</td>
                                                                        <td>76 - 81 </td>
                                                                        <td>83 - 86</td>
                                                                        <td>89 - 91.5</td>
                                                                        <td>94 - 96.5</td>
                                                                        <td>99 - 106.5</td>
                                                                        <td>109-119.5</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Full Length
                                                                        </th>
                                                                        <td>96</td>
                                                                        <td>98</td>
                                                                        <td>100</td>
                                                                        <td>102</td>
                                                                        <td>104</td>
                                                                        <td>106</td>
                                                                        <td>108</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Full leg
                                                                            Opening</th>
                                                                        <td>31</td>
                                                                        <td>32</td>
                                                                        <td>33</td>
                                                                        <td>34</td>
                                                                        <td>35</td>
                                                                        <td>36</td>
                                                                        <td>37</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>

                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- ---modal-- -->
                            </div>

                            <div class="size">
                                <div
                                    class="pro-size d-flex justify-content-start align-items-center gap-4 border-bottom pb-2">
                                    <?php $__currentLoopData = $product->variants; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        
                                        <li class="product-size <?php echo e($item->stock === 0 ? 'disabled-link' : ''); ?>">
                                            <a href=""
                                                data-product-size="<?php echo e($item->size); ?>"><?php echo e($item->size); ?></a>
                                        </li>
                                        
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>

                            </div>
                        <?php endif; ?>

                        <div class="message d-flex justify-content-center align-items-center">
                            <p class="selected-size"></p>
                        </div>
                        <div class="d-flex justify-content-center align-items-center">
                            <a class="getcartitem add-item" href="javascript:void(0)"
                                data-product-id=<?php echo e($product->id); ?>><button class="cartbtn" type="button">ADD TO
                                    CART</button></a>

                            <!-- Modal -->
                            <div class="modal fade" id="staticcart" data-bs-backdrop="static" data-bs-keyboard="false"
                                tabindex="-1" aria-labelledby="addtocart" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h1 class="modal-title fs-5" id="addtocart">Product added successfully for
                                                order</h1>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row product-popup">
                                                <div class="col-12 col-sm-12 col-md-12 col-lg-4">
                                                    <img src="<?php echo e(asset('storage/' . $product->thumbnail)); ?>"
                                                        alt="" width="200" height="250">
                                                </div>
                                                <div class="col-12 col-sm-12 col-md-12 col-lg-8">
                                                    <h3 class="mb-2"><?php echo e($product->name); ?></h3>
                                                    <p class="p-0 m-0">Size: <span class="product_size"></span></p>
                                                    <p class="p-0 m-0">Quantity: 1</p>
                                                    <p class="p-0 m-0">Price: Tk <?php echo e(number_format($finalPrice, 2)); ?></p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <a class="add-item" href=""><button class="cartbtn"
                                                    type="button">Continue Shopping</button></a>
                                            <a class="add-item" href="<?php echo e(route('order.create')); ?>"><button
                                                    class="cartbtn" type="button">Go to Order</button></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Modal -->


                        </div>

                        <div class="d-flex justify-content-center align-items-center mt-4">
                            <button class="storebtn" type="button">BUY IN STORE</button>
                        </div>
                        <div class="mt-5">
                            <div class="socil-icon">
                                <li><a href="https://www.facebook.com/luxurylifestyle2030" target="_blank"><i
                                            class="fa-brands fa-facebook"></i></a></li>
                                <li><a href="https://x.com/i/flow/login?mx=2" target="_blank"><i
                                            class="fa-brands fa-twitter"></i></a>
                                </li>
                                <li><a href="https://www.linkedin.com/company/thebrainbd/posts/?feedView=all"
                                        target="_blank"><i class="fa-brands fa-linkedin"></i></a>
                                </li>
                                <li><a href="https://www.linkedin.com/login" target="_blank"><i
                                            class="fa-brands fa-youtube"></i></a>
                                </li>
                                <li><a href="https://www.instagram.com/accounts/login/?hl=en"><i
                                            class="fa-brands fa-instagram"></i></a>
                                </li>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </section>
    </div>

    <div class="container-fluid mt-5">
        <section class="details-section">
            <div class="p-details">
                <div class="card-body product-details">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                            <div class="p-description d-flex justify-content-center align-items-center">
                                <div class="description ms-2">
                                    <h5 class="description-title">Description</h5>
                                    <div class="pdescription">
                                        <?php echo $product->description; ?>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                            <div class="p-details d-flex justify-content-center align-items-center">
                                <div class="details ms-2">
                                    <h5 class="details-title">Details</h5>
                                    <div class="pdetails">
                                        <?php echo $product->detail; ?>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                            <div class="p-materials d-flex justify-content-center align-items-center">
                                <div class="materials ms-2">
                                    <h5 class="materials-title">Materials</h5>
                                    <div class="pmaterials">
                                        <?php echo $product->matetial; ?>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                            <div class="p-care d-flex justify-content-center align-items-center">
                                <div class="care ms-2">
                                    <h5 class="care-title">Care</h5>
                                    <div class="pcare">
                                        <?php echo $product->care; ?>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </div>

    <div class="container-fluid mt-5">
        <section class="carousel">
            <div class="container">
                <div class="caro-heading d-flex justify-content-center align-items-center">
                    <h4>YOU MAY ALSO BUY</h4>
                </div>
                <div class="owl-carousel owl-theme details-carousel mt-2">
                    <?php $__currentLoopData = $tranding; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php
                            $itemBasePrice = $item->price ?: 0;
                            $itemHasDiscount = !is_null($item->discount_price) && $item->discount_price > 0 && $item->discount_price < $itemBasePrice;
                            $itemFinalPrice = $itemHasDiscount ? $item->discount_price : $itemBasePrice;
                        ?>

                        <div class="item">
                            <div class="pcard">
                                <div class="pimage">
                                    <img src="<?php echo e(asset('storage/' . $item->thumbnail)); ?>" class="card-img-top"
                                        alt="<?php echo e($item->name); ?>">
                                </div>
                                <div class="pbody">
                                    <h5 class="pname"><?php echo e($item->name); ?></h5>

                                    
                                    <p class="p-0 m-0 fw-semibold text-danger">
                                        Tk <?php echo e(number_format($itemFinalPrice, 2)); ?>

                                    </p>

                                    <?php if($itemHasDiscount): ?>
                                        <p class="p-0 m-0 text-muted text-decoration-line-through small">
                                            Tk <?php echo e(number_format($itemBasePrice, 2)); ?>

                                        </p>
                                    <?php endif; ?>

                                    
                                </div>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                </div>

            </div>
        </section>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('script'); ?>
    <?php echo $__env->make('frontend.partials.ga4-product', ['product' => $product], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('style'); ?>

    <style>
        .product-section {
            padding: 2.5rem 0 3rem;
        }

        .product-section .row:first-child {
            row-gap: 2rem;
        }

        .image-container {
            background: linear-gradient(135deg, #f9fafb, #eef2ff);
            border-radius: 18px;
            padding: 1rem;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
        }

        .image-container .carousel,
        .image-container img {
            border-radius: 14px;
            overflow: hidden;
        }

        .image-container img {
            width: 100%;
            height: 420px;
            object-fit: cover;
        }

        .pro-info {
            text-align: left;
            margin-bottom: 1.25rem;
        }

        .pro-info h3 {
            font-size: 1.5rem;
            font-weight: 600;
            color: #111827;
            margin-bottom: .25rem;
        }

        .pro-info p {
            margin-bottom: 0;
            font-size: .9rem;
            color: #6b7280;
        }

        .price {
            font-size: 1.3rem;
            font-weight: 700;
            color: #e11d48;
            margin-top: .4rem;
        }

        .size-guid {
            margin-top: 1.5rem;
        }

        .view-size h5 {
            font-size: .95rem;
            font-weight: 500;
            margin-bottom: 0;
        }

        .size-guide {
            font-size: .85rem;
            text-decoration: none;
            color: #4f46e5;
            font-weight: 500;
        }

        .size-guide:hover {
            text-decoration: underline;
            color: #4338ca;
        }

        .size {
            margin-top: 0.75rem;
        }

        .pro-size {
            list-style: none;
            padding-left: 0;
            flex-wrap: wrap;
            gap: .5rem .75rem;
        }

        .product-size {
            position: relative;
            display: inline-flex;
        }

        .product-size a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            padding: .35rem .75rem;
            border-radius: 999px;
            border: 1px solid #e5e7eb;
            font-size: .85rem;
            color: #111827;
            text-decoration: none;
            background-color: #ffffff;
            transition: all .15s ease-out;
        }

        .product-size a:hover {
            border-color: #4f46e5;
            color: #111827;
            box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.15);
        }

        .product-size.active a {
            background-color: #111827;
            color: #f9fafb;
            border-color: #111827;
        }

        .message {
            min-height: 24px;
            margin-top: .75rem;
        }

        .selected-size {
            font-size: .9rem;
            color: #10b981;
        }

        .add-item {
            width: 100%;
            max-width: 320px;
            display: flex;
            justify-content: center;
            text-decoration: none;
        }

        .cartbtn {
            width: 100%;
            border: none;
            border-radius: 999px;
            padding: .7rem 1rem;
            font-size: .95rem;
            font-weight: 600;
            letter-spacing: .04em;
            text-transform: uppercase;
            background: linear-gradient(135deg, #111827, #020617);
            color: #f9fafb;
            box-shadow: 0 12px 25px rgba(15, 23, 42, 0.45);
            transition: transform .1s ease-out, box-shadow .1s ease-out, background .15s ease-out;
        }

        .cartbtn:hover {
            transform: translateY(-1px);
            box-shadow: 0 16px 30px rgba(15, 23, 42, 0.55);
            background: linear-gradient(135deg, #020617, #000000);
            color: #f9fafb;
        }

        .cartbtn:active {
            transform: translateY(0);
            box-shadow: 0 10px 20px rgba(15, 23, 42, 0.35);
        }

        .product-popup img {
            border-radius: 12px;
            object-fit: cover;
        }

        .product-popup h3 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: .25rem;
        }

        .product-popup p {
            font-size: .9rem;
            color: #4b5563;
        }

        .p-description,
        .p-details,
        .p-materials,
        .p-care {
            padding: 1.75rem 1.25rem;
            border-radius: 18px;
            background-color: #f9fafb;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
            margin-bottom: 1.25rem;
        }

        .description-title,
        .details-title,
        .materials-title,
        .care-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: .5rem;
            color: #111827;
        }

        .pdescription,
        .pdetails,
        .pmaterials,
        .pcare {
            font-size: .92rem;
            color: #4b5563;
            line-height: 1.6;
        }

        .car {
            padding-bottom: 3rem;
        }

        .car .card {
            border-radius: 18px;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
        }

        .car .card-title {
            font-size: 1rem;
            font-weight: 600;
        }

        .car .card-text {
            font-size: .9rem;
            color: #4b5563;
        }

        .size-table table {
            font-size: .82rem;
        }

        .size-table th {
            font-weight: 500;
        }

        .size-table td,
        .size-table th {
            padding: .35rem .5rem;
            vertical-align: middle;
        }

        .pill-item {
            font-size: .85rem;
            border-radius: 999px !important;
        }

        .pill-item.nav-link.active {
            background-color: #111827;
        }

        .disabled-link {
            pointer-events: none;
            opacity: 0.5;
        }

        .disabled-link a {
            cursor: not-allowed;
            text-decoration: line-through;
        }

        .disabled-link::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 55%;
            height: 2px;
            background: rgb(230, 8, 8);
        }

        @media (max-width: 767.98px) {
            .image-container img {
                height: 320px;
            }

            .add-item {
                max-width: 100%;
            }

            .product-section {
                padding-top: 1.5rem;
            }
        }
    </style>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('script'); ?>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('frontend.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/brainbo1/sefcard.com/resources/views/frontend/details.blade.php ENDPATH**/ ?>