/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:30 Unexpected "("
Line 24:1 Expected identifier but found "%"
Line 26:0 Unexpected "{"
Line 26:1 Expected identifier but found "%"
Line 28:0 Unexpected "<"
Line 37:9 Expected identifier but found "%"
Line 39:9 Expected identifier but found "%"
Line 40:8 Unexpected "{"
... and 62 more hidden warnings

**/
{%- comment -%}
  Produktkort uden rabatbadge ("Spar xx DKK").
  Denne version viser:
  - Primært billede (og sekundært billede ved hover hvis aktiveret i temaet)
  - Titel
  - Pris og eventuel førpris (compare_at_price)
  - Link til produktet
  - Ingen "Spar xx DKK" badge
{%- endcomment -%}

{%- assign product = card_product | default: product -%}

<div class="product-card" data-product-id="{{ product.id }}">
  <a
    class="product-card__inner"
    href="{{ product.url }}"
    aria-label="{{ product.title | escape }}"
  >
    <div class="product-card__media-wrapper">
      <div class="product-card__media">

        {%- comment -%}
          Primært billede
        {%- endcomment -%}
        {%- if product.featured_image -%}
          <img
            class="product-card__image product-card__image--primary"
            src="{{ product.featured_image | img_url: '600x' }}"
            alt="{{ product.featured_image.alt | escape }}"
            loading="lazy"
          >
        {%- endif -%}

        {%- comment -%}
          Sekundært billede (fx ved hover) hvis tilgængeligt og slået til.
          Hvis dit tema ikke bruger det her, gør det ikke noget.
        {%- endcomment -%}
        {%- if show_secondary_image and product.images.size > 1 -%}
          <img
            class="product-card__image product-card__image--secondary"
            src="{{ product.images[1] | img_url: '600x' }}"
            alt="{{ product.images[1].alt | escape }}"
            loading="lazy"
          >
        {%- endif -%}

        {%- comment -%}
          VIGTIGT:
          Normalt ville temaet her indsætte en badge til tilbud, fx:
          {% if product.compare_at_price > product.price %}
            <span class="product-card__badge--sale">Spar ...</span>
          {% endif %}

          Det er nu fjernet helt.
        {%- endcomment -%}

      </div>
    </div>

    <div class="product-card__info">
      {%- comment -%}
        Produkt titel
      {%- endcomment -%}
      <h3 class="product-card__title">
        {{ product.title | escape }}
      </h3>

      {%- comment -%}
        Pris-sektion.
        Viser:
        - NU pris
        - Førpris (gennemstreget) hvis der er compare_at_price
        Men ingen badge.
      {%- endcomment -%}
      <div class="product-card__price">
        {%- if product.price_varies -%}
          <span class="price price--from">
            {{ 'products.product.from_price_html' | t: price: product.price | default: product.price | money }}
          </span>
        {%- else -%}
          <span class="price price--current">
            {{ product.price | money }}
          </span>
        {%- endif -%}

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

      {%- comment -%}
        Her kan der ligge ekstra info, fx badges som "Produceret i DK", "OEKO-TEX®"
        Hvis dit tema viser sådan en bar under kortet, kan du sætte din egen markup ind her igen.
      {%- endcomment -%}
      {%- if product.metafields.custom and product.metafields.custom.badge_bar != blank -%}
        <div class="product-card__meta-badges">
          {{ product.metafields.custom.badge_bar }}
        </div>
      {%- endif -%}

    </div>
  </a>
</div>

<style>
/* Basic styling hooks så kortet ikke går i stykker når vi fjerner rabat-badgen */
.product-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-card__inner {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-card__media-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: #f7f7f7;
}

.product-card__media {
  position: relative;
  width: 100%;
}

.product-card__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.product-card__image--secondary {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .2s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__inner:hover .product-card__image--secondary {
  opacity: 1;
}

.product-card__inner:hover .product-card__image--primary {
  opacity: 0;
}

.product-card__info {
  margin-top: 12px;
  line-height: 1.4;
}

.product-card__title {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 4px 0;
  color: #000;
}

.product-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  color: #000;
}

.price--current {
  font-weight: 600;
}

.price--compare {
  font-size: 13px;
  color: #666;
  text-decoration: line-through;
}

/* Sikrer at evt. gamle sale-badges fra temaet ikke popper frem via JS */
.product-card__badge--sale,
.product-card .badge--sale,
.badge--sale,
.product-card__badge--discount {
  display: none !important;
}
</style>
