<?php include_once 'header.php' ?>

<div class="aG productDetailPage">
    <section class="product_right">
        <section class="">
            <!-- Main image slider -->
            <div class="swiper swiper_product-main">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide"><img src="webImages/sec-3/1.1.jpg" alt="webImages"></div>
                    <div class="swiper-slide"><img src="webImages/sec-3/1.jpg" alt="webImages"></div>
                    <div class="swiper-slide"><img src="webImages/sec-3/2.jpg" alt="webImages"></div>
                    <div class="swiper-slide"><img src="webImages/sec-3/3.jpg" alt="webImages"></div>
                    <div class="swiper-slide"><img src="webImages/sec-3/4.jpg" alt="webImages"></div>
                </div>
                <!--scrollbar -->
                <div class="swiper-scrollbar"></div>
                <!-- navigation buttons -->
                <div class="swiper-button-prev swiper-button"></div>
                <div class="swiper-button-next swiper-button"></div>
            </div>

            <aside class="sidebar w-96 flex-shrink-0 space-y-6" aria-label="Product purchase and options">
                <div>
                    <p class="text-xs font-semibold text-gray-500 uppercase mb-1">Dope</p>
                    <h1 class="text-3xl font-bold mb-2">Adept W</h1>
                    <p class="text-sm font-medium text-gray-700 mb-2">Snowboardjacka Dam Cumulus</p>
                    <div class="flex flex-row items-center space-x-4">
                        <p class="text-xl font-extrabold text-red-600">1 889,10 kr</p>
                        <p class="text-sm line-through text-gray-400">2 099 kr</p>
                    </div>
                    <div class="flex items-center mt-1" aria-label="Product rating 4.9 out of 5">
                        <div class="flex text-amber-400" aria-hidden="true">
                            <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
                        </div>
                        <span class="text-xs text-gray-600 ml-2">(3837)</span>
                    </div>
                </div>

                <section aria-labelledby="colors-label">
                    <h2 id="colors-label" class="font-bold mb-2 text-sm">Färg</h2>
                    <div class="flex items-center space-x-3 overflow-hidden">
                        <div class="color-swatch active" tabindex="0" aria-label="Cumulus color" role="button" aria-pressed="true" data-color="cumulus">
                            <img src="https://placehold.co/48x48/ccd5d9/000000/png?text=C" alt="Cumulus patterned snowboard jacket color swatch pastel icy blue, pink and gray" />
                        </div>
                        <div class="color-swatch" tabindex="0" aria-label="Black color" role="button" aria-pressed="false" data-color="black">
                            <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/58b02062-0eff-46af-b802-0c08b2e0e29c.png" alt="Black color swatch" />
                        </div>
                        <div class="color-swatch" tabindex="0" aria-label="Pink color" role="button" aria-pressed="false" data-color="pink">
                            <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/d95c9dc5-639f-4bdd-b7b2-a5e4d720d2aa.png" alt="Soft pink color swatch" />
                        </div>
                        <div class="color-swatch" tabindex="0" aria-label="Gray color" role="button" aria-pressed="false" data-color="gray">
                            <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/570e56e4-69a9-424c-be4a-2bde590a04c2.png" alt="Gray color swatch" />
                        </div>
                        <div class="color-swatch more" tabindex="0" aria-label="More colors available">+21</div>
                    </div>
                </section>

                <section aria-labelledby="sizes-label" class="mt-6">
                    <h2 id="sizes-label" class="font-bold mb-2 text-sm">Storlek</h2>
                    <div class="size_box grid grid-cols-5 gap-3">
                        <button class="btn-select active" aria-pressed="true" data-size="XXS">XXS</button>
                        <button class="btn-select" aria-pressed="false" data-size="XS">XS</button>
                        <button class="btn-select" aria-pressed="false" data-size="S">S</button>
                        <button class="btn-select" aria-pressed="false" data-size="M">M</button>
                        <button class="btn-select" aria-pressed="false" data-size="L">L</button>
                        <button class="btn-select" aria-pressed="false" data-size="XL">XL</button>
                        <button class="btn-select" aria-pressed="false" data-size="XXL">XXL</button>
                    </div>
                    <p class="mt-2 text-xs text-gray-500">Modellen är 175 cm lång och har storlek S.</p>
                </section>

                <button id="add-to-cart" class="w-full py-4 bg-black text-white font-semibold mt-8 hover:bg-gray-900 transition ease-in-out" aria-label="Add Adept W snowboard jacket to cart for 1889.10 kronor">
                    Lägg i varukorg – 1 889,10 kr
                </button>

                <ul class="mt-8 space-y-3 text-xs text-gray-600">
                    <li class="flex items-start gap-2">
                        <svg class="w-5 h-5 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4" />
                        </svg>
                        Fri frakt & fria returer
                    </li>
                    <li class="flex items-start gap-2">
                        <svg class="w-5 h-5 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4" />
                        </svg>
                        30 dagars öppet köp
                    </li>
                    <li class="flex items-start gap-2">
                        <svg class="w-5 h-5 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4" />
                        </svg>
                        Snabba leveranser
                    </li>
                </ul>

            </aside>

            <!-- Tabbed content below images -->
            <nav role="tablist" aria-label="Product detail tabs" class="tabs_title">
                <a role="tab" aria-selected="true" href="#details-tab" id="tab-details" class="tab-button">Detaljer</a>
                <a role="tab" aria-selected="false" href="#info-tab" id="tab-info" class="tab-button">Information</a>
                <a role="tab" aria-selected="false" href="#tech-tab" id="tab-tech" class="tab-button">Teknologi</a>
                <a role="tab" aria-selected="false" href="#reviews-tab" id="tab-reviews" class="tab-button">Omdömen</a>
            </nav>

            <div class="tab-content-wrapper">
                <section id="details-tab" class="tab-content ">
                    <h2 class="tab-content-title">Detaljer</h2>
                    <!-- Details slider horizontal -->
                    <div class="swiper swiper-product-detail">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/1.jpg" alt="" />
                                        <div data-deep="badge" class="hp">Rea</div>
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Storm Guard huva</div>
                                        <div class="wj">Stormsäker huva som funkar lika bra med hjälm som utan. Dragskor fram och bak för att kunna justera till perfekt passform.</div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/2.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Blizzard W Full Zip</div>
                                        <div class="wj">Stora ventilations dragkedjor, perfekt placerade för effektiv ventilation.</div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/3.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Adept W</div>
                                        <div class="wj">Praktiskt placerad ficka skapad för din telefon utrustad med genomgång för hörlurar med sladd.</div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/4.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Blizzard W</div>
                                        <div class="wj">Stora ventilations dragkedjor, perfekt placerade för effektiv ventilation.</div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-scrollbar"></div>
                        <div class="swiper-button-next swiper-button"></div>
                        <div class="swiper-button-prev swiper-button"></div>
                    </div>
                </section>

                <section id="info-tab" class="tab-content">
                    <h2 class="tab-content-title">Adept W</h2>

                    <div class="max-w-5xl text-gray-700 text-sm leading-relaxed space-y-4">
                        <p> Adept, enkelhet och pålitlighet. En zip through jacka med alla
                            funktioner som du behöver för en lång dag på berget. Ytterst vattentät, tålig och designad med
                            vinterns utmaningar i åtanke. En jacka för alla lägen. Nu gäller det bara att utnyttja alla
                            funktioner som Adept har att erbjuda.</p>

                        <div class="grid grid-cols-2 gap-8 text-xs text-gray-700 leading-snug">
                            <div>
                                <h4 class="info-title">All Mountain</h4>
                                <p>Byggd för skidåkning och snowboarding, All Mountain-kollektionen är utvecklad för dig med
                                    de högsta kraven på material och funktion. Om kompromissen inte är gångbar så har du
                                    hittat hem.</p>
                            </div>
                            <div>
                                <h4 class="info-title">Vadderad</h4>
                                <p>Mellanvikt's vaddering för perfekt balans mellan värme och prestanda (60g/m² kropp,
                                    40g/m² ärmer och huva).</p>
                            </div>
                        </div>

                        <div class="mt-6 flex space-x-6 text-gray-500 text-xs font-semibold">
                            <span class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg"
                                    class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 12l2 2l4 -4" />
                                </svg>bluesign®</span>
                            <span class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg"
                                    class="w-5 h-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 4v16m8-8H4" />
                                </svg>Återvunnen</span>
                            <span class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg"
                                    class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
                                    <path
                                        d="M12 2L15.09 8.26H21.82L16.36 12.99L18.45 19.25L12 14.52L5.55 19.25L7.64 12.99L2.18 8.26H8.91L12 2Z" />
                                </svg>Solution Dyed</span>
                        </div>
                    </div>
                </section>

                <section id="tech-tab" class="tab-content ">
                    <h2 class="tab-content-title">Teknologi</h2>

                    <!-- Details slider horizontal -->
                    <div class="swiper swiper-product-detail">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/1.jpg" alt="" />
                                        <div data-deep="badge" class="hp">Rea</div>
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Storm Guard huva</div>
                                        <div class="wj">Stormsäker huva som funkar lika bra med hjälm som utan. Dragskor fram och bak för att kunna justera till perfekt passform.</div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/2.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Blizzard W Full Zip</div>
                                        <div class="wj">Stora ventilations dragkedjor, perfekt placerade för effektiv ventilation.</div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/3.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Adept W</div>
                                        <div class="wj">Praktiskt placerad ficka skapad för din telefon utrustad med genomgång för hörlurar med sladd.</div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/4.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Blizzard W</div>
                                        <div class="wj">Stora ventilations dragkedjor, perfekt placerade för effektiv ventilation.</div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-scrollbar"></div>
                        <div class="swiper-button-next swiper-button"></div>
                        <div class="swiper-button-prev swiper-button"></div>
                    </div>
                </section>

                <section id="reviews-tab" class="tab-content ">
                    <header class="mb-6">
                        <h2 class="text-xl font-semibold">Betyg & Omdömen</h2>
                        <p class="text-sm text-gray-600 mt-1">4.9 <span aria-hidden="true">★</span><span
                                class="sr-only">stjärnor</span> – Baserat på <a href="#reviews-list" class="underline">3837
                                omdömen</a></p>
                    </header>
                    <section id="reviews-list" aria-live="polite" class="space-y-4">
                        <article class="review-box" tabindex="0">
                            <div class="flex items-center mb-2">
                                <div aria-label="5 stjärnor" class="flex text-amber-400" role="img" aria-hidden="true">
                                    <span class="star">★</span><span class="star">★</span><span class="star">★</span><span
                                        class="star">★</span><span class="star">★</span>
                                </div>
                                <p class="sr-only">5 stjärnor</p>
                                <span class="review-user">Chrissu</span>
                                <time datetime="2023-06-01" class="review-date">1 jun. 2023</time>
                            </div>
                            <p class="text-gray-700 text-sm">Riktigt bra jacka! Stämmer bra i storlek och är varm och skön.
                                Den tål även vatten, helt perfekt! Rekommenderar verkligen.</p>
                        </article>
                        <article class="review-box" tabindex="0">
                            <div class="flex items-center mb-2">
                                <div aria-label="5 stjärnor" class="flex text-amber-400" role="img" aria-hidden="true">
                                    <span class="star">★</span><span class="star">★</span><span class="star">★</span><span
                                        class="star">★</span><span class="star">★</span>
                                </div>
                                <span class="review-user">Carola</span>
                                <time datetime="2024-11-23" class="review-date">23 nov. 2024</time>
                            </div>
                            <p class="text-gray-700 text-sm">Utmärkt.</p>
                        </article>
                        <article class="review-box" tabindex="0">
                            <div class="flex items-center mb-2">
                                <div aria-label="5 stjärnor" class="flex text-amber-400" role="img" aria-hidden="true">
                                    <span class="star">★</span><span class="star">★</span><span class="star">★</span><span
                                        class="star">★</span><span class="star">★</span>
                                </div>
                                <span class="review-user">Ebba</span>
                                <time datetime="2024-10-06" class="review-date">6 okt. 2024</time>
                            </div>
                            <p class="text-gray-700 text-sm">Den var bra!</p>
                        </article>
                        <button
                            class="mt-3 px-4 py-2 text-sm font-semibold border border-gray-300 rounded hover:bg-gray-100"
                            aria-label="Show more reviews">Fler omdömen</button>
                    </section>
                </section>


                <section class="mt-16">
                    <h2 class="tab-content-title">Så bär andra den</h2>
                    <div class="grid grid-cols-2 md:grid-cols-6 gap-4 max-w-5xl">
                        <figure class="flex flex-col items-center cursor-pointer" tabindex="0" aria-label="Instagram post by user xxaxanielx">
                            <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/fc637f18-520a-4a38-b4d0-9eedd82aa4c4.png" alt="Instagram photo showing woman wearing Dope Adept W snowboard jacket styled on snow mountain with blue skies" class="rounded w-full h-40 object-cover mb-2" />
                            <figcaption class="text-xs text-gray-600">@xxaxanielx</figcaption>
                        </figure>
                        <figure class="flex flex-col items-center cursor-pointer" tabindex="0" aria-label="Instagram post by user gofiskova_kristine">
                            <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/e050d44d-35d3-4498-8498-1faf8c27bb9f.png" alt="Instagram photo of woman showing snowboard jacket profile, snowy background, blue tint" class="rounded w-full h-40 object-cover mb-2" />
                            <figcaption class="text-xs text-gray-600">@gofiskova_kristine</figcaption>
                        </figure>
                    </div>
                </section>

                <section class="mt-16">
                    <h2 class="tab-content-title">Produkter du kanske gillar</h2>
                    <div class="swiper swiper-product">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/1.jpg" alt="" />
                                        <div data-deep="badge" class="hp">Rea</div>
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Dope Adept W Snowboardjacka</div>
                                        <div class="wj">Soft Pink</div>
                                        <div class="vJ wj">
                                            <div>2 099 kr</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/2.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Blizzard W Full Zip</div>
                                        <div class="vJ wj">
                                            <div>2 099 kr</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/3.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Adept W</div>
                                        <div class="vJ wj">
                                            <div>1 679,20 kr</div>
                                            <div><del>2 099 kr</del></div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/4.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Blizzard W</div>
                                        <div class="vJ wj">
                                            <div>2 099 kr</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/5.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Yeti</div>
                                        <div class="vJ wj">
                                            <div>2 099 kr</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/6.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Yeti</div>
                                        <div class="vJ wj">
                                            <div>2 099 kr</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/7.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Yeti</div>
                                        <div class="vJ wj">
                                            <div>1 679,20 kr</div>
                                            <div><del>2 099 kr</del></div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/8.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Yeti</div>
                                        <div class="vJ wj">
                                            <div>2 099 kr</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/9.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Adept W</div>
                                        <div class="vJ wj">
                                            <div>2 099 kr</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/10.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Adept W</div>
                                        <div class="vJ wj">
                                            <div>2 099 kr</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/11.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Adept W</div>
                                        <div class="vJ wj">
                                            <div>2 099 kr</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/12.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Adept W</div>
                                        <div class="vJ wj">
                                            <div>2 099 kr</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/13.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Adept W</div>
                                        <div class="vJ wj">
                                            <div>2 099 kr</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/14.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Adept W</div>
                                        <div class="vJ wj">
                                            <div>2 099 kr</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/15.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Adept W</div>
                                        <div class="vJ wj">
                                            <div>2 099 kr</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/16.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Adept W</div>
                                        <div class="vJ wj">
                                            <div>2 099 kr</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#" class="yi L_ ff">
                                    <div class="product-img">
                                        <img src="webImages/sec-3/17.jpg" alt="" />
                                    </div>
                                    <div class="product-txt">
                                        <div class="wi">Adept W</div>
                                        <div class="vJ wj">
                                            <div>2 099 kr</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-scrollbar"></div>
                        <div class="swiper-button-next swiper-button"></div>
                        <div class="swiper-button-prev swiper-button"></div>
                    </div>
                </section>

                <section class="footer-categories mt-12 mb-8 text-gray-500 text-sm" aria-label="Related product categories">
                    <a href="#" tabindex="0">Snowboardjackor Dam</a>
                    <a href="#" tabindex="0">Snowboardjackor Dam</a>
                    <a href="#" tabindex="0">Dope</a>
                </section>
            </div>
        </section>
    </section>

    <!-- Right: Sidebar -->
    <section class="product_left">
        <aside class="sidebar w-96 flex-shrink-0 space-y-6" aria-label="Product purchase and options">
            <div>
                <p class="text-xs font-semibold text-gray-500 uppercase mb-1">Dope</p>
                <h1 class="text-3xl font-bold mb-2">Adept W</h1>
                <p class="text-sm font-medium text-gray-700 mb-2">Snowboardjacka Dam Cumulus</p>
                <div class="flex flex-row items-center space-x-4">
                    <p class="text-xl font-extrabold text-red-600">1 889,10 kr</p>
                    <p class="text-sm line-through text-gray-400">2 099 kr</p>
                </div>
                <div class="flex items-center mt-1" aria-label="Product rating 4.9 out of 5">
                    <div class="flex text-amber-400" aria-hidden="true">
                        <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
                    </div>
                    <span class="text-xs text-gray-600 ml-2">(3837)</span>
                </div>
            </div>

            <section aria-labelledby="colors-label">
                <h2 id="colors-label" class="font-bold mb-2 text-sm">Färg</h2>
                <div class="flex items-center space-x-3 overflow-hidden">
                    <div class="color-swatch active" tabindex="0" aria-label="Cumulus color" role="button" aria-pressed="true" data-color="cumulus">
                        <img src="https://placehold.co/48x48/ccd5d9/000000/png?text=C" alt="Cumulus patterned snowboard jacket color swatch pastel icy blue, pink and gray" />
                    </div>
                    <div class="color-swatch" tabindex="0" aria-label="Black color" role="button" aria-pressed="false" data-color="black">
                        <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/58b02062-0eff-46af-b802-0c08b2e0e29c.png" alt="Black color swatch" />
                    </div>
                    <div class="color-swatch" tabindex="0" aria-label="Pink color" role="button" aria-pressed="false" data-color="pink">
                        <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/d95c9dc5-639f-4bdd-b7b2-a5e4d720d2aa.png" alt="Soft pink color swatch" />
                    </div>
                    <div class="color-swatch" tabindex="0" aria-label="Gray color" role="button" aria-pressed="false" data-color="gray">
                        <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/570e56e4-69a9-424c-be4a-2bde590a04c2.png" alt="Gray color swatch" />
                    </div>
                    <div class="color-swatch more" tabindex="0" aria-label="More colors available">+21</div>
                </div>
            </section>

            <section aria-labelledby="sizes-label" class="mt-6">
                <h2 id="sizes-label" class="font-bold mb-2 text-sm">Storlek</h2>
                <div class="size_box grid grid-cols-5 gap-3">
                    <button class="btn-select active" aria-pressed="true" data-size="XXS">XXS</button>
                    <button class="btn-select" aria-pressed="false" data-size="XS">XS</button>
                    <button class="btn-select" aria-pressed="false" data-size="S">S</button>
                    <button class="btn-select" aria-pressed="false" data-size="M">M</button>
                    <button class="btn-select" aria-pressed="false" data-size="L">L</button>
                    <button class="btn-select" aria-pressed="false" data-size="XL">XL</button>
                    <button class="btn-select" aria-pressed="false" data-size="XXL">XXL</button>
                </div>
                <p class="mt-2 text-xs text-gray-500">Modellen är 175 cm lång och har storlek S.</p>
            </section>

            <button id="add-to-cart" class="w-full py-4 bg-black text-white font-semibold mt-8 hover:bg-gray-900 transition ease-in-out" aria-label="Add Adept W snowboard jacket to cart for 1889.10 kronor">
                Lägg i varukorg – 1 889,10 kr
            </button>

            <ul class="mt-8 space-y-3 text-xs text-gray-600">
                <li class="flex items-start gap-2">
                    <svg class="w-5 h-5 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4" />
                    </svg>
                    Fri frakt & fria returer
                </li>
                <li class="flex items-start gap-2">
                    <svg class="w-5 h-5 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4" />
                    </svg>
                    30 dagars öppet köp
                </li>
                <li class="flex items-start gap-2">
                    <svg class="w-5 h-5 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4" />
                    </svg>
                    Snabba leveranser
                </li>
            </ul>

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

<script src="https://cdn.tailwindcss.com"></script>

<?php include_once 'footer.php' ?>