.ochcheckout-option {
  margin-top: 0;
  color: #4a4a4a;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.ochcheckout-option p,
.ochcheckout-cart p {
  margin: 0;
}

.ochcheckout-cart-slot:empty,
.ochcheckout-cart-slot[aria-busy="true"] {
  display: none;
}

.ochcheckout-option__amount,
.ochcheckout-cart__amount {
  font-weight: 600;
}

.ochcheckout-cart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #d7dce2;
  border-radius: 6px;
  background: #fff;
}

.ochcheckout-cart__body {
  min-width: 0;
}

.ochcheckout-cart__title {
  display: block;
  color: #232323;
}

.ochcheckout-cart__description {
  color: #555;
  line-height: 1.4;
}

.ochcheckout-cart__form {
  margin: 0;
}

.ochcheckout-cart__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.ochcheckout-cart__button {
  white-space: normal;
}

.ochcheckout-error {
  max-width: 720px;
  margin: 2rem auto;
}

@media (max-width: 767px) {
  .ochcheckout-cart {
    align-items: stretch;
    flex-direction: column;
  }

  .ochcheckout-cart__button {
    width: 100%;
  }

  .ochcheckout-cart__actions {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
  }
}

/*
 * The picture that goes with the offer is a small mark beside the text, never
 * a banner (owner, 2026-09-23). Themes hang it after the label and lay the row
 * out with floats, so the row that carries our picture is made a single line:
 * radio, picture, text, all on one baseline. Only our own rows are touched.
 */
.payment-option img[src*="/ochcheckout/"] {
  width: auto;
  max-width: 72px;
  height: auto;
  max-height: 20px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.payment-option:has(img[src*="/ochcheckout/"]) {
  display: flex;
  /* The radio stays level with the title, not with the whole block of
     title, partner line and methods. */
  align-items: flex-start;
  flex-wrap: nowrap;
}

.payment-option:has(img[src*="/ochcheckout/"]) > .custom-radio {
  order: 0;
  flex: 0 0 auto;
  float: none;
  margin-right: 0.625rem;
}

.payment-option:has(img[src*="/ochcheckout/"]) > img[src*="/ochcheckout/"] {
  order: 1;
  flex: 0 0 auto;
  margin: 0 0.5rem 0 0;
}

.payment-option:has(img[src*="/ochcheckout/"]) > label {
  order: 2;
  min-width: 0;
  margin: 0;
}

/* Themes that put the picture inside the label (classic: text, then picture)
   get icon first, then the title, and the partner line under the title - all
   left-aligned, whatever alignment the theme gives labels (owner, 2026-09-25).
   Themes style these labels through the page id (classic:
   "body#checkout ... .payment-options label { display: table-cell }"), which
   no class selector can outweigh - hence !important, on our rows only. */
.payment-option label:has(img[src*="/ochcheckout/"]) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  column-gap: 0.5rem !important;
  align-items: center !important;
  justify-items: start !important;
  text-align: left !important;
}

.payment-option label:has(img[src*="/ochcheckout/"]) > img[src*="/ochcheckout/"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
}

.payment-option label:has(img[src*="/ochcheckout/"]) > span:not(.ochcheckout-option-note):not(.ochcheckout-methods) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.payment-option label:has(img[src*="/ochcheckout/"]) > .ochcheckout-option-note {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

/* The originals the script copied under the title stay hidden, also on
   themes without a [hidden] rule: our own display would otherwise win. */
[data-ochcheckout-option-note][hidden],
[data-ochcheckout-option-methods][hidden] {
  display: none !important;
}

/* The line under an OCH payment option's title: who takes the payment. */

.ochcheckout-option-note {
  display: block;
  margin: 0.125rem 0 0;
  text-align: left;
  color: #8a8f96;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
}

/* The methods of the operator the payment goes to (#717): small marks, or
   their names as quiet chips when the module has no mark for one. */

.ochcheckout-methods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.ochcheckout-methods__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

/* #1002: "* depends on your device" beside the wallets' asterisks. */
.ochcheckout-methods__note,
.ochcheckout-method__note {
  color: #6b7280;
  font-size: 0.75rem;
  line-height: 1.25rem;
}

.ochcheckout-method__note {
  margin-left: 0.125rem;
  align-self: flex-start;
  line-height: 1;
}

.ochcheckout-method {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  padding: 0 0.375rem;
  border: 1px solid #d7dce2;
  border-radius: 3px;
  background: #fff;
  color: #4a4a4a;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
}

/* A mark sits in the same quiet frame as a name, so both read alike. */
.ochcheckout-method:has(.ochcheckout-method__icon) {
  padding: 0 0.25rem;
}

/* #1002: a card-shaped mark brings its own frame and fills the chip's height. */
.ochcheckout-method.ochcheckout-method--mark {
  padding: 0;
  border: 0;
  background: transparent;
}

.payment-option .ochcheckout-method--mark img.ochcheckout-method__icon[src*="/ochcheckout/"],
.ochcheckout-method--mark .ochcheckout-method__icon {
  height: 20px;
}

/* Square library marks stay 16 x 16; a wider official mark (Amazon Pay's
   acceptance mark, 3:2) keeps its proportions at the same height. */
.payment-option img.ochcheckout-method__icon[src*="/ochcheckout/"],
.ochcheckout-method__icon {
  display: block;
  width: auto;
  max-width: none;
  height: 16px;
  max-height: none;
  margin: 0;
}

.payment-option label:has(img[src*="/ochcheckout/"]) > .ochcheckout-methods {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

.ochcheckout-cart__form .ochcheckout-methods,
.ochcheckout-cart__form .ochcheckout-methods__list {
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .ochcheckout-cart__form .ochcheckout-methods,
  .ochcheckout-cart__form .ochcheckout-methods__list {
    justify-content: flex-start;
  }
}

/* Read by screen readers only (#1002: a footnote beside a name). */
.ochcheckout-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body#checkout section.checkout-step .payment-options>div .payment-option>label .ochcheckout-method__icon {
  padding:0;
  max-width:32px;
}