.gallery-header-item::after { content: ""; position: absolute; display: block; width: 16px; border-radius: 8px; opacity: 0; right: 50%; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); transition: .3s; height: 6px; outline: 4px solid rgba(0, 0, 0, .5); background: #fff; top: calc(100% + 5px); } .gallery-header-item.active::after { opacity: 1; transition: .3s; } .gallery-header-item.tab-indicator-style::after { display: none; } .gallery-header-item.left-vertical-line::before { content: ""; position: absolute; display: block; height: 20px; width: 1px; background-color: hsla(0, 0%, 100%, .25); right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 4px; } .product-gallery-swiper { width: calc(100vh - 230px); max-width: 75vw; } @media (max-width: 1023px) { .product-gallery-swiper { width: 100%; max-width: 100%; } } .product-gallery-swiper .swiper-wrapper { align-items: center; } .thumbnails div:first-child img { border-top-right-radius: 8PX; border-bottom-right-radius: 8PX; } .thumbnails div:last-child img { border-top-left-radius: 8PX; border-bottom-left-radius: 8PX; } .thumbnails-swiper .thumbnail.active::before { content: ""; position: absolute; display: block; width: 16px; height: 5px; border-radius: 8px; outline: 4px solid rgba(12, 12, 12, .5); background: #fff; right: 50%; top: 100%; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); transition: .3s; z-index: 3; } .thumbnails-swiper-vertical .white-gallery-tmb { border: 2px solid #e7e7e9; } .thumbnails-swiper-vertical .white-gallery-tmb.active { border: 2px solid #ff5c35; } .swiper-button-prev.custom, .swiper-button-next.custom { background-color: hsla(0, 0%, 100%, .5); height: 40px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 40px; box-shadow: 0px 1px 5px rgba(0, 0, 0, .2); border-radius: 50%; } .swiper-button-prev.custom-white, .swiper-button-next.custom-white { background-color: rgba(255, 255, 255, 0.8); height: 40px; width: 40px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); box-shadow: 0px 1px 5px rgba(0, 0, 0, .2); border-radius: 3px } .swiper-button-prev.custom::after, .swiper-button-next.custom::after, .swiper-button-prev.custom-white::after, .swiper-button-next.custom-white::after { display: none; } .play-icon { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; background: rgba(0, 0, 0, .467); border-radius: 50%; } .tooltip { position: absolute; background-color: var(--prk-color-primary, #ff650b); color: #fff; padding: 7px 16px; font-size: 11px; border-radius: 6px; top: -4px; right: 34px; box-shadow: 0px 2px 7.7px 0px #00000029; white-space: nowrap; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.3s ease; z-index: 4; user-select: none; } .tooltip::after { content: ""; position: absolute; top: 50%; right: -10px; margin-top: -5px; margin-left: -10px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent var(--prk-color-primary, #ff650b); } .tooltip.bottom{ top: 30px; right: -39px; } .pars-tooltip-text { position: absolute; background-color: #3f4064; color: #fff; padding: 7px 16px; font-size: 12px; line-height: 26px; border-radius: 6px; top: 26px; left: 0; box-shadow: 0px 2px 7.7px 0px #00000029; width: 285px; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.3s ease; z-index: 4; user-select: none; } .pars-tooltip-wrap:hover .pars-tooltip-text { visibility: visible; opacity: 1; } .tooltip.bottom::after{ top: -10%; right: 50px; margin-top: -7px; margin-left: -10px; border-color: transparent transparent var(--prk-color-primary, #ff650b) transparent; } .tooltip-trigger:hover+.tooltip { visibility: visible; opacity: 1; } .product-gallery { visibility: hidden; opacity: 0; transition: visibility 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } .product-gallery.show { visibility: visible; opacity: 1; transition: visibility 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } @media (max-width: 1023px) { .product-gallery { transform: translateY(100%); } .product-gallery.show { transform: translateY(0); } } .mobile-swiper-pagination { bottom: 34px !important; background-color: rgba(12, 12, 12, 0.6); padding: 7px 0; border-radius: 16px; } .mobile-swiper-pagination .swiper-pagination-bullet { background: #f5f5f5 !important; opacity: 0.5 !important; width: 7px !important; height: 7px !important; } .mobile-swiper-pagination .swiper-pagination-bullet-active { background: #fff !important; border-radius: 16px !important; opacity: 1 !important; } .popup-gallery-header-item.active::after { content: ""; position: absolute; display: block; left: 50%; bottom: 0; transform: translateX(-50%); transition: .3s; z-index: 3; background-color: #029A49; border-top-left-radius: 4px; border-top-right-radius: 4px; height: 4px; width: calc(100% - 16px); } .popup-gallery-header-item.active { color: #05BA58; } .popup-product-thumbnails .thumbnail.active { border: 2px solid #19bfd3; } .popup-product-gallery-wrapper { visibility: hidden; opacity: 0; transition: visibility 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } .popup-product-gallery-wrapper.show { visibility: visible; opacity: 1; transition: visibility 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } @media (max-width: 1023px) { .popup-product-gallery-wrapper { transform: translateY(100%); } .popup-product-gallery-wrapper.show { transform: translateY(0); } } .feature-item { position: relative; padding-right: 30px; margin-bottom: 10px; color: #81899A; font-size: 11px; } .feature-item::before { content: ''; width: 5px; height: 5px; background-color: var(--prk-color-gradient-start, #ff402d); border-radius: 50%; position: absolute; right: 0; top: 6px; z-index: 1; } .feature-item::after { content: ''; width: 1px; background-color: #EEEEEE; position: absolute; right: 2px; top: 11px; bottom: 0; height: 24px; z-index: 0; } .feature-item:last-child::after { display: none; } .snap-pay::before { background-color: #008EFA; } .snap-pay::after { height: 18px; } .snap-pay { margin-bottom: 4px; } .product-feature-tooltip { position: absolute; background-color: #3f4064; color: #fff; padding: calc(2 * 5px) calc(3 * 4px); font-size: 11px; line-height: 1.8; border-radius: 6px; top: 55px; right: 10px; box-shadow: 0px 2px 7.7px 0px #00000029; width: max-content; max-width: min(340px, calc(100vw - 32px)); white-space: normal; overflow-wrap: anywhere; word-break: break-word; box-sizing: border-box; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.3s ease; z-index: 4; user-select: none; } .product-feature-item:hover .product-feature-tooltip { visibility: visible; opacity: 1; } @media (min-width: 1024px) { .pr-sticky.sticky:has(.product-feature-item:hover) { z-index: 60; } } .feature-hidden.hidden{ display: none; } .view-all span { border-bottom: none; border-top: 1px solid #f0f0f1; flex-grow: 1; margin: 0; } .seller-tooltip { position: absolute; background-color: white; border: 1px solid #0000001f; padding: 16px; border-radius: 11px; box-shadow: 0px 2px 3px 0px rgb(169 169 169 / 32%), 0 4px 47px 21px rgb(36 29 48 / 4%), 0 4px 4px -2px rgb(91 94 101 / 0%); visibility: hidden; opacity: 0; transition: opacity 0.3s ease 0.2s, visibility 0.3s ease 0.2s; z-index: 1; right: 0px; top: 0px; min-width: 400px; transform: translate(432px, -10px); } .seller:hover .seller-tooltip { visibility: visible; opacity: 1; } .seller-feedback { display: flex; justify-content: space-around; text-align: center; margin-top: 15px; } .seller-feedback .seller-feedback-item { color: #303030; font-size: 13px; font-weight: 600; display: flex; align-items: center; flex-direction: column; gap: 10px; } .circle-progress { width: 84px; height: 84px; line-height: 84px; background: none; margin: 0 auto; box-shadow: none; position: relative; } .circle-progress:after { content: ""; width: 100%; height: 100%; border-radius: 50%; border: 7px solid #eee; position: absolute; top: 0; left: 0; } .circle-progress>span { width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0; z-index: 1; } .circle-progress .progress-left { left: 0; } .circle-progress .progress-bar { width: 100%; height: 100%; background: none; border-width: 7px; border-style: solid; position: absolute; top: 0; border-color: #ffb43e; } .circle-progress .progress-left .progress-bar { left: 100%; border-top-right-radius: 44px; border-bottom-right-radius: 44px; border-left: 0; -webkit-transform-origin: center left; transform-origin: center left; } .circle-progress .progress-right { right: 0; } .circle-progress .progress-right .progress-bar { left: -100%; border-top-left-radius: 44px; border-bottom-left-radius: 44px; border-right: 0; -webkit-transform-origin: center right; transform-origin: center right; } .circle-progress .progress-value { display: flex; border-radius: 50%; font-size: 14px; text-align: center; line-height: 20px; align-items: center; justify-content: center; height: 105%; font-weight: bold; } .circle-progress .progress-value div { color: #535353; font-size: 17px; } .circle-progress .progress-value span { font-size: 12px; text-transform: uppercase; } .seller-feedback-item.yellow .circle-progress .progress-bar { border-color: #d99a00; } .seller-feedback-item.green .circle-progress .progress-bar { border-color: #388e3c; } .seller-feedback-item.red .circle-progress .progress-bar { border-color: #e42525; } .circle-progress[data-percentage="1"] .progress-right .progress-bar { animation: loading-1 1s linear forwards; } .circle-progress[data-percentage="1"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="2"] .progress-right .progress-bar { animation: loading-2 1s linear forwards; } .circle-progress[data-percentage="2"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="3"] .progress-right .progress-bar { animation: loading-3 1s linear forwards; } .circle-progress[data-percentage="3"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="4"] .progress-right .progress-bar { animation: loading-4 1s linear forwards; } .circle-progress[data-percentage="4"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="5"] .progress-right .progress-bar { animation: loading-5 1s linear forwards; } .circle-progress[data-percentage="5"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="6"] .progress-right .progress-bar { animation: loading-6 1s linear forwards; } .circle-progress[data-percentage="6"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="7"] .progress-right .progress-bar { animation: loading-7 1s linear forwards; } .circle-progress[data-percentage="7"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="8"] .progress-right .progress-bar { animation: loading-8 1s linear forwards; } .circle-progress[data-percentage="8"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="9"] .progress-right .progress-bar { animation: loading-9 1s linear forwards; } .circle-progress[data-percentage="9"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="10"] .progress-right .progress-bar { animation: loading-10 1s linear forwards; } .circle-progress[data-percentage="10"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="11"] .progress-right .progress-bar { animation: loading-11 1s linear forwards; } .circle-progress[data-percentage="11"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="12"] .progress-right .progress-bar { animation: loading-12 1s linear forwards; } .circle-progress[data-percentage="12"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="13"] .progress-right .progress-bar { animation: loading-13 1s linear forwards; } .circle-progress[data-percentage="13"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="14"] .progress-right .progress-bar { animation: loading-14 1s linear forwards; } .circle-progress[data-percentage="14"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="15"] .progress-right .progress-bar { animation: loading-15 1s linear forwards; } .circle-progress[data-percentage="15"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="16"] .progress-right .progress-bar { animation: loading-16 1s linear forwards; } .circle-progress[data-percentage="16"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="17"] .progress-right .progress-bar { animation: loading-17 1s linear forwards; } .circle-progress[data-percentage="17"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="18"] .progress-right .progress-bar { animation: loading-18 1s linear forwards; } .circle-progress[data-percentage="18"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="19"] .progress-right .progress-bar { animation: loading-19 1s linear forwards; } .circle-progress[data-percentage="19"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="20"] .progress-right .progress-bar { animation: loading-20 1s linear forwards; } .circle-progress[data-percentage="20"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="21"] .progress-right .progress-bar { animation: loading-21 1s linear forwards; } .circle-progress[data-percentage="21"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="22"] .progress-right .progress-bar { animation: loading-22 1s linear forwards; } .circle-progress[data-percentage="22"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="23"] .progress-right .progress-bar { animation: loading-23 1s linear forwards; } .circle-progress[data-percentage="23"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="24"] .progress-right .progress-bar { animation: loading-24 1s linear forwards; } .circle-progress[data-percentage="24"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="25"] .progress-right .progress-bar { animation: loading-25 1s linear forwards; } .circle-progress[data-percentage="25"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="26"] .progress-right .progress-bar { animation: loading-26 1s linear forwards; } .circle-progress[data-percentage="26"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="27"] .progress-right .progress-bar { animation: loading-27 1s linear forwards; } .circle-progress[data-percentage="27"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="28"] .progress-right .progress-bar { animation: loading-28 1s linear forwards; } .circle-progress[data-percentage="28"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="29"] .progress-right .progress-bar { animation: loading-29 1s linear forwards; } .circle-progress[data-percentage="29"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="30"] .progress-right .progress-bar { animation: loading-30 1s linear forwards; } .circle-progress[data-percentage="30"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="31"] .progress-right .progress-bar { animation: loading-31 1s linear forwards; } .circle-progress[data-percentage="31"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="32"] .progress-right .progress-bar { animation: loading-32 1s linear forwards; } .circle-progress[data-percentage="32"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="33"] .progress-right .progress-bar { animation: loading-33 1s linear forwards; } .circle-progress[data-percentage="33"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="34"] .progress-right .progress-bar { animation: loading-34 1s linear forwards; } .circle-progress[data-percentage="34"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="35"] .progress-right .progress-bar { animation: loading-35 1s linear forwards; } .circle-progress[data-percentage="35"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="36"] .progress-right .progress-bar { animation: loading-36 1s linear forwards; } .circle-progress[data-percentage="36"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="37"] .progress-right .progress-bar { animation: loading-37 1s linear forwards; } .circle-progress[data-percentage="37"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="38"] .progress-right .progress-bar { animation: loading-38 1s linear forwards; } .circle-progress[data-percentage="38"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="39"] .progress-right .progress-bar { animation: loading-39 1s linear forwards; } .circle-progress[data-percentage="39"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="40"] .progress-right .progress-bar { animation: loading-40 1s linear forwards; } .circle-progress[data-percentage="40"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="41"] .progress-right .progress-bar { animation: loading-41 1s linear forwards; } .circle-progress[data-percentage="41"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="42"] .progress-right .progress-bar { animation: loading-42 1s linear forwards; } .circle-progress[data-percentage="42"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="43"] .progress-right .progress-bar { animation: loading-43 1s linear forwards; } .circle-progress[data-percentage="43"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="44"] .progress-right .progress-bar { animation: loading-44 1s linear forwards; } .circle-progress[data-percentage="44"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="45"] .progress-right .progress-bar { animation: loading-45 1s linear forwards; } .circle-progress[data-percentage="45"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="46"] .progress-right .progress-bar { animation: loading-46 1s linear forwards; } .circle-progress[data-percentage="46"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="47"] .progress-right .progress-bar { animation: loading-47 1s linear forwards; } .circle-progress[data-percentage="47"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="48"] .progress-right .progress-bar { animation: loading-48 1s linear forwards; } .circle-progress[data-percentage="48"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="49"] .progress-right .progress-bar { animation: loading-49 1s linear forwards; } .circle-progress[data-percentage="49"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="50"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="50"] .progress-left .progress-bar { animation: 0; } .circle-progress[data-percentage="51"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="51"] .progress-left .progress-bar { animation: loading-1 1s linear forwards 1s; } .circle-progress[data-percentage="52"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="52"] .progress-left .progress-bar { animation: loading-2 1s linear forwards 1s; } .circle-progress[data-percentage="53"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="53"] .progress-left .progress-bar { animation: loading-3 1s linear forwards 1s; } .circle-progress[data-percentage="54"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="54"] .progress-left .progress-bar { animation: loading-4 1s linear forwards 1s; } .circle-progress[data-percentage="55"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="55"] .progress-left .progress-bar { animation: loading-5 1s linear forwards 1s; } .circle-progress[data-percentage="56"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="56"] .progress-left .progress-bar { animation: loading-6 1s linear forwards 1s; } .circle-progress[data-percentage="57"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="57"] .progress-left .progress-bar { animation: loading-7 1s linear forwards 1s; } .circle-progress[data-percentage="58"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="58"] .progress-left .progress-bar { animation: loading-8 1s linear forwards 1s; } .circle-progress[data-percentage="59"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="59"] .progress-left .progress-bar { animation: loading-9 1s linear forwards 1s; } .circle-progress[data-percentage="60"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="60"] .progress-left .progress-bar { animation: loading-10 1s linear forwards 1s; } .circle-progress[data-percentage="61"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="61"] .progress-left .progress-bar { animation: loading-11 1s linear forwards 1s; } .circle-progress[data-percentage="62"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="62"] .progress-left .progress-bar { animation: loading-12 1s linear forwards 1s; } .circle-progress[data-percentage="63"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="63"] .progress-left .progress-bar { animation: loading-13 1s linear forwards 1s; } .circle-progress[data-percentage="64"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="64"] .progress-left .progress-bar { animation: loading-14 1s linear forwards 1s; } .circle-progress[data-percentage="65"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="65"] .progress-left .progress-bar { animation: loading-15 1s linear forwards 1s; } .circle-progress[data-percentage="66"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="66"] .progress-left .progress-bar { animation: loading-16 1s linear forwards 1s; } .circle-progress[data-percentage="67"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="67"] .progress-left .progress-bar { animation: loading-17 1s linear forwards 1s; } .circle-progress[data-percentage="68"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="68"] .progress-left .progress-bar { animation: loading-18 1s linear forwards 1s; } .circle-progress[data-percentage="69"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="69"] .progress-left .progress-bar { animation: loading-19 1s linear forwards 1s; } .circle-progress[data-percentage="70"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="70"] .progress-left .progress-bar { animation: loading-20 1s linear forwards 1s; } .circle-progress[data-percentage="71"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="71"] .progress-left .progress-bar { animation: loading-21 1s linear forwards 1s; } .circle-progress[data-percentage="72"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="72"] .progress-left .progress-bar { animation: loading-22 1s linear forwards 1s; } .circle-progress[data-percentage="73"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="73"] .progress-left .progress-bar { animation: loading-23 1s linear forwards 1s; } .circle-progress[data-percentage="74"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="74"] .progress-left .progress-bar { animation: loading-24 1s linear forwards 1s; } .circle-progress[data-percentage="75"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="75"] .progress-left .progress-bar { animation: loading-25 1s linear forwards 1s; } .circle-progress[data-percentage="76"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="76"] .progress-left .progress-bar { animation: loading-26 1s linear forwards 1s; } .circle-progress[data-percentage="77"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="77"] .progress-left .progress-bar { animation: loading-27 1s linear forwards 1s; } .circle-progress[data-percentage="78"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="78"] .progress-left .progress-bar { animation: loading-28 1s linear forwards 1s; } .circle-progress[data-percentage="79"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="79"] .progress-left .progress-bar { animation: loading-29 1s linear forwards 1s; } .circle-progress[data-percentage="80"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="80"] .progress-left .progress-bar { animation: loading-30 1s linear forwards 1s; } .circle-progress[data-percentage="81"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="81"] .progress-left .progress-bar { animation: loading-31 1s linear forwards 1s; } .circle-progress[data-percentage="82"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="82"] .progress-left .progress-bar { animation: loading-32 1s linear forwards 1s; } .circle-progress[data-percentage="83"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="83"] .progress-left .progress-bar { animation: loading-33 1s linear forwards 1s; } .circle-progress[data-percentage="84"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="84"] .progress-left .progress-bar { animation: loading-34 1s linear forwards 1s; } .circle-progress[data-percentage="85"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="85"] .progress-left .progress-bar { animation: loading-35 1s linear forwards 1s; } .circle-progress[data-percentage="86"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="86"] .progress-left .progress-bar { animation: loading-36 1s linear forwards 1s; } .circle-progress[data-percentage="87"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="87"] .progress-left .progress-bar { animation: loading-37 1s linear forwards 1s; } .circle-progress[data-percentage="88"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="88"] .progress-left .progress-bar { animation: loading-38 1s linear forwards 1s; } .circle-progress[data-percentage="89"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="89"] .progress-left .progress-bar { animation: loading-39 1s linear forwards 1s; } .circle-progress[data-percentage="90"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="90"] .progress-left .progress-bar { animation: loading-40 1s linear forwards 1s; } .circle-progress[data-percentage="91"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="91"] .progress-left .progress-bar { animation: loading-41 1s linear forwards 1s; } .circle-progress[data-percentage="92"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="92"] .progress-left .progress-bar { animation: loading-42 1s linear forwards 1s; } .circle-progress[data-percentage="93"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="93"] .progress-left .progress-bar { animation: loading-43 1s linear forwards 1s; } .circle-progress[data-percentage="94"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="94"] .progress-left .progress-bar { animation: loading-44 1s linear forwards 1s; } .circle-progress[data-percentage="95"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="95"] .progress-left .progress-bar { animation: loading-45 1s linear forwards 1s; } .circle-progress[data-percentage="96"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="96"] .progress-left .progress-bar { animation: loading-46 1s linear forwards 1s; } .circle-progress[data-percentage="97"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="97"] .progress-left .progress-bar { animation: loading-47 1s linear forwards 1s; } .circle-progress[data-percentage="98"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="98"] .progress-left .progress-bar { animation: loading-48 1s linear forwards 1s; } .circle-progress[data-percentage="99"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="99"] .progress-left .progress-bar { animation: loading-49 1s linear forwards 1s; } .circle-progress[data-percentage="100"] .progress-right .progress-bar { animation: loading-50 1s linear forwards; } .circle-progress[data-percentage="100"] .progress-left .progress-bar { animation: loading-50 1s linear forwards 1s; } @keyframes loading-1 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(3.6); transform: rotate(3.6deg); } } @keyframes loading-2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(7.2); transform: rotate(7.2deg); } } @keyframes loading-3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(10.8); transform: rotate(10.8deg); } } @keyframes loading-4 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(14.4); transform: rotate(14.4deg); } } @keyframes loading-5 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(18); transform: rotate(18deg); } } @keyframes loading-6 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(21.6); transform: rotate(21.6deg); } } @keyframes loading-7 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(25.2); transform: rotate(25.2deg); } } @keyframes loading-8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(28.8); transform: rotate(28.8deg); } } @keyframes loading-9 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(32.4); transform: rotate(32.4deg); } } @keyframes loading-10 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(36); transform: rotate(36deg); } } @keyframes loading-11 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(39.6); transform: rotate(39.6deg); } } @keyframes loading-12 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(43.2); transform: rotate(43.2deg); } } @keyframes loading-13 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(46.8); transform: rotate(46.8deg); } } @keyframes loading-14 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(50.4); transform: rotate(50.4deg); } } @keyframes loading-15 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(54); transform: rotate(54deg); } } @keyframes loading-16 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(57.6); transform: rotate(57.6deg); } } @keyframes loading-17 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(61.2); transform: rotate(61.2deg); } } @keyframes loading-18 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(64.8); transform: rotate(64.8deg); } } @keyframes loading-19 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(68.4); transform: rotate(68.4deg); } } @keyframes loading-20 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(72); transform: rotate(72deg); } } @keyframes loading-21 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(75.6); transform: rotate(75.6deg); } } @keyframes loading-22 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(79.2); transform: rotate(79.2deg); } } @keyframes loading-23 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(82.8); transform: rotate(82.8deg); } } @keyframes loading-24 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(86.4); transform: rotate(86.4deg); } } @keyframes loading-25 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(90); transform: rotate(90deg); } } @keyframes loading-26 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(93.6); transform: rotate(93.6deg); } } @keyframes loading-27 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(97.2); transform: rotate(97.2deg); } } @keyframes loading-28 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(100.8); transform: rotate(100.8deg); } } @keyframes loading-29 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(104.4); transform: rotate(104.4deg); } } @keyframes loading-30 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(108); transform: rotate(108deg); } } @keyframes loading-31 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(111.6); transform: rotate(111.6deg); } } @keyframes loading-32 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(115.2); transform: rotate(115.2deg); } } @keyframes loading-33 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(118.8); transform: rotate(118.8deg); } } @keyframes loading-34 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(122.4); transform: rotate(122.4deg); } } @keyframes loading-35 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(126); transform: rotate(126deg); } } @keyframes loading-36 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(129.6); transform: rotate(129.6deg); } } @keyframes loading-37 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(133.2); transform: rotate(133.2deg); } } @keyframes loading-38 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(136.8); transform: rotate(136.8deg); } } @keyframes loading-39 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(140.4); transform: rotate(140.4deg); } } @keyframes loading-40 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(144); transform: rotate(144deg); } } @keyframes loading-41 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(147.6); transform: rotate(147.6deg); } } @keyframes loading-42 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(151.2); transform: rotate(151.2deg); } } @keyframes loading-43 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(154.8); transform: rotate(154.8deg); } } @keyframes loading-44 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(158.4); transform: rotate(158.4deg); } } @keyframes loading-45 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(162); transform: rotate(162deg); } } @keyframes loading-46 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(165.6); transform: rotate(165.6deg); } } @keyframes loading-47 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(169.2); transform: rotate(169.2deg); } } @keyframes loading-48 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(172.8); transform: rotate(172.8deg); } } @keyframes loading-49 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(176.4); transform: rotate(176.4deg); } } @keyframes loading-50 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(180); transform: rotate(180deg); } } .copy-product-id-toast { background: linear-gradient(45deg, #66bb6a, #4caf50) !important; color: white !important; padding: 14px 0px !important; border-radius: 8px !important; width: auto !important; min-width: 200px !important; text-align: center !important; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2) !important; overflow: hidden; min-height: 36px !important; } .copy-product-id-toast.iziToast .iziToast-message { color: white !important; padding: 0 !important; } .copy-product-id-toast .iziToast-body { display: flex !important; align-items: center !important; width: 100% !important; height: 100% !important; min-height: 0; margin: 0 !important; padding: 0 10px 0 0 !important; } .copy-product-id-toast .iziToast-texts { margin: 0 !important; } .copy-product-id-toast .iziToast-message { margin: 0 !important; } @media (max-width: 1023px) { .iziToast-wrapper-topCenter { top: 20px; } .copy-product-id-toast.iziToast { margin: 5px 0; } } .remodal { direction: rtl; } .feedback-modal-close::before { font-size: 30px; } .feedback-product-lbl::before { top: 0; right: 16px; border-color: #D9D9D9; } @media (min-width:1024px){ .underline-border.similar-products-title::after { width: 70px; } .underline-border.introduction-title::after { width: 25px; } .underline-border.review-title::after { width: 70px; } } .product-tabs { position: relative; display: flex; } .product-tab-btn { position: relative; padding: 10px 18px; cursor: pointer; font-size: 16px; font-weight: 200; color: #333333; transition: color 0.2s ease-in-out; user-select: none; } .product-tab-btn i{ font-size: 20px; margin-left: 4px; } @media (max-width: 1023px) { .product-tab-btn { padding: 10px 14px; font-size: 12px; } } .product-tab-btn.active { color: var(--prk-color-primary, #ff650b); } .product-tab-border { position: absolute; bottom: 0; left: 0; height: 4px; background-color: var(--prk-color-primary, #ff650b); border-radius: 4px 4px 0 0; width: 0; opacity: 0; transition: left 0.2s ease-in-out, width 0.2s ease-in-out, opacity 0.2s ease-in-out; } .top-border .product-tab-border{ bottom: unset; } .top-hidden .product-tab-border{ display: none; } .more-btn svg { transition: transform 0.2s ease-in-out; transform: rotate(-90deg); } .more-btn.open svg { transform: rotate(90deg); transition: transform 0.2s ease-in-out; } p.more-content { max-height: 7em; overflow: hidden; position: relative; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; } p.more-content.open { max-height: none; -webkit-line-clamp: unset; line-clamp: unset; text-overflow: clip; } table.more-content>tbody>tr:not(:first-child) { display: none; } table.more-content.open>tbody>tr { display: block; } div.more-content { max-height: 6em; overflow: hidden; position: relative; line-height: 1.7; } div.more-content p:first-child { max-height: 7em; overflow: hidden; position: relative; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; } div.more-content.open p:first-child { max-height: none; -webkit-line-clamp: unset; line-clamp: unset; text-overflow: clip; line-height: 1.7; } div.more-content.open { max-height: none; } .star { fill: #E9E9EA; transition: fill 0.3s ease; } .star-step-1 { width: 45px; height: 45px; padding: 10px; } .star-step-2 { width: 30px; height: 30px; padding: 4px; } .star:hover, .star.active { fill: #F9A825; } .comments-star-rating { display: flex; gap: 4px; width: fit-content; } .comments-star { width: 20px; height: 20px; } .comments-star.full { fill: #F9A825; } .comments-star.half { fill: url(#halfGradient); } .comments-star.empty { fill: #E9E9EA; } .truncated-text-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .truncated-text-4 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .prk-item-comment .comment:not(:last-child) { border-bottom: 1px solid #e0e0e2; padding-bottom: 20px; margin-bottom: 20px; } .prk-cmt-media-badge{ display: none !important; } .js-pager .is-active { background-color: var(--prk-color-primary, #ef394e); color: white; } .ellipsis-1 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; line-clamp: 1; } .like-button { transition: transform 0.2s ease-in-out; } .like-button:active { transform: scale(0.5); } .like-icon { transition: fill 0.3s ease-in-out; } .liked .like-icon { fill: #01A049; animation: pop 0.3s ease-in-out; } @keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } #mobile_questions .answer { background: transparent; border: none; } .answers .answer:not(:first-child) { display: none; } .answers.show-more .answer:not(:first-child) { display: block; } .btn-disabled { background-color: #e0e0e2 !important; color: #fff !important; pointer-events: none !important; } .question input[type=radio]:checked+label { border-color: #FF7F50; color: #FF7F50; } .question input[type=radio]:checked+label svg { fill: #FF7F50; } .mnspna-range-slider { width: 100%; max-width: 300px; margin: 32px 0; } .range-slider__range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 5px; background: #d5d5d5; outline: none; transition: background 450ms ease-in; } .range-slider__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(to right,var(--prk-color-gradient-start, #ff3a30),var(--prk-color-gradient-end, #ff6a00)); cursor: pointer; border: none; box-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%); transition: background 0.3s ease; } .range-slider__range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(to right,var(--prk-color-gradient-start, #ff3a30),var(--prk-color-gradient-end, #ff6a00)); cursor: pointer; border: none; } .comment-form-mnspna { display: block !important; margin: 0 0 20px !important; width: 100% !important; max-width: 800px !important; } .comment-form-mnspna-media .mnspna-media-label { padding: 10px 0; display: block; text-align: right; } .comment-form-mnspna-media .mnspna-add-media-item { float: right; width: 72px; height: 72px; text-align: center; } .comment-form-mnspna-media .mnspna-media-items { float: right; width: calc(100% - 100px); padding-right: 10px; } .comment-form-mnspna-media .mnspna-add-media-item .mnspna-add-media-button { color: #00bfd6; } .comment-form-mnspna-media .mnspna-add-media-item .mnspna-add-media-button { display: block; width: 100%; height: 100%; border-radius: 15px; border: 2px dashed; position: relative; cursor: pointer; } .comment-form-mnspna-media .mnspna-add-media-item .mnspna-add-media-button .mnspna-add-button-plus { position: absolute; font-size: 50px; width: 30px; height: 30px; line-height: 30px; top: 25px; left: 50%; margin-left: -15px; } .comment-form-mnspna-media .mnspna-add-media-item .mnspna-add-media-button .mnspna-add-button-plus svg { width: 100%; height: 100%; display: block; } .comment-form-mnspna-media .mnspna-add-media-item .mnspna-add-media-button .mnspna-add-button-text { position: absolute; width: 100%; left: 0; height: 20px; line-height: 20px; font-size: 15px; top: 60px; } .comment-form-mnspna-media .mnspna-add-media-item .mnspna-add-media-button input[type=file] { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .comment-form-mnspna-media .mnspna-media-items .mnspna-media-item { float: right; height: 100px; width: 100px; margin: 0 0 10px 10px; border: 2px solid #d7d7d7; border-radius: 15px; position: relative; overflow: hidden; } .comment-form-mnspna-media .mnspna-media-items .mnspna-media-item img { width: 100%; height: auto; } .comment-form-mnspna-media .mnspna-media-items .mnspna-media-item .mnspna-media-delete { position: absolute; width: 100%; text-align: center; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); padding: 5px 0; color: #fff; cursor: pointer; opacity: 0; transition: all 0.1s ease; } .comment-form-mnspna-media .mnspna-media-items .mnspna-media-item:hover .mnspna-media-delete { opacity: 1; } .mnspna-clearfix:after { content: " "; display: block; clear: both; visibility: hidden; } @media (max-width: 1023px) { .mobile-info-overlay { background: white; position: relative; z-index: 2; overflow: hidden; border-radius: 1rem 1rem 0 0; box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.08); } } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .product-tabs-wrapper { will-change: transform, top; } @media (max-width: 1023px) { .product-tabs-wrapper.sticky-fix { position: fixed !important; left: 0; right: 0; background: white; z-index: 998; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } } @media (min-width:1024px){ .product-tabs-wrapper.no-desktop-sticky{ position: static !important; top: auto !important; } } @media (max-width: 1023px) { .product-tabs-sentinel { display: block; height: 1px; margin: 0; padding: 0; pointer-events: none; } .product-tabs-placeholder { display: none; height: 0; margin: 0; padding: 0; pointer-events: none; } .product-tabs-wrapper.sticky-fix { position: fixed !important; left: 0; right: 0; background: #fff; z-index: 998; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .product-tabs-wrapper.prk-mobile-main-sticky, .product-tabs-wrapper.sticky-fix.tabs-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none !important; will-change: auto; } .product-breadcrumb-nav { overflow: hidden; overflow-anchor: none; contain: layout paint; } .product-breadcrumb-nav.breadcrumb-hidden { display: block !important; height: var(--prk-breadcrumb-stable-height, auto) !important; min-height: var(--prk-breadcrumb-stable-height, 0px) !important; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; } } @media screen and (max-width: 1023px) { .remodal-wrapper { top: 0; bottom: 0; left: 0; right: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; padding: 0 !important; margin: 0 !important; overflow-y: auto; transform: translateY(100%); transition: transform 0.3s ease !important; } .remodal-overlay { top: 0; bottom: 0; left: 0; right: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; padding: 0 !important; margin: 0 !important; overflow-y: auto; transform: translateY(100%); transition: transform 0.3s ease !important; } .remodal { border-radius: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0 !important; transition: transform 0.3s ease !important; } .remodal-overlay.remodal-is-opened { transform: translateY(0); } .remodal-wrapper.remodal-is-opened { transform: translateY(0); } } .tooltip-top { display: inline-block; position: absolute; background-color: #414149; color: #fff; padding: 2px 12px; font-size: 11px; border-radius: 6px; bottom: 25px; right: -35px; box-shadow: 0px 2px 7.7px 0px #00000029; white-space: nowrap; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.3s ease; z-index: 4; user-select: none; } .new-chat:hover .tooltip-top { visibility: visible; opacity: 1; } .chatbox-hidden { bottom: -100% !important; opacity: 0; transform: scale(0.95); transition: all 0.3s ease; } .chatbox-visible { opacity: 1; transform: scale(1); transition: all 0.3s ease; } .chatbtn-hidden { transform: translateY(8rem); opacity: 0; transition: all 0.5s ease; } .chatbtn-visible { transform: translateY(0); opacity: 1; transition: all 0.5s ease; } .chat-btn-animation { background: linear-gradient(270deg, #00F5A0, #00D9F5, #00F5A0); background-size: 400% 400%; animation: gradientMove 2s ease infinite, glowPulse 2s ease-in-out infinite; box-shadow: 0 0 0px rgba(0, 245, 160, 0.4); } @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes glowPulse { 0% { box-shadow: 0 0 0px rgba(0, 245, 160, 0.4); } 50% { box-shadow: 0 0 20px rgba(0, 245, 160, 0.7), 0 0 30px rgba(0, 217, 245, 0.6); } 100% { box-shadow: 0 0 0px rgba(0, 245, 160, 0.4); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateY(0); } } .fade-in-up { animation-name: fadeInUp; animation-duration: 0.3s; animation-delay: 0s; } .glass-box { background: rgb(123 189 135 / 49%); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(4.7px); -webkit-backdrop-filter: blur(4.7px); border: 1px solid rgba(149, 206, 186, 0.18); } html.scroll-is-locked { overflow: hidden; -ms-touch-action: none; touch-action: none; } .comment-user-uploaded-video:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: transparent; text-align: center; content: attr(alt); background: #fff url(https://chanelo.shop/dist/image-placeholder.svg) no-repeat 50%; background-size: contain; width: 72px; height: 72px; } .comment-user-uploaded.uploading .comment-uploaded-img, .comment-user-uploaded.uploading .play-icon, .comment-user-uploaded.uploading .item-delete-icon { display: none !important; } .comment-user-uploaded.uploading .cancel-upload-icon, .comment-user-uploaded.uploading .uploading-filter, .comment-user-uploaded.uploading .upload-percentage { display: block !important; } .swiper-wrapper, .gallery-tab-indicator, .left-box-wrapper { will-change: transform; transform: translateZ(0); } .swiper-button-disabled{ display: none; } .thumbnails div:last-child img { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .prk-dislike-btn svg, .prk-like-btn svg { color: #a1a3a8; } .prk-like-btn.liked svg { color: #4caf50; } .prk-dislike-btn.liked svg { color: #b2001a; } #amazing-offer-wrapper.hidden{ display: none; } .prk-slide-toggle { transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease; overflow: hidden; } .prk-slide-open { max-height: 500px; opacity: 1; padding-top: 8px; padding-bottom: 8px; } .prk-slide-close { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } .pr-sticky-wrapper { position: relative; } .pr-sticky.sticky{ position: sticky !important; z-index: 50; } .pr-sticky-wrapper { display: block !important; } .pr-sticky-item { position: sticky; top: 100px; z-index: 30; } .pr-sticky-wrapper .elementor-column.pr-sticky-item { align-self: flex-start; position: sticky; top: 100px; z-index: 20; } .pr-sticky-wrapper > .elementor-container > .elementor-column { align-self: flex-start; } .seller-rate-container .divider { margin-right: 4px; margin-left: 4px; } .divider::before { content: ""; display: inline-block; height: 11px; width: 1px; background-color: #dfdfdf; position: relative; top: 3px; } #header { will-change: transform; } .product-tabs-wrapper { will-change: top; } .pr-follow-nav{ transition: top var(--pr-nav-t, .3s) var(--pr-nav-e, ease), margin-top var(--pr-nav-t, .3s) var(--pr-nav-e, ease), transform var(--pr-nav-t, .3s) var(--pr-nav-e, ease); will-change: top, margin-top, transform; } .copy-product-id-box:has(.copy-product-id-btn) ~ .prk-feedback-btn { border-left: 1px solid #EAEAEA; } .similar-products-swiper .swiper-wrapper{align-items:stretch} .similar-products-swiper .swiper-slide{height:auto} .prk-variant-pill.active { border-color: #000; border-width: 2px; } [data-prk-seller-items="1"] > :first-child { border-top-width: 0 !important; } body.single-product .notify-when-available-btn.prk-notify-source--theme.is-active:not([disabled]) { background: #fff !important; background-image: none !important; border: 1px solid var(--prk-color-primary, #ff650b) !important; color: var(--prk-color-primary, #ff650b) !important; box-shadow: none; } body.single-product .notify-when-available-btn.prk-notify-source--theme.is-active:not([disabled]):hover { background: #fff !important; border-color: var(--prk-color-primary-hover, var(--prk-color-primary, #ff650b)) !important; color: var(--prk-color-primary-hover, var(--prk-color-primary, #ff650b)) !important; } .notify-when-available-btn.is-active .pars-notify-icon, .notify-when-available-btn.is-active svg { color: inherit !important; fill: currentColor !important; } .prk-checkbox input[type="checkbox"] { display: none; } .prk-checkbox-lbl { display: block; position: relative; cursor: pointer; } .prk-checkbox-lbl::before { content: ""; position: absolute; top: -10px; right: 0; width: 18px; height: 18px; border: 1px solid #000; border-radius: 4px; } .prk-checkbox input[type="checkbox"]:checked+.prk-checkbox-lbl::before { background-color: var(--prk-color-primary, #ff650b); border: 1px solid var(--prk-color-primary, #ff650b); background-image: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.3575 5.7975C2.1675 5.7975 1.9775 5.7275 1.8275 5.5775L0.2175 3.9675C-0.0725 3.6775 -0.0725 3.1975 0.2175 2.9075C0.5075 2.6175 0.987499 2.6175 1.2775 2.9075L2.3575 3.9875L6.12775 0.2175C6.4175 -0.0725 6.8975 -0.0725 7.1875 0.2175C7.4775 0.5075 7.4775 0.9875 7.1875 1.2775L2.88775 5.5775C2.7375 5.7275 2.5475 5.7975 2.3575 5.7975Z' fill='%23fff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; } .product-size-el.size-el-outofstock { color: #969696; background-color: #f0f0f0; } .product-color-text-el.color-text-el-outofstock { color: #969696; background-color: #f0f0f0; cursor: not-allowed; } .product-color-text-el.color-text-el-outofstock div { filter: blur(0.8px); } .prk-has-tick { position: relative; } .prk-has-tick::after { content: ""; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: 14px 14px; } .prk-tick-white::after { background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'><path d='M20 6L9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"); } .prk-tick-black::after { background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'><path d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"); } .product-size-el.size-el-outofstock, .product-color-text-el.color-text-el-outofstock { position: relative; filter: grayscale(0.2) opacity(0.7); } .product-size-el.size-el-outofstock::before, .product-color-text-el.color-text-el-outofstock::before { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 46%, rgba(0,0,0,.15) 48%, rgba(0,0,0,.15) 52%, transparent 54%), linear-gradient(-45deg, transparent 46%, rgba(0,0,0,.15) 48%, rgba(0,0,0,.15) 52%, transparent 54%); pointer-events: none; border-radius: inherit; } .size-el-outofstock, .color-text-el-outofstock, .color-img-el-outofstock, .is-disabled { pointer-events: none !important; opacity: .65; filter: grayscale(15%); } .product-color-img-el.color-img-el-outofstock { position: relative; } .product-color-img-el.color-img-el-outofstock::after{ content:'ناموجود'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(to bottom, transparent, rgba(0,0,0,.4)); color:#fff; font-weight:600; font-size:12px; } .video-overlay{ cursor: pointer; } .play-icon { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; background: rgba(0, 0, 0, .467); border-radius: 50%; } .play-video-slide { transition: 0.5s all; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .popup-product-video-overlay:hover{ cursor: pointer; } .play-video-slide svg { color: #2B333F; transition: color 0.3s ease; } .play-video-slide.hover svg { color: rgba(115, 133, 159, 0.77); } .scrollbar-rounded::-webkit-scrollbar { width: 6px !important; } .scrollbar-rounded::-webkit-scrollbar-track { background: #1a1a1a !important; border-radius: 10px !important; } .scrollbar-rounded::-webkit-scrollbar-thumb { background: #555 !important; border-radius: 10px !important; } .scrollbar-rounded::-webkit-scrollbar-thumb:hover { background: #888 !important; } .scrollbar-rounded::-webkit-scrollbar-button { display: none; } @media (max-width: 1023px) { .scrollbar-rounded::-webkit-scrollbar { width: 4px !important; height: 4px !important; } .scrollbar-rounded::-webkit-scrollbar-track { background: transparent !important; } .scrollbar-rounded::-webkit-scrollbar-thumb { background-color: #f0f0f1 !important; border-radius: 10px !important; transition: background-color 0.3s !important; } .scrollbar-rounded::-webkit-scrollbar-thumb:hover { background-color: rgba(180, 180, 180, 0.6) !important; } .scrollbar-rounded { scrollbar-width: thin !important; scrollbar-color: #f0f0f1 !important; } } .scrollbar-rounded-white::-webkit-scrollbar { width: 6px !important; } .scrollbar-rounded-white::-webkit-scrollbar-track { background: #e0e0e0 !important; border-radius: 10px !important; } .scrollbar-rounded-white::-webkit-scrollbar-thumb { background: #999999; border-radius: 10px !important; } .scrollbar-rounded-white::-webkit-scrollbar-thumb:hover { background: #7a7a7a !important; } .scrollbar-rounded-white::-webkit-scrollbar-button { display: none !important; } @media (max-width: 1023px) { .scrollbar-rounded-white::-webkit-scrollbar { width: 4px !important; height: 4px !important; } .scrollbar-rounded-white::-webkit-scrollbar-track { background: transparent; } .scrollbar-rounded-white::-webkit-scrollbar-thumb { background-color: #f0f0f1 !important; border-radius: 10px !important; transition: background-color 0.3s !important; } .scrollbar-rounded-white::-webkit-scrollbar-thumb:hover { background-color: rgba(180, 180, 180, 0.6); } .scrollbar-rounded-white { scrollbar-width: thin !important; scrollbar-color: #f0f0f1 !important; } } @media (max-width: 990px){ .product-gallery .swiper.thumbnails-swiper-vertical{ padding-top: 1rem; padding-bottom: 1rem; padding-left: 10px; padding-right: 60px; z-index: 20; position: fixed; } #success-message-add-to-cart-modal .prk-ins-box{ margin-left: 0; margin-right: 0; } } @media (max-width: 1023px) { .pr-main-container { --prk-mobile-gallery-initial-top: 0px; --prk-mobile-gallery-initial-space: 280px; --prk-mobile-gallery-fixed-space: var(--prk-mobile-gallery-initial-space, 280px); } .pr-main-container:has(> .mobile-thumbnails-swiper.prk-mobile-gallery-style-mosaic.fixed) { --prk-mobile-gallery-initial-space: calc(clamp(220px, 60vw, 300px) + 20px); --prk-mobile-gallery-fixed-space: var(--prk-mobile-gallery-initial-space); } .pr-main-container:has(> .mobile-thumbnails-swiper.prk-mobile-gallery-style-stacked.fixed) { --prk-mobile-gallery-initial-space: 300px; --prk-mobile-gallery-fixed-space: 300px; } .pr-main-container > .mobile-thumbnails-swiper.fixed { position: -webkit-sticky; position: sticky; top: var(--prk-mobile-gallery-initial-top, 0px); } .pr-main-container > .mobile-thumbnails-swiper ~ .mobile-info-overlay { margin-top: -14px; } } .product-tabs-wrapper[data-tab-sticky-desktop="false"] { position: relative !important; top: 0 !important; } .prk-tab-ajax-loader-box{ min-height: 120px; width: 100%; border: 1px solid #f0f0f1; border-radius: 12px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; color: #81858b; font-size: 12px; line-height: 1.8; } .prk-tab-ajax-loader-dots{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 18px; } .prk-tab-ajax-loader-dots span{ width: 8px; height: 8px; border-radius: 999px; background: #a1a3a8; opacity: .45; animation: prk-tab-loader-dot 1s infinite ease-in-out; } .prk-tab-ajax-loader-dots span:nth-child(2){animation-delay:.15s;} .prk-tab-ajax-loader-dots span:nth-child(3){animation-delay:.3s;} .prk-tab-ajax-shell.is-loading .prk-tab-ajax-loader-box{ pointer-events: none; } .prk-tab-ajax-error{ width: 100%; min-height: 96px; border: 1px solid #ffe0d2; border-radius: 12px; background: #fff7f3; color: var(--prk-color-primary, #ff4b0e); display: flex; align-items: center; justify-content: center; padding: 18px; font-size: 12px; font-weight: 600; } @keyframes prk-tab-loader-dot{ 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-5px); opacity: 1; } } .prk-global-loader-inline, .prk-tab-ajax-loader-box.prk-global-loader-inline{ min-height:120px; width:100%; border:1px solid #f0f0f1; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; padding:24px; color:#81858b; } .prk-global-loader-inline svg, .prk-tab-ajax-loader-box.prk-global-loader-inline svg{ width:33px; height:28px; max-width:33px; max-height:28px; display:block; } .prk-global-loader-overlay{ --prk-loader-overlay-bg:rgba(0,0,0,.35); --prk-loader-card-bg:#fff; --prk-loader-dots-color:#a1a3a8; position:fixed; inset:0; z-index:999999; display:flex; align-items:center; justify-content:center; background:var(--prk-loader-overlay-bg); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease,visibility .18s ease; } .prk-global-loader-overlay.is-visible{ opacity:1; visibility:visible; pointer-events:auto; } .prk-global-loader-card{ width:min(176px,calc(100vw - 44px)); min-height:146px; border-radius:8px; background:var(--prk-loader-card-bg); box-shadow:0 10px 32px rgba(0,0,0,.12); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:22px 20px; } .prk-global-loader-card__logo{ max-width:108px; max-height:58px; object-fit:contain; display:block; } .prk-global-loader-card__dots svg{ width:33px; height:28px; fill:var(--prk-loader-dots-color); display:block; } .prk-gallery-media-loading{ position:fixed; inset:0; z-index:1000001; display:none; align-items:center; justify-content:center; background:transparent; color:#fff; pointer-events:auto; } .prk-gallery-assets-loading:not(.prk-gallery-assets-loading--page-card) > :not(.prk-gallery-media-loading){ opacity:0 !important; pointer-events:none !important; } .prk-gallery-assets-loading .prk-gallery-media-loading{ display:flex; } .prk-gallery-media-loading__inner{ width:64px; min-height:46px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(0,0,0,.18); backdrop-filter:blur(3px); } .prk-gallery-media-loading__inner svg{ width:33px; height:28px; fill:#a1a3a8; display:block; } [data-prk-lazy-src-key], [data-prk-lazy-poster-key]{ background:#f1f2f4; } .product-gallery [data-prk-lazy-src-key], .product-gallery [data-prk-lazy-poster-key]{ background:#161616; } @media (max-width: 1023px) { .prk-mobile-gallery-mosaic { --prk-mgm-gap: 12px; --prk-mgm-big: clamp(220px, 60vw, 300px); --prk-mgm-small: calc((var(--prk-mgm-big) - var(--prk-mgm-gap)) / 2); position: relative; width: 100%; min-height: calc(var(--prk-mgm-big) + 20px); background: #fff; overflow: hidden; direction: rtl; overscroll-behavior-x: contain; overflow-anchor: none; } .prk-mobile-gallery-mosaic__scroll { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; overscroll-behavior: contain; overscroll-behavior-x: contain; overscroll-behavior-inline: contain; padding: 10px 4px; } .prk-mobile-gallery-mosaic__track { display: flex; align-items: center; gap: var(--prk-mgm-gap); width: max-content; min-width: 100%; } .prk-mobile-gallery-mosaic__group { display: flex; align-items: center; gap: var(--prk-mgm-gap); flex: 0 0 auto; scroll-snap-align: start; } .prk-mobile-gallery-mosaic__side { display: flex; flex-direction: column; gap: var(--prk-mgm-gap); flex: 0 0 auto; } .prk-mobile-gallery-mosaic__card, .prk-mobile-gallery-mosaic__summary-tile { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; border-radius: 8px; background: #f5f5f5; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .prk-mobile-gallery-mosaic__card--big { width: var(--prk-mgm-big); height: var(--prk-mgm-big); } .prk-mobile-gallery-mosaic__card--small { width: var(--prk-mgm-small); height: var(--prk-mgm-small); } .prk-mobile-gallery-mosaic__card img, .prk-mobile-gallery-mosaic__summary-tile img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .prk-mobile-gallery-play { --prk-play-size: 40px; position: absolute; inset-inline-start: 50%; top: 50%; width: var(--prk-play-size); height: var(--prk-play-size); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 999px; color: #fff; background: rgba(0, 0, 0, .48); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(3px); z-index: 2; pointer-events: none; } [dir="rtl"] .prk-mobile-gallery-play, .rtl .prk-mobile-gallery-play { transform: translate(50%, -50%); } .prk-mobile-gallery-mosaic__summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 0 0 auto; width: min(367px, calc(100vw - 28px)); height: var(--prk-mgm-big); padding: 10px 12px; background: #fff; scroll-snap-align: start; } .prk-mobile-gallery-mosaic__summary-tile, .prk-mobile-gallery-mosaic__summary-action { min-width: 0; min-height: 0; border-radius: 7px; } .prk-mobile-gallery-mosaic__summary-label { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 8px; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.7; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.72) 100%); z-index: 1; pointer-events: none; font-family: prk-font !important; } .prk-mobile-gallery-mosaic__summary-action { display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; background: #fff; } .prk-mobile-gallery-mosaic__all-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 9px; color: #ef4056; background: #fff1f3; font-size: 12px; font-weight: 700; white-space: nowrap; } .prk-mobile-gallery-mosaic__overlay { position: absolute; right: 0; left: 0; bottom: 10px; z-index: 5; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 16px 0 10px; pointer-events: none; } .prk-mobile-gallery-mosaic__stats-slot { position: relative; min-width: 0; flex: 1 1 auto; height: 30px; } .prk-mobile-gallery-mosaic__stats-slot .prk-mobile-gallery-stats { right: 0; bottom: 0; } .prk-mobile-gallery-mosaic__progress { display: flex; align-items: center; gap: 8px; height: 20px; padding: 4px 8px; border-radius: 999px; color: #fff; background: rgba(0, 0, 0, .58); border: 1px solid rgba(255, 255, 255, .18); pointer-events: none; flex: 0 0 auto; } .prk-mobile-gallery-mosaic__count { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; line-height: 1; } .prk-mobile-gallery-mosaic__progress-sep { width: 2px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .65); } .prk-mobile-gallery-mosaic__progress-track { position: relative; width: 40px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .55); overflow: hidden; } .prk-mobile-gallery-mosaic__progress-track > span { position: absolute; top: 0; right: 0; width: 8px; height: 4px; border-radius: 999px; background: #fff; transform: translateX(0); will-change: transform; } .prk-mobile-gallery-stack { --prk-mgs-size: min(280px, calc(100vw - 112px)); position: relative; width: 100%; height: 300px; min-height: 300px; background: #fff; overflow: hidden; direction: rtl; overflow-anchor: none; } .prk-mobile-gallery-stack__scroll { width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; overscroll-behavior-y: contain; overscroll-behavior-block: contain; scroll-snap-type: y proximity; padding: 12px 0 62px; } .prk-mobile-gallery-stack__track { width: 100%; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; } .prk-mobile-gallery-stack__card { position: relative; width: var(--prk-mgs-size); height: var(--prk-mgs-size); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; background: #f5f5f5; cursor: pointer; user-select: none; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; } .prk-mobile-gallery-stack__card img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .prk-mobile-gallery-stack__label { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 9px; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.7; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.72) 100%); z-index: 1; pointer-events: none; } .prk-mobile-gallery-stack__card--action { gap: 12px; flex-direction: column; color: #303030; background: #fff; } .prk-mobile-gallery-stack .prk-mobile-gallery-mosaic__overlay { bottom: 14px; } .prk-mobile-gallery-stack .prk-mobile-gallery-mosaic__stats-slot { height: 30px; } } @media (max-width: 1023px) { .mobile-thumbnails-swiper.prk-mobile-gallery-overlay { overflow: visible; } .prk-mobile-gallery-pull-handle { position: absolute; right: 0; left: 0; bottom: -16px; z-index: 6; pointer-events: none; } .prk-mobile-gallery-pull-handle > div { width: 40px; height: 5px; border-radius: 999px; background: #f0f0f1; } .prk-mobile-product-info-head { direction: rtl; min-width: 0; } .prk-mobile-product-info-head__links { min-width: 0; } .prk-mobile-product-info-head__link { min-width: 0; color: #81858b; line-height: 22px; } .prk-mobile-product-info-head__sep { color: #424750; opacity: .9; } .prk-mobile-action-icons-inline, .prk-mobile-product-info-head__actions { display: inline-flex; align-items: center; } .prk-mobile-action-icons-inline__btn { width: 32px; height: 32px; padding: 6px; border: 0; background: transparent; color: #424750; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } .prk-mobile-action-icons-inline__btn svg, .prk-mobile-action-icons-inline__btn img { width: 20px; height: 20px; } } .reset_variations.thwvsf-variation-link.pars-reset-variations.is-active{ display: inline-block !important; }