image-hotspots{display:block;position:relative;overflow:hidden}.image_hotspots_inner.ih--half{height:50vh}.image_hotspots_inner.ih--two-third{height:calc(100vh * 2 / 3)}.image_hotspots_inner.ih--full{height:100vh}.image_hotspots_inner.ih--adapt{height:100%}.image_hotspots_inner{position:relative;width:100%}.image_hotspots_img_inner{position:relative}.image_hotspots_cards_layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}.image_hotspots_cards_layer .image_hotspot_card.active{pointer-events:auto}.image_hotspots_img_wrapper,.image_hotspots_img_inner{width:100%;height:100%;overflow:hidden}.image_hotspots_img_inner img,.image_hotspots_img_inner svg.main_placeholder_svg{width:100%;height:100%;object-fit:cover}.ih_card_img_wrapper{width:100%;height:100%}.ih_card_img_wrapper a{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--img-border-radius)}.ih_card_img_wrapper img,.ih_card_img_wrapper svg.main_placeholder_svg{position:absolute;border-radius:var(--img-border-radius);background:#f5f5f5;width:100%;height:100%;object-fit:cover}.image_hotspots_img_inner svg.main_placeholder_svg{background:color-mix(in srgb,var(--color-secondary-background) 100%,transparent)}.image_hotspots_small_block_img svg.placeholder_svg{background:color-mix(in srgb,var(--color-background) 100%,transparent);filter:brightness(.8)}.image_hotspots_small_block_wrapper{position:absolute;left:50%;z-index:2;max-width:75rem;background:var(--color-secondary-background);width:100%;padding:4rem 2rem;border-radius:var(--img-border-radius);display:grid;align-items:center;justify-content:center;grid-template-columns:1fr 28rem 1fr;gap:2rem;overflow:hidden;box-shadow:0 0 1rem #0003;transition:opacity .6s ease,transform .6s ease}.ih_side_titles{display:flex;flex-direction:column;gap:1rem;justify-content:space-evenly;height:100%}.ih_left_titles,.ih_right_titles{align-items:center}.ih_product_title{background:none;border:none;padding:.5rem 1rem;cursor:pointer;color:var(--color-text);font-size:1.6rem;line-height:1.2;text-align:inherit;opacity:.6;transition:opacity .3s ease;font-weight:500;text-align:center;padding:0}.ih_product_title:hover{opacity:.8}.ih_product_title.active{opacity:1;font-weight:600}.image_hotspots_small_block_wrapper.ihsb-top{top:5rem;transform:translate(-50%,calc(0% + 20px))}.image_hotspots_small_block_wrapper.ihsb-center{top:50%;transform:translate(-50%,calc(-50% + 20px))}.image_hotspots_small_block_wrapper.ihsb-bottom{bottom:5rem;transform:translate(-50%,calc(0% + 20px))}.image_hotspots_small_block_wrapper.ihsb-center.is-visible{opacity:1;transform:translate(-50%,-50%)}.image_hotspots_small_block_wrapper.ihsb-top.is-visible,.image_hotspots_small_block_wrapper.ihsb-bottom.is-visible{opacity:1;transform:translate(-50%)}.image_hotspots_small_block_track{position:relative;width:100%;height:100%;display:grid;max-width:28rem;min-height:15rem;overflow:hidden;box-shadow:0 0 1rem #0003;border-radius:var(--img-border-radius)}.image_hotspots_small_block{width:100%;grid-area:1 / 1;transition:transform .3s ease-in-out;will-change:transform}.image_hotspots_small_block_img{display:flex;width:100%;height:100%;position:relative}.image_hotspots_small_block_img img{max-width:28rem;width:100%;height:auto;object-fit:cover}.image_hotspot_block{position:absolute;top:var(--vertical-position);left:var(--horizontal-position);width:1.6rem;height:1.6rem;background:color-mix(in srgb,var(--color-background) 50%,transparent);border-radius:50%;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:center;cursor:pointer;border:2px solid transparent;transition:width .3s ease,height .3s ease}.image_hotspot_block.active{width:2.6rem;height:2.6rem;border:2px solid var(--color-background)}span.image_hotspot_block_inner{display:flex;width:.6rem;height:.6rem;background:var(--color-background);border-radius:50%}.image_hotspot_block.active span.image_hotspot_block_inner{width:1rem;height:1rem}.image_hotspot_card{max-width:22.6rem;width:100%;height:auto;position:absolute;top:var(--vertical-position);left:var(--horizontal-position);background:var(--color-background);border-radius:var(--img-border-radius);overflow:hidden;padding:1rem;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .25s ease;transform:translate(var(--ih-card-nudge-x, 0px),var(--ih-card-nudge-y, 0px));will-change:transform}.image_hotspot_card.active{opacity:1;pointer-events:all}.ih_card_for_mobile .image_hotspot_card{transform:none}.image_hotspot_card_inner{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.ih_card_img_wrapper svg.placeholder_svg{width:100%;height:100%;background:#f5f5f5;border-radius:var(--img-border-radius)}.ih_card_info{margin:1rem 0 0;display:flex;flex-flow:column;gap:3px}.ih_card_info p:first-child{font-weight:600}.image_hotspot_card:hover,.image_hotspot_card:has(a:focus-visible){z-index:3}.ih_card_info h3 a{color:var(--color-text);text-decoration:none}.ih_for_mobile,.ih_card_for_mobile{display:none}.image_hotspot_block button{background:transparent;width:100%;height:100%;border-radius:50%;border:none;padding:0;position:relative;display:flex;justify-content:center;align-items:center}.image_hotspot_block button:focus-visible{outline:1px solid var(--color-text);outline-offset:4px}@media screen and (max-width:1299px){.image_hotspots_small_block_wrapper,.image_hotspots_cards_layer{display:none}.ih_for_mobile{display:block}.ih_for_mobile .image_hotspot_block{width:2.6rem;height:2.6rem}.ih_card_for_mobile{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-content:start;width:100%;margin:3rem auto 0;position:relative;max-width:30rem;margin-bottom:4px;min-height:0}.ih_card_for_mobile .image_hotspot_card{position:relative;top:auto;left:auto;right:auto;bottom:auto;grid-area:1 / 1;align-self:start;justify-self:center;width:100%;max-width:100%;margin:0;opacity:0;pointer-events:none;z-index:0;will-change:auto;transition:opacity .35s ease}.ih_card_for_mobile .image_hotspot_card.active{opacity:1;pointer-events:auto;z-index:1;box-shadow:0 0 10px #0000001a}.image_hotspots_img_wrapper{position:relative}}@media screen and (max-width:900px){.image_hotspots_small_block_wrapper{grid-template-columns:28rem;gap:1rem}.ih_side_titles{display:none}}@media screen and (max-width:640px){.ih_card_for_mobile{max-width:calc(100% - 10rem)}.ih_for_mobile .image_hotspot_block:not(.active){width:2rem;height:2rem}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/image-hotspots.css.map */