[data-ht-shop-color-grid] .ht-shop-color-card{min-width:0;font-family:var(--text-font-family);font-weight:var(--text-font-weight);font-style:var(--text-font-style)}.ht-shop-color-card__link{display:block;color:inherit}.ht-shop-color-card__figure{position:relative;aspect-ratio:4 / 5;background:rgb(var(--background))}.ht-shop-color-card__figure img{width:100%;height:100%;object-fit:contain}.ht-shop-color-card__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;padding:20px;text-align:center;font-size:.8rem;color:rgb(var(--text-color) / .65)}.ht-shop-color-card__info{display:grid;justify-items:center;gap:.5rem;padding-top:1.25rem;text-align:center;letter-spacing:.12em}.ht-shop-color-card__price{color:rgb(var(--text-color) / .65)}.ht-shop-color-card__availability{font-size:.75rem;letter-spacing:.04em}.ht-shop-color-card [hidden],.ht-shop-color-dock[hidden],.ht-shop-color-dock [hidden]{display:none!important}.ht-shop-color-dock{--ht-shop-swatch-size: 28.8px;--ht-shop-hit-size: 44px;--ht-shop-color-gap: 4px;position:fixed;z-index:8;inset-inline:0;bottom:0;display:block;color:rgb(var(--text-color));background:rgb(var(--background));border-top:1px solid rgb(var(--text-color) / .25);font-family:var(--text-font-family);font-weight:var(--text-font-weight);font-style:var(--text-font-style);padding-bottom:env(safe-area-inset-bottom,0px)}.ht-shop-color-dock__bar{display:flex;align-items:center;gap:8px;min-height:64px;padding:0 8px 0 14px}.ht-shop-color-dock__selected{display:flex;flex:none;gap:.5em;margin:0;font-size:.8rem;white-space:nowrap}.ht-shop-color-dock__selected [data-selected-code]{font-variant-numeric:tabular-nums}.ht-shop-color-dock:not([data-expanded]) [data-selected-name]{display:none}.ht-shop-color-dock__rail-wrap{position:relative;flex:1;min-width:0}.ht-shop-color-dock__rail{display:flex;gap:var(--ht-shop-color-gap);overflow-x:auto;overscroll-behavior-x:contain;padding:8px 3px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.ht-shop-color-dock__rail::-webkit-scrollbar{display:none}.ht-shop-color-dock__choice{display:grid;place-items:center;flex:0 0 var(--ht-shop-hit-size);width:var(--ht-shop-hit-size);height:var(--ht-shop-hit-size);padding:0;background:none;color:inherit;border:0;cursor:pointer}.ht-shop-color-dock__swatch{display:block;width:var(--ht-shop-swatch-size);height:var(--ht-shop-swatch-size);border:1px solid rgb(var(--text-color) / .22);background:var(--swatch-color, transparent) var(--swatch-image, none) center / cover no-repeat;box-shadow:inset 0 0 0 1px rgb(var(--text-color) / .1)}.ht-shop-color-dock__choice[aria-pressed=true] .ht-shop-color-dock__swatch{box-shadow:0 0 0 3px rgb(var(--background)),0 0 0 5px rgb(var(--text-color)),inset 0 0 0 1px rgb(var(--text-color) / .1)}.ht-shop-color-dock__choice:focus-visible,.ht-shop-color-dock__toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.ht-shop-color-dock__toggle{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:0;border-left:1px solid rgb(var(--text-color) / .18);background:none;color:inherit;cursor:pointer}.ht-shop-color-dock__toggle svg{transition:transform .18s ease}.ht-shop-color-dock[data-expanded] .ht-shop-color-dock__toggle svg{transform:rotate(180deg)}.ht-shop-color-dock__palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:8px 4px;max-height:min(380px,46dvh);overflow-y:auto;overscroll-behavior:contain;padding:16px 14px;border-bottom:1px solid rgb(var(--text-color) / .18);scrollbar-width:thin}.ht-shop-color-dock__palette .ht-shop-color-dock__choice{width:100%;height:58px;display:flex;flex-direction:column;justify-content:center;gap:7px;font-size:.6875rem;line-height:1}.ht-shop-color-dock[data-expanded] .ht-shop-color-dock__rail-wrap{display:none}.ht-shop-color-dock[data-expanded] .ht-shop-color-dock__selected{flex:1}.ht-shop-color-dock__position{position:absolute;bottom:0;inset-inline:0;height:3px;pointer-events:none;opacity:0;transition:opacity .18s ease}.ht-shop-color-dock__position span{position:absolute;height:3px;border-radius:3px;background:#5f5f5f}.ht-shop-color-dock[data-scrolling] .ht-shop-color-dock__position{opacity:1;transition:none}html:has([role=dialog][open],.drawer[open],.modal[open],.ht-help-overlay[open]) .ht-shop-color-dock{visibility:hidden}@media(min-width:700px){.ht-shop-color-dock{--ht-shop-swatch-size: 32px;--ht-shop-color-gap: 5px;width:min(800px,calc(100% - 48px));margin-inline:auto;bottom:18px;border:1px solid rgb(var(--text-color) / .25)}.ht-shop-color-dock__bar{gap:14px;padding-inline:20px 10px;min-height:70px}.ht-shop-color-dock:not([data-expanded]) [data-selected-name]{display:inline}.ht-shop-color-dock__palette{grid-template-columns:repeat(auto-fit,minmax(52px,1fr))}}@media(min-width:1000px){.ht-shop-color-dock{--ht-shop-swatch-size: 34px;--ht-shop-hit-size: 46px;--ht-shop-color-gap: 8px}}@media(max-width:699px){.ht-shop-color-card__info{padding-top:1rem;gap:.4rem;font-size:.8rem;letter-spacing:.06em}}@media(prefers-reduced-motion:reduce){.ht-shop-color-dock__toggle svg,.ht-shop-color-dock__position{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/242/assets/ht-shop-color-grid.css.map */