/* Base wrapper */
.cj-wrap{ position:relative; display:block; }
select.cj-hidden{
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
  display:none;
}
.cj-button{
  width:100%; display:flex; align-items:center; justify-content:flex-start;
  gap:.5rem; padding:10px 36px 10px 40px;
  border:1px solid var(--cj-border, #cfdccd); border-radius:4px;
  background:#fff; line-height:1.2; position:relative; cursor:pointer;
}
.cj-button, .cj-option{ font: inherit; font-size: inherit; color: inherit; }
.cj-button .cj-caret{
  position:absolute; right:17px; top:50%; transform:translateY(-50%) rotate(45deg);
  width:5px; height:5px; border-right:2px solid #666666; border-bottom:2px solid #666666;
  pointer-events:none;
}
.cj-open .cj-button .cj-caret{ transform:translateY(-50%) rotate(-135deg); }
.cj-chip{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border:1px solid rgba(0,0,0,.25); border-radius:2px;
  background:transparent; box-sizing:border-box; pointer-events:none;
}
.cj-chip.cj-empty{
  background:
    linear-gradient(45deg, #eee 25%, transparent 25%),
    linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%),
    linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size:10px 10px; background-position:0 0,0 5px,5px -5px,-5px 0;
}
.cj-list{
  position:absolute; left:0; right:0; z-index:50;
  background:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,.08); max-height:250px; overflow:auto; display:none;
  border-radius: 0px;
  border-style: solid;
  border-color: black;
}
.cj-open .cj-list{ display:block; }
.cj-option{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; cursor:pointer;
}
/*.cj-option:hover{ background:#f7faf7; }*/
.cj-option[aria-selected="true"]{ background:#eef8ee; }
.cj-swatch{
  width:18px; height:18px; border:1px solid rgba(0,0,0,.25); border-radius:2px;
}
.cj-swatch.cj-light, .cj-chip.cj-light{ border-color:rgba(0,0,0,.35) }
/*.variations .cj-wrap .cj-button{ border-color:#8bd09a; }
.variations .cj-wrap .cj-list{ border-color:#8bd09a; }*/
.cj-wrap{ min-height:38px; padding-bottom: 2px;}
.cj-option span {font-size: 15px;}
.cj-button {font-size: 16px;}
.cj-button:focus{
  outline: 2px solid var(--btx-accent);
  border-color: var(--btx-accent);
}

/* Unified control height for button + options */
.single-product table.variations { --cj-control-height: 40px; } /* adjust if needed */

/* Ensure the button uses it (in case not already set) */
.single-product table.variations .cj-button {
  height: var(--cj-control-height);
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
  box-sizing: border-box;
  border-radius: var(--btx-radius);
}

/* Make each dropdown option the same height as the button */
.single-product table.variations .cj-option {
  height: var(--cj-control-height);
  border-radius: 0px;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* trims long color names cleanly */
}
/* Match theme <select> option hover color */
.single-product div.product form.variations_form .variations .cj-list .cj-option:hover {
  background: var(--btx-accent) !important;  /* same as the theme’s hover */
  color: inherit;                   /* keep text color consistent */
}

/* Optional: keyboard parity with theme focus ring */
.single-product div.product form.variations_form .variations .cj-list .cj-option:focus-visible {
  outline: 2px solid var(--btx-accent);
  outline-offset: -2px;
}

/* Match Cliffjumper control width to Woo selects */
.single-product .variations td.value > .cj-wrap {
  display: inline-block !important;  /* same display as the select */
  min-width: 75% !important;         /* same min width */
  max-width: 100% !important;
  margin-right: 1em !important;      /* same right margin */
  width: auto !important;            /* let min-width drive */
  box-sizing: border-box !important;
  vertical-align: middle;
}

/* Make the button fill the wrapper */
.single-product .variations td.value > .cj-wrap > .cj-button {
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Optional – mimic responsive stacking if your theme makes selects full-width on small screens */
@media (max-width: 768px) {
  .single-product .variations td.value > .cj-wrap {
    display: block !important;
    min-width: 100% !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
}