:root {
  color: #252a32;
  background: #fcfbf4;
  font-family: "Archivo", Arial, sans-serif;
  font-synthesis: none;
  --purple: #5b146f;
  --deep-purple: #37007e;
  --panel: #f5f4ec;
  --green: #0fb87c;
}

* {
  box-sizing: border-box;
}

.market-pending .product__price,
.market-pending .order-summary,
.market-pending .order-button {
  visibility: hidden;
}

html {
  min-width: 320px;
  background: #fcfbf4;
}

body {
  margin: 0;
  background: #fcfbf4;
  color: #252a32;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 14px;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

p,
h1,
h2,
h3 {
  margin-top: 0;
}

.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;
}

.sale-bar {
  width: 100%;
  padding: 10px 10px 9px;
  background: #000;
  color: #fff;
  text-align: center;
}

.sale-bar__top {
  display: flex;
  align-items: center;
  width: min(100%, 1170px);
  min-height: 54px;
  margin: 0 auto;
}

.sale-bar__top img {
  width: 60px;
  height: auto;
  margin-left: max(0px, calc(20% - 60px));
  object-fit: contain;
}

.sale-bar__top p {
  flex: 1;
  margin: 0;
  padding: 5px 65px 0 5px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.sale-bar__top span {
  color: #d7cbff;
}

.sale-bar__divider {
  height: 1px;
  margin: 9px 10px;
  background: #606060;
}

.reservation {
  margin: 0 15px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

.reservation strong {
  color: #beabfd;
}

.intro {
  width: min(100%, 1170px);
  margin: 0 auto 5px;
  padding: 0 10px;
  text-align: center;
}

.intro__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px auto 5px;
  color: var(--purple);
  line-height: 1;
}

.intro__reader-name {
  font-size: 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.intro__brand-byline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
}

.intro__logo {
  width: 112px;
  height: auto;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(14%) sepia(75%) saturate(4650%) hue-rotate(274deg) brightness(75%);
}

.intro__spots {
  margin: 0 0 5px;
  padding: 10px 0;
  color: #a38eeb;
  font-size: 18px;
  line-height: 1.3;
}

.intro__guarantee {
  margin: 0;
  color: var(--deep-purple);
  font-size: 18px;
  line-height: 1.3;
}

.checkout-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 1170px);
  margin: 0 auto 10px;
  padding: 0 10px;
}

.checkout-layout__column {
  min-width: 0;
}

.panel {
  margin: 10px 5px;
  padding: 10px;
  border: 1px solid #f2f2f2;
  border-radius: 10px;
  background: var(--panel);
  text-align: left;
}

.panel--sticky {
  position: sticky;
  top: 0;
  border: 0;
  padding-top: 20px;
}

.step-title {
  margin: 0;
  padding: 10px 5px;
  color: #323232;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.step-subtitle {
  margin: 0 0 10px;
  padding: 0 5px 5px;
  color: #323232;
  font-size: 14px;
}

.field {
  display: block;
  margin: 0 0 10px;
  color: #252a32;
  font-size: 14px;
}

.field > span {
  display: block;
  margin-bottom: 5px;
}

.field--no-label {
  margin-top: -5px;
}

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 43px;
  padding: 11px 12px;
  border: 0;
  border-radius: 3px;
  outline: 1px solid transparent;
  background: #fff;
  color: #000;
  font-size: 14px;
  transition: outline-color 120ms ease;
}

.field textarea {
  min-height: 92px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline-color: #8d64b3;
}

.field [aria-invalid="true"] {
  outline-color: #c92020;
}

.birth-date {
  min-width: 0;
  padding: 0;
  border: 0;
}

.birth-date legend {
  margin-bottom: 5px;
  padding: 0;
}

.birth-date__inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.birth-date__inputs label {
  min-width: 0;
}

.birth-date input::placeholder,
.birth-date select:has(option[value=""]:checked) {
  color: #757575;
  opacity: 1;
}

.birth-date__inputs input,
.birth-date__inputs select {
  min-height: 42.5px;
  padding: 11.05px 14px;
  border: 1px solid #d9d5ca;
  border-radius: 0;
  font-size: 13.6px;
}

.birth-date__inputs select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1.5 8 8.5l7-7' fill='none' stroke='%235b146f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px auto;
}

.birth-date > input[type="hidden"] {
  display: none;
}

.draft-notice {
  margin: 2px 0 10px;
  color: #5f5964;
  font-size: 11px;
  line-height: 1.45;
}

.draft-notice a {
  color: #5c327e;
  font-weight: 700;
}

.products {
  min-width: 0;
  margin: 10px 0 0;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: #fff;
}

.products__header {
  display: grid;
  grid-template-columns: 1fr 115px;
  padding: 0 4px 7px;
  color: var(--purple);
  font-size: 13px;
  font-weight: 700;
}

.products__header span:last-child {
  text-align: right;
}

.product {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr 105px;
  align-items: center;
  gap: 8px;
  min-height: 92px;
  margin: 7px 0;
  padding: 23px 10px;
  border: 1px solid #dedede;
  border-radius: 6px;
  background: #fff;
  color: #252a32;
  cursor: pointer;
}

.product--tagged {
  padding-top: 30px;
  padding-bottom: 20px;
}

.product:has(input:checked) {
  border: 2px solid var(--purple);
  padding-right: 9px;
  padding-left: 9px;
  background: #fcf8ff;
}

.product input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.product__check {
  width: 19px;
  height: 19px;
  border: 2px solid #a5a5a5;
  border-radius: 50%;
  background: #fff;
}

.product input:checked ~ .product__check {
  border: 5px solid var(--purple);
}

.product__tag {
  position: absolute;
  top: -11px;
  left: 10px;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.product__name {
  font-size: 14px;
  line-height: 1.3;
}

.product__name em {
  display: inline-block;
  margin-right: 3px;
  padding: 2px 5px;
  border-radius: 3px;
  background: #ff0000;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.product__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.product__price s {
  color: #bbb;
  font-size: 17px;
  font-weight: 700;
}

.product__price strong {
  color: #3d1466;
  font-size: 18px;
}

.product__price small {
  color: #008a00;
  font-size: 12px;
  font-weight: 700;
}

.order-bump {
  display: block;
  margin: 15px 0 0;
  padding: 10px;
  border: 2px dotted #9000ff;
  border-radius: 6px;
  background: #fdf4ff;
  color: #444;
  cursor: pointer;
}

.order-bump--large {
  margin-bottom: 10px;
}

.order-bump:has(input:checked) {
  background: #f4e2fa;
}

.order-bump__headline {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #303030;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.25;
}

.order-bump__headline input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: #9000ff;
}

.order-bump__content {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
}

.order-bump__content b {
  color: #f00;
}

.order-bump__content--media {
  display: grid;
  grid-template-columns: 71px 1fr;
  gap: 12px;
}

.order-bump__content--media img {
  width: 71px;
  height: 71px;
  object-fit: cover;
}

.order-bump__content .green {
  color: #257e00;
}

.order-bump__content small {
  font-size: 13px;
}

.order-summary {
  overflow: hidden;
  min-width: 0;
  margin: 0;
  padding: 0 10px 10px;
  border-top: 1px solid #afafaf56;
  border-bottom: 1px solid #afafaf56;
  border-radius: 10px;
  background: #fff;
}

.summary-lines {
  padding: 8px 5px;
}

.summary-line,
.summary-total {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0;
  color: #535353;
  font-size: 14px;
}

.summary-lines .summary-line + .summary-line {
  border-top: 1px solid #eee;
}

.summary-line span:first-child {
  max-width: 75%;
}

.summary-line__price {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.summary-line__price s {
  color: #aaa;
  font-size: 15px;
  font-weight: 700;
}

.summary-line__price strong {
  color: #3d1466;
  font-size: 18px;
}

.summary-line__price small {
  color: #087a00;
  font-size: 11px;
  font-weight: 700;
}

.summary-total {
  margin: 10px 0 0;
  padding: 15px 0 6px;
  border-top: 1px solid #d5d5d5;
  font-size: 16px;
}

.summary-total[hidden] {
  display: none;
}

.coupon-only-inline {
  display: none;
}

.coupon-enabled .coupon-only-inline {
  display: inline;
}

.summary-line--coupon {
  align-items: center;
  margin: 15px 0 0;
  padding-top: 14px;
  border-top: 1px solid #ddd;
  color: #535353;
  font-size: 15px;
}

.summary-line--coupon[hidden],
.coupon-panel[hidden],
.applied-coupon[hidden],
.coupon-panel__message[hidden] {
  display: none;
}

.summary-coupon__code {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #737373;
}

.summary-line--coupon > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: none;
}

.summary-line--coupon > strong {
  line-height: 22px;
}

.coupon-tag-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  transform: rotateY(180deg);
}

.coupon-panel {
  margin: 0;
  padding: 15px 0 0;
  border-top: 1px solid #eee;
  font-size: 15px;
}

.coupon-panel__controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.coupon-panel input,
.coupon-panel button {
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  border: 1px solid #d5d5d5;
  border-radius: 5px;
  font: inherit;
}

.coupon-panel input:focus {
  border-color: #006eff;
  outline: 0;
  box-shadow: 0 0 0 2px #006effb5;
}

.coupon-panel button {
  padding-inline: 22px;
  border-color: #006eff;
  background: #006eff;
  color: #fff;
  font-weight: 400;
  cursor: pointer;
}

.coupon-panel button:hover {
  border-color: #0058cc;
  background: #0058cc;
}

.coupon-panel button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.applied-coupon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 20px;
  border-radius: 5px;
  background: #7171711c;
  color: #717171;
}

.applied-coupon strong {
  font-weight: 400;
}

.applied-coupon button {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #717171;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.applied-coupon button:hover {
  border: 0;
  background: transparent;
  color: #000;
}

.coupon-panel__message {
  margin: 8px 0 0;
  color: #087a37;
  font-size: 12px;
}

.coupon-panel__message--error {
  color: #8a1717;
}

.checkout-message {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.4;
}

.checkout-message--error {
  border: 1px solid #e3a5a5;
  background: #fff1f1;
  color: #8a1717;
}

.checkout-message--success {
  border: 1px solid #8bceb6;
  background: #edfdf6;
  color: #0c6b4a;
}

/* Sits under the error the one time it is shown, so a failed startup has something to press
   instead of a disabled button and an instruction to refresh. Deliberately not styled like
   .order-button: it is not the purchase, and reading as the purchase would be a worse lie than
   the dead end it replaces. */
.checkout-retry {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid var(--purple);
  border-radius: 3px;
  background: #fff;
  color: var(--purple);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.checkout-retry[hidden] {
  display: none;
}

.order-button {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 17px 8px;
  border: 0;
  border-radius: 3px;
  background: var(--green);
  color: #f6f9fe;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.order-button:hover {
  background: #0da86f;
}

.order-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.secure-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 10px;
  padding: 10px;
  color: #4a4a4a;
  text-align: left;
}

.secure-row__lock {
  font-size: 23px;
}

.secure-row span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secure-row small {
  color: #777;
  font-size: 11px;
}

.money-back {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}

.money-back img {
  width: 80px;
}

.money-back p {
  margin: 0;
  color: #040404;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.5px;
}

.statement-note {
  margin: 10px 0 0;
  padding: 5px;
  color: #252a32;
  font-size: 14px;
  line-height: 1;
  text-align: center;
}

.social-proof {
  container-type: inline-size;
  margin: 10px 5px 30px;
  text-align: center;
}

.social-proof h2 {
  margin: 0 5px 10px;
  padding: 5px 0;
  color: #000;
  font-size: 20px;
  line-height: 1.3;
}

/* These three were one 1080px PNG cut out of the source funnel — a screenshot of a
   Facebook thread, transparent so it sat on the page's cream. Re-exporting it to say
   "Maria" instead of "Marie" dropped the alpha channel, which composited the matte
   onto black, and no page background can hide that. As markup it cannot happen again,
   the copy is editable, and the five WebPs left over weigh 9 KB against the PNG's 80 KB.

   Every length below is the pixel it measures in that 1080px screenshot, times `--u`.
   That is the whole reason this scales: an image sized `width: 100%` shrinks its type
   along with its box, and this column is 565px beside the form, 330px at the narrowest
   two-column width, and full-bleed under 700px — three different sizes the fixed px
   this started with could only be right at one of. `cqi` is the container's own inline
   size, not the viewport's, so the block tracks the column rather than the window and
   the awkward 700–1170px band where the column is narrower than a phone comes out
   right without a breakpoint of its own. Container queries need a newer browser than
   plain px, but `:has()` above already needs a newer one than these. */
.fb-comment {
  --u: calc(100cqi / 1080);
  display: flex;
  gap: calc(15 * var(--u));
  margin-bottom: calc(31 * var(--u));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-align: left;
}

.fb-comment:last-child {
  margin-bottom: 0;
}

.fb-comment__avatar {
  flex: none;
  width: calc(82 * var(--u));
  height: calc(82 * var(--u));
  border-radius: 50%;
  object-fit: cover;
}

.fb-comment__body {
  min-width: 0;
  flex: 1;
}

.fb-comment__bubble {
  position: relative;
  padding: calc(18 * var(--u)) calc(28 * var(--u));
  border-radius: calc(16 * var(--u));
  background: #f0f2f5;
  color: #000;
  font-size: calc(30 * var(--u));
  line-height: calc(45.5 * var(--u));
}

.fb-comment__bubble strong {
  font-weight: 700;
}

.fb-comment__bubble p {
  margin: 0;
}

/* Half in, half out of the bubble's bottom-right corner, the way the reaction count
   hangs on a real comment. Absolute so the overhang costs the flow nothing — the
   Like/Reply row below only has to clear the bubble itself. */
.fb-comment__reactions {
  position: absolute;
  right: calc(2 * var(--u));
  bottom: calc(-29 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(11 * var(--u));
  padding: calc(2 * var(--u)) calc(17 * var(--u)) calc(2 * var(--u)) calc(15 * var(--u));
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px #0003;
  color: #65676b;
  font-size: calc(29 * var(--u));
  line-height: calc(47 * var(--u));
}

.fb-comment__reactions img {
  width: auto;
  height: calc(47 * var(--u));
}

.fb-comment__body footer {
  display: flex;
  gap: calc(23 * var(--u));
  padding: calc(11 * var(--u)) 0 0 calc(28 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: calc(40 * var(--u));
}

.fb-comment__body footer b {
  color: #676767;
}

.fb-comment__body footer span {
  color: #727272;
}

/* The gradient is a 1600px square, and `100% auto` sizes it to the section's width —
   1280px wide means 1280px tall, of which this strip shows only the top slice. So the
   padding here is not spacing, it is how much of the image gets revealed: at the 50px
   and 160px min-height this carried, the slice was 160px against the source funnel's
   63px, and two and a half times more of a pastel wash stops reading as a tinted rule
   between two sections and starts reading as a block of colour. The heading is what
   sets that height, so its size belongs to this decision rather than to taste — these
   are the source's numbers, and they add up to the same 63px. */
.reviews-heading {
  padding: 15px 5px;
  background: url("./assets/checkout/1730361886-image-backgorund.webp") center top / 100% auto no-repeat;
  text-align: center;
}

.reviews-heading h2 {
  margin: 0;
  color: #000;
  font-size: 25px;
  line-height: 1.3;
  letter-spacing: 0.5px;
}

.reviews {
  width: min(100%, 1170px);
  margin: 0 auto;
  padding: 0 10px 30px;
}

.reviews__score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 20px 0 10px;
  font-size: 18px;
}

.reviews__score img {
  width: 100px;
}

.reviews__score p {
  margin: 0;
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.review-card {
  overflow: hidden;
  margin-bottom: 18px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(43, 24, 48, 0.12);
}

.review-card__cover {
  width: 100%;
  aspect-ratio: 1.75 / 1;
  object-fit: cover;
}

.review-card__body {
  padding: 15px;
  color: #303030;
  line-height: 1.45;
}

.review-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.25;
}

.review-card p {
  margin-bottom: 12px;
}

.review-card__author {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.review-card__author img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}

.review-card__author span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.review-card__author b {
  color: #eb6300;
  font-size: 13px;
}

.review-card__body > small {
  color: #767676;
}

@media (max-width: 700px) {
  .sale-bar__top img {
    margin-left: 0;
  }

  .sale-bar__top p {
    padding-right: 5px;
    font-size: 17px;
  }

  .intro__spots {
    font-size: 15px;
  }

  .intro__guarantee {
    font-size: 14px;
  }

  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .panel--sticky {
    position: static;
  }

  .step-title {
    font-size: 16px;
  }

  .birth-date__inputs {
    gap: 10px;
  }

  .birth-date__inputs input,
  .birth-date__inputs select {
    padding-right: 10px;
    padding-left: 10px;
  }

  .birth-date__inputs select {
    padding-right: 28px;
    background-position: right 9px center;
    background-size: 12px auto;
  }

  .products {
    padding: 8px;
  }

  .product {
    grid-template-columns: 20px 1fr 87px;
    gap: 6px;
    padding-right: 7px;
    padding-left: 7px;
  }

  .product__name {
    font-size: 12px;
  }

  .product__price s,
  .product__price strong {
    font-size: 15px;
  }

  .order-summary {
    display: none;
  }

  .summary-title {
    display: none;
  }

  .coupon-enabled .summary-title,
  .coupon-enabled .order-summary {
    display: block;
  }

  .social-proof h2 {
    font-size: 18px;
  }

  .reviews-heading h2 {
    font-size: 18px;
  }

  .reviews__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------------------------------------------------------------------------
   Hosted Shopify checkout arm
   ---------------------------------------------------------------------------
   When the server routes this session to hosted Shopify checkout, step 3 becomes a
   payment step rather than an order summary: Shopify takes the card on its own domain,
   so the page's job is the total, one confident call to action, and the wallets Shopify
   actually offers. Everything here is inert until #payment-panel gains .panel--hosted,
   which only checkout.js sets and only from the server's resolved provider. */

.hosted-only,
.hosted-only-inline {
  display: none;
}

/* ---------------------------------------------------------------------------
   Inline Stripe card arm
   ---------------------------------------------------------------------------
   The opposite trade from the Shopify arm above: instead of handing the buyer to another
   domain, the card fields sit inside the form and the existing green button charges them
   where they stand. Stripe owns the fields themselves — they are iframes, which is what
   keeps card data out of this page — so everything here styles the space around them and
   the appearance API in checkout.js styles their insides to match. Inert until
   #payment-panel gains .panel--stripe. */

.stripe-only {
  display: none;
}

.panel--stripe .stripe-only {
  display: block;
}

/* Razorpay is a resolved arm here rather than the page's default state. Its chrome used to show
   from first paint and be taken away again when the card fields mounted, which is a page visibly
   changing its mind about how it takes money — so all three arms now wait to be named, and the
   panel is bare until the config call answers. `flex` because .secure-row is the only element
   wearing this class and it is a row; the other two arms reveal blocks. */
.razorpay-only {
  display: none;
}

.panel--razorpay .razorpay-only {
  display: flex;
}

/* The badge strip belongs to both arms that show a payment step, so it is hidden here rather
   than by .hosted-only and revealed by whichever panel is on. Two arm-scoped rules over two
   copies of the image is what put the badges on two lines: .panel--stripe .payment-badges beats
   the bare .hosted-only that was meant to keep the other one hidden. */
.payment-badges {
  display: none;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 12px auto 0;
  opacity: 0.85;
}

.panel--hosted .payment-badges,
.panel--stripe .payment-badges {
  display: block;
}

.payment-method {
  margin: 0;
}

.payment-method .step-subtitle {
  margin: 0 5px 10px;
  color: #5f5964;
  font-size: 12px;
  font-weight: 400;
}

/* Matches the panel's own inset so the mounted fields line up with the form fields above
   them rather than sitting in their own indented block. No min-height: the placeholder below
   holds this space until the fields exist, and reserving it here as well would leave a blank
   band under the placeholder for as long as the wait lasts. */
#stripe-payment-element {
  margin: 0 5px 12px;
}

/* Three bars the size of the fields Stripe is about to draw: card number, expiry and CVC, then
   postal code. Nothing here imitates an input the buyer could type into — the real fields are
   iframes and this is only their footprint. */
.card-skeleton {
  display: none;
  margin: 0 5px 12px;
}

.panel--stripe .card-skeleton {
  display: grid;
  gap: 14px;
}

/* Same specificity as the rule above, so this only wins by coming after it: the ready state is
   an addition to .panel--stripe rather than a replacement for it. */
.panel--stripe-ready .card-skeleton {
  display: none;
}

.card-skeleton span {
  height: 56px;
  border-radius: 3px;
  background: rgba(65, 0, 100, 0.06);
  animation: card-skeleton-pulse 1.1s ease-in-out infinite alternate;
}

@keyframes card-skeleton-pulse {
  from {
    opacity: 0.55;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-skeleton span {
    animation: none;
  }
}

.panel--hosted .hosted-only {
  display: block;
}

.panel--hosted .hosted-only-inline {
  display: inline;
}

/* The narrow-screen rules hide the summary because the product list already prices every
   reading. The hosted arm needs it at every width: the total, the strike-through, and the
   saving are the whole payment step once Shopify takes the card elsewhere. */
.panel--hosted .order-summary {
  display: block;
  margin-top: 16px;
  padding: 12px 4px;
  border: 0;
  border-radius: 8px;
  background: rgba(65, 0, 100, 0.03);
}

.panel--hosted .step-subtitle {
  margin: 0 0 6px;
  color: #7b6b8a;
  font-size: 12px;
  font-weight: 400;
}

.panel--hosted .summary-line,
.panel--hosted .summary-total {
  color: #5a4a6a;
}

.panel--hosted .summary-line--compare {
  display: flex;
  border-top: 0;
  color: #9b8aaa;
}

.panel--hosted .summary-line--compare s {
  color: #9b8aaa;
}

.panel--hosted .summary-total {
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(65, 0, 100, 0.11);
  color: #2a0040;
  font-weight: 700;
}

.panel--hosted .summary-total strong {
  margin-left: auto;
  color: #fb0898;
  font-size: 20px;
}

.summary-save {
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* The shield sits in a pseudo-element because setBusy() rewrites the button's text, and
   a real child element would be destroyed on the first press. */
.panel--hosted .order-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
  padding: 16px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fb0898, #c40079);
  box-shadow: 0 6px 28px rgba(251, 8, 152, 0.32);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 0.15s, box-shadow 0.2s;
}

.panel--hosted .order-button::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: currentcolor;
  /* Shield-with-tick, matching the trust badge below it. */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3.5v5c0 4.5-3.5 8-8 9.5C7.5 19.5 4 16 4 11.5v-5L12 3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.panel--hosted .order-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #fb0898, #c40079);
  box-shadow: 0 10px 36px rgba(251, 8, 152, 0.4);
  transform: translateY(-1px);
}

.panel--hosted .order-note {
  margin: 10px 0 0;
  color: #7b6b8a;
  font-size: 12px;
  text-align: center;
}

.panel--hosted .order-note strong {
  color: #5a4a6a;
}

.panel--hosted .trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
  border: 1px solid rgba(65, 0, 100, 0.11);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.trust-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 8px;
  color: #7b6b8a;
  font-size: 11px;
  /* 700 rather than 600 because this rule was the only thing on the page asking for the semibold
     cut, and one weight is a 35 KB download racing the card SDK down the same connection. The bold
     cut is already on its way for the headings; at 11px the two are all but indistinguishable. */
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.trust-badge + .trust-badge::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  width: 1px;
  height: 70%;
  background: linear-gradient(to bottom, transparent, rgba(192, 132, 232, 0.3), transparent);
}

.trust-badge svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #410064;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}