/** Shopify CDN: Minification failed

Line 711:0 Unexpected "`"
Line 718:1 Unexpected "{"
Line 718:3 Expected identifier but found "'product-gymshark.css'"
Line 720:0 Unexpected "<"
Line 738:11 Expected identifier but found "%"
Line 739:12 Unexpected "<"
Line 746:11 Expected identifier but found "%"
Line 747:8 Unexpected "<"
Line 750:11 Expected identifier but found "%"
Line 751:12 Unexpected "<"
... and 206 more hidden warnings

**/
/* Gymshark-Style Product Page - FIXED */

:root {
  --gs-black: #000000;
  --gs-white: #ffffff;
  --gs-gray-100: #f5f5f5;
  --gs-gray-200: #e5e5e5;
  --gs-gray-400: #9ca3af;
  --gs-gray-600: #6b7280;
  --gs-gray-800: #1f2937;
}

.gs-product {
  background: var(--gs-white);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--gs-black);
  padding-bottom: 80px;
}

.gs-product__container {
  max-width: 1400px;
  margin: 0 auto;
}

/* FIXED Gallery */
.gs-product__gallery {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f0ebe5;
}

.gs-gallery__main {
  position: relative;
  overflow: hidden;
}

.gs-gallery__slider {
  display: flex;
  transition: transform 0.3s ease;
  width: 100%;
}

.gs-gallery__slide {
  min-width: 100%;
  flex-shrink: 0;
}

.gs-gallery__slide img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.gs-gallery__dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  background: rgba(255,255,255,0.9);
  padding: 8px 12px;
  border-radius: 20px;
  z-index: 10;
}

.gs-gallery__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gs-gray-400);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.gs-gallery__dot.active {
  width: 24px;
  border-radius: 4px;
  background: var(--gs-black);
}

/* Product Info */
.gs-product__info {
  padding: 24px 20px;
}

.gs-product__badge {
  display: inline-block;
  background: var(--gs-gray-100);
  color: var(--gs-black);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gs-product__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gs-product__subtitle {
  font-size: 15px;
  color: var(--gs-gray-600);
  margin: 0 0 8px 0;
}

.gs-product__price {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

.gs-price--sale {
  color: #dc2626;
  margin-right: 8px;
}

.gs-price--compare {
  color: var(--gs-gray-400);
  text-decoration: line-through;
  font-weight: 400;
}

.gs-product__actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.gs-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--gs-gray-200);
  border-radius: 50px;
  background: var(--gs-white);
  cursor: pointer;
  transition: all 0.2s ease;
}

.gs-action-btn:hover {
  border-color: var(--gs-black);
}

.gs-action-btn svg {
  width: 20px;
  height: 20px;
}

.gs-product__description {
  margin-bottom: 24px;
}

.gs-description__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gs-gray-600);
  margin: 0 0 8px 0;
}

.gs-description__more {
  background: none;
  border: none;
  font-size: 15px;
  color: var(--gs-black);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.gs-promo-banner {
  background: var(--gs-gray-100);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 24px;
}

.gs-promo-banner__title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px 0;
}

.gs-promo-banner__text {
  font-size: 14px;
  color: var(--gs-gray-600);
  margin: 0;
  line-height: 1.5;
}

/* FIXED Color Selector */
.gs-color-selector {
  margin-bottom: 24px;
}

.gs-color-selector__label {
  display: block;
  font-size: 14px;
  color: var(--gs-gray-600);
  margin-bottom: 12px;
}

.gs-color-selector__label strong {
  color: var(--gs-black);
}

.gs-color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gs-color-option {
  padding: 12px 20px;
  border: 1px solid var(--gs-gray-200);
  border-radius: 8px;
  background: var(--gs-white);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gs-color-option:hover {
  border-color: var(--gs-black);
}

.gs-color-option.active {
  background: var(--gs-black);
  color: var(--gs-white);
  border-color: var(--gs-black);
}

/* Color Variant Images */
.gs-color-variants {
  margin-bottom: 24px;
}

.gs-color-variants__images {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.gs-color-variant {
  width: 70px;
  height: 70px;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--gs-gray-100);
  transition: border-color 0.2s ease;
}

.gs-color-variant.active {
  border-color: var(--gs-black);
}

.gs-color-variant img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-color-variants__name {
  font-size: 14px;
  color: var(--gs-gray-600);
  margin: 0;
}

/* FIXED Size Selector - Wrapping */
.gs-size-selector {
  margin-bottom: 24px;
}

.gs-size-selector__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.gs-size-selector__label {
  font-size: 14px;
  color: var(--gs-gray-600);
}

.gs-size-guide {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--gs-black);
  text-decoration: underline;
}

.gs-size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gs-size-option {
  min-width: 50px;
  padding: 14px 16px;
  background: var(--gs-white);
  border: 1px solid var(--gs-gray-200);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.gs-size-option:hover:not(.disabled) {
  border-color: var(--gs-black);
}

.gs-size-option.active {
  background: var(--gs-black);
  color: var(--gs-white);
  border-color: var(--gs-black);
}

.gs-size-option.disabled {
  color: var(--gs-gray-400);
  cursor: not-allowed;
  text-decoration: line-through;
  background: var(--gs-gray-100);
}

/* Add to Cart Button */
.gs-add-to-cart {
  width: 100%;
  padding: 18px 24px;
  background: var(--gs-black);
  color: var(--gs-white);
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 20px;
}

.gs-add-to-cart:hover:not(:disabled) {
  background: var(--gs-gray-800);
}

.gs-add-to-cart:disabled {
  background: var(--gs-gray-400);
  cursor: not-allowed;
}

/* Payment Options */
.gs-payment-options {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gs-gray-200);
}

.gs-payment-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: var(--gs-gray-600);
  margin-bottom: 8px;
}

.gs-payment-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #003087;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
}

.gs-payment-option a {
  color: var(--gs-black);
}

.gs-payment-also {
  font-size: 14px;
  color: var(--gs-gray-600);
  margin: 0;
}

.gs-rewards-banner {
  background: var(--gs-gray-100);
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.gs-rewards-banner p {
  margin: 0;
  font-size: 14px;
}

.gs-rewards-banner a {
  color: var(--gs-black);
}

.gs-rewards-banner__text {
  color: var(--gs-gray-600);
  margin-top: 4px !important;
}

.gs-get-the-look {
  border: 1px solid var(--gs-gray-200);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.gs-get-the-look__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.gs-get-the-look__header h3 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.gs-get-the-look__header span {
  font-size: 14px;
  color: var(--gs-gray-600);
  flex: 1;
}

.gs-get-the-look__products {
  display: flex;
  gap: 12px;
}

.gs-look-product {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--gs-gray-100);
}

.gs-look-product img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.gs-accordion {
  border-top: 1px solid var(--gs-gray-200);
  margin-bottom: 24px;
}

.gs-accordion__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.gs-accordion__trigger svg {
  transition: transform 0.3s ease;
}

.gs-accordion__trigger.open svg {
  transform: rotate(90deg);
}

.gs-accordion__content {
  display: none;
  padding-bottom: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gs-gray-600);
}

.gs-accordion__content.open {
  display: block;
}

.gs-tabs {
  margin-top: 24px;
}

.gs-tabs__nav {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--gs-gray-200);
  margin-bottom: 24px;
  overflow-x: auto;
}

.gs-tab-btn {
  background: none;
  border: none;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--gs-gray-400);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.gs-tab-btn.active {
  color: var(--gs-black);
}

.gs-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gs-black);
}

.gs-tab-panel {
  display: none;
}

.gs-tab-panel.active {
  display: block;
}

.gs-tab-panel p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--gs-gray-600);
  margin: 0 0 20px 0;
}

.gs-feature {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.gs-feature__icon {
  flex-shrink: 0;
}

.gs-feature__icon svg {
  color: var(--gs-gray-600);
}

.gs-feature__text {
  display: flex;
  flex-direction: column;
}

.gs-feature__text strong {
  font-size: 15px;
  margin-bottom: 4px;
}

.gs-feature__text span {
  font-size: 14px;
  color: var(--gs-gray-600);
}

/* Sticky Add to Bag */
.gs-sticky-atb {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--gs-white);
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  z-index: 100;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.gs-sticky-atb.visible {
  transform: translateY(0);
}

.gs-sticky-atb__btn {
  flex: 1;
  padding: 16px 24px;
  background: var(--gs-black);
  color: var(--gs-white);
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}

.gs-sticky-atb__wishlist {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--gs-black);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--gs-white);
}

/* Desktop */
@media screen and (min-width: 990px) {
  .gs-product {
    padding-bottom: 40px;
  }

  .gs-product__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 0 40px;
  }

  .gs-product__gallery {
    position: sticky;
    top: 20px;
    height: fit-content;
  }

  .gs-gallery__slide img {
    aspect-ratio: auto;
    max-height: 80vh;
    object-fit: contain;
  }

  .gs-product__info {
    padding: 40px 0;
  }

  .gs-product__title {
    font-size: 32px;
  }

  .gs-sticky-atb {
    display: none;
  }
}
```

---

## Updated `product-gymshark.liquid`

```liquid
{{ 'product-gymshark.css' | asset_url | stylesheet_tag }}

<div class="gs-product" data-testid="gs-product-page">
  <!-- Mobile Sticky Add to Bag -->
  <div class="gs-sticky-atb" data-testid="sticky-add-to-bag">
    <button type="button" class="gs-sticky-atb__btn" onclick="document.getElementById('gsAddToCart').click()">
      ADD TO BAG
    </button>
    <button type="button" class="gs-sticky-atb__wishlist">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
      </svg>
    </button>
  </div>

  <div class="gs-product__container">
    <!-- FIXED Product Gallery -->
    <div class="gs-product__gallery" data-testid="product-gallery">
      <div class="gs-gallery__main">
        <div class="gs-gallery__slider" id="gsGallerySlider">
          {% for image in product.images %}
            <div class="gs-gallery__slide" data-index="{{ forloop.index0 }}">
              <img src="{{ image | image_url: width: 800 }}" 
                   alt="{{ image.alt | escape }}" 
                   width="800"
                   height="1067"
                   loading="{% if forloop.first %}eager{% else %}lazy{% endif %}">
            </div>
          {% endfor %}
        </div>
        
        <div class="gs-gallery__dots" data-testid="gallery-dots">
          {% for image in product.images %}
            <button type="button" 
                    class="gs-gallery__dot {% if forloop.first %}active{% endif %}" 
                    data-index="{{ forloop.index0 }}"
                    aria-label="View image {{ forloop.index }}"></button>
          {% endfor %}
        </div>
      </div>
    </div>

    <!-- Product Info -->
    <div class="gs-product__info" data-testid="product-info">
      {% if section.settings.show_badge and section.settings.badge_text != blank %}
        <span class="gs-product__badge">{{ section.settings.badge_text }}</span>
      {% endif %}

      <h1 class="gs-product__title">{{ product.title }}</h1>

      {% if section.settings.default_subtitle != blank %}
        <p class="gs-product__subtitle">{{ section.settings.default_subtitle }}</p>
      {% endif %}

      <div class="gs-product__price">
        {% if product.compare_at_price > product.price %}
          <span class="gs-price--sale">{{ product.price | money }}</span>
          <span class="gs-price--compare">{{ product.compare_at_price | money }}</span>
        {% else %}
          <span>{{ product.price | money }}</span>
        {% endif %}
      </div>

      <div class="gs-product__actions">
        <button type="button" class="gs-action-btn gs-action-btn--wishlist">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
          </svg>
        </button>
        <button type="button" class="gs-action-btn gs-action-btn--share" onclick="if(navigator.share){navigator.share({title:'{{ product.title }}',url:window.location.href})}">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
            <polyline points="16,6 12,2 8,6"/>
            <line x1="12" y1="2" x2="12" y2="15"/>
          </svg>
        </button>
      </div>

      <div class="gs-product__description">
        <p class="gs-description__text">{{ product.description | strip_html | truncate: 150 }}</p>
        {% if product.description.size > 150 %}
          <button type="button" class="gs-description__more" onclick="document.getElementById('gsDescriptionTabs').scrollIntoView({behavior:'smooth'})">Learn more</button>
        {% endif %}
      </div>

      {% if section.settings.show_promo_banner %}
        <div class="gs-promo-banner">
          <h3 class="gs-promo-banner__title">{{ section.settings.promo_title }}</h3>
          <p class="gs-promo-banner__text">{{ section.settings.promo_text }}</p>
        </div>
      {% endif %}

      <!-- Product Form -->
      {% form 'product', product, id: 'gsProductForm' %}
        <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" id="gsVariantId">

        <!-- FIXED Color Selector -->
        {% for option in product.options_with_values %}
          {% if option.name == 'Color' or option.name == 'Colour' %}
            <div class="gs-color-selector">
              <span class="gs-color-selector__label">Colour: <strong id="gsSelectedColor">{{ product.selected_or_first_available_variant.option1 }}</strong></span>
              <div class="gs-color-options">
                {% for value in option.values %}
                  <button type="button" 
                          class="gs-color-option {% if product.selected_or_first_available_variant.option1 == value %}active{% endif %}"
                          data-color="{{ value }}"
                          data-option-index="option1">
                    {{ value }}
                  </button>
                {% endfor %}
              </div>
            </div>
          {% endif %}
        {% endfor %}

        <!-- FIXED Size Selector -->
        {% for option in product.options_with_values %}
          {% if option.name == 'Size' %}
            {% assign size_option_position = forloop.index %}
            <div class="gs-size-selector">
              <div class="gs-size-selector__header">
                <span class="gs-size-selector__label">Select a size</span>
                {% if section.settings.size_guide_url != blank %}
                  <a href="{{ section.settings.size_guide_url }}" class="gs-size-guide">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                      <polyline points="14,2 14,8 20,8"/>
                    </svg>
                    Size Guide
                  </a>
                {% endif %}
              </div>
              <div class="gs-size-options">
                {% for value in option.values %}
                  {% assign variant_available = false %}
                  {% for variant in product.variants %}
                    {% case size_option_position %}
                      {% when 1 %}
                        {% if variant.option1 == value and variant.available %}
                          {% assign variant_available = true %}
                        {% endif %}
                      {% when 2 %}
                        {% if variant.option2 == value and variant.available %}
                          {% assign variant_available = true %}
                        {% endif %}
                      {% when 3 %}
                        {% if variant.option3 == value and variant.available %}
                          {% assign variant_available = true %}
                        {% endif %}
                    {% endcase %}
                  {% endfor %}
                  <button type="button" 
                          class="gs-size-option {% unless variant_available %}disabled{% endunless %}"
                          data-size="{{ value }}"
                          data-option-index="option{{ size_option_position }}"
                          {% unless variant_available %}disabled{% endunless %}>
                    {{ value }}
                  </button>
                {% endfor %}
              </div>
            </div>
          {% endif %}
        {% endfor %}

        <button type="submit" 
                class="gs-add-to-cart" 
                id="gsAddToCart"
                {% unless product.selected_or_first_available_variant.available %}disabled{% endunless %}>
          {% if product.selected_or_first_available_variant.available %}
            ADD TO BAG
          {% else %}
            SOLD OUT
          {% endif %}
        </button>
      {% endform %}

      {% if section.settings.show_payment_options %}
        <div class="gs-payment-options">
          <div class="gs-payment-option">
            <span class="gs-payment-option__icon">P</span>
            <span>Pay in 3 interest-free payments of {{ product.price | divided_by: 3 | money }}. <a href="#">Learn more</a></span>
          </div>
          <p class="gs-payment-also">Also available at checkout: <strong>Klarna.</strong></p>
        </div>
      {% endif %}

      {% if section.settings.show_rewards_banner %}
        <div class="gs-rewards-banner">
          <p><a href="#">{{ section.settings.rewards_title }}</a></p>
          <p class="gs-rewards-banner__text">{{ section.settings.rewards_text }}</p>
        </div>
      {% endif %}

      <div class="gs-accordion">
        <button type="button" class="gs-accordion__trigger" onclick="this.classList.toggle('open');this.nextElementSibling.classList.toggle('open')">
          <span>DELIVERY & RETURNS</span>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="9,18 15,12 9,6"/>
          </svg>
        </button>
        <div class="gs-accordion__content">
          {{ section.settings.delivery_returns_text }}
        </div>
      </div>

      <div class="gs-tabs" id="gsDescriptionTabs">
        <div class="gs-tabs__nav">
          <button type="button" class="gs-tab-btn active" data-tab="designed">Designed For</button>
          <button type="button" class="gs-tab-btn" data-tab="description">Description</button>
          <button type="button" class="gs-tab-btn" data-tab="features">Features</button>
        </div>
        <div class="gs-tabs__content">
          <div class="gs-tab-panel active" data-panel="designed">
            <p>{{ section.settings.designed_for_text | default: product.description }}</p>
          </div>
          <div class="gs-tab-panel" data-panel="description">
            {{ product.description }}
          </div>
          <div class="gs-tab-panel" data-panel="features">
            {% if section.settings.feature_1_title != blank %}
              <div class="gs-feature">
                <div class="gs-feature__icon">
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                  </svg>
                </div>
                <div class="gs-feature__text">
                  <strong>{{ section.settings.feature_1_title }}</strong>
                  <span>{{ section.settings.feature_1_text }}</span>
                </div>
              </div>
            {% endif %}
            {% if section.settings.feature_2_title != blank %}
              <div class="gs-feature">
                <div class="gs-feature__icon">
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M12 6v6l4 2"/>
                  </svg>
                </div>
                <div class="gs-feature__text">
                  <strong>{{ section.settings.feature_2_title }}</strong>
                  <span>{{ section.settings.feature_2_text }}</span>
                </div>
              </div>
            {% endif %}
            {% if section.settings.feature_3_title != blank %}
              <div class="gs-feature">
                <div class="gs-feature__icon">
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                  </svg>
                </div>
                <div class="gs-feature__text">
                  <strong>{{ section.settings.feature_3_title }}</strong>
                  <span>{{ section.settings.feature_3_text }}</span>
                </div>
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function() {
  var slider = document.getElementById('gsGallerySlider');
  var dots = document.querySelectorAll('.gs-gallery__dot');
  var slides = document.querySelectorAll('.gs-gallery__slide');
  var currentSlide = 0;
  var touchStartX = 0;
  var touchEndX = 0;

  // Gallery swipe
  if (slider && slides.length > 0) {
    slider.addEventListener('touchstart', function(e) {
      touchStartX = e.changedTouches[0].screenX;
    });
    slider.addEventListener('touchend', function(e) {
      touchEndX = e.changedTouches[0].screenX;
      var diff = touchStartX - touchEndX;
      if (Math.abs(diff) > 50) {
        if (diff > 0 && currentSlide < slides.length - 1) {
          goToSlide(currentSlide + 1);
        } else if (diff < 0 && currentSlide > 0) {
          goToSlide(currentSlide - 1);
        }
      }
    });
  }

  function goToSlide(index) {
    currentSlide = index;
    slider.style.transform = 'translateX(-' + (index * 100) + '%)';
    for (var i = 0; i < dots.length; i++) {
      dots[i].classList.remove('active');
    }
    if (dots[index]) {
      dots[index].classList.add('active');
    }
  }

  for (var i = 0; i < dots.length; i++) {
    (function(index) {
      dots[index].addEventListener('click', function() {
        goToSlide(index);
      });
    })(i);
  }

  // Tabs
  var tabBtns = document.querySelectorAll('.gs-tab-btn');
  var tabPanels = document.querySelectorAll('.gs-tab-panel');
  for (var j = 0; j < tabBtns.length; j++) {
    tabBtns[j].addEventListener('click', function() {
      var tab = this.getAttribute('data-tab');
      for (var k = 0; k < tabBtns.length; k++) {
        tabBtns[k].classList.remove('active');
        tabPanels[k].classList.remove('active');
      }
      this.classList.add('active');
      var panel = document.querySelector('[data-panel="' + tab + '"]');
      if (panel) panel.classList.add('active');
    });
  }

  // Variant Selection
  var productVariants = {{ product.variants | json }};
  var variantIdInput = document.getElementById('gsVariantId');
  var addToCartBtn = document.getElementById('gsAddToCart');
  var selectedOptions = {};

  // Initialize selected options
  var currentVariant = productVariants.find(function(v) { return v.id === {{ product.selected_or_first_available_variant.id }}; });
  if (currentVariant) {
    selectedOptions['option1'] = currentVariant.option1;
    selectedOptions['option2'] = currentVariant.option2;
    selectedOptions['option3'] = currentVariant.option3;
  }

  // Color buttons
  var colorBtns = document.querySelectorAll('.gs-color-option');
  for (var c = 0; c < colorBtns.length; c++) {
    colorBtns[c].addEventListener('click', function() {
      var color = this.getAttribute('data-color');
      var optIndex = this.getAttribute('data-option-index');
      selectedOptions[optIndex] = color;
      
      for (var x = 0; x < colorBtns.length; x++) {
        colorBtns[x].classList.remove('active');
      }
      this.classList.add('active');
      
      var colorLabel = document.getElementById('gsSelectedColor');
      if (colorLabel) colorLabel.textContent = color;
      
      updateVariant();
    });
  }

  // Size buttons
  var sizeBtns = document.querySelectorAll('.gs-size-option:not(.disabled)');
  for (var s = 0; s < sizeBtns.length; s++) {
    sizeBtns[s].addEventListener('click', function() {
      var size = this.getAttribute('data-size');
      var optIndex = this.getAttribute('data-option-index');
      selectedOptions[optIndex] = size;
      
      var allSizeBtns = document.querySelectorAll('.gs-size-option');
      for (var y = 0; y < allSizeBtns.length; y++) {
        allSizeBtns[y].classList.remove('active');
      }
      this.classList.add('active');
      
      updateVariant();
    });
  }

  function updateVariant() {
    var matchedVariant = productVariants.find(function(v) {
      var match1 = !selectedOptions['option1'] || v.option1 === selectedOptions['option1'];
      var match2 = !selectedOptions['option2'] || v.option2 === selectedOptions['option2'];
      var match3 = !selectedOptions['option3'] || v.option3 === selectedOptions['option3'];
      return match1 && match2 && match3;
    });

    if (matchedVariant) {
      variantIdInput.value = matchedVariant.id;
      if (matchedVariant.available) {
        addToCartBtn.disabled = false;
        addToCartBtn.textContent = 'ADD TO BAG';
      } else {
        addToCartBtn.disabled = true;
        addToCartBtn.textContent = 'SOLD OUT';
      }
    }
  }

  // Sticky bar
  var stickyBar = document.querySelector('.gs-sticky-atb');
  if (addToCartBtn && stickyBar) {
    var observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          stickyBar.classList.remove('visible');
        } else {
          stickyBar.classList.add('visible');
        }
      });
    }, { threshold: 0 });
    observer.observe(addToCartBtn);
  }
})();
</script>

{% schema %}
{
  "name": "Gymshark Product Page",
  "tag": "section",
  "class": "gs-product-section",
  "settings": [
    {
      "type": "header",
      "content": "Badge"
    },
    {
      "type": "checkbox",
      "id": "show_badge",
      "label": "Show badge",
      "default": true
    },
    {
      "type": "text",
      "id": "badge_text",
      "label": "Badge text",
      "default": "NEW"
    },
    {
      "type": "header",
      "content": "Product Info"
    },
    {
      "type": "text",
      "id": "default_subtitle",
      "label": "Default subtitle",
      "default": "Regular Fit"
    },
    {
      "type": "url",
      "id": "size_guide_url",
      "label": "Size guide page URL"
    },
    {
      "type": "header",
      "content": "Promo Banner"
    },
    {
      "type": "checkbox",
      "id": "show_promo_banner",
      "label": "Show promo banner",
      "default": true
    },
    {
      "type": "text",
      "id": "promo_title",
      "label": "Promo title",
      "default": "SPECIAL OFFER FOR MEMBERS"
    },
    {
      "type": "textarea",
      "id": "promo_text",
      "label": "Promo text",
      "default": "Members get exclusive discounts on this item. Sign up today!"
    },
    {
      "type": "header",
      "content": "Payment Options"
    },
    {
      "type": "checkbox",
      "id": "show_payment_options",
      "label": "Show payment options",
      "default": true
    },
    {
      "type": "header",
      "content": "Rewards Banner"
    },
    {
      "type": "checkbox",
      "id": "show_rewards_banner",
      "label": "Show rewards banner",
      "default": true
    },
    {
      "type": "text",
      "id": "rewards_title",
      "label": "Rewards title",
      "default": "Unlock Access to Exclusive Rewards & Benefits"
    },
    {
      "type": "text",
      "id": "rewards_text",
      "label": "Rewards text",
      "default": "Purchasing this product earns 250 points."
    },
    {
      "type": "header",
      "content": "Delivery & Returns"
    },
    {
      "type": "richtext",
      "id": "delivery_returns_text",
      "label": "Delivery & returns content",
      "default": "<p>Free standard delivery on orders over £50. Returns accepted within 30 days.</p>"
    },
    {
      "type": "header",
      "content": "Designed For Tab"
    },
    {
      "type": "textarea",
      "id": "designed_for_text",
      "label": "Designed for text",
      "default": "Designed for everyday wear and everything in between."
    },
    {
      "type": "header",
      "content": "Features Tab"
    },
    {
      "type": "text",
      "id": "feature_1_title",
      "label": "Feature 1 title",
      "default": "Premium Quality"
    },
    {
      "type": "text",
      "id": "feature_1_text",
      "label": "Feature 1 description",
      "default": "Made with the finest materials"
    },
    {
      "type": "text",
      "id": "feature_2_title",
      "label": "Feature 2 title",
      "default": "Fast Delivery"
    },
    {
      "type": "text",
      "id": "feature_2_text",
      "label": "Feature 2 description",
      "default": "Ships within 24 hours"
    },
    {
      "type": "text",
      "id": "feature_3_title",
      "label": "Feature 3 title",
      "default": "Made with Love"
    },
    {
      "type": "text",
      "id": "feature_3_text",
      "label": "Feature 3 description",
      "default": "Each piece is crafted with care"
    }
  ]
}
{% endschema %}