/** Shopify CDN: Minification failed

Line 129:0 Unexpected "("
Line 130:2 Comments in CSS use "/* ... */" instead of "//"
Line 144:4 Comments in CSS use "/* ... */" instead of "//"
Line 148:6 Comments in CSS use "/* ... */" instead of "//"
Line 155:2 Comments in CSS use "/* ... */" instead of "//"

**/
.perso-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60}
.perso-modal{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);background:#fff;z-index:61;max-width:900px;width:92%;box-shadow:0 10px 40px rgba(0,0,0,.2);padding:24px}
.perso-close{position:absolute;top:8px;right:12px;font-size:28px;line-height:1;border:0;background:transparent;cursor:pointer}
.perso-modal__content{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.perso-modal__text h2{letter-spacing:.06em;margin:0 0 8px}
.perso-input{width:100%;padding:12px;border:1px solid #2b463b;letter-spacing:.2em;text-transform:uppercase}
.perso-cta{margin-top:12px;width:100%;padding:14px 16px;background:#2b463b;color:#fff;border:0;cursor:pointer}
.perso-error{color:#8b0000;margin:.5rem 0 0;font-size:.9rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media (max-width: 749px){
  /* Ordre mobile : texte puis image puis boutons (comme ta maquette) */
  .perso-modal{padding:16px}
  .perso-modal__content{grid-template-columns:1fr}
  .perso-modal__image{order:2}
  .perso-modal__text{order:1}
  .perso-cta{order:3}
}
/* Bouton "Complimentary personnalisation" */
#open-perso {
  width: 100%;
  display: block;
  background: #fff;            /* fond blanc */
  color: #2b463b;              /* texte vert */
  border: 1px solid #2b463b;   /* bordure verte */
  padding: 14px 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  transition: all 0.2s ease;
}

#open-perso:hover,
#open-perso:focus {
  background: #2b463b;         /* fond vert au survol */
  color: #fff;                 /* texte blanc */
}
/* 1) Croix : petite, toujours visible, noire */
.perso-close{
  top:10px;
  right:12px;
  font-size:18px;      /* ← plus petit */
  color:#111;          /* ← noir */
  opacity:1;           /* toujours visible */
  line-height:1;
}
.perso-close:hover,
.perso-close:focus{
  color:#111;          /* pas de changement au survol */
  opacity:1;
}

/* 2) Desktop : image à gauche, texte à droite */
.perso-modal__content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;
}
.perso-modal__image{ order:1; }
.perso-modal__text{  order:2; }

/* 3) Mobile : garder l’ordre texte → image → bouton (comme demandé) */
@media (max-width: 749px){
  .perso-modal__content{ grid-template-columns:1fr; }
  .perso-modal__image{ order:2; }
  .perso-modal__text{  order:1; }
  .perso-cta{          order:3; }
}
/* Forcer le style de la croix du popup */
#perso-modal .perso-close{
  position:absolute !important;
  top:10px !important;
  right:12px !important;
  width:28px !important;
  height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;

  font-size:22px !important;   /* taille plus petite */
  line-height:1 !important;
  color:#111 !important;        /* noir */
  opacity:1 !important;         /* toujours visible */
  z-index:2 !important;
  cursor:pointer !important;
}
#perso-modal .perso-close:hover,
#perso-modal .perso-close:focus{
  color:#111 !important;        /* pas de changement au survol */
  opacity:1 !important;
}
/* Styles des deux blocs texte du popup */
.perso-richtext{margin-bottom:12px}

.perso-text-lead p{
  margin:0 0 8px;
  font-family: inherit;     /* garde la police du thème */
  font-style: normal;       /* enlève tout italique */
  font-weight: 500;         /* un peu plus “fort” */
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;        /* pas d'espacement étrange */
  color: inherit;
}

.perso-text-note{
  font-family: inherit;
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  opacity:.85;
}
.perso-text-note p{margin:0}

(function () {
  // Récupère l’ID de variante actuellement sélectionnée (fiable sur tous les thèmes)
  function readCurrentVariantId() {
    const input = document.querySelector('form[action*="/cart/add"] [name="id"]');
    return input ? input.value : null;
  }

  function setPopupImageFromVariant() {
    const img = document.getElementById('perso-modal-img');
    if (!img) return;

    const map = window.PERSO_VARIANT_IMAGES || {};
    const fallback = window.PERSO_PRODUCT_IMAGE || null;
    const vid = readCurrentVariantId();

    // Choix : d’abord variante, sinon image produit, sinon rien
    const url = (vid && map[vid]) ? map[vid] : fallback;

    if (url) {
      // anti-cache CDN
      img.src = url + (url.includes('?') ? '&' : '?') + 'v=' + Date.now();
    } else {
      img.removeAttribute('src');
    }
  }

  // Met l’image AU MOMENT où on ouvre la fenêtre
  const openBtn = document.getElementById('open-perso');
  if (openBtn) {
    openBtn.addEventListener('click', () => {
      setTimeout(setPopupImageFromVariant, 0);
    });
  }
})();
.cart-item__property + .cart-item__note {
  font-style: italic !important;
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.75;
  line-height: 1.2;
}