/** Shopify CDN: Minification failed

Line 7:0 Unexpected "<"
Line 286:0 Unexpected "<"

**/
<style>
  .variant-cards-wrapper {
    margin: 2rem 0;
  }

  .variant-cards-title {
    margin-bottom: 2.2rem;
    font-size: calc(var(--font-heading-scale) * 1.72rem);
    color: rgb(var(--color-foreground));
    font-family: 'PPEN' !important;
    font-style: italic;
    text-transform: none;
    display: flex;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  .variant-cards-title::before,
  .variant-cards-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(var(--color-foreground), 0.3);
  }

  .variant-cards-promo-link {
    margin-bottom: 1.75rem;
    color: rgb(var(--color-foreground));
    line-height: 1.5;
  }

  .variant-cards-promo-link p {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
    line-height: calc(var(--font-heading-scale) * 1.8rem);
  }

  .variant-cards-promo-link a {
    color: rgb(var(--color-1));
    text-decoration: underline;
    font-weight: 600;
    transition: opacity 0.3s ease;
  }

  .variant-cards-promo-link a:hover {
    opacity: 0.7;
  }

  .variant-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  @media (max-width: 768px) {
    .variant-cards-container {
      gap: 0.75rem;
    }
  }

  .variant-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border: 2px solid rgba(var(--color-foreground), 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgb(var(--color-background));
    box-shadow: none;
    transform: scale(1.001);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .variant-card.selected,
  .variant-card.active {
    transform: scale(1.025) !important;
    border: 2px solid rgba(var(--color-1), 0.8);
    background-color: rgba(var(--color-1), 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  /*
  .variant-card.selected:active,
  .variant-card.active:active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }*/

  .variant-card input[type='radio'] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .variant-card-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 8px;
    white-space: nowrap;
    text-transform: capitalize;
    letter-spacing: 0.3px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .variant-card-badge.badge-style-1 {
    background: rgb(var(--color-1));
    color: rgb(var(--color-background));
    text-shadow: var(--white-text-shadow);
  }

  .variant-card-badge.badge-style-2 {
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    border: 1px solid rgba(var(--color-foreground), 0.3);
  }

  .variant-card-radio-circle {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--color-foreground), 0.3);
    border-radius: 50%;
    position: absolute;
    top: 1rem;
    right: 1rem;
    transition: all 0.3s ease;
  }

  .variant-card.selected .variant-card-radio-circle {
    border-color: rgb(var(--color-1));
    background: rgb(var(--color-1));
    box-shadow: inset 0 0 0 3px rgb(var(--color-background));
  }

  .variant-card-image {
    width: 100%;
    height: 120px;
    object-fit: contain;
    margin-bottom: 0rem;
    border-radius: 8px;
  }

  .variant-card-content {
    max-width: 130px;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0rem auto;
    flex: 1;
  }

  .variant-card-title {
    font-size: calc(var(--font-heading-scale) * 1.2rem);
    font-weight: 600;
    color: rgb(var(--color-foreground));
    padding-bottom: 1rem;
    line-height: 1.3;
    box-sizing: border-box;
  }

  .variant-card-title strong {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
    font-family: 'PPEN' !important;
    font-style: normal !important;
    font-weight: 300 !important;
  }

  .variant-card-title p,
  .variant-card-title ul,
  .variant-card-title ol,
  .variant-card-title div,
  .variant-card-title span,
  .variant-card-title h1,
  .variant-card-title h2,
  .variant-card-title h3,
  .variant-card-title h4,
  .variant-card-title h5,
  .variant-card-title h6,
  .variant-card-title * {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .variant-card-pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
    margin-top: 0rem;
    text-align: center;
  }

  .variant-card-price-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .variant-card-price {
    font-size: calc(var(--font-heading-scale) * 1.4rem);
    font-weight: 600;
    color: rgb(var(--color-foreground));
  }

  .variant-card-compare-price {
    font-size: calc(var(--font-heading-scale) * 1.4rem);
    color: rgba(var(--color-foreground), 1);
    text-decoration: none;
    position: relative;
  }

  .variant-card-compare-price::after {
  }

  .variant-card-savings-text {
    font-size: calc(var(--font-heading-scale) * 1.1rem);
    color: rgb(var(--color-foreground));
    font-weight: 400;
    white-space: nowrap;
    display: block;
  }

  .variant-card-free-shipping {
    align-items: center;
    gap: 0.25rem;
    font-size: calc(var(--font-heading-scale) * 1.1rem);
    color: rgb(var(--color-1));
    font-weight: 600;
    text-align: center;
    line-height: 1.35rem;
  }

  @media (max-width: 768px) {
    .variant-card {
      padding: 1rem 0.5rem;
    }

    .variant-card-content {
      display: flex;
      flex-direction: column;
      text-align: center;
    }

    /* 2026-09-11 (demande cliente) : ALIGNEMENT DES PRIX ENTRE LES CARTES.
       Les titres n'ont pas le meme nombre de lignes d'une carte a l'autre : la
       carte 1 tient sur 2 lignes, la carte 3 en prend 5 ou 6. Le bloc prix
       demarrait donc a une hauteur differente dans chaque carte, ce qui se
       voyait surtout sur mobile ou les colonnes sont etroites.
       Deux regles suffisent :
       1. margin-top auto ancre le bloc prix EN BAS de la carte. Les cartes
          d'une meme rangee de grille ont la meme hauteur, donc les prix se
          retrouvent sur la meme ligne quelle que soit la longueur du titre.
       2. min-height sur le badge livraison reserve sa ligne meme quand il est
          absent (le conteneur est toujours rendu, voir _snip_variant-card-item).
          Sans cela la carte 1, qui n'a pas ce badge, aurait son prix une ligne
          plus bas que les cartes 2 et 3.
       Le bureau n'est pas touche, tout est dans la media query. */
    .variant-card-pricing {
      margin-top: auto;
    }

    .variant-card-free-shipping {
      min-height: 1.35rem;
    }
  }
</style>