/* Force fixed layout so widths apply */
.table {
    table-layout: fixed;
}


.col-shortName {
    width: 18%;
}

.col-actions {
    width: 330px;
    min-width: 330px;
}


.font-product {

	font-size: 15px;
	font-weight: 600;
    white-space: nowrap;        /* Prevent text from breaking */
    overflow: hidden;           /* Hide overflowing text */
    text-overflow: ellipsis;    /* Add "..." */

}

.product-thumb {
    border: 1px solid #ddd;      /* normal border */
    cursor: pointer;
    transition: border 0.2s ease;
}

.product-thumb.selected {
    border: 1px solid #3f3f3f !important; /* black border for selected */
}

/* Force main image to be perfectly square */
#main-product-image {
    aspect-ratio: 1 / 1;      /* always square */
    width: 100%;              /* responsive width */
    object-fit: cover;        /* center-crop image */
    border-radius: 8px;       /* optional */
}

.product-thumb {
    aspect-ratio: 1 / 1;  /* make square */
    width: 70px;          /* your thumbnail size */
    height: auto;         
    object-fit: cover;    /* crop nicely */
    border-radius: 6px;   /* optional */
}

.thumbnail-wrapper {
    aspect-ratio: 1 / 1;
    width: 70px;
    overflow: hidden;
}

.thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#product-attributes .attr-key {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Ensure ellipsis can work */
    display: block; 
}

#product-attributes .attr-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html, body {
    height: 100%;
    overflow: hidden;
}

.product-container {
    height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
}

.product-container-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;   /* 🔥 YOU MISSED THIS */
}

/* ONLY table scrolls */
.table-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;   /* 🔥 THIS IS THE FIX */
}

.table thead th {
    position: sticky;
    top: 0;
    z-index: 2;

}