/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 18:0 Unexpected "<"
Line 20:5 Expected identifier but found "%"
Line 21:6 Unexpected "<"
Line 22:5 Expected identifier but found "%"
Line 23:6 Unexpected "<"
Line 24:5 Expected identifier but found "%"
Line 25:2 Unexpected "<"
Line 28:5 Expected identifier but found "%"
... and 57 more hidden warnings

**/
{%- assign product = section.settings.product -%}

<div class="featured-product-section">
  <div class="fp-media">
    {% if product and product.featured_image %}
      <img src="{{ product.featured_image | img_url: '800x' }}" alt="{{ product.title | escape }}">
    {% else %}
      <div class="fp-media--placeholder">Selecciona un producto en la configuración de la sección.</div>
    {% endif %}
  </div>

  <div class="fp-info">
    {% if product %}
      {% for block in section.blocks %}
        {% case block.type %}
          {% when 'subtitle' %}
            <div class="fp-subtitle">{{ block.settings.subtitle }}</div>

          {% when 'title' %}
            <h2 class="fp-title">{{ product.title }}</h2>

          {% when 'description' %}
            <div class="fp-description">{{ block.settings.desc_text }}</div>

          {% when 'price' %}
            <div class="fp-price">
              {% if product.compare_at_price > product.price %}
                <s>{{ product.compare_at_price | money }}</s>
              {% endif %}
              {{ product.price | money }}
            </div>

          {% when 'button' %}
            <form method="post" action="/cart/add">
              <input type="hidden" name="id" value="{{ product.variants.first.id }}">
              <button type="submit" class="fp-button">{{ block.settings.button_label }}</button>
            </form>

          {% when 'buy_now' %}
            <form method="post" action="/cart/add">
              <input type="hidden" name="id" value="{{ product.variants.first.id }}">
              <button type="submit" class="fp-button">{{ block.settings.button_label }}</button>
            </form>

          {% when 'logos' %}
            <div class="payment-logos">
              <img src="{{ 'pago-contraentrega.jpg' | asset_url }}" alt="Pago contra entrega">
              <img src="{{ 'pse.jpg' | asset_url }}" alt="PSE">
              <img src="{{ 'mastercard.jpg' | asset_url }}" alt="Mastercard">
              <img src="{{ 'visa.jpg' | asset_url }}" alt="Visa">
              <img src="{{ 'americanexpress.jpg' | asset_url }}" alt="American Express">
              <img src="{{ 'mercadopago.jpg' | asset_url }}" alt="Mercado Pago">
              <img src="{{ 'efecty.jpg' | asset_url }}" alt="Efecty">
              <img src="{{ 'nequi.jpg' | asset_url }}" alt="Nequi">
              <img src="{{ 'daviplata.jpg' | asset_url }}" alt="Daviplata">
            </div>
        {% endcase %}
      {% endfor %}
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "Destacado PLENUX",
  "settings": [
    { "type": "product", "id": "product", "label": "Seleccionar producto" }
  ],
  "blocks": [
    {
      "type": "subtitle",
      "name": "Subtítulo",
      "settings": [
        { "type": "text", "id": "subtitle", "label": "Texto subtítulo", "default": "CON PÉPTIDOS BIOACTIVOS" }
      ]
    },
    { "type": "title", "name": "Título", "settings": [] },
    {
      "type": "description",
      "name": "Descripción",
      "settings": [
        { "type": "richtext", "id": "desc_text", "label": "Texto descripción" }
      ]
    },
    { "type": "price", "name": "Precio", "settings": [] },
    {
      "type": "button",
      "name": "Botón agregar al carrito",
      "settings": [
        { "type": "text", "id": "button_label", "label": "Texto del botón", "default": "Agregar al carrito" }
      ]
    },
    {
      "type": "buy_now",
      "name": "Botón comprar ahora",
      "settings": [
        { "type": "text", "id": "button_label", "label": "Texto del botón", "default": "Comprar ahora" }
      ]
    },
    { "type": "logos", "name": "Logos de pago", "settings": [] }
  ],
  "presets": [
    { "name": "Destacado PLENUX", "category": "PLENUX" }
  ]
}
{% endschema %}

<style>
/* ===== Producto Destacado (ajustes visuales) ===== */
.featured-product-section{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin:60px 0;}
.featured-product-section .fp-media img{max-width:100%;height:auto;display:block;margin:0 auto;}
.fp-subtitle{font-size:14px;letter-spacing:1px;text-transform:uppercase;color:#555;margin-bottom:8px;}
.fp-title{font-size:40px;font-weight:700;margin-bottom:20px;line-height:1.2;}
.fp-description{font-size:16px;color:#444;margin-bottom:20px;}
.fp-price{font-size:22px;font-weight:600;margin-bottom:20px;}
.fp-price s{color:#888;margin-right:8px;}
.fp-button{width:100%;padding:14px 20px;font-size:16px;font-weight:600;border:2px solid #333;border-radius:12px;background:#fff;cursor:pointer;margin-bottom:12px;transition:all .2s ease;}
.fp-button:hover{background:#333;color:#fff;}
.payment-logos{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:25px;}
.payment-logos img{width:100%;max-height:42px;object-fit:contain;border:1px solid #ddd;border-radius:8px;padding:6px;background:#fff;}
@media (max-width:768px){
  .featured-product-section{grid-template-columns:1fr;text-align:center;}
  .fp-title{font-size:32px;}
  .fp-description{font-size:15px;}
  .fp-price{font-size:20px;}
  .payment-logos{grid-template-columns:repeat(3,1fr);justify-items:center;}
  .payment-logos img{max-height:36px;}
}
</style>

.payment-logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 20px;
  align-items: center;
}

.payment-logos img {
  width: 100%;
  max-height: 55px; /* aumenta altura */
  object-fit: contain;
  padding: 6px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 2px rgba(0,0,0,0.1);
}

/* Responsive */
@media (max-width: 1024px) {
  .payment-logos {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .payment-logos {
    grid-template-columns: repeat(3, 1fr); /* en 3 columnas en móvil */
  }
}

.barra-iconos {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  white-space: nowrap;
  animation: scroll-left 25s linear infinite;
}

.icono-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  min-width: max-content;
}

.icono-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: currentColor;
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}