Trust Badge Row

{% comment %}
  Plynthr — Trust Badge Row
  https://plynthr.com/snippets/trust-badge-row/

  INSTALL:
  1. Create snippets/plynthr-trust-badges.liquid
  2. Paste this code
  3. Add {%- render 'plynthr-trust-badges' -%} in your product form,
     after the Add to Cart button

  CUSTOMIZE:
  - --ptb-gap for spacing between icons
  - --ptb-size for icon size
  - Add or remove SVG icons below
{% endcomment %}

<style>
  :root {
    --ptb-gap: 8px;
    --ptb-size: 38px;
    --ptb-opacity: 0.65;
    --ptb-opacity-hover: 1;
    --ptb-label-color: #999;
  }

  .plynthr-trust-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ptb-gap);
    margin: 12px 0;
  }

  .plynthr-trust-badges__label {
    width: 100%;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ptb-label-color);
    margin-bottom: 2px;
  }

  .plynthr-trust-badges svg {
    width: var(--ptb-size);
    height: calc(var(--ptb-size) * 0.63);
    opacity: var(--ptb-opacity);
    transition: opacity 0.2s;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 4px 6px;
    background: #fff;
  }

  .plynthr-trust-badges svg:hover {
    opacity: var(--ptb-opacity-hover);
  }
</style>

<div class="plynthr-trust-badges">
  <span class="plynthr-trust-badges__label">Secure payment</span>

  <!-- Visa -->
  <svg viewBox="0 0 48 32" fill="none">
    <rect width="48" height="32" rx="4" fill="#fff"/>
    <path d="M19.5 21h-3l1.9-11.5h3L19.5 21zm11.8-11.2c-.6-.2-1.5-.5-2.7-.5-3 0-5.1 1.5-5.1 3.7 0 1.6 1.5 2.5 2.6 3.1 1.2.6 1.6.9 1.6 1.4 0 .8-.9 1.1-1.8 1.1-1.2 0-1.8-.2-2.8-.6l-.4-.2-.4 2.4c.7.3 2 .6 3.3.6 3.2 0 5.2-1.5 5.2-3.8 0-1.3-.8-2.2-2.5-3-1-.5-1.7-.9-1.7-1.4 0-.5.5-1 1.7-1 1 0 1.7.2 2.2.4l.3.1.5-2.3z" fill="#1A1F71"/>
  </svg>

  <!-- Mastercard -->
  <svg viewBox="0 0 48 32" fill="none">
    <rect width="48" height="32" rx="4" fill="#fff"/>
    <circle cx="19" cy="16" r="8" fill="#EB001B"/>
    <circle cx="29" cy="16" r="8" fill="#F79E1B"/>
    <path d="M24 10.3a8 8 0 010 11.4 8 8 0 000-11.4z" fill="#FF5F00"/>
  </svg>

  <!-- PayPal -->
  <svg viewBox="0 0 48 32" fill="none">
    <rect width="48" height="32" rx="4" fill="#fff"/>
    <path d="M18.5 24.5h-2.8l.2-1.2 2.1-13.3h3.5c2.4 0 4 1.2 3.6 3.5-.5 3-2.8 4.2-5.2 4.2h-1.6l-.8 6.8z" fill="#003087"/>
    <path d="M22.5 22.5h-2.8l.2-1.2 2.1-11.3h3.5c2.4 0 4 1.2 3.6 3.5-.5 3-2.8 4.2-5.2 4.2h-1.6l-.8 4.8z" fill="#0070E0"/>
  </svg>

  <!-- Afterpay -->
  <svg viewBox="0 0 48 32" fill="none">
    <rect width="48" height="32" rx="4" fill="#fff"/>
    <path d="M10 20.5l6-9h4l-6 9H10zm18 0l6-9h4l-6 9H28z" fill="#B2FCE4"/>
    <circle cx="21" cy="16" r="3.5" fill="#B2FCE4"/>
  </svg>

  <!-- Shop Pay -->
  <svg viewBox="0 0 48 32" fill="none">
    <rect width="48" height="32" rx="4" fill="#5A31F4"/>
    <path d="M14 14.5c.5-2 2.2-3 4.2-3h1.3c.3 0 .5.2.5.5l-.3 2c0 .2-.2.3-.4.3h-1.5c-.8 0-1.3.5-1.4 1.1l-.5 3c0 .2-.2.3-.4.3h-2c-.3 0-.5-.3-.4-.5l.9-3.7z" fill="#fff"/>
    <path d="M28 13h2.5l-2 8h-2l-.5-3.5L24 21h-2l2.5-8h2l.5 3.5L28 13z" fill="#fff"/>
  </svg>
</div>