
  <turbo-stream action="remove" target="load-more-rgb"></turbo-stream>
  <turbo-stream action="append" target="similar-paints-frame-rgb"><template>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 py-2">
        <div class="similar-paint-item">
          <div class="group relative bg-base-100 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-base-300 hover:border-primary/20">
  <!-- Paint Color Preview - Hero Section -->
  <div class="relative aspect-[4/3] overflow-hidden">
    <!-- Main Color Display -->
    <div class="absolute inset-0 transition-transform duration-300 group-hover:scale-105"
         style="background: linear-gradient(135deg, #efd491 0%, #efd491dd 50%, #efd49188 100%);">
      <!-- Subtle overlay for better text readability -->
      <div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent"></div>
    </div>

    <!-- Collection Status Badge -->

    <!-- Quick Action Button -->

    <!-- Brand Badge -->
    <div class="absolute bottom-3 left-3">
      <div class="bg-base-100/80 backdrop-blur-sm px-2 py-1 rounded-md text-xs font-medium text-base-content shadow-sm">
        Scale75
      </div>
    </div>

    <!-- Color Hex Display -->
    <div class="absolute bottom-3 right-3">
      <div class="bg-base-100/80 backdrop-blur-sm px-2 py-1 rounded-md text-xs font-mono font-medium text-base-content shadow-sm">
        #efd491
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/scale75/lines/fantasy-games-range/paints/hykey-yellow">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Hykey Yellow
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Fantasy &amp; Games Range
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/scale75/lines/fantasy-games-range/paints/hykey-yellow">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
        </svg>
        View
</a>
    </div>
  </div>

  <!-- Hover Overlay for Enhanced Interactivity -->
  <div class="absolute inset-0 bg-gradient-to-t from-transparent via-transparent to-black/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
</div>

        </div>
        <div class="similar-paint-item">
          <div class="group relative bg-base-100 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-base-300 hover:border-primary/20">
  <!-- Paint Color Preview - Hero Section -->
  <div class="relative aspect-[4/3] overflow-hidden">
    <!-- Main Color Display -->
    <div class="absolute inset-0 transition-transform duration-300 group-hover:scale-105"
         style="background: linear-gradient(135deg, #f8d092 0%, #f8d092dd 50%, #f8d09288 100%);">
      <!-- Subtle overlay for better text readability -->
      <div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent"></div>
    </div>

    <!-- Collection Status Badge -->

    <!-- Quick Action Button -->

    <!-- Brand Badge -->
    <div class="absolute bottom-3 left-3">
      <div class="bg-base-100/80 backdrop-blur-sm px-2 py-1 rounded-md text-xs font-medium text-base-content shadow-sm">
        AK
      </div>
    </div>

    <!-- Color Hex Display -->
    <div class="absolute bottom-3 right-3">
      <div class="bg-base-100/80 backdrop-blur-sm px-2 py-1 rounded-md text-xs font-mono font-medium text-base-content shadow-sm">
        #f8d092
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/ak/lines/air-3rd-gen/paints/usmc-sand-fs-33711">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Usmc Sand Fs 33711
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Air (3rd Gen)
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/ak/lines/air-3rd-gen/paints/usmc-sand-fs-33711">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
        </svg>
        View
</a>
    </div>
  </div>

  <!-- Hover Overlay for Enhanced Interactivity -->
  <div class="absolute inset-0 bg-gradient-to-t from-transparent via-transparent to-black/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
</div>

        </div>
        <div class="similar-paint-item">
          <div class="group relative bg-base-100 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-base-300 hover:border-primary/20">
  <!-- Paint Color Preview - Hero Section -->
  <div class="relative aspect-[4/3] overflow-hidden">
    <!-- Main Color Display -->
    <div class="absolute inset-0 transition-transform duration-300 group-hover:scale-105"
         style="background: linear-gradient(135deg, #bbbab6 0%, #bbbab6dd 50%, #bbbab688 100%);">
      <!-- Subtle overlay for better text readability -->
      <div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent"></div>
    </div>

    <!-- Collection Status Badge -->

    <!-- Quick Action Button -->

    <!-- Brand Badge -->
    <div class="absolute bottom-3 left-3">
      <div class="bg-base-100/80 backdrop-blur-sm px-2 py-1 rounded-md text-xs font-medium text-base-content shadow-sm">
        AK
      </div>
    </div>

    <!-- Color Hex Display -->
    <div class="absolute bottom-3 right-3">
      <div class="bg-base-100/80 backdrop-blur-sm px-2 py-1 rounded-md text-xs font-mono font-medium text-base-content shadow-sm">
        #bbbab6
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/ak/lines/standard-3rd-gen/paints/sky-grey">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Sky Grey
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Standard (3rd Gen)
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/ak/lines/standard-3rd-gen/paints/sky-grey">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
        </svg>
        View
</a>
    </div>
  </div>

  <!-- Hover Overlay for Enhanced Interactivity -->
  <div class="absolute inset-0 bg-gradient-to-t from-transparent via-transparent to-black/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
</div>

        </div>
        <div class="similar-paint-item">
          <div class="group relative bg-base-100 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-base-300 hover:border-primary/20">
  <!-- Paint Color Preview - Hero Section -->
  <div class="relative aspect-[4/3] overflow-hidden">
    <!-- Main Color Display -->
    <div class="absolute inset-0 transition-transform duration-300 group-hover:scale-105"
         style="background: linear-gradient(135deg, #d2cf9a 0%, #d2cf9add 50%, #d2cf9a88 100%);">
      <!-- Subtle overlay for better text readability -->
      <div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent"></div>
    </div>

    <!-- Collection Status Badge -->

    <!-- Quick Action Button -->

    <!-- Brand Badge -->
    <div class="absolute bottom-3 left-3">
      <div class="bg-base-100/80 backdrop-blur-sm px-2 py-1 rounded-md text-xs font-medium text-base-content shadow-sm">
        Reaper
      </div>
    </div>

    <!-- Color Hex Display -->
    <div class="absolute bottom-3 right-3">
      <div class="bg-base-100/80 backdrop-blur-sm px-2 py-1 rounded-md text-xs font-mono font-medium text-base-content shadow-sm">
        #d2cf9a
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/reaper/lines/master-series-paints-core-colors/paints/bloodless-skin">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Bloodless Skin
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Master Series Paints Core Colors
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/reaper/lines/master-series-paints-core-colors/paints/bloodless-skin">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
        </svg>
        View
</a>
    </div>
  </div>

  <!-- Hover Overlay for Enhanced Interactivity -->
  <div class="absolute inset-0 bg-gradient-to-t from-transparent via-transparent to-black/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
</div>

        </div>
    </div>
      <div id="load-more-rgb" class="text-center py-6">
        <a class="btn btn-outline" href="/paints/2116/similar.turbo_stream?page=305&amp;per_page=4&amp;similar_type=rgb">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
          Load more
</a>      </div>
</template></turbo-stream>

  
