
  <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, #6d796a 0%, #6d796add 50%, #6d796a88 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">
        Mr Hobby
      </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">
        #6d796a
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/mr-hobby/lines/mr-color/paints/gray-fs36231">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Gray Fs36231
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Mr Color
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/mr-hobby/lines/mr-color/paints/gray-fs36231">
        <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, #acabb1 0%, #acabb1dd 50%, #acabb188 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">
        Arteza
      </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">
        #acabb1
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/arteza/lines/acrylic-premium-paints/paints/silver">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Silver
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Acrylic Premium Paints
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/arteza/lines/acrylic-premium-paints/paints/silver">
        <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, #667177 0%, #667177dd 50%, #66717788 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">
        Mr Paint
      </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">
        #667177
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/mr-paint/lines/mr-paint/paints/ocean-grey-fs36173">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Ocean Grey FS36173
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Mr Paint
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/mr-paint/lines/mr-paint/paints/ocean-grey-fs36173">
        <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, #bb9f84 0%, #bb9f84dd 50%, #bb9f8488 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">
        Citadel Colour
      </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">
        #bb9f84
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/citadel-colour/lines/layer/paints/sycorax-bronze">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Sycorax Bronze
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Layer
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/citadel-colour/lines/layer/paints/sycorax-bronze">
        <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/2093/similar.turbo_stream?page=308&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>

  
