/* WCVO — order type cards (product page) + compact switcher (cart/checkout).
   Inherits the theme's fonts and text colour. --wcvo-accent etc. are filled
   in by subscriptions.js from the product's Add to cart button, with a
   contrast check so the accent is never invisible against the page. */

.wcvo-ot {
  --wcvo-accent: var(--wp--preset--color--primary, #2c6ecb);
  --wcvo-on-accent: #fff;
  --wcvo-radius: 10px;
  --wcvo-card-radius: calc(var(--wcvo-radius) * 1.3);
  --wcvo-line: rgba(127, 127, 127, .4);
  --wcvo-line: color-mix(in srgb, currentColor 25%, transparent);
  --wcvo-tint: rgba(127, 127, 127, .07);
  --wcvo-tint: color-mix(in srgb, var(--wcvo-accent) 9%, transparent);
  container-type: inline-size;
  box-sizing: border-box;
  display: block;
  flex: 1 0 100%;            /* themes that lay out form.cart with flexbox */
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.5em;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  clear: both;
}
.wcvo-ot *, .wcvo-ot *::before, .wcvo-ot *::after { box-sizing: border-box; }

.wcvo-ot .wcvo-ot__title {
  margin: 0 0 .2em;
  padding: 0;
  text-align: center;
  font-family: var(--wcvo-heading-font, inherit);
  font-weight: var(--wcvo-heading-weight, 700);
  font-size: 1.5em;
  line-height: 1.2;
  color: inherit;
}
.wcvo-ot .wcvo-ot__subtitle { margin: 0 0 1em; padding: 0; text-align: center; opacity: .75; font-size: .95em; }

.wcvo-ot .wcvo-ot__options { display: grid; gap: .9em; margin: 0; padding: 0; }

.wcvo-ot .wcvo-ot__card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "dot body icon" "dot body img";
  grid-template-rows: auto 1fr;
  column-gap: 1em;
  width: 100%;
  margin: 0;
  padding: 1.25em;
  border: 2px solid var(--wcvo-line);
  border-radius: var(--wcvo-card-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.wcvo-ot .wcvo-ot__card.is-single { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "body icon" "body img"; cursor: default; }
.wcvo-ot .wcvo-ot__card:hover { border-color: var(--wcvo-accent); }
.wcvo-ot .wcvo-ot__card.is-selected { border-color: var(--wcvo-accent); background: var(--wcvo-tint); }
.wcvo-ot .wcvo-ot__card:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wcvo-accent) 35%, transparent); }

/* Native radio stays for keyboard + screen readers; .wcvo-ot__dot draws it */
.wcvo-ot input.wcvo-ot__radio {
  position: absolute !important; opacity: 0 !important;
  width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none;
}
.wcvo-ot .wcvo-ot__dot {
  grid-area: dot;
  display: block;
  width: 1.5em; height: 1.5em;
  margin-top: .1em;
  border-radius: 50%;
  border: 2px solid var(--wcvo-line);
  background: transparent;
}
.wcvo-ot .wcvo-ot__card.is-selected .wcvo-ot__dot {
  border-color: var(--wcvo-accent);
  background: radial-gradient(circle, var(--wcvo-accent) 0 42%, transparent 47%);
}

.wcvo-ot .wcvo-ot__body { grid-area: body; display: flex; flex-direction: column; gap: .35em; min-width: 0; }
.wcvo-ot .wcvo-ot__name {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4em;
  font-family: var(--wcvo-heading-font, inherit);
  font-weight: var(--wcvo-heading-weight, 700);
  font-size: 1.2em;
  line-height: 1.25;
}
.wcvo-ot .wcvo-ot__badge {
  display: inline-block;
  padding: .2em .65em;
  border-radius: 999px;
  background: var(--wcvo-accent);
  color: var(--wcvo-on-accent);
  font-family: inherit;
  font-size: .62em;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.wcvo-ot .wcvo-ot__desc { opacity: .85; }

.wcvo-ot .wcvo-ot__points { display: flex; flex-direction: column; gap: .45em; margin-top: .5em; }
.wcvo-ot .wcvo-ot__point { display: flex; align-items: flex-start; gap: .6em; }
.wcvo-ot .wcvo-ot__tick { flex: 0 0 auto; width: 1.2em; height: 1.2em; margin-top: .1em; }
.wcvo-ot .wcvo-ot__tick circle { fill: var(--wcvo-accent); }
.wcvo-ot .wcvo-ot__tick path { stroke: var(--wcvo-on-accent); }

.wcvo-ot .wcvo-ot__icon { grid-area: icon; color: var(--wcvo-accent); justify-self: end; }
.wcvo-ot .wcvo-ot__icon svg { display: block; width: 2.6em; height: 2.6em; }

.wcvo-ot .wcvo-ot__img {
  grid-area: img;
  align-self: end; justify-self: end;
  width: 200px; max-width: 100%; height: auto;
  margin: .75em -1.25em -1.25em 0;
  object-fit: contain;
  border: 0; border-radius: 0; box-shadow: none;
}

.wcvo-ot .wcvo-ot__note { margin: .75em 0 0; padding: 0; text-align: center; font-size: .875em; opacity: .7; }

/* Narrow product columns: image goes under the text */
@container (max-width: 460px) {
  .wcvo-ot .wcvo-ot__card { grid-template-areas: "dot body icon" "img img img"; padding: 1em; }
  .wcvo-ot .wcvo-ot__card.is-single { grid-template-areas: "body icon" "img img"; }
  .wcvo-ot .wcvo-ot__img { justify-self: center; width: min(240px, 85%); margin: .75em 0 -1em; }
  .wcvo-ot .wcvo-ot__icon svg { width: 2.1em; height: 2.1em; }
  .wcvo-ot .wcvo-ot__title { font-size: 1.3em; }
}
/* Very narrow spaces (sidebars, tiny phones): drop the icon, tighten up */
@container (max-width: 300px) {
  .wcvo-ot .wcvo-ot__card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "dot body" "img img"; column-gap: .7em; padding: .85em; }
  .wcvo-ot .wcvo-ot__card.is-single { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "img"; }
  .wcvo-ot .wcvo-ot__icon { display: none; }
  .wcvo-ot .wcvo-ot__name { font-size: 1.05em; }
}
@media (prefers-reduced-motion: reduce) { .wcvo-ot .wcvo-ot__card { transition: none; } }

/* ── Cart / checkout switcher ── */
.wcvo-switch { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .6em; }
.wcvo-switch .wcvo-switch__label { margin: 0; display: inline; }
.wcvo-switch .wcvo-switch__select { width: auto; max-width: 100%; min-width: 0; margin: 0; display: inline-block; }
.wcvo-switch .wcvo-switch__status { font-size: .9em; opacity: .8; }
.wcvo-switch.is-busy .wcvo-switch__select { opacity: .6; pointer-events: none; }

.wcvo-purchase-unavailable { color: #b32d2e; }