/* ---------- base ---------- */
.r3g44-pop, .r3g44-pop *{ box-sizing:border-box; }
.r3g44-pop{
  position:fixed; z-index:2147482000;
  width:440px; max-width:calc(100vw - 24px);
  background:#fff; border:1px solid #e5e5ea; border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.08);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:#1d1d1f; overflow:hidden;
  opacity:0; transform:translateY(6px) scale(.985);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.r3g44-pop.is-open{ opacity:1; transform:none; pointer-events:auto; }

/* FIX 4: da computer il pannello non supera l'altezza dello schermo */
.r3g44-pop:not(.sheet){
  max-height:78vh; display:flex; flex-direction:column;
}
.r3g44-pop:not(.sheet) .r3g44-scroll{
  overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto;
}
.r3g44-pop:not(.sheet) .r3g44-foot{ flex:0 0 auto; border-top:1px solid #f0f0f3; }

/* freccia (solo desktop) */
.r3g44-arrow{
  position:absolute; width:12px; height:12px; background:#fff;
  border-left:1px solid #e5e5ea; border-top:1px solid #e5e5ea;
  transform:rotate(45deg); z-index:2;
}
.r3g44-pop.pos-bottom .r3g44-arrow{ top:-7px; }
.r3g44-pop.pos-top .r3g44-arrow{ bottom:-7px; transform:rotate(225deg); }

/* ---------- testata ---------- */
.r3g44-head{
  display:flex; align-items:center; gap:10px;
  padding:13px 14px 11px; border-bottom:1px solid #f0f0f3;
}
.r3g44-head-t{
  font-size:12px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:#86868b; flex:1 1 auto;
}
/* FIX 5: prima era display:none e da computer non si chiudeva col tasto */
.r3g44-close{
  flex:0 0 auto; width:28px; height:28px; border:0; border-radius:50%;
  background:#f2f2f5; color:#3a3a3c; font-size:16px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.r3g44-close:hover{ background:#e6e6eb; }

/* ---------- selettore gradi ---------- */
.r3g44-tabs{
  display:flex; gap:6px; padding:11px 14px 0;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.r3g44-tabs::-webkit-scrollbar{ display:none; }
.r3g44-tab{
  flex:0 0 auto; border:1.5px solid #e5e5ea; background:#fff; color:#1d1d1f;
  font:600 13px/1.2 inherit; padding:7px 13px; border-radius:999px;
  cursor:pointer; white-space:nowrap; position:relative;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.r3g44-tab:hover{ border-color:#17a098; }
.r3g44-tab.on{ border-color:#17a098; background:#ecfdfa; color:#0f766e; }
.r3g44-tab.is-current::after{
  content:""; position:absolute; top:-2px; right:-2px;
  width:7px; height:7px; border-radius:50%; background:#17a098;
  border:1.5px solid #fff;
}
.r3g44-tab.ko{ opacity:.5; text-decoration:line-through; }

/* ---------- foto ---------- */
.r3g44-media{
  position:relative; margin:12px 14px 0;
  background:#f5f5f7; border-radius:12px; overflow:hidden;
  aspect-ratio:1 / 1;
}
.r3g44-media.empty{ display:none; }
/* FIX v3: contain + riquadro quadrato. Con cover le foto
   verticali venivano tagliate e si vedeva solo una striscia. */
.r3g44-slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center; padding:8px;
  display:block; opacity:0;
  transition:opacity .28s ease;
}
.r3g44-slide.on{ opacity:1; }
.r3g44-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:0; border-radius:50%;
  background:rgba(255,255,255,.92); color:#1d1d1f;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(0,0,0,.14);
  font-size:15px; line-height:1; cursor:pointer; z-index:3;
  display:flex; align-items:center; justify-content:center;
}
.r3g44-nav:active{ transform:translateY(-50%) scale(.92); }
.r3g44-nav.prev{ left:8px; }
.r3g44-nav.next{ right:8px; }
.r3g44-media.loading::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(100deg,#f5f5f7 30%,#ececf0 50%,#f5f5f7 70%);
  background-size:220% 100%; animation:r3g44shine 1.3s linear infinite;
}
@keyframes r3g44shine{ to{ background-position:-220% 0; } }

.r3g44-count{
  position:absolute; top:8px; right:8px; z-index:3;
  background:rgba(255,255,255,.92); color:#3a3a3c;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px;
}
.r3g44-zone{
  position:absolute; bottom:8px; left:8px; z-index:3;
  background:rgba(255,255,255,.92); color:#3a3a3c;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:11px; font-weight:500; padding:3px 9px; border-radius:999px;
  max-width:calc(100% - 70px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- testo ---------- */
.r3g44-body{ padding:13px 14px 0; }
.r3g44-name{
  font-size:20px; font-weight:700; letter-spacing:-.02em; line-height:1.15; margin:0;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.r3g44-ko-pill{
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:#fff7ed; color:#c2410c; border:1px solid #fed7aa;
  padding:2px 8px; border-radius:999px;
}
.r3g44-claim{
  font-size:13.5px; font-weight:600; color:#0f766e; margin:3px 0 0;
}
.r3g44-desc{
  font-size:13px; line-height:1.5; color:#3a3a3c; margin:7px 0 0;
}

/* barra segni */
.r3g44-segni{
  display:flex; align-items:center; gap:8px; margin:11px 0 0;
}
.r3g44-segni-lbl{
  font-size:10.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:#86868b;
}
.r3g44-bars{ display:flex; gap:4px; flex:1 1 auto; }
.r3g44-bars i{
  flex:1 1 0; height:4px; border-radius:999px; background:#e5e5ea;
  transition:background .25s ease;
}
.r3g44-bars i.on{ background:#17a098; }
.r3g44-bars i.on.hi{ background:#ea580c; }
.r3g44-segni-num{ font-size:12px; font-weight:700; color:#1d1d1f; }

/* tabella */
.r3g44-specs{ margin:11px 0 0; border-top:1px solid #f0f0f3; }
.r3g44-row{
  display:flex; gap:10px; padding:8px 0; border-bottom:1px solid #f0f0f3;
  font-size:12.5px; line-height:1.35;
}
.r3g44-row dt{
  flex:0 0 96px; margin:0; color:#86868b; font-weight:600;
  font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; padding-top:1px;
}
.r3g44-row dd{ margin:0; flex:1 1 auto; color:#1d1d1f; }

/* ---------- azioni ---------- */
.r3g44-foot{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));
  background:#fff;
}
.r3g44-cta{
  flex:1 1 auto; border:0; border-radius:999px; background:#17a098; color:#fff;
  font:600 13.5px/1.2 inherit; padding:11px 16px; cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.r3g44-cta:hover{ background:#0f766e; }
.r3g44-cta:active{ transform:scale(.98); }
.r3g44-cta.sel{ background:#ecfdfa; color:#0f766e; box-shadow:inset 0 0 0 1.5px #17a098; cursor:default; }
.r3g44-guida{
  flex:0 0 auto; font-size:12.5px; font-weight:600; color:#0f766e;
  text-decoration:none; white-space:nowrap;
}
.r3g44-guida:hover{ text-decoration:underline; color:#0f766e; }

/* ---------- overlay + bottom sheet (mobile) ---------- */
.r3g44-veil{
  position:fixed; inset:0; z-index:2147481900;
  background:rgba(0,0,0,.42); opacity:0;
  transition:opacity .22s ease; pointer-events:none;
}
.r3g44-veil.is-open{ opacity:1; pointer-events:auto; }

.r3g44-pop.sheet{
  top:auto !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important; max-width:none !important;
  border-radius:20px 20px 0 0; border-bottom:0;
  max-height:88vh; display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
.r3g44-pop.sheet.is-open{ transform:translateY(0); }
.r3g44-pop.sheet .r3g44-arrow{ display:none; }
.r3g44-pop.sheet .r3g44-grip{
  display:block; width:38px; height:4px; border-radius:999px;
  background:#d2d2d7; margin:8px auto 0;
}
.r3g44-pop.sheet .r3g44-scroll{ overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto; }
.r3g44-pop.sheet .r3g44-foot{ border-top:1px solid #f0f0f3; flex:0 0 auto; }
.r3g44-pop.sheet .r3g44-media{ aspect-ratio:1 / 1; }
.r3g44-grip{ display:none; }

@media (max-width:420px){
  .r3g44-guida{ display:none; }
  .r3g44-name{ font-size:18.5px; }
  .r3g44-row dt{ flex-basis:84px; }
}

/* la (i) agganciata */
a#r3-grade-info.r3g44-live, .r3g44-trigger{ cursor:pointer; }

@media (prefers-reduced-motion:reduce){
  .r3g44-pop, .r3g44-veil, .r3g44-slide, .r3g44-bars i{ transition:none !important; }
}