.afvp-wrap{margin:1rem 0}
.afvp-grid{
  display:grid;
  grid-template-columns:repeat(var(--afvp-cols, var(--afvp-cols-xl, 12)), minmax(var(--afvp-min,56px), 1fr));
  gap:var(--afvp-gap,8px);
}
@media (max-width:480px){ .afvp-grid{ --afvp-cols: var(--afvp-cols-xs,4); } }
@media (min-width:481px) and (max-width:640px){ .afvp-grid{ --afvp-cols: var(--afvp-cols-sm,6); } }
@media (min-width:641px) and (max-width:768px){ .afvp-grid{ --afvp-cols: var(--afvp-cols-md,8); } }
@media (min-width:769px) and (max-width:990px){ .afvp-grid{ --afvp-cols: var(--afvp-cols-lg,12); } }
@media (min-width:991px){ .afvp-grid{ --afvp-cols: var(--afvp-cols-xl,16); } }

/* Tile */
.afvp-tile{
  position:relative; cursor:pointer; border-radius:6px; outline:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
  background:#fff; transition:transform .08s ease, box-shadow .12s ease;
}
.afvp-tile:focus-visible{ box-shadow:0 0 0 2px rgba(0,0,0,.3) inset; }
@media (hover:hover){
  .afvp-tile:hover{ transform:translateY(-1px); box-shadow:0 1px 4px rgba(0,0,0,.08); }
}
.afvp-figure{ aspect-ratio:1/1; width:100%; overflow:hidden; border-radius:6px }
.afvp-figure img{ width:100%; height:100%; object-fit:cover; display:block }

/* out-of-stock */
.afvp-tile.is-disabled{ cursor:not-allowed; opacity:.55 }
.afvp-tile .afvp-oos{
  position:absolute; left:6px; bottom:6px; z-index:1; font-size:.78rem;
  background:rgba(0,0,0,.7); color:#fff; padding:.14rem .38rem; border-radius:3px
}

/* MODAL base */
#afvp-modal{ position:fixed; inset:0; z-index:100050; }
.afvp-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:saturate(140%) blur(2px); backdrop-filter:saturate(140%) blur(2px);
}
.afvp-dialog{
  position:absolute; left:50%;
  top: var(--afvp-dialog-top, 50%);
  transform: translateX(-50%) translateY(var(--afvp-dialog-ty, -50%));
  width:auto; max-width:min(92vw, 720px); max-height:min(88vh, 88svh);
  background:#fff; border-radius:10px; box-shadow:0 12px 48px rgba(0,0,0,.28); overflow:hidden
}
.afvp-x{
  position:absolute; right:8px; top:6px; width:34px; height:34px; border:none; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; font-size:22px; line-height:34px; cursor:pointer
}
.afvp-dialog-body{ display:flex; flex-direction:column; padding:.55rem .75rem .8rem }
.afvp-dialog-title{
  font-weight:600; font-size:.95rem; line-height:1.3; margin:.1rem 0 .4rem 0; color:#111;
  text-wrap:balance;
}
.afvp-dialog-media{ width:100%; max-height:72vh; display:flex; align-items:center; justify-content:center }
#afvp-dialog-img{ max-width:100%; max-height:66vh; height:auto; width:auto; display:block }

/* CTA area (qty + ATC) */
.afvp-dialog-cta{ margin-top:.6rem; display:flex; align-items:center; gap:.6rem; justify-content:flex-start; flex-wrap:wrap }
.afvp-qty{ display:inline-flex; align-items:center; gap:.25rem; background:#f4f4f4; padding:.25rem; border-radius:8px }
.afvp-qm,.afvp-qp{
  width:32px; height:32px; border:none; border-radius:6px; background:#e0e0e0; cursor:pointer; font-size:18px; line-height:32px
}
.afvp-qty-input{
  width:56px; text-align:center; padding:.25rem .35rem; border:1px solid #d0d0d0; border-radius:6px; background:#fff; font-size:.95rem
}
#afvp-add{
  appearance:none; border:none; padding:.6rem .95rem; border-radius:8px; cursor:pointer;
  background:#111; color:#fff; font-size:.95rem; font-weight:600; letter-spacing:.02em
}
#afvp-add:disabled{ opacity:.6; cursor:wait }
#afvp-status{ font-size:.9rem }

/* Desktop: ancorato in basso a sinistra e ~-18% dimensioni */
@media (min-width: 991px){
  .afvp-dialog.is-desktop{
    left:40px; bottom:40px; top:auto; transform:none;
    max-width:min(80vw, 560px); /* ~-18% rispetto a 680 px */
    max-height:70vh;
  }
  .afvp-dialog.is-desktop .afvp-dialog-media{ max-height:50vh; }
  .afvp-dialog.is-desktop #afvp-dialog-img{ max-height:48vh; }
}

/* Mobile small: immagine molto più grande (~+30%), ma safe */
@media (max-width: 480px){
  .afvp-dialog{ max-width:min(100vw, 860px); max-height:92vh; }
  .afvp-dialog-media{ max-height:86vh; }
  #afvp-dialog-img{ max-height:84vh; }
}

/* TOOLTIP (testo solo, non interattivo) */
.afvp-tip{
  position:fixed; z-index:100049; max-width:min(70ch, 60vw);
  background:rgba(0,0,0,.92); color:#fff; border-radius:8px; padding:.45rem .6rem; box-shadow:0 6px 20px rgba(0,0,0,.3);
  pointer-events:none;
}
.afvp-tip-inner{ display:flex; flex-direction:column; gap:.12rem }
.afvp-tip-text{ font-size:.82rem; line-height:1.22 }
.afvp-tip-hint{ font-size:.74rem; opacity:.85 }

/* iOS micro-smoothing */
@supports (-webkit-touch-callout: none) {
  .afvp-backdrop{ -webkit-backdrop-filter: saturate(140%) blur(2px); }
}