.mcpa-color-selector{margin:14px 0;max-width:520px} .mcpa-cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;max-height:280px;overflow-y:auto;padding:2px} .mcpa-cs-tile{display:flex;flex-direction:column;align-items:center;gap:4px} .mcpa-cs-thumb{width:100%;aspect-ratio:1;border-radius:8px;background:#f6f7f7 center/cover no-repeat;border:1px solid #dcdcde;cursor:zoom-in;transition:transform .15s} .mcpa-cs-thumb.is-zoomed{transform:scale(2.4);z-index:5;position:relative;box-shadow:0 4px 16px rgba(0,0,0,.25)} .mcpa-cs-name{font-size:11px;color:#2c3338;text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mcpa-cs-stepper{display:flex;align-items:center;gap:4px} .mcpa-cs-stepper button{width:22px;height:22px;padding:0;line-height:1;font-size:13px;border:1px solid #dcdcde;border-radius:4px;background:#fff;cursor:pointer} .mcpa-cs-stepper button:hover{border-color:#2271b1} .mcpa-cs-qty{font-size:13px;font-weight:700;min-width:14px;text-align:center} .mcpa-cs-summary{margin-top:12px;padding-top:10px;border-top:1px solid #e3e3e3;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px} .mcpa-cs-status{font-size:13px;font-weight:600;color:#646970} .mcpa-cs-status.is-valid{color:#16823b} .mcpa-cs-status.is-pending{color:#996800} .mcpa-cs-price{font-size:15px;font-weight:700;color:#2c3338} #mcpa-cs-add{width:100%;margin-top:10px!important;padding:11px!important;font-size:14px!important;text-align:center!important} #mcpa-cs-add:disabled{opacity:.5;cursor:not-allowed} .mcpa-cs-surtido{margin-top:16px;padding-top:12px;border-top:1px solid #e3e3e3} .mcpa-cs-surtido-label{font-size:12px;color:#646970;margin-bottom:6px} .mcpa-cs-surtido-btn{width:100%;margin-top:6px!important;text-align:left!important;padding:9px 12px!important} .mcpa-cs-surtido-badge{display:inline-block;background:#f0f6fc;color:#135e96;font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px;margin-right:6px} @media(max-width:600px){.mcpa-color-selector{max-width:100%}.mcpa-cs-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));max-height:220px}} /* dev24 — sticky no funcionó en el DOM real (algún ancestro de Blocksy con overflow/transform lo atrapa). Alternativa: color-selector.js mueve el MISMO botón #mcpa-cs-add (nunca lo duplica) a este contenedor propio, pegado directo a en mobile, fuera de cualquier wrapper que pueda recortarlo — mismo mecanismo que ya usa la barra de navegación fija del tema, que si funciona. bottom:58px es una estimación para quedar arriba de esa barra fija de Blocksy — ajustar el valor exacto tras confirmar visualmente en el dispositivo real. Desktop nunca ve este bloque (JS lo devuelve a su posición original y remueve el contenedor fuera de mobile). */ @media(max-width:781px){ .mcpa-cs-fixed-bar{position:fixed;left:0;right:0;bottom:58px;z-index:9999;padding:8px 12px;background:#fff;box-shadow:0 -2px 10px rgba(0,0,0,.15)} .mcpa-cs-fixed-bar #mcpa-cs-add{margin-top:0!important} } /* Ajuste UX — Blocksy ("Product Elements") deja el módulo completo de "cantidad" (título + estructura/bordes vacíos) en .ct-product-add-to-cart cuando el formulario nativo de WooCommerce está oculto (form.cart, ver maybe_enqueue_color_selector_assets()). Ocultar solo el título dejaba el contenedor vacío visible (confirmado con evidencia real) — ahora se oculta el módulo entero. :has() acota esto a fichas donde existe nuestro selector de colores — nunca afecta productos WooCommerce normales, que no tienen .mcpa-color-selector. */ .entry-summary-items:has(.mcpa-color-selector) .ct-product-add-to-cart{display:none}