/* =========================================================
   WRS PRODUCT OPTIONS — titles above, compact cards, clear selected
========================================================= */

.product-info .product-details .product-options > .form-group,
.product-info .product-options > .form-group,
#product .product-options > .form-group,
#product .product-options > .form-group.wrs-option-group {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 10px !important;
  padding: 10px 12px !important;
  background: #f7f9fc !important;
  border: 1px solid #e1e8f2 !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

.product-info .product-details .product-options > .form-group::before,
.product-info .product-details .product-options > .form-group::after,
#product .product-options > .form-group::before,
#product .product-options > .form-group::after {
  display: none !important;
  content: none !important;
}

.product-info .product-details .product-options > .form-group > .control-label,
.product-info .product-options > .form-group > .control-label,
#product .product-options > .form-group > .control-label,
#product .product-options > .form-group > .control-label.wrs-option-label {
  display: block !important;
  float: none !important;
  position: static !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 0 6px !important;
  border: 0 !important;
  border-bottom: 1px solid #d7e1ef !important;
  text-align: left !important;
  white-space: normal !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.25 !important;
  color: #052257 !important;
  text-transform: uppercase !important;
}

.product-info .product-details .product-options > .form-group > div[id*="input"],
.product-info .product-details .product-options > .form-group > .form-control,
.product-info .product-details .product-options > .form-group > select,
#product .product-options > .form-group > div[id*="input"],
#product .product-options > .form-group > .form-control,
#product .product-options > .form-group > select {
  float: none !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

#product .product-options .product-option-select .form-control,
.product-info .product-options .product-option-select .form-control {
  min-height: 40px !important;
  height: 40px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(7, 46, 119, 0.22) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

#product .product-options .push-option > div[id*="input"],
.product-info .product-options .push-option > div[id*="input"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

#product .product-options .push-option > div[id*="input"] > .radio,
#product .product-options .push-option > div[id*="input"] > .checkbox,
.product-info .product-options .push-option > div[id*="input"] > .radio,
.product-info .product-options .push-option > div[id*="input"] > .checkbox {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#product .product-options .push-option > div[id*="input"] label,
.product-info .product-options .push-option > div[id*="input"] label {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

#product .product-options .push-option .option-wrapper,
.product-info .product-options .push-option .option-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 8px 10px !important;
  background: #fff !important;
  border: 2px solid rgba(7, 46, 119, 0.16) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}

#product .product-options .push-option .option-wrapper img,
#product .product-options .push-option .push-option-image img,
.product-info .product-options .push-option .option-wrapper img {
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  background: #fff !important;
}

#product .product-options .push-option .option-value,
.product-info .product-options .push-option .option-value {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #1c2021 !important;
  white-space: normal !important;
}

#product .product-options .push-option .option-price,
.product-info .product-options .push-option .option-price {
  display: block !important;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #0b4fd0 !important;
  white-space: normal !important;
}

#product .product-options .push-option input:checked + .option-wrapper,
#product .product-options .push-option.push-option input:checked + .option-wrapper,
.product-info .product-options .push-option input:checked + .option-wrapper,
.no-touchevents #product .product-options .push-option.push-option input:checked + .option-wrapper {
  border-color: #0b4fd0 !important;
  background: #eef4ff !important;
  box-shadow: 0 0 0 1px #0b4fd0 inset !important;
}

.no-touchevents #product .product-options .push-option .option-wrapper:hover,
.no-touchevents .product-info .product-options .push-option .option-wrapper:hover {
  border-color: rgba(11, 79, 208, 0.55) !important;
}

/* Single option (gift): compact, not full-width empty card */
#product .product-options .push-option > div[id*="input"]:has(> :only-child),
.product-info .product-options .push-option > div[id*="input"]:has(> :only-child) {
  display: block !important;
}

#product .product-options .push-option > div[id*="input"]:has(> :only-child) > div,
.product-info .product-options .push-option > div[id*="input"]:has(> :only-child) > div {
  width: fit-content !important;
  max-width: 100% !important;
}

#product .product-options .push-option > div[id*="input"]:has(> :only-child) .option-wrapper,
.product-info .product-options .push-option > div[id*="input"]:has(> :only-child) .option-wrapper {
  width: auto !important;
  min-width: 190px !important;
}

/* Gift option: always marked, distinct green (not blue like paid add-ons) */
#product .product-options > .form-group.wrs-gift-option,
.product-info .product-options > .form-group.wrs-gift-option {
  background: #eefaf3 !important;
  border-color: #b7e4c7 !important;
}

#product .product-options > .form-group.wrs-gift-option > .control-label,
.product-info .product-options > .form-group.wrs-gift-option > .control-label {
  color: #0b7a45 !important;
  border-bottom-color: #b7e4c7 !important;
}

#product .product-options > .form-group.wrs-gift-option .option-wrapper,
#product .product-options > .form-group.wrs-gift-option.push-option .option-wrapper,
#product .product-options > .form-group.wrs-gift-option input:checked + .option-wrapper,
#product .product-options > .form-group.wrs-gift-option.push-option input:checked + .option-wrapper,
.product-info .product-options > .form-group.wrs-gift-option .option-wrapper,
.product-info .product-options > .form-group.wrs-gift-option input:checked + .option-wrapper,
.no-touchevents #product .product-options > .form-group.wrs-gift-option .option-wrapper:hover,
.no-touchevents #product .product-options > .form-group.wrs-gift-option.push-option .option-wrapper:hover {
  border-color: #12a35a !important;
  background: #e6f8ee !important;
  box-shadow: 0 0 0 1px #12a35a inset !important;
  cursor: default !important;
}

#product .product-options > .form-group.wrs-gift-option .option-value,
.product-info .product-options > .form-group.wrs-gift-option .option-value {
  color: #0b7a45 !important;
}

@media (max-width: 420px) {
  #product .product-options .push-option > div[id*="input"],
  .product-info .product-options .push-option > div[id*="input"] {
    grid-template-columns: 1fr !important;
  }

  #product .product-options .push-option > div[id*="input"]:has(> :only-child) .option-wrapper,
  .product-info .product-options .push-option > div[id*="input"]:has(> :only-child) .option-wrapper {
    width: 100% !important;
    min-width: 0 !important;
  }
}