/** Shopify CDN: Minification failed

Line 59:0 Unexpected "{"
Line 59:1 Expected identifier but found "%"
Line 59:67 Unexpected "{"
Line 59:68 Expected identifier but found "%"
Line 60:0 Unexpected "{"
Line 60:1 Expected identifier but found "%"
Line 62:0 Unexpected "{"
Line 62:1 Expected identifier but found "%"

**/


/* CSS from section stylesheet tags */
/* ——— Basis sectie & container ——— */
.asi-section{padding:0!important;margin:0!important}

/* ——— Desktop layout: heading links + logos rechts ——— */
.asi-row{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:28px;
}
.asi-heading{
  margin:0;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:14px;
  white-space:nowrap;
  opacity:.9;
}

/* LOGO-CONTAINER (desktop): 4 gelijke kolommen die de volledige breedte vullen */
.asi-logos{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  align-items:center;
  justify-items:center;
  gap: var(--gap, 36px);
}
.asi-logo{display:inline-flex;align-items:center;justify-content:center}

/* Logo’s desktopgrootte */
.asi-img{
  display:block;
  width:auto;
  height:28px;
  max-width:120px;
  object-fit:contain;
  opacity:.85;
  transition:opacity .2s ease, filter .2s ease;
  vertical-align:middle;
}

/* Optionele effecten */
{% if section.settings.grayscale %}.asi-img{filter:grayscale(100%)}{% endif %}
{% if section.settings.reduce_opacity %}
.asi-logo:hover .asi-img{opacity:1;filter:none}
{% endif %}

/* ——— Mobiel ——— */
@media (max-width:768px){
  .asi-row{grid-template-columns:1fr;row-gap:12px}
  .asi-heading{text-align:center;width:100%;margin:0 0 8px 0}

  /* Logo's onder heading, ook 4 kolommen maar kleiner */
  .asi-logos{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    justify-items:center;
    align-items:center;
  }

  /* OVERRIDE inline heights uit de img tag */
  .asi-img{
    height:auto !important;
    max-height:20px;
    max-width:70px;
    width:100%;
    object-fit:contain;
  }
}

/* Extra klein scherm */
@media (max-width:420px){
  .asi-img{max-height:18px;max-width:60px}
  .asi-logos{gap:10px}
}
/* ---------- Section spacing (theme-vriendelijk) ---------- */
.fv-section{
  padding-top:
    var(--section-padding-top,
    var(--vertical-breather,
    var(--section-vertical-spacing, 48px)));
  padding-bottom:
    var(--section-padding-bottom,
    var(--vertical-breather,
    var(--section-vertical-spacing, 48px)));
  font-family: var(--font-body-family);
}

/* ---------- Heading ---------- */
.fv-heading{
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  margin: 0;
  text-align: left;
}

.fv-grid{ display: grid; gap: 20px; }
@media (max-width: 768px){ .fv-grid{ grid-template-columns: repeat(2,1fr) !important; } }

/* ---------- Card ---------- */
.fv-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.fv-card:hover{ transform: translateY(-4px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }

/* ---------- Images + hover swap ---------- */
.fv-img-wrapper{ position: relative; width: 100%; overflow: hidden; border-radius: 6px; }
.fv-img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: contain;
  border-radius: 6px;
  transition: opacity .35s ease, transform .35s ease;
}
.fv-img--hover{
  position: absolute;
  inset: 0;
  opacity: 0;
}
.fv-card:hover .fv-img--hover{ opacity: 1; transform: scale(1.02); }
.fv-card:hover .fv-img--main{  opacity: 0; }

/* ---------- Texts ---------- */
.fv-title{ 
  font-family: var(--font-body-family); 
  font-weight: 600; 
  font-size: 15px; 
  line-height: 1.3; 
  /* ⭐ NEW: truncate after 2 lines ⭐ */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  padding: 0 12px;  /* <-- geeft breathing room links/rechts */
  margin-top: 8px;
  }
.fv-color{ font-family: var(--font-body-family); font-size: 14px; opacity: .7; }
.fv-price{ margin-top: 4px; font-family: var(--font-body-family); }

/* ---------- SALE kleur (volgt theme) ---------- */
.fv-now{
  color: var(--color-sale,
          var(--sale-price-color,
          var(--price-sale,
          var(--color-accent-2,#b92d2d))))) !important;
  font-weight: 700;
}
.fv-old{ text-decoration: line-through; opacity: .6; margin-left: 6px; }

/* ---------- Links ---------- */
.fv-link{ text-decoration: none; color: inherit; display: block; }