/* Invictus Size Guide popup — neutros tintados, acento en foco/CTA, radios <16px */
:root{
  --sg-ink:#0d253d; --sg-2:#273951; --sg-mute:#64748d; --sg-line:#e3e8ee;
  --sg-surface:#ffffff; --sg-soft:#f6f9fc; --sg-accent:#1d6fb8;
}
/* ---- Trigger (altura fija => cero CLS) ---- */
.inv-sg-triggerwrap{margin:10px 0 4px;min-height:40px}
.inv-sg-trigger{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:9px 14px;
  font:600 14px/1.1 inherit;color:var(--sg-ink);background:var(--sg-soft);
  border:1px solid var(--sg-line);border-radius:10px;cursor:pointer;text-decoration:none;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.inv-sg-trigger:hover{background:#eef4fb;border-color:#cfdcea}
.inv-sg-trigger:focus-visible{outline:2px solid var(--sg-accent);outline-offset:2px}
.inv-sg-ico{flex:0 0 auto;color:var(--sg-accent)}
/* trigger clonado dentro de la sticky card */
.ur-sticky-atc .inv-sg-trigger,.inv-sg-sticky-clone{margin:0 8px 0 0}

/* ---- Dialog base ---- */
.inv-sg-dialog{padding:0;border:0;background:transparent;max-width:none;max-height:none;color:var(--sg-ink)}
.inv-sg-dialog::backdrop{background:rgba(9,20,34,.45);backdrop-filter:saturate(1) blur(1px)}
.inv-sg-sheet{position:relative;background:var(--sg-surface);display:flex;flex-direction:column;
  box-shadow:0 24px 60px -12px rgba(9,20,34,.35);overflow:hidden}
.inv-sg-handle{display:none}
.inv-sg-close{position:absolute;top:10px;right:10px;width:40px;height:40px;display:grid;place-items:center;
  background:var(--sg-soft);border:1px solid var(--sg-line);border-radius:10px;color:var(--sg-2);cursor:pointer;
  transition:background .18s ease}
.inv-sg-close:hover{background:#eef4fb}
.inv-sg-close:focus-visible{outline:2px solid var(--sg-accent);outline-offset:2px}
.inv-sg-dtitle{margin:0;padding:18px 56px 12px 20px;font:600 17px/1.25 inherit;letter-spacing:-.01em;
  border-bottom:1px solid var(--sg-line);text-wrap:balance}
.inv-sg-content{padding:16px 20px;overflow:auto;flex:1 1 auto}
.inv-sg-diagram{display:block;width:100%;height:auto;max-width:520px;margin:0 auto 14px;border-radius:8px}
.inv-sg-foot{padding:12px 20px;border-top:1px solid var(--sg-line);background:var(--sg-soft);min-height:56px;display:flex;align-items:center}
.inv-sg-full{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;font:600 14px/1 inherit;
  color:#fff;background:var(--sg-accent);border-radius:10px;text-decoration:none;transition:background .18s ease}
.inv-sg-full:hover{background:#175a97}
.inv-sg-full:focus-visible{outline:2px solid var(--sg-ink);outline-offset:2px}

/* ---- Tabla dentro del popup ---- */
.inv-sg-tablewrap table{border-collapse:collapse;width:100%;font-size:13.5px;font-variant-numeric:tabular-nums}
.inv-sg-tablewrap td{border:1px solid var(--sg-line);padding:6px 9px;text-align:center;white-space:nowrap}
.inv-sg-tablewrap thead td,.inv-sg-tablewrap tr:first-child td{background:var(--sg-soft);font-weight:600}
.inv-sg-tablewrap a{color:var(--sg-accent)}
.inv-sg-tablewrap .tallaje-wrapper{margin:0 0 14px}

/* ===================== P1: modal centrado (desktop) ===================== */
.inv-sg-p1[open]{position:fixed;inset:0;margin:auto;width:min(720px,94vw)}
.inv-sg-p1 .inv-sg-sheet{border-radius:16px;max-height:88vh}

/* ===================== P2: drawer lateral derecha (desktop) ============= */
.inv-sg-p2[open]{position:fixed;inset:0 0 0 auto;margin:0;height:100vh;width:min(440px,92vw)}
.inv-sg-p2 .inv-sg-sheet{height:100vh;max-height:100vh;border-radius:0;border-left:1px solid var(--sg-line);
  animation:sg-slide-right .26s cubic-bezier(.22,.61,.36,1)}
@keyframes sg-slide-right{from{transform:translateX(100%)}to{transform:translateX(0)}}

/* ===================== Jeans: tabla móvil ===================== */
/* base: sticky primera columna + overflow-x con sombra (usado en P2 y como fallback P1) */
.inv-sg-tablewrap[data-type="vaquero"] .tallaje-wrapper{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left/24px 100% no-repeat,
             linear-gradient(-90deg,#fff 30%,rgba(255,255,255,0)) right/24px 100% no-repeat,
             linear-gradient(90deg,rgba(9,20,34,.12),rgba(9,20,34,0)) left/12px 100% no-repeat,
             linear-gradient(-90deg,rgba(9,20,34,.12),rgba(9,20,34,0)) right/12px 100% no-repeat;
  background-attachment:local,local,scroll,scroll}
.inv-sg-tablewrap[data-type="vaquero"] table td:first-child{position:sticky;left:0;z-index:1;
  background:var(--sg-soft);box-shadow:1px 0 0 var(--sg-line)}
/* widget por-talla (P1) — oculto por defecto, JS lo activa en movil */
.inv-sg-persize{display:none;margin:0 0 12px}
.inv-sg-persize label{display:block;font:600 13px/1 inherit;color:var(--sg-2);margin-bottom:6px}
.inv-sg-persize select{width:100%;min-height:44px;padding:10px 12px;font-size:15px;border:1px solid var(--sg-line);
  border-radius:10px;background:#fff;color:var(--sg-ink)}
.inv-sg-persize-card{margin-top:12px;border:1px solid var(--sg-line);border-radius:12px;overflow:hidden}
.inv-sg-persize-card dl{margin:0}
.inv-sg-persize-card .row{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--sg-line);font-size:14px}
.inv-sg-persize-card .row:last-child{border-bottom:0}
.inv-sg-persize-card dt{margin:0;color:var(--sg-2)}
.inv-sg-persize-card dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}

/* ===================== Móvil (<=768) : bottom-sheet para P1 y P2 ======= */
@media (max-width:768px){
  .inv-sg-p1[open],.inv-sg-p2[open]{inset:auto 0 0 0;margin:0;width:100%;height:auto;max-height:none}
  .inv-sg-p1 .inv-sg-sheet,.inv-sg-p2 .inv-sg-sheet{border-radius:18px 18px 0 0;max-height:90vh;height:auto;
    animation:sg-slide-up .28s cubic-bezier(.22,.61,.36,1);border-left:0}
  @keyframes sg-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .inv-sg-handle{display:block;width:40px;height:4px;border-radius:99px;background:#cfd8e3;margin:8px auto 0}
  .inv-sg-dtitle{padding-top:10px}
  /* P1 jeans: mostrar widget por-talla, ocultar tabla base */
  .inv-sg-p1 .inv-sg-tablewrap[data-type="vaquero"].has-persize .tallaje-wrapper{display:none}
  .inv-sg-p1 .inv-sg-tablewrap[data-type="vaquero"].has-persize .inv-sg-persize{display:block}
}
body.inv-sg-lock{overflow:hidden}

/* reduce-motion */
@media (prefers-reduced-motion:reduce){
  .inv-sg-sheet,.inv-sg-trigger,.inv-sg-close,.inv-sg-full{animation:none!important;transition:none!important}
}
.inv-sg-persize-title{margin:0 0 8px;font:600 14px/1.2 inherit;color:var(--sg-ink)}
/* trigger junto al label 'Talla' (desktop) */
.inv-sg-labelflex{display:flex!important;align-items:baseline;gap:14px;justify-content:space-between;flex-wrap:wrap;width:100%}
.inv-sg-labelflex .inv-sg-triggerwrap{margin:0;min-height:0}
.inv-sg-labelflex .inv-sg-trigger{min-height:36px;padding:7px 12px;font-size:13px}
@media (min-width:769px){ .inv-sg-labelflex > label{font-size:1.3em;font-weight:600} }
/* override fuerte: div.label a ancho completo para poner el enlace a la derecha de 'Talla' */
.woocommerce div.product form.variations_form .variations .label.inv-sg-labelflex,
.variations .label.inv-sg-labelflex{
  display:flex!important; width:100%!important; float:none!important; max-width:none!important;
  align-items:baseline; gap:14px; justify-content:space-between; flex-wrap:nowrap; box-sizing:border-box;
}
.inv-sg-labelflex .inv-sg-triggerwrap{flex:0 0 auto}
/* ---- FIX cosméticos ---- */
/* 1) hover del trigger: el tema pone el texto blanco -> forzar legible */
.woocommerce div.product .inv-sg-trigger:hover,
.woocommerce div.product .inv-sg-trigger:focus,
form.variations_form .inv-sg-trigger:hover,
.inv-sg-trigger:hover, .inv-sg-trigger:focus, .inv-sg-trigger:focus-visible,
.ur-sticky-atc .inv-sg-trigger:hover{
  color:var(--sg-ink)!important; background:#eef4fb!important; border-color:#cfdcea!important;
  text-decoration:none!important; box-shadow:none!important;
}
.inv-sg-trigger:hover .inv-sg-ico, .inv-sg-trigger:focus .inv-sg-ico{ color:var(--sg-accent)!important; }
/* 2) X de cerrar: centrar el svg + estilo sobrio (neutraliza botón del tema) */
.inv-sg-dialog .inv-sg-close, .woocommerce .inv-sg-close{
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  padding:0!important; margin:0!important; line-height:1!important; width:40px!important; height:40px!important;
  min-width:0!important; min-height:0!important; box-sizing:border-box!important;
  background:var(--sg-soft)!important; border:1px solid var(--sg-line)!important; border-radius:10px!important;
  color:var(--sg-2)!important; box-shadow:none!important; text-shadow:none!important; font-size:0!important;
}
.inv-sg-dialog .inv-sg-close:hover, .inv-sg-dialog .inv-sg-close:focus{ background:#eef4fb!important; color:var(--sg-ink)!important; }
.inv-sg-dialog .inv-sg-close svg{display:block;width:22px;height:22px}
/* ---- FIX 3: congelar estados heredados del tema (reposo=hover=focus=active=visited) ---- */
/* TRIGGER */
.inv-sg-trigger,
.inv-sg-trigger:hover,.inv-sg-trigger:focus,.inv-sg-trigger:active,.inv-sg-trigger:visited,
.woocommerce div.product .inv-sg-trigger,
.woocommerce div.product .inv-sg-trigger:hover,.woocommerce div.product .inv-sg-trigger:focus,
.woocommerce div.product .inv-sg-trigger:active,.woocommerce div.product .inv-sg-trigger:visited,
form.variations_form .inv-sg-trigger:hover,form.variations_form .inv-sg-trigger:focus,
.ur-sticky-atc .inv-sg-trigger:hover,.ur-sticky-atc .inv-sg-trigger:focus{
  color:var(--sg-ink)!important; background:var(--sg-soft)!important; border:1px solid var(--sg-line)!important;
  text-decoration:none!important; box-shadow:none!important; outline:none!important; text-shadow:none!important;
}
.inv-sg-trigger .inv-sg-ico{color:var(--sg-accent)!important}
/* VER GUIA COMPLETA */
.inv-sg-dialog .inv-sg-full,
.inv-sg-dialog .inv-sg-full:hover,.inv-sg-dialog .inv-sg-full:focus,.inv-sg-dialog .inv-sg-full:active,.inv-sg-dialog .inv-sg-full:visited,
.woocommerce .inv-sg-dialog .inv-sg-full:hover,.woocommerce .inv-sg-dialog .inv-sg-full:focus{
  color:#fff!important; background:var(--sg-accent)!important; border:0!important;
  text-decoration:none!important; box-shadow:none!important; outline:none!important; text-shadow:none!important;
}
/* CERRAR X */
.inv-sg-dialog .inv-sg-close,
.inv-sg-dialog .inv-sg-close:hover,.inv-sg-dialog .inv-sg-close:focus,.inv-sg-dialog .inv-sg-close:active,.inv-sg-dialog .inv-sg-close:visited,
.woocommerce .inv-sg-close:hover,.woocommerce .inv-sg-close:focus{
  color:var(--sg-2)!important; background:var(--sg-soft)!important; border:1px solid var(--sg-line)!important;
  box-shadow:none!important; outline:none!important; text-shadow:none!important;
}
/* SOLO teclado: outline sutil en focus-visible (el click con ratón NO deja pintado) */
.inv-sg-trigger:focus-visible,
.inv-sg-dialog .inv-sg-full:focus-visible,
.inv-sg-dialog .inv-sg-close:focus-visible{
  outline:2px solid var(--sg-accent)!important; outline-offset:2px!important;
}