/** Shopify CDN: Minification failed

Line 395:0 Unexpected "<"
Line 560:0 Unexpected "<"
Line 565:32 Unexpected "{"
Line 565:41 Expected ":"
Line 565:89 Unexpected "<"
Line 566:11 Unexpected "{"
Line 566:20 Expected ":"
Line 566:93 Unexpected "<"
Line 567:10 Unexpected "{"
Line 567:19 Expected ":"
... and 56 more hidden warnings

**/
/* ─── NUTRAROOTS THEME CSS ─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-primary: #2C4A3E;
  --color-gold: #C8A96E;
  --color-cream: #FAF7F2;
  --color-text: #1A1A1A;
  --color-muted: #6B6B6B;
  --color-border: #E8E0D5;
  --color-white: #ffffff;
  --shadow: 0 4px 24px rgba(44,74,62,0.08);
  --shadow-lg: 0 12px 48px rgba(44,74,62,0.14);
  --transition: all 0.25s ease;
  --radius: 12px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', sans-serif;
  background: var(--color-cream);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─── TYPOGRAPHY ───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  line-height: 1.2;
}

/* ─── BUTTONS ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 4px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: #1e3329;
  border-color: #1e3329;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44,74,62,0.2);
}
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover {
  background: var(--color-primary);
  color: white;
}
.btn-gold {
  background: var(--color-gold);
  color: white;
  border-color: var(--color-gold);
}
.btn-gold:hover {
  background: #b8935a;
  border-color: #b8935a;
}

/* ─── SECTION LABEL ─────────────────────────────────────────────────────── */
.section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 16px;
  display: block;
}

/* ─── LINKS ─────────────────────────────────────────────────────────────── */
a { color: inherit; }

/* ─── IMAGES ────────────────────────────────────────────────────────────── */
img { max-width: 100%; height: auto; display: block; }

/* ─── SKIP LINK ─────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--color-primary);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  z-index: 9999;
  font-size: 0.85rem;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* ─── SCROLLBAR ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-muted); }

/* ─── COLLECTION PAGE ───────────────────────────────────────────────────── */
.collection-page {
  padding: 64px 0 100px;
  background: var(--color-cream);
}
.collection-page-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.collection-header {
  margin-bottom: 56px;
}
.collection-header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 400;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.collection-header p {
  font-size: 1rem;
  color: var(--color-muted);
  max-width: 560px;
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) {
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .collection-grid { grid-template-columns: 1fr; }
  .collection-page { padding: 40px 0 72px; }
}

/* ─── RESPONSIVE HELPERS ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

.cart-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn-view-cart {
  flex: 1;
  display: block;
  text-align: center;
  padding: 16px;
  border: 0.8px solid #2d4a3e;
  border-radius: 4px;
  text-decoration: none;
  font-family: Outfit, sans-serif;
  font-size: 14.4px;
  font-weight: 600;
  letter-spacing: 0.864px;
  color: #2d4a3e;
  background: transparent;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  box-sizing: border-box;
}

.btn-checkout {
  flex: 1;
}


/* Afgeronde productafbeeldingen op collectiepagina */
.card__media img,
.card__media,
.product-card__image img {
  border-radius: 12px; /* pas aan naar wens */
  overflow: hidden;
}


.product-card__image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}

.product-card__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.collection-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: 12px;
}

.collection-page {
  padding-top: 40px;
  padding-bottom: 40px;
}

.product-pack-info {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 0px;
}








/* ─── PRODUCT CARD ──────────────────────────────────────────────────────── */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.product-card__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-cream);
  position: relative;
}
.product-card__image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 0;
  transition: transform 0.4s ease;
}
.product-card:hover .product-card__image img {
  transform: scale(1.04);
}

.product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
}
.product-card__badge--gold {
  background: var(--color-gold);
  color: var(--color-white);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
  gap: 8px;
}

.product-card__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1.3;
}

.product-card__desc {
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.5;
  flex: 1;
}

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  gap: 12px;
}

.product-card__price {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-card__price s {
  font-weight: 400;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.product-card__form { margin: 0; }

.product-card__add {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.product-card__add:hover {
  background: var(--color-gold);
  transform: scale(1.1);
}











<style>
  .featured-products {
    padding: 40px 0;
    background: var(--color-cream);
  }
  .featured-products .section-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
  }
  .featured-products .section-header {
    text-align: center;
    margin-bottom: 48px;
  }
  .featured-products .section-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 16px;
    display: block;
  }
  .featured-products .section-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 400;
    color: var(--color-primary);
    margin-bottom: 16px;
  }
  .featured-products .section-header p {
    font-size: 1rem;
    color: var(--color-muted);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
  }
  .featured-products .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .featured-products .product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
  }
  .featured-products .product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(44,74,62,0.12);
  }
  .featured-products .product-card__image {
    aspect-ratio: 4/3;
    background: #e8e0d0;
    overflow: hidden;
    position: relative;
  }
  .featured-products .product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
  }
  .featured-products .product-card:hover .product-card__image img {
    transform: scale(1.04);
  }
  .featured-products .product-card__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: linear-gradient(135deg, #e8e0d0, #d4c8b0);
  }
  .featured-products .product-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--color-primary);
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 50px;
    font-family: 'Outfit', sans-serif;
  }
  .featured-products .product-card__badge--gold {
    background: var(--color-gold);
  }
  .featured-products .product-card__body {
    padding: 12px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .featured-products .product-card__name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 4px;
  }
  .featured-products .product-card__desc {
    font-size: 0.78rem;
    color: var(--color-muted);
    line-height: 1.5;
    margin-bottom: 12px;
    flex: 1;
  }
  .featured-products .product-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .featured-products .product-card__price {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary);
  }
  .featured-products .product-card__price s {
    font-size: 0.78rem;
    color: var(--color-muted);
    font-weight: 400;
    margin-right: 4px;
  }
  .featured-products .product-card__add {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
  }
  .featured-products .product-card__add:hover {
    background: var(--color-gold);
    transform: scale(1.1);
  }
  .featured-products .view-all-wrap {
    text-align: center;
    margin-top: 40px;
  }
  @media (max-width: 1024px) {
    .featured-products .products-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .featured-products .products-grid { grid-template-columns: 1fr; }
    .featured-products { padding: 32px 0 56px; }
  }
</style>

<section class="featured-products">
  <div class="section-inner">
    <div class="section-header">
      <p class="section-label">{{ section.settings.label | default: 'Onze bestsellers' }}</p>
      <h2>{{ section.settings.heading | default: 'Koreaanse supergranen voor jouw routine' }}</h2>
      <p>{{ section.settings.subheading | default: 'Van onze bestseller Misugaru Original, tot Misugaru Plant Protein, Misugaru Dark Blend en Oats — voed je lichaam met het beste van Korea.' }}</p>
    </div>

    <div class="products-grid">
      {%- for block in section.blocks -%}
        {%- if block.type == 'product' -%}
          {%- assign product = block.settings.product -%}
          <a href="{{ product.url }}" class="product-card">
            <div class="product-card__image">
              {%- if product.featured_image -%}
                <img src="{{ product.featured_image | img_url: '600x600' }}" alt="{{ product.title | escape }}">
              {%- else -%}
                <div class="product-card__image-placeholder">🌿</div>
              {%- endif -%}
              {%- if block.settings.badge != blank -%}
                <span class="product-card__badge product-card__badge--gold">{{ block.settings.badge }}</span>
              {%- endif -%}
            </div>
            <div class="product-card__body">
              <div class="product-card__name">{{ product.title }}</div>
              {%- assign card_desc = product.metafields.custom.card_beschrijving.value -%}
              {%- if card_desc != blank -%}
                <div class="product-card__desc">{{ card_desc }}</div>
              {%- elsif product.description != blank -%}
                <div class="product-card__desc">{{ product.description | strip_html | truncate: 80 }}</div>
              {%- endif -%}
              <div class="product-card__footer">
                <div class="product-card__price">
                  {%- if product.compare_at_price > product.price -%}
                    <s>{{ product.compare_at_price | money }}</s>
                  {%- endif -%}
                  {{ product.price | money }}
                </div>
                <button class="product-card__add" aria-label="Toevoegen aan winkelwagen"
                  data-product-id="{{ product.variants.first.id }}">+</button>
              </div>
            </div>
          </a>
        {%- endif -%}
      {%- endfor -%}
    </div>

    <div class="view-all-wrap">
      <a href="/collections/van-ochtend-tot-avond" class="btn btn-outline">Bekijk alle producten</a>
    </div>
  </div>
</section>

<script>
  document.querySelectorAll('.featured-products .product-card__add').forEach(btn => {
    btn.addEventListener('click', async function(e) {
      e.preventDefault();
      const variantId = this.dataset.productId;
      this.textContent = '✓';
      this.style.background = '#2a7a4f';
      await fetch('/cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: variantId, quantity: 1 })
      });
      setTimeout(() => {
        this.textContent = '+';
        this.style.background = '';
        document.getElementById('cart-drawer')?.classList.add('is-open');
        document.getElementById('cart-overlay')?.classList.add('is-open');
        document.body.style.overflow = 'hidden';
      }, 800);
    });
  });
</script>

{% schema %}
{
  "name": "Uitgelichte Producten",
  "settings": [
    { "type": "text", "id": "label", "label": "Label", "default": "Onze bestsellers" },
    { "type": "text", "id": "heading", "label": "Koptekst" },
    { "type": "textarea", "id": "subheading", "label": "Subtekst" }
  ],
  "blocks": [
    {
      "type": "product",
      "name": "Product",
      "settings": [
        { "type": "product", "id": "product", "label": "Product" },
        { "type": "text", "id": "badge", "label": "Badge tekst (optioneel)" }
      ]
    }
  ],
  "max_blocks": 6,
  "presets": [{ "name": "Uitgelichte Producten" }]
}
{% endschema %}