/**
 * TM Extra Product Options 7.x — single product “pill / inline row” compatibility
 *
 * Why it failed before:
 * - With “Items per row” set (often 1), each choice <li> gets class tm-per-row and EPO injects CSS:
 *     .tm-product-id-{id} .element_{n} li { flex: 0 0 calc(...) !important; max-width: ... !important; }
 * - Older compat CSS used :not(.tm-per-row), so NO rules matched those rows — pills stretched full width.
 *
 * Enqueue AFTER all EPO styles (wp_enqueue_scripts priority 100+ or late in Additional CSS)
 * so these !important declarations win over injected EPO rules.
 */

/* -------------------------------------------------------------------------
   Lists: flex + wrap (includes tm-per-row and fullwidth-ul radio/checkbox)
   ------------------------------------------------------------------------- */
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio:not(.tm-extra-product-options-variations),
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-radio:not(.tm-extra-product-options-variations),
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox:not(.tm-extra-product-options-variations),
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-checkbox:not(.tm-extra-product-options-variations) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px 10px;
  width: 100%;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

/*
 * Choice <li>: beat plugin tm-epo.css AND injected .tm-product-id-X .element_Y li { flex… !important }
 * Specificity: body + div[class*=tm-product-id] + ul classes + > li + … > injected (2 classes + li)
 */
body.single-product div.tm-extra-product-options[class*="tm-product-id-"] ul.tmcp-ul-wrap.tm-extra-product-options-radio > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-li-container):not(.tc-epo-element-product-holder),
body.single-product div.tm-extra-product-options[class*="tm-product-id-"] ul.tmcp-ul-wrap.tm-element-ul-radio > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-li-container):not(.tc-epo-element-product-holder),
body.single-product div.tm-extra-product-options[class*="tm-product-id-"] ul.tmcp-ul-wrap.tm-extra-product-options-checkbox > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-li-container):not(.tc-epo-element-product-holder),
body.single-product div.tm-extra-product-options[class*="tm-product-id-"] ul.tmcp-ul-wrap.tm-element-ul-checkbox > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-li-container):not(.tc-epo-element-product-holder),
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-li-container):not(.tc-epo-element-product-holder),
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-radio > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-li-container):not(.tc-epo-element-product-holder),
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-li-container):not(.tc-epo-element-product-holder),
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-checkbox > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-li-container):not(.tc-epo-element-product-holder) {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  align-self: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

body.single-product.tm-responsive div.tm-extra-product-options[class*="tm-product-id-"] ul.tmcp-ul-wrap.tm-extra-product-options-radio > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-holder),
body.single-product.tm-responsive div.tm-extra-product-options[class*="tm-product-id-"] ul.tmcp-ul-wrap.tm-element-ul-radio > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-holder),
body.single-product.tm-responsive div.tm-extra-product-options[class*="tm-product-id-"] ul.tmcp-ul-wrap.tm-extra-product-options-checkbox > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-holder),
body.single-product.tm-responsive div.tm-extra-product-options[class*="tm-product-id-"] ul.tmcp-ul-wrap.tm-element-ul-checkbox > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-holder),
body.single-product.tm-responsive .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-holder),
body.single-product.tm-responsive .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-radio > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-holder),
body.single-product.tm-responsive .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-holder),
body.single-product.tm-responsive .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-checkbox > li.tmcp-field-wrap:not(.is-separator):not(.tc-epo-element-product-holder) {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  flex-basis: auto !important;
}

/* Separators: full row */
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.is-separator {
  flex: 0 0 100% !important;
  width: 100% !important;
}

/* Inner row: shrink; label.fullwidth (EPO global) otherwise keeps 100% width */
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio li.tmcp-field-wrap .tmcp-field-wrap-inner,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-radio li.tmcp-field-wrap .tmcp-field-wrap-inner,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap .tmcp-field-wrap-inner,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-checkbox li.tmcp-field-wrap .tmcp-field-wrap-inner {
  width: auto !important;
  max-width: 100%;
  justify-content: flex-start;
}

body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio li.tmcp-field-wrap .tc-field-label-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-radio li.tmcp-field-wrap .tc-field-label-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap .tc-field-label-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-checkbox li.tmcp-field-wrap .tc-field-label-wrap {
  width: auto !important;
  max-width: 100%;
}

/* .tc-col { flex: 1 1 0 } on label — reset; same when label has .fullwidth from EPO settings */
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio li.tmcp-field-wrap label.tm-epo-field-label.tc-col,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-radio li.tmcp-field-wrap label.tm-epo-field-label.tc-col,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap label.tm-epo-field-label.tc-col,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-checkbox li.tmcp-field-wrap label.tm-epo-field-label.tc-col,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio li.tmcp-field-wrap label.tm-epo-field-label.fullwidth,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-radio li.tmcp-field-wrap label.tm-epo-field-label.fullwidth,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap label.tm-epo-field-label.fullwidth,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-checkbox li.tmcp-field-wrap label.tm-epo-field-label.fullwidth {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

/* -------------------------------------------------------------------------
   Group headings (orange)
   ------------------------------------------------------------------------- */
body.single-product .tm-extra-product-options li.cpf-element > .tc-epo-label.tm-epo-element-label,
body.single-product .tm-extra-product-options .tm-section-label,
body.single-product .tm-extra-product-options .tm-box .tm-section-label,
body.single-product .tm-extra-product-options .tm-collapse .tm-section-label,
body.single-product .tm-extra-product-options .tc-epo-label.tm-section-label {
  color: #ff7748;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  margin: 0 0 8px;
}

body.single-product .tm-extra-product-options,
body.single-product .tc-extra-product-options.tm-extra-product-options {
  margin-top: 10px;
}

/* -------------------------------------------------------------------------
   Pills: plain text / normal mode (not image/color swatch modes)
   ------------------------------------------------------------------------- */
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio li.tmcp-field-wrap.tc-mode-normal .tc-label-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-radio li.tmcp-field-wrap.tc-mode-normal .tc-label-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap.tc-mode-normal .tc-label-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-checkbox li.tmcp-field-wrap.tc-mode-normal .tc-label-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-epo-text-wrapper .tc-label-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 14px;
  border: 1px solid #dedede;
  border-radius: 5px;
  background: #fff;
  color: #111;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-mode-normal .tc-label-inner.tcwidth-100,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-epo-text-wrapper .tc-label-inner.tcwidth-100 {
  width: auto !important;
  max-width: 100%;
  justify-content: center;
}

body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-mode-normal .tc-label-text,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-epo-text-wrapper .tc-label-text {
  justify-content: center;
  text-align: center;
  font-weight: 700;
  color: #111;
}

/* Old design: no “+$ / $0.00” inside each pill (price stays in cart/totals logic, only hidden visually here) */
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio li.tmcp-field-wrap.tc-mode-normal .tm-label .tc-price-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-radio li.tmcp-field-wrap.tc-mode-normal .tm-label .tc-price-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap.tc-mode-normal .tm-label .tc-price-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-checkbox li.tmcp-field-wrap.tc-mode-normal .tm-label .tc-price-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-epo-text-wrapper .tm-label .tc-price-wrap {
  display: none !important;
}

body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio li.tmcp-field-wrap.tc-mode-normal .tmcp-radio,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-radio li.tmcp-field-wrap.tc-mode-normal .tmcp-radio,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap.tc-mode-normal .tmcp-checkbox,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-checkbox li.tmcp-field-wrap.tc-mode-normal .tmcp-checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
}

body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-mode-normal:hover .tc-label-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-epo-text-wrapper:hover .tc-label-wrap {
  border-color: #111;
}

/* Selected = old look: white pill + bold black border (not orange fill) */
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-mode-normal.tc-active .tc-label-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-epo-text-wrapper.tc-active .tc-label-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-mode-normal:has(.tmcp-radio:checked) .tc-label-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-mode-normal:has(.tmcp-checkbox:checked) .tc-label-wrap,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-epo-text-wrapper:has(.tmcp-radio:checked) .tc-label-wrap {
  background-color: #fff;
  border-color: #111;
  box-shadow: none;
  color: #111;
  border-width: 2px;
}

body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-mode-normal.tc-active .tc-label-text,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-epo-text-wrapper.tc-active .tc-label-text,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-mode-normal:has(.tmcp-radio:checked) .tc-label-text,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-mode-normal:has(.tmcp-checkbox:checked) .tc-label-text,
body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-epo-text-wrapper:has(.tmcp-radio:checked) .tc-label-text {
  color: #111;
}

/* Totals + add to cart */
body.single-product .tc-totals-form,
body.single-product .tm-extra-product-options-totals,
body.single-product .tm-epo-totals {
  margin-top: 10px;
  margin-bottom: 14px;
}

/* When JS has shown totals, keep them visible (some themes touched display) */
body.single-product .tc-totals-form.tc-show {
  display: block !important;
}

body.single-product .tc-final-price,
body.single-product .tm-final-totals,
body.single-product .tm-options-totals,
body.single-product .tm-extra-product-options .tc-totals-form .price {
  font-weight: 700;
}

body.single-product .tm-extra-product-options-totals .price .amount,
body.single-product .tm-extra-product-options-totals .amount,
body.single-product .tc-totals-form .price .amount {
  color: #ff7748;
}

body.single-product form.cart .single_add_to_cart_button {
  background-color: #ff7a14;
  border-radius: 999px;
  min-height: 38px;
  padding: 10px 48px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 767px) {
  body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio,
  body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-radio,
  body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox,
  body.single-product .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-checkbox {
    gap: 8px;
  }

  body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-mode-normal .tc-label-wrap,
  body.single-product .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-epo-text-wrapper .tc-label-wrap {
    padding: 7px 12px;
    white-space: normal;
  }
}