/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 196:0 Unexpected "<"
Line 201:7 Expected identifier but found "%"
Line 202:8 Unexpected "<"
Line 202:41 Unexpected "{"
Line 202:48 Expected ":"
Line 203:10 Unexpected "<"
Line 204:13 Expected identifier but found "%"
Line 205:14 Unexpected "<"
Line 206:17 Expected identifier but found "%"
... and 35 more hidden warnings

**/
<style>
  /* 1. Assistant Schriftart von Google Fonts laden */
  @import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;700&display=swap');

  /* Schriftart auf den gesamten Section-Inhalt anwenden */
  .category-grid-section * {
    font-family: 'Assistant', sans-serif !important;
  }
  
  /* 2. Generelle Einstellungen: 1px Rahmen und volle Breite */
  .category-grid-section {
    margin: 0 !important;
    background-color: white; /* Hintergrund ist weiß für die Trennlinien */
  }
    
  /* Erzwingt volle Breite und entfernt den Standard-Innenabstand des Dawn Themes */
  .category-grid-section .page-width {
    max-width: 100% !important; 
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ****************************************************************** */
  /* PC-Layout: Randlos Außen, 1px Trennung Vertikal */
  /* ****************************************************************** */
  .category-grid-section {
    /* PC: Äußerer 1px Rahmen Oben/Unten (Links/Rechts randlos) */
    padding: 1px 0 !important; 
  }
  
  .category-grid-container {
    display: flex;
    gap: 0; 
    margin: 0;
    padding: 0; 
  }

  /* PC: Der 1px Trenn-Effekt ZWISCHEN den Spalten (0.5px links + 0.5px rechts) */
  .category-grid-item {
    flex: 1 1 33.33%;
    text-align: center;
    overflow: hidden;
    padding: 0 0.5px; 
    position: relative; 
  }
  
  .category-grid-container > .category-grid-item:first-child {
    padding-left: 0; 
  }
  
  .category-grid-container > .category-grid-item:last-child {
    padding-right: 0;
  }

  /* ****************************************************************** */
  /* TEXT-OVERLAY STYLING */
  /* ****************************************************************** */
  .category-grid-content {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    align-items: flex-start; 
    
    padding: 20px; 
    z-index: 10;
    text-align: left; 
    
    background-color: rgba(0, 0, 0, 0.1); 
    transition: background-color 0.3s ease;
  }
  
  /* *************************************************************** */
  /* PC HOVER EFFEKTE (Bleiben aktiv auf dem PC) */
  /* *************************************************************** */
  .category-grid-link:hover .category-grid-content {
      background-color: rgba(0, 0, 0, 0.2);
  }

  .category-grid-link:hover .category-grid-button {
      background-color: white;
      color: black !important;
  }
  /* *************************************************************** */


  .category-grid-title {
    color: white !important; 
    margin: 0 0 5px 0; 
    font-size: 1.5rem; 
    font-weight: 700; 
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
    width: 100%; 
  }

  /* Button/Call-to-Action */
  .category-grid-button {
    color: white !important; 
    display: block; 
    padding: 10px 20px;
    margin-top: 15px;
    margin-bottom: 0; 
    font-size: 0.9em;
    font-weight: 600; 
    
    border: 1px solid white; 
    
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
    text-align: center; 
    max-width: fit-content; 
  }

  /* Bild-Wrapper - Hochformat (4:5 Verhältnis) */
  .category-grid-image-wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 125%; 
    height: 0;
  }

  .category-grid-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* ****************************************************************** */
  /* Mobil-Layout: Randlos Links/Rechts, nur 1px Trennung Vertikal */
  /* ****************************************************************** */
  @media screen and (max-width: 749px) {
    /* Äußerer Rahmen des Gesamtblocks: Nur Oben und Unten */
    .category-grid-section {
      padding-top: 1px !important;
      padding-bottom: 1px !important;
      padding-left: 0 !important; 
      padding-right: 0 !important;
    }
      
    .category-grid-container {
      flex-direction: column; 
      gap: 0 !important; 
      padding: 0 !important; 
      margin: 0 !important;
    }

    /* Vertikale Trennung (1px) zwischen den gestapelten Bildern */
    .category-grid-item {
      padding: 0 !important; 
      margin: 0 !important;
      border-top: 1px solid white; 
    }
    
    .category-grid-container > .category-grid-item:first-child {
        border-top: none;
    }
    
    .category-grid-content {
      padding: 15px !important; 
      
      /* NEU: Deaktiviert den Abdunkel-Effekt auf Mobil */
      background-color: rgba(0, 0, 0, 0.1) !important; 
    }
      
    /* NEU: Deaktiviert den Button-Farbumschlag auf Mobil */
    .category-grid-link:active .category-grid-button {
        background-color: transparent !important;
        color: white !important;
    }
  }
</style>

<div class="category-grid-section">
  <div class="page-width">
    <div class="category-grid-container">
      {% for block in section.blocks %}
        <div class="category-grid-item" {{ block.shopify_attributes }}>
          <a href="{{ block.settings.link }}" class="category-grid-link">
            {% if block.settings.image != blank %}
              <div class="category-grid-image-wrapper">
                {% assign image_url = block.settings.image | image_url: width: 1100 %}
                <img src="{{ image_url }}" 
                     alt="{{ block.settings.title | escape }}" 
                     loading="lazy" 
                     sizes="(min-width: 750px) 33vw, 100vw" 
                     srcset="{{ block.settings.image | image_url: width: 550 }} 550w,
                             {{ block.settings.image | image_url: width: 800 }} 800w,
                             {{ block.settings.image | image_url: width: 1100 }} 1100w,
                             {{ block.settings.image | image_url: width: 1600 }} 1600w">
              </div>
            {% endif %}
            
            <div class="category-grid-content">
              {% if block.settings.title != blank %}
                <h3 class="category-grid-title">{{ block.settings.title | escape }}</h3>
              {% endif %}
              {% if block.settings.button_text != blank %}
                <span class="category-grid-button">{{ block.settings.button_text | escape }}</span>
              {% endif %}
            </div>
          </a>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Kategorie-Grid (LFDY Overlay Style)",
  "blocks": [
    {
      "type": "category",
      "name": "Kategorie-Block",
      "limit": 3,
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Model-Bild (Hochformat empfohlen)"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Titel (z.B. T-SHIRTS)",
          "default": "T-SHIRTS"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button Text (z.B. SHOP NOW)",
          "default": "SHOP NOW"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link zur Kollektion/Seite"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "LFDY Style Grid (3 Spalten)",
      "category": "Image",
      "blocks": [
        {
          "type": "category",
          "settings": {
            "title": "T-SHIRTS"
          }
        },
        {
          "type": "category",
          "settings": {
            "title": "HOODIES"
          }
        },
        {
          "type": "category",
          "settings": {
            "title": "ACCESSORIES"
          }
        }
      ]
    }
  ]
}
{% endschema %}