/* mp-options: structure only. The look of .wpo-field, .wpo-option-name, .wpo-text-label and
   .wpo-image-button is the theme's (woo-product.css, @layer adapters), which beats this
   layer; this adds what Barn2's stylesheet used to give and the new pieces: fieldsets,
   choice rows, swatches, image cards, the totals row. Theme tokens with plain fallbacks,
   so it also stands alone. */
@layer vendor {
  /* Woo lays form.cart out as a wrapping row (qty + button): options and total take a row each. */
  .wpo-options-container,
  .wpo-totals-container { flex: 1 1 100%; min-inline-size: 0; }
  .wpo-options-container { margin-block-end: var(--mp-space-s, 1rem); }
  .wpo-field-hide,
  .wpo-totals-hidden { display: none !important; }

  fieldset.wpo-field { min-inline-size: 0; margin-inline: 0; padding: 0; border: 0; }
  fieldset.wpo-field > legend { float: inline-start; inline-size: 100%; margin-block-end: var(--mp-space-2xs, 0.5rem); padding: 0; }
  fieldset.wpo-field > legend + * { clear: both; }
  .wpo-field-required-symbol { margin-inline-start: 0.15em; color: var(--mp-color-danger, #b3261e); }
  .wpo-field-description,
  .wpo-char-count { margin: 0; color: var(--mp-color-text-2, inherit); font-size: var(--mp-fs-xs, 0.875rem); }
  .wpo-char-count { text-align: end; }
  .wpo-price-container { white-space: nowrap; }

  /* Checkbox and radio rows: the whole row is the 44px target. */
  .wpo-choice-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
  .wpo-choice-item { margin: 0; }
  .wpo-checkbox,
  .wpo-radio {
    display: flex;
    gap: var(--mp-space-2xs, 0.5rem);
    align-items: center;
    min-block-size: var(--mp-tap, 44px);
    cursor: pointer;
  }
  .wpo-checkbox > .wpo-choice-label,
  .wpo-radio > .wpo-choice-label { flex: 1; }
  .wpo-checkbox > input,
  .wpo-radio > input { flex: none; margin: 0; }
  .wpo-field :disabled + .wpo-choice-label,
  .wpo-field label:has(> :disabled) { cursor: not-allowed; opacity: 0.55; }

  /* Text labels: the theme draws the chip; the list only needs to wrap. */
  .wpo-text-labels { flex-flow: row wrap; gap: var(--mp-space-2xs, 0.5rem); }
  .wpo-text-label { min-block-size: var(--mp-tap, 44px); }

  /* Colour swatches: a chip with a colour dot, the radio over it. */
  .wpo-color-swatches { flex-flow: row wrap; gap: var(--mp-space-2xs, 0.5rem); }
  .wpo-swatch {
    position: relative;
    display: inline-flex;
    gap: var(--mp-space-2xs, 0.5rem);
    align-items: center;
    min-inline-size: var(--mp-tap, 44px);
    min-block-size: var(--mp-tap, 44px);
    padding-inline: var(--mp-space-2xs, 0.5rem) var(--mp-space-xs, 0.75rem);
    border-radius: var(--mp-radius-pill, 999px);
    box-shadow: inset 0 0 0 var(--mp-border, 1px) var(--mp-color-line-strong, #8888);
    cursor: pointer;
  }
  .wpo-swatch-no-label { justify-content: center; padding: 0; }
  .wpo-field .wpo-swatch > input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: inherit; }
  .wpo-swatch-color {
    flex: none;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: 50%;
    background: var(--wpo-swatch, transparent);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.25);
  }
  .wpo-swatch:has(:checked) { box-shadow: inset 0 0 0 2px var(--mp-color-text, currentColor); }
  .wpo-swatch:has(:focus-visible),
  .wpo-image-button:has(:focus-visible) {
    outline: var(--mp-focus-width, 2px) solid var(--mp-color-focus, Highlight);
    outline-offset: var(--mp-focus-offset, 2px);
  }

  /* Image cards: button_width wide, two to a row at least on a phone. */
  .wpo-image-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--wpo-image-buttons-width, 150px), calc(50% - var(--mp-space-2xs, 0.5rem))), 1fr));
    gap: var(--mp-space-2xs, 0.5rem);
  }
  .wpo-image-button {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--mp-radius-sm, 6px);
    background-color: var(--mp-color-surface, transparent);
    box-shadow: inset 0 0 0 var(--mp-border, 1px) var(--mp-color-line-strong, #8888);
    cursor: pointer;
  }
  .wpo-field .wpo-image-button > input { position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: inherit; }
  .wpo-image-button:has(:checked) { box-shadow: inset 0 0 0 3px var(--mp-color-text, currentColor); }
  .wpo-image-wrap { margin: 0; padding: var(--mp-space-3xs, 0.25rem); }
  .wpo-image-button .wpo-choice-image { display: block; inline-size: 100%; block-size: auto; }
  .wpo-image-text { padding: var(--mp-space-3xs, 0.25rem); text-align: center; font-size: var(--mp-fs-xs, 0.875rem); }

  /* html options: separators and headings between fields. */
  .wpo-field-html > :is(h2, h3, h4) { margin-block: var(--mp-space-s, 1rem) 0; }
  .wpo-field-html > hr { inline-size: 100%; margin-block: var(--mp-space-2xs, 0.5rem); }

  /* The live total, above the quantity and button. */
  .wpo-totals-container { margin-block: 0 var(--mp-space-s, 1rem); }
  .wpo-total-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-block: var(--mp-space-2xs, 0.5rem);
    border-block-start: var(--mp-border, 1px) solid var(--mp-color-line, #8884);
    font-weight: var(--mp-weight-ui, 600);
  }
  .wpo-total-line .wpo-price { font-size: var(--mp-fs-lead, 1.25rem); font-variant-numeric: tabular-nums; }
}