/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 19:9 Unexpected "{"
Line 19:18 Expected ":"
Line 19:27 Unexpected "<"
Line 24:3 Expected identifier but found "%"
Line 24:27 Expected identifier but found "%"
Line 25:2 Unexpected "<"
Line 27:7 Expected identifier but found "%"
Line 28:8 Unexpected "<"
Line 31:7 Expected identifier but found "%"
... and 233 more hidden warnings

**/
<nav class="breadcrumbs" aria-label="Migas de pan">
  <a href="{{ routes.root_url }}">Inicio</a><span>·</span>
  <a href="{{ routes.collections_url }}">Colección</a><span>·</span>
  <span>{{ product.title }}</span>
</nav>

<main class="pdp">

  {%- comment -%} GALLERY {%- endcomment -%}
  <section class="gallery" id="gallery" aria-label="Imágenes del producto">
    <div class="gallery__thumbs" role="tablist" aria-label="Miniaturas">
      {%- for image in product.images limit: 8 -%}
        <button type="button" class="gallery__thumb{% if forloop.first %} gallery__thumb--active{% endif %}" data-src="{{ image | image_url: width: 1400 }}" role="tab" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}" aria-label="Vista {{ forloop.index }}">
          <img src="{{ image | image_url: width: 200 }}" alt="{{ image.alt | default: product.title | escape }} · vista {{ forloop.index }}" loading="lazy">
        </button>
      {%- endfor -%}
    </div>
    <div class="gallery__main">
      <img id="gallery-main-img" class="is-active" src="{{ product.featured_image | image_url: width: 1400 }}" alt="{{ product.featured_image.alt | default: product.title | escape }} · vista principal">
    </div>
  </section>

  {%- comment -%} INFO {%- endcomment -%}
  <aside class="info">
    <span class="info__num">{% if product.metafields.custom.collection_label != blank %}{{ product.metafields.custom.collection_label }}{% else %}Colección de verano{% endif %}</span>
    <h1 class="info__name">{{ product.title }}.</h1>
    <p class="info__category">{{ product.type }}</p>
    <p class="info__price" id="info-price">{{ product.price | money }}</p>
    {%- assign desc_parts = product.description | split: '</p>' -%}
    {%- assign desc_intro = desc_parts | first | append: '</p>' -%}
    {%- assign desc_rest = product.description | remove_first: desc_intro -%}
    <div class="info__description">{{ desc_intro }}</div>

    {%- form 'product', product, id: 'product-form', novalidate: 'novalidate' -%}
      <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" id="product-variant-id">

      {%- for option in product.options_with_values -%}
        {%- if option.name == 'Color' or option.name == 'color' -%}
          <div class="swatches" id="swatches-block">
            <span class="swatches__label">
              Color <span class="swatches__label-value" id="color-name">{{ option.selected_value | default: option.values[0] }}</span>
            </span>
            <div class="swatches__list" id="swatches-list" role="radiogroup" aria-label="Selecciona color">
              {%- for value in option.values -%}
                {%- assign v = value | downcase -%}
                {%- case v -%}
                  {%- when 'gris piedra' -%}{%- assign hex = '#9b9389' -%}
                  {%- when 'blanco' -%}{%- assign hex = '#f4f1ea' -%}
                  {%- when 'negro' -%}{%- assign hex = '#1a1a1a' -%}
                  {%- when 'negro brillo' -%}{%- assign hex = '#141414' -%}
                  {%- when 'azul cielo' -%}{%- assign hex = '#a9c7e0' -%}
                  {%- when 'fucsia' -%}{%- assign hex = '#d4357f' -%}
                  {%- when 'crema' -%}{%- assign hex = '#ece0cf' -%}
                  {%- when 'rojo' -%}{%- assign hex = '#b22222' -%}
                  {%- when 'terracota' -%}{%- assign hex = '#c66b4a' -%}
                  {%- when 'rosa pastel' -%}{%- assign hex = '#f3d9d2' -%}
                  {%- when 'chocolate' -%}{%- assign hex = '#6b4a3a' -%}
                  {%- when 'burdeos' -%}{%- assign hex = '#6e1f2e' -%}
                  {%- else -%}{%- assign hex = '#c9bca8' -%}
                {%- endcase -%}
                <button type="button" class="swatch{% if option.selected_value == value %} swatch--selected{% endif %}" data-value="{{ value | escape }}" style="background:{{ hex }}" aria-label="{{ value }}" aria-pressed="{% if option.selected_value == value %}true{% else %}false{% endif %}"></button>
              {%- endfor -%}
            </div>
          </div>
        {%- endif -%}
      {%- endfor -%}

      {%- for option in product.options_with_values -%}
        {%- if option.name == 'Talla' or option.name == 'Size' -%}
          {%- assign opt_idx = option.position | minus: 1 -%}
          <div class="sizes">
            <div class="sizes__head">
              <span class="sizes__label">Talla</span>
              <a href="{{ routes.root_url }}pages/tallas" class="sizes__guide">Guía de tallas</a>
            </div>
            <div class="sizes__list" id="sizes-list" role="radiogroup" aria-label="Selecciona talla">
              {%- for value in option.values -%}
                {%- liquid
                  assign available = false
                  for variant in product.variants
                    if variant.options[opt_idx] == value and variant.available
                      assign available = true
                      break
                    endif
                  endfor
                -%}
                <button type="button" class="size{% if option.selected_value == value %} size--selected{% endif %}{% unless available %} size--sold-out{% endunless %}" data-value="{{ value | escape }}" aria-pressed="{% if option.selected_value == value %}true{% else %}false{% endif %}" {% unless available %}disabled{% endunless %}>{{ value }}</button>
              {%- endfor -%}
            </div>
          </div>
        {%- endif -%}
      {%- endfor -%}

      <button type="submit" name="add" id="add-to-cart" class="add-to-cart" {% unless product.selected_or_first_available_variant.available %}disabled{% endunless %}>
        {%- if product.selected_or_first_available_variant.available -%}
          Añadir al carrito · {{ product.price | money }}
        {%- else -%}
          Agotado
        {%- endif -%}
      </button>
    {%- endform -%}

    {%- comment -%} DETAILS ACCORDION {%- endcomment -%}
    <div class="details">
      <details class="details__item" open>
        <summary class="details__summary">Tejido y origen</summary>
        <div class="details__body">
          {%- if desc_rest != blank -%}
            {{ desc_rest }}
          {%- else -%}
            <ul>
              <li><strong>Origen</strong>Cosido en Ibiza</li>
              <li><strong>Ética</strong>Sin productos de origen animal.</li>
            </ul>
          {%- endif -%}
        </div>
      </details>

      {%- if product.metafields.custom.care != blank -%}
        <details class="details__item">
          <summary class="details__summary">Cuidado</summary>
          <div class="details__body"><p>{{ product.metafields.custom.care }}</p></div>
        </details>
      {%- endif -%}

      <details class="details__item">
        <summary class="details__summary">Envío y devoluciones</summary>
        <div class="details__body">
          <ul>
            <li><strong>España</strong>24-48h · 4,90 € · gratis desde 80 €</li>
            <li><strong>Europa</strong>4-7 días · desde 12 €</li>
            <li><strong>Internacional</strong>7-14 días · desde 18 €</li>
            <li><strong>Devolución</strong>30 días · gratis en España</li>
          </ul>
        </div>
      </details>

      {%- if product.metafields.custom.notes != blank -%}
        <details class="details__item">
          <summary class="details__summary">Sobre la pieza</summary>
          <div class="details__body">{{ product.metafields.custom.notes }}</div>
        </details>
      {%- endif -%}
    </div>
  </aside>
</main>

{%- comment -%} RELATED {%- endcomment -%}
{%- assign related = collections.all.products -%}
{%- if related.size > 1 -%}
  <section class="related">
    <header class="related__head">
      <span class="related__supra">Resto de la colección</span>
      <h2 class="related__title">También te puede <em>gustar</em></h2>
    </header>
    <div class="related__grid">
      {%- assign count = 0 -%}
      {%- for r in related -%}
        {%- if r.handle != product.handle and count < 5 -%}
          {%- assign count = count | plus: 1 -%}
          <a href="{{ r.url }}" class="related__item">
            <div class="related__item-media">
              <img src="{{ r.featured_image | image_url: width: 600 }}" alt="{{ r.title | escape }}" loading="lazy">
              {%- if r.images[1] -%}<img src="{{ r.images[1] | image_url: width: 600 }}" alt="{{ r.title | escape }}" loading="lazy">{%- endif -%}
            </div>
            <span class="related__item-name">{{ r.title }}</span>
            <span class="related__item-price">{{ r.price | money }}</span>
          </a>
        {%- endif -%}
      {%- endfor -%}
    </div>
  </section>
{%- endif -%}

{%- comment -%} JSON-LD SEO {%- endcomment -%}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": {{ product.title | json }},
  "description": {{ product.description | strip_html | truncate: 300 | json }},
  "image": {{ product.featured_image | image_url: width: 1200 | prepend: 'https:' | json }},
  "sku": {{ product.selected_or_first_available_variant.sku | json }},
  "offers": {
    "@type": "Offer",
    "price": {{ product.price | divided_by: 100.0 | json }},
    "priceCurrency": {{ cart.currency.iso_code | json }},
    "availability": "{% if product.available %}https://schema.org/InStock{% else %}https://schema.org/OutOfStock{% endif %}",
    "url": {{ shop.url | append: product.url | json }}
  }
}
</script>

<script id="product-variants-data" type="application/json">{{ product.variants | json }}</script>
<script id="product-options-data" type="application/json">{{ product.options_with_values | json }}</script>

<script>
(function () {
  var variants = JSON.parse(document.getElementById('product-variants-data').textContent);
  var optionsData = JSON.parse(document.getElementById('product-options-data').textContent);
  var swatchesList = document.getElementById('swatches-list');
  var sizesList = document.getElementById('sizes-list');
  var colorName = document.getElementById('color-name');
  var priceEl = document.getElementById('info-price');
  var atc = document.getElementById('add-to-cart');
  var variantIdInput = document.getElementById('product-variant-id');
  var mainImg = document.getElementById('gallery-main-img');
  var thumbs = document.querySelectorAll('.gallery__thumb');

  function formatMoney(cents) {
    var euros = (cents / 100).toFixed(2).replace('.', ',');
    return euros.replace(/\B(?=(\d{3})+(?!\d))/g, '.') + ' €';
  }
  function getSelected() {
    var sel = [];
    optionsData.forEach(function (opt, i) {
      var c = (opt.name === 'Color' || opt.name === 'color') ? swatchesList : sizesList;
      if (!c) { sel[i] = opt.values[0]; return; }
      var active = c.querySelector('.swatch--selected, .size--selected');
      sel[i] = active ? active.getAttribute('data-value') : null;
    });
    return sel;
  }
  function findVariant(sel) {
    return variants.find(function (v) {
      return v.options.every(function (val, i) { return val === sel[i]; });
    });
  }
  function update() {
    var v = findVariant(getSelected());
    if (!v) { atc.disabled = true; atc.textContent = 'Selecciona talla'; return; }
    variantIdInput.value = v.id;
    if (priceEl) priceEl.textContent = formatMoney(v.price);
    if (v.available) { atc.disabled = false; atc.textContent = 'Añadir al carrito · ' + formatMoney(v.price); }
    else { atc.disabled = true; atc.textContent = 'Agotado'; }
    if (v.featured_image && mainImg) {
      var src = v.featured_image.src;
      var clean = src.indexOf('//') === 0 ? 'https:' + src : src;
      mainImg.classList.remove('is-active');
      setTimeout(function () { mainImg.src = clean; requestAnimationFrame(function () { mainImg.classList.add('is-active'); }); }, 180);
    }
  }
  if (swatchesList) {
    swatchesList.querySelectorAll('.swatch').forEach(function (sw) {
      sw.addEventListener('click', function () {
        swatchesList.querySelectorAll('.swatch').forEach(function (s) { s.classList.remove('swatch--selected'); s.setAttribute('aria-pressed', 'false'); });
        sw.classList.add('swatch--selected'); sw.setAttribute('aria-pressed', 'true');
        if (colorName) colorName.textContent = sw.getAttribute('data-value');
        update();
      });
    });
  }
  if (sizesList) {
    sizesList.querySelectorAll('.size:not(.size--sold-out)').forEach(function (sz) {
      sz.addEventListener('click', function () {
        sizesList.querySelectorAll('.size').forEach(function (s) { s.classList.remove('size--selected'); s.setAttribute('aria-pressed', 'false'); });
        sz.classList.add('size--selected'); sz.setAttribute('aria-pressed', 'true');
        update();
      });
    });
  }
  thumbs.forEach(function (t) {
    t.addEventListener('click', function () {
      var src = t.getAttribute('data-src');
      thumbs.forEach(function (x) { x.classList.remove('gallery__thumb--active'); x.setAttribute('aria-selected', 'false'); });
      t.classList.add('gallery__thumb--active'); t.setAttribute('aria-selected', 'true');
      mainImg.classList.remove('is-active');
      setTimeout(function () { mainImg.src = src; requestAnimationFrame(function () { mainImg.classList.add('is-active'); }); }, 180);
    });
  });
})();
</script>

{% schema %}
{
  "name": "Producto",
  "settings": []
}
{% endschema %}