:root { --wcboost-swatches-item-width: 30px; --wcboost-swatches-item-width: 30px; --wcboost-swatches-item-padding: 2px; --wcboost-swatches-item-gap: 1em; --wcboost-swatches-color-border: rgba(0, 0, 0, 0.2); --wcboost-swatches-color-border-selected: rgba(0, 0, 0, 0.7); --wcboost-swatches-color-border-outstock: rgba(252, 56, 56, 0.7); --wcboost-swatches-color-tooltip: #333; --wcboost-swatches-color-tooltip-text: #fff; --wcboost-swatches-button-font-size: 1em; --wcboost-swatches-label-font-size: 1em; } .wcboost-variation-swatches > select { display: none !important; } .wcboost-variation-swatches__wrapper { margin: 0; padding: 0; list-style: none; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--wcboost-swatches-item-gap); } .wcboost-variation-swatches__item { transition: 0.3s; text-align: center; white-space: nowrap; width: var(--wcboost-swatches-item-width); height: var(--wcboost-swatches-item-height); padding: var(--wcboost-swatches-item-padding); line-height: 1.1; display: inline-flex; align-items: center; justify-content: center; margin: 0; position: relative; cursor: pointer; box-shadow: 0 0 0 1px var(--wcboost-swatches-color-border); } .wcboost-variation-swatches__name { display: block; } .wcboost-variation-swatches__item:hover, .wcboost-variation-swatches__item:focus { box-shadow: 0 0 0 2px var(--wcboost-swatches-color-border); } .wcboost-variation-swatches__item.selected { border-color: var(--wcboost-swatches-color-border-selected); box-shadow: 0 0 0 2px var(--wcboost-swatches-color-border-selected); } .wcboost-variation-swatches__item.disabled  { opacity: 0.2; cursor: default; } .wcboost-variation-swatches--button .wcboost-variation-swatches__item { width: auto !important; height: auto !important; min-width: var(--wcboost-swatches-item-width); min-height: var(--wcboost-swatches-item-height); padding-left: calc(var(--wcboost-swatches-item-width) / 2); padding-right: calc(var(--wcboost-swatches-item-width) / 2); overflow: hidden; } :where(.wcboost-variation-swatches--button) .wcboost-variation-swatches__item { font-size: var(--wcboost-swatches-button-font-size); } .wcboost-variation-swatches--button .wcboost-variation-swatches__item.selected { background-color: rgba(0, 0, 0, 0.1); } .wcboost-variation-swatches--label .wcboost-variation-swatches__item { width: auto !important; min-width: var(--wcboost-swatches-item-width); } :where(.wcboost-variation-swatches--label) .wcboost-variation-swatches__item { font-size: var(--wcboost-swatches-label-font-size); } .wcboost-variation-swatches--label .wcboost-variation-swatches__name { width: 100%; } .wcboost-variation-swatches--image .wcboost-variation-swatches__name { width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); position: absolute; margin: -1px; } .wcboost-variation-swatches--image img { display: block; width: 100%; height: 100%; object-fit: cover; } .wcboost-variation-swatches--color .wcboost-variation-swatches__name { text-indent: -9999em; width: 100%; height: 100%; background-color: var(--wcboost-swatches-item-color); background-image: var(--wcboost-swatches-item-image); } .wcboost-variation-swatches--round .wcboost-variation-swatches__item, .wcboost-variation-swatches--round .wcboost-variation-swatches__item img, .wcboost-variation-swatches--round.wcboost-variation-swatches--color .wcboost-variation-swatches__name, .wcboost-variation-swatches--round.wcboost-variation-swatches--button .wcboost-variation-swatches__item { border-radius: 999em; } .wcboost-variation-swatches--rounded .wcboost-variation-swatches__item, .wcboost-variation-swatches--rounded .wcboost-variation-swatches__item img, .wcboost-variation-swatches--rounded.wcboost-variation-swatches--color .wcboost-variation-swatches__name { border-radius: 4px; } .wcboost-variation-swatches--has-tooltip .wcboost-variation-swatches__item::before { content: attr(aria-label); text-indent: initial; font-size: 14px; font-weight: 500; line-height: 1.25; position: absolute; bottom: 100%; left: 50%; background: var(--wcboost-swatches-color-tooltip); z-index: 2; color: var(--wcboost-swatches-color-tooltip-text); margin: -10px 0 0 0; padding: 7px 15px; opacity: 0; visibility: hidden; user-select: none; border-radius: 4px; transform: translate(-50%, -10px); transition: opacity 0.35s; } .wcboost-variation-swatches--has-tooltip .wcboost-variation-swatches__item:after { content: ""; position: absolute; bottom: 100%; left: 50%; width: 0; height: 0; border: 5px solid transparent; border-top-color: #333; margin: 0 0 0 -5px; opacity: 0; visibility: hidden; transition: opacity 0.35s; } .wcboost-variation-swatches--has-tooltip .wcboost-variation-swatches__item:hover:before, .wcboost-variation-swatches--has-tooltip .wcboost-variation-swatches__item:hover:after { visibility: visible; opacity: 1; user-select: auto; } .wcboost-variation-swatches--has-tooltip .disabled:before, .wcboost-variation-swatches--has-tooltip .disabled:after, .wcboost-variation-swatches--button .wcboost-variation-swatches__item:before, .wcboost-variation-swatches--button .wcboost-variation-swatches__item:after { display: none; } .wcboost-variation-swatches__selected-label::before { content: ": "; } .wcboost-variation-swatches__item.is-out-stock { color: var(--wcboost-swatches-color-border-outstock); box-shadow: 0 0 0 1px var(--wcboost-swatches-color-border-outstock); } .et_pb_wc_add_to_cart .wcboost-variation-swatches__name::after { visibility: hidden; pointer-events: none; display: none; }