:root {
  color-scheme: light;
  --ink: #1E1E1E;
  --muted: #6E7C74;
  --line: #DDEBE3;
  --paper: #F6FBF8;
  --surface: #ffffff;
  --leaf: #1F5C45;
  --moss: #2E7D5B;
  --petal: #49A46C;
  --rose: #CFEFE0;
  --sky: #d8e6ef;
  --amber: #f2b84b;
  --shadow: 0 18px 45px rgba(32, 32, 30, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

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

button {
  cursor: pointer;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(360px, 680px) minmax(0, 1fr);
  align-items: center;
  gap: 8px 18px;
  min-height: 104px;
  padding: 20px clamp(16px, 4vw, 48px) 18px;
  background: rgba(251, 250, 246, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  grid-row: 1 / 3;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}

.brand-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--leaf);
  box-shadow: 0 6px 16px rgba(36, 91, 69, 0.16);
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.role-switcher {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(680px, 100%);
  min-width: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.role-button,
.rail-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  min-height: 40px;
  min-width: 0;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}

.role-button.is-active,
.rail-button.is-active {
  background: var(--leaf);
  color: #fff;
}

.demo-role-note {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  width: min(680px, 100%);
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  line-height: 1.35;
}

.view {
  display: none;
}

.view.is-active {
  display: block;
}

.retail-hero {
  position: relative;
  min-height: min(680px, calc(100vh - 72px));
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.retail-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.retail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(251, 250, 246, 0.94), rgba(251, 250, 246, 0.58) 45%, rgba(251, 250, 246, 0.16));
}

.hero-copy {
  position: relative;
  z-index: 1;
  width: min(860px, calc(100% - 32px));
  padding: clamp(28px, 7vw, 72px) clamp(16px, 4vw, 48px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -8px 0 18px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--petal);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

h1 {
  max-width: 720px;
  margin-bottom: 24px;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.96;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 12px;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.05;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 8px;
  font-size: 20px;
}

.search-panel {
  display: grid;
  grid-template-columns: 180px 210px minmax(220px, 1fr);
  gap: 12px;
  width: min(780px, 100%);
  padding: 12px;
  border: 1px solid rgba(36, 91, 69, 0.18);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow);
}

.category-filter-field {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
}

.category-filter-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.category-state-holder {
  display: none !important;
}

.category-button-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.category-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}

.category-button.is-active {
  border-color: var(--leaf);
  background: var(--leaf);
  color: #fff;
}

.search-input-wrap {
  position: relative;
  display: block;
}

.search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.search-input-wrap input {
  padding-left: 38px;
}

.search-suggestion-text {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.search-suggestion-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.search-suggestion-chip {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--leaf);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 900;
}

label {
  display: grid;
  gap: 6px;
}

label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
}

textarea {
  resize: vertical;
}

.band {
  padding: clamp(30px, 5vw, 64px) clamp(16px, 4vw, 48px);
}

.buyer-cabinet-band,
.marketplace-category-band {
  padding-top: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.48);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.section-head.compact {
  align-items: center;
}

.muted {
  color: var(--muted);
}

.shop-grid,
.product-grid,
.b2b-grid,
.purchase-grid,
.b2b-summary,
.metric-grid,
.buyer-cabinet-grid,
.marketplace-category-grid,
.admin-grid {
  display: grid;
  gap: 16px;
}

.buyer-cabinet-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.buyer-cabinet-card,
.marketplace-category-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.buyer-cabinet-card h3 {
  margin-bottom: 0;
}

.buyer-home-hidden {
  display: none !important;
}

.recent-product-list {
  display: grid;
  gap: 8px;
}

.recent-product-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf6;
  color: var(--ink);
  padding: 8px;
  text-align: left;
}

.recent-product-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-category-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.marketplace-category-card {
  min-height: 132px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.marketplace-category-card span {
  font-size: 17px;
  font-weight: 900;
}

.marketplace-category-card small {
  color: var(--muted);
  line-height: 1.25;
}

.marketplace-category-card strong {
  align-self: end;
  color: var(--leaf);
  font-size: 13px;
}

.shop-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.shop-card,
.product-card,
.review-card,
.manager-card,
.b2b-card,
.registration-card,
.metric,
.profile-form,
.review-form,
.order-panel,
.admin-grid section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.shop-card,
.product-card,
.review-card,
.manager-card,
.b2b-card,
.registration-card,
.metric,
.profile-form,
.review-form,
.order-panel,
.admin-grid section {
  padding: 18px;
}

.shop-card {
  display: grid;
  gap: 10px;
  min-height: 190px;
}

.registration-card {
  display: grid;
  align-content: start;
  gap: 10px;
}

.rating-row,
.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shop-actions {
  justify-content: flex-end;
}

.inline-action {
  margin-left: 8px;
}

.pill,
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--sky);
  color: #264252;
  font-size: 12px;
  font-weight: 800;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.product-card {
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  gap: 10px;
  overflow: hidden;
}

.product-thumb {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.product-thumb h3 {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.flower-chip {
  order: -1;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(32, 32, 30, 0.08);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 32%, var(--rose) 0 12%, transparent 13%),
    radial-gradient(circle at 42% 45%, #fff 0 13%, transparent 14%),
    radial-gradient(circle at 58% 46%, #f0a7b5 0 13%, transparent 14%),
    radial-gradient(circle at 50% 58%, #f7c24d 0 10%, transparent 11%),
    linear-gradient(145deg, #e8efe2, #fff);
}

.product-card-media {
  order: -1;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
}

.price {
  font-size: 19px;
  font-weight: 900;
  white-space: nowrap;
}

.product-shop-line {
  display: grid;
  gap: 8px;
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
}

.product-shop-line span {
  display: -webkit-box;
  overflow: hidden;
  min-width: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-shop-line .mini-action {
  width: 100%;
}

.product-meta {
  display: grid;
  gap: 3px;
  margin: 0 0 6px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.product-meta div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.product-meta dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.product-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.product-review-snippet {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf6;
}

.product-review-snippet strong {
  font-size: 12px;
}

.product-review-snippet p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-card > p.muted {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


.marketplace-category-card.is-active {
  outline: 3px solid rgba(215,47,216,.26);
  box-shadow: 0 16px 34px rgba(155,54,255,.16);
}

.marketplace-category-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #f6edff;
  font-size: 24px !important;
}

.marketplace-subcategory-panel {
  margin-top: 14px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(58,45,83,.07);
  padding: 16px;
}

.marketplace-subcategory-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.marketplace-subcategory-head strong {
  font-size: 18px;
}

.marketplace-subcategory-head span {
  color: #6E7C74;
  font-weight: 700;
}

.marketplace-subcategory-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.marketplace-subcategory-list::-webkit-scrollbar {
  display: none;
}

.marketplace-subcategory-chip {
  min-width: 180px;
  display: grid;
  gap: 7px;
  border: 0;
  border-radius: 22px;
  background: #f6f4fb;
  color: #1E1E1E;
  padding: 14px;
  text-align: left;
}

.marketplace-subcategory-chip span {
  font-weight: 1000;
}

.marketplace-subcategory-chip small {
  color: #6E7C74;
  line-height: 1.25;
}

.marketplace-subcategory-chip strong {
  color: var(--market-pink);
}

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 22px;
  align-items: start;
}

.order-panel {
  position: sticky;
  top: 92px;
}

.buyer-orders-block {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.stack {
  display: grid;
  gap: 12px;
}

.cart-items,
.review-list,
.manager-list {
  display: grid;
  gap: 12px;
}

.order-item-list {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 0;
  list-style: none;
}

.order-item-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.empty-state {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
}

.retail-assist-block {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.assist-panel {
  display: grid;
  gap: 12px;
}

.assist-panel h3 {
  margin-bottom: 0;
}

.primary-action,
.secondary-action,
.mini-action,
.danger-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.primary-action {
  background: var(--leaf);
  color: #fff;
}

.secondary-action {
  background: var(--ink);
  color: #fff;
}

.mini-action {
  background: var(--rose);
  color: #642330;
}

.danger-action {
  background: #fff0ed;
  color: #943323;
}

.is-disabled {
  pointer-events: none;
  opacity: 0.55;
}

.status-text {
  margin: 12px 0 0;
  color: var(--leaf);
  font-weight: 800;
}

.status-note {
  margin: 8px 0 0;
  color: var(--petal);
  font-size: 13px;
  font-weight: 900;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.workspace-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: calc(100vh - 72px);
}

.side-rail {
  position: sticky;
  top: 72px;
  align-self: start;
  display: grid;
  gap: 10px;
  min-height: calc(100vh - 72px);
  padding: 28px;
  border-right: 1px solid var(--line);
  background: #f4f3eb;
}

.side-rail h1 {
  font-size: 38px;
}

.rail-button {
  width: 100%;
  text-align: left;
  padding: 0 14px;
  border-radius: 8px;
}

.workspace-main,
.admin-shell {
  padding: clamp(24px, 4vw, 48px);
}

.shop-tab {
  display: none;
}

.shop-tab.is-active {
  display: grid;
  gap: 22px;
}

.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 800;
}

.metric strong {
  font-size: 34px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.manager-card {
  display: grid;
  gap: 10px;
}

.cart-shop-group.is-selected {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(33, 78, 56, 0.12);
}

.cart-product-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart-product-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.manager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-chat-thread {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.order-chat-thread p {
  margin: 0;
  color: var(--muted);
}

.order-chat-thread span {
  color: var(--ink);
  font-weight: 700;
}

.order-action-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--accent-soft);
  border-radius: 8px;
  background: #f7fbf5;
}

.order-action-panel label {
  display: grid;
  gap: 6px;
}

.order-action-panel textarea,
.order-action-panel select {
  width: 100%;
}

.admin-retail-orders-section {
  grid-column: 1 / -1;
}

.admin-order-card {
  gap: 14px;
}

.admin-order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.admin-order-grid p {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf6;
}

.admin-order-grid span,
.order-history-list span,
.order-history-list small {
  color: var(--muted);
}

.order-history-details summary {
  cursor: pointer;
  font-weight: 900;
}

.order-history-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.order-history-list li {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.product-card .manager-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.product-card .manager-actions button {
  min-height: 34px;
  min-width: 0;
  padding: 7px 6px;
  font-size: 12px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.product-card .card-row {
  display: grid;
  gap: 8px;
}

.product-card .status-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
}

.b2b-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.purchase-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.b2b-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.b2b-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.check-row input {
  width: auto;
  min-height: auto;
}

.b2b-card {
  display: grid;
  gap: 10px;
  min-height: 240px;
}

.purchase-card {
  min-height: 300px;
}

.purchase-actions {
  display: grid;
  gap: 12px;
  align-items: start;
}

.action-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.mini-spec {
  display: grid;
  gap: 8px;
  margin: 0;
}

.mini-spec div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px;
}

.mini-spec dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.mini-spec dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

dialog {
  max-width: min(560px, calc(100vw - 30px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(32, 32, 30, 0.44);
}

.wide-dialog {
  width: min(860px, calc(100vw - 30px));
  max-height: min(86vh, 840px);
  overflow: auto;
}

.profile-dialog {
  width: min(1080px, calc(100vw - 24px));
  max-width: min(1080px, calc(100vw - 24px));
  max-height: min(90vh, 920px);
  overflow: auto;
}

.dialog-card {
  position: relative;
  padding: 28px;
  background: var(--surface);
}

.shop-contact-card {
  display: grid;
  gap: 14px;
  max-width: 100%;
  overflow: hidden;
}

.profile-page {
  display: grid;
  gap: 22px;
  padding: 0;
}

.profile-page > div {
  display: grid;
  gap: 20px;
}

.profile-hero {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 34px 34px 28px;
  background:
    linear-gradient(135deg, rgba(36, 91, 69, 0.96), rgba(97, 123, 72, 0.9)),
    var(--leaf);
  color: #fff;
}

.supplier-profile-hero {
  background:
    linear-gradient(135deg, rgba(32, 32, 30, 0.94), rgba(36, 91, 69, 0.9)),
    var(--leaf);
}

.profile-hero .eyebrow,
.profile-hero .muted {
  color: rgba(255, 255, 255, 0.78);
}

.profile-hero h2 {
  margin-bottom: 8px;
  color: #fff;
  font-size: clamp(30px, 5vw, 54px);
}

.profile-hero p {
  max-width: 760px;
}

.profile-logo {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 28px;
  font-weight: 900;
}

.profile-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 10px;
}

.media-preview-item {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 116px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf6;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.media-preview-item img,
.media-preview-item video {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: var(--paper);
  object-fit: cover;
}

.video-limit-note {
  display: block;
  margin-top: 6px;
  color: var(--moss);
  font-size: 12px;
  font-weight: 800;
}

.video-limit-note.is-error {
  color: var(--petal);
}

.profile-page-section {
  display: grid;
  gap: 14px;
  padding: 0 34px 26px;
}

.profile-page-section h3 {
  font-size: 22px;
}

.profile-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.profile-spec-grid div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf6;
}

.profile-spec-grid dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.profile-spec-grid dd {
  margin: 4px 0 0;
}

.profile-product-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.profile-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.icon-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 24px;
  line-height: 1;
}

.icon-button.close-dialog {
  position: absolute;
  top: 12px;
  right: 12px;
}

.spec-list {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.spec-list div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
}

.spec-list dt {
  color: var(--muted);
  font-weight: 900;
}

.spec-list dd {
  margin: 0;
}

.dialog-section {
  margin-top: 18px;
}

.dialog-section h3 {
  font-size: 18px;
}

.dialog-reviews {
  display: grid;
  gap: 10px;
}

.dialog-media {
  margin-top: 14px;
}

.dialog-review {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf6;
}

.reviews-admin-head {
  margin-top: 22px;
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: auto;
    padding-block: 16px;
  }

  .brand {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
  }

  .role-switcher {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    align-self: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(560px, 100%);
    max-width: 560px;
    border-radius: 12px;
  }

  .role-button {
    border-radius: 8px;
  }

  .demo-role-note {
    grid-column: 1;
    grid-row: auto;
    width: min(560px, 100%);
    margin-top: 0;
  }

  .search-panel,
  .two-column,
  .workspace-layout,
  .admin-grid,
  .b2b-filter-grid {
    grid-template-columns: 1fr;
  }

  .category-button-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-grid,
  .product-grid,
  .registration-grid,
  .b2b-grid,
  .purchase-grid,
  .b2b-summary,
  .buyer-cabinet-grid,
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .side-rail,
  .order-panel {
    position: static;
  }

  .side-rail {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .profile-hero {
    grid-template-columns: 1fr;
    padding: 28px 20px 24px;
  }

  .profile-page-section {
    padding-inline: 20px;
  }

  .profile-spec-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .topbar {
    align-items: stretch;
    gap: 10px;
    padding-block: 14px;
  }

  .shop-grid,
  .registration-grid,
  .b2b-grid,
  .purchase-grid,
  .b2b-summary,
  .buyer-cabinet-grid,
  .metric-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .role-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    border-radius: 8px;
  }

  .role-button {
    min-height: 38px;
    border-radius: 6px;
    font-size: 14px;
  }

  .category-button-grid {
    grid-template-columns: 1fr;
  }

  .shop-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .shop-actions .mini-action:first-child {
    grid-column: 1 / -1;
  }

  .shop-actions .mini-action {
    min-width: 0;
    padding-inline: 8px;
  }

  .mini-spec div {
    grid-template-columns: 1fr;
  }

  .product-shop-line {
    align-items: stretch;
    flex-direction: column;
  }

  .retail-hero {
    min-height: 720px;
  }

  .retail-hero::after {
    background: linear-gradient(180deg, rgba(251, 250, 246, 0.96), rgba(251, 250, 246, 0.7) 58%, rgba(251, 250, 246, 0.28));
  }

  h1 {
    font-size: 42px;
  }

  .section-head,
  .card-row,
  .rating-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 430px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Explicit app navigation: visible back and home controls for every section. */
.app-navigation-controls,
.dialog-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.app-navigation-controls {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: end;
  margin-left: 0;
}

.nav-control {
  border: 1px solid rgba(49, 92, 75, 0.18);
  background: rgba(255, 255, 255, 0.88);
  color: #244538;
  border-radius: 999px;
  padding: 9px 13px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(21, 38, 31, 0.08);
}

.nav-control:hover,
.nav-control:focus-visible {
  background: #ffffff;
  border-color: rgba(49, 92, 75, 0.36);
  outline: none;
  transform: translateY(-1px);
}

.nav-home {
  background: #315c4b;
  color: #ffffff;
}

.nav-home:hover,
.nav-home:focus-visible {
  background: #274c3e;
}

.dialog-navigation {
  margin: 0 0 16px;
  padding-right: 42px;
}

.shop-contact-navigation {
  align-items: flex-start;
  margin-bottom: 4px;
  padding-right: 48px;
  max-width: 100%;
}

.shop-contact-navigation .nav-control {
  flex: 1 1 128px;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.shop-contact-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.shop-contact-actions > * {
  min-width: 0;
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

@media (max-width: 560px) {
  .shop-contact-card {
    padding: 22px;
  }

  .shop-contact-navigation {
    padding-right: 44px;
  }

  .shop-contact-navigation .nav-control {
    flex-basis: calc(50% - 6px);
    padding-inline: 10px;
  }

  .shop-contact-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .app-navigation-controls {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    align-self: auto;
    width: min(560px, 100%);
    justify-content: center;
  }
}

@media (max-width: 680px) {
  .app-navigation-controls {
    width: 100%;
  }

  .nav-control {
    flex: 1 1 140px;
    padding-inline: 10px;
  }
}

/* Marketplace mobile layout inspired by large retail apps: clear address, search, promo tiles, product grid, cart/profile navigation. */
:root {
  --market-pink: #49A46C;
  --market-violet: #1F5C45;
  --market-red: #2E7D5B;
  --market-orange: #A8FF3E;
  --market-bg: #F6FBF8;
  --market-soft: #E7F6EC;
}

body {
  background: var(--market-bg);
  padding-bottom: 82px;
}

.topbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 0;
  box-shadow: 0 8px 30px rgba(31, 92, 69, 0.08);
}

.nav-control,
.nav-home {
  border-radius: 999px;
}

.retail-hero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  overflow: visible;
  border-bottom: 0;
  background: #fff;
  padding: 18px clamp(16px, 4vw, 44px) 24px;
}

.retail-hero::after {
  display: none;
}

.retail-hero > img {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: clamp(260px, 32vw, 420px);
  margin: 0 auto;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 16px 42px rgba(31, 92, 69, 0.13);
}

.hero-copy.market-home-screen {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.market-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.market-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #22212a;
  padding: 0;
  font-size: clamp(19px, 4vw, 30px);
  font-weight: 900;
  line-height: 1.1;
  text-align: left;
}

.market-location span {
  color: #8A988D;
}

.market-header-icons {
  display: flex;
  gap: 10px;
}

.market-header-icons button,
.market-bottom-nav button {
  position: relative;
  border: 0;
  background: transparent;
}

.market-header-icons button {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: var(--market-pink);
  background: #fff;
  box-shadow: 0 8px 20px rgba(31, 92, 69, 0.12);
  font-size: 25px;
}

.market-brand-pill {
  width: max-content;
  margin: 2px auto 22px;
  padding: 7px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--market-violet), var(--market-pink));
  color: #fff;
  font-weight: 1000;
  letter-spacing: -0.02em;
  box-shadow: 0 10px 25px rgba(73, 164, 108, 0.18);
}

.market-home-screen .eyebrow {
  display: none;
}

.market-home-screen h1 {
  margin-bottom: 8px;
  font-size: clamp(34px, 8vw, 64px);
  letter-spacing: -0.04em;
}

.hero-muted {
  max-width: 620px;
  margin-bottom: 18px;
}

.hero-actions {
  margin: 0 0 16px;
}

.search-panel {
  width: min(900px, 100%);
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.search-panel .city-field {
  max-width: 420px;
  display: grid;
  gap: 7px;
  margin-bottom: 2px;
}

.search-panel .city-field span {
  display: inline-block !important;
  color: #6f6b7c;
  font-size: 13px;
  font-weight: 900;
}

.search-panel .city-field input {
  min-height: 46px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(31,92,69,.08);
  color: #1E1E1E;
  padding: 0 16px;
  font-weight: 900;
}

.search-panel .city-field {
  display: grid;
}

.search-panel label > span:first-child,
.category-filter-field > span {
  display: none;
}

.search-input-wrap {
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  border-radius: 24px;
  background: #E7F6EC;
  padding: 0 16px;
}

.search-icon {
  color: #49A46C !important;
  font-size: 31px !important;
  font-weight: 900 !important;
}

.search-input-wrap input {
  min-height: 58px;
  border: 0;
  background: transparent;
  color: #1E1E1E;
  padding: 0;
  font-size: 20px;
  font-weight: 800;
}

.search-input-wrap input::placeholder {
  color: #8A988D;
}

.category-button-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: none;
}

.category-button-grid::-webkit-scrollbar {
  display: none;
}

.category-button {
  min-height: 38px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: #E7F6EC;
  color: #1F5C45;
  padding: 8px 13px;
  font-weight: 900;
}

.category-button.is-active {
  color: #fff;
  background: linear-gradient(90deg, var(--market-violet), var(--market-pink));
}

.search-suggestion-text,
.search-suggestion-buttons {
  display: none;
}


.band {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 44px) clamp(16px, 4vw, 44px);
}

.marketplace-category-band,
.buyer-cabinet-band {
  border-bottom: 0;
  background: transparent;
}

.marketplace-category-band .section-head,
.buyer-cabinet-band .section-head,
.two-column .section-head,
.band > .section-head {
  margin-bottom: 14px;
}

.marketplace-category-grid {
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 12px;
}

.marketplace-category-card {
  position: relative;
  min-height: 138px;
  overflow: hidden;
  border: 0;
  border-radius: 26px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(31, 92, 69, 0.07);
}

.marketplace-category-card::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 86px;
  height: 86px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(73,164,108,.18), rgba(168,255,62,.18));
  transform: rotate(16deg);
}

.marketplace-category-card span {
  max-width: 120px;
  color: #1E1E1E;
  line-height: 1.05;
}

.marketplace-category-card small {
  max-width: 118px;
  color: #6E7C74;
}

.marketplace-category-card strong {
  color: var(--market-pink);
}

.two-column {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 18px;
}

.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 14px;
}

.product-card.wb-product-card {
  position: relative;
  display: block;
  border: 0;
  border-radius: 26px;
  background: #fff;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(31, 92, 69, 0.08);
}

.product-favorite {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: rgba(22, 20, 28, 0.28);
  font-size: 29px;
  line-height: 1;
  backdrop-filter: blur(8px);
}

.product-image-button {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  background: #EFF8F2;
  padding: 0;
  text-align: left;
}

.product-card-media,
.product-image-button .flower-chip {
  width: 100%;
  aspect-ratio: 1 / 1.05;
  border: 0;
  border-radius: 0;
}

.product-image-button .flower-chip {
  background:
    radial-gradient(circle at 50% 26%, rgba(255,255,255,.9) 0 12%, transparent 13%),
    radial-gradient(circle at 42% 43%, #CFEFE0 0 14%, transparent 15%),
    radial-gradient(circle at 61% 48%, #49A46C 0 13%, transparent 14%),
    radial-gradient(circle at 50% 62%, #A8FF3E 0 10%, transparent 11%),
    linear-gradient(145deg, #E4F3EA, #fff);
}

.product-badge {
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 0 16px 0 0;
  background: #49A46C;
  color: #fff;
  padding: 5px 11px;
  font-size: 15px;
  font-weight: 1000;
}

.product-card-body {
  display: grid;
  gap: 7px;
  padding: 12px;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.product-card .price {
  color: #2E7D5B;
  font-size: 24px;
  line-height: 1;
}

.old-price {
  color: #8A988D;
  font-weight: 700;
  text-decoration: line-through;
}

.product-card h3 {
  display: -webkit-box;
  overflow: hidden;
  min-height: 38px;
  margin: 0;
  color: #1E1E1E;
  font-size: 15px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-card-desc {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #6E7C74;
  font-size: 13px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.delivery-line {
  margin: 0;
  color: #49A46C;
  font-size: 13px;
  font-weight: 900;
}

.product-shop-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border-top: 0;
}

.product-shop-line span {
  color: #6E7C74;
  font-size: 12px;
  -webkit-line-clamp: 1;
}

.product-shop-line .mini-action {
  width: auto;
  min-height: 30px;
  padding: 5px 10px;
  color: var(--market-violet);
  background: #E7F6EC;
}

.product-actions {
  align-items: stretch;
  margin-top: 3px;
}

.product-actions .mini-action {
  min-height: 38px;
  flex: 1;
  background: #f3f2f8;
  color: #1F5C45;
}

.cart-fab {
  min-width: 54px;
  min-height: 38px;
  border-radius: 14px;
  padding: 8px 12px;
  background: linear-gradient(135deg, var(--market-violet), var(--market-pink));
  color: #fff;
  font-size: 20px;
}

.order-panel,
.shop-card,
.registration-card,
.buyer-cabinet-card,
.manager-card {
  border: 0;
  border-radius: 26px;
  box-shadow: 0 10px 26px rgba(31, 92, 69, 0.07);
}

.order-panel {
  top: 120px;
}

.primary-action {
  border-radius: 16px;
  background: linear-gradient(135deg, var(--market-violet), var(--market-pink));
}

.secondary-action,
.mini-action {
  border-radius: 16px;
}

.market-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 10px;
  z-index: 60;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  width: min(460px, calc(100% - 24px));
  transform: translateX(-50%);
  border: 1px solid rgba(221, 235, 227, 0.95);
  border-radius: 26px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 16px 45px rgba(31, 92, 69, 0.18);
  backdrop-filter: blur(16px);
  padding: 8px;
}

.market-bottom-nav button {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 54px;
  color: #8A988D;
  font-weight: 900;
}

.market-bottom-nav span {
  color: var(--market-pink);
  font-size: 25px;
  line-height: 1;
}

.market-bottom-nav small {
  font-size: 11px;
}

#bottomCartBadge {
  position: absolute;
  top: 2px;
  right: 18%;
  min-width: 21px;
  height: 21px;
  border-radius: 999px;
  background: #2E7D5B;
  color: #fff;
  padding: 1px 5px;
  font-size: 12px;
  line-height: 20px;
}

#bottomCartBadge[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .topbar {
    position: relative;
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 14px 16px;
  }

  .brand {
    grid-row: auto;
  }

  .app-navigation-controls {
    justify-content: start;
  }

  .role-switcher,
  .demo-role-note {
    grid-column: auto;
    width: 100%;
  }

  .two-column {
    grid-template-columns: 1fr;
  }

  .order-panel {
    position: static;
  }

  .buyer-cabinet-grid,
  .registration-grid {
    grid-template-columns: 1fr;
  }

  .market-bottom-nav {
    display: grid;
  }
}

@media (max-width: 620px) {
  body {
    background: #fff;
  }

  .topbar {
    display: none;
  }

  .hero-copy.market-home-screen {
    padding: 0;
  }

  .retail-hero {
    gap: 12px;
    padding: 12px 15px 18px;
  }

  .retail-hero > img {
    height: clamp(220px, 58vw, 260px);
    border-radius: 14px;
  }

  .market-home-screen h1,
  .hero-muted,
  .hero-actions {
    display: none;
  }

  .market-app-header {
    margin-bottom: 8px;
  }

  .market-location {
    font-size: 22px;
  }

  .market-header-icons button {
    width: 42px;
    height: 42px;
    font-size: 23px;
    box-shadow: none;
  }

  .market-brand-pill {
    margin-bottom: 18px;
    font-size: 13px;
  }

  .search-input-wrap {
    min-height: 58px;
    border-radius: 24px;
  }

  .band {
    padding: 18px 15px;
  }

  .section-head {
    align-items: start;
    flex-direction: column;
  }

  .section-head h2 {
    font-size: 24px;
  }

  .marketplace-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .marketplace-category-card {
    min-height: 126px;
    border-radius: 22px;
  }

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

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .product-card.wb-product-card {
    border-radius: 20px;
    box-shadow: none;
    background: #fff;
  }

  .product-card-body {
    padding: 9px 5px 12px;
  }

  .product-card .price {
    font-size: 21px;
  }

  .old-price {
    font-size: 13px;
  }

  .product-card h3 {
    min-height: 40px;
    font-size: 14px;
  }

  .product-card-desc,
  .product-shop-line .mini-action,
  .product-actions .mini-action {
    display: none;
  }

  .product-actions {
    justify-content: end;
  }

  .cart-fab {
    width: 48px;
    min-width: 48px;
    height: 44px;
    border-radius: 16px;
    margin-left: auto;
  }
}

@media (max-width: 900px) {
  .retail-hero {
    grid-template-columns: 1fr;
  }

  .retail-hero > img {
    width: 100%;
  }
}


/* WB-inspired buyer account and product flow */
.wb-account-page {
  display: grid;
  gap: 18px;
  width: 100%;
}

.wb-account-hero,
.wb-account-section,
.wb-account-menu,
.buyer-orders-shell {
  border: 1px solid rgba(222, 222, 214, 0.8);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(32, 32, 30, 0.08);
}

.wb-account-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 22px;
}

.wb-avatar {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #EFF8F2, #DDEFE2);
  color: var(--leaf);
  font-size: 26px;
  font-weight: 900;
}

.wb-account-hero h3,
.wb-account-section h3 {
  margin: 0 0 4px;
  font-size: clamp(22px, 4vw, 34px);
}

.wb-account-actions,
.wb-benefit-row,
.buyer-orders-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wb-benefit-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wb-benefit-row button,
.buyer-orders-summary > div {
  border: 0;
  border-radius: 24px;
  background: #fff;
  padding: 18px;
  text-align: left;
  box-shadow: 0 10px 28px rgba(32, 32, 30, 0.08);
}

.wb-benefit-row strong,
.buyer-orders-summary strong {
  display: block;
  font-size: 24px;
  color: var(--petal);
}

.wb-benefit-row span,
.buyer-orders-summary span {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}

.wb-account-menu {
  display: grid;
  overflow: hidden;
}

.wb-account-menu button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon title arrow" "icon desc arrow";
  gap: 2px 14px;
  align-items: center;
  min-height: 74px;
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid rgba(222, 222, 214, 0.8);
  background: #fff;
  text-align: left;
}

.wb-account-menu button:last-child { border-bottom: 0; }
.wb-account-menu span { grid-area: icon; font-size: 24px; }
.wb-account-menu strong { grid-area: title; font-size: 18px; }
.wb-account-menu small { grid-area: desc; color: var(--muted); font-size: 14px; }
.wb-account-menu b { grid-area: arrow; color: #b5b3c0; font-size: 28px; }

.wb-account-section {
  padding: 22px;
}

.wb-active-order-card,
.buyer-order-card {
  border-radius: 22px;
  background: #f7f7f3;
  padding: 16px;
  margin-top: 12px;
}

.wb-active-order-card strong,
.wb-active-order-card span,
.wb-active-order-card b {
  display: block;
}

.wb-active-order-card span { color: var(--petal); font-weight: 800; margin-top: 4px; }
.wb-active-order-card b { color: var(--leaf); margin-top: 8px; }

.buyer-mini-product-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.buyer-mini-product {
  display: grid;
  gap: 8px;
  border: 0;
  border-radius: 18px;
  background: #f7f7f3;
  padding: 10px;
  text-align: left;
}

.buyer-mini-product img,
.buyer-mini-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  object-fit: cover;
  background: #eef2ea;
}

.buyer-mini-placeholder {
  display: grid;
  place-items: center;
  color: var(--leaf);
  font-size: 34px;
}

.buyer-mini-product span {
  display: -webkit-box;
  min-height: 38px;
  overflow: hidden;
  color: var(--ink);
  font-weight: 700;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.buyer-mini-product strong { color: var(--petal); }

.buyer-orders-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 16px;
}

.buyer-order-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(222, 222, 214, 0.8);
}

.buyer-order-date {
  display: grid;
  align-content: start;
  gap: 8px;
  color: var(--muted);
}

.buyer-order-date strong { color: var(--ink); }
.buyer-order-total { color: var(--leaf); font-weight: 900; }

.product-favorite.is-favorite,
#dialogFavoriteButton.is-favorite {
  color: #d4576a;
  border-color: rgba(212, 87, 106, 0.32);
  background: #fff3f6;
}

.dialog-social-row,
.dialog-buy-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.dialog-buy-bar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding: 14px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 36%);
}

.buy-now-action {
  background: linear-gradient(135deg, #ff8a00, #ff6a00);
  color: #fff;
  border: 0;
}

.cart-now-action {
  background: linear-gradient(135deg, #e050d1, #8d39e8);
  color: #fff;
  border: 0;
}

@media (max-width: 720px) {
  .wb-account-hero { grid-template-columns: auto 1fr; }
  .wb-account-actions { grid-column: 1 / -1; }
  .wb-benefit-row,
  .buyer-orders-summary { grid-template-columns: 1fr; }
  .buyer-order-card { grid-template-columns: 1fr; }
  .dialog-social-row,
  .dialog-buy-bar { grid-template-columns: 1fr; }
}


/* WB-like seller and store pages for Flower Market */
.wb-seller-card {
  padding: 0;
  border: 0;
}

.wb-product-seller-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  background: #f7f4fb;
}

.wb-product-seller-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.wb-product-seller-icon,
.wb-product-seller-icon .profile-logo {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  color: var(--market-purple);
}

.wb-product-seller-icon .profile-logo {
  font-size: 18px;
}

.wb-product-seller-card h3 { margin: 0 0 4px; }
.wb-product-seller-card p { margin: 0; }

.wb-shop-page {
  min-height: 78vh;
  padding-bottom: 26px;
  background: #f4f2f8;
}

.wb-shop-topbar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 18px 26px 16px;
  color: #fff;
  background: linear-gradient(135deg, #6c14a8, #a91fe4 70%, #d83cfa);
}

.wb-shop-topbar strong {
  overflow: hidden;
  font-size: clamp(22px, 5vw, 34px);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-shop-back,
.wb-shop-top-icons button,
.wb-shop-heart {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 18px;
  background: rgba(255,255,255,.16);
  color: inherit;
  font-weight: 900;
}

.wb-shop-back { width: 44px; height: 44px; font-size: 42px; line-height: 1; }
.wb-shop-top-icons { display: flex; gap: 8px; }
.wb-shop-top-icons button { width: 42px; height: 42px; font-size: 20px; }

.wb-shop-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 26px 16px;
  padding: 15px 18px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(52, 33, 90, .08);
}

.wb-shop-search span { color: #9a94aa; font-size: 25px; }
.wb-shop-search input { width: 100%; border: 0; background: transparent; font-size: 18px; outline: 0; }

.wb-shop-summary-card {
  display: grid;
  grid-template-columns: 72px 1fr 54px;
  gap: 16px;
  align-items: center;
  margin: 0 26px 10px;
  padding: 18px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(52, 33, 90, .08);
}

.wb-shop-summary-card h2 { margin: 0 0 8px; font-size: clamp(24px, 5vw, 34px); }
.wb-shop-muted { margin: 0 0 8px; color: #8a8598; }
.wb-shop-avatar .profile-logo { width: 72px; height: 72px; border-radius: 22px; color: var(--market-purple); background: #f5f1fb; }
.wb-shop-heart { width: 48px; height: 48px; background: #fde9ff; color: #b827e4; font-size: 28px; }
.wb-shop-rating-row { display: flex; flex-wrap: wrap; gap: 10px; color: #3f394b; font-weight: 800; }

.wb-shop-filter-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin: 0 0 12px;
  padding: 10px 26px 12px;
  scrollbar-width: none;
}
.wb-shop-filter-row::-webkit-scrollbar { display: none; }
.wb-shop-filter-row button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 18px;
  padding: 12px 16px;
  background: #fff;
  color: #403a4c;
  font-weight: 800;
}

.wb-shop-filter-row button.is-active {
  background: #E7F7EE !important;
  color: var(--fm-active) !important;
  box-shadow: inset 0 0 0 1px rgba(73, 164, 108, 0.35);
}

.wb-shop-info-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 26px 16px;
  color: #736d82;
}
.wb-shop-info-strip span {
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 999px;
  background: #fff;
  font-weight: 700;
}

.wb-shop-products-section,
.wb-shop-about-card {
  display: grid;
  gap: 14px;
  margin: 0 26px 18px;
  padding: 18px;
  border-radius: 28px;
  background: #fff;
}

.wb-shop-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.wb-store-product-card { display: grid; gap: 9px; min-width: 0; }
.wb-store-product-image {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1.15;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #f0edf6;
  padding: 0;
}
.wb-store-product-image img { width: 100%; height: 100%; object-fit: cover; }
.wb-store-placeholder { display: grid; place-items: center; color: var(--market-purple); font-size: 54px; }
.wb-store-discount {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px 10px;
  border-radius: 0 16px 0 0;
  background: #ff2e76;
  color: #fff;
  font-weight: 900;
}
.wb-store-fav {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.86);
  color: #282332;
  font-size: 24px;
}

.wb-shop-heart.is-favorite,
.wb-store-fav.is-favorite {
  color: var(--fm-active) !important;
  border-color: rgba(73, 164, 108, 0.35) !important;
}
.wb-store-product-info { display: grid; gap: 4px; }
.wb-store-price-row { display: flex; align-items: baseline; gap: 8px; }
.wb-store-price-row strong { color: #ff0d56; font-size: 23px; }
.wb-store-price-row span { color: #9e98a9; text-decoration: line-through; }
.wb-store-product-info p { min-height: 42px; margin: 0; line-height: 1.15; }
.wb-store-product-info small { color: #8a8598; }
.wb-store-rating { color: #777186; font-weight: 800; }
.wb-store-cart {
  width: 100%;
  border: 0;
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(135deg, #c02cf4, #8f2cef);
  color: #fff;
  font-weight: 900;
}
.wb-store-cart.is-disabled { opacity: .5; }

@media (max-width: 720px) {
  .profile-dialog { width: 100vw; max-width: 100vw; max-height: 100vh; }
  .profile-page { border-radius: 0; }
  .wb-shop-topbar { padding-inline: 14px; }
  .wb-shop-search, .wb-shop-summary-card, .wb-shop-info-strip, .wb-shop-products-section, .wb-shop-about-card { margin-inline: 14px; }
  .wb-shop-filter-row { padding-inline: 14px; }
  .wb-shop-summary-card { grid-template-columns: 58px 1fr 44px; gap: 10px; }
  .wb-shop-avatar .profile-logo { width: 58px; height: 58px; }
  .wb-shop-heart { width: 42px; height: 42px; }
  .wb-shop-product-grid { gap: 12px; }
  .wb-store-price-row strong { font-size: 20px; }
}


/* FM hotfix: keep controls visible and add share buttons */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  overflow: visible;
}

.hero-actions > button,
.hero-actions > a {
  flex: 0 0 auto;
}

.category-button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow-x: visible;
  max-width: 100%;
}

.marketplace-category-grid {
  max-width: 100%;
}

.product-share {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--market-violet, #1F5C45);
  font-weight: 1000;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(58,45,83,.14);
}

@media (max-width: 620px) {
  .category-button-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .hero-actions {
    flex-wrap: wrap;
  }
}


/* Flower Market green palette override: keep marketplace layout, remove Wildberries violet/pink brand feel. */
:root {
  --fm-bg: #F6FBF8;
  --fm-card: #FFFFFF;
  --fm-text: #1E1E1E;
  --fm-muted: #6E7C74;
  --fm-line: #DDEBE3;
  --fm-deep: #1F5C45;
  --fm-main: #2E7D5B;
  --fm-active: #49A46C;
  --fm-mint: #CFEFE0;
  --fm-neon: #A8FF3E;
  --fm-gradient: linear-gradient(90deg, #1F5C45 0%, #49A46C 55%, #A8FF3E 100%);
  --market-pink: #49A46C;
  --market-violet: #1F5C45;
  --market-red: #49A46C;
  --market-orange: #2E7D5B;
  --market-bg: #F6FBF8;
  --market-soft: #E7F7EE;
}

body,
.wb-shop-page {
  background: var(--fm-bg);
  color: var(--fm-text);
}

.topbar,
.retail-hero,
.order-panel,
.shop-card,
.registration-card,
.buyer-cabinet-card,
.manager-card,
.marketplace-category-card,
.product-card,
.wb-product-seller-card,
.wb-shop-search,
.wb-shop-summary-card,
.wb-shop-products-section,
.wb-shop-about-card,
.wb-shop-filter-row button,
.wb-shop-info-strip span,
.wb-store-product-card,
.profile-form,
.review-form {
  background: var(--fm-card);
  border-color: var(--fm-line);
  box-shadow: 0 10px 28px rgba(31, 92, 69, 0.08);
}

.market-brand-pill,
.category-button.is-active,
.primary-action,
.cart-fab,
.cart-now-action,
.wb-shop-topbar,
.wb-store-cart,
.role-button.is-active,
.rail-button.is-active,
.nav-home {
  background: var(--fm-gradient) !important;
  color: #FFFFFF !important;
}

.primary-action:hover,
.secondary-action:hover,
.mini-action:hover,
.category-button:hover,
.wb-store-cart:hover {
  filter: saturate(1.04) brightness(0.98);
}

.secondary-action,
.mini-action,
.category-button,
.product-actions .mini-action,
.product-shop-line .mini-action,
.wb-shop-heart,
.wb-store-fav,
.market-header-icons button {
  background: #E7F7EE !important;
  color: var(--fm-deep) !important;
}

.buy-now-action {
  background: linear-gradient(90deg, #1F5C45 0%, #2E7D5B 100%) !important;
  color: #FFFFFF !important;
}

.mini-action.is-active,
.secondary-action.is-active {
  background: var(--fm-mint) !important;
  color: var(--fm-deep) !important;
}

.search-input-wrap,
.category-button,
.wb-store-product-image,
.wb-shop-filter-row button,
.wb-product-seller-card,
.wb-account-menu,
.wb-benefit-card,
.buyer-order-card {
  background: #EAF6EF !important;
}

.search-icon,
.market-location span,
.product-shop-line .mini-action,
.market-bottom-nav span,
.wb-store-placeholder,
.wb-shop-search span {
  color: var(--fm-active) !important;
}

.market-header-icons button,
.product-favorite,
#dialogFavoriteButton,
.wb-shop-heart,
.wb-store-fav {
  color: var(--fm-deep) !important;
}

.product-favorite.is-favorite,
#dialogFavoriteButton.is-favorite {
  background: #E7F7EE !important;
  color: var(--fm-active) !important;
  border-color: rgba(73, 164, 108, 0.35) !important;
}

.product-card .price,
.wb-store-price-row strong,
.marketplace-category-card strong,
.buyer-order-total,
.delivery-line {
  color: var(--fm-main) !important;
}

.discount-badge,
.wb-store-discount {
  background: linear-gradient(90deg, #49A46C 0%, #A8FF3E 100%) !important;
  color: #123322 !important;
}

.marketplace-category-card::after {
  background: linear-gradient(135deg, rgba(168,255,62,.28), rgba(73,164,108,.14));
}


.market-bottom-nav {
  border-color: rgba(221, 235, 227, .9);
  box-shadow: 0 16px 45px rgba(31, 92, 69, 0.14);
}

#bottomCartBadge {
  background: var(--fm-active) !important;
  color: #FFFFFF !important;
}

.field-hint {
  display: block;
  margin-top: 6px;
  color: var(--fm-muted);
  font-size: 13px;
  line-height: 1.35;
}

input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 3px solid rgba(168, 255, 62, 0.55);
  outline-offset: 2px;
}


/* Flower Market green theme — final override */
:root {
  --market-pink: #49A46C;
  --market-violet: #1F5C45;
  --market-red: #2E7D5B;
  --market-orange: #A8FF3E;
  --market-bg: #F6FBF8;
  --market-soft: #E7F6EC;
  --neon-green: #A8FF3E;
  --green-gradient: linear-gradient(90deg, #1F5C45 0%, #49A46C 55%, #A8FF3E 100%);
}
body { background: #F6FBF8 !important; color: #1E1E1E; }
.market-brand-pill,
.category-button.is-active,
.primary-action,
.cart-fab,
.product-detail-bar .primary-action,
.wb-buy-now,
.wb-add-cart,
.shop-header,
.market-shop-header,
.wb-shop-header,
.profile-main-action,
.account-main-action {
  background: var(--green-gradient) !important;
  color: #ffffff !important;
}
.market-header-icons button,
.product-shop-line .mini-action,
.secondary-action,
.mini-action,
.category-button,
.wb-filter-chip,
.wb-account-chip,
.wb-info-card,
.wb-profile-card,
.wb-order-row {
  background: #E7F6EC !important;
  color: #1F5C45 !important;
}
.search-input-wrap,
.search-panel .city-field input,
.marketplace-category-card,
.product-card.wb-product-card,
.order-panel,
.shop-card,
.registration-card,
.buyer-cabinet-card,
.manager-card,
.wb-product-section,
.wb-shop-info,
.wb-account-menu,
.wb-active-order-card {
  background: #FFFFFF !important;
  border-color: #DDEBE3 !important;
  box-shadow: 0 12px 30px rgba(31, 92, 69, 0.08) !important;
}
.search-icon,
.market-header-icons button,
.market-bottom-nav span,
.marketplace-category-card strong,
.product-shop-line .mini-action,
.share-product-button,
.favorite-button,
.wb-share,
.wb-fav,
.wb-rating,
.wb-profile-icon { color: #2E7D5B !important; }
.product-card .price,
.price,
.wb-price,
.product-badge,
#bottomCartBadge { color: #1F5C45 !important; }
.product-badge,
.wb-badge,
#bottomCartBadge { background: #A8FF3E !important; color: #1F5C45 !important; }
.delivery-line,
.success-text,
.wb-delivery { color: #49A46C !important; }
.marketplace-category-card::after {
  background: linear-gradient(135deg, #CFEFE0 0%, #F6FBF8 55%, rgba(168,255,62,.45) 100%) !important;
}
.market-bottom-nav {
  border-color: #DDEBE3 !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 18px 45px rgba(31, 92, 69, 0.18) !important;
}
.market-bottom-nav button { color: #8A988D !important; }
.market-bottom-nav button.is-active, .market-bottom-nav button:hover { color: #1F5C45 !important; }

/* Stability fixes after green restyle: categories must be visible and clickable. */
#categoryButtons,
.category-button-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: visible !important;
  max-width: 100% !important;
}

#categoryButtons.category-state-holder {
  display: none !important;
}

.category-button {
  flex: 0 1 auto !important;
  max-width: 100% !important;
  white-space: normal !important;
  line-height: 1.1 !important;
  min-height: 48px !important;
}

.marketplace-subcategory-panel {
  display: block !important;
  background: #ffffff !important;
  border: 1px solid #DDEBE3 !important;
  box-shadow: 0 12px 30px rgba(31, 92, 69, 0.08) !important;
}

.marketplace-subcategory-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  overflow: visible !important;
}

.marketplace-subcategory-chip {
  flex: 1 1 180px !important;
  background: #E7F6EC !important;
  color: #1F5C45 !important;
  border: 1px solid #DDEBE3 !important;
  cursor: pointer !important;
}

.marketplace-subcategory-chip.is-active,
.marketplace-subcategory-chip:hover {
  background: linear-gradient(90deg, #1F5C45 0%, #49A46C 55%, #A8FF3E 100%) !important;
  color: #ffffff !important;
}

.marketplace-subcategory-chip.is-active small,
.marketplace-subcategory-chip.is-active strong,
.marketplace-subcategory-chip:hover small,
.marketplace-subcategory-chip:hover strong {
  color: #ffffff !important;
}

.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}

.product-card.wb-product-card {
  display: block !important;
  min-height: 100% !important;
}

.product-image-button {
  cursor: pointer !important;
}

.empty-state {
  grid-column: 1 / -1;
  color: #6E7C74 !important;
}

@media (max-width: 720px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .marketplace-subcategory-chip {
    flex-basis: calc(50% - 8px) !important;
    min-width: 0 !important;
  }
}


/* Final small fixes: visible white cart icon + cabinet button near home */
.app-navigation-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nav-account {
  background: #E7F7EE;
  color: var(--fm-deep);
  border-color: rgba(73, 164, 108, 0.25);
}

.nav-account:hover,
.nav-account:focus-visible {
  background: #D9F1E4;
}

.icon-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #FFFFFF;
  flex: 0 0 auto;
}

.icon-cart svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cart-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wb-store-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.icon-cart--inline {
  width: 18px;
  height: 18px;
}

.icon-cart--menu {
  color: var(--fm-active);
}

.market-bottom-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.market-bottom-nav .icon-cart {
  width: 22px;
  height: 22px;
}

@media (max-width: 680px) {
  .app-navigation-controls {
    width: 100%;
  }

  .nav-control,
  .nav-account {
    flex: 1 1 auto;
    justify-content: center;
  }
}


/* v2 fixes: white cart icon on all cart buttons + visible cabinet button beside home */
.cart-fab .icon-cart,
.cart-now-action .icon-cart,
.wb-store-cart .icon-cart,
.market-bottom-nav button[onclick*="scrollToOrderPanel"] .icon-cart,
button .icon-cart--inline,
button .icon-cart--menu {
  color: #FFFFFF !important;
}

.cart-fab svg,
.cart-now-action svg,
.wb-store-cart svg,
.market-bottom-nav button[onclick*="scrollToOrderPanel"] svg {
  stroke: #FFFFFF !important;
}

.dialog-navigation,
.manager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dialog-navigation .nav-account,
.manager-actions .nav-account {
  background: #E7F7EE;
  color: var(--fm-deep);
  border: 1px solid rgba(73, 164, 108, 0.25);
}

.dialog-navigation .nav-account:hover,
.dialog-navigation .nav-account:focus-visible,
.manager-actions .nav-account:hover,
.manager-actions .nav-account:focus-visible {
  background: #D9F1E4;
}


/* Repair 16 Jul: fix category/search interactions and cart icon visibility */
#searchInput,
.search-input,
.market-search input {
  pointer-events: auto !important;
  user-select: text !important;
  caret-color: #1F5C45;
}

.category-chip,
.category-card,
.subcategory-chip,
button[data-category-filter],
button[data-subcategory-filter] {
  cursor: pointer;
  pointer-events: auto !important;
}

.category-row,
.wb-category-row,
.category-chip-row {
  overflow: visible !important;
  flex-wrap: wrap !important;
  row-gap: 12px;
}

button .icon-cart,
.cart-fab .icon-cart,
.cart-now-action .icon-cart,
.wb-store-cart .icon-cart,
.wb-add-cart .icon-cart,
.checkout-button .icon-cart {
  color: #FFFFFF !important;
}

button .icon-cart svg,
.cart-fab .icon-cart svg,
.cart-now-action .icon-cart svg,
.wb-store-cart .icon-cart svg,
.wb-add-cart .icon-cart svg,
.checkout-button .icon-cart svg {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
}

.cart-fab,
.cart-now-action,
.wb-store-cart,
.wb-add-cart,
.checkout-button {
  color: #FFFFFF !important;
}

.cart-fab::before,
.cart-now-action::before,
.wb-store-cart::before,
.wb-add-cart::before {
  color: #FFFFFF !important;
}

/* Hide native datalist dropdown weirdness; we use our own category buttons. */
datalist#searchSuggestions {
  display: none !important;
}


/* REAL FIX 16 Jul: usable search, visible search button, product suggestions, reliable category buttons */
.search-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  width: min(980px, 100%) !important;
  overflow: visible !important;
}

.fm-search-block {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 980px !important;
}

.fm-search-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
}

.fm-search-row .search-input-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid #DDEBE3 !important;
  border-radius: 24px !important;
  background: #FFFFFF !important;
  padding: 0 16px !important;
  box-shadow: 0 10px 24px rgba(31,92,69,.08) !important;
}

.fm-search-row .search-icon {
  position: static !important;
  transform: none !important;
  flex: 0 0 auto !important;
  color: #2E7D5B !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

#searchInput {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 56px !important;
  min-height: 56px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: #1E1E1E !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  direction: ltr !important;
}

#searchInput::placeholder {
  color: #8A988D !important;
}

.search-submit-button {
  flex: 0 0 auto !important;
  min-width: 124px !important;
  min-height: 58px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: linear-gradient(90deg, #1F5C45 0%, #49A46C 55%, #A8FF3E 100%) !important;
  color: #FFFFFF !important;
  padding: 0 24px !important;
  font-size: 18px !important;
  font-weight: 1000 !important;
  cursor: pointer !important;
  box-shadow: 0 12px 26px rgba(31,92,69,.16) !important;
}

.search-suggestion-text {
  display: block !important;
  color: #6E7C74 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  margin-top: 2px !important;
}

.search-suggestion-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  overflow: visible !important;
}

.search-suggestion-chip {
  min-height: 36px !important;
  border: 1px solid #DDEBE3 !important;
  border-radius: 999px !important;
  background: #E7F6EC !important;
  color: #1F5C45 !important;
  padding: 7px 12px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.search-suggestion-chip:hover,
.search-suggestion-chip:focus-visible {
  background: #CFEFE0 !important;
}

.category-button,
.marketplace-category-card,
.marketplace-subcategory-chip {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.category-button-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  overflow: visible !important;
  padding: 2px 0 4px !important;
}

.category-button {
  border-radius: 999px !important;
  min-height: 46px !important;
  padding: 10px 16px !important;
}

/* Do not show native datalist suggestions. Product hints are rendered as buttons. */
#searchOptions { display: none !important; }

@media (max-width: 680px) {
  .fm-search-row {
    flex-direction: column !important;
  }
  .search-submit-button {
    width: 100% !important;
  }
}


/* Buyer cabinet fix: do not show registration form when user opens personal account */
.registration-band.is-hidden,
#registrationFlow[hidden] {
  display: none !important;
}

.buyer-cabinet-band {
  scroll-margin-top: 120px;
}

#registrationFlow {
  scroll-margin-top: 120px;
}


/* Stage 2 demo safety fixes */
.demo-safety-banner {
  position: sticky;
  top: 0;
  z-index: 999;
  padding: 9px 14px;
  background: #1F5C45;
  color: #FFFFFF;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .01em;
}

.admin-unlock-button {
  align-self: center;
  border: 1px solid rgba(31,92,69,.2);
  border-radius: 999px;
  background: #F6FBF8;
  color: #1F5C45;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.admin-unlock-button:hover,
.admin-unlock-button:focus-visible { background: #DDEFE2; }

.registration-band.is-hidden,
#registrationFlow[hidden] { display: none !important; }

.fm-search-row { display: flex !important; align-items: stretch !important; gap: 10px !important; width: 100% !important; }
.fm-search-row .search-input-wrap { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; display: flex !important; align-items: center !important; }
#searchInput { display: block !important; writing-mode: horizontal-tb !important; text-orientation: mixed !important; direction: ltr !important; min-width: 0 !important; width: 100% !important; height: 56px !important; font-size: 18px !important; }
.search-submit-button { flex: 0 0 auto !important; min-width: 118px !important; cursor: pointer !important; }
.category-button, .marketplace-category-card, .marketplace-subcategory-chip, .search-suggestion-chip { cursor: pointer !important; pointer-events: auto !important; }
.category-button-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; }
.cart-fab svg, .wb-store-cart svg, .cart-now-action svg, button .icon-cart svg { stroke: #FFFFFF !important; color: #FFFFFF !important; }

@media (max-width: 640px) {
  .fm-search-row { flex-direction: column !important; }
  .search-submit-button { width: 100% !important; }
  .demo-safety-banner { font-size: 12px; }
}

/* v85 buyer navigation UX */
.business-role-label {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: end;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-align: right;
}

.role-switcher {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 3px;
  background: #F6FBF8;
  box-shadow: inset 0 0 0 1px rgba(31, 92, 69, 0.04);
}

.role-button:not([data-role="buyer"]) {
  color: #6E7C74;
}

.city-field-hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.city-field-hint.is-warning {
  color: #8A5A12;
}

.city-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.city-suggestion-chip {
  border: 1px solid #DDEBE3;
  border-radius: 999px;
  background: #FFFFFF;
  color: #1F5C45;
  padding: 7px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.city-suggestion-chip.is-active {
  border-color: #1F5C45;
  background: #E7F6EC;
}

.city-suggestion-chip:hover,
.city-suggestion-chip:focus-visible {
  border-color: #49A46C;
  outline: none;
}

@media (max-width: 980px) {
  .app-navigation-controls {
    display: none !important;
  }

  .business-role-label {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    width: min(560px, 100%);
    text-align: center;
  }

  .role-switcher {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-actions {
    display: none !important;
  }
}

@media (max-width: 680px) {
  body {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  main,
  .view.is-active {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  .band,
  .order-panel,
  .product-grid,
  .shop-grid,
  .buyer-cabinet-band,
  #registrationFlow {
    scroll-margin-bottom: 120px;
  }

  .order-panel,
  #orderForm,
  #buyerOrdersList,
  #productGrid {
    margin-bottom: 28px;
  }

  .market-bottom-nav {
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
}

/* v85 bottom cart icon visibility */
.market-bottom-nav button[onclick*="scrollToOrderPanel"] .icon-cart {
  width: 25px !important;
  height: 25px !important;
  color: #2E7D5B !important;
}

.market-bottom-nav button[onclick*="scrollToOrderPanel"] .icon-cart svg {
  width: 25px !important;
  height: 25px !important;
  stroke: #2E7D5B !important;
  color: #2E7D5B !important;
}

/* v94: marketplace-style star ratings. */
.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: #1F5C45;
  font-weight: 900;
  line-height: 1.1;
}

.rating-stars {
  color: #F5A623;
  letter-spacing: 0;
  font-size: 1.05em;
}

.rating-number,
.rating-suffix {
  color: var(--muted);
  font-size: 0.92em;
  font-weight: 800;
}

.product-card-rating,
.wb-store-rating {
  display: flex;
  align-items: center;
  min-height: 20px;
}

.visually-hidden-rating-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.review-star-input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
}

.review-star-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #FFF7E6;
  color: #F5A623;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.review-star-button:hover,
.review-star-button:focus-visible {
  border-color: #F5A623;
  outline: none;
}

.review-star-button.is-selected {
  background: #FFF0C7;
  color: #D88900;
}

.review-star-input.is-disabled {
  opacity: 0.5;
}

.review-star-input.is-disabled .review-star-button,
.review-star-button:disabled {
  cursor: not-allowed;
  background: #F2F4F0;
  color: #A8B0A8;
}

/* v93: first buyer screen as a clean marketplace flow. */
.topbar {
  grid-template-columns: minmax(180px, max-content) minmax(320px, 1fr) auto !important;
  gap: 10px 16px !important;
  min-height: 0 !important;
  padding: 14px clamp(16px, 4vw, 44px) 12px !important;
}

.topbar .brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.topbar .role-switcher {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  width: min(560px, 100%) !important;
}

.topbar .app-navigation-controls {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  max-width: 390px !important;
}

.topbar .nav-control {
  min-height: 36px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.topbar .business-role-label {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
  width: min(760px, 100%) !important;
  margin: 0 !important;
  text-align: center !important;
}

.topbar .demo-role-note {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  justify-self: center !important;
  width: min(760px, 100%) !important;
  margin: 0 !important;
  font-size: 11px !important;
}

#retail .retail-hero {
  width: min(1180px, calc(100% - 32px)) !important;
  min-height: 0 !important;
  margin: 20px auto 0 !important;
  padding: 0 0 22px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  align-items: stretch !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

#retail .retail-hero::after {
  display: none !important;
}

#retail .retail-hero > img {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  grid-column: 1 !important;
  width: 100% !important;
  height: clamp(260px, 26vw, 340px) !important;
  max-height: 340px !important;
  margin: 0 !important;
  border-radius: 22px !important;
  object-fit: cover !important;
  object-position: center 46% !important;
  box-shadow: 0 18px 44px rgba(31, 92, 69, 0.14) !important;
}

#retail .hero-copy.market-home-screen {
  grid-column: 1 !important;
  width: min(980px, 100%) !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  gap: 14px !important;
}

#retail .market-app-header {
  justify-content: flex-start !important;
  margin: 0 !important;
}

#retail .market-location {
  height: auto !important;
  min-height: 34px !important;
  padding: 8px 13px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

#retail .market-header-icons,
#retail .market-brand-pill,
#retail .market-home-screen > .eyebrow,
#retail .market-home-screen > h1,
#retail .hero-muted,
#retail .hero-actions {
  display: none !important;
}

#retail .search-panel {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 !important;
}

#retail .city-suggestion-chips {
  margin-top: -4px !important;
}


@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: minmax(180px, max-content) minmax(260px, 1fr) !important;
  }

  .topbar .app-navigation-controls {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    max-width: 100% !important;
  }

  .topbar .business-role-label {
    grid-row: 3 !important;
  }

  .topbar .demo-role-note {
    grid-row: 4 !important;
  }
}

@media (max-width: 980px) {
  .topbar .app-navigation-controls {
    display: none !important;
  }

  .topbar .business-role-label {
    grid-row: 2 !important;
  }

  .topbar .demo-role-note {
    grid-row: 3 !important;
  }
}

@media (max-width: 680px) {
  .topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px 14px 12px !important;
  }

  .topbar .brand,
  .topbar .role-switcher {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
  }

  .topbar .brand {
    justify-self: start !important;
  }

  .topbar .business-role-label,
  .topbar .demo-role-note {
    display: none !important;
  }

  #retail .retail-hero {
    width: min(100% - 24px, 980px) !important;
    margin-top: 12px !important;
    gap: 14px !important;
    padding-bottom: 18px !important;
  }

  #retail .retail-hero > img {
    height: clamp(180px, 52vw, 240px) !important;
    border-radius: 16px !important;
    object-position: center 48% !important;
  }

  #retail .hero-copy.market-home-screen {
    gap: 12px !important;
  }

  #retail .market-location {
    min-height: 32px !important;
    font-size: 13px !important;
  }
}


/* v101: keep dialog navigation visible and show local supplier action feedback. */
dialog .dialog-navigation {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 0 16px;
  padding: 12px 54px 12px 12px;
  border-bottom: 1px solid rgba(49, 92, 75, 0.14);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.profile-dialog .dialog-navigation {
  margin-bottom: 0;
}

.supplier-profile-action-status {
  min-height: 24px;
  margin: 10px 0 0;
}

@media (max-width: 560px) {
  dialog .dialog-navigation {
    padding: 10px 48px 10px 10px;
  }

  dialog .dialog-navigation .nav-control {
    flex: 1 1 110px;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }
}


/* v102: search result clarity and supplier chat workflow. */
.supplier-profile-primary-actions {
  margin: 18px 34px 0;
  padding: 20px;
  border: 1px solid rgba(31, 92, 69, 0.2);
  border-radius: 16px;
  background: #f1faf5;
}

.supplier-profile-sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid rgba(31, 92, 69, 0.18);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -10px 28px rgba(20, 55, 43, 0.12);
  backdrop-filter: blur(10px);
}

.supplier-profile-sticky-actions:empty {
  display: none;
}

.b2b-chat-card.is-active-chat {
  outline: 3px solid rgba(63, 174, 111, 0.35);
  box-shadow: 0 14px 34px rgba(31, 92, 69, 0.14);
}

.b2b-chat-messages {
  display: grid;
  gap: 9px;
  max-height: 360px;
  padding: 8px 0;
  overflow: auto;
}

.b2b-chat-message {
  max-width: min(88%, 760px);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.b2b-chat-message.is-shop {
  justify-self: end;
  background: #eef8f2;
}

.b2b-chat-message.is-supplier {
  justify-self: start;
  background: #f7f5ef;
}

.b2b-chat-message p {
  margin: 4px 0;
}

.b2b-chat-message small {
  color: var(--muted);
}

.b2b-chat-compose {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.pill.is-alert {
  background: #fff0c9;
  color: #704600;
}

@media (max-width: 640px) {
  .supplier-profile-primary-actions {
    margin: 12px 14px 0;
    padding: 14px;
  }

  .supplier-profile-sticky-actions {
    padding: 10px;
  }

  .supplier-profile-sticky-actions > * {
    flex: 1 1 145px;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .b2b-chat-message {
    max-width: 94%;
  }
}


/* v104: strict role separation for search indexes.
   Retail searches only shop products; supplier data stays inside closed B2B. */
.b2b-search-field {
  grid-column: 1 / -1;
}
.b2b-search-field input {
  width: 100%;
}

/* v109: product cards must fit narrow preview/mobile width without clipping. */
#retail .product-grid,
#productGrid.product-grid {
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

#retail .product-card,
#retail .product-card * {
  min-width: 0;
}

#retail .product-card .price-row,
#retail .product-card-rating,
#retail .product-shop-line,
#retail .delivery-line {
  max-width: 100%;
  overflow: hidden;
}

#retail .product-card .price-row {
  flex-wrap: wrap;
}

#retail .product-card-rating .star-rating {
  white-space: normal;
  flex-wrap: wrap;
}

#retail .product-shop-line .mini-action {
  font-size: 12px !important;
  padding-inline: 10px !important;
}

.branch-manager {
  margin-top: 18px;
}

.branch-summary-grid,
.branch-detail-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.branch-type-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.branch-type-choice .is-active {
  background: #1d6b4b;
  color: #ffffff;
}

.branch-card .manager-actions,
.branch-form-card .manager-actions {
  flex-wrap: wrap;
}

.branch-detail-grid p {
  margin: 0;
}

.branch-detail-grid span {
  display: block;
  color: #6f8077;
  font-size: 13px;
  font-weight: 700;
}

.branch-detail-grid strong {
  display: block;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  #retail .product-grid,
  #productGrid.product-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}