/* ===========================================================================
   ORCHID REDESIGN — PHASE 4: CONTENT + ACCOUNT
   Components 36–42, 46, 47 of "Orchid Widgets.dc.html".

   Loaded after style.css and orchid-purchase.css (theme.json order), so every
   block name here is namespaced away from the earlier phases. Verified free
   before writing: orchid-story · orchid-contact · orchid-journal · orchid-auth
   · orchid-dash · orchid-orders · orchid-addr · orchid-mobnav · orchid-search.
   (`orchid-account` was NOT free — Phase 1 uses it for the header's account
   dropdown — hence `orchid-dash` for the account shell.)

   Declares no palette tokens of its own beyond the four Phase 4 controls; the
   whole --o-* set resolves from .orchid in style.css, so the Storefront hub's
   colour and size controls keep working on everything here.

   Values are transcribed literally from the design's inline styles, with cqi
   swapped for vw at page level. Do not round them.
   =========================================================================== */

.orchid {
  /* ---- Phase 4 tenant controls ----
     Same contract as --o-cart-* in orchid-purchase.css: the hub writes an
     override onto .orchid only when the tenant moves it off the shipped
     default, so an untouched shop still emits no <style> block at all. */
  --o-auth-bg:      var(--o-cream);
  --o-auth-text:    var(--o-ink);
  --o-dash-bg:      var(--o-cream);
  --o-dash-text:    var(--o-ink);
  --o-dash-rail-bg: var(--o-cream-2);
  --o-journal-bg:   var(--o-cream);
  --o-journal-text: var(--o-ink);

  --o-auth-scale:    1;
  --o-dash-scale:    1;
  --o-journal-scale: 1;

  /* The two PageBuilder addons carry their own size slider, so their scale
     arrives as an inline custom property on the section element rather than
     from the hub. Declared here so an unconfigured section still resolves. */
  --o-story-scale:   1;
  --o-contact-scale: 1;
}

/* ===========================================================================
   36 — ABOUT / STORY BLOCKS          PageBuilder: Aromatic\About\StoryBlocks
   Design: Storefront isAbout (1095–1130) + Widgets w.isStory2 (828–855)
   =========================================================================== */

.orchid-story { color: var(--o-ink); background: var(--o-cream); }

/* -- intro: Pattern B, panes stretch so the image matches the copy height -- */
.orchid-story__intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: stretch;
  border-block-end: 1px solid var(--o-bd-divider);
}

.orchid-story__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding-block: calc(clamp(32px, 5.28vw, 76px) * var(--o-story-scale));
  padding-inline: var(--o-sec-pi);
}

.orchid-story__kicker {
  font: 500 11px/1 var(--o-sans);
  text-transform: uppercase;
  color: var(--o-moss);
}
[dir="ltr"] .orchid-story__kicker { letter-spacing: .26em; }

.orchid .orchid-story__title {
  margin: 0;
  max-width: 18ch;
  font: 300 clamp(28px, 3.47vw, 50px)/1.08 var(--o-serif);
  /* Longhand after the shorthand — never calc() inside `font:`. */
  font-size: calc(clamp(28px, 3.47vw, 50px) * var(--o-story-scale));
  letter-spacing: -.02em;
  color: var(--o-ink);
}

.orchid .orchid-story__body {
  margin: 0;
  max-width: 48ch;
  font: 400 16px/1.9 var(--o-sans);
  color: var(--o-ink-3);
}

.orchid-story__media {
  position: relative;
  height: clamp(335px, 37.50vw, 540px);
  background: var(--o-cream-3);
  overflow: hidden;
}
.orchid-story__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -- stats band: Pattern A, N=260 -- */
.orchid-story__stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 260px), 1fr));
  background: var(--o-cream-2);
  border-block-end: 1px solid var(--o-bd-divider);
}

.orchid-story__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: clamp(14px, 2.36vw, 34px);
  padding-inline: var(--o-card-p);
  border-inline-end: 1px solid var(--o-bd-divider);
}

.orchid-story__stat-k {
  font: 300 clamp(21px, 2.64vw, 38px)/1 var(--o-serif);
  color: var(--o-ink);
}
.orchid-story__stat-v {
  font: 400 13px/1.4 var(--o-sans);
  color: var(--o-muted-2);
}

/* -- values: Pattern B, image beside a hairline-separated definition list -- */
.orchid-story__values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--o-sec-pi);
  align-items: center;
  padding-block: clamp(29px, 4.86vw, 70px) clamp(34px, 5.56vw, 80px);
  padding-inline: var(--o-sec-pi);
}

.orchid-story__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--o-cream-3);
}
.orchid-story__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.orchid-story__vals {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.81vw, 26px);
}

.orchid .orchid-story__vals-title {
  margin: 0;
  font: 300 clamp(19px, 2.36vw, 34px)/1.1 var(--o-serif);
  color: var(--o-ink);
}

/* 1px gap over an ink-tinted background IS the divider — a border would
   double up against the row above it. Same trick the design uses. */
.orchid-story__val-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(var(--o-ink-rgb), .12);
}

.orchid-story__val {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 22px;
  background: var(--o-cream);
}
.orchid-story__val-k {
  font: 500 18px/1.3 var(--o-sans);
  color: var(--o-ink);
}
.orchid-story__val-v {
  max-width: 52ch;
  font: 400 14px/1.8 var(--o-sans);
  color: var(--o-muted);
}

/* ===========================================================================
   37 — CONTACT BLOCK               PageBuilder: Aromatic\Contact\ContactBlock
   Design: Storefront isContact (1132–1165) + Widgets w.isContact (857–888)
   =========================================================================== */

.orchid-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: start;
  color: var(--o-ink);
  background: var(--o-cream);
}

.orchid-contact__info {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-block: calc(var(--o-sec-pt) * var(--o-contact-scale))
                 calc(var(--o-sec-pb) * var(--o-contact-scale));
  padding-inline: var(--o-sec-pi);
}

.orchid-contact__kicker {
  font: 500 11px/1 var(--o-sans);
  text-transform: uppercase;
  color: var(--o-moss);
}
[dir="ltr"] .orchid-contact__kicker { letter-spacing: .26em; }

.orchid .orchid-contact__title {
  margin: 0;
  font: 300 clamp(25px, 3.19vw, 46px)/1.05 var(--o-serif);
  font-size: calc(clamp(25px, 3.19vw, 46px) * var(--o-contact-scale));
  letter-spacing: -.02em;
  color: var(--o-ink);
}

.orchid .orchid-contact__body {
  margin: 0;
  max-width: 46ch;
  font: 400 15px/1.8 var(--o-sans);
  color: var(--o-ink-3);
}

.orchid-contact__rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-block-start: 10px;
  background: rgba(var(--o-ink-rgb), .12);
}

.orchid-contact__row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 18px;
  background: var(--o-cream);
}
.orchid-contact__row-k {
  min-width: 150px;
  font: 500 11px/1.4 var(--o-sans);
  text-transform: uppercase;
  color: var(--o-muted-2);
}
[dir="ltr"] .orchid-contact__row-k { letter-spacing: .14em; }

.orchid-contact__row-v {
  font: 400 15px/1.5 var(--o-sans);
  color: var(--o-ink);
}
.orchid .orchid-contact__row-v a { color: var(--o-ink); }
.orchid .orchid-contact__row-v a:hover { color: var(--o-moss); }

/* Map slot. Renders the tenant's embed when they paste one, otherwise the
   design's moss placeholder plate — never a blank hole. */
.orchid-contact__map {
  position: relative;
  height: 220px;
  margin-block-start: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--o-moss-bg);
  border: 1px solid rgba(var(--o-ink-rgb), .12);
  overflow: hidden;
}
.orchid-contact__map iframe,
.orchid-contact__map > div > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.orchid-contact__map-note {
  font: 500 13px/1 var(--o-sans);
  color: var(--o-moss);
}
.orchid-contact__map .o-i { font-size: 22px; color: var(--o-moss); }

/* -- form pane -- */
.orchid-contact__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-block: calc(var(--o-sec-pt) * var(--o-contact-scale))
                 calc(var(--o-sec-pb) * var(--o-contact-scale));
  padding-inline: var(--o-sec-pi);
  background: var(--o-cream-2);
  border-inline-start: 1px solid rgba(var(--o-ink-rgb), .12);
}

/* render_form() wraps its button in a .btn-wrapper div; without this the
   button shrink-wraps instead of spanning the column like the design's. */
.orchid .orchid-contact__form .btn-wrapper { display: flex; flex-direction: column; }
.orchid .orchid-contact__form .btn-wrapper button { width: 100%; }

/* The form itself is a tenant-built FormBuilder form — `render_form()` emits
   `.form-group > label + .form-control`, so the design's field atom is applied
   to THAT markup, not to markup of ours. Keeping the platform form means the
   submit handler, the honeypot and the admin's saved submissions all still
   work; only the look changes. */
.orchid-contact__field,
.orchid .orchid-contact__form .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.orchid-contact__label,
.orchid .orchid-contact__form .form-group label {
  font: 400 12px/1 var(--o-sans);
  color: var(--o-muted-2);
  margin: 0;
}

/* The checkbox row is the one field type that is not a stacked label+input. */
.orchid .orchid-contact__form .form-group.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.orchid .orchid-contact__form .form-group.checkbox .form-control {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  flex: none;
}

.orchid .orchid-contact__input,
.orchid .orchid-contact__textarea,
.orchid .orchid-contact__form .form-control {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--o-bd-input);
  border-radius: 0;
  background: var(--o-cream);
  color: var(--o-ink);
  font-family: var(--o-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: none;
  transition: border-color .22s ease-out;
}
.orchid .orchid-contact__input,
.orchid .orchid-contact__form input.form-control,
.orchid .orchid-contact__form select.form-control { min-height: 48px; }

.orchid .orchid-contact__textarea,
.orchid .orchid-contact__form textarea.form-control { min-height: 150px; resize: vertical; }

.orchid .orchid-contact__input:hover,
.orchid .orchid-contact__input:focus,
.orchid .orchid-contact__textarea:hover,
.orchid .orchid-contact__textarea:focus,
.orchid .orchid-contact__form .form-control:hover,
.orchid .orchid-contact__form .form-control:focus {
  border-color: var(--o-moss);
  outline: none;
}
.orchid .orchid-contact__input::placeholder,
.orchid .orchid-contact__textarea::placeholder,
.orchid .orchid-contact__form .form-control::placeholder { color: var(--o-muted-2); }

.orchid .orchid-contact__form form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* `render_form()` takes a button class as its 4th argument; the addon passes
   this one, so no `!important` arms race with the platform's `.btn-default`. */
.orchid .orchid-contact__submit,
.orchid .orchid-contact__form button[type="submit"] {
  margin-block-start: 4px;
  padding: 17px;
  border: 0;
  border-radius: 0;
  background: var(--o-btn-bg);
  color: var(--o-btn-text);
  font-family: var(--o-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  transition: background .22s ease-out;
}
.orchid .orchid-contact__submit:hover,
.orchid .orchid-contact__form button[type="submit"]:hover {
  background: var(--o-btn-hover-bg);
  color: var(--o-btn-text);
}

/* Ajax status wrappers the shared submit handler toggles. */
.orchid .orchid-contact__form .error-message { font: 400 13px/1.6 var(--o-sans); color: var(--o-terracotta); }
.orchid .orchid-contact__form .ajax-loading-wrap.hide { display: none; }

/* ===========================================================================
   46 — JOURNAL INDEX                 Blade: Modules/Blog … blog-all (branched)
   Design: Storefront isBlog (1167–1192) + Widgets w.isBlogIdx (1260–1285)
   =========================================================================== */

.orchid-journal {
  background: var(--o-journal-bg);
  color: var(--o-journal-text);
  padding-block: calc(var(--o-sec-pi) * var(--o-journal-scale))
                 calc(clamp(32px, 5.28vw, 76px) * var(--o-journal-scale));
  padding-inline: var(--o-sec-pi);
}

.orchid-journal__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block-end: 26px;
  border-block-end: 1px solid rgba(var(--o-ink-rgb), .12);
}

.orchid-journal__kicker {
  font: 500 11px/1 var(--o-sans);
  font-size: calc(11px * var(--o-journal-scale));
  text-transform: uppercase;
  color: var(--o-moss);
}
[dir="ltr"] .orchid-journal__kicker { letter-spacing: .26em; }

.orchid .orchid-journal__title {
  margin: 0;
  font: 300 clamp(24px, 3.06vw, 44px)/1.05 var(--o-serif);
  font-size: calc(clamp(24px, 3.06vw, 44px) * var(--o-journal-scale));
  letter-spacing: -.02em;
  color: var(--o-journal-text);
}

.orchid .orchid-journal__intro {
  margin: 0;
  font: 400 15px/1.7 var(--o-sans);
  color: var(--o-muted-2);
}

/* -- category chips: the design's only pill row on this screen -- */
.orchid-journal__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: clamp(12px, 1.81vw, 26px);
}

.orchid .orchid-journal__chip {
  padding: 9px 18px;
  border: 1px solid var(--o-bd-input);
  border-radius: 999px;
  background: transparent;
  color: var(--o-ink-2);
  font: 500 13px/1 var(--o-sans);
  white-space: nowrap;
  transition: border-color .22s ease-out, background .22s ease-out, color .22s ease-out;
}
.orchid .orchid-journal__chip:hover { border-color: var(--o-ink); color: var(--o-ink); }
.orchid .orchid-journal__chip--on,
.orchid .orchid-journal__chip--on:hover {
  background: var(--o-ink);
  border-color: var(--o-ink);
  color: var(--o-cream);
}

/* -- card grid: Pattern A, N=320, auto-fill because the post count is data -- */
.orchid-journal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 320px), 1fr));
  gap: var(--o-gap);
}

.orchid .orchid-journal__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--o-journal-text);
}

.orchid-journal__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--o-cream-3);
}
.orchid-journal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}
.orchid .orchid-journal__card:hover .orchid-journal__thumb img { transform: scale(1.06); }

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

.orchid .orchid-journal__card-title {
  max-width: 24ch;
  font: 400 clamp(17px, 1.53vw, 22px)/1.35 var(--o-serif);
  color: var(--o-journal-text);
}

.orchid .orchid-journal__read {
  font: 500 13px/1 var(--o-sans);
  color: var(--o-moss);
}

.orchid-journal__empty {
  padding: clamp(16px, 2.36vw, 34px);
  background: var(--o-cream-2);
  font: 400 15px/1.7 var(--o-sans);
  color: var(--o-muted);
}

/* ===========================================================================
   38 — AUTH PANEL                          Blade: user/{login,register} branch
   Design: Storefront isLogin (1194–1245) + isRegister (1247–1305)
          + Widgets w.isAuth (890–932)
   =========================================================================== */

.orchid-auth {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: stretch;
  background: var(--o-auth-bg);
  color: var(--o-auth-text);
}

/* Register reverses the panes: form first, image second (design 1247–1305). */
.orchid-auth--reverse .orchid-auth__panel { order: 2; }
.orchid-auth--reverse .orchid-auth__form  { order: 1; }

.orchid-auth__panel {
  position: relative;
  min-height: clamp(409px, 45.83vw, 660px);
  overflow: hidden;
  background: var(--o-cream-3);
}
.orchid-auth--reverse .orchid-auth__panel { min-height: clamp(434px, 48.61vw, 700px); }

.orchid-auth__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: orchid-kenburns 20s ease-out alternate infinite;
}
@media (prefers-reduced-motion: reduce) {
  .orchid-auth__panel img { animation: none; }
}

.orchid-auth__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--o-ink-rgb), .82), rgba(var(--o-ink-rgb), .18));
}

.orchid-auth__caption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block-end: clamp(20px, 3.33vw, 48px);
  padding-inline: clamp(20px, 3.33vw, 48px);
}

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

.orchid .orchid-auth__quote {
  margin: 0;
  max-width: 18ch;
  font: 300 clamp(21px, 2.64vw, 38px)/1.15 var(--o-serif);
  color: var(--o-cream);
}

.orchid .orchid-auth__quote-sub {
  margin: 0;
  max-width: 44ch;
  font: 400 14px/1.8 var(--o-sans);
  color: rgba(251, 249, 243, .78);
}

.orchid-auth__perks {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-block-start: 8px;
}
.orchid-auth__perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 13px/1.6 var(--o-sans);
  color: rgba(251, 249, 243, .82);
}
.orchid-auth__perk .o-i { font-size: 18px; color: var(--o-sage-light); }

/* -- form side -- */
.orchid-auth__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding-block: calc(clamp(32px, 5.28vw, 76px) * var(--o-auth-scale))
                 calc(clamp(34px, 5.56vw, 80px) * var(--o-auth-scale));
  padding-inline: clamp(32px, 5.28vw, 76px);
}
.orchid-auth--reverse .orchid-auth__form {
  gap: 20px;
  padding-block: calc(clamp(30px, 5.00vw, 72px) * var(--o-auth-scale))
                 calc(clamp(33px, 5.42vw, 78px) * var(--o-auth-scale));
}

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

.orchid .orchid-auth__title {
  margin: 0;
  font: 300 clamp(23px, 2.92vw, 42px)/1.05 var(--o-serif);
  font-size: calc(clamp(23px, 2.92vw, 42px) * var(--o-auth-scale));
  letter-spacing: -.02em;
  color: var(--o-auth-text);
}
.orchid .orchid-auth__sub {
  margin: 0;
  font: 400 14px/1.7 var(--o-sans);
  color: var(--o-muted-2);
}

.orchid-auth__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-block-start: 4px;
}

/* Register's field pairs are a Pattern B grid; the full-name row spans it. */
.orchid-auth__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
  margin-block-start: 4px;
}
.orchid-auth__field--wide { grid-column: 1 / -1; }

.orchid-auth__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.orchid-auth__label {
  font: 400 12px/1 var(--o-sans);
  color: var(--o-muted-2);
}
.orchid-auth__label .text-danger,
.orchid-auth__label span { color: var(--o-terracotta); }

/* The password toggle needs a flex shell around the input; a bare input keeps
   the same padding so both shapes read identically. */
.orchid-auth__wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--o-bd-input);
  background: var(--o-cream);
  transition: border-color .22s ease-out;
}
.orchid-auth--reverse .orchid-auth__wrap { padding: 15px 16px; }
.orchid-auth__wrap:hover,
.orchid-auth__wrap:focus-within { border-color: var(--o-moss); }

.orchid .orchid-auth__wrap input,
.orchid .orchid-auth__wrap select,
.orchid .orchid-auth__wrap textarea {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--o-ink);
  font-family: var(--o-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: none;
  outline: none;
  height: auto;
}
.orchid .orchid-auth__wrap input::placeholder,
.orchid .orchid-auth__wrap textarea::placeholder { color: var(--o-muted-2); }
.orchid .orchid-auth__wrap select { appearance: none; cursor: pointer; }

.orchid .orchid-auth__wrap .toggle-password-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--o-muted-2);
}
.orchid .orchid-auth__wrap .toggle-password-btn .o-i { font-size: 19px; color: var(--o-muted-2); }

.orchid-auth__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.orchid-auth__remember {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font: 400 13px/1 var(--o-sans);
  color: var(--o-ink-2);
  margin: 0;
}
/* Native checkbox restyled to the design's 16px square — appearance:none keeps
   it a real input so the form still posts `remember`. */
.orchid .orchid-auth__checkbox {
  appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  border: 1px solid rgba(var(--o-ink-rgb), .3);
  border-radius: 0;
  background: var(--o-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .22s ease-out, border-color .22s ease-out;
}
.orchid .orchid-auth__checkbox:checked {
  background: var(--o-moss);
  border-color: var(--o-moss);
}
.orchid .orchid-auth__checkbox:checked::after {
  content: 'check';
  font-family: 'Material Symbols Outlined';
  font-size: 12px;
  line-height: 1;
  color: var(--o-cream);
}

.orchid .orchid-auth__forgot {
  font: 400 13px/1 var(--o-sans);
  color: var(--o-moss);
}

.orchid .orchid-auth__submit {
  width: 100%;
  padding: 17px;
  border: 0;
  border-radius: 0;
  background: var(--o-btn-bg);
  color: var(--o-btn-text);
  font-family: var(--o-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  transition: background .22s ease-out;
}
.orchid .orchid-auth__submit:hover { background: var(--o-btn-hover-bg); color: var(--o-btn-text); }

/* Register's primary is moss → moss-dark (design 1281). */
.orchid .orchid-auth__submit--moss { background: var(--o-moss); margin-block-start: 2px; }
.orchid .orchid-auth__submit--moss:hover { background: var(--o-moss-dark); }

.orchid .orchid-auth__alt {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--o-bd-btn);
  border-radius: 0;
  background: transparent;
  color: var(--o-ink);
  font: 500 14px/1 var(--o-sans);
  text-align: center;
  transition: background .22s ease-out;
}
.orchid .orchid-auth__alt:hover { background: var(--o-cream-3); color: var(--o-ink); }

.orchid-auth__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-block-start: 6px;
  font: 400 13px/1 var(--o-sans);
  color: var(--o-muted-2);
}
.orchid .orchid-auth__foot a {
  font: 600 13px/1 var(--o-sans);
  color: var(--o-moss);
  border-block-end: 1px solid rgba(62, 83, 52, .4);
  padding-block-end: 2px;
}

.orchid-auth__terms {
  max-width: 52ch;
  font: 400 12px/1.7 var(--o-sans);
  color: var(--o-muted-2);
}

.orchid .orchid-auth__gen {
  font: 400 12px/1 var(--o-sans);
  color: var(--o-moss);
}

/* Collapsible optional-address group on register. */
.orchid-auth__collapse {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding-block: 14px;
  border-block: 1px solid var(--o-bd-divider);
  font: 500 13px/1 var(--o-sans);
  color: var(--o-ink);
}
.orchid-auth__collapse-hint { font: 400 12px/1 var(--o-sans); color: var(--o-muted-2); }
.orchid-auth__collapse .o-i {
  margin-inline-start: auto;
  font-size: 20px;
  color: var(--o-muted-2);
  transition: transform .22s ease-out;
}
.orchid-auth__collapse .o-i.rotated { transform: rotate(180deg); }

/* The live state/city results. Positioned against .orchid-auth__field, which
   is the relative ancestor. */
.orchid .orchid-auth__field .state-dropdown,
.orchid .orchid-auth__field .city-dropdown {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  z-index: 20;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--o-cream);
  border: 1px solid var(--o-bd-input);
  box-shadow: var(--o-shadow-mega);
}
.orchid .orchid-auth__field .list-group-item {
  padding: 11px 14px;
  border: 0;
  border-block-end: 1px solid var(--o-bd-row);
  border-radius: 0;
  background: var(--o-cream);
  color: var(--o-ink-2);
  font: 400 13px/1.4 var(--o-sans);
  cursor: pointer;
}
.orchid .orchid-auth__field .list-group-item:hover {
  background: var(--o-cream-2);
  color: var(--o-moss);
}

/* ===========================================================================
   39 / 40 / 41 — ACCOUNT SHELL, DASHBOARD, ORDERS, ADDRESSES
   Blade: user/dashboard/** (branched).  Pattern C on five account screens.
   Design: Storefront isDash (1306–1424) + isOrder (1426–1514)
          + Widgets w.isDashPanel (934–963) / w.isOrders (965–984) / w.isAddress (986–1010)
   =========================================================================== */

.orchid-dash {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  background: var(--o-dash-bg);
  color: var(--o-dash-text);
}

/* -- rail -- */
.orchid-dash__rail {
  flex: 1 1 246px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.81vw, 26px);
  min-height: clamp(508px, 56.94vw, 820px);
  padding-block: calc(var(--o-gap-loose) * var(--o-dash-scale))
                 calc(clamp(25px, 4.17vw, 60px) * var(--o-dash-scale));
  padding-inline: clamp(12px, 1.81vw, 26px);
  background: var(--o-dash-rail-bg);
  border-inline-end: 1px solid var(--o-bd-divider);
}

.orchid-dash__who { display: flex; align-items: center; gap: 14px; }

.orchid-dash__avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--o-moss-bg);
  color: var(--o-moss);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 19px/1 var(--o-serif);
  overflow: hidden;
}
.orchid-dash__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 999px;
}

.orchid-dash__who-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.orchid-dash__hi  { font: 500 16px/1.2 var(--o-sans); color: var(--o-dash-text); }
.orchid-dash__sub { font: 400 11px/1.3 var(--o-sans); color: var(--o-muted-2); }

.orchid-dash__tier {
  align-self: flex-start;
  padding: 6px 12px;
  background: var(--o-ink);
  color: var(--o-cream);
  font: 500 10px/1 var(--o-sans);
}
[dir="ltr"] .orchid-dash__tier { letter-spacing: .12em; }

.orchid-dash__nav { display: flex; flex-direction: column; gap: 3px; }

.orchid .orchid-dash__nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  background: transparent;
  color: var(--o-ink-2);
  font: 500 14px/1 var(--o-sans);
  transition: background .22s ease-out, color .22s ease-out;
}
.orchid .orchid-dash__nav-item .o-i { font-size: 20px; color: inherit; }
.orchid .orchid-dash__nav-item:hover { background: var(--o-moss-bg); color: var(--o-ink); }
.orchid .orchid-dash__nav-item.is-active,
.orchid .orchid-dash__nav-item.is-active:hover {
  background: var(--o-ink);
  color: var(--o-cream);
}

/* -- content pane -- */
.orchid-dash__body {
  flex: 999 1 62%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.36vw, 34px);
  padding-block: calc(var(--o-gap-loose) * var(--o-dash-scale))
                 calc(clamp(29px, 4.86vw, 70px) * var(--o-dash-scale));
  padding-inline: clamp(20px, 3.33vw, 48px);
}

.orchid .orchid-dash__h2 {
  margin: 0;
  font: 300 clamp(15px, 1.94vw, 28px)/1.1 var(--o-serif);
  color: var(--o-dash-text);
}

.orchid-dash__section { display: flex; flex-direction: column; gap: 16px; }
.orchid-dash__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.orchid .orchid-dash__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 13px/1 var(--o-sans);
  color: var(--o-moss);
}
.orchid .orchid-dash__link .o-i { font-size: 18px; color: var(--o-moss); }

/* -- stat tiles: Pattern A, N=260 -- */
.orchid-dash__stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 260px), 1fr));
  gap: 16px;
}
.orchid-dash__stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block: 22px;
  padding-inline: var(--o-gap-tight);
  border: 1px solid var(--o-bd-card);
  transition: border-color .22s ease-out;
}
.orchid-dash__stat:hover { border-color: var(--o-moss); }
.orchid-dash__stat .o-i { font-size: 23px; color: var(--o-moss); }
.orchid-dash__stat-k {
  font: 300 clamp(17px, 2.08vw, 30px)/1 var(--o-serif);
  color: var(--o-dash-text);
  white-space: nowrap;
}
.orchid-dash__stat-v { font: 400 12px/1.4 var(--o-sans); color: var(--o-muted-2); }

/* -- active-order panel, shared by the dashboard and the order detail -- */
.orchid-dash__panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: var(--o-card-p);
  padding-inline: clamp(13px, 2.22vw, 32px);
  background: var(--o-cream-2);
  border: 1px solid rgba(var(--o-ink-rgb), .12);
}
.orchid-dash__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.orchid-dash__panel-label {
  font: 500 11px/1 var(--o-sans);
  text-transform: uppercase;
  color: var(--o-muted-2);
}
[dir="ltr"] .orchid-dash__panel-label { letter-spacing: .2em; }

.orchid-dash__panel-num { font: 500 13px/1 var(--o-serif); color: var(--o-ink); }

.orchid-dash__state { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.orchid-dash__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--o-moss);
  animation: orchid-pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .orchid-dash__dot { animation: none; }
}
.orchid-dash__state-text { font: 500 19px/1.3 var(--o-sans); color: var(--o-dash-text); }
.orchid-dash__slot {
  margin-inline-start: auto;
  font: 400 13px/1 var(--o-sans);
  color: var(--o-muted-2);
}

/* The progress rail is Phase 3's `order-progress` partial in its `steps`
   variant — same DOM, same real OrderStatus data, already styled by
   orchid-purchase.css as `.orchid-steps--order` (30px circle, 17px glyph,
   11px label underneath, exactly what this design asks for). Only the
   connector length differs per screen, so that is all that is restated.
   The row scrolls rather than wrapping: four stages stacked on a phone read
   as four unrelated bullets. */
.orchid .orchid-dash__panel .orchid-steps--order,
.orchid .orchid-orders__panel .orchid-steps--order {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-block-end: 2px;
}
.orchid .orchid-dash__panel .orchid-steps--order .orchid-steps__rule { width: 70px; }
.orchid .orchid-orders__panel .orchid-steps--order .orchid-steps__rule { width: 76px; }

/* -- "order it again" rail: Pattern A, N=260 -- */
.orchid-dash__again {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 260px), 1fr));
  gap: 20px;
}

/* ===========================================================================
   40 — ORDERS TABLE  (dashboard recent list + the full order list page)
   =========================================================================== */

.orchid-orders {
  border: 1px solid var(--o-bd-card);
  overflow-x: auto;
}

/* Six columns on the dashboard's recent list (design isDash 1363), five on the
   standalone orders page (Widgets w.isOrders 968) — the design draws both. */
.orchid-orders__head,
.orchid-orders__row {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr .9fr .9fr 1fr .7fr;
  gap: 14px;
  min-width: 720px;
}
.orchid-orders--5 .orchid-orders__head,
.orchid-orders--5 .orchid-orders__row {
  grid-template-columns: 1.1fr 1.1fr .9fr 1fr .7fr;
  min-width: 680px;
}

.orchid-orders__head {
  padding: 15px 22px;
  background: var(--o-cream-2);
  border-block-end: 1px solid rgba(var(--o-ink-rgb), .12);
}
.orchid-orders__head span {
  font: 500 10px/1 var(--o-sans);
  text-transform: uppercase;
  color: var(--o-muted-2);
}
[dir="ltr"] .orchid-orders__head span { letter-spacing: .18em; }

.orchid-orders__row {
  align-items: center;
  padding: 17px 22px;
  border-block-end: 1px solid var(--o-bd-row);
  transition: background .22s ease-out;
}
.orchid-orders__row:last-child { border-block-end: 0; }
.orchid-orders__row:hover { background: var(--o-cream-2); }

.orchid-orders__id    { font: 500 14px/1 var(--o-serif); color: var(--o-ink); }
.orchid-orders__date,
.orchid-orders__items { font: 400 13px/1 var(--o-sans); color: var(--o-ink-3); }
.orchid-orders__total {
  font: 500 14px/1 var(--o-serif);
  color: var(--o-ink);
  white-space: nowrap;
}
.orchid-orders__total del {
  display: block;
  font: 400 11px/1 var(--o-sans);
  color: var(--o-muted-2);
}

.orchid-orders__status {
  justify-self: start;
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}
.orchid-orders__pill {
  padding: 6px 12px;
  font: 500 11px/1 var(--o-sans);
  white-space: nowrap;
  background: var(--o-moss-bg);
  color: var(--o-moss-dark);
}
.orchid-orders__pill--warn { background: var(--o-cream-3); color: var(--o-ink-2); }
.orchid-orders__pill--bad  { background: var(--o-terracotta-bg); color: var(--o-terracotta); }
.orchid-orders__pay {
  font: 400 11px/1.3 var(--o-sans);
  color: var(--o-muted-2);
}

.orchid-orders__act {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.orchid .orchid-orders__act a,
.orchid .orchid-orders__act button {
  padding: 0;
  border: 0;
  background: transparent;
  font: 500 12px/1 var(--o-sans);
  color: var(--o-moss);
}
.orchid .orchid-orders__act .orchid-orders__cancel { color: var(--o-terracotta); }

.orchid-orders__empty {
  padding: clamp(16px, 2.36vw, 34px);
  background: var(--o-cream-2);
  font: 400 15px/1.7 var(--o-sans);
  color: var(--o-muted);
}

/* ---- order detail ---- */
.orchid-orders__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 13px/1 var(--o-sans);
  color: var(--o-moss);
}
.orchid .orchid-orders__back .o-i { font-size: 18px; color: var(--o-moss); }

.orchid-orders__masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--o-gap-tight);
  flex-wrap: wrap;
  padding-block-end: 22px;
  border-block-end: 1px solid rgba(var(--o-ink-rgb), .12);
}
.orchid .orchid-orders__title {
  margin: 0;
  font: 300 clamp(21px, 2.64vw, 38px)/1 var(--o-serif);
  letter-spacing: -.015em;
  color: var(--o-ink);
}
.orchid-orders__placed { font: 400 13px/1 var(--o-sans); color: var(--o-muted-2); }

.orchid-orders__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.orchid .orchid-orders__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 20px;
  border: 1px solid var(--o-bd-cta);
  background: transparent;
  color: var(--o-ink);
  font: 500 13px/1 var(--o-sans);
  white-space: nowrap;
  transition: background .22s ease-out, color .22s ease-out;
}
.orchid .orchid-orders__btn .o-i { font-size: 17px; color: inherit; }
.orchid .orchid-orders__btn:hover { background: var(--o-ink); color: var(--o-cream); }
.orchid .orchid-orders__btn--solid {
  border-color: var(--o-btn-bg);
  background: var(--o-btn-bg);
  color: var(--o-btn-text);
  font-weight: 600;
}
.orchid .orchid-orders__btn--solid:hover {
  background: var(--o-btn-hover-bg);
  border-color: var(--o-btn-hover-bg);
  color: var(--o-btn-text);
}

.orchid-orders__lines {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--o-bd-divider);
  border: 1px solid rgba(var(--o-ink-rgb), .12);
}
.orchid-orders__line {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--o-cream);
}
.orchid-orders__line-thumb {
  width: 70px;
  height: 86px;
  flex: none;
  overflow: hidden;
  background: var(--o-cream-3);
}
.orchid-orders__line-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.orchid-orders__line-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.orchid-orders__line-name { font: 500 16px/1.3 var(--o-sans); color: var(--o-ink); }
.orchid .orchid-orders__line-name a { color: var(--o-ink); }
.orchid .orchid-orders__line-name a:hover { color: var(--o-moss); }
.orchid-orders__line-meta { font: 400 12px/1 var(--o-sans); color: var(--o-muted-2); }
.orchid-orders__line-total {
  margin-inline-start: auto;
  font: 500 16px/1 var(--o-serif);
  color: var(--o-ink);
  white-space: nowrap;
}

.orchid-orders__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
}
.orchid-orders__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: var(--o-gap-tight);
  padding-inline: clamp(12px, 1.81vw, 26px);
  border: 1px solid var(--o-bd-card);
}
.orchid-orders__card-k {
  font: 500 10px/1 var(--o-sans);
  text-transform: uppercase;
  color: var(--o-muted-2);
}
[dir="ltr"] .orchid-orders__card-k { letter-spacing: .18em; }
.orchid-orders__card-v { font: 400 14px/1.8 var(--o-sans); color: var(--o-ink-2); }

/* Money rows inside a card. Label left, figure at the inline end, hairline
   between — the same shape the PDP's shipping stack uses. */
.orchid-orders__sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 7px;
  border-block-end: 1px solid var(--o-bd-row);
  font: 400 13px/1.5 var(--o-sans);
  color: var(--o-ink-3);
}
.orchid-orders__sum:last-child { border-block-end: 0; }
.orchid .orchid-orders__sum a { color: var(--o-moss); }
.orchid-orders__sum--total {
  padding-block-start: 11px;
  border-block-start: 1px solid rgba(var(--o-ink-rgb), .2);
  font: 500 15px/1.4 var(--o-sans);
  color: var(--o-ink);
}
.orchid-orders__sum--total span:last-child { font-family: var(--o-serif); }

.orchid-orders__foot {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-block-start: 8px;
}
.orchid .orchid-orders__foot a { font: 400 13px/1 var(--o-sans); color: var(--o-moss); }
.orchid .orchid-orders__foot .orchid-orders__cancel { color: var(--o-terracotta); }
.orchid-orders__foot-sep {
  width: 1px;
  height: 13px;
  background: var(--o-bd-icon);
}

/* ===========================================================================
   41 — ADDRESS CARDS
   =========================================================================== */

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

.orchid-addr__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: var(--o-gap-tight);
  padding-inline: clamp(12px, 1.81vw, 26px);
  border: 1px solid var(--o-bd-card);
}
.orchid-addr__card--default { border-color: var(--o-moss); }

.orchid-addr__card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.orchid-addr__name { font: 500 15px/1 var(--o-sans); color: var(--o-ink); }
.orchid-addr__badge {
  padding: 4px 10px;
  background: var(--o-moss-bg);
  color: var(--o-moss);
  font: 500 10px/1 var(--o-sans);
}
.orchid .orchid-addr__edit {
  margin-inline-start: auto;
  font: 400 12px/1 var(--o-sans);
  color: var(--o-moss);
}
.orchid-addr__lines { font: 400 14px/1.7 var(--o-sans); color: var(--o-ink-3); }
.orchid-addr__phone { font: 400 13px/1 var(--o-sans); color: var(--o-muted-2); }

.orchid-addr__empty {
  padding: clamp(16px, 2.36vw, 34px);
  background: var(--o-cream-2);
  font: 400 14px/1.7 var(--o-sans);
  color: var(--o-muted);
}

/* The single billing form the platform actually stores, styled to the design's
   field atom. Reuses the auth field shell so there is one input look. */
.orchid-addr__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.orchid-addr__form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
}

/* ===========================================================================
   42 — MOBILE BOTTOM NAV      Blade: tenant/frontend/partials/mobile-footer-menu
   Design: Storefront isMobile (1872–1881).  The sticky PDP buy bar already
   ships in style.css (Phase 2h/2i) and measures .mobile-nav — that class is
   kept on the wrapper here for exactly that reason.
   =========================================================================== */

/* The platform ships `.mobile-nav { display: none }` OUTSIDE any media query and
   only turns it on (and fixes it to the bottom) inside
   `@media (min-width:300px) and (max-width:991.98px)` — custom-style.css:915.
   A bare `.orchid .orchid-mobnav { display: grid }` at (0,2,0) beats that
   `display:none` at (0,1,0) at EVERY width, so the nav rendered in normal flow
   under the footer on desktop. The display therefore has to live inside the
   breakpoint, and the hidden state has to be stated at matching specificity.

   The boundary is 760px — the theme's ONE structural switch, the same one the
   header swaps on — not the platform's 991.98px. */
.orchid .orchid-mobnav { display: none; }

@media (max-width: 759.98px) {
  .orchid .orchid-mobnav {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 99;
    display: grid;
    /* 5 is the design. The tab list is tenant-editable (Storefront hub → Header →
       Bottom bar on phones), so the count rides a custom property the blade emits
       only when it differs — an untouched shop still ships no inline style. */
    grid-template-columns: repeat(var(--o-mobnav-cols, 5), 1fr);
    background: var(--o-cream);
    border-block-start: 1px solid rgba(var(--o-ink-rgb), .12);
    padding-block: 9px 12px;
    box-shadow: none;
  }

  /* Clear the fixed bar so it never covers the last rows of the footer.
     62px is the design's own offset for this nav (isMProduct pins its sticky
     buy bar the same distance up). */
  .orchid .orchid-footer {
    padding-block-end: calc(calc(clamp(12px, 1.81vw, 26px) * var(--o-footer-scale)) + 62px);
  }
}

.orchid .orchid-mobnav__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  min-height: 44px;
  justify-content: center;
  color: var(--o-muted-3);
}
.orchid .orchid-mobnav__item .o-i { font-size: 22px; color: inherit; }
.orchid .orchid-mobnav__item span:not(.o-i):not(.o-count) {
  font: 500 9px/1 var(--o-sans);
  color: inherit;
}
.orchid .orchid-mobnav__item.is-active { color: var(--o-ink); }

/* Count bubble reuses the header's atom so both badges are one shape, and
   :empty keeps a zero count out of the layout without a server round trip. */
.orchid .orchid-mobnav__item .o-count {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: calc(50% - 20px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--o-moss);
  color: var(--o-cream);
  font: 600 10px/1 var(--o-serif);
}
.orchid .orchid-mobnav__item .o-count:empty { display: none; }

/* ===========================================================================
   47 — SEARCH RESULTS + EMPTY / 404 STATE
   Blade: themes/aromatic/frontend/shop/product-single-search.blade.php
   Design: Widgets w.isSearchState (1287–1318) — no full storefront screen
   exists for this component, so the page frame below is composed from the
   design system's own section ramp.
   =========================================================================== */

.orchid-search {
  padding-block: var(--o-sec-pt) var(--o-sec-pb);
  padding-inline: var(--o-sec-pi);
  background: var(--o-cream);
  color: var(--o-ink);
}

.orchid-search__head {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-block-end: 22px;
  border-block-end: 1px solid rgba(var(--o-ink-rgb), .12);
}
.orchid-search__label { font: 400 11px/1 var(--o-sans); color: var(--o-muted-2); }
.orchid .orchid-search__q {
  margin: 0;
  font: 300 clamp(20px, 2.08vw, 30px)/1.1 var(--o-serif);
  color: var(--o-ink);
}
.orchid-search__count { font: 400 12px/1 var(--o-sans); color: var(--o-sage); }

.orchid-search__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 320px), 1fr));
  gap: var(--o-gap);
  padding-block-start: clamp(11px, 1.53vw, 22px);
}

/* -- empty state. Doubles as the 404 body, per the design's own note. -- */
.orchid-search__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 13px;
  margin-block-start: clamp(11px, 1.53vw, 22px);
  padding: clamp(16px, 2.36vw, 34px);
  background: var(--o-cream-2);
}
.orchid-search__empty-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--o-cream-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.orchid-search__empty-mark .o-i { font-size: 26px; color: var(--o-sage); }

.orchid .orchid-search__empty-title {
  margin: 0;
  font: 400 clamp(18px, 1.81vw, 26px)/1.15 var(--o-serif);
  color: var(--o-ink);
}
.orchid-search__empty-body {
  max-width: 40ch;
  font: 400 12px/1.8 var(--o-sans);
  color: var(--o-muted);
}
.orchid-search__sugg-label {
  padding-block-start: 4px;
  font: 500 10px/1 var(--o-sans);
  text-transform: uppercase;
  color: var(--o-sage);
}
[dir="ltr"] .orchid-search__sugg-label { letter-spacing: .16em; }

.orchid-search__sugg { display: flex; flex-wrap: wrap; gap: 7px; }
.orchid .orchid-search__sugg a {
  padding: 8px 13px;
  background: var(--o-cream);
  border: 1px solid var(--o-bd-card);
  font: 400 11px/1 var(--o-sans);
  color: var(--o-ink-2);
  white-space: nowrap;
  transition: border-color .22s ease-out, color .22s ease-out;
}
.orchid .orchid-search__sugg a:hover { border-color: var(--o-ink); color: var(--o-ink); }

.orchid .orchid-search__back {
  margin-block-start: 4px;
  padding: 16px clamp(13px, 2.22vw, 32px);
  background: var(--o-btn-bg);
  color: var(--o-btn-text);
  font: 600 14px/1 var(--o-sans);
  transition: background .22s ease-out;
}
.orchid .orchid-search__back:hover { background: var(--o-btn-hover-bg); color: var(--o-btn-text); }

/* ===========================================================================
   Cascade repairs — every one of these is a platform rule that outranks a
   single-class Orchid selector on markup that kept a platform hook.
   =========================================================================== */

/* user-dashboard/style.css is not loaded on the aromatic branch, but
   frontend-page-master still ships Bootstrap. Neutralise its table/list
   defaults inside the account shell only. */
.orchid .orchid-dash__body ul,
.orchid .orchid-dash__body ol { margin: 0; padding: 0; list-style: none; }

/* Laravel's paginator markup, reused by the journal, orders and search pages.
   Phase 2 styles `.orchid-pager`; these pages get the same treatment from a
   two-class selector so the later sheet cannot lose the tie. */
.orchid .orchid-journal .pagination,
.orchid .orchid-search .pagination,
.orchid .orchid-dash__body .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  margin-block-start: var(--o-gap-loose);
  list-style: none;
}
.orchid .orchid-journal .pagination a,
.orchid .orchid-journal .pagination span,
.orchid .orchid-search .pagination a,
.orchid .orchid-search .pagination span,
.orchid .orchid-dash__body .pagination a,
.orchid .orchid-dash__body .pagination span {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--o-bd-icon);
  border-radius: 0;
  background: transparent;
  color: var(--o-ink);
  font: 500 13px/1 var(--o-sans);
}
.orchid .orchid-journal .pagination .active span,
.orchid .orchid-search .pagination .active span,
.orchid .orchid-dash__body .pagination .active span {
  background: var(--o-ink);
  border-color: var(--o-ink);
  color: var(--o-cream);
}

/* ---------------------------------------------------------------------------
   SAFETY NET for the account screens that were NOT ported.

   The aromatic branch of user-master skips user-dashboard/css/{style,
   custom-style}.css for EVERY child of the shell, but Phase 4 only rebuilt
   four of them (dashboard, order list, order detail, address book). Wallet,
   loyalty points, downloads, refunds, support tickets, view ticket, edit
   profile, change password and three of manage-account's four tabs still emit
   their pre-Orchid markup — which would otherwise arrive with no stylesheet at
   all.

   So: map that markup onto the design's own field, button and table atoms.
   This is deliberately a floor, not a port. Those screens read coherently;
   they are not pixel-matched to anything, because the design has no screen for
   them. Delete each block as its screen gets a real port.
   --------------------------------------------------------------------------- */
.orchid .orchid-dash__body .seller-profile-details-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--o-gap-tight);
}

.orchid .orchid-dash__body .title-seller,
.orchid .orchid-dash__body .edit-title {
  margin: 0;
  font: 300 clamp(15px, 1.94vw, 28px)/1.1 var(--o-serif);
  color: var(--o-dash-text);
}

.orchid .orchid-dash__body .single-dashboard-input {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
}

.orchid .orchid-dash__body .single-info-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 !important;
}

.orchid .orchid-dash__body .info-title,
.orchid .orchid-dash__body label {
  margin: 0;
  font: 400 12px/1 var(--o-sans);
  color: var(--o-muted-2);
}

.orchid .orchid-dash__body .form--control,
.orchid .orchid-dash__body .form-control {
  width: 100%;
  min-height: 48px;
  padding: 15px 16px;
  border: 1px solid var(--o-bd-input);
  border-radius: 0;
  background: var(--o-cream);
  color: var(--o-ink);
  font-family: var(--o-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color .22s ease-out;
}
.orchid .orchid-dash__body .form--control:hover,
.orchid .orchid-dash__body .form--control:focus,
.orchid .orchid-dash__body .form-control:hover,
.orchid .orchid-dash__body .form-control:focus {
  border-color: var(--o-moss);
  outline: none;
}
.orchid .orchid-dash__body textarea.form--control,
.orchid .orchid-dash__body textarea.form-control { min-height: 120px; resize: vertical; }

.orchid .orchid-dash__body .btn-submit,
.orchid .orchid-dash__body .btn-default,
.orchid .orchid-dash__body button[type="submit"] {
  align-self: flex-start;
  padding: 16px clamp(13px, 2.22vw, 32px);
  border: 0;
  border-radius: 0;
  background: var(--o-btn-bg);
  color: var(--o-btn-text);
  font-family: var(--o-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: background .22s ease-out;
}
.orchid .orchid-dash__body .btn-submit:hover,
.orchid .orchid-dash__body .btn-default:hover,
.orchid .orchid-dash__body button[type="submit"]:hover {
  background: var(--o-btn-hover-bg);
  color: var(--o-btn-text);
}

/* Wide tables scroll; they never crush. */
.orchid .orchid-dash__body .table-responsive,
.orchid .orchid-dash__body .order-history-inner { overflow-x: auto; }

.orchid .orchid-dash__body table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  border: 1px solid var(--o-bd-card);
}
.orchid .orchid-dash__body table th {
  padding: 15px 22px;
  background: var(--o-cream-2);
  border-block-end: 1px solid rgba(var(--o-ink-rgb), .12);
  font: 500 10px/1 var(--o-sans);
  text-transform: uppercase;
  color: var(--o-muted-2);
  text-align: start;
}
[dir="ltr"] .orchid .orchid-dash__body table th { letter-spacing: .18em; }

.orchid .orchid-dash__body table td {
  padding: 17px 22px;
  border-block-end: 1px solid var(--o-bd-row);
  font: 400 13px/1.5 var(--o-sans);
  color: var(--o-ink-3);
  vertical-align: middle;
}

/* manage-account.blade.php drives its four sections with Bootstrap 5 pills
   (`data-bs-toggle="pill"`), which arrive blue with a 4px radius, and ships an
   inline <style> that paints the media-upload button `--main-color-one` — the
   stock red no Orchid token feeds. Both are restated here rather than in the
   shared blade, which all eight themes render.
   Two classes beat Bootstrap's single-class `.nav-link`, so no !important. */
.orchid .orchid-dash__body .nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--o-gap-tight);
  padding: 0;
  list-style: none;
}
.orchid .orchid-dash__body .nav-pills .nav-link {
  padding: 9px 18px;
  border: 1px solid var(--o-bd-input);
  border-radius: 999px;
  background: transparent;
  color: var(--o-ink-2);
  font: 500 13px/1 var(--o-sans);
  transition: border-color .22s ease-out, background .22s ease-out, color .22s ease-out;
}
.orchid .orchid-dash__body .nav-pills .nav-link:hover {
  border-color: var(--o-ink);
  color: var(--o-ink);
}
.orchid .orchid-dash__body .nav-pills .nav-link.active {
  background: var(--o-ink);
  border-color: var(--o-ink);
  color: var(--o-cream);
}
.orchid .orchid-dash__body .tab-content { margin-block-start: var(--o-gap-tight) !important; }

.orchid .orchid-dash__body .media-upload-btn-wrapper .btn-info {
  width: auto;
  padding: 12px 20px;
  border-radius: 0;
  border-color: var(--o-bd-cta);
  background: transparent;
  color: var(--o-ink);
  font: 500 13px/1 var(--o-sans);
}
.orchid .orchid-dash__body .media-upload-btn-wrapper .btn-info:hover {
  background: var(--o-ink);
  border-color: var(--o-ink);
  color: var(--o-cream);
}

/* Back-to-top. The theme's pre-Orchid rule (style.css:15408) paints it
   `--main-color-one` — the stock red no Orchid token feeds — with a 5px radius
   and a physical `right: 30px`. `backtop.blade.php` renders outside any
   `.orchid` wrapper, so this cannot be scoped that way; it wins instead on
   source order, orchid-account.css loading after style.css at equal (0,1,0).

   `inset-inline-start: auto` is doing real work: the legacy `right: 30px`
   survives into RTL as the *start* side, so setting only `inset-inline-end`
   would leave the button constrained from both edges (pitfall 24). Clearing
   the start side neutralises it without writing a physical property. */
.back-to-top {
  inset-inline-end: 30px;
  inset-inline-start: auto;
  width: 46px;
  height: 46px;
  line-height: 46px;
  border-radius: 0;
  background-color: var(--o-ink);
  color: var(--o-cream);
  font-size: 20px;
  box-shadow: none;
  border: 1px solid rgba(var(--o-ink-rgb), .25);
  transition: background-color .22s ease-out;
}
.back-to-top:hover { background-color: var(--o-moss); color: var(--o-cream); }

@media (max-width: 759.98px) {
  /* Clear the fixed bottom nav — the platform's own `.forMobile-nav` variant
     assumes its 75px bar, not the design's 62px one. */
  .back-to-top { inset-block-end: calc(62px + 14px); }
}

/* x-error-msg / x-flash-msg render Bootstrap alerts with a 4px radius. */
.orchid .alert {
  border-radius: 0;
  font-family: var(--o-sans);
  font-size: 13px;
  line-height: 1.6;
}
.orchid .alert-danger  { background: var(--o-terracotta-bg); border-color: var(--o-terracotta); color: var(--o-terracotta); }
.orchid .alert-warning { background: var(--o-cream-2);       border-color: var(--o-bd-card);    color: var(--o-ink-2); }
.orchid .alert-success { background: var(--o-moss-bg);       border-color: var(--o-moss);       color: var(--o-moss-dark); }

/* intlTelInput injects its own flag dropdown into the phone field. It sets a
   fixed 4px radius and a white background on the country list. */
.orchid .iti { width: 100%; }
.orchid .iti__country-list {
  border-radius: 0;
  background: var(--o-cream);
  border-color: var(--o-bd-input);
  font-family: var(--o-sans);
}
.orchid .iti__country { color: var(--o-ink-2); }
.orchid .iti__country.iti__highlight { background: var(--o-cream-2); }