/* Opciones de variante de la ficha (Duración, Sistema operativo, Instalación, Versión…) — 2026-10-13.
   El tema pintaba las opciones tipo radio con la regla genérica `.product-variants .input-radio:checked+span, :hover+span` (borde negro de 2 px
   idéntico al ELEGIR y al pasar el ratón, esquinas cuadradas, sin foco visible porque el radio real va con opacity:0) y ningún diseño de ficha las
   tocaba. Esta hoja las rediseña para TODOS los diseños (y para la vista rápida y los listados). Se carga solo si la opción de ficha «variants» es
   «modern» (por defecto). El radio real se conserva (absoluto, transparente, cubre la opción) para teclado y lectores de pantalla. */
html body .product-variants{--ppv-accent:var(--ecmc-accent,#2563EB);--ppv-accent-ink:#1D4ED8;--ppv-tint:#EFF6FF;--ppv-ink:#0F172A;--ppv-line:#CBD5E1;--ppv-muted:#64748B;margin:0}
html body .product-variants .product-variants-item{display:block;float:none;clear:both;margin:0 0 14px;padding:0}
html body .product-variants .form-control-label{display:block;margin:0 0 8px;padding:0;font-size:14px;font-weight:600;line-height:1.3;color:var(--ppv-ink)}

/* ---- Opciones tipo radio (chips) ---- */
/* El hueco entre grupos va en la lista (los diseños de ficha ponen márgenes de 0 al grupo y la etiqueta quedaba pegada a las opciones de arriba). */
html body .product-variants ul[id^="group_"]{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
html body .product-variants .product-variants-item:last-child ul[id^="group_"]{margin-bottom:4px}
/* Diseño «Apilado centrado»: etiquetas centradas => opciones centradas */
body.pp-p35-apilado-centrado .product-variants ul[id^="group_"]{justify-content:center}
html body .product-variants .input-container{position:relative;float:none;width:auto;margin:0;padding:0}
html body .product-variants .input-container .input-radio,
html body .product-variants .input-container .input-color{position:absolute;inset:0;z-index:2;width:100%;height:100%;min-width:0;min-height:0;margin:0;opacity:0;cursor:pointer}
html body .product-variants .input-container .radio-label{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;min-width:3rem;min-height:44px;margin:0;padding:8px 16px;border:1.5px solid var(--ppv-line);border-radius:10px;outline:0;background:#fff;color:var(--ppv-ink);font-size:14px;font-weight:500;line-height:1.2;text-align:center;cursor:pointer;box-sizing:border-box;transition:border-color .15s,background-color .15s,color .15s,box-shadow .15s}
html body .product-variants .input-container:hover .radio-label{border-color:var(--ppv-accent);background:#fff;color:var(--ppv-ink)}
html body .product-variants .input-container .input-radio:checked + .radio-label,
html body .product-variants .input-container:hover .input-radio:checked + .radio-label{padding:8px 16px;border:1.5px solid var(--ppv-accent);background:var(--ppv-tint);color:var(--ppv-accent-ink);font-weight:600;line-height:1.2;box-shadow:0 0 0 1px var(--ppv-accent)}
html body .product-variants .input-container .input-radio:focus-visible + .radio-label{outline:2px solid var(--ppv-accent);outline-offset:2px}
/* Sin stock: sigue siendo elegible (PrestaShop lo avisa), pero se distingue */
html body .product-variants .input-container.attribute-not-in-stock .radio-label{border-style:dashed;background:#F8FAFC;color:var(--ppv-muted)}
html body .product-variants .input-container .input-radio:disabled + .radio-label{opacity:.5;cursor:not-allowed}

/* ---- Muestras de color ---- */
html body .product-variants .input-container .color{display:inline-block;width:2rem;height:2rem;margin:0;border:2px solid #fff;border-radius:50%;outline:1px solid var(--ppv-line);line-height:1;box-sizing:border-box}
html body .product-variants .input-container .input-color:checked + .color,
html body .product-variants .input-container:hover .input-color + .color{border:2px solid #fff;outline:2px solid var(--ppv-accent);line-height:1}
html body .product-variants .input-container .input-color:focus-visible + .color{outline:2px solid var(--ppv-accent);outline-offset:2px}

/* ---- Desplegables (grupos tipo select) ---- */
html body .product-variants .custom-select2{position:relative;display:block;max-width:100%}
html body .product-variants .custom-select2 select.form-control-select{display:block;width:100%;min-height:44px;padding:8px 40px 8px 14px;border:1.5px solid var(--ppv-line);border-radius:10px;background-color:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;color:var(--ppv-ink);font-size:14px;font-weight:500;line-height:1.3;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none}
html body .product-variants .custom-select2 select.form-control-select:hover{border-color:var(--ppv-accent)}
html body .product-variants .custom-select2 select.form-control-select:focus{outline:0;border-color:var(--ppv-accent);box-shadow:0 0 0 3px rgba(37,99,235,.18)}

@media (max-width:575.98px){
  html body .product-variants .input-container .radio-label{padding:10px 14px}
  html body .product-variants .input-container .input-radio:checked + .radio-label{padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){html body .product-variants .input-container .radio-label{transition:none}}