/* Light colour choices: real SKU links, accessible names and generous touch targets. */
.ht-home .ht335-colors h2{display:flex;flex-wrap:wrap;gap:5px;font-size:13px;margin-bottom:10px}
.ht335-colors h2 span{color:var(--muted);font-weight:400}
.ht335-colors .ht312-axis-values{gap:0}
.ht335-colors .ht312-axis-values>a,.ht335-colors .ht312-axis-values>.ht312-unavailable{position:relative;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:5px;border:2px solid transparent;border-radius:50%;background:transparent;box-shadow:none;text-decoration:none}
.ht335-colors .ht312-axis-values i{display:block;width:30px;height:30px;border-radius:50%;background:var(--ht335-color);box-shadow:inset 0 0 0 1px rgba(30,40,45,.12)}
.ht335-colors .ht312-axis-values>a[aria-current=page]{border-color:#d7dce0;box-shadow:0 0 0 1px #e9ecee;background:#fff}
.ht335-colors .ht312-axis-values>a:hover{border-color:#9ca7af}
.ht335-colors .ht312-axis-values>a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ht335-colors .ht312-axis-values>.ht312-unavailable{opacity:.35}
.ht335-colors .ht312-axis-values>.ht312-unavailable:after{content:'';position:absolute;width:32px;height:1px;background:var(--ink);transform:rotate(-45deg);top:20px;left:4px}
.ht335-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.ht-home .ht336-card-colors{display:block;padding-top:4px}
.ht336-card-colors>small{display:block;margin-bottom:6px}
.ht336-color-group+ .ht336-color-group{margin-top:8px}
.ht336-color-group>small{display:block;font-size:10px;line-height:1.5;color:var(--muted);margin:0 0 3px}
.ht336-color-row{display:flex;flex-wrap:wrap;gap:0}
.ht-home .ht336-color-row>a{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;padding:4px;border:2px solid transparent;border-radius:50%;background:transparent;box-shadow:none;text-decoration:none}
.ht336-color-row>a>i{display:block;width:28px;height:28px;border-radius:50%;background:var(--ht335-color);box-shadow:inset 0 0 0 1px rgba(30,40,45,.12)}
.ht-home .ht336-color-row>a[aria-current=true]{border-color:#d7dce0;background:#fff;box-shadow:0 0 0 1px #e9ecee}
.ht-home .ht336-color-row>a:hover{border-color:#9ca7af}
.ht336-color-row>a:focus-visible{outline:2px solid var(--red);outline-offset:1px}
@media(pointer:coarse){.ht-home .ht336-color-row>a{flex-basis:44px;width:44px;height:44px}}