/* ============================================================================
   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);
  /* The shared .o-aside basis (246px) is sized for the shop filter rail; a
     totals column at that width wrapped every label and clipped the total.
     Grow share stays 1 against the content's 999, so this is the width it
     settles at on desktop and it still wraps to full-width on phones. */
  flex-basis: clamp(300px, 27vw, 400px);
}

/* The cart summary's body sits in the platform's `.coupon-contents` hook, which
   the legacy sheet pads by 50px (35–40px on 1200–1599) and caps at 500px —
   inside the aside that left ~130px for the rows. The aside owns the spacing. */
.orchid .orchid-summary .coupon-contents {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  margin: 0;
  max-width: none;
}


/* ---------------------------------------------------------------------------
   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.

   ⚠️ style.css still carries the legacy `.product-quantity .substract/.plus`
   rule — position:absolute, translateY(-50%), a white background, left/right
   offsets — and `.product-quantity .quantity-input` with a #999 border, fixed
   width and height. A rule that does not name a property cannot undo it, so
   every one of them is reset here on the same property. Without this the two
   buttons floated as separate white boxes over the field. */
.orchid .orchid-bag__qty {
  display: inline-flex;
  align-items: stretch;
  height: 44px;
  border: 1px solid var(--o-bd-cta);
  background: var(--o-cream);
  transition: border-color .22s ease, box-shadow .22s ease;
}
.orchid .orchid-bag__qty:focus-within {
  border-color: var(--o-ink);
  box-shadow: 0 0 0 3px rgba(var(--o-ink-rgb), .08);
}
.orchid .orchid-bag__qty .substract,
.orchid .orchid-bag__qty .plus {
  position: static;
  inset: auto;
  transform: none;
  flex: none;
  width: 40px;
  height: auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--o-ink);
  cursor: pointer;
  user-select: none;
  transition: background .22s ease, color .22s ease;
}
.orchid .orchid-bag__qty .substract:hover,
.orchid .orchid-bag__qty .plus:hover { background: var(--o-cream-3); color: var(--o-ink); }
.orchid .orchid-bag__qty .substract:active,
.orchid .orchid-bag__qty .plus:active { background: rgba(var(--o-ink-rgb), .12); }
.orchid .orchid-bag__qty .o-i { font-size: 18px; color: currentColor; }

.orchid .orchid-bag__qty .quantity-input {
  flex: none;
  width: 42px;
  height: auto;
  min-width: 0;
  margin: 0;
  border: 0;
  border-inline: 1px solid rgba(var(--o-ink-rgb), .10);
  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; align-items: center; min-width: 122px; }
.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; }

/* ---------------------------------------------------------------------------
   Cart polish (2026-10-01, client: "make it modern").

   Layered after the base table so the base stays readable: each item is its
   own quiet card on the page, the stepper is a pill with round buttons that
   fill with ink on hover, and the row lifts a hair when pointed at. Still the
   Orchid rules — square cards, 999px/50% only on controls, tokens only.
   The head row takes the cards' inline padding + border so the columns line up.
   --------------------------------------------------------------------------- */
.orchid #cart_tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block-start: 12px;
}
.orchid .orchid-bag__row--head {
  padding-inline: 21px;
  border-block-end: 0;
  padding-block: 18px 0;
}
.orchid #cart_tbody .orchid-bag__row {
  padding: 16px 20px;
  border: 1px solid var(--o-bd-card);
  background: rgba(255, 255, 255, .62);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.orchid #cart_tbody .orchid-bag__row:hover {
  border-color: var(--o-bd-cta);
  box-shadow: 0 20px 36px -26px rgba(var(--o-ink-rgb), .38);
  transform: translateY(-1px);
}

.orchid #cart_tbody .orchid-bag__thumb { width: 84px; height: 104px; }
.orchid #cart_tbody .orchid-bag__thumb img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.orchid #cart_tbody .orchid-bag__row:hover .orchid-bag__thumb img { transform: scale(1.06); }

.orchid #cart_tbody .orchid-bag__remove { opacity: .8; transition: opacity .22s ease, color .22s ease; }
.orchid #cart_tbody .orchid-bag__remove:hover { opacity: 1; color: var(--o-terracotta); text-decoration: underline; text-underline-offset: 3px; }

/* Column alignment. The head labels sat at each column's start edge while the
   values did not: the prices carry .o-ltr, so their "start" is the LEFT edge
   under RTL, and the 18px total outgrew its 120px track. The three number
   columns are centred in head and body alike (justify-self is direction-
   proof) and widened to fit the stepper and the larger total. */
.orchid .orchid-bag__row,
.orchid #cart_tbody .orchid-bag__row { grid-template-columns: minmax(0, 1fr) 130px 160px 140px; }
.orchid .orchid-bag__row--head .orchid-bag__th:not(:first-child),
.orchid #cart_tbody .orchid-bag__price,
.orchid #cart_tbody .orchid-bag__qty-cell,
.orchid #cart_tbody .orchid-bag__line { justify-self: center; text-align: center; }

.orchid #cart_tbody .orchid-bag__price { font-size: 14px; color: var(--o-muted-2); }
.orchid #cart_tbody .orchid-bag__line { font-size: 18px; }

/* The pill stepper. */
.orchid #cart_tbody .orchid-bag__qty {
  align-items: center;
  height: 42px;
  padding: 3px;
  border-radius: 999px;
  border-color: var(--o-bd-card);
  background: var(--o-cream);
}
.orchid #cart_tbody .orchid-bag__qty .substract,
.orchid #cart_tbody .orchid-bag__qty .plus {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transition: background .22s ease, color .22s ease, transform .15s ease;
}
.orchid #cart_tbody .orchid-bag__qty .substract:hover,
.orchid #cart_tbody .orchid-bag__qty .plus:hover { background: var(--o-ink); color: var(--o-cream); }
.orchid #cart_tbody .orchid-bag__qty .substract:active,
.orchid #cart_tbody .orchid-bag__qty .plus:active { transform: scale(.9); }
.orchid #cart_tbody .orchid-bag__qty .quantity-input { width: 38px; border-inline: 0; }
.orchid #cart_tbody .orchid-bag__qty--fixed { padding-inline: 18px; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .orchid #cart_tbody .orchid-bag__row,
  .orchid #cart_tbody .orchid-bag__row:hover,
  .orchid #cart_tbody .orchid-bag__thumb img { transition: none; transform: none; }
}

/* Phones: the table becomes a compact card per item — no sideways swipe.

   The one media query in this file (the design has none): a grid cannot
   re-flow into named areas on its own. .orchid-bag__product becomes
   display:contents so its thumb and info are placed as row cells. The unit
   price is dropped: the line total and the stepper already say it, and the
   summary repeats the sum. Head row goes too — the card labels itself. */
@media (max-width: 767.98px) {
  .orchid .orchid-bag__scroll { overflow: visible; margin-block-start: 14px; }
  .orchid .orchid-bag__scroll > * { min-width: 0; }
  .orchid .orchid-bag__row--head { display: none; }

  .orchid .orchid-bag__row,
  .orchid #cart_tbody .orchid-bag__row {
    padding: 12px;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb info info"
      "thumb qty  line";
    column-gap: 14px;
    row-gap: 12px;
    align-items: end;
  }
  .orchid #cart_tbody { gap: 10px; margin-block-start: 0; }
  .orchid .orchid-bag__product { display: contents; }
  .orchid .orchid-bag__thumb,
  .orchid #cart_tbody .orchid-bag__thumb {
    grid-area: thumb;
    align-self: stretch;
    width: 76px;
    height: auto;
    min-height: 96px;
  }
  .orchid .orchid-bag__info { grid-area: info; align-self: start; gap: 5px; }
  .orchid .orchid-bag__name { font-size: 15px; }
  .orchid .orchid-bag__variant { font-size: 12px; }
  .orchid .orchid-bag__price { display: none; }
  .orchid .orchid-bag__qty-cell,
  .orchid #cart_tbody .orchid-bag__qty-cell { grid-area: qty; justify-self: start; }
  .orchid #cart_tbody .orchid-bag__qty { height: 38px; }
  .orchid #cart_tbody .orchid-bag__qty .substract,
  .orchid #cart_tbody .orchid-bag__qty .plus { width: 30px; height: 30px; }
  .orchid #cart_tbody .orchid-bag__qty .quantity-input { width: 32px; font-size: 14px; }
  .orchid #cart_tbody .orchid-bag__line { grid-area: line; justify-self: end; align-self: center; font-size: 16px; }
  .orchid #cart_tbody .orchid-bag__row:hover { transform: none; }

  .orchid .orchid-bag__actions { gap: 10px; margin-block-start: 20px; }
  .orchid .orchid-bag__keep,
  .orchid .orchid-bag__clear { flex: 1 1 0; justify-content: center; }
}


/* ---------------------------------------------------------------------------
   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; }
}

/* ---------------------------------------------------------------------------
   Cart coupon (2026-10-06) — App\Services\CartCoupon.
   The field sits in the summary between the rows and the total; once a code is
   applied the field gives way to an orchid-summary__row--save line with a
   Remove link. Radii follow the system: pills (999px) only.
   --------------------------------------------------------------------------- */
.orchid .orchid-coupon {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: 18px;
  border-block-end: 1px solid var(--o-bd-card);
}
.orchid .orchid-coupon__label { font: 400 13px/1.4 var(--o-sans); color: var(--o-ink-3); }
.orchid .orchid-coupon__field { display: flex; gap: 8px; }
.orchid .orchid-coupon__input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 18px;
  border: 1px solid var(--o-bd-card);
  border-radius: 999px;
  background: var(--o-cream);
  font: 500 14px/1 var(--o-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--o-ink);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.orchid .orchid-coupon__input::placeholder { letter-spacing: 0; text-transform: none; color: var(--o-muted-2); }
.orchid .orchid-coupon__input:focus { border-color: var(--o-ink); box-shadow: 0 0 0 3px rgba(var(--o-ink-rgb), .08); }
.orchid .orchid-coupon__btn {
  flex: none;
  height: 46px;
  padding: 0 22px;
  border: 1px solid var(--o-ink);
  border-radius: 999px;
  background: var(--o-ink);
  color: var(--o-cream);
  font: 500 13px/1 var(--o-sans);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.orchid .orchid-coupon__btn:hover { background: transparent; color: var(--o-ink); }
.orchid .orchid-coupon__btn.is-busy { opacity: .5; pointer-events: none; }
.orchid .orchid-coupon.is-error .orchid-coupon__input { border-color: var(--o-terracotta); animation: orchidCouponShake .4s; }
@keyframes orchidCouponShake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.orchid .orchid-coupon__code {
  padding: 3px 10px;
  border: 1px dashed currentColor;
  border-radius: 999px;
  font: 600 12px/1.2 var(--o-sans);
  letter-spacing: .06em;
}
.orchid .orchid-coupon__remove { font-size: 12px; color: var(--o-muted-2); text-decoration: underline; text-underline-offset: 3px; }
.orchid .orchid-coupon__remove:hover { color: var(--o-terracotta); }