/* Viewing the marketplace as a vendor (decided 2026-11-02, js/viewer.js): a dark
   band under the header says whose view this is, the vendor's own listings are
   marked, and where stores buy, the viewer reads who orders here. */

.workspace-notice:empty { display: none; }
.viewer-notice { background: #20211f; color: #f4f4ef; }
.viewer-notice-inner { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px var(--page-gutter); }
.viewer-notice .viewer-notice-icon { flex: 0 0 auto; width: 20px; height: 20px; color: #b9bbb2; }
.viewer-notice-text { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; line-height: 1.45; }
.viewer-notice-text strong { margin-right: 6px; color: #fff; font-weight: 650; }
.viewer-notice-text span { color: #c9cbc2; }
.viewer-notice-link { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 36px; padding: 6px 14px; border: 1px solid #5d5f58; border-radius: 7px; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.viewer-notice-link:hover { border-color: #8d8f87; background: #33342f; }
.viewer-notice-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 700px) {
  .viewer-notice-inner { flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; padding: 12px var(--page-gutter) 14px; }
  .viewer-notice .viewer-notice-icon { margin-top: 1px; }
  .viewer-notice-text { flex-basis: calc(100% - 30px); font-size: 13px; }
  .viewer-notice-text strong { display: block; margin: 0 0 2px; font-size: 14px; }
  .viewer-notice-link { min-height: 44px; margin-left: 30px; }
}

/* The vendor's own listings: marked on the photo, outlined, with Edit listing. */
.product-card .own-listing-badge { position: absolute; inset: 11px 11px auto auto; z-index: 2; display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 20px; background: #20211f; color: #fff; font-size: 11px; font-weight: 650; line-height: 1.2; }
.portal-workspace-shell .grid-view .product-card.is-own-listing { border-color: #303030; }
.portal-workspace-shell .grid-view .viewer-card-actions { margin-top: 14px; }

/* The listing page: who orders here, and Edit in StemLot Vendor for the vendor's own. */
.viewer-purchase { display: grid; gap: 14px; }
.viewer-purchase-note { margin: 0; color: #5f615b; font-size: 14px; line-height: 1.5; }
.viewer-purchase-note strong { color: #20211f; font-weight: 650; }
.viewer-purchase-edit { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 18px; border: 1px solid #1c1c1c; border-radius: 8px; background: #1c1c1c; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.viewer-purchase-edit:hover { border-color: #373737; background: #373737; }
.viewer-purchase-edit:focus-visible { outline: 2px solid #2463c5; outline-offset: 2px; }

/* Vendor pages: the vendor's own card and its store profile. */
.own-vendor-tag { align-self: flex-start; flex: 0 0 auto; margin-left: auto; padding: 4px 9px; border-radius: 20px; background: #20211f; color: #fff; font-size: 11px; font-weight: 650; line-height: 1.3; }
.vendor-card.is-own-vendor { border-color: #303030; }
a.vendor-message { text-decoration: none; }
a.vendor-message:focus-visible { outline: 2px solid #2463c5; outline-offset: 2px; }

/* The account menu: who is signed in, StemLot Vendor and Sign out. */
.viewer-menu > summary.header-account { display: inline-flex; }
.viewer-menu .viewer-dropdown { left: auto; right: 0; width: 264px; }
.viewer-menu[open]::after { left: auto; right: 0; }
.viewer-dropdown-identity { display: grid; gap: 2px; margin: 0 0 6px; padding: 8px 12px 12px; border-bottom: 1px solid #ececec; color: #6b6b6b; font-size: 12px; line-height: 1.4; }
.viewer-dropdown-identity strong { color: #222; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.navigation-signout { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
@media (max-width: 900px) {
  .portal-workspace-shell .workspace-header .header-actions .viewer-menu { display: none; }
  .mobile-account-footer .navigation-signout { min-height: 48px; font-size: 14px; }
}