/* GG Selector — rejilla de variaciones "todo a la vista".
   Este CSS se instala en temas AJENOS: nada de colores absolutos (#fff,
   negros fijos) — todo currentColor/gris translúcido, que funciona igual en
   tema claro y oscuro. Los botones llevan all:unset como cortafuegos contra
   el estilado de button del tema (width:100%, uppercase, !important…). */
.gg-selector{
  --gg-radio: 4px;   /* redondeo de los botones, ajustable por tienda */
  --gg-tenue: .45;   /* atenuación de agotados/imposibles */
  margin: 0 0 18px;
}
.gg-selector .gg-eje{margin:0 0 16px}
.gg-selector .gg-eje-titulo{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;opacity:.8}
.gg-selector .gg-eje-titulo b{font-weight:700;opacity:1}
.gg-selector .gg-opciones{display:flex;flex-wrap:wrap;gap:8px}
.gg-selector button.gg-op{
  all:unset; /* cortafuegos; todo lo necesario se re-declara debajo */
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(128,128,128,.55);
  border-color:color-mix(in srgb, currentColor 40%, transparent);
  background:transparent;color:inherit;font:inherit;font-size:14px;line-height:1;
  padding:10px 14px;min-width:44px;min-height:44px;
  border-radius:var(--gg-radio);cursor:pointer;position:relative;
  transition:border-color .15s,background .15s;
}
.gg-selector button.gg-op:hover{border-color:currentColor}
.gg-selector button.gg-op:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.gg-selector button.gg-op.gg-on{border-color:currentColor;border-width:2px;font-weight:700;box-shadow:inset 0 0 0 1px currentColor}
.gg-selector button.gg-op.gg-agotado,
.gg-selector button.gg-op.gg-imposible{opacity:var(--gg-tenue);border-style:dashed;cursor:not-allowed;text-decoration:line-through}
.gg-selector .gg-nota{font-size:11px;opacity:.8;text-decoration:none;margin-left:2px}
.gg-selector .gg-muestra{
  display:inline-block;box-sizing:border-box;width:16px;height:16px;border-radius:50%;
  vertical-align:-3px;margin-right:7px;flex:none;
  border:1px solid rgba(128,128,128,.55);
  border-color:color-mix(in srgb, currentColor 35%, transparent);
}
.gg-selector .gg-estado{
  margin-top:4px;font-size:14px;padding:10px 12px;
  background:rgba(128,128,128,.12);
  background:color-mix(in srgb, currentColor 7%, transparent);
  border-left:3px solid currentColor;border-radius:0 var(--gg-radio) var(--gg-radio) 0;
}
/* Los desplegables originales siguen en el DOM y operativos (WooCommerce los
   necesita en .variations select), pero fuera de la vista. NO usar display:none:
   algunos temas comprueban :visible antes de inicializar. El JS añade además
   aria-hidden y tabindex=-1 para sacarlos del tabulador y del lector. */
.gg-oculto-original{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .gg-selector button.gg-op{transition:none}
}
@media (max-width:480px){
  .gg-selector button.gg-op{padding:12px 15px;font-size:15px}
}