/**
 * Subscription boxes on the storefront and in My Account.
 *
 * Deliberately light: a box builder sits inside somebody else's theme, so this
 * sets structure and spacing and lets the theme's own type and colour through.
 */

.subscrpt-box-builder {
  margin: 0 0 1.5em;
}

/* Inside a purchase option it lines up with the option's own terms, past the
   radio when there is one, and stands clear of them. */
.subscrpt-buybox__body > .subscrpt-box-builder {
  margin: 16px 0 0;
  padding-left: var(--subscrpt-indent, 0);
}

/* Why the builder is parked: an installments option cannot hold a box. */

.subscrpt-box-builder__held {
  margin: 0 0 1em;
  padding: 0.6em 0.9em;
  border-left: 3px solid #a8321f;
  background: rgba(168, 50, 31, 0.07);
}

.subscrpt-box-builder__held[hidden] {
  display: none;
}

/* Choosing between the boxes one product sells. */

.subscrpt-box-switch {
  margin: 0 0 1.25em;
}

.subscrpt-box-switch__label {
  display: block;
  margin: 0 0 0.5em;
  font-weight: 600;
}

.subscrpt-box-switch__lede {
  margin: 0 0 0.75em;
  opacity: 0.75;
  font-size: 0.9em;
}

.subscrpt-box-switch__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subscrpt-box-switch__option {
  display: inline-block;
  padding: 0.4em 0.9em;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  text-decoration: none;
}

.subscrpt-box-switch__option.is-current {
  border-color: currentColor;
  font-weight: 600;
}

.subscrpt-box-builder__rule {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  align-items: baseline;
  margin: 0 0 0.75em;
}

.subscrpt-box-builder__counter,
.subscrpt-box-form__counter {
  font-weight: 600;
}

.subscrpt-box-builder__counter.is-ready,
.subscrpt-box-form__counter.is-ready {
  color: #1b7442;
}

.subscrpt-box-builder__counter.is-over {
  color: #a8321f;
}

.subscrpt-box-builder__price {
  margin: 0.5em 0 0.25em;
  font-size: 1.25em;
  font-weight: 700;
}

.subscrpt-box-builder__split[hidden] {
  display: none;
}

.subscrpt-box-builder__split {
  display: block;
}

.subscrpt-box-builder__then {
  display: block;
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0.75;
}

.subscrpt-box-builder__regular {
  margin-right: 0.4em;
  font-weight: 400;
  opacity: 0.6;
}

.subscrpt-box-builder__message {
  margin: 0 0 1em;
  color: #1b7442;
}

.subscrpt-box-builder__message:empty {
  display: none;
}

/*
 * Each item is a card: picture, name, stepper. The colours follow the purchase
 * options' own custom properties, so a store that recoloured those recolours
 * these too; the fallbacks cover a builder parked outside the options.
 */

.subscrpt-box-builder__grid,
.subscrpt-box-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr));
  gap: 0.75em;
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}

.subscrpt-box-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0.5em 0.5em 0.6em;
  border: 1px solid var(--subscrpt-line, #e2e4e7);
  border-radius: var(--subscrpt-radius, 10px);
  background: var(--subscrpt-surface, #fff);
  text-align: center;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

/* Filtered out by a category or the search. */
.subscrpt-box-choice[hidden] {
  display: none;
}

.subscrpt-box-choice:hover {
  border-color: color-mix(in srgb, var(--subscrpt-accent, #2271b1) 45%, var(--subscrpt-line, #e2e4e7));
}

.subscrpt-box-choice.is-picked {
  border-color: var(--subscrpt-accent, #2271b1);
  box-shadow: 0 0 0 1px var(--subscrpt-accent, #2271b1);
  background: var(--subscrpt-selected-bg, #e8f1fa);
}

/* The tick on a picked card. */
.subscrpt-box-choice.is-picked::after {
  content: "";
  position: absolute;
  top: 0.45em;
  right: 0.45em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--subscrpt-accent, #2271b1)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
    center / 65% no-repeat;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.subscrpt-box-choice img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--subscrpt-radius, 10px) - 4px);
  background: rgba(0, 0, 0, 0.03);
}

/* Themes shadow every image in a post (Astra's `.ast-article-single img`), which
   blurs the card's edge; the card draws its own frame. */
.subscrpt-box-builder .subscrpt-box-choice img {
  box-shadow: none;
}

.subscrpt-box-choice__name {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.6em;
  font-size: 0.875em;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* What a pick adds, on a box priced by its picks. */
.subscrpt-box-choice__price {
  display: block;
  margin: 0;
  font-size: 0.875em;
  font-weight: 600;
  line-height: 1.3;
}

.subscrpt-box-choice__price[hidden] {
  display: none;
}

.subscrpt-box-choice__price del {
  margin-right: 0.25em;
  font-weight: 400;
  opacity: 0.6;
}

.subscrpt-box-choice__price ins {
  text-decoration: none;
}

/* Picture and name open the item's own page. */
.subscrpt-box-choice__link {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  color: inherit;
  text-decoration: none;
}

.subscrpt-box-choice__link:hover .subscrpt-box-choice__name,
.subscrpt-box-choice__link:focus-visible .subscrpt-box-choice__name {
  color: var(--subscrpt-accent, #2271b1);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.subscrpt-box-choice__link:focus-visible {
  outline: 2px solid var(--subscrpt-accent, #2271b1);
  outline-offset: 2px;
  border-radius: calc(var(--subscrpt-radius, 10px) - 4px);
}

/* A variable product's options, one card for all of them. */
.subscrpt-box-choice__variant {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 2.25em;
  margin: 0;
  padding: 0 1.75em 0 0.75em;
  border: 1px solid var(--subscrpt-line, #e2e4e7);
  border-radius: calc(var(--subscrpt-radius, 10px) - 4px);
  color: inherit;
  background: var(--subscrpt-surface, #fff)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6f76' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    right 0.55em center / 0.9em no-repeat;
  font: inherit;
  font-size: 0.85em;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.subscrpt-box-choice__variant:focus-visible {
  border-color: var(--subscrpt-accent, #2271b1);
  outline: 2px solid color-mix(in srgb, var(--subscrpt-accent, #2271b1) 30%, transparent);
  outline-offset: 0;
}

.subscrpt-box-choice__variant[hidden] {
  display: none;
}

/* A variable card opens its options in a popup; the button sits where a
   stepper would, so every card's control lines up. */
.subscrpt-box-builder .subscrpt-box-choice__options {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.25em;
  margin: auto 0 0;
  padding: 0.35em 0.9em;
  border: 1px solid var(--subscrpt-accent, #2271b1);
  border-radius: 999px;
  color: var(--subscrpt-accent, #2271b1);
  background: var(--subscrpt-surface, #fff);
  box-shadow: none;
  font: inherit;
  font-size: 0.875em;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.subscrpt-box-builder .subscrpt-box-choice__options:hover,
.subscrpt-box-builder .subscrpt-box-choice.is-picked .subscrpt-box-choice__options {
  color: #fff;
  background: var(--subscrpt-accent, #2271b1);
}

.subscrpt-box-builder .subscrpt-box-choice__options:focus-visible {
  outline: 2px solid var(--subscrpt-accent, #2271b1);
  outline-offset: 2px;
}

/* The popup. */
.subscrpt-box-variants {
  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--subscrpt-radius, 10px);
  color: inherit;
  background: var(--subscrpt-surface, #fff);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  text-align: left;
}

.subscrpt-box-variants[open] {
  display: flex;
  flex-direction: column;
}

.subscrpt-box-variants::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.subscrpt-box-variants:focus {
  outline: none;
}

.subscrpt-box-variants__head,
.subscrpt-box-variants__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
}

.subscrpt-box-variants__head {
  border-bottom: 1px solid var(--subscrpt-line, #e2e4e7);
}

.subscrpt-box-variants__foot {
  justify-content: flex-end;
  border-top: 1px solid var(--subscrpt-line, #e2e4e7);
}

.subscrpt-box-variants__title {
  margin: 0;
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1.3;
}

.subscrpt-box-builder .subscrpt-box-variants__close {
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
}

.subscrpt-box-builder .subscrpt-box-variants__close:hover {
  color: inherit;
  background: rgba(0, 0, 0, 0.05);
  opacity: 1;
}

.subscrpt-box-variants__body {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  overflow-y: auto;
}

.subscrpt-box-variants__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--subscrpt-radius, 10px) - 4px);
  background: rgba(0, 0, 0, 0.03);
  box-shadow: none;
}

.subscrpt-box-variants__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.subscrpt-box-variants__label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

.subscrpt-box-variants__values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.subscrpt-box-variants .subscrpt-box-choice__price {
  font-size: 1.05em;
}

.subscrpt-box-variants .subscrpt-box-choice__stepper {
  max-width: 170px;
  margin-top: 0;
}

/* What is already in the box, from this product. */
.subscrpt-box-variants__inbox {
  padding: 0 20px 16px;
}

.subscrpt-box-variants__subtitle {
  margin: 0;
  padding: 14px 0 6px;
  border-top: 1px solid var(--subscrpt-line, #e2e4e7);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

.subscrpt-box-variants__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.subscrpt-box-variants__item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--subscrpt-line, #e2e4e7);
}

.subscrpt-box-variants__item:last-child {
  border-bottom: 0;
}

.subscrpt-box-builder .subscrpt-box-variants__show,
.subscrpt-box-builder .subscrpt-box-variants__remove {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  box-shadow: none;
  font: inherit;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.subscrpt-box-builder .subscrpt-box-variants__show {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.subscrpt-box-builder .subscrpt-box-variants__show:hover {
  color: var(--subscrpt-accent, #2271b1);
  background: none;
  text-decoration: underline;
}

.subscrpt-box-variants__qty {
  font-weight: 600;
}

.subscrpt-box-builder .subscrpt-box-variants__remove {
  font-size: 0.85em;
  opacity: 0.65;
}

.subscrpt-box-builder .subscrpt-box-variants__remove:hover {
  color: #b32d2e;
  background: none;
  opacity: 1;
}

.subscrpt-box-variants__empty {
  margin: 4px 0 0;
  font-size: 0.875em;
  opacity: 0.65;
}

.subscrpt-box-variants__empty[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .subscrpt-box-variants__body {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }

  .subscrpt-box-variants__head,
  .subscrpt-box-variants__foot,
  .subscrpt-box-variants__inbox {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* An attribute's values, in the popup. */
.subscrpt-box-builder .subscrpt-box-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.1em;
  margin: 0;
  padding: 0.25em 0.85em;
  border: 1px solid var(--subscrpt-line, #e2e4e7);
  border-radius: 999px;
  color: inherit;
  background: var(--subscrpt-surface, #fff);
  box-shadow: none;
  font: inherit;
  font-size: 0.875em;
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}

.subscrpt-box-builder .subscrpt-box-chip:hover {
  border-color: var(--subscrpt-accent, #2271b1);
  color: inherit;
  background: var(--subscrpt-surface, #fff);
}

.subscrpt-box-builder .subscrpt-box-chip[aria-pressed="true"] {
  border-color: var(--subscrpt-accent, #2271b1);
  color: var(--subscrpt-accent, #2271b1);
  background: color-mix(in srgb, var(--subscrpt-accent, #2271b1) 10%, var(--subscrpt-surface, #fff));
  font-weight: 600;
}

.subscrpt-box-builder .subscrpt-box-chip.is-unavailable {
  border-style: dashed;
  opacity: 0.45;
}

.subscrpt-box-builder .subscrpt-box-chip:focus-visible {
  outline: 2px solid var(--subscrpt-accent, #2271b1);
  outline-offset: 2px;
}

/* What a variable card holds across its options. */
.subscrpt-box-choice__picks {
  margin: 0;
  color: var(--subscrpt-accent, #2271b1);
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.3;
}

.subscrpt-box-choice__picks[hidden],
.subscrpt-box-choice__once-for[hidden],
.subscrpt-box-choice__stepper .subscrpt-box-choice__qty[hidden] {
  display: none;
}

/* − qty + : the number stays a real input, so it can still be typed. */
.subscrpt-box-choice__stepper {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr) 2em;
  align-items: stretch;
  box-sizing: border-box;
  height: 2.25em;
  margin-top: auto;
  overflow: hidden;
  border: 1px solid var(--subscrpt-line, #e2e4e7);
  border-radius: 999px;
  background: var(--subscrpt-surface, #fff);
}

.subscrpt-box-choice.is-picked .subscrpt-box-choice__stepper {
  border-color: var(--subscrpt-accent, #2271b1);
}

.subscrpt-box-choice__step {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--subscrpt-accent, #2271b1);
  background: transparent;
  font: inherit;
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.subscrpt-box-choice__step:hover:not(:disabled) {
  color: var(--subscrpt-accent-ink, #fff);
  background: var(--subscrpt-accent, #2271b1);
}

.subscrpt-box-choice__step:focus-visible {
  outline: 2px solid var(--subscrpt-accent, #2271b1);
  outline-offset: -2px;
}

.subscrpt-box-choice__step:disabled {
  color: var(--subscrpt-muted, #6a6f76);
  opacity: 0.35;
  cursor: not-allowed;
}

.subscrpt-box-choice__stepper .subscrpt-box-choice__qty {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.subscrpt-box-choice__stepper .subscrpt-box-choice__qty::-webkit-inner-spin-button,
.subscrpt-box-choice__stepper .subscrpt-box-choice__qty::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.subscrpt-box-choice__stepper .subscrpt-box-choice__qty:focus {
  outline: none;
}

.subscrpt-box-choice__stepper:focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--subscrpt-accent, #2271b1) 30%, transparent);
}

.subscrpt-box-choice__qty {
  width: 100%;
  max-width: 5em;
  margin: 0 auto;
  text-align: center;
}

.subscrpt-box-choice__once {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  font-size: 0.85em;
  line-height: 1.2;
  cursor: pointer;
}

.subscrpt-box-choice__once[hidden] {
  display: none;
}

.subscrpt-box-choice__once input {
  margin: 0;
}

.subscrpt-box-builder__defaults {
  margin: 0 0 1em;
}

.subscrpt-box-panel {
  margin: 2em 0;
  padding: 1.25em 1.5em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.subscrpt-box-panel__head h2 {
  margin: 0 0 0.25em;
  font-size: 1.15em;
}

.subscrpt-box-panel__status {
  margin: 0 0 1em;
  opacity: 0.75;
  font-size: 0.95em;
}

.subscrpt-box-panel__status.is-locked {
  opacity: 1;
  font-weight: 600;
}

.subscrpt-box-panel__contents {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}

.subscrpt-box-panel__contents li {
  display: flex;
  gap: 0.6em;
  padding: 0.25em 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.subscrpt-box-panel__qty {
  min-width: 2.5em;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

.subscrpt-box-contents {
  margin: 0.35em 0 0;
  padding: 0 0 0 1.1em;
  font-size: 0.9em;
  opacity: 0.8;
}

.subscrpt-box-form__actions {
  display: flex;
  gap: 1em;
  align-items: center;
}

/* What is in a box, on its cart line (classic cart, checkout review, block cart). */
.subscrpt-box-contents {
  margin: 0.6em 0 0;
  font-size: 0.9em;
  text-align: left;
}

.subscrpt-box-contents__title {
  margin: 0 0 0.4em;
  opacity: 0.75;
}

.subscrpt-box-contents__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subscrpt-box-contents__item {
  display: flex;
  align-items: center;
  gap: 0 0.5em;
  margin: 0;
  padding: 0;
  max-width: 100%;
}

.subscrpt-box-contents__thumb {
  flex: none;
  width: 3em;
  height: 3em;
  margin: 0;
  border-radius: 4px;
  object-fit: cover;
}

/* A box product without a picture of its own shows its picks, in place of the
   store's placeholder: one fills the square, two split it, three put the first
   on the left, four quarter it and the last says how many more are packed. */
.subscrpt-box-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 100%;
  min-width: 48px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  background: var(--subscrpt-line, #e2e4e7);
}

.subscrpt-box-collage__tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.subscrpt-box-collage__tile img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}

.subscrpt-box-collage[data-count="1"] .subscrpt-box-collage__tile {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.subscrpt-box-collage[data-count="2"] .subscrpt-box-collage__tile,
.subscrpt-box-collage[data-count="3"] .subscrpt-box-collage__tile:first-child {
  grid-row: 1 / -1;
}

.subscrpt-box-collage__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
}

/* WooCommerce's own placeholder, kept in the DOM for React and out of sight. */
.subscrpt-box-collage ~ img[hidden] {
  display: none !important;
}

.subscrpt-box-contents__name {
  min-width: 0;
  line-height: 1.3;
}

.subscrpt-box-contents__qty,
.subscrpt-box-contents__once,
.subscrpt-box-contents__price {
  opacity: 0.7;
}

.subscrpt-box-contents__once,
.subscrpt-box-contents__cadence {
  font-size: 0.85em;
  font-style: italic;
}

.subscrpt-box-contents__cadence {
  opacity: 0.7;
}

.subscrpt-box-contents__edit {
  display: inline-block;
  margin-top: 0.6em;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.subscrpt-box-builder__locked {
  margin: 0 0 1em;
  font-size: 0.9em;
  opacity: 0.8;
}

/* The "Add to a box" card on an item's page. */

.subscrpt-box-add {
  margin: 0.5em 0 0;
}

.subscrpt-box-add--standalone {
  margin: 1.25em 0 0;
  padding-top: 1em;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/*
 * A row of its own below the add-to-cart actions, whether the theme floats them
 * (WooCommerce's default, Kadence, GeneratePress) or lays them out in a flex
 * row (Blocksy); two classes so it outranks a theme's `.actions > *`.
 */
.subscrpt-box-add.subscrpt-box-add--standalone {
  flex: 0 0 100%;
  clear: both;
  width: 100%;
}

.subscrpt-box-add__title {
  margin: 0 0 0.35em;
  font-size: 1.05em;
}

.subscrpt-box-add__sub {
  margin: 0 0 0.75em;
  opacity: 0.75;
  font-size: 0.9em;
}

/*
 * Element names and the class twice, to outrank a theme's list margin, indent
 * and bullets in the summary (`.woocommerce .summary ul` in OceanWP,
 * `.woocommerce.single .entry-summary ul` in Neve).
 */
div.subscrpt-box-add ul.subscrpt-box-add__list.subscrpt-box-add__list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

div.subscrpt-box-add ul.subscrpt-box-add__list > li.subscrpt-box-add__item {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  align-items: center;
  gap: 0.5em 0.75em;
}

.subscrpt-box-add__once {
  display: block;
  margin: 0.4em 0 0;
  padding: 0;
  border: 0;
  font-size: 0.9em;
}

.subscrpt-box-add__once legend {
  display: block;
  float: left;
  position: static;
  width: 100%;
  margin: 0 0 0.15em;
  padding: 0;
  text-indent: 0;
  opacity: 0.75;
}

.subscrpt-box-add__once label {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-right: 1em;
  cursor: pointer;
}

.subscrpt-box-add__once legend + label {
  clear: left;
}

.subscrpt-box-add__from {
  opacity: 0.75;
  font-size: 0.9em;
}

/* The subscriber's "Add to your next box" choice, inside the same card. */

.subscrpt-box-add__next {
  margin: 1em 0 0;
  padding-top: 0.85em;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.subscrpt-box-add__next-title {
  margin: 0 0 0.6em;
  font-weight: 600;
  font-size: 0.95em;
}

/* The replace prompt: a full box asks which item to give up. */

.subscrpt-box-replace {
  box-sizing: border-box;
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  margin: auto;
  padding: 1.25em;
  overflow: auto;
  border: 0;
  border-radius: 8px;
  color: inherit;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.subscrpt-box-replace::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.subscrpt-box-replace__incoming {
  float: left;
  margin: 0 0.75em 0.5em 0;
  border-radius: 6px;
  object-fit: cover;
}

.subscrpt-box-replace__title {
  margin: 0 0 1em;
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1.4;
}

.subscrpt-box-replace__list {
  clear: both;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subscrpt-box-replace__choice {
  display: flex;
  align-items: center;
  gap: 0.75em;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 0.4em 0.75em;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.subscrpt-box-replace__choice:hover,
.subscrpt-box-replace__choice:focus-visible {
  border-color: currentColor;
  background: rgba(0, 0, 0, 0.04);
}

.subscrpt-box-replace__thumb {
  flex: none;
  border-radius: 4px;
  object-fit: cover;
}

.subscrpt-box-replace__name {
  flex: 1;
}

.subscrpt-box-replace__qty {
  opacity: 0.7;
}

.subscrpt-box-replace__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1em;
}

/* The item's own add-to-cart while the box option is chosen: the card is the action. */

[data-subscrpt-box-add-hidden] {
  display: none !important;
}

.subscrpt-box-builder__notice {
  margin: 0 0 1em;
  padding: 0.6em 0.9em;
  border-left: 3px solid #a8321f;
  background: rgba(168, 50, 31, 0.07);
}

/* My Account: what the next box costs, why it cannot grow, and the picker that grows it. */
.subscrpt-box-panel__once {
  align-self: center;
  padding: 0.05em 0.6em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.07);
  font-size: 0.8em;
  line-height: 1.6;
}

.subscrpt-box-panel__next {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1em;
  margin: 0 0 1em;
  font-weight: 600;
}

.subscrpt-box-panel__then {
  font-weight: 400;
  opacity: 0.75;
}

.subscrpt-box-panel__then[hidden] {
  display: none;
}

.subscrpt-box-panel__note {
  margin: 0 0 1em;
  opacity: 0.8;
}

.subscrpt-box-account-add {
  margin: 0 0 1.25em;
  padding: 1em 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.subscrpt-box-account-add__title {
  margin: 0 0 0.5em;
  font-weight: 600;
}

.subscrpt-box-account-add__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75em 1.25em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subscrpt-box-account-add__field {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  margin: 0;
  min-width: 0;
}

.subscrpt-box-account-add__field select {
  max-width: 100%;
}

.subscrpt-box-account-add__field .subscrpt-box-add__once {
  margin: 0;
}

.subscrpt-box-account-add__preview {
  margin: 0.75em 0 0;
  font-weight: 600;
}

.subscrpt-box-account-add__preview[hidden] {
  display: none;
}

.subscrpt-box-choice__label {
  font-size: 0.85em;
  line-height: 1.2;
  opacity: 0.8;
}

.subscrpt-box-replace__once {
  margin-left: 0.5em;
  font-size: 0.8em;
  opacity: 0.7;
}

@media (max-width: 480px) {
  .subscrpt-box-account-add__row {
    flex-direction: column;
    align-items: stretch;
  }
}

.subscrpt-box-add__once label[hidden] {
  display: none;
}

/* Frequently bought together: the tiles, the ticked list and the box price. */

.subscrpt-together {
  clear: both;
  margin: 2em 0;
  padding: 1.25em 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.subscrpt-together__title {
  margin: 0 0 0.75em;
}

.subscrpt-together__tiles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}

.subscrpt-together__tile img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}

.subscrpt-together__plus {
  font-size: 1.5em;
  line-height: 1;
  opacity: 0.6;
}

.subscrpt-together__list {
  margin: 0 0 1em;
  padding: 0;
  border: 0;
}

.subscrpt-together__choice {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 0 0 0.4em;
  cursor: pointer;
}

.subscrpt-together__name {
  flex: 1 1 auto;
}

.subscrpt-together__price {
  flex: 0 0 auto;
  white-space: nowrap;
}

.subscrpt-together__summary {
  margin: 0 0 1em;
}

.subscrpt-together__summary p {
  margin: 0 0 0.25em;
}

.subscrpt-together__box {
  font-weight: 600;
}

.subscrpt-together__now {
  font-size: 1.25em;
  font-weight: 600;
}

.subscrpt-together__was {
  margin-right: 0.4em;
  opacity: 0.6;
}

.subscrpt-together__cadence {
  margin-left: 0.25em;
  opacity: 0.75;
}

.subscrpt-together__saving {
  color: #1d6b34;
  font-weight: 600;
}

.subscrpt-together__item {
  margin: 0 0 0.4em;
}

.subscrpt-together__item .subscrpt-together__choice {
  margin-bottom: 0;
}

.subscrpt-together__once {
  display: block;
  margin: 0.15em 0 0 1.7em;
  font-size: 0.9em;
  cursor: pointer;
}

.subscrpt-together__once[hidden],
.subscrpt-together__split[hidden],
.subscrpt-together__saving[hidden],
.subscrpt-together__was[hidden],
.subscrpt-together__total[hidden] {
  display: none;
}

.subscrpt-together__split {
  font-weight: 600;
}

.subscrpt-together[aria-busy="true"] .subscrpt-together__summary {
  opacity: 0.6;
}

.subscrpt-together__notice:empty {
  display: none;
}

.subscrpt-together__notice {
  margin-top: 1em;
}

@media (max-width: 480px) {
  .subscrpt-together__tile img {
    width: 72px;
    height: 72px;
  }
}

/* --------------------------------------------------------------------------
   The box page: a build-your-own box's product page is the builder, so it
   takes the full width and the gallery steps aside. The rest follows the
   theme's own colours through the plan selector's variables.
   -------------------------------------------------------------------------- */

/* Themes size these with long selectors of their own, so the override is firm. */
body.subscrpt-box-page.single-product div.product div.images,
body.subscrpt-box-page.single-product div.product .woocommerce-product-gallery {
  display: none !important;
}

body.subscrpt-box-page.single-product div.product div.summary,
body.subscrpt-box-page.single-product div.product .entry-summary {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
}

/* The plan selector keeps a narrow column beside a gallery; here it is the page. */
body.subscrpt-box-page .subscrpt-buybox {
  max-width: none;
}

body.subscrpt-box-page .subscrpt-box-builder__grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* Stretched full width and filled solid, the interval pills read as tabs over
   the builder. Here they are radio choices: content-width, each with its dot. */
body.subscrpt-box-page .subscrpt-buybox__term {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 140px;
  padding: 10px 16px 10px 12px;
  font-size: 14px;
  text-align: left;
}

body.subscrpt-box-page .subscrpt-buybox__term::before {
  content: "";
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 2px solid #8c8f94;
  border-radius: 50%;
  background: var(--subscrpt-surface);
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

body.subscrpt-box-page .subscrpt-buybox__term.is-active,
body.subscrpt-box-page .subscrpt-buybox__term.is-active:hover {
  background: var(--subscrpt-surface);
  box-shadow: 0 0 0 1px var(--subscrpt-accent);
  color: inherit;
}

body.subscrpt-box-page .subscrpt-buybox__term.is-active::before {
  border-color: var(--subscrpt-accent);
  background: var(--subscrpt-accent);
  box-shadow: inset 0 0 0 3px var(--subscrpt-surface);
}

body.subscrpt-box-page .subscrpt-buybox__card:not(.is-selected) .subscrpt-buybox__term.is-active {
  box-shadow: none;
}

body.subscrpt-box-page .subscrpt-buybox__card:not(.is-selected) .subscrpt-buybox__term.is-active::before {
  border-color: #8c8f94;
  background: var(--subscrpt-surface);
  box-shadow: none;
}

/* A rule between the interval and the builder, so the builder is not read as
   the panel of the chosen interval. */
body.subscrpt-box-page .subscrpt-buybox__body > .subscrpt-box-builder {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--subscrpt-line);
}

/* Category chips and search over the items. */
.subscrpt-box-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 16px;
}

.subscrpt-box-toolbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.subscrpt-box-filter {
  padding: 5px 12px;
  border: 1px solid var(--subscrpt-line, #e2e4e7);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.875em;
  line-height: 1.4;
  cursor: pointer;
}

.subscrpt-box-filter:hover {
  border-color: var(--subscrpt-accent, #2271b1);
}

.subscrpt-box-filter.is-on {
  border-color: var(--subscrpt-accent, #2271b1);
  background: var(--subscrpt-accent, #2271b1);
  color: var(--subscrpt-accent-ink, #fff);
}

.subscrpt-box-filter:focus-visible {
  outline: 2px solid var(--subscrpt-accent, #2271b1);
  outline-offset: 2px;
}

.subscrpt-box-toolbar__search {
  flex: 0 1 220px;
  min-width: 0;
  margin-left: auto;
}

@media (max-width: 560px) {
  .subscrpt-box-toolbar__search {
    flex-basis: 100%;
    margin-left: 0;
  }
}

.subscrpt-box-builder__nomatch {
  color: var(--subscrpt-muted, #6a6f76);
}

.subscrpt-box-builder__more {
  margin: 16px 0 0;
  text-align: center;
}

.subscrpt-box-builder__more[hidden],
.subscrpt-box-builder__nomatch[hidden] {
  display: none;
}

/* The tray's button stands in for the form's own, which stays in the form for
   it to press. The script adds the class, so without it nothing is hidden. */
form.subscrpt-box-has-tray .quantity,
form.subscrpt-box-has-tray .single_add_to_cart_button {
  display: none !important;
}

/* "Your box": pinned to the bottom of the screen while the builder is on it. */
.subscrpt-box-tray {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  margin: 20px 0 0;
  padding: 12px 16px;
  border-top: 1px solid var(--subscrpt-line, #e2e4e7);
  background: var(--subscrpt-tray-bg, #fff);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
}

.subscrpt-box-tray__sum {
  display: grid;
  flex: 1 1 200px;
  gap: 4px;
  min-width: 0;
}

.subscrpt-box-tray__head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
}

.subscrpt-box-tray__head span {
  color: var(--subscrpt-muted, #6a6f76);
  font-size: 0.875em;
}

.subscrpt-box-tray__progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--subscrpt-line, #e2e4e7);
}

.subscrpt-box-tray__progress[hidden] {
  display: none;
}

.subscrpt-box-tray__progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--subscrpt-accent, #2271b1);
  transition: width 0.2s ease;
}

.subscrpt-box-tray__msg {
  color: var(--subscrpt-muted, #6a6f76);
  font-size: 0.8125em;
}

.subscrpt-box-tray__msg:empty {
  display: none;
}

.subscrpt-box-tray__total {
  text-align: right;
}

.subscrpt-box-tray__amount {
  font-size: 1.125em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.subscrpt-box-tray__amount del {
  font-weight: 400;
  opacity: 0.6;
}

.subscrpt-box-tray__cadence {
  color: var(--subscrpt-muted, #6a6f76);
  font-size: 0.8125em;
}

.subscrpt-box-tray__add[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 560px) {
  .subscrpt-box-tray__total {
    text-align: left;
  }

  .subscrpt-box-tray__add {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subscrpt-box-tray__progress i {
    transition: none;
  }
}