
  <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, #41472d 0%, #41472ddd 50%, #41472d88 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">
        #41472d
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/ak/lines/air/paints/interior-green">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Interior Green
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Air
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/ak/lines/air/paints/interior-green">
        <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, #2a3235 0%, #2a3235dd 50%, #2a323588 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">
        Monument
      </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">
        #2a3235
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/monument/lines/monument-pro-acrylic-paints/paints/dark-neutral-grey">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Dark Neutral Grey
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Monument Pro Acrylic Paints
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/monument/lines/monument-pro-acrylic-paints/paints/dark-neutral-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, #334012 0%, #334012dd 50%, #33401288 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">
        Tamiya
      </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">
        #334012
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/tamiya/lines/acrylics-mini-flat/paints/olive-drab-jgsdf">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Olive drab (JGSDF)
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Acrylics Mini Flat
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/tamiya/lines/acrylics-mini-flat/paints/olive-drab-jgsdf">
        <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, #3e4f3c 0%, #3e4f3cdd 50%, #3e4f3c88 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">
        Vallejo
      </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">
        #3e4f3c
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/vallejo/lines/xpress-color/paints/commando-green">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Commando Green
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Xpress Color
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/vallejo/lines/xpress-color/paints/commando-green">
        <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/2333/similar.turbo_stream?page=202&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>

  
