.robe-size-title {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 15px;
}

/* MAIN GRID WRAPPER */
.robe-size-matrix {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-column-gap: 15px;
  row-gap: 10px;
  max-width: 600px;
  margin-top: 20px;
}

/* STYLE EACH FORM ITEM */
.robe-size-matrix .form-item {
  display: contents;
}

/* LABEL BOX (LEFT SIDE) */
.robe-size-matrix .form-item label {
  background: #e5e5e5;
  padding: 10px 12px;
  border-radius: 4px;
  display: block;
  font-weight: bold;
  font-size: 13px;
  border: 1px solid #cccccc;
}

/* QUANTITY BOX (RIGHT SIDE) */
.robe-size-matrix .form-item input[type="number"] {
  width: 70px;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #b5b5b5;
  font-size: 14px;
}

/* HOVER EFFECT FOR LABEL */
.robe-size-matrix .form-item label:hover {
  background: #d9d9d9;
}

/* OPTIONAL: MAKE SURE LABEL IS LEFT-ALIGNED */
.robe-size-matrix .form-item label {
  text-align: left;
}

/* MATCH SCREENSHOT SPACING EXACTLY */
#uc-commerce-migrate-custom-add-to-cart-form {
  margin-top: 15px;
}

.robe-size-matrix .form-type-number {
    display: grid;
    grid-template-columns: 0.9fr 50px;
}

.robe-size-matrix .form-type-number label{
    font-weight: unset;
}

.robe-size-header {
    width: 230px;
    display: grid;
    grid-template-columns: 1fr 40px;
    padding: 0px 5px;
}

.robe-size-custom-wrapper {
  border: 1px solid #ccc;
  padding: 15px 20px;
  border-radius: 6px;
  margin-top: 15px;
  max-width: 550px;
}

/* Remove spacing issues */
.robe-size-matrix .form-type-number {
  margin-bottom: 0 !important;
  padding: 12px 5px;
  border-radius: 0;
}

/* 1 + 2 → DARK GREY */
.robe-size-matrix .form-type-number:nth-child(4n+1),
.robe-size-matrix .form-type-number:nth-child(4n+2) {
  background: #d2d2d2; /* DARK GREY */
}

/* 3 + 4 → LIGHT GREY */
.robe-size-matrix .form-type-number:nth-child(4n+3),
.robe-size-matrix .form-type-number:nth-child(4n+4) {
  background: #a5a4a4; /* LIGHT GREY */
}

/* https://www.honorsgraduation.com/images/info-25.png */
.size-tooltip-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url(/themes/custom/honorsgrad/images/info-25.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 4px;
  cursor: pointer; /* NORMAL POINTER */
  position: relative;
}

/* Tooltip bubble */
.size-tooltip-icon:hover::after {
  content: attr(data-tip);
  position: absolute;
  top: -5px;
  left: 22px;
  white-space: nowrap;
  background: #fff8a5; /* LIGHT YELLOW BACKGROUND */
  color: #333;
  border: 1px solid #e2d76d;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  z-index: 999;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Small arrow */
.size-tooltip-icon:hover::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 16px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #fff8a5; /* Same yellow as tooltip */
  z-index: 1000;
}

/* Hide spinners for all number inputs */
.robe-size-custom-wrapper input[type="number"]::-webkit-inner-spin-button,
.robe-size-custom-wrapper input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
.robe-size-custom-wrapper input[type="number"] {
  -moz-appearance: textfield;
}