/** * Derang — Variation Swatches for WooCommerce (visual polish). * Plugin adds `.woo-variation-swatches` on . */ body.woo-variation-swatches { --wvs-item-background-color: #fafaf8; --wvs-item-text-color: #3a3a36; --wvs-item-box-shadow: 0 0 0 1px #e6e6e0; --wvs-selected-item-background-color: #eef4ee; --wvs-selected-item-text-color: #2f4a31; --wvs-selected-item-box-shadow: 0 0 0 2px #95b193; --wvs-single-product-item-width: auto; --wvs-single-product-item-height: auto; --wvs-single-product-item-font-size: 13px; --wvs-tooltip-background-color: #10110e; --wvs-tooltip-text-color: #ffffff; } /* Attribute table */ body.woo-variation-swatches table.variations { border: 0 !important; margin: 1.5rem 0 1.25rem !important; width: 100%; } body.woo-variation-swatches table.variations tbody, body.woo-variation-swatches table.variations tr, body.woo-variation-swatches table.variations th, body.woo-variation-swatches table.variations td { border: 0 !important; background: transparent !important; padding: 0 !important; vertical-align: top; } body.woo-variation-swatches table.variations tr + tr th, body.woo-variation-swatches table.variations tr + tr td { padding-top: 1.1rem !important; } body.woo-variation-swatches table.variations .label, body.woo-variation-swatches table.variations th.label { display: block !important; width: 100% !important; padding: 0 0 0.7rem !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: -0.01em; color: #10110e !important; text-align: right !important; } body.woo-variation-swatches table.variations .label label { font-weight: 700 !important; color: #10110e !important; } body.woo-variation-swatches .woo-selected-variation-item-name { font-weight: 600 !important; color: #95b193 !important; margin-inline-start: 0.35rem; } body.woo-variation-swatches table.variations .value, body.woo-variation-swatches table.variations td.value { display: block !important; width: 100% !important; } /* Grid */ body.woo-variation-swatches .variable-items-wrapper { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 0.55rem !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) { margin: 0 !important; box-sizing: border-box !important; transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important; } /* Text / weight buttons */ body.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:not(.radio-variable-item), body.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item.button-variable-item:not(.radio-variable-item), body.woo-variation-swatches .wvs-style-rounded.variable-items-wrapper .variable-item.button-variable-item:not(.radio-variable-item) { width: auto !important; min-width: 0 !important; height: auto !important; min-height: 42px !important; padding: 0.55rem 1.05rem !important; border-radius: 999px !important; border: 0 !important; background-color: #fafaf8 !important; color: #3a3a36 !important; box-shadow: 0 0 0 1px #e6e6e0 !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: -0.01em; line-height: 1.3 !important; } body.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item .variable-item-contents, body.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item .variable-item-span { width: auto !important; height: auto !important; padding: 0 !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; white-space: nowrap; pointer-events: none; } body.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:not(.radio-variable-item):hover { background-color: #f3f7f3 !important; color: #2f4a31 !important; box-shadow: 0 0 0 1px #95b193, 0 8px 18px -12px rgba(149, 177, 147, 0.7) !important; transform: translateY(-1px); } body.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item.selected:not(.radio-variable-item), body.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item.selected:not(.radio-variable-item):hover { background-color: #eef4ee !important; color: #2f4a31 !important; box-shadow: 0 0 0 2px #95b193, 0 10px 22px -14px rgba(149, 177, 147, 0.75) !important; transform: none; } /* Color dots */ body.woo-variation-swatches .variable-items-wrapper .variable-item.color-variable-item:not(.radio-variable-item) { width: 34px !important; height: 34px !important; min-width: 34px !important; padding: 3px !important; border-radius: 999px !important; background: #fff !important; box-shadow: 0 0 0 1px #e6e6e0 !important; } body.woo-variation-swatches .variable-items-wrapper .variable-item.color-variable-item.selected:not(.radio-variable-item), body.woo-variation-swatches .variable-items-wrapper .variable-item.color-variable-item.selected:not(.radio-variable-item):hover { box-shadow: 0 0 0 2px #95b193 !important; } /* Image swatches */ body.woo-variation-swatches .variable-items-wrapper .variable-item.image-variable-item:not(.radio-variable-item) { width: 52px !important; height: 52px !important; min-width: 52px !important; padding: 3px !important; border-radius: 14px !important; background: #fff !important; box-shadow: 0 0 0 1px #e6e6e0 !important; overflow: hidden; } body.woo-variation-swatches .variable-items-wrapper .variable-item.image-variable-item img { border-radius: 11px; object-fit: cover; } body.woo-variation-swatches .variable-items-wrapper .variable-item.image-variable-item.selected:not(.radio-variable-item), body.woo-variation-swatches .variable-items-wrapper .variable-item.image-variable-item.selected:not(.radio-variable-item):hover { box-shadow: 0 0 0 2px #95b193 !important; } /* Disabled */ body.woo-variation-swatches .variable-items-wrapper .variable-item.disabled:not(.radio-variable-item), body.woo-variation-swatches .variable-items-wrapper .variable-item.disabled:not(.radio-variable-item):hover, body.woo-variation-swatches .variable-items-wrapper .variable-item.no-stock:not(.radio-variable-item), body.woo-variation-swatches .variable-items-wrapper .variable-item.no-stock:not(.radio-variable-item):hover { opacity: 0.42 !important; cursor: not-allowed !important; transform: none !important; box-shadow: 0 0 0 1px #e6e6e0 !important; background: #f5f5f3 !important; } /* Clear link */ body.woo-variation-swatches a.reset_variations { display: inline-flex !important; align-items: center; margin-top: 0.85rem !important; padding: 0.35rem 0.8rem !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #6a6a64 !important; background: rgba(16, 17, 14, 0.045) !important; text-decoration: none !important; border: 1px solid transparent !important; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } body.woo-variation-swatches a.reset_variations:hover { color: #95b193 !important; background: rgba(149, 177, 147, 0.14) !important; border-color: rgba(149, 177, 147, 0.28) !important; } /* ------------------------------------------------------------------ * Custom variation dropdown (Select2 off + styled open panel) * ------------------------------------------------------------------ */ body.single-product .variations_form table.variations .value, body.single-product .detailfouradd table.variations .value, .woocommerce div.product form.cart .variations td.value { position: relative; overflow: visible !important; } body.single-product .variations_form .select2-container, body.single-product .detailfouradd .variations .select2-container, body.single-product table.variations .select2-container, .woocommerce div.product form.cart .variations .select2-container, .detail-product-four .variations .select2-container { display: none !important; } .derang-var-select { position: relative; z-index: 5; width: 100%; } .derang-var-select.is-open { /* Above .derang-float-support (z-90) and mobile chrome */ z-index: 120; } /* Hide floating support while variation dropdown is open */ html.derang-var-select-open .derang-float-support { visibility: hidden !important; pointer-events: none !important; } .derang-var-select__native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; min-height: 0 !important; background: none !important; box-shadow: none !important; } .derang-var-select__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 52px; box-sizing: border-box; margin: 0; padding: 0.85rem 1.15rem; border: 1px solid rgba(149, 177, 147, 0.28); border-radius: 16px; background: #f7f9f6; color: #10110e; font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; text-align: right; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 8px 22px rgba(51, 75, 49, 0.04); transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; } .derang-var-select__trigger:hover { border-color: rgba(149, 177, 147, 0.55); background: #f3f7f2; } .derang-var-select__trigger:focus, .derang-var-select.is-open .derang-var-select__trigger { outline: none; border-color: #95b193; background: #fff; box-shadow: 0 0 0 3px rgba(149, 177, 147, 0.2), 0 8px 22px rgba(51, 75, 49, 0.05); } .derang-var-select__trigger.is-placeholder .derang-var-select__text { color: #8a8a8a; font-weight: 500; } .derang-var-select__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .derang-var-select__meta { display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0; } .derang-var-select__dot { width: 6px; height: 6px; border-radius: 999px; background: #d7d7d2; transition: background-color 0.25s ease, transform 0.25s ease; } .derang-var-select.is-open .derang-var-select__dot, .derang-var-select__trigger:not(.is-placeholder) .derang-var-select__dot { background: #95b193; transform: scale(1.1); } .derang-var-select__chevron { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(149, 177, 147, 0.14); color: #6f9275; transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s ease; } .derang-var-select__chevron svg { width: 13px; height: 13px; display: block; } .derang-var-select.is-open .derang-var-select__chevron { background: #95b193; color: #fff; transform: rotate(180deg); } .derang-var-select__panel { position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 120; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transform-origin: top center; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease; } .derang-var-select.is-open .derang-var-select__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .derang-var-select__panel-inner { overflow: hidden; padding: 0.45rem; border: 1px solid rgba(149, 177, 147, 0.22); border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -18px rgba(16, 17, 14, 0.28); } .derang-var-select__hint { margin: 0.2rem 0.55rem 0.35rem; font-size: 11px; font-weight: 700; color: #95b193; } .derang-var-select__list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(149, 177, 147, 0.45) transparent; } .derang-var-select__list::-webkit-scrollbar { width: 6px; } .derang-var-select__list::-webkit-scrollbar-thumb { background: rgba(149, 177, 147, 0.4); border-radius: 999px; } .derang-var-select__option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0; padding: 0.7rem 0.8rem; border: 0; border-radius: 11px; background: transparent; color: #2c2d29; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.45; text-align: right; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .derang-var-select__option:hover, .derang-var-select__option:focus-visible { outline: none; background: rgba(149, 177, 147, 0.12); color: #3f5a3e; } .derang-var-select__option.is-selected { background: rgba(149, 177, 147, 0.18); color: #2f4a31; font-weight: 700; } .derang-var-select__option.is-disabled { opacity: 0.4; cursor: not-allowed; } .derang-var-select__option-label { flex: 1; min-width: 0; } .derang-var-select__option-mark { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: transparent; background: transparent; flex-shrink: 0; transition: background-color 0.2s ease, color 0.2s ease; } .derang-var-select__option.is-selected .derang-var-select__option-mark { color: #fff; background: #95b193; } .derang-var-select__option-mark svg { width: 10px; height: 10px; display: block; } @media (max-width: 767.98px) { body.woo-variation-swatches .variable-items-wrapper { gap: 0.45rem !important; } body.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:not(.radio-variable-item) { min-height: 40px !important; padding: 0.5rem 0.9rem !important; font-size: 12px !important; } .derang-var-select__trigger { min-height: 48px; padding: 0.75rem 1rem; border-radius: 14px; font-size: 14px; } .derang-var-select__list { max-height: 46vh; } .derang-var-select__panel-inner { border-radius: 14px; } }