
  <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, #313e44 0%, #313e44dd 50%, #313e4488 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">
        Foundry
      </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">
        #313e44
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/foundry/lines/foundry-paint-system/paints/american-olive-green">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        American Olive Green
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Foundry Paint System
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/foundry/lines/foundry-paint-system/paints/american-olive-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, #013e2c 0%, #013e2cdd 50%, #013e2c88 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">
        #013e2c
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/vallejo/lines/panzer-aces/paints/german-tank-crew-i">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        German Tank Crew I
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Panzer Aces
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/vallejo/lines/panzer-aces/paints/german-tank-crew-i">
        <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, #44474c 0%, #44474cdd 50%, #44474c88 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">
        Army Painter
      </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">
        #44474c
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/army-painter/lines/speedpaint-set-2-0/paints/gravelord-grey">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Gravelord Grey
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Speedpaint Set 2.0
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/army-painter/lines/speedpaint-set-2-0/paints/gravelord-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, #0f3a04 0%, #0f3a04dd 50%, #0f3a0488 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">
        Apple Barrel
      </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">
        #0f3a04
      </div>
    </div>
  </div>

  <!-- Paint Information -->
  <div class="p-4">
    <!-- Paint Name & Product Line -->
    <a class="block group/link" href="/brands/apple-barrel/lines/colors/paints/meadow-green">
      <h3 class="font-bold text-base-content text-base mb-1 group-hover/link:text-primary transition-colors line-clamp-1">
        Meadow Green
      </h3>
      <div class="text-sm text-base-content/60 mb-3 line-clamp-1">
        Colors
      </div>
</a>
    <!-- Action Buttons -->
    <div class="flex gap-2">
      <a class="btn btn-outline btn-sm flex-1" href="/brands/apple-barrel/lines/colors/paints/meadow-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/1939/similar.turbo_stream?page=303&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>

  
