/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'component-card.css'"
Line 17:0 Unexpected "{"
Line 17:1 Unexpected "{"
Line 17:3 Expected identifier but found "'component-price.css'"
Line 18:0 Unexpected "{"
Line 18:1 Unexpected "{"
Line 18:3 Expected identifier but found "'section-related-products.css'"
Line 20:0 Unexpected "{"
... and 78 more hidden warnings

**/
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'section-related-products.css' | asset_url | stylesheet_tag }}

{% if section.settings.image_shape == 'blob' %}
  {{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}

{%- style -%}
  .section-{{ section.id }}-padding {
    --columns-mobile: {{ section.settings.columns_mobile }};
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  .skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .skeleton-card__image,
  .skeleton-card__title,
  .skeleton-card__price {
    background: linear-gradient(90deg, #eeeeee 0%, #f5f5f5 50%, #eeeeee 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
  }

  .skeleton-card__image {
    width: 100%;
    aspect-ratio: {% if section.settings.image_ratio == 'square' %}1 / 1{% elsif section.settings.image_ratio == 'portrait' %}3 / 4{% else %}1 / 1{% endif %};
  }

  .skeleton-card__title {
    height: 14px;
    width: 75%;
  }

  .skeleton-card__price {
    height: 14px;
    width: 40%;
  }

  @keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  product-recommendations .grid {
    animation: fade-in-products 0.3s ease-out;
  }

  @keyframes fade-in-products {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <product-recommendations
    class="related-products page-width section-{{ section.id }}-padding isolate{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
    data-url="{{ routes.product_recommendations_url }}?limit={{ section.settings.products_to_show }}"
    data-section-id="{{ section.id }}"
    data-product-id="{{ product.id }}"
  >
    {% if recommendations.performed and recommendations.products_count > 0 %}
      <h2 class="related-products__heading uppercase related-products__heading-{{ section.settings.heading_alignment }} inline-richtext {{ section.settings.heading_size }}">
        {{ section.settings.heading }}
      </h2>
      <ul
        class="grid product-grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down"
        role="list"
      >
        {% assign skip_card_product_styles = false %}
        {% for recommendation in recommendations.products %}
          <li class="grid__item">
            {% render 'card-product',
              card_product: recommendation,
              media_aspect_ratio: section.settings.image_ratio,
              image_shape: section.settings.image_shape,
              show_secondary_image: section.settings.show_secondary_image,
              show_vendor: section.settings.show_vendor,
              show_rating: section.settings.show_rating,
              skip_styles: skip_card_product_styles
            %}
          </li>
          {%- assign skip_card_product_styles = true -%}
        {% endfor %}
      </ul>
    {% else %}
      <h2 class="related-products__heading uppercase related-products__heading-{{ section.settings.heading_alignment }} inline-richtext {{ section.settings.heading_size }}">
        {{ section.settings.heading }}
      </h2>
      <ul
        class="grid product-grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down"
        role="list"
        aria-hidden="true"
      >
        {% for i in (1..section.settings.products_to_show) %}
          <li class="grid__item">
            <div class="skeleton-card">
              <div class="skeleton-card__image"></div>
              <div class="skeleton-card__title"></div>
              <div class="skeleton-card__price"></div>
            </div>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </product-recommendations>
  {% if section.settings.image_shape == 'arch' %}
    {{ 'mask-arch.svg' | inline_asset_content }}
  {%- endif -%}
</div>

{% schema %}
... (keep your existing schema, no changes needed)
{% endschema %}