/* Touch-first variant choices; colours inherit the active AkiBusiness theme. */
.hp-variant-badge{font-size:.72rem;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
.hp-variant-setup{white-space:normal!important}
.hp-variant-overlay{position:fixed;inset:0;z-index:1800;display:flex;align-items:center;justify-content:center;padding:clamp(6px,2vw,20px);background:rgb(0 0 0 / .64);overscroll-behavior:contain}
.hp-variant-dialog{--variant-bg:#151c2e;--variant-surface:#202a40;--variant-line:#3a4861;--variant-text:#f2f5fc;--variant-muted:#bfcae0;width:min(780px,100%);max-height:calc(100dvh - 40px);min-height:0;display:flex;flex-direction:column;background:var(--variant-bg);color:var(--variant-text);border:1px solid var(--variant-line);border-radius:18px;box-shadow:0 18px 80px #0008;overflow:hidden;text-align:left}
html[data-theme="light"] .hp-variant-dialog,body[data-theme="light"] .hp-variant-dialog{--variant-bg:#fff;--variant-surface:#f2f5fa;--variant-line:#cbd3e1;--variant-text:#15213b;--variant-muted:#465773}
.hp-variant-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid var(--variant-line);flex-shrink:0;min-width:0}
.hp-variant-dialog>header>div{min-width:0}.hp-variant-dialog h2{font-size:clamp(1.1rem,3vw,1.5rem);margin:2px 0;overflow-wrap:anywhere}.hp-variant-dialog small{color:var(--variant-muted);display:block}.hp-variant-dialog .action-btn{min-height:44px;white-space:normal;overflow-wrap:anywhere;color:var(--variant-text)}
.hp-variant-dialog .action-btn:not(.primary){background:var(--variant-surface);border-color:var(--variant-line)}.hp-variant-dialog .action-btn:disabled{opacity:.48;cursor:not-allowed}.hp-variant-dialog :focus-visible{outline:3px solid currentColor;outline-offset:-3px}
.hp-variant-scroll{padding:16px;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;flex:1}.hp-variant-scroll>p:first-child{margin-top:0}.hp-variant-note{font-size:.8rem;color:var(--variant-muted);line-height:1.45}
.hp-variant-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hp-variant-option{display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding:18px!important;min-height:100px!important;text-align:left}.hp-variant-option strong{font-size:1.05rem}.hp-variant-option span{font-size:1.25rem;font-weight:750}.hp-variant-option small{font-size:.75rem}
.hp-variant-form{display:flex;flex-direction:column;min-height:0;overflow:hidden;flex:1}.hp-variant-form label{display:flex;flex-direction:column;gap:6px;min-width:0}.hp-variant-form input:not([type="checkbox"]){width:100%;box-sizing:border-box;min-width:0;min-height:44px;padding:10px;border:1px solid var(--variant-line);border-radius:9px;background:var(--variant-surface);color:var(--variant-text);font:inherit}.hp-variant-form section{margin-top:18px}.hp-variant-form h3{font-size:1rem;margin:0 0 10px}.hp-variant-form h3 span{color:var(--variant-muted);font-weight:400}
.hp-variant-form>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--variant-line);flex-shrink:0}.hp-variant-form>footer>span{font-size:.78rem;color:var(--variant-muted)}
.hp-variant-selected{list-style:none;margin:0;padding:0;display:grid;gap:6px}.hp-variant-selected li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--variant-line);border-radius:10px;background:var(--variant-surface);min-width:0}.hp-variant-selected li>span{overflow-wrap:anywhere;min-width:0}.hp-variant-selected li>div{display:flex;gap:5px;flex-shrink:0}.hp-variant-selected button{min-width:44px;padding:6px!important}.hp-variant-selected small{font-size:.75rem;margin-top:3px}
.hp-variant-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.hp-variant-products label{display:flex;flex-direction:row;align-items:center;gap:10px;border:1px solid var(--variant-line);border-radius:10px;min-height:56px;padding:10px;background:var(--variant-surface);cursor:pointer}.hp-variant-products label span{overflow-wrap:anywhere;min-width:0}.hp-variant-products input{width:22px;height:22px;flex-shrink:0}.hp-variant-products small{font-size:.78rem;margin-top:3px}
.hp-variant-alert{padding:10px 16px;background:var(--variant-surface);border-bottom:1px solid var(--variant-line);font-size:.85rem;overflow-wrap:anywhere;flex-shrink:0}.hp-variant-alert button{margin-left:8px}.hp-variant-remove{padding:0 16px 12px;flex-shrink:0}.hp-variant-remove button{font-size:.78rem}
@media(max-width:550px){.hp-variant-overlay{padding:6px}.hp-variant-dialog{max-height:calc(100dvh - 12px);border-radius:12px}.hp-variant-dialog>header{padding:12px;gap:8px}.hp-variant-scroll{padding:12px}.hp-variant-options,.hp-variant-products{grid-template-columns:minmax(0,1fr);gap:8px}.hp-variant-option{min-height:82px!important;padding:14px!important}.hp-variant-form>footer{padding:10px 12px;gap:8px}.hp-variant-form>footer .action-btn{max-width:55%;flex-shrink:0}}
@media(max-height:560px){.hp-variant-overlay{padding:6px}.hp-variant-dialog{max-height:calc(100dvh - 12px)}.hp-variant-dialog>header{padding:8px 12px}.hp-variant-scroll{padding:10px 12px}.hp-variant-form>footer{padding:8px 12px}.hp-variant-remove{padding-bottom:6px}}

.hp-variant-row-actions{display:flex;flex-direction:column;gap:6px;min-width:0;align-self:stretch;justify-content:center}.hp-variant-row-actions .action-btn{width:100%}