/**
 * Variation Swatches - Shop/Archive Styles
 */

.dnwooe-shop-swatches-wrapper {
    margin: 10px 0;
}

.dnwooe-shop-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.dnwooe-swatches-label {
    font-weight: 600;
    margin-right: 5px;
}

.dnwooe-selected-value {
    font-weight: 400;
    margin-right: 8px;
}

.dnwooe-swatches-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.dnwooe-swatch-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-sizing: border-box;
}

.dnwooe-swatch-item:hover {
    transform: scale(1.05);
    z-index: 2;
}

.dnwooe-swatch-item.dnwooe-swatch-color.selected,
.dnwooe-swatch-item.dnwooe-swatch-image.selected {
    border-color: #333;
}

/* Button type swatches */
.dnwooe-swatch-button.dnwooe-swatch-color .dnwooe-swatch-text,
.dnwooe-swatch-button.dnwooe-swatch-image .dnwooe-swatch-text {
    /* hide label text only when this button is a color or image swatch */
    display: none;
}

/* Ensure text is visible for text-only button swatches */
.dnwooe-swatch-item .dnwooe-swatch-text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.dnwooe-swatch-item .dnwooe-swatch-radio-label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Exact button-style swatches: rectangular colored blocks with white inner ring and dark outer border */
.dnwooe-swatch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; /* exact width for color button */
    height: 24px; /* exact height for color button */
    min-width: 52px;
    min-height: 24px;
    padding: 0;
    border-radius: 2px; /* small radius */
    /* border controlled by SwatchRenderer inline CSS */
    box-shadow: none;
    background-clip: padding-box;
    opacity: 1;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.dnwooe-swatch-button .dnwooe-swatch-color,
.dnwooe-swatch-button[style] {
    /* ensure the inline background-color fills the inner area */
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-clip: padding-box;
}

.dnwooe-swatch-button:hover {
    transform: translateY(-2px);
    border-color: #30374f;
}

.dnwooe-swatch-button.selected {
    border-color: #0b0b1a;
}

/* Button-like swatch visuals (rectangular color blocks with inner white ring and outer dark border)
   Target non-radio / non-checkbox swatch items so radio/checkbox styles remain unchanged. */
.dnwooe-shop-swatches .dnwooe-swatch-item:not(.dnwooe-swatch-radio):not(.dnwooe-swatch-checkbox) {
    border-radius: 6px;
    box-shadow: none;
    padding: 6px 14px;
    min-width: 44px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-clip: padding-box;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.dnwooe-shop-swatches .dnwooe-swatch-item:not(.dnwooe-swatch-radio):not(.dnwooe-swatch-checkbox) .dnwooe-swatch-text {
    padding: 0;
    margin: 0;
}

.dnwooe-shop-swatches .dnwooe-swatch-item:not(.dnwooe-swatch-radio):not(.dnwooe-swatch-checkbox):hover {
    transform: translateY(-2px);
    border-color: #30374f;
}

.dnwooe-shop-swatches .dnwooe-swatch-item.dnwooe-swatch-color.selected,
.dnwooe-shop-swatches .dnwooe-swatch-item.dnwooe-swatch-image.selected {
    border-color: rgba(3,2,19,0.9);
}

/* Color type swatches */
.dnwooe-swatch-color {
    border-radius: 50%;
}

/* Image type swatches */
.dnwooe-swatch-image {
    overflow: hidden;
}

/* Tooltip styles
   drop-shadow (instead of box-shadow) casts the shadow on the ::after arrow
   too, so the tooltip+arrow reads as one connected shape. */
.dnwooe-swatch-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 9px;
    background-color: #1a1a2e;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s;
    z-index: 9999;
    pointer-events: none;
    filter: drop-shadow(0 3px 8px rgba(10, 12, 30, 0.22));
    box-shadow: none;
    margin: 0;
}

/* Image tooltip specific styles */
.dnwooe-swatch-tooltip.tooltip-image {
    padding: 6px;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    filter: drop-shadow(0 4px 10px rgba(10, 12, 30, 0.16));
    box-shadow: none;
    border-radius: 6px;
}

.dnwooe-swatch-tooltip.tooltip-image img {
    display: block;
    max-width: 80px;
    max-height: 80px;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 4px;
}

.dnwooe-swatch-tooltip img {
    display: block;
    max-width: 60px;
    max-height: 60px;
    margin: 0 auto 4px;
    border-radius: 2px;
}

/* Arrow = rotated square that shares the tooltip's background-color. Half
   sits inside the tooltip (hidden by overflow), half pokes out — no seam
   between body and arrow possible, because they're the same solid block. */
.dnwooe-swatch-tooltip::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: inherit;
    transform: translateX(-50%) rotate(45deg);
    z-index: -1;
}

.dnwooe-swatch-tooltip.tooltip-image::after {
    background-color: #fff;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.dnwooe-swatch-tooltip.tooltip-bottom {
    bottom: auto;
    top: calc(100% + 6px);
}

.dnwooe-swatch-tooltip.tooltip-bottom::after {
    bottom: auto;
    top: -4px;
}

.dnwooe-swatch-tooltip.tooltip-image.tooltip-bottom::after {
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
}

.dnwooe-swatch-item:hover .dnwooe-swatch-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Ensure tooltips are visible for all swatch types */
.dnwooe-swatch-checkbox:hover .dnwooe-swatch-tooltip,
.dnwooe-custom-select__option:hover .dnwooe-swatch-tooltip {
    opacity: 1;
    visibility: visible;
}

.dnwooe-swatch-tooltip img {
    display: block;
    max-width: 60px;
    height: auto;
    margin-bottom: 5px;
    border-radius: 2px;
}

/* Disabled styles */
.dnwooe-swatch-item.disabled {
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
}

/* Out-of-stock strike element — rendered as a real DOM child (not ::after) so
   Divi's pseudo-element overrides can't suppress it. Actual diagonal gradient
   and display toggling happen in inline CSS (see SwatchRenderer::get_inline_css).
   Base rules below just pin it and keep it inert. */
.dnwooe-disabled-cross {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 2;
}

/* More items indicator */
.dnwooe-swatch-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    font-size: 11px;
    color: #666;
}

/* Variation form styles */
.dnwooe-variations-form {
    margin-top: 10px;
}

.dnwooe-variations-form .variations {
    margin-bottom: 10px;
}

.dnwooe-variations-form .variations th.label,
.dnwooe-variations-form .variations td.value {
    vertical-align: middle;
}

.dnwooe-variations-form .variations td.value .dnwooe-shop-swatches,
body.woocommerce div.product form.cart .variations td.value .dnwooe-shop-swatches {
    margin: 0;
    justify-content: flex-start;
}

.dnwooe-variations-form .single_variation_wrap {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.dnwooe-variations-form .woocommerce-variation {
    margin-bottom: 10px;
}

.dnwooe-variations-form .woocommerce-variation-price {
    font-weight: 600;
    margin-bottom: 5px;
}

.dnwooe-variations-form .variations_button {
    display: flex;
    gap: 10px;
    flex-direction: column;
    display: flex;
    width: 260px;
    padding: 8px 0;
    gap: 8px;
}
.dnwooe-variations-form .single_variation_wrap .single_add_to_cart_button {
    font-size: 14px !important;
    border-radius: 8px !important;
    background: #030213 !important;
    border: 1px solid #030213 !important;
    color: #fff !important;
    padding: 8px 0 !important;
}

.dnwooe-variations-form .quantity {
    width: auto;
}

.dnwooe-variations-form .quantity .qty {
    width: 60px;
    padding: 8px;
    text-align: center;
}

.dnwooe-variations-form .single_add_to_cart_button {
    flex: 1;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dnwooe-variations-form .single_add_to_cart_button svg {
    flex-shrink: 0;
}

.dnwooe-variations-form .single_add_to_cart_button::after {
    display: none !important;
}

/* Hide the hidden select */
.dnwooe-hidden-select {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
}

/* Visible native select when configured */
.dnwooe-visible-select {
    position: relative !important;
    clip: auto !important;
    padding: 6px 8px !important;
    border: 1px solid #ccc !important;
    height: auto !important;
    width: auto !important;
    min-width: 150px;
    display: inline-block !important;
    vertical-align: middle;
    margin-right: 8px;
    background: #fff;
}

/* Radio-style swatch visuals – full circle */
.dnwooe-swatch-radio {
    border-radius: 99px !important;
    border: 1px solid #DCDFEA;
    background: #F9F9FB;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    aspect-ratio: 1 / 1;
}

/* Hide text inside radio circles – tooltip shows on hover instead */
.dnwooe-swatch-radio-label,
.dnwooe-swatch-radio .dnwooe-swatch-text {
    display: none !important;
}

.dnwooe-swatch-radio:hover {
    border-color: #30374F;
}

.dnwooe-swatch-radio.selected {
    background: #30374F;
    border-color: #30374F;
    box-shadow: none;
}


/* Text-only swatches (size labels) exact dimensions and border
   Targets items that are not color/image swatches so color blocks remain unaffected. */
/* Make every attribute type use the color-button size */
.dnwooe-shop-swatches .dnwooe-swatch-item:not(.dnwooe-swatch-radio):not(.dnwooe-swatch-checkbox) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 36px;
    min-width: 52px;
    min-height: 36px;
    padding: 2px 10px 2px 10px; /* top/right/bottom/left */
    border-radius: 2px;
    background: #fff;
    opacity: 1;
}

/* Single product page: let text-only buttons grow with their label so values
   like "0,5 m" / "40 cm" don't get truncated to "0,5..." / "40...". */
.dnwooe-variations-form .dnwooe-shop-swatches .dnwooe-swatch-item:not(.dnwooe-swatch-radio):not(.dnwooe-swatch-checkbox):not(.dnwooe-swatch-color):not(.dnwooe-swatch-image),
body.woocommerce div.product form.cart .variations td.value .dnwooe-shop-swatches .dnwooe-swatch-item:not(.dnwooe-swatch-radio):not(.dnwooe-swatch-checkbox):not(.dnwooe-swatch-color):not(.dnwooe-swatch-image) {
    width: fit-content;
    min-width: 0;
    padding: 2px 12px;
}

.dnwooe-variations-form .dnwooe-shop-swatches .dnwooe-swatch-item:not(.dnwooe-swatch-radio):not(.dnwooe-swatch-checkbox):not(.dnwooe-swatch-color):not(.dnwooe-swatch-image) .dnwooe-swatch-text,
body.woocommerce div.product form.cart .variations td.value .dnwooe-shop-swatches .dnwooe-swatch-item:not(.dnwooe-swatch-radio):not(.dnwooe-swatch-checkbox):not(.dnwooe-swatch-color):not(.dnwooe-swatch-image) .dnwooe-swatch-text {
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    white-space: nowrap;
}

.dnwooe-shop-swatches .dnwooe-swatch-item .dnwooe-swatch-text {
    padding: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
}

.dnwooe-shop-swatches .dnwooe-swatch-item:not(.dnwooe-swatch-color):not(.dnwooe-swatch-image):hover {
    transform: translateY(-1px);
    border-color: #30374f;
}

.dnwooe-shop-swatches .dnwooe-swatch-item:not(.dnwooe-swatch-color):not(.dnwooe-swatch-image).selected {
    background: #1a1a2e;
    border-color: #1a1a2e;
}

.dnwooe-shop-swatches .dnwooe-swatch-item:not(.dnwooe-swatch-color):not(.dnwooe-swatch-image).selected .dnwooe-swatch-text {
    color: #fff !important;
}

/* Ensure swatches flow without overlapping the select */
.dnwooe-shop-swatches .dnwooe-swatch-item {
    margin-left: 4px;
}
body.woocommerce div.product form.cart table.variations {
    width: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}
body.woocommerce div.product form.cart .variations tr {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}
body.woocommerce div.product form.cart .variations th.label {
    width: auto !important;
    white-space: nowrap;
    padding: 0 !important;
}
body.woocommerce div.product form.cart .variations td.value {
    padding: 0 !important;
}

/* Custom Select Dropdown */
.dnwooe-custom-select {
    position: relative;
    display: inline-block;
    width: 240px;
}

.dnwooe-custom-select__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #DCDFEA;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.dnwooe-custom-select__trigger:hover,
.dnwooe-custom-select.open .dnwooe-custom-select__trigger {
    border-color: #30374F;
}

.dnwooe-custom-select__color-dot {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dnwooe-custom-select__text {
    flex: 1;
    color: #30374F;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dnwooe-custom-select__arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.dnwooe-custom-select.open .dnwooe-custom-select__arrow {
    transform: rotate(180deg);
}

.dnwooe-custom-select__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #DCDFEA;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    box-sizing: border-box;
}

.dnwooe-custom-select.open .dnwooe-custom-select__dropdown {
    display: block;
}

.dnwooe-custom-select__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #30374F;
    line-height: 20px;
    transition: background-color 0.15s ease;
}

.dnwooe-custom-select__option:hover {
    background-color: #F5F6FA;
}

.dnwooe-custom-select__option.selected {
    background-color: #EEF0F6;
}

.dnwooe-custom-select__option-dot {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Checkbox style swatches — color/image swatches with checkmark overlay */
.dnwooe-swatch-checkbox {
    border-radius: 2px !important;
    position: relative;
}

.dnwooe-swatch-checkbox:hover {
    transform: scale(1.1);
}

.dnwooe-swatch-checkbox.selected {
    box-shadow: none !important;
}

/* Non-color checkbox swatches (text labels like Size) */
.dnwooe-swatch-checkbox.dnwooe-swatch-checkbox--text {
    background: #f5f5f5;
}

.dnwooe-swatch-checkbox.dnwooe-swatch-checkbox--text .dnwooe-swatch-text {
    font-size: 14px;
    font-weight: 700;
    color: #30374F;
    padding: 0;
    white-space: nowrap;
}

.dnwooe-swatch-checkbox.dnwooe-swatch-checkbox--text.selected {
    background: #30374F !important;
    border-color: #30374F !important;
}

.dnwooe-swatch-checkbox.dnwooe-swatch-checkbox--text.selected .dnwooe-swatch-text {
    color: #fff;
}

.dnwooe-swatch-checkbox.dnwooe-swatch-checkbox--text.disabled {
    opacity: 0.5;
}

.dnwooe-checkbox-tick {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.dnwooe-swatch-checkbox.selected .dnwooe-checkbox-tick {
    opacity: 1;
}

/* Hide checkmark on text-only checkbox swatches (they use bg color change instead) */
.dnwooe-swatch-checkbox.dnwooe-swatch-checkbox--text .dnwooe-checkbox-tick {
    display: none;
}

.dnwooe-swatch-checkbox.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Neutralize Divi 5's dropdown-arrow pseudo-element. Divi injects a triangle
   ::after on td.value, the variations row, the whole variations table, and on
   every descendant span inside — which leaks onto the swatch row, the swatch
   items themselves, tooltips, and any wrappers around them.

   We nuke ::after/::before across the ENTIRE variations form region. The only
   exception is `.dnwooe-disabled-cross` (a real DOM child, not a pseudo — kept so
   authors can layer anything on it if needed). Our own tooltip triangle is
   re-declared BELOW the neutralizer with equal-or-higher specificity so it
   still renders.

   Two stacked `:not(#dnwooe-no1):not(#dnwooe-no2)` add TWO ID-level specificity
   bumps, so even if Divi's rule is scoped by two ID wrappers (e.g.
   `#et-boc #page-container ...`), our rule still wins. */
.et_pb_wc_add_to_cart form.cart .variations:not(#dnwooe-no1):not(#dnwooe-no2)::after,
.et_pb_wc_add_to_cart form.cart .variations:not(#dnwooe-no1):not(#dnwooe-no2)::before,
.et_pb_wc_add_to_cart form.cart .variations *:not(.dnwooe-disabled-cross):not(#dnwooe-no1):not(#dnwooe-no2)::after,
.et_pb_wc_add_to_cart form.cart .variations *:not(.dnwooe-disabled-cross):not(#dnwooe-no1):not(#dnwooe-no2)::before,
body.woocommerce div.product form.cart .variations:not(#dnwooe-no1):not(#dnwooe-no2)::after,
body.woocommerce div.product form.cart .variations:not(#dnwooe-no1):not(#dnwooe-no2)::before,
body.woocommerce div.product form.cart .variations *:not(.dnwooe-disabled-cross):not(#dnwooe-no1):not(#dnwooe-no2)::after,
body.woocommerce div.product form.cart .variations *:not(.dnwooe-disabled-cross):not(#dnwooe-no1):not(#dnwooe-no2)::before {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
}

/* Re-apply our tooltip triangle arrow AFTER the Divi neutralizer above.
   Same Divi-scoped ancestors plus two ID boosts so it wins the specificity
   fight and restores our own pointer on the tooltip pill. */
body.woocommerce div.product form.cart .variations td.value .dnwooe-swatch-tooltip:not(#dnwooe-no1):not(#dnwooe-no2)::after,
.et_pb_wc_add_to_cart form.cart .variations td.value .dnwooe-swatch-tooltip:not(#dnwooe-no1):not(#dnwooe-no2)::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: -4px !important;
    top: auto !important;
    left: 50% !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #1a1a2e !important;
    transform: translateX(-50%) rotate(45deg) !important;
    border: 0 !important;
    z-index: -1 !important;
}

body.woocommerce div.product form.cart .variations td.value .dnwooe-swatch-tooltip.tooltip-image:not(#dnwooe-no1):not(#dnwooe-no2)::after,
.et_pb_wc_add_to_cart form.cart .variations td.value .dnwooe-swatch-tooltip.tooltip-image:not(#dnwooe-no1):not(#dnwooe-no2)::after {
    background-color: #fff !important;
    border-right: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
}

body.woocommerce div.product form.cart .variations td.value .dnwooe-swatch-tooltip.tooltip-bottom:not(#dnwooe-no1):not(#dnwooe-no2)::after,
.et_pb_wc_add_to_cart form.cart .variations td.value .dnwooe-swatch-tooltip.tooltip-bottom:not(#dnwooe-no1):not(#dnwooe-no2)::after {
    top: -4px !important;
    bottom: auto !important;
}

body.woocommerce div.product form.cart .variations td.value .dnwooe-swatch-tooltip.tooltip-image.tooltip-bottom:not(#dnwooe-no1):not(#dnwooe-no2)::after,
.et_pb_wc_add_to_cart form.cart .variations td.value .dnwooe-swatch-tooltip.tooltip-image.tooltip-bottom:not(#dnwooe-no1):not(#dnwooe-no2)::after {
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid #e5e7eb !important;
    border-top: 1px solid #e5e7eb !important;
}

/* Divi wraps the (now-hidden) native <select> in a bare <span> — flagged by
   `data-is-span-added="1"` on the <td class="value"> — and decorates that
   span with its dropdown-arrow `::after` pseudo (rule: `td.value span:after`).
   Since we've replaced the select with swatches and the select itself is
   hidden, that wrapper span is dead DOM whose only visible output is the
   stray arrow. Hide the wrapper span to remove the arrow at its source and
   avoid specificity fights with Divi's pseudo rule.

   The selector targets a direct-child `<span>` of `td.value` — the swatch
   wrapper is a `<div class="dnwooe-shop-swatches">`, so `td.value > span`
   only matches Divi's select wrapper. */
html body.woocommerce form.cart .variations td.value[data-is-span-added] > span:not([class]):not(#dnwooe-no1):not(#dnwooe-no2):not(#dnwooe-no3),
html body form.cart .variations td.value > span:not([class]):not(#dnwooe-no1):not(#dnwooe-no2):not(#dnwooe-no3),
html body .et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value > span:not([class]):not(#dnwooe-no1):not(#dnwooe-no2):not(#dnwooe-no3) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
}

html body form.cart table.variations td.value > span:not([class]):not([id]) {
    display: none !important;
}

/* `.dnwooe-disabled-cross` is intentionally excluded from the generic
   `:not(.dnwooe-disabled-cross)` neutralizer above — we wanted its pseudo slots
   free. But Divi's `td.value span:after` still decorates it with the theme's
   dropdown arrow (the only remaining arrow source in variations). The cross's
   diagonal line is a `background: linear-gradient(...)` on the element itself,
   not a pseudo, so it's safe to kill `::after` / `::before` here. */
html body form.cart .variations td.value .dnwooe-disabled-cross:not(#dnwooe-no1):not(#dnwooe-no2):not(#dnwooe-no3)::after,
html body form.cart .variations td.value .dnwooe-disabled-cross:not(#dnwooe-no1):not(#dnwooe-no2):not(#dnwooe-no3)::before,
html body .et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value .dnwooe-disabled-cross:not(#dnwooe-no1):not(#dnwooe-no2):not(#dnwooe-no3)::after,
html body .et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value .dnwooe-disabled-cross:not(#dnwooe-no1):not(#dnwooe-no2):not(#dnwooe-no3)::before {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
}

/* Final Divi-root-scoped neutralizer. Divi 5's dropdown-arrow rule is
   `.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value
   span:after` — and some builds add extra ID-scoped ancestors (e.g.
   `#page-container`). To guarantee we always win, we mirror Divi's full root
   scope AND stack four `:not(#dnwooe-noN)` ID boosts. The rule covers `td.value`
   itself plus every descendant — excluding `.dnwooe-disabled-cross` (real DOM
   child, styled by us) and `.dnwooe-swatch-tooltip` (we re-apply its tooltip
   triangle below). */
html body.woocommerce .et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value:not(#dnwooe-no1):not(#dnwooe-no2):not(#dnwooe-no3):not(#dnwooe-no4)::after,
html body.woocommerce .et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value:not(#dnwooe-no1):not(#dnwooe-no2):not(#dnwooe-no3):not(#dnwooe-no4)::before,
html body.woocommerce .et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value *:not(.dnwooe-disabled-cross):not(.dnwooe-swatch-tooltip):not(#dnwooe-no1):not(#dnwooe-no2):not(#dnwooe-no3):not(#dnwooe-no4)::after,
html body.woocommerce .et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value *:not(.dnwooe-disabled-cross):not(.dnwooe-swatch-tooltip):not(#dnwooe-no1):not(#dnwooe-no2):not(#dnwooe-no3):not(#dnwooe-no4)::before,
html body.woocommerce .et_pb_wc_add_to_cart form.cart .variations td.value:not(#dnwooe-no1):not(#dnwooe-no2):not(#dnwooe-no3):not(#dnwooe-no4)::after,
html body.woocommerce .et_pb_wc_add_to_cart form.cart .variations td.value:not(#dnwooe-no1):not(#dnwooe-no2):not(#dnwooe-no3):not(#dnwooe-no4)::before,
html body.woocommerce .et_pb_wc_add_to_cart form.cart .variations td.value *:not(.dnwooe-disabled-cross):not(.dnwooe-swatch-tooltip):not(#dnwooe-no1):not(#dnwooe-no2):not(#dnwooe-no3):not(#dnwooe-no4)::after,
html body.woocommerce .et_pb_wc_add_to_cart form.cart .variations td.value *:not(.dnwooe-disabled-cross):not(.dnwooe-swatch-tooltip):not(#dnwooe-no1):not(#dnwooe-no2):not(#dnwooe-no3):not(#dnwooe-no4)::before {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
}