
  <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, #24361e 0%, #24361edd 50%, #24361e88 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">
        #24361e
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/ak/lines/afv-3rd-gen/paints/protective-green-1920s-1930s">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Protective Green 1920s-1930s
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        AFV (3rd Gen)
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/ak/lines/afv-3rd-gen/paints/protective-green-1920s-1930s">
        <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, #4b3229 0%, #4b3229dd 50%, #4b322988 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">
        Kimera Kolors
      </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">
        #4b3229
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/kimera-kolors/lines/kimera-kolors-expansion-set-1/paints/oxide-brown-dark">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Oxide Brown Dark
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Kimera Kolors Expansion Set 1
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/kimera-kolors/lines/kimera-kolors-expansion-set-1/paints/oxide-brown-dark">
        <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, #001121 0%, #001121dd 50%, #00112188 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">
        #001121
      </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/black-ink">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Black Ink
      </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/black-ink">
        <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, #413a59 0%, #413a59dd 50%, #413a5988 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">
        Folk Art
      </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">
        #413a59
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/folk-art/lines/metallics/paints/amethyst">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Amethyst
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Metallics
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/folk-art/lines/metallics/paints/amethyst">
        <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/2223/similar.turbo_stream?page=280&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>

  
