.product-color-group.tooltip-style .product-color-text-el.color-text-el-outofstock div { filter: unset; } .product-color-text-el.color-text-el-outofstock,.product-size-el.size-el-outofstock { color: #969696; background-color: #f0f0f0; cursor: not-allowed; filter: blur(1px); } .out_of_stockX::after { position: absolute; content: " " !important; width: 100%; height: 1px; background: #FF0000 !important; left: 0; right: 0; bottom: 0; top: 50%; visibility: visible; opacity: 1; border: 0; margin: 0 !important; padding: 0 !important; min-width: auto; -webkit-transform-origin: center; transform-origin: center; z-index: 2; } body.single-product, .prk-smart-variable-modal { --prk-swatch-active-color: var(--prk-color-link, var(--prk-link-color, var(--prk-color-primary, #42b0ff))); } body.single-product .product-color-text-el.color-text-el-active, .prk-smart-variable-modal .product-color-text-el.color-text-el-active { border-color: var(--prk-swatch-color-active-border, var(--prk-swatch-active-color)) !important; } body.single-product .product-size-el.size-el-active, .prk-smart-variable-modal .product-size-el.size-el-active { border-color: var(--prk-swatch-label-active-border, var(--prk-swatch-active-color)) !important; } body.single-product .product-color-img-el.color-img-el-active, .prk-smart-variable-modal .product-color-img-el.color-img-el-active { border-color: var(--prk-swatch-image-active-border, var(--prk-swatch-active-color)) !important; } body.single-product .product-size-el.size-el-active, body.single-product .product-color-text-el.color-text-el-active, .prk-smart-variable-modal .product-size-el.size-el-active, .prk-smart-variable-modal .product-color-text-el.color-text-el-active { color: var(--prk-swatch-active-color) !important; } .product-color-group.circle-style .product-color-text-el-tooltip{ margin: 0 10px; } .product-color-group.circle-style .color-circle{ width: 20px; height: 20px; } .product-color-group.tooltip-style .product-color-text-el .product-color-text-el-tooltip { position: absolute; background-color: #3f4064; color: #fff; padding: 12px 14px; font-size: 12px; border-radius: 4px; top: calc(100% + 8px); 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; } .product-color-group.tooltip-style .product-color-text-el:hover .product-color-text-el-tooltip { visibility: visible; opacity: 1; } .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; } .product-color-group.tooltip-style .prk-has-tick::after { background-size: 22px 22px; } .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-color-group.tooltip-style .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='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); } .product-color-group.tooltip-style .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='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); } .product-color-group.tooltip-style .product-color-text-el .product-color-text-el-tooltip { position: absolute; background-color: #3f4064; color: #fff; padding: 12px 14px; font-size: 12px; border-radius: 4px; top: calc(100% + 8px); 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; } .product-color-group.tooltip-style .product-color-text-el:hover .product-color-text-el-tooltip { visibility: visible; opacity: 1; } .prk-swatch-floating-tooltip { --prk-swatch-tooltip-bg: #111827; --prk-swatch-tooltip-color: #ffffff; --prk-swatch-tooltip-radius: 10px; --prk-swatch-tooltip-font-size: 12px; --prk-swatch-tooltip-font-weight: 500; --prk-swatch-tooltip-line-height: 1.5; --prk-swatch-tooltip-padding-y: 8px; --prk-swatch-tooltip-padding-x: 12px; --prk-swatch-tooltip-max-width: 260px; --prk-swatch-tooltip-shadow: 0 10px 30px rgba(15, 23, 42, 0.16); --prk-swatch-tooltip-gap: 8px; --prk-swatch-tooltip-arrow-size: 6px; --prk-swatch-tooltip-z: 999999; --prk-swatch-tooltip-width: max-content; --prk-swatch-tooltip-height: auto; --prk-swatch-tooltip-border-width: 0px; --prk-swatch-tooltip-border-color: transparent; --prk-swatch-tooltip-duration: 220ms; --prk-swatch-tooltip-distance: 10px; --prk-swatch-tooltip-easing: cubic-bezier(.22, .61, .36, 1); position: fixed; left: -9999px; top: -9999px; z-index: var(--prk-swatch-tooltip-z); width: var(--prk-swatch-tooltip-width); max-width: min(var(--prk-swatch-tooltip-max-width), calc(100vw - 24px)); pointer-events: none; opacity: 0; visibility: hidden; transform: translate3d(0, 0, 0) scale(1); transition: opacity var(--prk-swatch-tooltip-duration) var(--prk-swatch-tooltip-easing), transform var(--prk-swatch-tooltip-duration) var(--prk-swatch-tooltip-easing), visibility 0s linear var(--prk-swatch-tooltip-duration); will-change: opacity, transform; } .prk-swatch-floating-tooltip.is-open { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0) scale(1); transition: opacity var(--prk-swatch-tooltip-duration) var(--prk-swatch-tooltip-easing), transform var(--prk-swatch-tooltip-duration) var(--prk-swatch-tooltip-easing), visibility 0s linear 0s; } .prk-swatch-floating-tooltip[data-animation="none"] { transition: none !important; transform: none !important; } .prk-swatch-floating-tooltip[data-animation="fade"] { transform: none; } .prk-swatch-floating-tooltip[data-animation="vi_move"][data-side="top"] { transform: translate3d(0, calc(var(--prk-swatch-tooltip-distance) * -1), 0); } .prk-swatch-floating-tooltip[data-animation="vi_move"][data-side="bottom"] { transform: translate3d(0, var(--prk-swatch-tooltip-distance), 0); } .prk-swatch-floating-tooltip[data-animation="vi_move"][data-side="left"] { transform: translate3d(calc(var(--prk-swatch-tooltip-distance) * -1), 0, 0); } .prk-swatch-floating-tooltip[data-animation="vi_move"][data-side="right"] { transform: translate3d(var(--prk-swatch-tooltip-distance), 0, 0); } .prk-swatch-floating-tooltip[data-animation="slide"][data-side="top"] { transform: translate3d(0, var(--prk-swatch-tooltip-distance), 0); } .prk-swatch-floating-tooltip[data-animation="slide"][data-side="bottom"] { transform: translate3d(0, calc(var(--prk-swatch-tooltip-distance) * -1), 0); } .prk-swatch-floating-tooltip[data-animation="slide"][data-side="left"] { transform: translate3d(var(--prk-swatch-tooltip-distance), 0, 0); } .prk-swatch-floating-tooltip[data-animation="slide"][data-side="right"] { transform: translate3d(calc(var(--prk-swatch-tooltip-distance) * -1), 0, 0); } .prk-swatch-floating-tooltip[data-animation="scale"] { transform: scale(.92); } .prk-swatch-floating-tooltip[data-animation="pop"][data-side="top"] { transform: translate3d(0, 6px, 0) scale(.9); } .prk-swatch-floating-tooltip[data-animation="pop"][data-side="bottom"] { transform: translate3d(0, -6px, 0) scale(.9); } .prk-swatch-floating-tooltip[data-animation="pop"][data-side="left"] { transform: translate3d(6px, 0, 0) scale(.9); } .prk-swatch-floating-tooltip[data-animation="pop"][data-side="right"] { transform: translate3d(-6px, 0, 0) scale(.9); } .prk-swatch-floating-tooltip.is-open { transform: translate3d(0, 0, 0) scale(1) !important; } .prk-swatch-floating-tooltip__inner { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: var(--prk-swatch-tooltip-height); min-height: 32px; max-width: 100%; padding: var(--prk-swatch-tooltip-padding-y) var(--prk-swatch-tooltip-padding-x); border-radius: var(--prk-swatch-tooltip-radius); border: var(--prk-swatch-tooltip-border-width) solid var(--prk-swatch-tooltip-border-color); background: var(--prk-swatch-tooltip-bg); color: var(--prk-swatch-tooltip-color); font-size: var(--prk-swatch-tooltip-font-size); font-weight: var(--prk-swatch-tooltip-font-weight); line-height: var(--prk-swatch-tooltip-line-height); box-shadow: var(--prk-swatch-tooltip-shadow); white-space: normal; text-align: center; box-sizing: border-box; } .prk-swatch-floating-tooltip__inner::after { content: ""; position: absolute; width: calc(var(--prk-swatch-tooltip-arrow-size) * 2); height: calc(var(--prk-swatch-tooltip-arrow-size) * 2); background: var(--prk-swatch-tooltip-bg); transform: rotate(45deg); } .prk-swatch-floating-tooltip[data-side="top"] .prk-swatch-floating-tooltip__inner::after { left: 50%; bottom: calc(var(--prk-swatch-tooltip-arrow-size) * -1); margin-left: calc(var(--prk-swatch-tooltip-arrow-size) * -1); } .prk-swatch-floating-tooltip[data-side="bottom"] .prk-swatch-floating-tooltip__inner::after { left: 50%; top: calc(var(--prk-swatch-tooltip-arrow-size) * -1); margin-left: calc(var(--prk-swatch-tooltip-arrow-size) * -1); } .prk-swatch-floating-tooltip[data-side="left"] .prk-swatch-floating-tooltip__inner::after { right: calc(var(--prk-swatch-tooltip-arrow-size) * -1); top: 50%; margin-top: calc(var(--prk-swatch-tooltip-arrow-size) * -1); } .prk-swatch-floating-tooltip[data-side="right"] .prk-swatch-floating-tooltip__inner::after { left: calc(var(--prk-swatch-tooltip-arrow-size) * -1); top: 50%; margin-top: calc(var(--prk-swatch-tooltip-arrow-size) * -1); } .prk-variation-form--hide-reset .reset_variations { display: none !important; } .prk-swatch-floating-tooltip { --prk-swatch-tooltip-bg: #111827; --prk-swatch-tooltip-color: #fff; --prk-swatch-tooltip-radius: 10px; --prk-swatch-tooltip-font-size: 12px; --prk-swatch-tooltip-font-weight: 500; --prk-swatch-tooltip-line-height: 1.5; --prk-swatch-tooltip-padding-y: 8px; --prk-swatch-tooltip-padding-x: 12px; --prk-swatch-tooltip-max-width: 260px; --prk-swatch-tooltip-width: auto; --prk-swatch-tooltip-height: auto; --prk-swatch-tooltip-border-width: 0px; --prk-swatch-tooltip-border-color: transparent; --prk-swatch-tooltip-gap: 8px; --prk-swatch-tooltip-arrow-size: 6px; --prk-swatch-tooltip-duration: 220ms; --prk-swatch-tooltip-distance: 10px; --prk-swatch-tooltip-easing: cubic-bezier(.22, .61, .36, 1); position: fixed; z-index: 999999; left: -9999px; top: -9999px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(var(--prk-swatch-tooltip-distance)); transition: opacity var(--prk-swatch-tooltip-duration) var(--prk-swatch-tooltip-easing), transform var(--prk-swatch-tooltip-duration) var(--prk-swatch-tooltip-easing), visibility var(--prk-swatch-tooltip-duration) var(--prk-swatch-tooltip-easing); } .prk-swatch-floating-tooltip.is-open { opacity: 1; visibility: visible; transform: translate(0, 0); } .prk-swatch-floating-tooltip__inner { position: relative; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: var(--prk-swatch-tooltip-width); height: var(--prk-swatch-tooltip-height); max-width: min(var(--prk-swatch-tooltip-max-width), calc(100vw - 24px)); padding: var(--prk-swatch-tooltip-padding-y) var(--prk-swatch-tooltip-padding-x); border: var(--prk-swatch-tooltip-border-width) solid var(--prk-swatch-tooltip-border-color); border-radius: var(--prk-swatch-tooltip-radius); background: var(--prk-swatch-tooltip-bg); color: var(--prk-swatch-tooltip-color); font-size: var(--prk-swatch-tooltip-font-size); font-weight: var(--prk-swatch-tooltip-font-weight); line-height: var(--prk-swatch-tooltip-line-height); white-space: nowrap; text-align: center; box-shadow: 0 10px 30px rgba(15, 23, 42, .16); } .prk-swatch-floating-tooltip__inner::after { content: ""; position: absolute; width: calc(var(--prk-swatch-tooltip-arrow-size) * 2); height: calc(var(--prk-swatch-tooltip-arrow-size) * 2); background: var(--prk-swatch-tooltip-bg); transform: rotate(45deg); } .prk-swatch-floating-tooltip[data-side="top"] .prk-swatch-floating-tooltip__inner::after { left: 50%; bottom: calc(var(--prk-swatch-tooltip-arrow-size) * -1); margin-left: calc(var(--prk-swatch-tooltip-arrow-size) * -1); } .prk-swatch-floating-tooltip[data-side="bottom"] .prk-swatch-floating-tooltip__inner::after { left: 50%; top: calc(var(--prk-swatch-tooltip-arrow-size) * -1); margin-left: calc(var(--prk-swatch-tooltip-arrow-size) * -1); } .prk-swatch-floating-tooltip[data-side="left"] .prk-swatch-floating-tooltip__inner::after { right: calc(var(--prk-swatch-tooltip-arrow-size) * -1); top: 50%; margin-top: calc(var(--prk-swatch-tooltip-arrow-size) * -1); } .prk-swatch-floating-tooltip[data-side="right"] .prk-swatch-floating-tooltip__inner::after { left: calc(var(--prk-swatch-tooltip-arrow-size) * -1); top: 50%; margin-top: calc(var(--prk-swatch-tooltip-arrow-size) * -1); } .prk-variation-form [data-prk-swatch] { box-sizing: border-box; } .prk-variation-form .product-color-text-swiper-container, .prk-variation-form .product-size-swiper-container, .prk-variation-form .product-color-img-swiper-container { width: 100%; max-width: 100%; } .prk-variation-form .product-color-text-swiper-container .swiper, .prk-variation-form .product-size-swiper-container .swiper, .prk-variation-form .product-color-img-swiper-container .swiper { width: 100%; } .prk-variation-form .product-variable-swiper-prev-btn, .prk-variation-form .product-variable-swiper-next-btn { transition-property: background-color, border-color, color, fill, opacity, transform, box-shadow; transition-timing-function: ease; } .prk-variation-form .product-variable-swiper-prev-btn svg, .prk-variation-form .product-variable-swiper-next-btn svg { transition: fill .2s ease, color .2s ease; } body.single-product .prk-purchase-form, body.single-product .prk-purchase-form form.variations_form.cart, body.single-product .prk-purchase-form form.variations_form.cart table.variations, body.single-product .prk-purchase-form form.variations_form.cart table.variations > tbody, body.single-product .prk-purchase-form form.variations_form.cart table.variations > tbody > tr { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } body.single-product .prk-purchase-form form.variations_form.cart table.variations { table-layout: fixed; } body.single-product .prk-purchase-form form.variations_form.cart table.variations > tbody > tr > td.value { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } body.single-product .prk-purchase-form form.variations_form.cart .thwvsf_fields, body.single-product .prk-purchase-form form.variations_form.cart [data-prk-swatch] { min-width: 0; max-width: 100% !important; box-sizing: border-box; } body.single-product .prk-purchase-form form.variations_form.cart .product-color-text-swiper-container, body.single-product .prk-purchase-form form.variations_form.cart .product-size-swiper-container, body.single-product .prk-purchase-form form.variations_form.cart .product-color-img-swiper-container, body.single-product .prk-purchase-form form.variations_form.cart .product-color-text-swiper-container > .swiper, body.single-product .prk-purchase-form form.variations_form.cart .product-size-swiper-container > .swiper, body.single-product .prk-purchase-form form.variations_form.cart .product-color-img-swiper-container > .swiper { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }