.color-swatches{display:flex;flex-direction:column;gap:24px;}.color-swatches .main-title{color:var(--secondary-color);font-family:VenusSB-BolExt;font-size:24px;font-weight:400;line-height:140%;letter-spacing:0.48px;}.color-swatches .main-description{color:var(--secondary-color);font-size:16px;font-weight:500;line-height:150%;}.color-swatches .main-description p{margin-bottom:24px;}.color-swatches .main-description p:last-child{margin-bottom:0;}.color-swatches .image-and-swatches-container.layout-portrait{display:flex;gap:16px;}.color-swatches .image-and-swatches-container.layout-portrait.color-first{flex-direction:row-reverse;}.color-swatches .image-and-swatches-container.layout-landscape{display:flex;gap:16px;flex-direction:column;gap:24px;}.color-swatches .image-and-swatches-container.layout-landscape.color-first{flex-direction:column-reverse;}.image-and-swatches-container.layout-portrait .hot-spot-image{width:465px;height:581px;object-fit:cover;border-radius:8px;}.image-and-swatches-container.layout-landscape .hot-spot-image{width:100%;height:555px;object-fit:cover;border-radius:8px;}.image-and-swatches-container.layout-portrait .swatches-grid{display:grid;height:fit-content;grid-template-columns:repeat(3,1fr);gap:16px;flex-grow:1;}.image-and-swatches-container.layout-landscape .swatches-grid{grid-template-columns:repeat(6,1fr);display:grid;width:fit-content;gap:16px;width:100%;}.image-and-swatches-container.layout-grid-only .swatches-grid{grid-template-columns:repeat(5,1fr);display:grid;width:fit-content;gap:16px;}.swatches-grid .swatch-item{position:relative;aspect-ratio:1/1;padding:16px;font-size:16px;font-weight:400;line-height:150%;}.image-and-swatches-container.layout-grid-only .swatches-grid .swatch-item{width:156px;height:156px;}.swatch-item .swatch-color{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;}.swatch-item .swatch-name.text-brighten{position:absolute;z-index:1;color:white;}.swatch-item .swatch-name.text-darken{position:absolute;z-index:1;color:var(--secondary-color);}@media (max-width:1024px){.color-swatches .main-title{font-size:22px;letter-spacing:0.44px;}.color-swatches .image-and-swatches-container.layout-portrait,.color-swatches .image-and-swatches-container.layout-portrait.color-first,.color-swatches .image-and-swatches-container.layout-landscape.color-first{flex-direction:column;}.image-and-swatches-container.layout-portrait .hot-spot-image{height:426px;width:100%;}.image-and-swatches-container.layout-landscape .hot-spot-image{height:277px;}.image-and-swatches-container.layout-landscape .swatches-grid{width:unset;grid-template-columns:repeat(3,1fr);}.image-and-swatches-container.layout-grid-only .swatches-grid{width:unset;grid-template-columns:repeat(2,1fr);}.image-and-swatches-container.layout-portrait .swatches-grid .swatch-item,.image-and-swatches-container.layout-landscape .swatches-grid .swatch-item{aspect-ratio:1/1;width:unset;height:unset;font-size:12px;font-weight:500;padding:12px;}.image-and-swatches-container.layout-grid-only .swatches-grid .swatch-item{aspect-ratio:1/1;width:unset;height:unset;}}
.custom-tooltip{border-radius:4px;border:2px solid #fd0;background:#fff;box-shadow:0 12px 16px -4px rgba(0,0,0,0.32),0 4px 6px -2px rgba(0,0,0,0.12);max-width:230px;cursor:pointer;min-width:230px;padding:12px;margin-top:10px;}.tooltip-close{position:absolute;top:6px;right:6px;background:none;border:none;cursor:pointer;padding:0;line-height:1;width:20px;height:20px;}.tooltip-title{color:#1a1a1a;font-family:LibreFranklin;font-size:12px;font-weight:500;line-height:150%;}.tooltip-content{display:flex;justify-content:start;align-items:center;padding-right:12px;gap:8px;}.tooltip-arrow{color:#1a1a1a;text-align:center;font-size:18px;font-style:normal;font-weight:500;line-height:80%;letter-spacing:-0.12px;position:unset;height:auto;width:auto;}.product-thumbnail-image{width:36px;height:36px;}.tooltip-product-name{margin-bottom:0;color:#1a1a1a;font-family:LibreFranklin;font-size:12px;font-style:normal;font-weight:500;line-height:150%;}.imagehotspot-editor{border:1px solid #bbbabf;display:inline-block;line-height:0;}.imagehotspot-image{position:relative;display:inline-block;cursor:pointer;}.imagehotspot-placeholder-image{display:block;width:400px;height:300px;border:1px solid #999;background:rgba(0,0,0,0.1);}.imagehotspot-tooltip strong{color:#1976d2;font-size:16px;font-weight:600;}.imagehotspot-tooltip a{color:#388e3c;text-decoration:underline;font-weight:500;}.imagehotspot-tooltip hr{border:none;border-top:1px solid #eee;margin:8px 0;}.imagehotspot-hotspot:hover{box-shadow:0 4px 12px rgba(0,0,0,0.25);background:#ffc107;border-color:#1976d2;}.imagehotspot-tooltip{z-index:1000;}@media (max-width:767px){.imagehotspot-tooltip{min-width:150px;max-width:95vw;padding:10px 8px;font-size:13px;}}.hotspot-node{background-size:cover;background-repeat:no-repeat;background-position:center;width:30px;height:30px;}.hotspot-node:not(.active){animation:hotspotAnimation 5s infinite;}@keyframes hotspotAnimation{0%{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"><circle cx="12" cy="12" r="7.5" fill="%23041A37" stroke="white" stroke-width="3"/><circle cx="12" cy="12" r="7.5" fill="%23041A37" stroke="white" stroke-width="3"/><circle cx="13" cy="12" r="10.25" fill="%231A1A1A" stroke="%23FFDD00" stroke-width="3.5"/></svg>');}33%{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none"><circle cx="15" cy="15" r="8" fill="%23041A37" stroke="white" stroke-width="2"/><circle cx="15" cy="15" r="15" fill="white" fill-opacity="0.2"/><circle cx="15" cy="15" r="7.5" fill="%231A1A1A" stroke="%23FFDD00" stroke-width="3"/></svg>');}66%{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none"><circle cx="15" cy="15" r="8" fill="%23041A37" stroke="white" stroke-width="2"/><circle cx="15" cy="15" r="15" fill="white" fill-opacity="0.1"/><circle cx="15" cy="15" r="14" stroke="white" stroke-opacity="0.02" stroke-width="2"/><circle cx="15" cy="15" r="7.5" fill="%231A1A1A" stroke="%23FFDD00" stroke-width="3"/></svg>');}100%{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"><circle cx="12" cy="12" r="7.5" fill="%23041A37" stroke="white" stroke-width="3"/><circle cx="12" cy="12" r="7.5" fill="%23041A37" stroke="white" stroke-width="3"/><circle cx="13" cy="12" r="10.25" fill="%231A1A1A" stroke="%23FFDD00" stroke-width="3.5"/></svg>');}}