{"title":"Stay Warm, Look Elegant.","description":"\u003c!-- FULL: product swatches + mini-order (with Storefront checkoutCreate) --\u003e\n\u003cdiv class=\"pf-wrapper\"\u003e\n\u003cdiv class=\"hero-text\" id=\"hero\"\u003e\n  \u003c!-- TITLE + ARROW INLINE --\u003e\n  \u003cdiv class=\"hero-line\"\u003e\n    \u003ch2 class=\"hero-title\"\u003eShop the Winter Collection\u003c\/h2\u003e\n\n    \u003c!-- SVG ARROW (placed next to title and lifted a bit) --\u003e\n    \u003cbutton class=\"scroll-arrow\" id=\"scroll-arrow\" aria-label=\"Scroll Down\" title=\"Scroll to collection\"\u003e\n      \u003csvg width=\"22\" height=\"22\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#111\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"\u003e\n        \u003cpath d=\"M12 5v14\"\u003e\u003c\/path\u003e\n        \u003cpath d=\"M19 12l-7 7-7-7\"\u003e\u003c\/path\u003e\n      \u003c\/svg\u003e\n    \u003c\/button\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- SUB TEXT BELOW --\u003e\n  \u003cp class=\"hero-sub\"\u003eScroll down to explore the season’s essentials.\u003c\/p\u003e\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n  \/* container: remove extra top spacing if any *\/\n  .hero-text { margin:0; padding:0; text-align:center; position:relative; }\n\n  \/* line containing title + arrow *\/\n  .hero-line {\n    display:inline-flex;\n    align-items:flex-start; \/* align arrow a bit higher than baseline *\/\n    gap:12px;\n    justify-content:center;\n  }\n\n  .hero-title{\n    font-family: \"Montserrat\", \"Poppins\", sans-serif;\n    font-weight:700;\n    font-size:34px;\n    color:#111;\n    margin:0;\n    line-height:1; \/* tighter line so arrow aligns visually *\/\n  }\n\n  \/* arrow button: visually lifted a little *\/\n  .scroll-arrow{\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n    background:transparent;\n    border:none;\n    padding:6px;\n    margin:0;\n    cursor:pointer;\n    transform:translateY(-6px); \/* lift arrow above title *\/\n    transition:transform .18s ease, opacity .18s;\n    border-radius:6px;\n  }\n  .scroll-arrow:hover { transform:translateY(-8px) scale(1.03); opacity:0.95; }\n  .scroll-arrow:active { transform:translateY(-4px) scale(.98); }\n\n  \/* sub text below the line *\/\n  .hero-sub{\n    font-family: \"Inter\", \"Montserrat\", sans-serif;\n    font-size:15px;\n    color:#6d6d6d;\n    margin:6px 0 0 0;\n    padding:0;\n  }\n\n  \/* small screens: reduce title size and arrow lift *\/\n  @media(max-width:480px){\n    .hero-title{ font-size:26px; }\n    .scroll-arrow{ transform:translateY(-4px); }\n    .hero-line { gap:8px; }\n  }\n\u003c\/style\u003e\n\n\u003cscript\u003e\n(function(){\n  const arrow = document.getElementById('scroll-arrow');\n  if(!arrow){\n    console.warn('Scroll arrow not found (#scroll-arrow)');\n    return;\n  }\n\n  \/\/ replace old listeners safely\n  const clone = arrow.cloneNode(true);\n  arrow.parentNode.replaceChild(clone, arrow);\n\n  clone.addEventListener('click', function (e) {\n    e.preventDefault();\n\n    \/\/ find carousel wrapper\n    const carousel = document.querySelector('.carousel-wrapper');\n    if (!carousel) {\n      \/\/ fallback: scroll down half screen\n      window.scrollBy({ top: window.innerHeight * 0.5, behavior: 'smooth' });\n      return;\n    }\n\n    \/\/ compute header offset if header is fixed\n    const header = document.querySelector('header[role=\"banner\"], header.site-header, header#header');\n    const headerOffset = header ? header.getBoundingClientRect().height : 0;\n\n    \/\/ compute target = position just *after* the carousel (carousel bottom)\n    const rect = carousel.getBoundingClientRect();\n    const carouselBottomPageY = rect.top + window.pageYOffset + rect.height;\n\n    \/\/ small extra gap so content below isn't flush against top\n    const GAP = -70; \/\/ اضبط لو عايز مسافة أكبر أو أصغر\n\n    \/\/ final scroll target\n    const top = Math.max(0, Math.round(carouselBottomPageY - headerOffset + GAP));\n    window.scrollTo({ top, behavior: 'smooth' });\n  });\n})();\n\u003c\/script\u003e\n\n\n\n\u003c!-- ======= CAROUSEL (full improved version) ======= --\u003e\n\u003cdiv aria-label=\"Product images\" aria-roledescription=\"carousel\" class=\"carousel-wrapper\"\u003e\n\u003cdiv role=\"list\" class=\"slides\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003cbutton aria-label=\"Previous slide\" class=\"carousel-btn prev\"\u003e‹\u003c\/button\u003e \u003cbutton aria-label=\"Next slide\" class=\"carousel-btn next\"\u003e›\u003c\/button\u003e\n\u003cdiv aria-label=\"Slides\" role=\"tablist\" class=\"carousel-indicators\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cstyle\u003e\n  \/* carousel container *\/\n  .carousel-wrapper{\n    max-width:960px;\n    margin:0 auto 18px;\n    position:relative;\n    border-radius:12px;\n    overflow:hidden;\n    background:#f4f4f4;\n    height:520px; \/* hero height - tune as needed *\/\n  }\n\n  \/* slides *\/\n  .slides{\n    display:flex;\n    transition:transform .45s cubic-bezier(.2,.9,.2,1);\n    width:100%;\n    height:100%;\n  }\n  .slide{ min-width:100%; height:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; background:#f4f4f4; }\n  .slide img{\n    width:100%;\n    height:100%;\n    object-fit:cover;     \/* important: fill and crop, no black bars *\/\n    object-position:center;\n    display:block;\n    -webkit-backface-visibility:hidden;\n    backface-visibility:hidden;\n  }\n\n  \/* nav buttons *\/\n  .carousel-btn{\n    position:absolute;\n    top:50%;\n    transform:translateY(-50%);\n    z-index:30;\n    background:rgba(255,255,255,0.95);\n    border-radius:50%;\n    width:44px;\n    height:44px;\n    border:none;\n    box-shadow:0 6px 18px rgba(0,0,0,0.12);\n    cursor:pointer;\n    font-size:20px;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n  }\n  .carousel-btn.prev{ left:12px; }\n  .carousel-btn.next{ right:12px; }\n\n  \/* indicators *\/\n  .carousel-indicators{ position:absolute; left:50%; transform:translateX(-50%); bottom:12px; display:flex; gap:8px; z-index:40; }\n  .carousel-indicators .dot{ width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,0.85); background:rgba(255,255,255,0.35); cursor:pointer; padding:0; border:none; }\n  .carousel-indicators .dot[aria-selected=\"true\"], .carousel-indicators .dot.active{ background:rgba(255,255,255,0.95); border-color:transparent; }\n\n  @media (max-width:900px){ .carousel-wrapper{ height:420px; } }\n  @media (max-width:480px){ .carousel-wrapper{ height:320px; } .carousel-btn{ width:36px; height:36px; font-size:18px; } }\n\u003c\/style\u003e\n\u003cdiv class=\"pf-wrapper\"\u003e\n\u003cscript\u003e\n(function(){\n  \/\/ run after DOM ready\n  function ready(fn){ if(document.readyState !== 'loading') fn(); else document.addEventListener('DOMContentLoaded', fn); }\n\n  ready(function(){\n    const wrapper = document.querySelector('.carousel-wrapper');\n    if(!wrapper) return console.warn('carousel-wrapper not found');\n\n    const slidesEl = wrapper.querySelector('.slides');\n    const indicatorsEl = wrapper.querySelector('.carousel-indicators');\n    const prevBtn = wrapper.querySelector('.carousel-btn.prev');\n    const nextBtn = wrapper.querySelector('.carousel-btn.next');\n\n    \/\/ small SVG placeholder if image fails\n    const PLACEHOLDER = 'data:image\/svg+xml;charset=UTF-8,' + encodeURIComponent(\n      '\u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"1200\" height=\"800\" viewBox=\"0 0 1200 800\"\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#f4f4f4\"\/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#bdbdbd\" font-family=\"Arial, sans-serif\" font-size=\"28\" text-anchor=\"middle\" dominant-baseline=\"middle\"\u003eImage unavailable\u003c\/text\u003e\u003c\/svg\u003e'\n    );\n\n    \/\/ fallback list (from your markup) — used only if no swatch images found\n    const fallback = [\n      'https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_2002.jpg?v=1762579864\u0026width=1200',\n      'https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_1957.jpg?v=1762579864\u0026width=1200',\n      'https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_2065.jpg?v=1762579864\u0026width=1200',\n      'https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_2015.jpg?v=1762579864\u0026width=1200',\n      'https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_1966.jpg?v=1762579864\u0026width=1200',\n      'https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_1980.jpg?v=1762578857\u0026width=1200',\n      'https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_1975.jpg?v=1762579864\u0026width=1200',\n      'https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_1989.jpg?v=1762579360\u0026width=1200'\n    ];\n\n    \/\/ collect images from variant-swatches (preserve order \u0026 uniqueness)\n    const imgNodes = Array.from(document.querySelectorAll('.variant-swatches img'));\n    const urls = [];\n    imgNodes.forEach(img=\u003e{\n      let src = img.getAttribute('src') || img.src || '';\n      if(!src) return;\n      \/\/ fix HTML-escaped ampersands if any, and trim\n      src = src.replace(\/\u0026amp;\/g, '\u0026').trim();\n      if(!urls.includes(src)) urls.push(src);\n    });\n    if(urls.length === 0) urls.push(...fallback);\n\n    \/\/ helper to tweak url: set width, add format \u0026 quality if missing\n    function makeUrl(baseUrl, targetWidth, fmt='webp', quality=90){\n      let url = (baseUrl || '').replace(\/\u0026amp;\/g, '\u0026').trim();\n      if(!url) return url;\n      \/\/ if url already has width param, replace it; otherwise append\n      if (\/[?\u0026]width=\\d+\/.test(url)) {\n        url = url.replace(\/([?\u0026])width=\\d+\/, `$1width=${targetWidth}`);\n      } else {\n        const sep = url.indexOf('?') === -1 ? '?' : '\u0026';\n        url = url + sep + 'width=' + targetWidth;\n      }\n      \/\/ add format \u0026 quality (Shopify supports format \u0026 quality params)\n      if (!\/([?\u0026])format=\/.test(url)) url += '\u0026format=' + fmt;\n      if (!\/([?\u0026])quality=\/.test(url)) url += '\u0026quality=' + quality;\n      return url;\n    }\n\n    \/\/ create slides + indicators\n    slidesEl.innerHTML = '';\n    indicatorsEl.innerHTML = '';\n\n    urls.forEach((u, i) =\u003e {\n      const slide = document.createElement('div');\n      slide.className = 'slide';\n      slide.setAttribute('data-index', String(i));\n      slide.setAttribute('role','listitem');\n      slide.setAttribute('aria-hidden', i===0 ? 'false' : 'true');\n\n      \/\/ build responsive srcset\n      const widths = [480, 768, 1200, 1800];\n      const srcset = widths.map(w =\u003e {\n        const url = makeUrl(u, w);\n        return url ? `${url} ${w}w` : '';\n      }).filter(Boolean).join(', ');\n\n      const largest = makeUrl(u, 1800) || u;\n\n      const img = document.createElement('img');\n      img.src = largest;               \/\/ default src -\u003e largest reasonable\n      if(srcset) img.srcset = srcset;\n      img.sizes = '(max-width:480px) 100vw, (max-width:900px) 90vw, 960px';\n      img.alt = 'Product image ' + (i+1);\n      img.loading = 'lazy';\n      img.decoding = 'async';\n      img.style.backgroundColor = '#f4f4f4';\n      \/\/ on error fallback to placeholder\n      img.onerror = function(){ this.onerror = null; this.src = PLACEHOLDER; };\n\n      slide.appendChild(img);\n      slidesEl.appendChild(slide);\n\n      const dot = document.createElement('button');\n      dot.className = 'dot';\n      dot.setAttribute('data-to', String(i));\n      dot.setAttribute('role','tab');\n      dot.setAttribute('aria-selected', i===0 ? 'true' : 'false');\n      dot.addEventListener('click', ()=\u003e goTo(i));\n      indicatorsEl.appendChild(dot);\n    });\n\n    const slides = Array.from(slidesEl.children);\n    const dots = Array.from(indicatorsEl.children);\n    let index = 0;\n    let timer = null;\n    const AUTOPLAY_MS = 4000;\n\n    function goTo(i, instant){\n      index = (i + slides.length) % slides.length;\n      const offset = -index * 100;\n      slidesEl.style.transition = instant ? 'none' : 'transform .45s cubic-bezier(.2,.9,.2,1)';\n      slidesEl.style.transform = 'translateX(' + offset + '%)';\n      slides.forEach((s,idx)=\u003e s.setAttribute('aria-hidden', idx!==index) );\n      dots.forEach((d,idx)=\u003e{\n        const sel = idx===index;\n        d.setAttribute('aria-selected', sel ? 'true' : 'false');\n        d.classList.toggle('active', sel);\n      });\n      if(instant) requestAnimationFrame(()=\u003e slidesEl.style.transition = 'transform .45s cubic-bezier(.2,.9,.2,1)');\n    }\n\n    function next(){ goTo(index+1); }\n    function prev(){ goTo(index-1); }\n\n    function startAutoplay(){ if(timer) clearInterval(timer); timer = setInterval(next, AUTOPLAY_MS); }\n    function stopAutoplay(){ if(timer) clearInterval(timer); timer = null; }\n\n    if(nextBtn) nextBtn.addEventListener('click', ()=\u003e{ next(); startAutoplay(); });\n    if(prevBtn) prevBtn.addEventListener('click', ()=\u003e{ prev(); startAutoplay(); });\n    wrapper.addEventListener('mouseenter', ()=\u003e{ stopAutoplay(); });\n    wrapper.addEventListener('mouseleave', ()=\u003e{ startAutoplay(); });\n\n    \/\/ touch support\n    let startX = 0, deltaX = 0, touching = false;\n    slidesEl.addEventListener('touchstart', (e)=\u003e{ touching = true; startX = e.touches[0].clientX; stopAutoplay(); slidesEl.style.transition = 'none'; }, {passive:true});\n    slidesEl.addEventListener('touchmove', (e)=\u003e{ if(!touching) return; deltaX = e.touches[0].clientX - startX; const pct = (deltaX \/ wrapper.offsetWidth) * 100; slidesEl.style.transform = 'translateX(' + (-index*100 + pct) + '%)'; }, {passive:true});\n    slidesEl.addEventListener('touchend', ()=\u003e{ touching = false; slidesEl.style.transition = 'transform .45s cubic-bezier(.2,.9,.2,1)'; if(Math.abs(deltaX) \u003e (wrapper.offsetWidth * 0.15)){ if(deltaX \u003e 0) prev(); else next(); } else { goTo(index); } deltaX = 0; startAutoplay(); });\n\n    \/\/ keyboard support\n    wrapper.tabIndex = 0;\n    wrapper.addEventListener('keydown', (e)=\u003e{ if(e.key === 'ArrowLeft') prev(); if(e.key === 'ArrowRight') next(); });\n\n    \/\/ init\n    goTo(0, true);\n    startAutoplay();\n\n    \/\/ debug\/logging when images fail to load\n    setTimeout(()=\u003e {\n      const visibleImgs = Array.from(slidesEl.querySelectorAll('img')).filter(i=\u003e i.src \u0026\u0026 !i.src.startsWith('data:'));\n      if(visibleImgs.length === 0){\n        console.warn('Carousel: no external images loaded. sources:', urls);\n        if(slidesEl.children.length){\n          slidesEl.children[0].querySelector('img').src = PLACEHOLDER;\n        }\n      }\n    }, 1200);\n  });\n})();\n\u003c\/script\u003e \u003c!-- ======= end carousel ======= --\u003e Buy 2 or more items and get 7% OFF — applied automatically at checkout! \u003c!-- OVERSIZED PLAIN HOODIE --\u003e\n\u003cdiv data-group=\"hoodies\" class=\"group-block\"\u003e\n\u003cdiv class=\"group-header\"\u003e\n\u003ch3 class=\"swatch-group-title\"\u003eOversized Plain Hoodie\u003c\/h3\u003e\n\u003cdiv class=\"group-desc\"\u003eMade from winter Milton fabric with a full cotton lining for warmth and comfort. Designed in an oversized fit for a cozy, relaxed look.\u003c\/div\u003e\n\u003cdiv class=\"group-price\"\u003e\n\u003cspan class=\"price-old\"\u003eEGP 1,199\u003c\/span\u003e \u003cspan class=\"price-current\"\u003eEGP 899\u003c\/span\u003e 🎨 Tap the photos to pick color \u0026amp; size — then add to cart\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv id=\"hoodies-swatches\" class=\"variant-swatches\"\u003e\n\u003cbutton data-variants='{\"XL\":\"50511227945250\",\"2XL\":\"50511227978018\"}' data-color-name=\"Black\" class=\"color-swatch\"\u003e \u003cimg alt=\"Black\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_2002.jpg?v=1762579864\u0026amp;width=400\"\u003e \u003c\/button\u003e \u003cbutton data-variants='{\"XL\":\"50511228076322\",\"2XL\":\"50511228109090\"}' data-color-name=\"White\" class=\"color-swatch\"\u003e \u003cimg alt=\"White\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_1957.jpg?v=1762579864\u0026amp;width=400\"\u003e \u003c\/button\u003e \u003cbutton data-variants='{\"XL\":\"50511227879714\",\"2XL\":\"50511227912482\"}' data-color-name=\"Dark Gray\" class=\"color-swatch\"\u003e \u003cimg alt=\"Dark Gray\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_2065.jpg?v=1762579864\u0026amp;width=400\"\u003e \u003c\/button\u003e \u003cbutton data-variants='{\"XL\":\"50556083765538\",\"2XL\":\"50556083798306\"}' data-color-name=\"Pink\" class=\"color-swatch\"\u003e \u003cimg alt=\"Pink\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_2015.jpg?v=1762579864\u0026amp;width=400\"\u003e \u003c\/button\u003e \u003cbutton data-variants='{\"XL\":\"50511228141858\",\"2XL\":\"50511228174626\"}' data-color-name=\"Dark Green\" class=\"color-swatch\"\u003e \u003cimg alt=\"Dark Green\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_1966.jpg?v=1762579864\u0026amp;width=400\"\u003e \u003c\/button\u003e \u003cbutton data-variants='{\"XL\":\"50396620587298\",\"2XL\":\"50396620620066\"}' data-color-name=\"Navy Blue\" class=\"color-swatch\"\u003e \u003cimg alt=\"Navy Blue\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_1980.jpg?v=1762578857\u0026amp;width=400\"\u003e \u003c\/button\u003e \u003cbutton data-variants='{\"XL\":\"50511228010786\",\"2XL\":\"50511228043554\"}' data-color-name=\"Plum\" class=\"color-swatch\"\u003e \u003cimg alt=\"Plum\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_1975.jpg?v=1762579864\u0026amp;width=400\"\u003e \u003c\/button\u003e \u003cbutton data-variants='{\"XL\":\"50556083831074\",\"2XL\":\"50556083863842\"}' data-color-name=\"Burgundy\" class=\"color-swatch\"\u003e \u003cimg alt=\"Burgundy\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/IMG_1989.jpg?v=1762579360\u0026amp;width=400\"\u003e \u003c\/button\u003e\n\u003c\/div\u003e\n\u003cdiv aria-hidden=\"true\" data-for=\"hoodies\" class=\"sizes-area\"\u003e\n\u003clabel class=\"sizes-label\"\u003eChoose your size\u003c\/label\u003e\u003cselect class=\"sizes-select\"\u003e\n\u003coption value=\"\"\u003eSelect a color first\u003c\/option\u003e\n\u003c\/select\u003e\n\u003cdiv class=\"sizes-controls\"\u003e\n\u003cbutton class=\"add-btn\"\u003eAdd to Cart\u003c\/button\u003e\n\u003cdiv aria-live=\"polite\" class=\"sizes-feedback\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- ADIDAS WINTER TRACKSUIT --\u003e\n\u003cdiv data-group=\"tracksuits\" class=\"group-block\"\u003e\n\u003cdiv class=\"group-header\"\u003e\n\u003ch3 class=\"swatch-group-title\"\u003eAdidas Winter Tracksuit\u003c\/h3\u003e\n\u003cdiv class=\"group-desc\"\u003eAdidas winter tracksuit made from premium Milton fabric lined with 100% cotton. Warm, comfortable, and designed in stylish color combinations that make you stand out all season.\u003c\/div\u003e\n\u003cdiv class=\"group-price\"\u003e\n\u003cspan class=\"price-old\"\u003eEGP 1,799\u003c\/span\u003e \u003cspan class=\"price-current\"\u003eEGP 1,349\u003c\/span\u003e 🎨 Tap the photos to pick color \u0026amp; size — then add to cart\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv id=\"tracksuits-swatches\" class=\"variant-swatches\"\u003e\n\u003cbutton data-variants='{\"L\":\"50411701076258\",\"XL\":\"50411701109026\",\"2XL\":\"50411701141794\",\"3XL\":\"50411701174562\"}' data-color-name=\"Pink Tracksuit\" class=\"color-swatch\"\u003e \u003cimg alt=\"Pink Tracksuit\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/1_301321fa-2ff5-49cb-a8fb-f80c705f2aef.jpg?v=1760308512\u0026amp;width=400\"\u003e \u003c\/button\u003e \u003cbutton data-variants='{\"L\":\"50411718115618\",\"XL\":\"50411718148386\",\"2XL\":\"50411718181154\",\"3XL\":\"50411718213922\"}' data-color-name=\"Black Tracksuit\" class=\"color-swatch\"\u003e \u003cimg alt=\"Black Tracksuit\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/4ab787bbc7c188377a4e4002e22fbb4b.jpg?v=1760289899\u0026amp;width=400\"\u003e \u003c\/button\u003e \u003cbutton data-variants='{\"L\":\"50411718246690\",\"XL\":\"50411718279458\",\"2XL\":\"50411718312226\",\"3XL\":\"50411718344994\"}' data-color-name=\"White Tracksuit\" class=\"color-swatch\"\u003e \u003cimg alt=\"White Tracksuit\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/2dca0ad04211e800560cf70cc6bc9846.jpg?v=1760308512\u0026amp;width=400\"\u003e \u003c\/button\u003e \u003cbutton data-variants='{\"L\":\"50411718377762\",\"XL\":\"50411718410530\",\"2XL\":\"50411718443298\",\"3XL\":\"50411718476066\"}' data-color-name=\"Dark Gray Tracksuit\" class=\"color-swatch\"\u003e \u003cimg alt=\"Dark Gray Tracksuit\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0954\/9044\/1506\/files\/2.jpg?v=1760289899\u0026amp;width=400\"\u003e \u003c\/button\u003e\n\u003c\/div\u003e\n\u003cdiv aria-hidden=\"true\" data-for=\"tracksuits\" class=\"sizes-area\"\u003e\n\u003clabel class=\"sizes-label\"\u003eChoose your size\u003c\/label\u003e\u003cselect class=\"sizes-select\"\u003e\n\u003coption value=\"\"\u003eSelect a color first\u003c\/option\u003e\n\u003c\/select\u003e\n\u003cdiv class=\"sizes-controls\"\u003e\n\u003cbutton class=\"add-btn\"\u003eAdd to Cart\u003c\/button\u003e\n\u003cdiv aria-live=\"polite\" class=\"sizes-feedback\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cstyle\u003e\n  :root{\n    --accent:#1f1f1f;\n    --muted:#9aa0a6;\n    --card:#ffffff;\n    --radius:12px;\n  }\n\n  .pf-wrapper{ font-family: \"Montserrat\", system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial; color:var(--accent); background:transparent; padding:14px 0; }\n\n  \/* video *\/\n  .video-wrapper{ max-width:960px; margin:0 auto 18px; position:relative; border-radius:var(--radius); overflow:hidden; background:#000; }\n  .video-wrapper video{ width:100%; height:auto; display:block; object-fit:contain; background:#000; }\n  .mute-btn{ position:absolute; right:12px; bottom:12px; background:rgba(255,255,255,0.95); border-radius:50%; width:40px; height:40px; border:none; box-shadow:0 6px 18px rgba(0,0,0,0.12); cursor:pointer; font-size:18px; }\n\n  .group-block{ max-width:920px; margin:18px auto; background:transparent; padding:6px 18px; }\n  .group-header{ text-align:center; margin-bottom:8px; }\n  .swatch-group-title{ font-family: \"Playfair Display\", Georgia, serif; font-size:20px; font-weight:700; margin:6px 0; letter-spacing:0.6px; color:#222; }\n\n  \/* LEFT-ALIGNED DESCRIPTION *\/\n  .group-desc{ font-size:13px; color:var(--muted); max-width:760px; margin:6px auto 8px; line-height:1.45; font-style:normal; text-align:left; } \/* \u003c-- aligned left now *\/\n\n  .group-price{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:6px; }\n  .price-old{ color:var(--muted); font-size:14px; text-decoration:line-through; opacity:0.95; }\n  .price-current{ font-size:22px; font-weight:700; color:var(--accent); letter-spacing:0.3px; }\n\n  .variant-swatches{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:10px 0; padding:8px 0; }\n  .color-swatch{ width:74px; height:74px; border-radius:50%; overflow:hidden; border:2px solid rgba(30,30,30,0.06); background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s; box-shadow:0 6px 20px rgba(24,24,24,0.04); }\n  .color-swatch img{ width:140%; height:140%; object-fit:cover; object-position:center; border-radius:50%; display:block; transform:translateZ(0); }\n\n  .color-swatch:focus { outline:none; box-shadow:0 8px 22px rgba(0,0,0,0.12); transform:translateY(-4px) scale(1.02); }\n  .color-swatch.active { transform:translateY(-6px) scale(1.12); border-color:var(--accent); box-shadow:0 14px 32px rgba(10,10,10,0.12); }\n\n  .sizes-area{ display:none; text-align:center; margin-top:14px; }\n  .sizes-area.visible{ display:block; }\n  .sizes-label{ font-weight:600; margin-bottom:8px; color:#333; letter-spacing:0.2px; }\n  .sizes-select{ min-width:220px; max-width:380px; padding:10px 12px; border-radius:10px; border:1px solid #e6e6e6; background:#fff; font-size:15px; }\n\n  .sizes-controls{ margin-top:12px; display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; }\n  .add-btn{ background:var(--accent); color:#fff; border:none; padding:12px 18px; border-radius:10px; cursor:pointer; font-weight:700; box-shadow: 0 8px 22px rgba(31,31,31,0.12); }\n  .add-btn:disabled{ opacity:0.6; cursor:not-allowed; }\n\n  .sizes-feedback{ font-weight:600; color:var(--muted); min-width:220px; }\n\n  @media (max-width:480px){\n    .color-swatch{ width:60px; height:60px; }\n    .price-current{ font-size:18px; }\n    .price-old{ font-size:13px; }\n    .sizes-select{ min-width:160px; }\n    .video-wrapper{ max-width:100%; }\n  }\n\u003c\/style\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- MINI-ORDER (Quick checkout) with quantity controls) --\u003e\n\u003cstyle\u003e\n  \/* simplified mini-order styles (replace existing #mini-order styles) *\/\n  #mini-order{\n    max-width:960px;\n    margin:18px auto;\n    background:#fff;\n    border-radius:12px;\n    box-shadow:0 10px 30px rgba(20,20,20,0.06);\n    padding:18px;\n    font-family:Montserrat,Arial,sans-serif;\n    color:#222;\n    display:block;               \/* show always *\/\n    overflow:hidden;\n    box-sizing:border-box;\n  }\n  #mini-order h4{margin:0 0 10px;font-size:18px}\n  #mini-items{min-height:60px;color:#666;width:100%;box-sizing:border-box}\n  .mini-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 8px;border-bottom:1px solid #f0f0f0;width:100%;box-sizing:border-box;flex-wrap:wrap;}\n  .mini-left{display:flex;gap:12px;align-items:center;flex:1 1 auto;min-width:0;box-sizing:border-box;}\n  .mini-thumb{width:56px;height:56px;border-radius:8px;overflow:hidden;background:#f7f7f7;flex-shrink:0;}\n  .mini-thumb img{width:100%;height:100%;object-fit:cover;display:block;}\n  .mini-desc{flex:1 1 auto;min-width:0;}\n  .mini-desc .title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px;margin-bottom:6px;}\n  .mini-desc .meta{font-size:13px;color:#666;margin-bottom:6px;}\n  .mini-qty{display:flex;align-items:center;gap:8px;font-weight:700}\n  .qty-btn{background:#fff;border:1px solid #ddd;padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:700;min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}\n  .qty-num{min-width:28px;text-align:center;font-weight:700;color:#333;}\n  .remove-btn{color:#b71c1c;border:none;background:transparent;cursor:pointer;font-size:13px;padding:6px 8px}\n  .mini-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 160px;box-sizing:border-box;}\n  .mini-right .price{font-weight:700;font-size:14px;color:#111;white-space:nowrap;}\n  .mini-subtotal,.mini-shipping,.mini-total{display:flex;justify-content:space-between;padding:10px 0;font-weight:700;box-sizing:border-box;}\n  .mini-total{font-size:18px}\n  .mini-actions{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}\n  .btn-primary{background:#111;color:#fff;border:none;padding:12px 16px;border-radius:10px;cursor:pointer;font-weight:700}\n  .btn-secondary{background:#fff;border:1px solid #ddd;padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:700}\n  .btn-primary[disabled]{opacity:.6;cursor:not-allowed}\n  .mini-note{color:#666;font-weight:600}\n  @media(max-width:720px){\n    .mini-item{flex-direction:column;align-items:stretch;padding:10px}\n    .mini-right{flex:0 0 auto;align-items:flex-start;margin-top:8px}\n  }\n\u003c\/style\u003e\n\u003cdiv aria-live=\"polite\" id=\"mini-order\"\u003e\n\u003ch4\u003eOrder summary\u003c\/h4\u003e\n\u003cdiv id=\"mini-items\"\u003eLoading cart...\u003c\/div\u003e\n\u003cdiv id=\"mini-subtotal-row\" class=\"mini-subtotal\"\u003e\n\u003cdiv\u003eSubtotal\u003c\/div\u003e\n\u003cdiv id=\"mini-subtotal\"\u003eEGP 0\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"mini-shipping\"\u003e\n\u003cdiv\u003eShipping\u003c\/div\u003e\n\u003cdiv id=\"mini-shipping\"\u003eEGP 65\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"mini-total\"\u003e\n\u003cdiv\u003eTotal\u003c\/div\u003e\n\u003cdiv id=\"mini-total\"\u003eEGP 0\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv aria-hidden=\"false\" class=\"mini-actions\"\u003e\n\u003c!-- Quick checkout button (goes to Shopify checkout) --\u003e \u003cbutton disabled class=\"btn-primary\" id=\"quick-checkout-btn\"\u003eCheckout\u003c\/button\u003e \u003cbutton type=\"button\" class=\"btn-secondary\" id=\"view-cart-btn\"\u003eView Cart\u003c\/button\u003e\n\u003cdiv id=\"mini-note\" class=\"mini-note\"\u003eNo customer info required — just proceed to checkout.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cp\u003e\u003cscript\u003e\n  \/\/ keep SHIPPING_FEE_EGP in sync with your other config\n  const SHIPPING_FEE_EGP = 65;\n\n  \/\/ helpers (reuse your fetchCart \u0026 formatEGP if present)\n  async function fetchCart(){\n    try{ const res = await fetch('\/cart.js'); return res.ok?await res.json():{items:[]}; } catch(e){ return {items:[]}; }\n  }\n  function formatEGP(cents){ try{ return 'EGP ' + (Math.round(cents)\/100).toLocaleString(); } catch(e){ return 'EGP 0'; } }\n  function escapeHtml(s){ return (''+s).replace(\/[\u0026\u003c\u003e\"']\/g,c=\u003e({'\u0026':'\u0026amp;','\u003c':'\u0026lt;','\u003e':'\u0026gt;','\"':'\u0026quot;',\"'\":'\u0026#39;'}[c])); }\n\n  \/\/ build items HTML with qty controls + remove\n  function buildItemsHtml(cart){\n    if (!cart || !cart.items || cart.items.length===0) return '\u003cdiv style=\"color:#666\"\u003eYour cart is empty.\u003c\/div\u003e';\n    return cart.items.map(it=\u003e{\n      const img = it.image || '';\n      \/\/ use it.key as line identifier for \/cart\/change.js\n      return `\u003cdiv class=\"mini-item\" data-line=\"${escapeHtml(it.key)}\"\u003e\n        \u003cdiv class=\"mini-left\"\u003e\n          \u003cspan class=\"mini-thumb\"\u003e\u003cimg src=\"${escapeHtml(img)}\" alt=\"${escapeHtml(it.product_title)}\" loading=\"lazy\" onerror=\"this.style.opacity=.7\"\/\u003e\u003c\/span\u003e\n          \u003cdiv class=\"mini-desc\"\u003e\n            \u003cdiv class=\"title\"\u003e${escapeHtml(it.product_title)}\u003c\/div\u003e\n            \u003cdiv class=\"meta\"\u003e${escapeHtml(it.variant_title||'')}\u003c\/div\u003e\n            \u003cdiv class=\"mini-qty\"\u003e\n              \u003cbutton class=\"qty-btn\" data-action=\"dec\" data-line=\"${escapeHtml(it.key)}\" aria-label=\"Decrease\"\u003e−\u003c\/button\u003e\n              \u003cdiv class=\"qty-num\" data-line=\"${escapeHtml(it.key)}\"\u003e${it.quantity}\u003c\/div\u003e\n              \u003cbutton class=\"qty-btn\" data-action=\"inc\" data-line=\"${escapeHtml(it.key)}\" aria-label=\"Increase\"\u003e+\u003c\/button\u003e\n              \u003cbutton class=\"remove-btn\" data-action=\"remove\" data-line=\"${escapeHtml(it.key)}\"\u003eRemove\u003c\/button\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"mini-right\"\u003e\n          \u003cdiv class=\"price\"\u003eEGP ${(it.line_price\/100).toLocaleString()}\u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e`;\n    }).join('');\n  }\n\n  \/\/ change line quantity via \/cart\/change.js\n  async function changeLineQuantity(lineKey, qty){\n    try{\n      \/\/ lineKey is the \"key\" from cart.item\n      const res = await fetch('\/cart\/change.js',{\n        method:'POST',\n        credentials:'same-origin',\n        headers:{'Content-Type':'application\/json'},\n        body: JSON.stringify({id: lineKey, quantity: qty})\n      });\n      if(!res.ok) throw new Error('change failed');\n      return res.json();\n    }catch(e){\n      console.error(e);\n      \/\/ show error briefly in mini-note\n      const note = document.getElementById('mini-note');\n      if(note){ note.textContent = 'Could not update cart. Try again.'; setTimeout(()=\u003e{ updateMiniUI(); }, 1200); }\n    }\n  }\n\n  \/\/ attach qty\/remove listeners\n  function attachControls(){\n    \/\/ qty inc\/dec\n    document.querySelectorAll('.qty-btn').forEach(btn=\u003e{\n      btn.onclick = async function(){\n        const action = btn.getAttribute('data-action');\n        const line = btn.getAttribute('data-line');\n        \/\/ find current qty elem\n        const qtyElem = document.querySelector('.qty-num[data-line=\"'+line+'\"]');\n        let currentQty = parseInt(qtyElem?.textContent) || 1;\n        let newQty = action === 'inc' ? currentQty + 1 : currentQty - 1;\n        if (newQty \u003c 0) newQty = 0;\n        \/\/ if newQty is 0 -\u003e remove\n        await changeLineQuantity(line, newQty);\n        await updateMiniUI();\n      };\n    });\n\n    \/\/ remove buttons\n    document.querySelectorAll('.remove-btn').forEach(btn=\u003e{\n      btn.onclick = async function(){\n        const line = btn.getAttribute('data-line');\n        await changeLineQuantity(line, 0);\n        await updateMiniUI();\n      };\n    });\n  }\n\n  async function updateMiniUI(){\n    const cart = await fetchCart();\n    document.getElementById('mini-items').innerHTML = buildItemsHtml(cart || {items:[]});\n    const subtotalCents = cart ? cart.items_subtotal_price||0 : 0;\n    document.getElementById('mini-subtotal').textContent = formatEGP(subtotalCents);\n    document.getElementById('mini-shipping').textContent = 'EGP ' + SHIPPING_FEE_EGP;\n    document.getElementById('mini-total').textContent = formatEGP(subtotalCents + SHIPPING_FEE_EGP*100);\n\n    const quickBtn = document.getElementById('quick-checkout-btn');\n    if (cart \u0026\u0026 cart.items \u0026\u0026 cart.items.length) {\n      quickBtn.disabled = false;\n      quickBtn.setAttribute('aria-disabled','false');\n      document.getElementById('mini-note').textContent = 'Ready — click Checkout to continue to payment.';\n    } else {\n      quickBtn.disabled = true;\n      quickBtn.setAttribute('aria-disabled','true');\n      document.getElementById('mini-note').textContent = 'Your cart is empty.';\n    }\n\n    \/\/ re-attach controls after DOM update\n    attachControls();\n  }\n\n  \/\/ attach quick checkout: simple redirect to Shopify checkout for current cart\n  document.getElementById('quick-checkout-btn').addEventListener('click', function(){\n    window.location.href = '\/checkout';\n  });\n\n  \/\/ view-cart button (optional) — goes to cart page\n  document.getElementById('view-cart-btn').addEventListener('click', function(){\n    window.location.href = '\/cart';\n  });\n\n  \/\/ init on load\n  (async ()=\u003e{ await updateMiniUI(); })();\n\n  \/\/ intercept Add to Cart and refresh mini\n  (function interceptAdd(){\n    const orig = window.fetch;\n    window.fetch = function(){\n      const args = arguments;\n      return orig.apply(this,args).then(async resp=\u003e{\n        try{\n          const url = (typeof args[0]==='string')? args[0] : (args[0] \u0026\u0026 args[0].url) || '';\n          if(url \u0026\u0026 url.indexOf('\/cart\/add') !== -1){\n            setTimeout(updateMiniUI,400);\n          }\n        }catch(e){}\n        return resp;\n      });\n    };\n  })();\n\u003c\/script\u003e \u003cscript\u003e\n(async function(){\n  const DISCOUNT_CODE = 'b7';\n  const MIN_QTY_FOR_DISCOUNT = 2;\n  const DISCOUNT_RATE = 0.07; \/\/ 7%\n\n  \/\/ fetch cart from storefront\n  async function fetchCart(){\n    try {\n      const res = await fetch('\/cart.js', { credentials: 'same-origin' });\n      if(!res.ok) return { items: [], items_subtotal_price: 0 };\n      return await res.json();\n    } catch(e){\n      return { items: [], items_subtotal_price: 0 };\n    }\n  }\n\n  function cartTotalQuantity(cart){\n    if(!cart || !cart.items) return 0;\n    return cart.items.reduce((sum, it) =\u003e sum + (parseInt(it.quantity) || 0), 0);\n  }\n\n  \/\/ utility: parse EGP text like \"EGP 65\" or \"EGP 1,234\"\n  function parseEGPText(text){\n    if(!text) return 0;\n    const digits = (''+text).replace(\/[^\\d]\/g,'');\n    return parseInt(digits || '0', 10);\n  }\n\n  \/\/ ensure discount row exists in mini-order UI\n  function ensureDiscountRow(){\n    const subtotalRow = document.getElementById('mini-subtotal-row');\n    if(!subtotalRow) return;\n    let discountRow = document.getElementById('mini-discount-row');\n    if(!discountRow){\n      discountRow = document.createElement('div');\n      discountRow.id = 'mini-discount-row';\n      discountRow.className = 'mini-discount';\n      discountRow.style.display = 'flex';\n      discountRow.style.justifyContent = 'space-between';\n      discountRow.style.padding = '6px 0';\n      discountRow.style.fontWeight = '700';\n      discountRow.innerHTML = `\u003cdiv\u003eDiscount (7%)\u003c\/div\u003e\u003cdiv id=\"mini-discount\"\u003e-EGP 0\u003c\/div\u003e`;\n      subtotalRow.parentNode.insertBefore(discountRow, subtotalRow.nextSibling);\n    }\n  }\n\n  \/\/ update display values in mini-order (client-side estimate)\n  async function updateMiniDiscountUI(){\n    ensureDiscountRow();\n    const cart = await fetchCart();\n    const subtotalCents = cart.items_subtotal_price || 0; \/\/ cents\n    \/\/ convert to cents\/unit consistent with earlier code: earlier formatEGP divided by 100 when showing.\n    \/\/ Here cart.items_subtotal_price is in cents like 125000 =\u003e EGP 1,250.00\n    const subtotalEGP = Math.round(subtotalCents \/ 100); \/\/ integer EGP for display\n    const totalQty = cartTotalQuantity(cart);\n\n    \/\/ read shipping from DOM if present else default 65\n    const shipText = document.getElementById('mini-shipping')?.textContent || '';\n    const shippingEGP = parseEGPText(shipText) || 65;\n\n    const discountEGP = totalQty \u003e= MIN_QTY_FOR_DISCOUNT ? Math.round(subtotalEGP * DISCOUNT_RATE) : 0;\n    const discountedSubtotalEGP = Math.max(0, subtotalEGP - discountEGP);\n    const totalEGP = discountedSubtotalEGP + shippingEGP;\n\n    \/\/ update DOM elements (keep formatting)\n    const miniSubtotalEl = document.getElementById('mini-subtotal');\n    const miniDiscountEl = document.getElementById('mini-discount');\n    const miniTotalEl = document.getElementById('mini-total');\n\n    if(miniSubtotalEl) miniSubtotalEl.textContent = 'EGP ' + subtotalEGP.toLocaleString();\n    if(miniDiscountEl) miniDiscountEl.textContent = (discountEGP ? '-EGP ' + discountEGP.toLocaleString() : '-EGP 0');\n    if(miniTotalEl) miniTotalEl.textContent = 'EGP ' + totalEGP.toLocaleString();\n\n    \/\/ update quick-checkout note \u0026 dataset for button\n    const quickBtn = document.getElementById('quick-checkout-btn');\n    const note = document.getElementById('mini-note');\n    if(quickBtn){\n      if(totalQty \u003e= MIN_QTY_FOR_DISCOUNT){\n        quickBtn.dataset.bundleEligible = 'true';\n        if(note) note.textContent = 'Buy 2 or more items and get 7% OFF — applied automatically at checkout!';\n      } else if (cart.items \u0026\u0026 cart.items.length){\n        quickBtn.dataset.bundleEligible = 'false';\n        if(note) note.textContent = `Add ${Math.max(MIN_QTY_FOR_DISCOUNT - totalQty, 1)} more item to unlock 7% OFF.`;\n      } else {\n        quickBtn.dataset.bundleEligible = 'false';\n        if(note) note.textContent = 'Your cart is empty.';\n      }\n    }\n  }\n\n  \/\/ ensure our checkout redirection logic (in case earlier handler exists, keep it safe)\n  function ensureCheckoutHandler(){\n    const quickBtn = document.getElementById('quick-checkout-btn');\n    if(!quickBtn) return;\n    \/\/ remove previous duplicate listeners by cloning node (simple way)\n    const newBtn = quickBtn.cloneNode(true);\n    quickBtn.parentNode.replaceChild(newBtn, quickBtn);\n    newBtn.addEventListener('click', function(e){\n      if(newBtn.disabled) return;\n      const eligible = newBtn.dataset.bundleEligible === 'true';\n      if(eligible){\n        window.location.href = '\/checkout?discount=' + encodeURIComponent(DISCOUNT_CODE);\n      } else {\n        window.location.href = '\/checkout';\n      }\n    });\n  }\n\n  \/\/ init and periodic update\n  await updateMiniDiscountUI();\n  ensureCheckoutHandler();\n\n  \/\/ observe cart DOM changes to update instantly\n  const miniItems = document.getElementById('mini-items');\n  if(miniItems){\n    const obs = new MutationObserver(async ()=\u003e{ await updateMiniDiscountUI(); });\n    obs.observe(miniItems, { childList:true, subtree:true, attributes:true });\n  }\n\n  \/\/ fallback interval to keep in sync (every 2s)\n  setInterval(updateMiniDiscountUI, 2000);\n})();\n\u003c\/script\u003e\u003c\/p\u003e\n\u003c!-- FIX: re-bind swatches \u0026 ensure clickable (paste at end of body) --\u003e\n\u003cstyle\u003e\n  \/* force swatches to be clickable above other sections if overlaying occurs *\/\n  .variant-swatches, .variant-swatches .color-swatch {\n    position: relative !important;\n    z-index: 60 !important;\n    pointer-events: auto !important;\n  }\n  \/* if any overlay accidentally covers the page, make sure hero\/carousel isn't blocking clicks down the page *\/\n  .carousel-wrapper { z-index: 10; position: relative; }\n  .pf-wrapper { z-index: 20; position: relative; } \/* ensure wrapper stack-order *\/\n\u003c\/style\u003e\n\n\u003cscript\u003e\n(function(){\n  \/\/ safe ready\n  function ready(fn){ if(document.readyState !== 'loading') fn(); else document.addEventListener('DOMContentLoaded', fn); }\n  ready(function(){\n    const WEIGHT_LABELS = { \"L\":\"L (45kg – 60kg)\", \"XL\":\"XL (50kg – 75kg)\", \"2XL\":\"2XL (75kg – 105kg)\", \"3XL\":\"3XL (90kg – 120kg)\" };\n\n    function populateSizesSelect(selectEl, variantsObj){\n      selectEl.innerHTML = '';\n      if (!variantsObj || Object.keys(variantsObj).length === 0){\n        const o = document.createElement('option'); o.value=''; o.textContent = 'No sizes available'; selectEl.appendChild(o); return;\n      }\n      const placeholder = document.createElement('option'); placeholder.value=''; placeholder.textContent='Choose size'; selectEl.appendChild(placeholder);\n      const order = ['L','XL','2XL','3XL'];\n      const keys = Object.keys(variantsObj).sort((a,b)=\u003e{\n        const ia = order.indexOf(a) === -1 ? 999 : order.indexOf(a);\n        const ib = order.indexOf(b) === -1 ? 999 : order.indexOf(b);\n        return ia - ib;\n      });\n      keys.forEach(k=\u003e{\n        const opt = document.createElement('option');\n        opt.value = variantsObj[k];\n        opt.textContent = WEIGHT_LABELS[k] || k;\n        selectEl.appendChild(opt);\n      });\n    }\n\n    \/\/ rebind function for a single group-block\n    function bindGroup(group){\n      if(!group) return;\n      const swatches = Array.from(group.querySelectorAll('.color-swatch'));\n      const sizesArea = group.querySelector('.sizes-area');\n      if(!sizesArea) return;\n      const sizesSelect = sizesArea.querySelector('.sizes-select');\n      const addBtn = sizesArea.querySelector('.add-btn');\n      const feedback = sizesArea.querySelector('.sizes-feedback');\n\n      function show(msg, color='#666'){ if(feedback){ feedback.style.color=color; feedback.textContent=msg; } }\n\n      \/\/ remove any previous handlers (safety)\n      swatches.forEach(s=\u003e{\n        s.replaceWith(s.cloneNode(true));\n      });\n\n      \/\/ re-query after clone\n      const freshSwatches = Array.from(group.querySelectorAll('.color-swatch'));\n\n      freshSwatches.forEach(s=\u003e{\n        \/\/ make sure it's a button (or role=button)\n        if(!s.hasAttribute('tabindex')) s.setAttribute('tabindex','0');\n        s.style.pointerEvents = 'auto';\n        s.style.zIndex = 60;\n\n        s.addEventListener('click', function(e){\n          e.preventDefault();\n          \/\/ clear active\n          freshSwatches.forEach(x=\u003ex.classList.remove('active'));\n          s.classList.add('active');\n          let variants = {};\n          try { variants = JSON.parse(s.getAttribute('data-variants') || '{}'); } catch(err){ console.error('Invalid variants JSON', err); show('Invalid variants'); sizesArea.classList.remove('visible'); return; }\n          populateSizesSelect(sizesSelect, variants);\n          sizesArea.classList.add('visible'); sizesArea.setAttribute('aria-hidden','false');\n          \/\/ ensure sizes area is visible and in view\n          try{ sizesArea.scrollIntoView({ behavior:'smooth', block:'center' }); }catch(e){}\n          show('Selected: ' + (s.getAttribute('data-color-name') || ''));\n        });\n\n        s.addEventListener('keydown', function(e){\n          if(e.key === 'Enter' || e.key === ' '){\n            e.preventDefault();\n            s.click();\n          }\n        });\n      });\n\n      \/\/ rebind add to cart button if present (keep existing logic)\n      if(addBtn){\n        \/\/ remove old listeners by cloning\n        const newAdd = addBtn.cloneNode(true);\n        addBtn.parentNode.replaceChild(newAdd, addBtn);\n        newAdd.addEventListener('click', async function(){\n          const variantId = sizesSelect.value;\n          if (!variantId) { show('Please select color then size', '#b71c1c'); return; }\n          newAdd.disabled = true; show('Adding to cart...');\n          try {\n            const res = await fetch('\/cart\/add.js', { method:'POST', headers:{ 'Content-Type':'application\/json' }, credentials:'same-origin', body: JSON.stringify({ items:[{ id: variantId, quantity: 1 }] }) });\n            if (res.ok) { show('Added to cart ✅', '#138000'); }\n            else {\n              show('AJAX failed — fallback form', '#b71c1c');\n              const form = document.createElement('form'); form.method='post'; form.action='\/cart\/add'; form.style.display='none';\n              const idInput = document.createElement('input'); idInput.name='id'; idInput.value = variantId; form.appendChild(idInput);\n              const qty = document.createElement('input'); qty.name='quantity'; qty.value='1'; form.appendChild(qty);\n              document.body.appendChild(form); form.submit();\n            }\n          } catch (err) {\n            console.error(err); show('Network error — fallback', '#b71c1c');\n            const form = document.createElement('form'); form.method='post'; form.action='\/cart\/add'; form.style.display='none';\n            const idInput = document.createElement('input'); idInput.name='id'; idInput.value = variantId; form.appendChild(idInput);\n            const qty = document.createElement('input'); qty.name='quantity'; qty.value='1'; form.appendChild(qty);\n            document.body.appendChild(form); form.submit();\n          } finally { newAdd.disabled = false; }\n        });\n      }\n    }\n\n    \/\/ bind all groups initially\n    const groups = Array.from(document.querySelectorAll('.group-block'));\n    if(groups.length === 0){\n      console.warn('No group-block found to bind swatches.');\n    }\n    groups.forEach(bindGroup);\n\n    \/\/ if new groups are added dynamically, observe container and rebind (robustness)\n    const container = document.querySelector('.pf-wrapper');\n    if(container){\n      const mo = new MutationObserver((mutations)=\u003e{\n        \/\/ rebind on changes after a short debounce\n        clearTimeout(window.___swatch_rebind_timeout);\n        window.___swatch_rebind_timeout = setTimeout(()=\u003e{\n          Array.from(document.querySelectorAll('.group-block')).forEach(bindGroup);\n        }, 200);\n      });\n      mo.observe(container, { childList:true, subtree:true });\n    }\n\n    \/\/ small user-tip: ensure nothing is blocking clicks above swatches (debug)\n    setTimeout(()=\u003e {\n      const testBtn = document.querySelector('.variant-swatches .color-swatch');\n      if(testBtn \u0026\u0026 window.getComputedStyle(testBtn).pointerEvents === 'none'){\n        console.warn('Swatch pointer-events disabled by CSS');\n      }\n    }, 800);\n  });\n})();\n\u003c\/script\u003e\n","products":[],"url":"https:\/\/porto-femme.com\/collections\/landing-page.oembed","provider":"PORTO FEMME","version":"1.0","type":"link"}