/* ============================================================================
   ORCHID REDESIGN — PHASE 3: PURCHASE FLOW
   Cart · wishlist · checkout · order confirmed · payment failed · invoice · track

   Ported from "Orchid Storefront.dc.html" (isCart, isWish, isCheckout, isDone,
   isFail, isInvoice, isTrack) and "Orchid Widgets.dc.html" (components 30–35,
   43, 44, 45).

   WHY THIS IS A SEPARATE FILE, not an append to style.css:
   Phase 2 (shop + product) is being written in a parallel session against the
   end of style.css. Two sessions appending to the same file is a lost-update
   waiting to happen, so this layer stands alone and is registered in theme.json
   after "style" — later in source order, so it wins ties against the base layer.
   It adds no tokens of its own; every value below resolves through the --o-*
   tokens declared on .orchid in style.css, which is what keeps the Storefront
   hub's colour and size controls working on these screens too.

   Rules this layer obeys, same as Phase 1:
     - logical properties only (no left/right/margin-left/text-align:left)
     - border-radius is 0, 999px or 50% — nothing else
     - no media queries: sizing is clamp(), layout is auto-fit
     - design cqi -> vw at page level, the numbers themselves unchanged
     - every text element carries an explicit colour
     - no `font:` SHORTHAND on any selector that can match an .o-i span, or the
       shorthand resets font-family and Material Symbols prints its ligature
       name as literal text (see the :not(.o-i) guards below)
   ============================================================================ */

/* Referenced by the design's live-shipment dot but never defined in Phase 1, so
   the animation silently did nothing. Defined here because Phase 3 uses it. */
@keyframes orchid-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

@media (prefers-reduced-motion: reduce) {
  .orchid .orchid-track__pulse { animation: none; }
}


/* ---------------------------------------------------------------------------
   Per-section tenant controls.

   The standing rule is that every section exposes background, text colour and
   size, in the pane that owns it — these three live in Content & Labels, next
   to the breadcrumb. Declared on .orchid so the Storefront hub's injected block
   (which also targets .orchid, and renders after this file) can override them,
   and each defaults to the palette token it resolves to today, so an untouched
   shop stores nothing and renders byte-identical to the design.
   --------------------------------------------------------------------------- */
.orchid {
  --o-cart-bg:     var(--o-cream);
  --o-cart-text:   var(--o-ink);
  --o-summary-bg:  var(--o-cream-2);
  --o-cart-scale:  1;
}


/* ---------------------------------------------------------------------------
   Shared: the Pattern C panes used by cart, checkout and order detail.
   The shell itself (flex-wrap, flex:999 / flex:1 1 246px) comes from Phase 1;
   only the padding and the aside's surface are per-screen.
   --------------------------------------------------------------------------- */
.orchid .o-shell { align-items: flex-start; }

.orchid .orchid-bag,
.orchid .orchid-checkout {
  background: var(--o-cart-bg);
  color: var(--o-cart-text);
}

.orchid .orchid-bag__content,
.orchid .orchid-checkout__content {
  padding-block: calc(clamp(18px, 3.06vw, 44px) * var(--o-cart-scale))
                 calc(clamp(29px, 4.86vw, 70px) * var(--o-cart-scale));
  padding-inline: clamp(20px, 3.33vw, 48px);
  color: var(--o-cart-text);
}

.orchid .orchid-summary,
.orchid .orchid-checkout__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: calc(clamp(18px, 3.06vw, 44px) * var(--o-cart-scale))
                 calc(clamp(29px, 4.86vw, 70px) * var(--o-cart-scale));
  padding-inline: clamp(17px, 2.78vw, 40px);
  border-inline-start: 1px solid rgba(var(--o-ink-rgb), .12);
  background: var(--o-summary-bg);
  color: var(--o-cart-text);
}


/* ---------------------------------------------------------------------------
   Cart + wishlist header
   --------------------------------------------------------------------------- */
.orchid .orchid-bag__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
}

/* NEVER put calc() inside a `font:` shorthand — the /line-height separator next
   to a math function has a parser-bug history, and a shorthand that fails to
   parse takes font-family down with it. Shorthand first, then the scaled
   font-size as a longhand. Same pattern as the eleven Phase 1 rules. */
.orchid .orchid-bag__title,
.orchid .orchid-checkout__title {
  margin: 0;
  font: 300 clamp(22px, 2.78vw, 40px)/1 var(--o-serif);
  font-size: calc(clamp(22px, 2.78vw, 40px) * var(--o-cart-scale));
  letter-spacing: -.015em;
  color: var(--o-cart-text);
}

.orchid .orchid-bag__count {
  font: 400 14px/1 var(--o-sans);
  color: var(--o-muted-2);
}

/* The wishlist is a full-width section, so its header carries the rule the
   design draws under it; the cart's header does not. */
.orchid .orchid-wish__grid { padding-block-start: 32px; }

.orchid .orchid-bag__content--wish .orchid-bag__head {
  padding-block-end: 24px;
  border-block-end: 1px solid rgba(var(--o-ink-rgb), .12);
}


/* ---------------------------------------------------------------------------
   Cart table — component 30.

   Wide tables scroll, they do not crush: the wrapper scrolls and the inner grid
   holds a min-width, so on a phone the customer swipes the table rather than
   reading four columns squeezed into slivers. 600px here, not the 620px Phase 1
   set for the invoice.
   --------------------------------------------------------------------------- */
.orchid .orchid-bag__scroll { margin-block-start: 22px; }
.orchid .orchid-bag__scroll > * { min-width: 600px; }

.orchid .orchid-bag__row {
  display: grid;
  grid-template-columns: 1fr 120px 150px 120px;
  gap: 16px;
  align-items: center;
  padding-block: 22px;
  border-block-end: 1px solid rgba(var(--o-ink-rgb), .10);
}

.orchid .orchid-bag__row--head {
  padding-block: 22px 14px;
  border-block-end: 1px solid var(--o-bd-card);
}

.orchid .orchid-bag__th {
  font: 500 10px/1 var(--o-sans);
  text-transform: uppercase;
  color: var(--o-muted-2);
}
[dir="ltr"] .orchid .orchid-bag__th { letter-spacing: .2em; }

.orchid .orchid-bag__product {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.orchid .orchid-bag__thumb {
  flex: none;
  width: 96px;
  height: 118px;
  overflow: hidden;
  background: var(--o-cream-3);
}
.orchid .orchid-bag__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.orchid .orchid-bag__info {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.orchid .orchid-bag__name {
  font: 500 17px/1.3 var(--o-sans);
  color: var(--o-ink);
  text-decoration: none;
}
.orchid a.orchid-bag__name:hover { color: var(--o-moss); }

.orchid .orchid-bag__variant {
  font: 400 13px/1.4 var(--o-sans);
  color: var(--o-muted-2);
}

.orchid .orchid-bag__remove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-block-start: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--o-terracotta);
  font-family: var(--o-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: color .22s ease;
}
.orchid .orchid-bag__remove:hover { color: var(--o-ink); }
.orchid .orchid-bag__remove .o-i { font-size: 15px; color: currentColor; }

.orchid .orchid-bag__price {
  font: 500 15px/1 var(--o-serif);
  color: var(--o-ink);
  white-space: nowrap;
}

.orchid .orchid-bag__line {
  font: 500 17px/1 var(--o-serif);
  color: var(--o-ink);
  white-space: nowrap;
}

/* Quantity stepper */
.orchid .orchid-bag__qty {
  display: flex;
  align-items: center;
  width: 120px;
  border: 1px solid var(--o-bd-cta);
  background: var(--o-cream);
}
.orchid .orchid-bag__qty .substract,
.orchid .orchid-bag__qty .plus {
  width: 38px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .22s ease;
}
.orchid .orchid-bag__qty .substract:hover,
.orchid .orchid-bag__qty .plus:hover { background: var(--o-cream-3); }
.orchid .orchid-bag__qty .o-i { font-size: 17px; color: var(--o-ink); }

.orchid .orchid-bag__qty .quantity-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font: 500 15px/1 var(--o-serif);
  color: var(--o-ink);
  direction: ltr;
  padding: 0;
  -moz-appearance: textfield;
}
.orchid .orchid-bag__qty .quantity-input:focus { outline: none; }
.orchid .orchid-bag__qty .quantity-input::-webkit-outer-spin-button,
.orchid .orchid-bag__qty .quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.orchid .orchid-bag__qty--fixed { justify-content: center; height: 42px; }
.orchid .orchid-bag__qty-static {
  font: 500 15px/1 var(--o-serif);
  color: var(--o-ink);
}

.orchid .orchid-bag__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-block-start: 30px;
}
.orchid .orchid-bag__keep,
.orchid .orchid-bag__clear {
  border: 1px solid var(--o-bd-cta);
  text-decoration: none;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.orchid .orchid-bag__keep:hover { background: var(--o-cream-3); color: var(--o-ink); }
.orchid .orchid-bag__clear { color: var(--o-terracotta); border-color: rgba(168, 91, 60, .35); }
.orchid .orchid-bag__clear:hover { background: var(--o-terracotta); color: var(--o-cream); }
.orchid .orchid-bag__clear .o-i { font-size: 17px; color: currentColor; }
.orchid .orchid-bag__keep .o-i { font-size: 17px; color: currentColor; }


/* ---------------------------------------------------------------------------
   Wishlist grid — component 43
   --------------------------------------------------------------------------- */
.orchid .orchid-wish__grid { gap: var(--o-gap-tight); }

.orchid .orchid-wish__card {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.orchid .orchid-wish__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--o-cream-3);
}
.orchid .orchid-wish__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s ease;
}
.orchid .orchid-wish__media:hover img { transform: scale(1.07); }
.orchid .orchid-wish__media a { display: block; height: 100%; }

.orchid .orchid-wish__remove {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: rgba(251, 249, 243, .94);
  color: var(--o-ink);
  cursor: pointer;
  transition: background .22s ease, color .22s ease;
}
.orchid .orchid-wish__remove:hover { background: var(--o-terracotta); color: var(--o-cream); }
.orchid .orchid-wish__remove .o-i { font-size: 17px; color: currentColor; }

.orchid .orchid-wish__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-start: 36px;
  padding-block-start: 22px;
  border-block-start: 1px solid rgba(var(--o-ink-rgb), .12);
  font: 400 13px/1.4 var(--o-sans);
  color: var(--o-muted-2);
}
.orchid .orchid-wish__note .o-i { font-size: 19px; color: var(--o-sage); }


/* ---------------------------------------------------------------------------
   Order summary — component 31.

   Two vocabularies, one look. The cart's summary is markup this phase owns
   (.orchid-summary__*); the checkout's is the platform's ul/li skeleton, which
   the AJAX fragments re-emit and the page script addresses by class, so it is
   restyled where it stands rather than reshaped.
   --------------------------------------------------------------------------- */
.orchid .orchid-summary__kicker { color: var(--o-muted-2); }
[dir="ltr"] .orchid .orchid-summary__kicker { letter-spacing: .2em; }

.orchid .orchid-summary__rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block-end: 18px;
  border-block-end: 1px solid var(--o-bd-card);
}

.orchid .orchid-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.orchid .orchid-summary__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 400 14px/1.4 var(--o-sans);
  color: var(--o-ink-3);
}
.orchid .orchid-summary__label .o-i { font-size: 16px; color: var(--o-moss); }

.orchid .orchid-summary__value {
  font: 500 15px/1 var(--o-serif);
  color: var(--o-ink);
  white-space: nowrap;
}
.orchid .orchid-summary__value--muted {
  font-family: var(--o-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--o-muted-2);
  white-space: normal;
  text-align: end;
}
.orchid .orchid-summary__row--save .orchid-summary__label,
.orchid .orchid-summary__row--save .orchid-summary__value { color: var(--o-moss); }

.orchid .orchid-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.orchid .orchid-summary__total-label {
  font: 500 16px/1 var(--o-sans);
  color: var(--o-ink);
}
.orchid .orchid-summary__total-value {
  font: 400 clamp(15px, 1.94vw, 28px)/1 var(--o-serif);
  color: var(--o-ink);
  white-space: nowrap;
}

.orchid .orchid-summary__note {
  font: 400 12px/1.6 var(--o-sans);
  color: var(--o-muted-2);
}

.orchid .orchid-summary__cta { margin-block-start: 4px; }

.orchid .orchid-summary__secure,
.orchid .orchid-checkout__secure {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 400 12px/1.5 var(--o-sans);
  color: var(--o-muted);
}
.orchid .orchid-checkout__secure .o-i { font-size: 18px; color: var(--o-moss); }


/* ---------------------------------------------------------------------------
   Empty state — cart, wishlist and checkout all fall through to this.
   --------------------------------------------------------------------------- */
.orchid .orchid-bag-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.orchid .orchid-bag-empty__icon {
  font-size: 44px;
  color: var(--o-sage);
}
.orchid .orchid-bag-empty__body { max-width: 46ch; }
.orchid .orchid-bag-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block-start: 6px;
}


/* ---------------------------------------------------------------------------
   Checkout stepper — component 32. Also reused by the confirmed screen's
   order-progress row, which is the same atom at a larger circle.
   --------------------------------------------------------------------------- */
.orchid .orchid-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 1.81vw, 26px);
  padding-block: 22px;
  padding-inline: var(--o-sec-pi);
  background: var(--o-cream-2);
  border-block-end: 1px solid rgba(var(--o-ink-rgb), .10);
}

.orchid .orchid-steps__step {
  display: flex;
  align-items: center;
  gap: 10px;
}

.orchid .orchid-steps__n {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--o-bd-input);
  background: transparent;
  color: var(--o-muted-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--o-serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.orchid .orchid-steps__n .o-i { font-size: 15px; color: currentColor; }

.orchid .orchid-steps__label {
  font: 500 13px/1 var(--o-sans);
  color: var(--o-muted-2);
  text-decoration: none;
}

.orchid .orchid-steps__step.is-done .orchid-steps__n {
  background: var(--o-moss);
  border-color: var(--o-moss);
  color: var(--o-cream);
}
.orchid .orchid-steps__step.is-done .orchid-steps__label { color: var(--o-ink-2); }

.orchid .orchid-steps__step.is-current .orchid-steps__n {
  background: var(--o-ink);
  border-color: var(--o-ink);
  color: var(--o-cream);
}
.orchid .orchid-steps__step.is-current .orchid-steps__label { color: var(--o-ink); }

.orchid .orchid-steps__rule {
  width: 46px;
  height: 1px;
  background: rgba(var(--o-ink-rgb), .20);
}

/* Order-progress variant: bigger circle, label stacked underneath. */
.orchid .orchid-steps--order {
  justify-content: flex-start;
  padding: 0;
  gap: 14px;
  background: transparent;
  border: 0;
  margin-block-start: 14px;
}
.orchid .orchid-steps--order .orchid-steps__step { flex-direction: column; gap: 9px; }
.orchid .orchid-steps--order .orchid-steps__n { width: 30px; height: 30px; }
.orchid .orchid-steps--order .orchid-steps__n .o-i { font-size: 17px; }
.orchid .orchid-steps--order .orchid-steps__label {
  font-weight: 400;
  font-size: 11px;
  color: var(--o-muted);
  white-space: nowrap;
}
.orchid .orchid-steps--order .orchid-steps__rule { margin-block-end: 20px; }
.orchid .orchid-steps--order.is-cancelled .orchid-steps__step.is-done .orchid-steps__n {
  background: var(--o-terracotta);
  border-color: var(--o-terracotta);
}


/* ---------------------------------------------------------------------------
   Checkout form — Pattern B field pairs.

   .single-input / .label-title / .form--control are the platform's own field
   markup, emitted here AND by themes/components/checkout-country-input and
   state-city-input, which are shared across all eight themes and must not be
   edited. Styling them from here is what lets those two drop into the grid
   untouched. Their Bootstrap margin utilities are zeroed so the grid gap is the
   only thing setting rhythm.
   --------------------------------------------------------------------------- */
.orchid .orchid-checkout__content {
  display: flex;
  flex-direction: column;
  gap: var(--o-gap-loose);
}

.orchid .orchid-checkout__block {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
[dir="ltr"] .orchid .orchid-checkout__block > .o-kicker { letter-spacing: .2em; }

.orchid .orchid-checkout__errors:empty { display: none; }

.orchid .orchid-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
}

.orchid .orchid-fields .single-input,
.orchid .orchid-fields .form-group {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
}

.orchid .orchid-fields .label-title,
.orchid .orchid-fields label {
  margin: 0 0 8px;
  font: 400 12px/1 var(--o-sans);
  color: var(--o-muted-2);
  text-transform: none;
  letter-spacing: normal;
}

.orchid .form--control,
.orchid .orchid-fields .form-control,
.orchid .orchid-track__form .form--control {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--o-bd-input);
  border-radius: 0;
  background: var(--o-cream);
  font: 400 14px/1.4 var(--o-sans);
  color: var(--o-ink);
  box-shadow: none;
  transition: border-color .22s ease;
}
.orchid .form--control::placeholder,
.orchid .orchid-fields .form-control::placeholder { color: var(--o-muted-2); opacity: 1; }
.orchid .form--control:hover,
.orchid .form--control:focus,
.orchid .orchid-fields .form-control:hover,
.orchid .orchid-fields .form-control:focus {
  border-color: var(--o-moss);
  outline: none;
  box-shadow: none;
}
.orchid .form--message { min-height: 104px; resize: vertical; }
.orchid select.form--control {
  appearance: none;
  background-image: none;
  cursor: pointer;
}

/* The country field hides itself when a shop sells to one country only. */
.orchid .orchid-fields .d-none { display: none !important; }

.orchid .orchid-checkout__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font: 500 13px/1 var(--o-sans);
  color: var(--o-moss);
  text-decoration: none;
  cursor: pointer;
}
.orchid .orchid-checkout__toggle:hover { color: var(--o-ink); }
.orchid .orchid-checkout__toggle .o-i { font-size: 18px; color: currentColor; }

/* Collapsible blocks.
   Three different handlers open these and they do NOT agree on where .active
   lands, so both forms are honoured rather than guessed at:
     assets/js/main.js  .click-open-form  -> .checkout-form-open            (the panel)
                        .click-open-form3 -> .checkout-address-form-wrapper (the panel)
     checkout_page      .create-accounts  -> .create-account-wrapper .checkout-form-open
   main.js also toggles .active on the trigger itself, hence the sibling
   selectors — the panels are adjacent to their triggers in both partials. */
.orchid .checkout-form-open,
.orchid .checkout-address-form-wrapper { display: none; }

.orchid .checkout-form-open.active,
.orchid .checkout-address-form-wrapper.active,
.orchid .create-accounts.active + .checkout-form-open,
.orchid .shift-another-address.active + .checkout-address-form-wrapper { display: block; }

.orchid .checkout-address-form-wrapper { padding-block-start: 4px; }

/* The gate variant is the whole column, never collapsed. */
.orchid .orchid-signin--gate { display: block; }


/* ---------------------------------------------------------------------------
   Checkout sign-in
   --------------------------------------------------------------------------- */
.orchid .orchid-signin__trigger {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font: 400 13px/1.5 var(--o-sans);
  color: var(--o-ink-3);
}
.orchid .orchid-signin__trigger .o-i { font-size: 18px; color: var(--o-sage); }
.orchid .orchid-signin__trigger a { color: var(--o-moss); text-decoration: none; }
.orchid .orchid-signin__trigger a:hover { color: var(--o-ink); }

.orchid .orchid-signin {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--o-card-p);
  border: 1px solid var(--o-bd-card);
  background: var(--o-cream);
}

.orchid .orchid-signin__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.orchid .orchid-signin__remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 400 13px/1 var(--o-sans);
  color: var(--o-ink-2);
  cursor: pointer;
}
.orchid .orchid-signin__links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
}
.orchid .orchid-signin__links a {
  font: 400 13px/1 var(--o-sans);
  color: var(--o-moss);
  text-decoration: none;
}
.orchid .orchid-signin__links a:hover { color: var(--o-ink); }
.orchid .orchid-signin__submit { align-self: flex-start; }


/* ---------------------------------------------------------------------------
   Payment method — component 33.

   Everything inside .payment-card is emitted by PaymentGatewayRenderHelper,
   which also ships its own <style> for the wallet and loyalty cards. Those
   rules are single-class (0,1,0); the two-class selectors here outrank them
   regardless of source order, which is why this works without !important.
   Restyled where it stands — never rebuilt.
   --------------------------------------------------------------------------- */
.orchid .orchid-pay { gap: 14px; }

.orchid .checkbox-inlines {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--o-bd-input);
  background: var(--o-cream);
  transition: border-color .22s ease;
}
.orchid .checkbox-inlines:hover { border-color: var(--o-moss); }
.orchid .checkbox-inlines .check-input {
  width: 17px;
  height: 17px;
  flex: none;
  margin: 0;
  accent-color: var(--o-moss);
  cursor: pointer;
}
.orchid .checkbox-inlines .checkbox-label {
  margin: 0;
  font: 500 14px/1.5 var(--o-sans);
  color: var(--o-ink);
  cursor: pointer;
}
.orchid .checkbox-inlines .checkbox-label a { color: var(--o-moss); text-decoration: underline; }

.orchid .payment-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.orchid .payment-gateway-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.orchid .payment-gateway-wrapper ul li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 52px;
  margin: 0;
  padding: 6px;
  overflow: hidden;
  border: 1px solid var(--o-bd-input);
  background: var(--o-cream);
  cursor: pointer;
  transition: border-color .22s ease, background .22s ease;
}
.orchid .payment-gateway-wrapper ul li:hover { border-color: var(--o-moss); }
.orchid .payment-gateway-wrapper ul li img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.orchid .payment-gateway-wrapper ul li.selected {
  border-color: var(--o-ink);
  background: var(--o-cream-3);
}
/* The tick corner. Squared, like every other badge in this design. */
.orchid .payment-gateway-wrapper ul li::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 14px;
  height: 14px;
  background: var(--o-moss);
  opacity: 0;
  transition: opacity .22s ease;
}
.orchid .payment-gateway-wrapper ul li.selected::after { opacity: 1; }

/* Wallet + loyalty cards from the helper. */
.orchid .cw-checkout-card,
.orchid .lp-checkout-card,
.orchid #cw-checkout-card,
.orchid #lp-checkout-card {
  border-radius: 0;
  border: 1px solid var(--o-bd-input);
  background: var(--o-cream-2);
  box-shadow: none;
  color: var(--o-ink);
}
.orchid .cw-checkout-card.cw-applied,
.orchid .lp-checkout-card.lp-applied,
.orchid #cw-checkout-card.cw-applied,
.orchid #lp-checkout-card.lp-applied {
  border-color: var(--o-moss);
  background: var(--o-moss-bg);
  box-shadow: none;
}

.orchid .payment_gateway_extra_field_information_wrap .form-control { border-radius: 0; }


/* ---------------------------------------------------------------------------
   Checkout aside: item list + coupon/gift fields
   --------------------------------------------------------------------------- */
.orchid .orchid-checkout__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block-end: 20px;
  border-block-end: 1px solid var(--o-bd-card);
}

.orchid .orchid-checkout__item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.orchid .orchid-checkout__item-thumb {
  flex: none;
  width: 56px;
  height: 68px;
  overflow: hidden;
  background: var(--o-cream-3);
}
.orchid .orchid-checkout__item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.orchid .orchid-checkout__item-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.orchid .orchid-checkout__item-name {
  font: 500 14px/1.3 var(--o-sans);
  color: var(--o-ink);
}
.orchid .orchid-checkout__item-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--o-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--o-muted-2);
}
.orchid .orchid-checkout__item-meta .orchid-bag__variant { font-size: 12px; }
.orchid .orchid-checkout__item-line {
  margin-inline-start: auto;
  font: 500 14px/1 var(--o-serif);
  color: var(--o-ink);
  white-space: nowrap;
}

.orchid .orchid-checkout__codes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.orchid .orchid-code-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.orchid .orchid-code-row .form--control { flex: 1 1 140px; padding: 12px 14px; }
.orchid .btn-submit {
  padding: 12px 20px;
  border: 0;
  border-radius: 0;
  background: var(--o-ink);
  color: var(--o-cream);
  font: 600 13px/1 var(--o-sans);
  cursor: pointer;
  transition: background .22s ease;
}
.orchid .btn-submit:hover { background: var(--o-moss); color: var(--o-cream); }
.orchid .gift-card-remove-btn { background: var(--o-terracotta); }
.orchid .gift-card-remove-btn:hover { background: var(--o-ink); }

.orchid .gift-card-info .alert,
.orchid .gift-card-error .alert {
  border-radius: 0;
  border: 0;
  padding: 12px 14px;
  font: 400 12px/1.5 var(--o-sans);
}
.orchid .gift-card-info .alert { background: var(--o-moss-bg); color: var(--o-moss-dark); }
.orchid .gift-card-error .alert { background: var(--o-terracotta-bg); color: var(--o-terracotta); }


/* ---------------------------------------------------------------------------
   The platform's totals skeleton — ul.coupon-contents-details-list.

   Restyled in place. Both markup_for_controller fragments emit exactly these
   classes, so styling them here covers the AJAX paths (address change, coupon
   apply) with no fragment edits at all — which is the only way the summary can
   survive a re-render looking the same.
   --------------------------------------------------------------------------- */
.orchid .coupon-contents-details {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.orchid .coupon-contents-details-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.orchid .coupon-contents-details-list.coupon-border {
  padding-block-end: 18px;
  border-block-end: 1px solid var(--o-bd-card);
}
.orchid .coupon-contents-details-list > h6 {
  margin: 0;
  font: 500 11px/1 var(--o-sans);
  text-transform: uppercase;
  color: var(--o-muted-2);
}
[dir="ltr"] .orchid .coupon-contents-details-list > h6 { letter-spacing: .2em; }

.orchid .coupon-contents-details-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0;
}
/* :not(.o-i) — this is a `font:` shorthand and the row can contain an icon span.
   Without the guard the shorthand resets font-family and the glyph renders as
   its literal ligature name. */
.orchid .coupon-contents-details-list-item > span:not(.o-i),
.orchid .coupon-contents-details-list-item > h6 {
  margin: 0;
  font: 400 14px/1.4 var(--o-sans);
  color: var(--o-ink-3);
}
/* The value is always the last span in the row — the script relies on that, and
   so does this. */
.orchid .coupon-contents-details-list-item > span:not(.o-i):last-child {
  font-family: var(--o-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--o-ink);
  white-space: nowrap;
  text-align: end;
}

.orchid .coupon-contents-details-list-item.coupon-price > span:not(.o-i) { color: var(--o-moss); }

.orchid .coupon-contents-details-list-item.price-total { align-items: baseline; }
.orchid .coupon-contents-details-list-item.price-total > h6 {
  font-size: 16px;
  font-weight: 500;
  color: var(--o-ink);
}
.orchid .coupon-contents-details-list-item.price-total > span:not(.o-i) {
  font-family: var(--o-serif);
  font-size: clamp(15px, 1.94vw, 28px);
  font-weight: 400;
  color: var(--o-ink);
  white-space: nowrap;
}

/* Shipping-method radios inside the fragment. */
.orchid .coupon-radio-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.orchid .coupon-radio-item input[type="radio"] {
  width: 17px;
  height: 17px;
  margin: 0;
  flex: none;
  accent-color: var(--o-moss);
  cursor: pointer;
}
.orchid .coupon-radio-item label {
  margin: 0;
  font: 400 14px/1.4 var(--o-sans);
  color: var(--o-ink-2);
  cursor: pointer;
}

.orchid .checkout_disable { opacity: .55; }
.orchid .orchid-checkout__place {
  background: var(--o-moss);
  color: var(--o-cream);
}
.orchid .orchid-checkout__place:hover { background: var(--o-moss-dark); color: var(--o-cream); }
.orchid .orchid-checkout__agree { border: 0; padding: 0; background: transparent; }
.orchid .orchid-checkout__agree:hover { border: 0; }


/* ---------------------------------------------------------------------------
   Order confirmed — component 34 — and payment failed — component 45.
   Both are Pattern B splits with a copy pane and a media pane.
   --------------------------------------------------------------------------- */
.orchid .orchid-done,
.orchid .orchid-fail {
  border-block-end: 1px solid rgba(var(--o-ink-rgb), .10);
}

.orchid .orchid-done__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--o-gap-tight);
  padding-block: clamp(37px, 6.11vw, 88px);
  padding-inline: var(--o-sec-pi);
}
.orchid .orchid-fail__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding-block: clamp(34px, 5.56vw, 80px);
  padding-inline: var(--o-sec-pi);
}

.orchid .orchid-done__kicker,
.orchid .orchid-fail__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
[dir="ltr"] .orchid .orchid-done__kicker,
[dir="ltr"] .orchid .orchid-fail__kicker { letter-spacing: .24em; }
.orchid .orchid-done__kicker .o-i { font-size: 20px; color: var(--o-moss); }
.orchid .orchid-fail__kicker { color: var(--o-terracotta); }
.orchid .orchid-fail__kicker .o-i { font-size: 20px; color: var(--o-terracotta); }

.orchid .orchid-done__body,
.orchid .orchid-fail__body {
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--o-ink-3);
}
.orchid .orchid-fail__body { max-width: 48ch; }

.orchid .orchid-fail h1 {
  font-size: clamp(26px, 3.33vw, 48px);
  line-height: 1.08;
  max-width: 18ch;
}

/* Fact grid: a 1px gap over an ink-tinted ground makes the hairlines. */
.orchid .orchid-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(46%, 320px), 1fr));
  gap: 1px;
  margin-block-start: 10px;
  background: rgba(var(--o-ink-rgb), .12);
}
.orchid .orchid-facts--tight {
  grid-template-columns: repeat(auto-fit, minmax(min(46%, 230px), 1fr));
  max-width: 440px;
  margin-block-start: 6px;
}
.orchid .orchid-facts__cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px;
  background: var(--o-cream);
}
.orchid .orchid-facts__k {
  font: 400 11px/1 var(--o-sans);
  text-transform: uppercase;
  color: var(--o-muted-2);
}
[dir="ltr"] .orchid .orchid-facts__k { letter-spacing: .16em; }
.orchid .orchid-facts__v {
  font: 500 15px/1.3 var(--o-sans);
  color: var(--o-ink);
}
.orchid .orchid-facts__v.o-ltr {
  font-family: var(--o-serif);
  font-size: 17px;
  line-height: 1;
}

.orchid .orchid-done__actions,
.orchid .orchid-fail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 16px;
}
.orchid .orchid-done__actions .o-i { font-size: 18px; color: currentColor; }

.orchid .orchid-done__dash {
  align-self: flex-start;
  font: 400 13px/1 var(--o-sans);
  color: var(--o-moss);
  text-decoration: underline;
}

.orchid .orchid-done__media,
.orchid .orchid-fail__media {
  position: relative;
  overflow: hidden;
  background: var(--o-cream-3);
}
.orchid .orchid-done__media { min-height: clamp(372px, 41.67vw, 600px); }
.orchid .orchid-fail__media { min-height: clamp(409px, 45.83vw, 660px); }

/* The design's photograph pane. No setting holds one, so it is filled with the
   order's own product images instead of a stock placeholder. */
.orchid .orchid-done__collage {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 1px;
  background: rgba(var(--o-ink-rgb), .10);
}
.orchid .orchid-done__collage--1 { grid-template-columns: 1fr; }
.orchid .orchid-done__collage--2,
.orchid .orchid-done__collage--3,
.orchid .orchid-done__collage--4 { grid-template-columns: 1fr 1fr; }
.orchid .orchid-done__collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.orchid .orchid-done__collage--3 img:first-child { grid-column: 1 / -1; }

.orchid .orchid-fail__scrim {
  position: absolute;
  inset: 0;
  background: rgba(var(--o-ink-rgb), .34);
}

.orchid .orchid-fail__reasons {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-block-start: 10px;
}
.orchid .orchid-fail__reason {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 14px/1.7 var(--o-sans);
  color: var(--o-ink-2);
}
.orchid .orchid-fail__reason .o-bullet {
  width: 5px;
  height: 5px;
  flex: none;
  margin-block-start: 7px;
  background: var(--o-terracotta);
}
.orchid .orchid-fail__cod { align-self: flex-start; margin-block-start: 8px; }
.orchid .orchid-fail__help {
  font: 400 13px/1.6 var(--o-sans);
  color: var(--o-muted-2);
}
.orchid .orchid-fail__help a { color: var(--o-moss); text-decoration: underline; }

.orchid .orchid-fail--static {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  border: 0;
}


/* ---------------------------------------------------------------------------
   Track order — component 35
   --------------------------------------------------------------------------- */
.orchid .orchid-track__form-pane {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-block: var(--o-sec-pt) var(--o-sec-pb);
  padding-inline: var(--o-sec-pi);
}
.orchid .orchid-track__title {
  margin: 0;
  font: 300 clamp(25px, 3.19vw, 46px)/1.05 var(--o-serif);
  letter-spacing: -.02em;
  color: var(--o-ink);
}
.orchid .orchid-track__body {
  max-width: 48ch;
  color: var(--o-ink-3);
}
.orchid .orchid-track__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
  margin-block-start: 8px;
}
.orchid .orchid-track__form .single-input { display: flex; flex-direction: column; }
.orchid .orchid-track__form .label-title {
  margin: 0 0 8px;
  font: 400 12px/1 var(--o-sans);
  color: var(--o-muted-2);
}
.orchid .orchid-track__form button { align-self: stretch; margin-block-start: 4px; }

.orchid .orchid-track__state {
  display: flex;
  flex-direction: column;
  gap: var(--o-gap-tight);
  padding-block: var(--o-sec-pt) var(--o-sec-pb);
  padding-inline: var(--o-sec-pi);
  background: var(--o-cream-2);
  border-inline-start: 1px solid rgba(var(--o-ink-rgb), .12);
  min-height: clamp(347px, 38.89vw, 560px);
}
.orchid .orchid-track__state-kicker { color: var(--o-muted-2); }
[dir="ltr"] .orchid .orchid-track__state-kicker { letter-spacing: .2em; }

.orchid .orchid-track__now {
  display: flex;
  align-items: center;
  gap: 11px;
}
.orchid .orchid-track__pulse {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--o-moss);
  animation: orchid-pulse 1.8s ease-in-out infinite;
}
.orchid .orchid-track__now-label {
  font: 500 20px/1.3 var(--o-sans);
  color: var(--o-ink);
}

.orchid .orchid-track__idle,
.orchid .orchid-track__miss {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 14px/1.6 var(--o-sans);
  color: var(--o-muted-2);
}
.orchid .orchid-track__idle .o-i { font-size: 20px; color: var(--o-sage); }
.orchid .orchid-track__miss { color: var(--o-terracotta); }
.orchid .orchid-track__miss .o-i { font-size: 20px; color: var(--o-terracotta); }

.orchid .orchid-track__invoice { align-self: flex-start; }
.orchid .orchid-track__invoice .o-i { font-size: 17px; color: currentColor; }

/* Timeline */
.orchid .orchid-timeline {
  display: flex;
  flex-direction: column;
  margin-block-start: 8px;
}
.orchid .orchid-timeline__item { display: flex; gap: 18px; }
.orchid .orchid-timeline__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.orchid .orchid-timeline__dot {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 999px;
  background: var(--o-moss);
  color: var(--o-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.orchid .orchid-timeline__dot .o-i { font-size: 15px; color: currentColor; }
.orchid .orchid-timeline__line {
  width: 1px;
  flex: 1;
  min-height: 44px;
  background: rgba(var(--o-ink-rgb), .18);
}
.orchid .orchid-timeline__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-block-end: 22px;
}
.orchid .orchid-timeline__k {
  font: 500 15px/1.3 var(--o-sans);
  color: var(--o-ink);
}
.orchid .orchid-timeline__v {
  font: 400 12px/1.4 var(--o-sans);
  color: var(--o-muted-2);
}
.orchid .orchid-timeline__note {
  font: 400 12px/1.6 var(--o-sans);
  color: var(--o-muted);
}


/* ---------------------------------------------------------------------------
   Invoice sheet — component 44.

   A cream sheet on the cream-3 ground, a 2px ink masthead rule, and
   --o-shadow-sheet, which the design uses here and on nothing else.
   --------------------------------------------------------------------------- */
.orchid .orchid-invoice {
  background: var(--o-cream-3);
  padding-block: clamp(17px, 2.78vw, 40px) clamp(29px, 4.86vw, 70px);
}

.orchid .orchid-invoice__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-block-end: 24px;
}
.orchid .orchid-invoice__thanks {
  font: 400 13px/1.5 var(--o-sans);
  color: var(--o-ink-3);
}
.orchid .orchid-invoice__tools { display: flex; flex-wrap: wrap; gap: 10px; }
.orchid .orchid-invoice__print {
  border: 1px solid var(--o-bd-btn);
  background: transparent;
  cursor: pointer;
}
.orchid .orchid-invoice__print:hover { background: var(--o-ink); color: var(--o-cream); }
.orchid .orchid-invoice__pdf { padding-block: 12px; cursor: pointer; }
.orchid .orchid-invoice__tools .o-i { font-size: 17px; color: currentColor; }

.orchid .orchid-sheet {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.36vw, 34px);
  padding-block: clamp(22px, 3.61vw, 52px) clamp(19px, 3.19vw, 46px);
  padding-inline: clamp(24px, 3.89vw, 56px);
  background: var(--o-cream);
  color: var(--o-ink);
  box-shadow: var(--o-shadow-sheet);
}

.orchid .orchid-sheet__masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(13px, 2.08vw, 30px);
  padding-block-end: 28px;
  border-block-end: 2px solid var(--o-ink);
}
.orchid .orchid-sheet__brand { display: flex; flex-direction: column; gap: 4px; }
.orchid .orchid-sheet__brand-name {
  font: 600 clamp(17px, 2.08vw, 30px)/1 var(--o-serif);
  color: var(--o-ink);
}
.orchid .orchid-sheet__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  text-align: end;
}
.orchid .orchid-sheet__doc {
  font: 300 clamp(18px, 2.22vw, 32px)/1 var(--o-serif);
  color: var(--o-ink);
}
[dir="ltr"] .orchid .orchid-sheet__doc { letter-spacing: .04em; }
.orchid .orchid-sheet__metaline {
  font: 400 12px/1.5 var(--o-sans);
  color: var(--o-ink-3);
}
.orchid .orchid-sheet__metaline b { font-family: var(--o-serif); font-weight: 500; }

.orchid .orchid-sheet__parties { gap: clamp(17px, 2.78vw, 40px); }
.orchid .orchid-sheet__party { display: flex; flex-direction: column; gap: 9px; }
.orchid .orchid-sheet__party-name {
  font: 500 16px/1.3 var(--o-sans);
  color: var(--o-ink);
}
.orchid .orchid-sheet__party-line {
  font: 400 13px/1.7 var(--o-sans);
  color: var(--o-ink-3);
}

.orchid .orchid-sheet__scroll > * { min-width: 620px; }
.orchid .orchid-sheet__row {
  display: grid;
  grid-template-columns: 2.4fr .8fr .6fr 1fr 1fr;
  gap: 14px;
  align-items: center;
  padding-block: 15px;
  border-block-end: 1px solid var(--o-bd-row);
}
.orchid .orchid-sheet__row--head {
  padding-block: 13px;
  border-block-end: 1px solid var(--o-bd-input);
}
.orchid .orchid-sheet__row--head > span {
  font: 500 10px/1 var(--o-sans);
  text-transform: uppercase;
  color: var(--o-muted-2);
}
[dir="ltr"] .orchid .orchid-sheet__row--head > span { letter-spacing: .16em; }

.orchid .orchid-sheet__cell-name  { font: 500 14px/1.4 var(--o-sans); color: var(--o-ink); }
.orchid .orchid-sheet__cell-muted { font: 400 13px/1.4 var(--o-sans); color: var(--o-ink-3); white-space: nowrap; }
.orchid .orchid-sheet__cell-qty   { font: 500 13px/1 var(--o-serif); color: var(--o-ink); }
.orchid .orchid-sheet__cell-line  { font: 500 14px/1 var(--o-serif); color: var(--o-ink); white-space: nowrap; }

.orchid .orchid-sheet__totals-wrap { display: flex; justify-content: flex-end; }
.orchid .orchid-sheet__totals {
  width: 340px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.orchid .orchid-sheet__total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.orchid .orchid-sheet__total-row > span:first-child {
  font: 400 13px/1.4 var(--o-sans);
  color: var(--o-ink-3);
}
.orchid .orchid-sheet__total-row > span:last-child {
  font: 500 14px/1 var(--o-serif);
  color: var(--o-ink);
  white-space: nowrap;
}
.orchid .orchid-sheet__total-row--save > span { color: var(--o-moss); }
.orchid .orchid-sheet__total-row--rule {
  padding-block-end: 12px;
  border-block-end: 1px solid rgba(var(--o-ink-rgb), .16);
}
.orchid .orchid-sheet__total-row--grand { align-items: baseline; padding-block-start: 4px; }
.orchid .orchid-sheet__total-row--grand > span:first-child {
  font-size: 15px;
  font-weight: 500;
  color: var(--o-ink);
}
.orchid .orchid-sheet__total-row--grand > span:last-child {
  font-family: var(--o-serif);
  font-size: clamp(14px, 1.81vw, 26px);
  font-weight: 400;
}

.orchid .orchid-sheet__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(17px, 2.78vw, 40px);
  padding-block-start: 24px;
  border-block-start: 1px solid var(--o-bd-card);
}
.orchid .orchid-sheet__note {
  margin: 0;
  max-width: 56ch;
  font: 400 12px/1.85 var(--o-sans);
  color: var(--o-muted-2);
}
.orchid .orchid-sheet__pay {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  text-align: end;
  flex: none;
}
.orchid .orchid-sheet__pay-k2 { margin-block-start: 8px; }
.orchid .orchid-sheet__pay-v {
  font: 500 14px/1 var(--o-sans);
  color: var(--o-ink);
}
.orchid .orchid-sheet__paid {
  display: inline-flex;
  padding: 6px 13px;
  background: var(--o-moss-bg);
  color: var(--o-moss-dark);
  font: 600 11px/1 var(--o-sans);
}
[dir="ltr"] .orchid .orchid-sheet__paid { letter-spacing: .06em; }


/* ---------------------------------------------------------------------------
   Print. "Download PDF" is the browser's own print-to-PDF, so the sheet has to
   stand alone on paper: storefront chrome off, ground white, shadow gone.
   --------------------------------------------------------------------------- */
@media print {
  .orchid-ticker,
  .orchid-header,
  .orchid-header__wide,
  .orchid-header__mobile,
  .orchid-breadcrumb,
  .orchid-footer,
  .orchid .orchid-invoice__bar,
  .scroll-to-top,
  .loader { display: none !important; }

  .orchid .orchid-invoice { background: #FFF; padding: 0; }
  .orchid .orchid-sheet { box-shadow: none; padding: 0; }
  .orchid .o-table-scroll { overflow: visible; }
  .orchid .orchid-sheet__scroll > * { min-width: 0; }
}