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

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

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

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

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

.vsw-swatches-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

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

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

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

/* Button type swatches */
.vsw-swatch-button.vsw-swatch-color .vsw-swatch-text,
.vsw-swatch-button.vsw-swatch-image .vsw-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 */
.vsw-swatch-item .vsw-swatch-text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.vsw-swatch-item .vsw-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 */
.vsw-swatch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* 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;
}

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

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

.vsw-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. */
.vsw-shop-swatches .vsw-swatch-item:not(.vsw-swatch-radio):not(.vsw-swatch-checkbox) {
    box-shadow: none;
    padding: 6px 14px;
    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;
}

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

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

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

/* Color type swatches */
.vsw-swatch-color {
}

/* Dual color swatches: the diagonal-split gradient is applied inline; ensure it
   fills the swatch and is not clipped by padding so the split reaches the edges. */
.vsw-swatch-dual {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-clip: border-box !important;
}

/* Image type swatches */
.vsw-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. */
.vsw-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 */
.vsw-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;
}

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

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

/* Stock-info line appended inside a tooltip (quantity or in/out of stock). */
.vsw-swatch-tooltip .vsw-tooltip-stock {
    display: block;
    font-size: 0.85em;
    line-height: 1.3;
    margin-top: 2px;
    opacity: 0.85;
    text-align: center;
}

.vsw-swatch-tooltip .vsw-tooltip-stock.is-oos {
    opacity: 0.7;
}

/* Image tooltips have a light background, so keep the stock text dark. */
.vsw-swatch-tooltip.tooltip-image .vsw-tooltip-stock {
    color: #1a1a2e;
    text-align: center;
}

/* 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. */
.vsw-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;
}

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

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

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

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

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

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

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

/* Disabled styles */
.vsw-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. */
.vsw-disabled-cross {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 2;
}

/* More items indicator */
.vsw-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 */
.vsw-variations-form {
    margin-top: 10px;
}

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

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

/* =========================================================
   Single product page: fix product_meta / add-to-cart overlap
   ========================================================= */

/* Prevent the cart form from clipping swatches that overflow vertically */
.woocommerce div.product form.cart,
.woocommerce-page div.product form.cart,
.et_pb_wc_add_to_cart form.cart {
    overflow: visible !important;
    position: relative;
}

/* Ensure single_variation_wrap flows in the normal block flow and
   does not sit on top of sibling elements when revealed via JS */
.woocommerce div.product form.cart .single_variation_wrap,
.woocommerce-page div.product form.cart .single_variation_wrap,
.et_pb_wc_add_to_cart form.cart .single_variation_wrap {
    position: relative !important;
    clear: both;
    overflow: visible !important;
    z-index: 1;
}

/* Add-to-cart row: keep qty input and button on the same line without
   collapsing into or onto the product_meta below */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce-page div.product form.cart .woocommerce-variation-add-to-cart,
.et_pb_wc_add_to_cart form.cart .woocommerce-variation-add-to-cart {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px;
    margin-top: 12px;
    position: relative;
    z-index: 1;
}

/* Quantity input wrapper — override Divi float so flex layout takes over */
.woocommerce div.product form.cart div.quantity,
.woocommerce-page div.product form.cart div.quantity,
.et_pb_wc_add_to_cart form.cart div.quantity {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* Restore spacing between the cart form and product_meta so they
   don't visually collide — override Divi's margin:0!important on
   et_pb_wc_add_to_cart form.cart */
.woocommerce div.product form.cart,
.woocommerce-page div.product form.cart {
    margin-bottom: 24px !important;
}

/* product_meta (SKU / Category / Tags): always starts on a new line
   with enough breathing room below the add-to-cart section */
.woocommerce div.product .product_meta,
.woocommerce-page div.product .product_meta {
    clear: both;
    position: relative;
    z-index: 1;
    margin-top: 16px !important;
}

/* Neutralise Divi's stray dropdown-arrow pseudo on td.value span:after
   so it doesn't render as an overlapping triangle over swatch rows */
.et_pb_wc_add_to_cart form.cart .variations td.value span:after,
.woocommerce div.product form.cart .variations td.value span:after {
    display: none !important;
    content: none !important;
}

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

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

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

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

.vsw-variations-form .variations_button {
    display: flex;
    gap: 10px;
    flex-direction: column;
    display: flex;
    width: 260px;
    padding: 8px 0;
    gap: 8px;
}
.vsw-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;
}

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

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

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

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

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

/* Hide the hidden select. Keep it in the DOM so form submission / WooCommerce
   JS still read its value, but move it fully off-screen so themes (Divi) can't
   restyle it into a visible dropdown with arrow. */
.vsw-hidden-select,
body .vsw-hidden-select,
.et_pb_wc_add_to_cart .vsw-hidden-select {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    max-width: 1px !important;
    max-height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: visible !important; /* keep interactable for WC scripts */
    pointer-events: none !important;
    background: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.vsw-hidden-select::-ms-expand {
    display: none !important;
}

/* Visible native select when configured */
.vsw-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 */
.vsw-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 raw value text inside radio circles (the visible label is rendered as
   `.vsw-swatch-radio-label` next to the indicator instead). Visibility of the
   label itself is controlled by the `hideAttributeLabel` setting in inline CSS. */
.vsw-swatch-radio .vsw-swatch-text {
    display: none !important;
}

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

.vsw-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 */
.vsw-shop-swatches .vsw-swatch-item:not(.vsw-swatch-radio):not(.vsw-swatch-checkbox) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px 2px 10px; /* top/right/bottom/left */
    background: #fff;
    opacity: 1;
}

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

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

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

.vsw-shop-swatches .vsw-swatch-item.vsw-swatch-button:not(.vsw-swatch-color):not(.vsw-swatch-image):not(.vsw-swatch-radio):not(.vsw-swatch-checkbox).selected .vsw-swatch-text {
    color: #fff;
}

/* Ensure swatches flow without overlapping the select */
.vsw-shop-swatches .vsw-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,
.woocommerce div.product form.cart .variations tr,
.et_pb_wc_add_to_cart form.cart .variations tr,
.vsw-variations-form .variations tr {
    display: block !important;
    /* Vertical breathing room between attribute groups (Color / Logo / …).
       Selectors cover standard WC, Divi (.et_pb_wc_add_to_cart, where
       `woocommerce` is not on <body>), and the custom .vsw-variations-form. */
    padding: 10px 0 20px !important;
}
body.woocommerce div.product form.cart .variations th.label {
    width: auto !important;
    white-space: nowrap;
    padding: 0 0 4px 0 !important;
    text-align: left;
}
body.woocommerce div.product form.cart .variations td.value {
    display: block !important;
    padding: 0 !important;
}

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

.vsw-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;
}

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

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

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

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

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

.vsw-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;
}

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

.vsw-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;
}

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

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

.vsw-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 */
.vsw-swatch-checkbox {
    position: relative;
}

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

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

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

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

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

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

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

.vsw-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;
}

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

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

.vsw-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 `.vsw-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(#vsw-no1):not(#vsw-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(#vsw-no1):not(#vsw-no2)::after,
.et_pb_wc_add_to_cart form.cart .variations:not(#vsw-no1):not(#vsw-no2)::before,
.et_pb_wc_add_to_cart form.cart .variations *:not(.vsw-disabled-cross):not(#vsw-no1):not(#vsw-no2)::after,
.et_pb_wc_add_to_cart form.cart .variations *:not(.vsw-disabled-cross):not(#vsw-no1):not(#vsw-no2)::before,
body.woocommerce div.product form.cart .variations:not(#vsw-no1):not(#vsw-no2)::after,
body.woocommerce div.product form.cart .variations:not(#vsw-no1):not(#vsw-no2)::before,
body.woocommerce div.product form.cart .variations *:not(.vsw-disabled-cross):not(#vsw-no1):not(#vsw-no2)::after,
body.woocommerce div.product form.cart .variations *:not(.vsw-disabled-cross):not(#vsw-no1):not(#vsw-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 .vsw-swatch-tooltip:not(#vsw-no1):not(#vsw-no2)::after,
.et_pb_wc_add_to_cart form.cart .variations td.value .vsw-swatch-tooltip:not(#vsw-no1):not(#vsw-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: inherit !important;
    transform: translateX(-50%) rotate(45deg) !important;
    border: 0 !important;
    z-index: -1 !important;
}

body.woocommerce div.product form.cart .variations td.value .vsw-swatch-tooltip.tooltip-image:not(#vsw-no1):not(#vsw-no2)::after,
.et_pb_wc_add_to_cart form.cart .variations td.value .vsw-swatch-tooltip.tooltip-image:not(#vsw-no1):not(#vsw-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 .vsw-swatch-tooltip.tooltip-bottom:not(#vsw-no1):not(#vsw-no2)::after,
.et_pb_wc_add_to_cart form.cart .variations td.value .vsw-swatch-tooltip.tooltip-bottom:not(#vsw-no1):not(#vsw-no2)::after {
    top: -4px !important;
    bottom: auto !important;
}

body.woocommerce div.product form.cart .variations td.value .vsw-swatch-tooltip.tooltip-image.tooltip-bottom:not(#vsw-no1):not(#vsw-no2)::after,
.et_pb_wc_add_to_cart form.cart .variations td.value .vsw-swatch-tooltip.tooltip-image.tooltip-bottom:not(#vsw-no1):not(#vsw-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. Hiding the wrapper span removes the arrow at its source and
   avoids specificity fights with Divi's pseudo rule.

   The selector targets a direct-child `<span>` of `td.value` — the swatch
   wrapper is a `<div class="vsw-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(#vsw-no1):not(#vsw-no2):not(#vsw-no3),
html body form.cart .variations td.value > span:not([class]):not(#vsw-no1):not(#vsw-no2):not(#vsw-no3),
html body .et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value > span:not([class]):not(#vsw-no1):not(#vsw-no2):not(#vsw-no3) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
}

/* Also hide any direct child of td.value that is a bare, unclassed span —
   regardless of Divi variants. Scoped to WooCommerce variations forms. */
html body form.cart table.variations td.value > span:not([class]):not([id]) {
    display: none !important;
}

/* `.vsw-disabled-cross` is intentionally excluded from the generic
   `:not(.vsw-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 .vsw-disabled-cross:not(#vsw-no1):not(#vsw-no2):not(#vsw-no3)::after,
html body form.cart .variations td.value .vsw-disabled-cross:not(#vsw-no1):not(#vsw-no2):not(#vsw-no3)::before,
html body .et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value .vsw-disabled-cross:not(#vsw-no1):not(#vsw-no2):not(#vsw-no3)::after,
html body .et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value .vsw-disabled-cross:not(#vsw-no1):not(#vsw-no2):not(#vsw-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(#vsw-noN)` ID boosts. The rule covers `td.value`
   itself plus every descendant — excluding `.vsw-disabled-cross` (real DOM
   child, styled by us) and `.vsw-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(#vsw-no1):not(#vsw-no2):not(#vsw-no3):not(#vsw-no4)::after,
html body.woocommerce .et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value:not(#vsw-no1):not(#vsw-no2):not(#vsw-no3):not(#vsw-no4)::before,
html body.woocommerce .et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value *:not(.vsw-disabled-cross):not(.vsw-swatch-tooltip):not(#vsw-no1):not(#vsw-no2):not(#vsw-no3):not(#vsw-no4)::after,
html body.woocommerce .et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value *:not(.vsw-disabled-cross):not(.vsw-swatch-tooltip):not(#vsw-no1):not(#vsw-no2):not(#vsw-no3):not(#vsw-no4)::before,
html body.woocommerce .et_pb_wc_add_to_cart form.cart .variations td.value:not(#vsw-no1):not(#vsw-no2):not(#vsw-no3):not(#vsw-no4)::after,
html body.woocommerce .et_pb_wc_add_to_cart form.cart .variations td.value:not(#vsw-no1):not(#vsw-no2):not(#vsw-no3):not(#vsw-no4)::before,
html body.woocommerce .et_pb_wc_add_to_cart form.cart .variations td.value *:not(.vsw-disabled-cross):not(.vsw-swatch-tooltip):not(#vsw-no1):not(#vsw-no2):not(#vsw-no3):not(#vsw-no4)::after,
html body.woocommerce .et_pb_wc_add_to_cart form.cart .variations td.value *:not(.vsw-disabled-cross):not(.vsw-swatch-tooltip):not(#vsw-no1):not(#vsw-no2):not(#vsw-no3):not(#vsw-no4)::before {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
}

/* 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...". */
.vsw-variations-form .vsw-shop-swatches .vsw-swatch-item:not(.vsw-swatch-radio):not(.vsw-swatch-checkbox):not(.vsw-swatch-color):not(.vsw-swatch-image),
body.woocommerce div.product form.cart .variations td.value .vsw-shop-swatches .vsw-swatch-item:not(.vsw-swatch-radio):not(.vsw-swatch-checkbox):not(.vsw-swatch-color):not(.vsw-swatch-image) {
    width: fit-content;
    min-width: 0;
    padding: 2px 12px;
}

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

/* ───────────────────────────────────────────────────────────────
   Responsive: spacing & wrapping (tablet ≤782px, mobile ≤480px)
   On narrow screens `table.variations { width:auto }` lets the row
   grow with its content and overflow sideways instead of wrapping.
   Constrain the table/cell to the available width so the flex
   swatch rows wrap, and add a real gap (the base .vsw-swatches-items
   has none) so swatches aren't flush once they stack.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 782px) {
    /* `html` prefix lifts specificity above the footer inline
       `table.variations { width:auto !important }` rule, which shares
       the same selector and would otherwise win on source order. */
    html body.woocommerce div.product form.cart table.variations,
    html body.woocommerce div.product form.cart .variations td.value {
        width: 100% !important;
        max-width: 100% !important;
    }
    .vsw-shop-swatches {
        width: 100%;
        gap: 8px;
    }
    .vsw-swatches-items {
        gap: 8px;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .vsw-shop-swatches {
        gap: 10px;
        row-gap: 10px;
    }
    .vsw-swatches-items {
        gap: 10px;
        row-gap: 10px;
    }
}

/* ==========================================================================
   Image display type — variation image preview popover (anchored above swatch)
   ========================================================================== */
.vsw-image-pop {
    position: fixed;
    z-index: 999999;
    display: none;
    padding: 8px;
    background: #fff;
    border: 2px solid #fb6514;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(26, 26, 46, 0.18);
    pointer-events: none; /* preview only — never blocks the swatches underneath */
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    transform-origin: bottom center;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.vsw-image-pop.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.vsw-image-pop.vsw-image-pop--below {
    transform-origin: top center;
}

.vsw-image-pop__img {
    display: block;
    width: 180px;
    height: 180px;
    max-width: 60vw;
    max-height: 60vw;
    object-fit: contain;
    border-radius: 6px;
    background: #f6f7f9;
}

/* Downward arrow (rotated square) sharing the popover's border colour. */
.vsw-image-pop__arrow {
    position: absolute;
    bottom: -8px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: #fff;
    border-right: 2px solid #fb6514;
    border-bottom: 2px solid #fb6514;
    transform: rotate(45deg);
}

/* When the popover flips below the swatch, the arrow points up from the top. */
.vsw-image-pop--below .vsw-image-pop__arrow {
    bottom: auto;
    top: -8px;
    border-right: none;
    border-bottom: none;
    border-left: 2px solid #fb6514;
    border-top: 2px solid #fb6514;
}