.product-image{position:relative}
.project-heart{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:40px;height:40px;border:1px solid #CFD5D9;border-radius:50%;background:#fffefbf2;color:var(--sp-bronze);box-shadow:0 2px 8px #30362e0a;z-index:1}
.project-heart svg{width:20px;height:20px}
.project-heart[aria-pressed=true]{background:#f1e6d5;border-color:#b99a6a}
.project-heart:hover{background:#f1e6d5}
.catalogue-views .project-open-button{display:flex;align-items:center;gap:6px;margin-left:auto;color:var(--sp-bronze);font-weight:500;white-space:nowrap}
.catalogue-views .project-open-button>svg{width:17px;height:17px}
.catalogue-views .project-open-button [data-project-count]{margin:0;min-width:21px;text-align:center}
html.project-open{overflow:hidden}
#project-dialog{width:min(880px,96vw);max-width:96vw;max-height:90dvh;padding:0;overflow:auto;border-radius:10px;background:var(--sp-papier)}
.project-heading{position:sticky;top:0;z-index:2;padding:30px 64px 21px 28px;border-bottom:1px solid var(--sp-ligne);background:var(--sp-papier)}
.project-heading .eyebrow{margin-bottom:9px}
.project-heading h2{font-size:28px}
.project-heading p:last-child{font-size:12px;line-height:1.6;color:var(--sp-gris);margin:10px 0 0}
.project-heading [data-project-close]{position:absolute;right:19px;top:19px;width:38px;height:38px;border-radius:50%;background:var(--sp-blanc);font-size:22px}
#project-items{padding:22px 28px 12px}
.project-item{display:grid;grid-template-columns:108px minmax(0,1fr) auto;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--sp-ligne)}
.project-item:first-child{padding-top:0}
.project-item:last-child{border-bottom:0}
.project-item-image{height:108px;padding:10px;background:white;border:1px solid var(--sp-craie);border-radius:6px;display:grid;place-items:center}
.project-item-image a{display:block;width:100%;height:100%}
.project-item-image img{display:block;width:100%;height:100%;object-fit:contain}
.project-item-image>svg{width:25px;height:25px;color:#b49c78}
.project-bmw{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--sp-bronze);margin:0 0 5px}
.project-item h3{font-size:15px;line-height:1.45;font-weight:500;margin:0 0 6px;overflow-wrap:anywhere}
.project-item h3 a:hover{text-decoration:underline}
.project-reference,.project-availability{font-size:11px;line-height:1.5;color:var(--sp-gris);margin:0 0 6px;overflow-wrap:anywhere}
.project-price{font-size:16px;font-weight:500;white-space:nowrap}
.project-item-actions{display:flex;flex-direction:column;align-items:stretch;gap:9px;max-width:180px}
.project-add{font-size:12px;padding:12px;background:var(--sp-bronze);color:var(--sp-blanc);border-radius:4px;text-align:center}
.project-add:hover{background:var(--sp-bronze);color:var(--sp-blanc)}
.project-add:disabled{opacity:.6;cursor:wait}
.project-remove{font-size:11px;padding:9px 2px;text-decoration:underline;text-underline-offset:3px;color:var(--sp-gris)}
#project-status{font-size:12px;line-height:1.6;color:var(--sp-bronze);padding:0 28px 22px;margin:0}
.project-empty{text-align:center;max-width:410px;margin:22px auto 38px}
.project-empty>svg{width:33px;height:33px;color:var(--sp-bronze);margin-bottom:17px}
.project-empty h3{font-size:21px;font-weight:500;margin-bottom:10px}
.project-empty p{font-size:13px;line-height:1.7;color:var(--sp-gris)}
.project-empty .primary{width:auto;margin:20px auto 0;padding:12px 22px}
@media(max-width:700px){
  .project-heart{width:36px;height:36px;right:7px;top:7px}
  .project-heart svg{width:18px;height:18px}
  .catalogue-views .project-open-button{margin-left:0;font-size:12px}
  #project-dialog{width:100%;max-width:100%;max-height:94dvh;margin:auto 0 0;border-radius:16px 16px 0 0}
  .project-heading{padding:24px 56px 17px 18px}
  .project-heading h2{font-size:24px}
  .project-heading p:last-child{font-size:11px}
  .project-heading [data-project-close]{right:13px;top:13px;width:34px;height:34px}
  #project-items{padding:20px 18px 10px}
  .project-item{grid-template-columns:80px minmax(0,1fr);gap:11px 13px;padding:17px 0}
  .project-item-image{height:80px;padding:8px}
  .project-item h3{font-size:13px}
  .project-item-actions{grid-column:2;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 13px;max-width:none}
  .project-add{font-size:11px;padding:11px}
  .project-remove{font-size:10px;padding:10px 0}
  .project-price{font-size:15px}
  #project-status{padding:0 18px 20px;font-size:11px}
}
