.idm__hotspot .btn.add_to_basket__link{ margin-top: 0; } .idm__hotspot .add_to_basket{ display: flex; } .idm__hotspot .add_to_basket.--range{ flex-direction: column; } .idm__hotspot .idm-products-banner__qty{ display: flex; justify-content: space-between; width: 100%; align-items: center; gap: 1rem; } .idm__hotspot .idm-products-banner__qty-input{ height: 3rem; text-align: center; border: 1px solid #ccc; width: 60%; max-width: unset; min-width: unset; } .idm__hotspot .idm-products-banner__qty button{ background: #000; height: 3rem; width: 3rem; color: #fff; border-radius: 0.5rem; min-width: 3rem; } @keyframes idm-skeleton-loading { to { background-position-x: -200%; } } .idm__hotspot.idm-loading{ position: relative; overflow: hidden; transition: none; border-radius: 8px; background: #eee; background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%); background-size: 200% 100%; animation: 1.5s idm-skeleton-loading linear infinite; width: 100%; height: 50rem; } .idm__hotspot.idm-loading .hotspot{ opacity: 0; } @media (max-width: 756px) { .idm__hotspot.idm-loading{ width: 100%; height: 50rem; } } /* SWIPER PROGRESS */ .idm-scrollbar{ flex: 1; height: 2px!important; position: relative!important; margin-top: 2rem; cursor: grab; } .idm-scrollbar.--drag-start .idm-progress{ transition: none; } .idm-progress{ position: absolute; z-index: 10; height: calc(100% + 2px); background-color: #0d0d0d; left: 0; top: -1px; transition: all 0.3s; border-radius: 5px; } /* tooltip */ .idm_tooltip{ --tooltip-background: #111; --tooltip-border: #999; --tooltip-color: #fff; position: relative; &__info_icon{ color: var(--tooltip-border); display: inline-block; &:before{ content: ""; display: block; width: 1.2rem; height: 1.2rem; margin-left: 0.5rem; cursor: pointer; vertical-align: bottom; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='idm_tooltip__info_icon' viewBox='0 0 16 16'%3E%3Cpath d='M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14.667A6.667,6.667,0,1,1,14.667,8,6.667,6.667,0,0,1,8,14.667Z' fill='currentColor'%3E%3C/path%3E%3Cpath d='M11.333,10h-.667a.667.667,0,1,0,0,1.333h.667v4a.667.667,0,0,0,1.333,0v-4A1.333,1.333,0,0,0,11.333,10Z' transform='translate(-3.333 -3.333)' fill='currentColor'%3E%3C/path%3E%3Ccircle cx='1' cy='1' r='1' transform='translate(7 3.333)' fill='currentColor'%3E%3C/circle%3E%3C/svg%3E"); background-size: cover; } } &__content{ position: absolute; opacity: 0; pointer-events: none; transition: opacity 0.2s; border-radius: 5px; background: var(--tooltip-background); color: var(--tooltip-color); border: 1px solid var(--tooltip-border); bottom: 150%; padding: 0.5rem 1rem; @media @tablet{ &.--one-line{ white-space: nowrap; } } &.--visible{ opacity: 1; pointer-events: auto; } } } /* favorite */ .product__additional{ position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.5rem; z-index: 1; &> *{ cursor: pointer; } } .product__favorite{ display: block; color: #111; &::before{ content: '\E86D'; font-family: FontAwesome; // font-size: 2.6rem; font-size: 3rem; height: 2.9rem; } &:hover{ opacity: 0.6; } } /* COMPARE */ .idm-products-banner__compare-btn{ .idm-products-banner__compare-icon{ height: 100%; } &.--success { svg { display: none; } &::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath d='M10.0516 18.5L4.35156 12.8L5.77656 11.375L10.0516 15.65L19.2266 6.475L20.6516 7.9L10.0516 18.5Z' fill='%23009263'/%3E%3C/svg%3E"); width: 3rem; height: 3rem; } } &.--loading:not(.--success) { } &:not(.--success):hover { opacity: 0.6; } } .idm-products-banner__compare-btn.--success { display: flex; align-items: end; } /* opinions */ .product__opinions{ display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; } .product__opinions .icon-star{ color: #ffbc00; } .product__opinions .icon-star:not(.--active)::before{ content: "\f006"; } /* second image */ .product__image.--second{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .product__icon{ .product__image{ transition: opacity .25s; } .product__image.--second{ opacity: 0; } @media (max-width: 978px){ .product__image.--second{ display: none!important; } } @media (min-width: 979px){ &.--toggle-icon:has(.product__image.--second){ .product__image.--first{ opacity: 0; } .product__image.--second{ opacity: 1; } } } }