/* ==================================================
   Product variation selectors
   Shared by Quick View and the prototype product-detail page.
   ================================================== */

.product-variant-options {
  display: grid;
  gap: 14px;
  margin: 0 0 22px;
}

.product-variant-options[hidden] {
  display: none;
}

.product-option-field {
  display: grid;
  gap: 7px;
}

.product-option-field label {
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-option-field select {
  width: 100%;
  min-height: 46px;
  padding: 10px 38px 10px 13px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(51, 47, 45, 0.16);
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.product-option-field select:focus-visible {
  outline: 3px solid rgba(47, 125, 120, 0.22);
  outline-offset: 2px;
  border-color: var(--teal);
}

.product-option-field select:disabled,
.product-option-field option:disabled {
  color: rgba(51, 47, 45, 0.5);
}

.product-option-field select:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.product-variant-note {
  margin: -8px 0 18px;
  padding: 12px 14px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(183, 151, 76, 0.28);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.6;
  white-space: pre-line;
}

.product-variant-note[hidden] {
  display: none;
}