/* RIMO Fashion – OP Product Builder frontend refinement
   Scoped to product pages and the module container. */
body#product #op_builder {
  background: #fbfaf7 !important;
  color: #232323 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08) !important;
  border-radius: 18px !important;
  padding: 26px !important;
}

body#product #op_builder .op_stepTitle {
  font-size: clamp(1.35rem, 2.2vw, 2rem) !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
  margin: 0 0 1.2rem !important;
  line-height: 1.2 !important;
}

body#product #op_builder .op_fields {
  border-radius: 14px !important;
}

body#product #op_builder .op_fieldBloc {
  margin-bottom: 1rem !important;
}

body#product #op_builder .op_buttonField,
body#product #op_builder .op_field[data-optype="button"],
body#product #op_builder .op_radioImg,
body#product #op_builder [data-optype="selectableImage"] {
  border-radius: 14px !important;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease !important;
}

body#product #op_builder .op_buttonField:hover,
body#product #op_builder .op_radioImg:hover,
body#product #op_builder [data-optype="selectableImage"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
}

body#product #op_builder .op_selected,
body#product #op_builder input:checked ~ .state label,
body#product #op_builder .op_imgCheckmark {
  border-color: #b08a45 !important;
}

body#product #op_builder input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
body#product #op_builder textarea,
body#product #op_builder select {
  border-radius: 10px !important;
  border: 1px solid #d8d2c5 !important;
  background: #fff !important;
  padding: 0.75rem 0.85rem !important;
}

body#product #op_nextStepCt {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 1.5rem !important;
}

body#product #op_nextStepCt .op_button {
  min-height: 46px !important;
  border-radius: 999px !important;
  padding: 0.75rem 1.35rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

body#product #op_nextStepBtn {
  margin-left: auto !important;
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #111 !important;
}

body#product #op_prevStepBtn {
  background: transparent !important;
  color: #222 !important;
  border: 1px solid #d8d2c5 !important;
}

body#product #op_prevStepBtn.op_hidden,
body#product .rimo_builder_progress.op_hidden {
  display: none !important;
}

body#product .rimo_builder_progress {
  margin: 0 0 1.35rem !important;
  padding: 0 0 1.1rem !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  overflow-x: auto !important;
}

body#product .rimo_builder_progress .rimo_builder_progress_list {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body#product .rimo_builder_progress .rimo_builder_progress_item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

body#product .rimo_builder_progress .rimo_builder_progress_item:not(:last-child)::after {
  content: "" !important;
  width: 28px !important;
  height: 1px !important;
  background: #d8d2c5 !important;
  margin-left: 10px !important;
}

body#product .rimo_builder_progress .rimo_builder_progress_button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid #d8d2c5 !important;
  background: #fff !important;
  color: #444 !important;
  border-radius: 999px !important;
  padding: 0.45rem 0.75rem !important;
  font-size: 0.86rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body#product .rimo_builder_progress .rimo_builder_progress_button:disabled {
  cursor: default !important;
}

body#product .rimo_builder_progress .rimo_builder_progress_number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #f2eee6 !important;
  color: #222 !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
}

body#product .rimo_builder_progress .is-complete .rimo_builder_progress_button {
  color: #222 !important;
}

body#product .rimo_builder_progress .is-complete .rimo_builder_progress_number {
  background: #222 !important;
  color: #fff !important;
}

body#product .rimo_builder_progress .is-current .rimo_builder_progress_button {
  border-color: #b08a45 !important;
  background: #f7f1e6 !important;
  color: #111 !important;
}

body#product .rimo_builder_progress .is-current .rimo_builder_progress_number {
  background: #b08a45 !important;
  color: #fff !important;
}

@media (max-width: 767px) {
  body#product #op_builder {
    padding: 18px !important;
    border-radius: 14px !important;
  }

  body#product #op_nextStepCt {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }

  body#product #op_nextStepCt .op_button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  body#product .rimo_builder_progress .rimo_builder_progress_label {
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Summary after the last builder step */
body#product #op_builderMeta .rimo_builder_summary {
  background: #fbfaf7 !important;
  color: #232323 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.07) !important;
  border-radius: 18px !important;
  padding: 26px !important;
  margin-top: 1.35rem !important;
}

body#product #op_builderMeta .rimo_builder_summary_head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 1rem !important;
}

body#product #op_builderMeta .rimo_builder_summary_title {
  font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
}

body#product #op_builderMeta .rimo_builder_summary_edit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid #d8d2c5 !important;
  background: #fff !important;
  color: #222 !important;
  padding: 0.65rem 1.1rem !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}

body#product #op_builderMeta .rimo_builder_summary_edit:hover {
  border-color: #b08a45 !important;
  background: #f7f1e6 !important;
}

body#product #op_builderMeta table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: #fff !important;
}

body#product #op_builderMeta table th,
body#product #op_builderMeta table td {
  padding: 0.75rem 0.9rem !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  vertical-align: top !important;
}

body#product #op_builderMeta table thead th {
  background: #f2eee6 !important;
  color: #222 !important;
  font-weight: 650 !important;
}

body#product #op_builderMeta table tbody tr:last-child th,
body#product #op_builderMeta table tbody tr:last-child td {
  border-bottom: 0 !important;
}

body#product #op_builderMeta .op_totalLabelTd,
body#product #op_builderMeta .op_totalTd {
  font-weight: 700 !important;
  background: #f7f1e6 !important;
}

/* Image / colour tiles: label below the image, hover/selected state covers image and text */
body#product #op_builder .op_row .op_fieldBloc[data-optype="selectableImage"],
body#product #op_builder .op_fieldBloc[data-optype="selectableImage"] {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  vertical-align: top !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"] .op_selectableImage {
  order: 1 !important;
  display: block !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: transform 160ms ease, box-shadow 160ms ease, outline-color 160ms ease !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"] .op_fieldLabel {
  order: 2 !important;
  margin: 0.45rem 0 0 !important;
  padding: 0.2rem 0.35rem !important;
  border-radius: 8px !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
  transition: color 160ms ease, background-color 160ms ease, font-weight 160ms ease !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"]:hover .op_fieldLabel,
body#product #op_builder .op_fieldBloc[data-optype="selectableImage"].op_image_selected .op_fieldLabel {
  color: #111 !important;
  background: #f7f1e6 !important;
  font-weight: 650 !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"]:hover .op_selectableImage,
body#product #op_builder .op_fieldBloc[data-optype="selectableImage"].op_image_selected .op_selectableImage {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1) !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"].op_image_selected .op_selectableImage {
  outline: 2px solid #b08a45 !important;
  outline-offset: 2px !important;
}

@media (max-width: 767px) {
  body#product #op_builderMeta .rimo_builder_summary {
    padding: 18px !important;
    border-radius: 14px !important;
  }

  body#product #op_builderMeta .rimo_builder_summary_head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body#product #op_builderMeta .rimo_builder_summary_edit {
    width: 100% !important;
  }
}

/* RIMO v3: stable colour tile grid and unclipped selected checkmark */
body#product #op_builder .op_row .op_fieldBloc[data-optype="selectableImage"],
body#product #op_builder .op_fieldBloc[data-optype="selectableImage"] {
  display: inline-grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 104px minmax(36px, auto) !important;
  align-items: start !important;
  justify-items: start !important;
  width: 116px !important;
  min-height: 146px !important;
  margin: 0 16px 18px 0 !important;
  position: relative !important;
  overflow: visible !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"] .op_selectableImage {
  order: 1 !important;
  position: relative !important;
  display: block !important;
  width: 100px !important;
  height: 100px !important;
  border-radius: 10px !important;
  overflow: visible !important;
  transition: box-shadow 160ms ease, outline-color 160ms ease !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"] .op_selectableImage img {
  display: block !important;
  width: 100px !important;
  height: 100px !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"] .op_imgCheckmark {
  position: absolute !important;
  right: -9px !important;
  bottom: -9px !important;
  z-index: 40 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #2fb5d3 !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
  pointer-events: none !important;
  overflow: visible !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"] .op_fieldLabel {
  order: 2 !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  min-height: 34px !important;
  width: auto !important;
  max-width: 116px !important;
  margin: 0.35rem 0 0 !important;
  padding: 0.16rem 0.36rem !important;
  border-radius: 8px !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"]:hover .op_selectableImage,
body#product #op_builder .op_fieldBloc[data-optype="selectableImage"].op_image_selected .op_selectableImage {
  transform: none !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1) !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"].op_image_selected .op_selectableImage {
  outline: 2px solid #b08a45 !important;
  outline-offset: 2px !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"]:hover .op_fieldLabel,
body#product #op_builder .op_fieldBloc[data-optype="selectableImage"].op_image_selected .op_fieldLabel {
  color: #111 !important;
  background: #f7f1e6 !important;
  box-shadow: 0 1px 0 rgba(176, 138, 69, 0.18) !important;
  font-weight: 650 !important;
}

/* RIMO v3: cleaner final configuration summary */
body#product #op_builderMeta .rimo_builder_summary {
  background: #fbfaf7 !important;
  border: 1px solid #eee7da !important;
}

body#product #op_builderMeta .rimo_selection_summary {
  margin-top: 0.8rem !important;
}

body#product #op_builderMeta .rimo_selection_summary_subtitle {
  margin: 0 0 0.85rem !important;
  color: #222 !important;
  font-size: 1.08rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
}

body#product #op_builderMeta .rimo_selection_summary_list {
  display: grid !important;
  gap: 10px !important;
}

body#product #op_builderMeta .rimo_selection_summary_item {
  display: grid !important;
  grid-template-columns: minmax(120px, 0.85fr) minmax(0, 1.45fr) auto !important;
  align-items: center !important;
  gap: 12px 18px !important;
  padding: 13px 15px !important;
  background: #fff !important;
  border: 1px solid #eee4d4 !important;
  border-radius: 14px !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.035) !important;
}

body#product #op_builderMeta .rimo_selection_summary_question {
  color: #6d6a64 !important;
  font-size: 0.9rem !important;
  font-weight: 650 !important;
}

body#product #op_builderMeta .rimo_selection_summary_answer {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  color: #222 !important;
}

body#product #op_builderMeta .rimo_selection_summary_answer strong {
  font-size: 0.98rem !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

body#product #op_builderMeta .rimo_selection_summary_answer span {
  color: #77716a !important;
  font-size: 0.82rem !important;
  line-height: 1.25 !important;
}

body#product #op_builderMeta .rimo_selection_summary_price {
  justify-self: end !important;
  white-space: nowrap !important;
  color: #4a3820 !important;
  background: #f7f1e6 !important;
  border: 1px solid #e6d8bf !important;
  border-radius: 999px !important;
  padding: 0.32rem 0.62rem !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
}

body#product #op_builderMeta .rimo_selection_summary_price.is-included {
  color: #77716a !important;
  background: transparent !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}

body#product #op_builderMeta .rimo_selection_summary_totals {
  margin-top: 1rem !important;
  margin-left: auto !important;
  width: min(100%, 340px) !important;
  background: #fff !important;
  border: 1px solid #eee4d4 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

body#product #op_builderMeta .rimo_selection_summary_total_row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 0.72rem 0.95rem !important;
  border-bottom: 1px solid #f0e8db !important;
}

body#product #op_builderMeta .rimo_selection_summary_total_row:last-child {
  border-bottom: 0 !important;
}

body#product #op_builderMeta .rimo_selection_summary_total_row.is-tax {
  color: #77716a !important;
  font-size: 0.9rem !important;
}

body#product #op_builderMeta .rimo_selection_summary_total_row.is-total {
  background: #f7f1e6 !important;
  color: #222 !important;
  font-weight: 700 !important;
}

body#product #op_builderMeta .rimo_selection_summary_empty {
  padding: 1rem !important;
  color: #77716a !important;
  background: #fff !important;
  border: 1px solid #eee4d4 !important;
  border-radius: 14px !important;
}

body#product #op_builderMeta #op_productSelection table,
body#product #op_builderMeta #op_productSelection th,
body#product #op_builderMeta #op_productSelection td {
  border: 0 !important;
  background-image: none !important;
}

@media (max-width: 767px) {
  body#product #op_builder .op_row .op_fieldBloc[data-optype="selectableImage"],
  body#product #op_builder .op_fieldBloc[data-optype="selectableImage"] {
    width: 108px !important;
    margin-right: 12px !important;
  }

  body#product #op_builder .op_fieldBloc[data-optype="selectableImage"] .op_fieldLabel {
    max-width: 108px !important;
  }

  body#product #op_builderMeta .rimo_selection_summary_item {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 5px !important;
  }

  body#product #op_builderMeta .rimo_selection_summary_price {
    justify-self: start !important;
  }
}


/* RIMO v4: center selected/hovered colour tiles and adjust checkmark colour */
body#product #op_builder .op_row .op_fieldBloc[data-optype="selectableImage"],
body#product #op_builder .op_fieldBloc[data-optype="selectableImage"] {
  justify-items: center !important;
  align-items: start !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"] .op_selectableImage {
  justify-self: center !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"] .op_fieldLabel {
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  max-width: 112px !important;
  min-height: 34px !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"] .op_imgCheckmark {
  background: #b08a45 !important;
  color: #fff !important;
  border: 2px solid #fbfaf7 !important;
  box-shadow: 0 5px 14px rgba(43, 35, 23, 0.28) !important;
}

body#product #op_builder .op_fieldBloc[data-optype="selectableImage"]:hover .op_fieldLabel,
body#product #op_builder .op_fieldBloc[data-optype="selectableImage"].op_image_selected .op_fieldLabel {
  justify-self: center !important;
  text-align: center !important;
}


/* RIMO v12: temporary configure button is separated from the real cart button.
   The real .add-to-cart button is not restyled here, so its original hover behaviour remains intact. */
body#product #op_mainBtn.rimo_builder_configure_btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 190px !important;
  min-height: 46px !important;
  padding: 0 30px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid #1f1f1f !important;
  background: linear-gradient(180deg, #e7c263 0%, #c9962c 100%) !important;
  color: #202020 !important;
  box-shadow: 0 8px 20px rgba(31, 31, 31, 0.14), inset 0 1px 0 rgba(255,255,255,0.45) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 2 !important;
}

body#product #op_mainBtn.rimo_builder_configure_btn:hover,
body#product #op_mainBtn.rimo_builder_configure_btn:focus,
body#product #op_mainBtn.rimo_builder_configure_btn:active {
  background: #1f1f1f !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #1f1f1f !important;
  box-shadow: 0 10px 24px rgba(31, 31, 31, 0.22) !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

body#product #op_mainBtn.rimo_builder_configure_btn *,
body#product #op_mainBtn.rimo_builder_configure_btn:hover *,
body#product #op_mainBtn.rimo_builder_configure_btn:focus *,
body#product #op_mainBtn.rimo_builder_configure_btn:active * {
  color: inherit !important;
  fill: currentColor !important;
  text-shadow: none !important;
}

body#product #op_mainBtn.rimo_builder_configure_btn::before,
body#product #op_mainBtn.rimo_builder_configure_btn::after {
  display: none !important;
  content: none !important;
}

body#product #op_mainBtn.rimo_builder_configure_btn .op_icon {
  margin-right: 0 !important;
  line-height: 1 !important;
}


/* RIMO v13: mobile visibility/sticky nav fix for the builder progress and back button */
@media (max-width: 767px) {
  body#product #op_builder #rimo_builder_progress:not(.op_hidden),
  body#product #op_builderMeta #rimo_builder_meta_progress:not(.op_hidden) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    background: #fbfaf7 !important;
    margin: -4px -18px 1rem !important;
    padding: 12px 18px 10px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body#product #op_builder #op_prevStepBtn:not(.op_hidden) {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body#product #op_builder #op_prevStepBtn.op_hidden {
    display: none !important;
  }

  body#product #op_nextStepCt {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 25 !important;
    background: linear-gradient(180deg, rgba(251, 250, 247, 0.82) 0%, #fbfaf7 26%) !important;
    padding-top: 12px !important;
    padding-bottom: 4px !important;
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}