.zcs_variant_image {
        display: flex !important;
        align-items: center;
        padding: 5px !important;
        border-radius: 10px !important;
    }

    .zcs_variant_border {
        border: none !important;
    }

    .zcs_variant_image img {
        height: 45px;
        width: 45px;
        border-radius: 10px;
    }

    [data-zs-attribute-select] .theme-product-variant {
        flex-direction: column;
        margin-inline-end: 20px;
    }

    .tooltip {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.5s ease, visibility 0.5s ease;
        background: #000;
        color: #fff;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        z-index: 10;
        margin-block-start: 10px;
    }

    .tooltip-label:hover+.tooltip {
        visibility: visible;
        opacity: 1;
    }

    [data-zs-attribute-select] [data-theme-color-label]{
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
}

/* 1) Top-align every row (instead of centering) */
div.zpcontainer .zprow {
  display: flex !important;
  align-items: flex-start !important;
}

/* 2) Kill all inline min-heights on columns */
div.zpdefault-section-bg[style*="min-height"] {
  min-height: 0 !important;
  height: auto   !important;
}

/* ——————————————————————————————————————————
   Pin the full header (top-bar + nav) as one fixed block
—————————————————————————————————————————— */
.zpheader-style-07 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 10000 !important;
  background: #fff !important;   /* solid background so content won’t peek through */
}

/* ——————————————————————————————————————————
   Prevent page content from sliding under the fixed header
   (Adjust 113px to your header’s exact combined height)
—————————————————————————————————————————— */
body {
  padding-top: 113px !important;
}

/* ——————————————————————————————————————————
   Mega-menu: force full height, no scroll, single box
—————————————————————————————————————————— */
[data-megamenu-content-container] {
  overflow: visible !important;  /* ensure container never clips */
}

[data-megamenu-content-container] .zpmn,
[data-megamenu-content-container] .zpmm,
[data-megamenu-content-container] .zpmn-container-style-02,
[data-megamenu-content-container] .zpmm-container-style-02 {
  position: absolute !important;  /* float it out of the flow */
  top: 100% !important;           /* directly under its trigger */
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;   /* kill any scrollbar */
  z-index: 10001 !important;      /* above the header */
  background: #fff !important;    /* solid background */
}

[data-megamenu-content] .zpmn-inner,
[data-megamenu-content] .zpmm-inner {
  height: auto !important;
  min-height: 0 !important;
}

[data-megamenu-content] .zprow,
[data-megamenu-content] .zpm-row {
  display: flex !important;
  flex-wrap: wrap !important;
}

[data-megamenu-content] .zpelem-col,
[data-megamenu-content] .zpmm-col {
  flex: 0 0 auto !important;
  margin-bottom: 0.5rem !important;
}

/* Force the mega-menu inner container to auto-size its height */
[data-megamenu-content-container] .zpmm-container-style-02,
[data-megamenu-content-container] .zpmn-container-style-02 {
  height: auto       !important;  /* let it grow/shrink to its content */
  max-height: none   !important;  /* remove any cap */
  overflow: visible  !important;  /* no internal scrollbars */
}

/* Ensure the outer wrapper adapts too */
[data-megamenu-content-container] {
  height: auto       !important;
  max-height: none   !important;
  overflow: visible  !important;
}


-----------------------------------------------------------------------------------------------------

<script>
// Create a root folder named "ProductVariantFolder".
// Inside it, create subfolders for each attribute name (e.g., "Size", "Color").
// Place image files inside the corresponding subfolder based on the attribute value.
// Name each image file exactly as the attribute value (e.g., "Red", "Large") without including the file extension in your code logic.
/*
Folder Structure:

ProductVariantFolder/
├── Color/
│ ├── Red
│ ├── Blue
│ └── Green
├── Size/
│ ├── Small
│ ├── Medium
│ └── Large
*/

let userData = {
attributeNames :['Material', 'Color'], // Add more attribute names as needed
folderName :"ProductVariantFolder"//give the folder name for variant
}

function addVariantImages() {
userData.attributeNames.forEach(attributeName => {
let variantContainer = document.querySelector(`[data-zs-product-variant-container="${attributeName}"]`);
if (variantContainer) {
let variantElements = variantContainer.querySelectorAll('span.theme-product-variant,span.theme-product-color');
variantElements.forEach(variantElement => {
addImageToVariant(variantElement, attributeName);
});
}
});
}

function addImageToVariant(variantElement, attributeName) {
let labelElement = variantElement.querySelector('label');
labelElement.classList.add('zcs_variant_image', 'zcs_variant_border');
let variantImage = createVariantImage(variantElement, attributeName);
removeTextNodes(labelElement);
labelElement.appendChild(variantImage);
}

function createVariantImage(variantElement, attributeName) {
let variantImage = document.createElement('img');
let variantOption = variantElement.querySelector('[data-zs-attribute-option]').getAttribute('data-text');
variantImage.src = `/${userData.folderName}/${attributeName}/${variantOption}`;
return variantImage;
}

function removeTextNodes(labelElement) {
Array.from(labelElement.childNodes).forEach(childNode => {
if (childNode.nodeType === Node.TEXT_NODE) {
labelElement.removeChild(childNode);
}
});
}

function attributeSelection() {
function handleClick() {
if (this.classList.contains('chekedLabel')) {
this.classList.remove('zcs_variant_border');
} else {
this.classList.add('zcs_variant_border');
}
var uncheckedElements = document.querySelectorAll('[data-theme-variant-label]:not(.chekedLabel)');
uncheckedElements.forEach(function (element) {
element.classList.add('zcs_variant_border');
});
}

var elements = document.querySelectorAll('[data-theme-variant-label]');

elements.forEach(function (element) {
element.addEventListener('click', handleClick);
});
}

function displayAttributeText() {
userData.attributeNames.forEach(attributeName => {
let variantContainer = document.querySelector(`[data-zs-product-variant-container="${attributeName}"]`);
if (variantContainer) {
let attributeLabels = variantContainer.querySelectorAll('[data-theme-variant-label]');
attributeLabels.forEach(label => {
let toolTip = createToolTip(label);
label.classList.add('tooltip-label');
});
}
});
}

function createToolTip(label) {
let toolTip = document.createElement('div');
let attributeName = label.querySelector('[data-zs-attribute-option]');
let text = attributeName.getAttribute('data-text');
toolTip.textContent = `${text}`;
toolTip.classList.add('tooltip');
label.insertAdjacentElement("afterend", toolTip);
return toolTip;
}

function loadPage() {
if (zs_view === "product") {
addVariantImages();
attributeSelection();
displayAttributeText();
}
}

window.addEventListener('load', loadPage);
</script>