/* Rekit plan picker. data-template picks the layout (Widget page in the Rekit app); the --rekit-*
   colours, text, shape and spacing are set per design on the same page. Unset, colours fall back to
   the theme's own and everything else to the design's values below (var(--rekit-x, design value)).
   Inherited properties use var() without a fallback: unset, they inherit as usual. */
.rekit-picker {
  margin: 1em 0;
  color: var(--rekit-text, inherit);
  font-size: var(--rekit-font-size);
  font-style: var(--rekit-font-style);
}

.rekit-picker [hidden] {
  display: none !important;
}

/* The block inlines this CSS just before the widget (scripts/build-storefront.js), so the theme's own
   picker is hidden as soon as the widget is, without waiting for the script. */
body:has([data-rekit-picker][data-hide-theme-ui='true']:not([data-rekit-off])) product-subscriptions {
  display: none !important;
}

.rekit-picker__box {
  display: grid;
  gap: var(--rekit-gap, 0.5em);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.rekit-picker__legend {
  margin-bottom: 0.5em;
  padding: 0;
  font-size: var(--rekit-heading-size);
  font-weight: var(--rekit-heading-weight, 600);
}

.rekit-picker__plans,
.rekit-picker__list {
  display: grid;
  gap: var(--rekit-gap, 0.5em);
}

.rekit-picker__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin: 0.5em 0 0;
  font-weight: 600;
}

.rekit-picker__subgroup {
  margin: 0.25em 0 0;
  font-size: 0.875em;
  opacity: 0.75;
}

.rekit-picker__option {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: var(--rekit-padding, 0.75em 1em);
  border: var(--rekit-border-width, 1px) solid var(--rekit-border, color-mix(in srgb, currentColor 20%, transparent));
  border-radius: var(--rekit-radius, 0.5em);
  background: var(--rekit-bg, transparent);
  cursor: pointer;
}

.rekit-picker__option:has(input:checked) {
  border-color: var(--rekit-text, currentColor);
  box-shadow: 0 0 0 1px var(--rekit-text, currentColor);
  background: var(--rekit-active-bg, var(--rekit-bg, transparent));
}

.rekit-picker__option input {
  flex: none;
  font-size: inherit;
  width: 1em;
  height: 1em;
  margin: 0;
  accent-color: var(--rekit-text, currentColor);
}

.rekit-picker__name {
  flex: 1;
  font-weight: var(--rekit-font-weight);
}

.rekit-picker__price {
  color: var(--rekit-price, inherit);
  font-weight: 600;
  white-space: nowrap;
}

.rekit-picker__was {
  opacity: 0.6;
  font-weight: 400;
}

.rekit-picker__save {
  padding: 0.125em 0.5em;
  border-radius: 1em;
  background: var(--rekit-badge-bg, color-mix(in srgb, currentColor 10%, transparent));
  color: var(--rekit-badge-text, inherit);
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
}

.rekit-picker__save:empty,
.rekit-picker__was:empty {
  display: none;
}

.rekit-picker__caption {
  margin: 0;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

.rekit-picker__desc,
.rekit-picker__notice,
.rekit-portal-link__caption {
  margin: 0;
  font-size: 0.875em;
  opacity: 0.75;
}

/* A picked prepaid plan's upfront total ("Pay $45.90 upfront for 3 deliveries"). */
.rekit-picker__prepaid {
  margin: 0;
  font-size: 0.875em;
  font-weight: 600;
}

/* The note offers skip and pause ("Skip, pause or cancel anytime."), which a prepaid plan doesn't have. */
.rekit-picker__prepaid:not([hidden]) ~ .rekit-picker__desc {
  display: none;
}

.rekit-picker__gift {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0;
  font-size: 0.875em;
}

.rekit-picker__gift img {
  flex: none;
  width: 3em;
  height: 3em;
  object-fit: cover;
  border-radius: 0.375em;
}

/* Several gifts: the "Free gift with your first subscription order:" label only on the first one shown. */
.rekit-picker__gift:not([hidden]) ~ .rekit-picker__gift .rekit-picker__gift-label {
  display: none;
}

.rekit-picker__notice {
  padding: 0.75em 1em;
  border: 1px dashed currentColor;
  border-radius: 0.5em;
}

/* ── Stacked (the original design): one row per plan ─────────────────────────────── */
.rekit-picker:not([data-template]) :is(.rekit-picker__dot, .rekit-picker__sub-price, .rekit-picker__caption),
.rekit-picker:is([data-template='stacked'], [data-template='elevated']) :is(.rekit-picker__dot, .rekit-picker__sub-price, .rekit-picker__caption) {
  display: none;
}

/* ── Boxed designs: a one-time box and a subscribe box that holds the frequency choice ── */
.rekit-picker:is([data-template='classic'], [data-template='dropdown'], [data-template='pills'], [data-template='toggle'], [data-template='accordion']) .rekit-picker__plans {
  padding: var(--rekit-padding, 0.75em 1em);
  border: var(--rekit-border-width, 1px) solid var(--rekit-border, color-mix(in srgb, currentColor 20%, transparent));
  border-radius: var(--rekit-radius, 0.5em);
  background: var(--rekit-bg, transparent);
}

.rekit-picker:is([data-template='classic'], [data-template='dropdown'], [data-template='pills'], [data-template='toggle'], [data-template='accordion']) .rekit-picker__plans:has(input:checked) {
  border-color: var(--rekit-text, currentColor);
  box-shadow: 0 0 0 1px var(--rekit-text, currentColor);
  background: var(--rekit-active-bg, var(--rekit-bg, transparent));
}

/* Header: "◉ Subscribe & Save   price" over "  badge   was-price" */
.rekit-picker:is([data-template='classic'], [data-template='dropdown'], [data-template='pills'], [data-template='toggle'], [data-template='minimal'], [data-template='spotlight'], [data-template='accordion'], [data-template='showcase'], [data-template='midnight']) .rekit-picker__group {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'dot name price' '. badge was';
  align-items: center;
  gap: 0.25em 0.75em;
  margin: 0;
  cursor: pointer;
}

.rekit-picker__group .rekit-picker__dot { grid-area: dot; }
.rekit-picker__group-name { grid-area: name; font-weight: var(--rekit-font-weight); }
.rekit-picker__group .rekit-picker__save { grid-area: badge; justify-self: start; }
.rekit-picker__sub-price { display: contents; }
.rekit-picker__sub-price .rekit-picker__price { grid-area: price; justify-self: end; }
.rekit-picker__sub-price .rekit-picker__was { grid-area: was; justify-self: end; }

.rekit-picker__dot {
  flex: none;
  width: 1em;
  height: 1em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}

.rekit-picker__plans:has(input:checked) .rekit-picker__dot {
  background: radial-gradient(circle, currentColor 0 30%, transparent 36%);
}

/* Classic: plain radio list, the price sits in the header */
.rekit-picker[data-template='classic'] .rekit-picker__plan {
  padding: 0.125em 0;
  border: 0;
  box-shadow: none;
  background: none;
  gap: 0.5em;
}

.rekit-picker[data-template='classic'] .rekit-picker__plan .rekit-picker__price,
.rekit-picker:is([data-template='pills'], [data-template='cards'], [data-template='segmented'], [data-template='showcase'], [data-template='tiles'], [data-template='coupon'], [data-template='midnight']) .rekit-picker__plan :is(.rekit-picker__price, .rekit-picker__save) {
  display: none;
}

/* Dropdown: a select drives the (hidden) plan radios */
.rekit-picker:is([data-template='dropdown'], [data-template='minimal']) .rekit-picker__list {
  display: none;
}

.rekit-picker__select {
  width: 100%;
  padding: 0.5em 0.75em;
  border: var(--rekit-border-width, 1px) solid var(--rekit-border, color-mix(in srgb, currentColor 30%, transparent));
  border-radius: var(--rekit-radius, 0.375em);
  background: var(--rekit-bg, transparent);
  color: inherit;
  font: inherit;
}

/* Pills (and the cards, segmented and newer designs): frequencies as buttons */
.rekit-picker:is([data-template='pills'], [data-template='cards'], [data-template='segmented'], [data-template='showcase'], [data-template='tiles'], [data-template='coupon'], [data-template='midnight']) .rekit-picker__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rekit-gap, 0.5em);
}

.rekit-picker:is([data-template='pills'], [data-template='cards'], [data-template='segmented'], [data-template='showcase'], [data-template='tiles'], [data-template='coupon'], [data-template='midnight']) .rekit-picker__subgroup {
  flex-basis: 100%;
}

/* --rekit-pill-width/height come from the Widget page's button size (px); 0 width = fit the text.
   Buttons share the row: each grows up to its text's width, and long names ("Delivery every month,
   save 10%") wrap inside equal buttons (8em each before growing) instead of stacking one per line. */
.rekit-picker:is([data-template='pills'], [data-template='cards'], [data-template='segmented'], [data-template='showcase'], [data-template='tiles'], [data-template='coupon'], [data-template='midnight']) .rekit-picker__plan {
  flex: 1 1 8em;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--rekit-pill-width, 0);
  max-width: max-content;
  min-height: var(--rekit-pill-height, 36px);
  padding: 0.25em 0.875em;
  text-align: center;
  border-radius: var(--rekit-radius, 999px);
  box-shadow: none;
}

/* So a long name can wrap in its button (segmented sets flex: none on names for its segments). */
.rekit-picker:is([data-template='pills'], [data-template='cards'], [data-template='segmented'], [data-template='showcase'], [data-template='tiles'], [data-template='coupon'], [data-template='midnight']) .rekit-picker__plan .rekit-picker__name {
  flex: 1;
}

.rekit-picker:is([data-template='pills'], [data-template='cards'], [data-template='segmented'], [data-template='showcase'], [data-template='tiles'], [data-template='coupon'], [data-template='midnight']) .rekit-picker__plan:has(input:checked),
.rekit-picker[data-template='grid'] .rekit-picker__option:has(input:checked) {
  border-color: var(--rekit-text, #111);
  box-shadow: none;
  background: var(--rekit-text, #111);
  color: var(--rekit-bg-solid, var(--rekit-bg, #fff));
}

/* ── Grid: every choice is a tile ─────────────────────────────────────────────────── */
.rekit-picker[data-template='grid'] .rekit-picker__box {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rekit-picker[data-template='grid'] :is(.rekit-picker__plans, .rekit-picker__list) {
  display: contents;
}

.rekit-picker[data-template='grid'] :is(.rekit-picker__group, .rekit-picker__caption) {
  display: none;
}

.rekit-picker[data-template='grid'] :is(.rekit-picker__subgroup, .rekit-picker__prepaid, .rekit-picker__desc, .rekit-picker__gift) {
  grid-column: 1 / -1;
}

.rekit-picker[data-template='grid'] .rekit-picker__option {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25em;
  padding: var(--rekit-padding, 0.75em);
}

.rekit-picker[data-template='grid'] .rekit-picker__name {
  flex: none;
  font-weight: var(--rekit-font-weight, 600);
}

.rekit-picker[data-template='grid'] .rekit-picker__save {
  position: absolute;
  top: -0.65em;
  right: 0.5em;
  border: 1px solid var(--rekit-border, color-mix(in srgb, currentColor 20%, transparent));
  background: var(--rekit-badge-bg, #fff);
  color: var(--rekit-badge-text, #111);
}

.rekit-picker[data-template='grid'] .rekit-picker__option:has(input:checked) .rekit-picker__price {
  color: inherit;
}

/* ── Cards: one-time and subscribe side by side, frequency buttons below ──────────── */
.rekit-picker[data-template='cards'] .rekit-picker__box {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rekit-picker[data-template='cards'] .rekit-picker__plans {
  display: contents;
}

.rekit-picker[data-template='cards'] :is(.rekit-picker__caption, .rekit-picker__list, .rekit-picker__prepaid, .rekit-picker__desc, .rekit-picker__gift),
.rekit-picker[data-template='cards'] .rekit-picker__box:has(.rekit-picker__plans[hidden]) .rekit-picker__once {
  grid-column: 1 / -1;
}

/* Both cards: "◉ Name" over "price  was-price" over "badge" */
.rekit-picker[data-template='cards'] :is(.rekit-picker__once, .rekit-picker__group) {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'dot name' '. price' '. badge';
  align-content: start;
  align-items: center;
  gap: 0.25em 0.625em;
  margin: 0;
  padding: var(--rekit-padding, 0.875em 1em);
  border: var(--rekit-border-width, 1px) solid var(--rekit-border, color-mix(in srgb, currentColor 20%, transparent));
  border-radius: var(--rekit-radius, 0.5em);
  background: var(--rekit-bg, transparent);
  font-weight: 400;
  cursor: pointer;
}

.rekit-picker[data-template='cards'] .rekit-picker__once input { grid-area: dot; }
.rekit-picker[data-template='cards'] .rekit-picker__once .rekit-picker__name { grid-area: name; }
.rekit-picker[data-template='cards'] .rekit-picker__once .rekit-picker__price { grid-area: price; }
.rekit-picker[data-template='cards'] :is(.rekit-picker__name, .rekit-picker__group-name) { font-weight: var(--rekit-font-weight, 600); }
.rekit-picker[data-template='cards'] .rekit-picker__sub-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5em;
  grid-area: price;
}
.rekit-picker[data-template='cards'] .rekit-picker__sub-price .rekit-picker__price { order: -1; }

.rekit-picker[data-template='cards'] .rekit-picker__once:has(input:checked),
.rekit-picker[data-template='cards'] .rekit-picker__box:has(.rekit-picker__plan input:checked) .rekit-picker__group {
  border-color: var(--rekit-text, currentColor);
  box-shadow: 0 0 0 1px var(--rekit-text, currentColor);
  background: var(--rekit-active-bg, var(--rekit-bg, transparent));
}

/* ── Toggle: one subscribe switch; the frequency dropdown shows while it's on ─────── */
/* The radios stay in the page, visually hidden, so keyboards and screen readers still get a
   radio group. Clicking the switch while it's on picks one-time (subscribe-save-picker.js). */
.rekit-picker[data-template='toggle'] .rekit-picker__box {
  position: relative;
}

.rekit-picker[data-template='toggle'] :is(.rekit-picker__once, .rekit-picker__list),
/* Segmented switch and Expanding box hide the frequencies the same way while one-time is chosen. */
.rekit-picker:is([data-template='segmented'], [data-template='accordion']) .rekit-picker__box:not(:has(.rekit-picker__plan input:checked)) :is(.rekit-picker__caption, .rekit-picker__list) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.rekit-picker[data-template='toggle'] .rekit-picker__plans:not(:has(input:checked)) :is(.rekit-picker__caption, .rekit-picker__select) {
  display: none;
}

.rekit-picker[data-template='toggle'] .rekit-picker__dot {
  position: relative;
  width: 2.25em;
  height: 1.25em;
  border: 0;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 25%, transparent);
  transition: background-color 0.15s;
}

.rekit-picker[data-template='toggle'] .rekit-picker__dot::after {
  content: '';
  position: absolute;
  top: 0.125em;
  left: 0.125em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  transition: transform 0.15s;
}

.rekit-picker[data-template='toggle'] .rekit-picker__plans:has(input:checked) .rekit-picker__dot {
  background: var(--rekit-text, currentColor);
}

.rekit-picker[data-template='toggle'] .rekit-picker__plans:has(input:checked) .rekit-picker__dot::after {
  transform: translateX(1em);
}

.rekit-picker[data-template='toggle'] .rekit-picker__box:has(input:focus-visible) .rekit-picker__dot {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ── Minimal: plain radio rows without boxes, the frequency dropdown under them ───── */
.rekit-picker[data-template='minimal'] .rekit-picker__once {
  gap: 0.75em;
  padding: 0.25em 0;
  border: 0;
  box-shadow: none;
  background: none;
}

/* Indented under the header's name (dot 1em + gap 0.75em), in each element's own font size. */
.rekit-picker[data-template='minimal'] .rekit-picker__select { margin-inline-start: 1.75em; }
.rekit-picker[data-template='minimal'] .rekit-picker__caption { margin-inline-start: calc(1.75em / 0.75); }
.rekit-picker[data-template='minimal'] :is(.rekit-picker__prepaid, .rekit-picker__desc, .rekit-picker__gift) { margin-inline-start: calc(1.75em / 0.875); }

.rekit-picker[data-template='minimal'] .rekit-picker__select {
  justify-self: start;
  width: auto;
  min-width: min(12em, 100% - 1.75em);
  max-width: calc(100% - 1.75em);
}

/* ── Segmented switch: one-time | subscribe in a track, frequency chips under it ──── */
.rekit-picker[data-template='segmented'] .rekit-picker__box {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rekit-gap, 0.75em) 0;
}

.rekit-picker[data-template='segmented'] .rekit-picker__plans {
  display: contents;
}

/* The track is the box's own ::before, laid in the first row under both segments. */
.rekit-picker[data-template='segmented'] .rekit-picker__box::before {
  content: '';
  grid-area: 1 / 1 / 2 / -1;
  border: var(--rekit-border-width, 1px) solid var(--rekit-border, transparent);
  border-radius: var(--rekit-radius, 0.875em);
  background: var(--rekit-bg, color-mix(in srgb, currentColor 7%, transparent));
}

.rekit-picker[data-template='segmented'] .rekit-picker__once { grid-area: 1 / 1; }
.rekit-picker[data-template='segmented'] .rekit-picker__group { grid-area: 1 / 2; }

.rekit-picker[data-template='segmented'] :is(.rekit-picker__caption, .rekit-picker__list, .rekit-picker__prepaid, .rekit-picker__desc, .rekit-picker__gift),
.rekit-picker[data-template='segmented'] .rekit-picker__box:has(.rekit-picker__plans[hidden]) .rekit-picker__once,
.rekit-picker[data-template='segmented'] .rekit-picker__box:not(:has(.rekit-picker__once)) .rekit-picker__group {
  grid-column: 1 / -1;
}

.rekit-picker[data-template='segmented'] :is(.rekit-picker__once, .rekit-picker__group) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125em;
  margin: 0.25em;
  padding: 0.625em 0.5em;
  border: 0;
  /* Inside the track's 0.25em margin. */
  border-radius: max(0px, var(--rekit-radius, 0.875em) - 0.25em);
  background: none;
  box-shadow: none;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
}

.rekit-picker[data-template='segmented'] .rekit-picker__once:has(input:checked),
.rekit-picker[data-template='segmented'] .rekit-picker__box:has(.rekit-picker__plan input:checked) .rekit-picker__group {
  background: var(--rekit-active-bg, #fff);
  color: var(--rekit-text, #1a1a1a);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 2px 8px rgb(0 0 0 / 0.06);
}

.rekit-picker[data-template='segmented'] :is(.rekit-picker__name, .rekit-picker__group-name) {
  flex: none;
  font-weight: var(--rekit-font-weight, 600);
}

.rekit-picker[data-template='segmented'] .rekit-picker__dot {
  display: none;
}

.rekit-picker[data-template='segmented'] :is(.rekit-picker__once .rekit-picker__price, .rekit-picker__sub-price) {
  font-size: 0.875em;
}

.rekit-picker[data-template='segmented'] .rekit-picker__sub-price {
  display: flex;
  align-items: baseline;
  gap: 0.375em;
}

.rekit-picker[data-template='segmented'] .rekit-picker__sub-price .rekit-picker__price { order: -1; }

/* The saving sits on the subscribe segment's top edge. */
.rekit-picker[data-template='segmented'] .rekit-picker__group .rekit-picker__save {
  position: absolute;
  top: -0.875em;
  right: 0.25em;
  background: var(--rekit-badge-bg, var(--rekit-text, #1a1a1a));
  color: var(--rekit-badge-text, #fff);
}

/* ── Spotlight: a standout subscribe box with a savings ribbon, frequency tiles and a
   check-marked note ─────────────────────────────────────────────────────────────── */
.rekit-picker[data-template='spotlight'] .rekit-picker__box {
  gap: var(--rekit-gap, 0.875em);
}

.rekit-picker[data-template='spotlight'] .rekit-picker__once {
  padding: var(--rekit-padding, 0.875em 1em);
  border-radius: var(--rekit-radius, 0.75em);
}

.rekit-picker[data-template='spotlight'] .rekit-picker__plans {
  position: relative;
  gap: var(--rekit-gap, 0.75em);
  /* 0.25em more at the top for the savings ribbon. */
  padding: calc(var(--rekit-padding, 1em) + 0.25em) var(--rekit-padding, 1em) var(--rekit-padding, 1em);
  border: var(--rekit-border-width, 1.5px) solid var(--rekit-border, color-mix(in srgb, currentColor 25%, transparent));
  border-radius: var(--rekit-radius, 0.75em);
  background: var(--rekit-bg, color-mix(in srgb, currentColor 3%, transparent));
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.rekit-picker[data-template='spotlight'] .rekit-picker__plans:has(input:checked) {
  border-color: var(--rekit-text, currentColor);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.08);
  background: var(--rekit-active-bg, color-mix(in srgb, currentColor 5%, transparent));
}

.rekit-picker[data-template='spotlight'] .rekit-picker__group .rekit-picker__save {
  position: absolute;
  /* Not the header's badge area: an absolute box would resolve it against the box's grid. */
  grid-area: auto;
  top: 0;
  left: 1.25em;
  transform: translateY(-50%);
  padding: 0.3em 0.75em;
  font-size: 0.7em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--rekit-badge-bg, var(--rekit-text, #1a1a1a));
  color: var(--rekit-badge-text, #fff);
}

.rekit-picker[data-template='spotlight'] .rekit-picker__list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 5em), 1fr));
}

.rekit-picker[data-template='spotlight'] .rekit-picker__subgroup {
  grid-column: 1 / -1;
}

.rekit-picker[data-template='spotlight'] .rekit-picker__plan {
  flex-direction: column;
  justify-content: center;
  gap: 0.25em;
  padding: 0.625em 0.5em;
  text-align: center;
}

.rekit-picker[data-template='spotlight'] .rekit-picker__plan .rekit-picker__name {
  flex: none;
  font-weight: var(--rekit-font-weight, 600);
}

.rekit-picker[data-template='spotlight'] .rekit-picker__plan .rekit-picker__price {
  display: none;
}

.rekit-picker:is([data-template='spotlight'], [data-template='showcase'], [data-template='tiles'], [data-template='coupon'], [data-template='midnight']) .rekit-picker__desc {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.rekit-picker:is([data-template='spotlight'], [data-template='showcase'], [data-template='tiles'], [data-template='coupon'], [data-template='midnight']) .rekit-picker__desc::before {
  content: '';
  flex: none;
  width: 1.125em;
  height: 1.125em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Expanding box: the subscribe box opens to list each frequency with its price ──── */
.rekit-picker[data-template='accordion'] :is(.rekit-picker__once, .rekit-picker__plans) {
  padding: var(--rekit-padding, 0.875em 1em);
  border-radius: var(--rekit-radius, 0.75em);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

/* Rows bleed into the box padding so their radios line up under the header's dot. */
.rekit-picker[data-template='accordion'] .rekit-picker__list {
  gap: var(--rekit-gap, 0.125em);
  margin-inline: -0.5em;
}

.rekit-picker[data-template='accordion'] .rekit-picker__plan {
  padding: 0.5em;
  border: 0;
  border-radius: 0.5em;
  background: none;
}

.rekit-picker[data-template='accordion'] .rekit-picker__plan:has(input:checked) {
  box-shadow: none;
  background: color-mix(in srgb, currentColor 7%, transparent);
}

/* Spotlight and Expanding box draw their radios like the subscribe header's dot. */
.rekit-picker:is([data-template='spotlight'], [data-template='accordion']) .rekit-picker__option input {
  appearance: none;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  /* Form controls default to the browser's field text colour, not the theme's. */
  color: inherit;
  cursor: pointer;
}

.rekit-picker:is([data-template='spotlight'], [data-template='accordion']) .rekit-picker__option input:checked {
  background: radial-gradient(circle, currentColor 0 30%, transparent 36%);
}

/* Segmented switch and Expanding box: the frequencies slide in when subscribing. */
.rekit-picker:is([data-template='segmented'], [data-template='accordion']) .rekit-picker__box:has(.rekit-picker__plan input:checked) :is(.rekit-picker__caption, .rekit-picker__list) {
  animation: rekit-reveal 0.25s ease-out;
}

@keyframes rekit-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.375em);
  }
}

/* ── Soft cards: a rounded card per option, with a soft shadow and a check circle ──── */
.rekit-picker[data-template='elevated'] :is(.rekit-picker__box, .rekit-picker__plans, .rekit-picker__list) {
  gap: var(--rekit-gap, 0.625em);
}

.rekit-picker[data-template='elevated'] .rekit-picker__option {
  gap: 0.875em;
  padding: var(--rekit-padding, 0.9375em 1.125em);
  border-color: var(--rekit-border, color-mix(in srgb, currentColor 12%, transparent));
  border-radius: var(--rekit-radius, 0.875em);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.05);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.rekit-picker[data-template='elevated'] .rekit-picker__option:hover {
  border-color: var(--rekit-border, color-mix(in srgb, currentColor 30%, transparent));
}

.rekit-picker[data-template='elevated'] .rekit-picker__option:has(input:checked) {
  border-color: var(--rekit-text, currentColor);
  box-shadow: 0 0 0 1px var(--rekit-text, currentColor), 0 6px 18px rgb(0 0 0 / 0.08);
}

.rekit-picker[data-template='elevated'] .rekit-picker__name {
  font-weight: var(--rekit-font-weight, 500);
}

.rekit-picker[data-template='elevated'] .rekit-picker__option input {
  appearance: none;
  box-sizing: border-box;
  width: 1.375em;
  height: 1.375em;
  border: 1.5px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.rekit-picker[data-template='elevated'] .rekit-picker__option input:checked {
  border-color: transparent;
  background: var(--rekit-text, currentColor);
  /* The check is cut out of the circle, so it shows the card's own background in any theme. */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cmask id='m'%3E%3Crect width='20' height='20' fill='%23fff'/%3E%3Cpath d='M5.75 10.25l2.75 2.75 5.75-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='10' cy='10' r='10' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Gradient card: the subscribe box opens with a gradient band holding the offer ────── */
.rekit-picker[data-template='showcase'] .rekit-picker__box {
  gap: var(--rekit-gap, 0.75em);
}

.rekit-picker[data-template='showcase'] .rekit-picker__once {
  border-radius: var(--rekit-radius, 0.875em);
}

.rekit-picker[data-template='showcase'] .rekit-picker__plans {
  gap: 0.75em;
  padding-bottom: var(--rekit-padding, 1em);
  overflow: hidden;
  border: var(--rekit-border-width, 1px) solid var(--rekit-border, color-mix(in srgb, currentColor 20%, transparent));
  border-radius: var(--rekit-radius, 0.875em);
  background: var(--rekit-bg, transparent);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.rekit-picker[data-template='showcase'] .rekit-picker__plans:has(input:checked) {
  border-color: var(--rekit-text, currentColor);
  box-shadow: 0 0 0 1px var(--rekit-text, currentColor), 0 10px 28px rgb(0 0 0 / 0.1);
  background: var(--rekit-active-bg, var(--rekit-bg, transparent));
}

/* Everything under the band lines up with the band's text. */
.rekit-picker[data-template='showcase'] .rekit-picker__plans > :not(.rekit-picker__group) {
  margin-inline: var(--rekit-padding, 1em);
}

/* The band takes the savings badge colours; its price and badge follow the band's text. */
.rekit-picker[data-template='showcase'] .rekit-picker__group {
  padding: var(--rekit-padding, 0.875em 1em);
  background: var(--rekit-badge-bg, color-mix(in srgb, currentColor 8%, transparent));
  color: var(--rekit-badge-text, inherit);
}

.rekit-picker[data-template='showcase'] .rekit-picker__group :is(.rekit-picker__price, .rekit-picker__save) {
  color: inherit;
}

.rekit-picker[data-template='showcase'] .rekit-picker__group .rekit-picker__price {
  font-size: 1.25em;
}

.rekit-picker[data-template='showcase'] .rekit-picker__group .rekit-picker__save {
  background: color-mix(in srgb, currentColor 18%, transparent);
}

/* ── Bold pricing: one-time and subscribe as price tiles, the saving as a ribbon ──────── */
.rekit-picker[data-template='tiles'] .rekit-picker__box {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rekit-gap, 0.75em);
}

.rekit-picker[data-template='tiles'] .rekit-picker__plans {
  display: contents;
}

.rekit-picker[data-template='tiles'] :is(.rekit-picker__caption, .rekit-picker__list, .rekit-picker__prepaid, .rekit-picker__desc, .rekit-picker__gift),
.rekit-picker[data-template='tiles'] .rekit-picker__box:has(.rekit-picker__plans[hidden]) .rekit-picker__once,
.rekit-picker[data-template='tiles'] .rekit-picker__box:not(:has(.rekit-picker__once)) .rekit-picker__group {
  grid-column: 1 / -1;
}

.rekit-picker[data-template='tiles'] :is(.rekit-picker__once, .rekit-picker__group) {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  margin: 0;
  padding: var(--rekit-padding, 1.375em 0.75em 1.125em);
  border: var(--rekit-border-width, 1.5px) solid var(--rekit-border, color-mix(in srgb, currentColor 18%, transparent));
  border-radius: var(--rekit-radius, 1em);
  background: var(--rekit-bg, transparent);
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.rekit-picker[data-template='tiles'] .rekit-picker__once:has(input:checked),
.rekit-picker[data-template='tiles'] .rekit-picker__box:has(.rekit-picker__plan input:checked) .rekit-picker__group {
  border-color: var(--rekit-text, currentColor);
  box-shadow: 0 0 0 1px var(--rekit-text, currentColor), 0 8px 22px rgb(0 0 0 / 0.08);
  background: var(--rekit-active-bg, var(--rekit-bg, transparent));
}

/* A check badge on the chosen tile's corner (outside the text): the tick is cut out of the circle
   (::after) over a disc in the tile's background colour (::before), so it sits on top of the
   tile's border instead of letting the border show through the tick. */
.rekit-picker[data-template='tiles'] .rekit-picker__once:has(input:checked)::before,
.rekit-picker[data-template='tiles'] .rekit-picker__box:has(.rekit-picker__plan input:checked) .rekit-picker__group::before,
.rekit-picker[data-template='tiles'] .rekit-picker__once:has(input:checked)::after,
.rekit-picker[data-template='tiles'] .rekit-picker__box:has(.rekit-picker__plan input:checked) .rekit-picker__group::after {
  content: '';
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  width: 1.375em;
  height: 1.375em;
}

.rekit-picker[data-template='tiles'] .rekit-picker__once:has(input:checked)::before,
.rekit-picker[data-template='tiles'] .rekit-picker__box:has(.rekit-picker__plan input:checked) .rekit-picker__group::before {
  border-radius: 50%;
  background: var(--rekit-bg-solid, var(--rekit-bg, #fff));
}

.rekit-picker[data-template='tiles'] .rekit-picker__once:has(input:checked)::after,
.rekit-picker[data-template='tiles'] .rekit-picker__box:has(.rekit-picker__plan input:checked) .rekit-picker__group::after {
  background: var(--rekit-text, currentColor);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cmask id='m'%3E%3Crect width='20' height='20' fill='%23fff'/%3E%3Cpath d='M5.75 10.25l2.75 2.75 5.75-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='10' cy='10' r='10' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rekit-picker[data-template='tiles'] .rekit-picker__dot {
  display: none;
}

.rekit-picker[data-template='tiles'] :is(.rekit-picker__once .rekit-picker__name, .rekit-picker__group-name) {
  flex: none;
  order: 1;
  font-size: 0.75em;
  font-weight: var(--rekit-font-weight, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

.rekit-picker[data-template='tiles'] :is(.rekit-picker__once, .rekit-picker__group) .rekit-picker__price {
  order: 2;
  font-size: 1.625em;
  font-weight: 800;
  line-height: 1.15;
}

.rekit-picker[data-template='tiles'] .rekit-picker__group .rekit-picker__was {
  order: 3;
  font-size: 0.875em;
}

.rekit-picker[data-template='tiles'] .rekit-picker__group .rekit-picker__save {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.3em 0.875em;
  font-size: 0.7em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--rekit-badge-bg, var(--rekit-text, #1a1a1a));
  color: var(--rekit-badge-text, #fff);
}

/* ── Coupon: the subscribe offer as a ticket, the saving on its perforated stub ────────── */
.rekit-picker[data-template='coupon'] :is(.rekit-picker__box, .rekit-picker__plans) {
  gap: var(--rekit-gap, 0.75em);
}

.rekit-picker[data-template='coupon'] .rekit-picker__once {
  border-radius: var(--rekit-radius, 0.75em);
}

/* Two notches are punched out where the 6em stub meets the body. */
.rekit-picker[data-template='coupon'] .rekit-picker__group {
  display: grid;
  grid-template-columns: 6em auto 1fr auto;
  grid-template-areas: 'badge dot name price' 'badge . . was';
  align-items: center;
  gap: 0.125em 0.75em;
  min-height: 4.5em;
  margin: 0;
  padding-inline-end: 1em;
  overflow: hidden;
  border: var(--rekit-border-width, 1.5px) solid var(--rekit-border, color-mix(in srgb, currentColor 20%, transparent));
  border-radius: var(--rekit-radius, 0.75em);
  background: var(--rekit-bg, transparent);
  cursor: pointer;
  mask:
    radial-gradient(circle at 6em 0, #0000 0.55em, #000 0.6em) top / 100% 51% no-repeat,
    radial-gradient(circle at 6em 100%, #0000 0.55em, #000 0.6em) bottom / 100% 51% no-repeat;
  transition: border-color 0.15s, background-color 0.15s;
}

/* An inset ring, since the notch mask would cut off an outer shadow. */
.rekit-picker[data-template='coupon'] .rekit-picker__plans:has(input:checked) .rekit-picker__group {
  border-color: var(--rekit-text, currentColor);
  box-shadow: inset 0 0 0 1px var(--rekit-text, currentColor);
  background: var(--rekit-active-bg, var(--rekit-bg, transparent));
}

.rekit-picker[data-template='coupon'] .rekit-picker__group .rekit-picker__save {
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em;
  border-radius: 0;
  border-inline-end: 2px dashed var(--rekit-bg-solid, var(--rekit-bg, #fff));
  background: var(--rekit-badge-bg, var(--rekit-text, #1a1a1a));
  color: var(--rekit-badge-text, #fff);
  font-size: 1em;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

.rekit-picker[data-template='coupon'] .rekit-picker__group .rekit-picker__price {
  font-size: 1.25em;
}

/* ── Midnight: the whole widget on a dark panel, the offer with a soft glow ───────────── */
.rekit-picker[data-template='midnight'] {
  padding: 1.25em;
  border: var(--rekit-border-width, 1px) solid var(--rekit-border, color-mix(in srgb, currentColor 15%, transparent));
  border-radius: var(--rekit-radius, 1.25em);
  background: var(--rekit-bg, transparent);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.2);
}

.rekit-picker[data-template='midnight'] .rekit-picker__box {
  gap: var(--rekit-gap, 0.75em);
}

/* Rows and the subscribe box are tints of the text colour, so they read on any panel. */
.rekit-picker[data-template='midnight'] :is(.rekit-picker__option, .rekit-picker__plans) {
  border-color: color-mix(in srgb, currentColor 16%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent);
}

.rekit-picker[data-template='midnight'] .rekit-picker__once {
  border-radius: var(--rekit-radius, 0.875em);
}

.rekit-picker[data-template='midnight'] .rekit-picker__plans {
  padding: var(--rekit-padding, 0.875em 1em);
  border: var(--rekit-border-width, 1px) solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--rekit-radius, 0.875em);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

/* The glow takes the price colour. */
.rekit-picker[data-template='midnight'] .rekit-picker__once:has(input:checked),
.rekit-picker[data-template='midnight'] .rekit-picker__plans:has(input:checked) {
  border-color: var(--rekit-text, currentColor);
  box-shadow: 0 0 0 1px var(--rekit-text, currentColor), 0 0 28px color-mix(in srgb, var(--rekit-price, currentColor) 35%, transparent);
  background: var(--rekit-active-bg, color-mix(in srgb, currentColor 10%, transparent));
}

@media (prefers-reduced-motion: reduce) {
  .rekit-picker * {
    animation: none !important;
    transition: none !important;
  }
}

/* Pills and tiles hide the radio itself but keep it reachable by keyboard. */
.rekit-picker:is([data-template='pills'], [data-template='cards'], [data-template='segmented'], [data-template='showcase'], [data-template='tiles'], [data-template='coupon'], [data-template='midnight']) .rekit-picker__plan input,
.rekit-picker:is([data-template='segmented'], [data-template='tiles']) .rekit-picker__once input,
.rekit-picker[data-template='spotlight'] .rekit-picker__plan input,
.rekit-picker[data-template='grid'] .rekit-picker__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.rekit-picker__option:has(input:focus-visible),
.rekit-picker__select:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.rekit-portal-link {
  display: grid;
  gap: 0.25em;
  margin: 1em 0;
}