.vcc{padding-top:var(--vcc-top, 40px);padding-bottom:var(--vcc-bottom, 40px)}.vcc__list{display:grid;grid-template-columns:1fr;gap:var(--vcc-gap, 16px)}.vcc__card{display:flex;flex-direction:column;gap:1.4rem;padding:var(--vcc-card-padding, 16px);border-radius:var(--vcc-card-radius, 16px);background:var(--vcc-card-bg, #eaf0ef)}.vcc__stage{position:relative;width:100%;aspect-ratio:var(--vcc-ratio, 3 / 4);overflow:hidden;border-radius:calc(var(--vcc-card-radius, 16px) - 6px);background:#0000000a}.vcc__slide{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;pointer-events:none}.vcc__slide.is-active{opacity:1;pointer-events:auto}.vcc__image,.vcc__stage svg{display:block;width:100%;height:100%;object-fit:cover}.vcc__options{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}.vcc__option{display:flex;flex-direction:column;align-items:stretch;gap:.6rem;padding:.7rem .7rem .9rem;border:2px solid var(--vcc-option-border, #dfe3e6);border-radius:var(--vcc-option-radius, 10px);background:var(--vcc-option-bg, #fff);font-family:inherit;cursor:pointer;transition:border-color .15s ease}.vcc__option:hover{border-color:#0f5f6b80}.vcc__option.is-active{border-color:var(--vcc-active-border, #0f5f6b)}.vcc__option:focus-visible{outline:2px solid var(--vcc-active-border, #0f5f6b);outline-offset:2px}.vcc__swatch{display:block;height:1.8rem;border-radius:10rem;border:1px solid rgba(22,35,43,.14)}.vcc__name{color:var(--vcc-name-color, #16232b);font-size:var(--vcc-name-size, 14px);font-weight:700;line-height:1.25}.vcc__code{color:var(--vcc-code-color, #8a7a52);font-size:var(--vcc-code-size, 12px);line-height:1.2}.vcc__dots,.vcc__hint{display:none}@media screen and (max-width:989px){.vcc__viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-1.5rem;margin-right:-1.5rem}.vcc__viewport::-webkit-scrollbar{display:none}.vcc__list{display:flex;width:max-content;padding:0 1.5rem;gap:var(--vcc-gap, 16px)}.vcc__card{flex:0 0 auto;width:calc(100vw - 6rem);scroll-snap-align:center}.vcc__dots{display:flex;justify-content:center;gap:.8rem;margin-top:1.8rem}.vcc__dot{width:.9rem;height:.9rem;padding:0;border:0;border-radius:50%;background:var(--vcc-dot, #16232b);opacity:.25;cursor:pointer;transition:opacity .2s ease,transform .2s ease}.vcc__dot.is-active{opacity:1;transform:scale(1.25)}.vcc__hint{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:1rem 0 0;color:var(--vcc-hint, #5b6b7a);font-size:13px;line-height:1.3}.vcc__hint svg{width:1.5rem;height:1.5rem;flex:0 0 auto}}@media screen and (min-width:990px){.vcc__list{grid-template-columns:repeat(3,1fr)}}@media screen and (max-width:480px){.vcc__option{padding:.6rem .5rem .8rem}.vcc__swatch{height:1.5rem}}.vcc--old .vcc__card{border:var(--vcc-bw, 2px) solid var(--vcc-ink, #16232b);border-radius:0;box-shadow:var(--vcc-shadow, 5px) var(--vcc-shadow, 5px) 0 var(--vcc-ink, #16232b)}.vcc--old .vcc__stage{border-radius:0;border:var(--vcc-bw, 2px) solid var(--vcc-ink, #16232b)}.vcc--old .vcc__option{border-width:var(--vcc-bw, 2px);border-radius:0;gap:.5rem}.vcc--old .vcc__option.is-active{box-shadow:inset 0 0 0 2px var(--vcc-ink, #16232b)}.vcc--old .vcc__swatch{border-radius:0;border:1px solid rgba(22,35,43,.5)}.vcc--old .vcc__name{font-weight:800;letter-spacing:.02em;text-transform:uppercase}.vcc--old .vcc__code{font-weight:700;letter-spacing:.06em}.vcc--old .vcc__dot{border-radius:0;border:var(--vcc-bw, 2px) solid var(--vcc-ink, #16232b);background:transparent;opacity:1}.vcc--old .vcc__dot.is-active{background:var(--vcc-ink, #16232b);transform:none}.vcc--old .vcc__hint{font-weight:700;letter-spacing:.06em;text-transform:uppercase}.vcc--old .vcc__head{margin:0 0 3rem;text-align:center}.vcc--old .vcc__heading{margin:0;color:var(--vcc-heading-color, #16232b);font-size:var(--vcc-heading-size, 38px);font-weight:800;line-height:1.1;letter-spacing:-.01em;text-transform:uppercase}.vcc--old .vcc__subheading{max-width:70ch;margin:1.2rem auto 0;color:var(--vcc-sub-color, #55636b);font-size:var(--vcc-sub-size, 16px);line-height:1.5}@media screen and (max-width:749px){.vcc--old .vcc__head{margin-bottom:2.2rem}}
/*# sourceMappingURL=/cdn/shop/t/16/assets/old-color-comparison.css.map */