:root {
  --app-frame-width: 100vw;
  --bg: #ffffff;
  --bg-subtle: #f5f6f8;
  --surface: #ffffff;
  --line: #dce2ec;
  --line-strong: #b8c4d8;
  --text: #23272f;
  --text-secondary: #6c7483;
  --text-muted: #9aa3b2;
  --icon: #8fa0bc;
  --brand: #1e4650;
  --accent: var(--brand);
  --success: #2e7d32;
  --warning: #b7791f;
  --error: #c62828;
  --shadow-soft: 0 10px 24px rgba(18, 30, 52, 0.08);
  --shadow-medium: 0 8px 24px rgba(20, 30, 44, 0.12);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-pill: 999px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-display-xl: 48px;
  --lh-display-xl: 52px;
  --fs-display-l: 40px;
  --lh-display-l: 44px;
  --fs-h1: 32px;
  --lh-h1: 38px;
  --fs-h2: 28px;
  --lh-h2: 34px;
  --fs-h3: 24px;
  --lh-h3: 30px;
  --fs-h4: 20px;
  --lh-h4: 26px;
  --fs-title-l: 18px;
  --lh-title-l: 24px;
  --fs-title-m: 16px;
  --lh-title-m: 22px;
  --fs-body-l: 16px;
  --lh-body-l: 24px;
  --fs-body-m: 14px;
  --lh-body-m: 22px;
  --fs-body-s: 13px;
  --lh-body-s: 20px;
  --fs-caption: 12px;
  --lh-caption: 18px;
  --fs-micro: 11px;
  --lh-micro: 16px;
  --fs-button-l: 16px;
  --lh-button-l: 20px;
  --fs-button-m: 14px;
  --lh-button-m: 18px;
  --fs-nav-label: 12px;
  --lh-nav-label: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  font-weight: var(--fw-regular);
}

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

/* ── Global interaction affordance ─────────────────────────────────────────
   Every focusable / clickable element shows pointer. [data-action] covers
   non-button clickable elements (cards, rows, overlays). Disabled overrides
   below and throughout the file take precedence via higher specificity. */
button,
a,
[data-action],
[role="button"],
select {
  cursor: pointer;
}

button:disabled,
button[disabled],
input:disabled,
textarea:disabled,
select:disabled,
[disabled],
.is-disabled {
  cursor: not-allowed;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text);
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-semibold);
}

h3 {
  font-size: var(--fs-title-m);
  line-height: var(--lh-title-m);
  font-weight: var(--fw-semibold);
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-semibold);
}

.app-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
}

.desktop-copy {
  display: none;
}

.phone-frame {
  display: grid;
  place-items: center;
}

.app {
  width: var(--app-frame-width);
  height: 100dvh;
  background: var(--bg);
}

.app__viewport {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.app__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 0 11px 120px;
}

.app__scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.home-header {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98) 74%, rgba(255, 255, 255, 0));
  padding: 20px 0 8px;
  text-align: center;
}

.home-logo {
  width: 170px;
  height: auto;
  object-fit: contain;
}

.home-logo-btn {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.home-logo--desktop {
  display: none; /* shown only at ≥1024px */
}

/* ── Category chips ─────────────────────────────────────────────────────────── */
.cat-chips-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 16px 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cat-chips-row::-webkit-scrollbar { display: none; }

.cat-chip {
  flex-shrink: 0;
  border: 1.5px solid var(--border, #e0e0e0);
  background: transparent;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #666);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cat-chip--active {
  background: var(--brand, #222);
  color: #fff;
  border-color: var(--brand, #222);
}

.home-layout-dot {
  margin: 12px auto 0;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.home-layout-dot img {
  width: 38px;
  height: 22px;
  object-fit: contain;
}

.home-content {
  max-width: 950px;
  margin: 0 auto;
  width: 100%;
}

.home-grid {
  margin-top: 10px;
}

.grid-layout {
  width: 100%;
}

.grid-layout--adaptive.grid-layout--masonry {
  column-count: 2;
  column-gap: 18px;
}

@media (min-width: 330px) {
  .grid-layout--adaptive.grid-layout--masonry {
    column-count: 3;
  }
}

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

.grid-layout--home-single {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

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

.grid-layout--single {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 105px;
}

.product-card {
  border: 0;
  background: transparent;
  color: inherit;
}

.grid-layout--masonry .product-card {
  break-inside: avoid;
  margin: 0 0 8px;
}

.product-card__media {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 0;
  box-shadow: 0 2px 8px rgba(20, 30, 44, 0.1);
  overflow: hidden;
  position: relative;
}

/* ── Heart like overlay (feed cards) ───────────────────────────────────────── */
.product-card__heart {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.12s;
  z-index: 2;
}
.product-card__heart:active { transform: scale(1.3); }
.product-card__heart svg { pointer-events: none; display: block; }

/* ── Heart like overlay (single product hero) ──────────────────────────────── */
.product-hero__like {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.12s;
  z-index: 2;
}
.product-hero__like:active { transform: scale(1.3); }
.product-hero__like svg { pointer-events: none; display: block; }

.ratio-tall {
  aspect-ratio: 9 / 16;
}

.ratio-tall-extended {
  aspect-ratio: 9 / 16;
}

.ratio-feed {
  aspect-ratio: 9 / 16;
}

.ratio-nine-sixteen {
  aspect-ratio: 9 / 16;
}

.product-card__body h3 {
  margin: 0 2px 0;
  padding-left: 5px;
  font-size: var(--fs-title-m);
  line-height: var(--lh-title-m);
  font-weight: var(--fw-medium);
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .product-card__body h3 {
    margin: 0;
    padding-left: 5px;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #1d464f;
  }
}

.product-card__body--row {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}
.product-card__body-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.product-card__menu-btn {
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.product-card__menu-btn:active { opacity: 0.75; }

.product-card__body--row h3 {
  /* Inherit global margins from above */
}

.icon-button {
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  background: transparent;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xs);
}

.icon-button svg {
  width: 22px;
  height: 22px;
}

.icon-button--remove {
  background: #eef2f8;
}

.product-card__save-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.product-card__save-btn img {
  width: 25px;
  height: 25px;
  display: block;
}
.product-card__save-btn.is-saved { opacity: 1; }
.product-card__save-btn:active { opacity: 0.75; }

.home-grid .product-card__media {
  /* Inherit global media styles */
}

.home-grid .product-card__body h3 {
  margin: 0 2px 0;
  padding-left: 5px;
  font-size: var(--fs-title-m);
  line-height: var(--lh-title-m);
  font-weight: var(--fw-medium);
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 3-column home grid: tighten title to avoid overflow in narrow columns */
.grid-layout--three.home-grid .product-card__body h3 {
  font-size: 14px;
  line-height: 18px;
}

.product-card__body p {
  margin: 1px 1px 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.product-card__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-card__icon-dot {
  color: var(--text-muted);
  font-size: var(--fs-micro);
}

.feed-list {
  display: grid;
  gap: 10px;
  padding: 3px 2px 0;
}

.product-card--feed {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 4px;
  box-shadow: 0 2px 8px rgba(22, 34, 55, 0.05);
}

.product-card--feed .product-card__media {
  border-radius: 7px;
}

.product-card--feed .product-card__body {
  padding: 3px 2px 1px;
}

.profile-header {
  padding-top: 20px;
  text-align: center;
}

.profile-header__top-actions {
  position: sticky;
  top: 20px;
  z-index: 10;
  background: var(--bg);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
}

.icon-btn svg,
.icon-btn img {
  width: 40px;
  height: 40px;
}

.icon-btn--dot {
  position: relative;
}

.icon-btn--dot::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff2f2f;
}

.icon-btn--rel {
  position: relative;
}

.profile-header__msg-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: #ff2f2f;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
}

.profile-header__avatar {
  width: 86px;
  height: 86px;
  margin: 0 auto;
  border-radius: 50%;
  background-repeat: no-repeat;
  border: 1px solid #d3dae6;
}

.profile-header h1 {
  margin: 10px 0 0;
  font-size: var(--fs-display-l);
  line-height: var(--lh-display-l);
  font-weight: var(--fw-medium);
}

.profile-header__website {
  margin: 8px 0 0;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: var(--fw-bold);
  color: var(--text);
}

.profile-header__counts {
  margin: 12px 0 0;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: var(--fw-bold);
}

.profile-header__counts span {
  display: inline-block;
  margin: 0 5px;
}

.profile-header__bio {
  margin: 14px auto 0;
  max-width: 94%;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--text-secondary);
}

.profile-header__add {
  margin-top: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--icon);
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-switcher {
  margin: 16px 0;
  display: flex;
  gap: 4px;
  border-bottom: 0;
}

.tab-switcher__item {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 7px 2px;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  font-weight: var(--fw-medium);
}

.tab-switcher__item.is-active {
  color: var(--text);
  border-bottom-color: var(--text);
}

.tab-switcher--segmented {
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  width: 320px;
  margin: 3px auto 12px;
}

.tab-switcher--segmented .tab-switcher__item {
  border-bottom: 0;
  padding: 5px 2px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
}

.tab-switcher--segmented .tab-switcher__item.is-active {
  background: #dfe5f0;
  color: var(--text);
}

.profile-catalog-grid {
  margin-top: 8px;
}

.profile-shared-grid .product-card {
  width: 105px;
}

.product-card--catalog .product-card__media {
  border-radius: 12px;
  position: relative;
}

.product-card__badge {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(225, 232, 244, 0.94);
  display: grid;
  place-items: center;
  font-size: 10px;
}

.shortlist-header {
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shortlist-header h1 {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-semibold);
}

.shortlist-header__create {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: var(--radius-pill);
  min-height: 36px;
  padding: 0 12px;
  font-size: var(--fs-button-m);
  line-height: var(--lh-button-m);
  color: var(--text);
  font-weight: var(--fw-medium);
}

.shortlist-grid {
  margin-top: 14px;
  display: grid;
  gap: 18px;
}

.shortlist-card {
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 30, 44, 0.08);
  overflow: hidden;
  border: 1px solid var(--line);
}

.shortlist-card__cover {
  width: 100%;
  aspect-ratio: 9 / 16;
  background-size: cover;
  background-position: center;
  background-color: #eef2f8;
  border-radius: 300px;
  overflow: hidden;
  position: relative;
}

/* Video covers — fill container, object-fit crop */
.shortlist-card__cover > video,
.catalog-card__cover > video,
.sl-picker-thumb__cover > video,
.sl-picker-card__cover > video,
.catalog-page__item-media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play icon overlay for video covers (shown over poster or first-frame video) */
.sl-cover__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  pointer-events: none;
  border-radius: inherit;
}

.shortlist-card__body {
  padding: 10px 12px 12px;
}

.shortlist-card__body h3 {
  margin: 0;
  font-size: var(--fs-title-m);
  line-height: var(--lh-title-m);
  font-weight: var(--fw-semibold);
}

.shortlist-card__body p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.shortlist-detail-header {
  padding-top: 14px;
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
}

.shortlist-detail-header button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--icon);
  font-size: 26px;
  line-height: 1;
}

.shortlist-detail-header h1 {
  margin: 0;
  text-align: center;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-semibold);
}

.shortlist-detail-grid {
  margin-top: 14px;
}

.shortlist-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 16px;
}
.shortlist-add-items-wrap {
  display: flex;
  justify-content: center;
  padding: 20px 16px 8px;
}
.shortlist-add-items-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-strong);
  background: #fff;
  color: var(--text);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.shortlist-add-items-btn:active { background: var(--bg-subtle); }

.shortlist-empty {
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  text-align: center;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(19, 26, 38, 0.35);
}

.modal {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(92vw, 330px);
  z-index: 71;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(20, 30, 44, 0.2);
  padding: 14px;
}

.modal h2 {
  margin: 0;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-semibold);
}

.modal__content {
  margin-top: 10px;
}

.modal__footer {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.shortlist-modal__input {
  width: 100%;
  height: 42px;
  border: 1.4px solid var(--line-strong);
  border-radius: 10px;
  padding: 0 12px;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--text);
}

.shortlist-modal__btn {
  border: 1px solid var(--line-strong);
  background: #fff;
  min-height: 34px;
  border-radius: var(--radius-xs);
  padding: 0 12px;
  font-size: var(--fs-button-m);
  line-height: var(--lh-button-m);
  font-weight: var(--fw-medium);
}

.shortlist-modal__btn--primary {
  background: #2f5c6c;
  border-color: #2f5c6c;
  color: #fff;
}

/* legacy search styles removed — replaced by search screen v2 below */

.product-screen {
  margin: 0 -11px;
  display: grid;
  gap: 24px;
  padding-bottom: 14px;
}

/* CLOSE button: hidden on mobile (back arrow handles exit there) */
.product-screen__close {
  display: none;
}

/* Section divider labels between related and home feed */
.product-screen__section-label {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 16px 0;
}

.product-screen__section-label--divider {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 4px;
}

/* Desktop feed card: hidden by default (mobile-first); revealed at ≥1024px */
.product-feed-desktop { display: none; }

.expanded-post {
  background: #ffffff;
  border-radius: 0;
  overflow: visible;
  box-shadow: var(--shadow-medium);
}

.product-hero {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.product-hero__back {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.product-hero__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: #fff;
  font-size: var(--fs-title-l);
  line-height: var(--lh-title-l);
  font-weight: var(--fw-medium);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.product-actions {
  background: var(--bg-subtle);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px 4px;
}

.product-actions button {
  border: 0;
  background: transparent;
  color: var(--icon);
  display: grid;
  place-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: var(--lh-nav-label);
  font-weight: var(--fw-semibold);
}

.product-actions__icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.product-actions__svg {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

.product-actions__svg svg {
  width: 20px;
  height: 20px;
}

.product-actions__btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.product-actions__btn--disabled img,
.product-actions__btn--disabled span {
  pointer-events: none;
}

.product-content {
  padding: 30px 15px 40px 15px;
  text-align: center;
}

.product-content h2 {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
}

.product-content h3 {
  margin: 10px 0 0;
  font-size: var(--fs-title-l);
  line-height: var(--lh-title-l);
  font-weight: var(--fw-bold);
}

.product-content p {
  margin: 16px auto 0;
  max-width: 94%;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--text-secondary);
}

.seller-pill {
  margin: 18px auto 0;
  max-width: 95%;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}

.seller-pill__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.seller-pill__initial {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0d0f12;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.seller-pill__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.seller-pill strong {
  display: block;
  font-size: var(--fs-title-m);
  line-height: var(--lh-title-m);
  font-weight: var(--fw-bold);
}

.seller-pill small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
}

.seller-pill:focus-visible {
  outline: 2px solid #95a4bf;
  outline-offset: 2px;
}

.bottom-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  width: 100%;
  height: 62px;
  z-index: 20;
  pointer-events: none;
  background: transparent;
}

.bottom-nav__items {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 2px 10px;
  align-items: center;
  pointer-events: auto;
  background: #ffffff;
  border-radius: 26px;
  box-shadow: 0 8px 20px rgba(16, 28, 44, 0.12);
}

.bottom-nav__item {
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.bottom-nav__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}

.bottom-nav__icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.bottom-nav__logo {
  display: none; /* shown only at ≥1024px via desktop media query */
}

.bottom-nav__label {
  display: none; /* hidden on mobile/tablet; revealed at ≥1024px */
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(21, 28, 39, 0.42);
  z-index: 30;
}

.overlay--create {
  animation: create-fade-in 220ms ease-out;
}

.create-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 31;
  background: var(--bg-subtle);
  border-radius: 28px 28px 0 0;
  padding: 14px 14px 88px;
  overflow-y: auto;
  animation: create-sheet-up 260ms cubic-bezier(0.22, 0.7, 0.2, 1);
}

.create-sheet::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.create-sheet--start {
  min-height: 262px;
}

.create-sheet--expanded {
  min-height: 500px;
  max-height: calc(100% - 20px);
  animation: create-sheet-lift 200ms cubic-bezier(0.22, 0.7, 0.2, 1);
}

.create-sheet__start-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 54px;
}

.create-sheet__start-header h2 {
  margin: 0;
  font-size: var(--fs-title-l);
  line-height: var(--lh-title-l);
  font-weight: var(--fw-medium);
}

.create-sheet__close {
  position: absolute;
  right: 0;
  top: 4px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #2b313d;
  font-size: 28px;
  line-height: 1;
}

.create-sheet__choices {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.create-choice-card {
  width: 128px;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  gap: 12px;
}

.create-choice-card__icon-wrap {
  width: 76px;
  height: 104px;
  border-radius: 38px;
  border: 1.2px solid #d7ddea;
  display: grid;
  place-items: center;
}

.create-choice-card__icon-wrap img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.create-choice-card span {
  font-size: var(--fs-title-m);
  line-height: var(--lh-title-m);
  color: var(--text);
  font-weight: var(--fw-medium);
}

/* New label sub-elements — mobile defaults */
.create-choice-card__label {
  /* On mobile: visible, shows title centered (same position as the old bare <span>) */
  display: block;
  text-align: center;
}

.create-choice-card__desc {
  display: none; /* hidden on mobile */
}

.create-choice-card__chevron {
  display: none; /* hidden on mobile */
}

.create-sheet__flow-header {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  column-gap: 10px;
}

.create-sheet__flow-header h2 {
  margin: 0;
  text-align: center;
  font-size: var(--fs-title-l);
  line-height: var(--lh-title-l);
  font-weight: var(--fw-medium);
  color: #285261;
}

.create-sheet__flow-spacer {
  display: block;
  width: 40px;
  height: 40px;
}

.create-circle-btn {
  width: 40px;
  height: 40px;
  border: 1.6px solid #aebbd0;
  border-radius: 50%;
  background: transparent;
  color: #9aa8be;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.create-circle-btn svg { display: block; }

.create-circle-btn--next {
  font-size: 14px;
  font-weight: 600;
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.create-circle-btn--next.is-disabled {
  background: transparent;
  color: #bcc5d4;
  border-color: #d1d8e4;
  pointer-events: none;
}

/* ── Full-page create screens ─────────────────────────────────────────────────
   Rendered via renderMainContent() — fills the app's #cp-main container
   (position:absolute within it). Header/footer are sticky; body scrolls.
   Subtle slide+fade on open. Form typing does NOT trigger re-render (no jitter).
──────────────────────────────────────────────────────────────────────────── */

@keyframes fp-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Container — fills #cp-main (position:absolute;inset:0) */
.create-fullpage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  animation: fp-enter 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* ── Sticky icon bar (Back / Close only — no title) ── */
.create-fp__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 4px;     /* compact — icons only, no title row */
  flex-shrink: 0;
  background: #fff;
  /* intentionally no border-bottom */
}

.create-fp__header-side {
  min-width: 36px;
  display: flex;
  align-items: center;
}
.create-fp__header-side--right { justify-content: flex-end; }

/* Icon buttons — transparent background, show on hover only */
.create-fp__icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #888;
  flex-shrink: 0;
  transition: background 0.14s, color 0.14s;
}
.create-fp__icon-btn:hover { background: #f0f2f5; color: #333; }
.create-fp__icon-btn svg,
.create-fp__icon-btn img  { display: block; }

/* ── In-body page title (scrolls with content) ── */
.create-fp__page-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a5c58;          /* dark teal — same as CTA */
  text-align: center;
  margin: 6px 0 28px;      /* top gap small (header has padding), bottom generous */
  line-height: 1.25;
}

/* ── Scrollable body ── */
.create-fp__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 20px 12px;  /* reduced top — page-title adds its own top margin */
}

/* Centred layout for success screens */
.create-fp__body--centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Sticky footer + CTA button ── */
.create-fp__footer {
  flex-shrink: 0;
  padding: 12px 20px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
  background: #fff;
}

.create-fp__cta {
  display: block;
  width: 100%;
  padding: 16px 20px;
  background: #1a5c58;    /* dark teal — matches brand */
  color: #fff;
  border: none;
  border-radius: 14px;    /* rounded rect — not full pill */
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, opacity 0.15s;
}
.create-fp__cta:hover:not(:disabled)  { background: #154f4b; }
.create-fp__cta--disabled,
.create-fp__cta:disabled              { opacity: 0.45; cursor: default; }
.create-fp__cta svg                   { display: inline-block; vertical-align: middle; }

/* ── Form fields ── */
.create-fp__field-label {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  margin: 0 0 10px;
  text-align: center;    /* matches reference */
}

.create-fp__input {
  display: block;
  width: 100%;
  border: 1.5px solid #dde2ea;
  border-radius: 50px;
  padding: 13px 20px;
  font-size: 15px;
  color: #111;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.create-fp__input::placeholder { color: #aab2c0; }
.create-fp__input:focus         { border-color: #1a5c58; }

.create-fp__counter {
  text-align: right;
  font-size: 12px;
  color: #aab2c0;
  margin: 6px 4px 0;
}

/* Section label (e.g. "Visibility") — centred */
.create-fp__section-label {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 24px 0 12px;
}

/* Pill toggle (Private / Public) */
.create-fp__visibility-toggle {
  display: flex;
  background: #f0f2f5;
  border-radius: 50px;
  padding: 4px;
  gap: 0;
  max-width: 210px;      /* narrower, centred — matches reference */
  margin: 0 auto;
}

.create-fp__visibility-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 46px;
  background: transparent;
  color: #888;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.create-fp__visibility-btn.is-active {
  background: #1a5c58;   /* dark teal pill — matches reference */
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 5px rgba(0,0,0,0.15);
}

/* Hint text below visibility toggle */
.create-fp__hint {
  font-size: 12.5px;
  color: #999;
  text-align: center;
  margin: 12px 0 0;
  line-height: 1.55;
}

.create-page-preview {
  margin: 16px auto 0;
  width: 96px;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
}

.create-page-count {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--icon);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
}

.create-upload-mobile-head {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.create-upload-mobile-head strong {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--text);
}

.create-upload-mobile-permission {
  border: 1.2px solid #b8c3d7;
  background: #ffffff;
  color: #4f5f7c;
  border-radius: var(--radius-pill);
  min-height: 28px;
  padding: 0 10px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.create-upload-dropzone {
  margin-top: 12px;
  min-height: 220px;
  border-radius: 14px;
  border: 1px solid #394254;
  background: #1f2430;
  color: #e3e8f2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 16px;
}

.create-upload-dropzone__glyph {
  width: 54px;
  height: 44px;
  border: 2px solid #dce2ec;
  border-radius: 10px;
  position: relative;
}

.create-upload-dropzone__glyph::before {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -8px;
  width: 38px;
  height: 34px;
  border: 2px solid #dce2ec;
  border-radius: 10px;
  background: #1f2430;
}

.create-upload-dropzone p {
  margin: 0;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
}

.create-upload-dropzone__btn {
  border: 0;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 10px;
  background: #4f63d9;
  color: #fff;
  font-size: var(--fs-button-m);
  line-height: var(--lh-button-m);
  font-weight: var(--fw-semibold);
}

.create-file-input {
  display: none;
}

.create-media-tabs {
  margin: 12px auto 0;
  max-width: 268px;
  display: flex;
  justify-content: center;
  gap: 24px;
  border-bottom: 1px solid #e4e8f0;
}

.create-media-tabs button {
  border: 0;
  background: transparent;
  padding: 8px 0 10px;
  color: var(--text-muted);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
}

.create-media-tabs button.is-active {
  color: var(--text);
  border-bottom: 2px solid var(--text);
}

.create-thumb-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  min-height: 200px;
}

.create-thumb {
  border: 0;
  background: transparent;
  padding: 0;
  position: relative;
}

.create-thumb__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  background-size: cover;
  background-position: center;
}

.create-thumb__duration {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(30, 34, 40, 0.6);
  color: #fff;
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: var(--fw-medium);
}

.create-sheet__hint {
  margin: 10px 4px 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
}

.create-page-form {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.create-page-form label {
  margin: 2px 0 -4px;
  text-align: center;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--text);
  font-weight: var(--fw-medium);
}

.create-field-count {
  margin-top: -2px;
  text-align: right;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.create-page-form input,
.create-page-form textarea {
  width: 100%;
  border: 1.6px solid #c7d1e2;
  border-radius: 999px;
  background: #f8f9fb;
  color: var(--text-secondary);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  padding: 0 14px;
}

.create-page-form input {
  height: 48px;
}

.create-page-form textarea {
  min-height: 108px;
  border-radius: 20px;
  padding: 12px 14px;
  resize: none;
}

.create-catalog-picker {
  width: 100%;
  min-height: 46px;
  border: 1.5px solid #c7d1e2;
  border-radius: 999px;
  background: #f8f9fb;
  color: var(--text-muted);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.create-tags-help {
  margin: -2px 10px 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.create-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.create-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #c4cede;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  background: #fff;
}

.create-tag-btn {
  border: 0;
  border-radius: var(--radius-pill);
  min-height: 30px;
  padding: 0 14px;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--text-secondary);
  background: #e7ebf2;
  white-space: nowrap;
  flex-shrink: 0;
}

.create-tag-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.create-tag-input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}

.create-tag-input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  font-size: var(--fs-body-m);
  background: var(--bg);
  color: var(--text);
}

.create-tag-input:focus {
  outline: none;
  border-color: var(--brand);
}

.create-reset-btn {
  background: none;
  border: none;
  color: var(--error);
  font-size: var(--fs-caption);
  cursor: pointer;
  padding: 0 0 0 8px;
  line-height: 1;
}

.create-catalog-select {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  font-size: var(--fs-body-m);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  appearance: auto;
}

/* Category dropdown in page creation */
.create-cat-select {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  font-size: var(--fs-body-m);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  appearance: auto;
}

.create-cat-other {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.create-cat-other__input {
  width: 100%;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  font-size: var(--fs-body-m);
  background: var(--bg);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}

.create-cat-other__hint {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin: 0;
}

/* Required field asterisk */
.create-field-required {
  color: var(--error, #e53e3e);
  margin-left: 2px;
}

/* ── No-catalog empty state (inside page-details form) ───────────────────────── */
.create-no-catalog {
  background: #f8f9fb;
  border: 1.5px dashed #d4dae5;
  border-radius: var(--radius-sm, 8px);
  padding: 16px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.create-no-catalog__text {
  font-size: var(--fs-body-s, 13px);
  color: var(--text-secondary, #666);
  margin: 0;
  line-height: 1.4;
}

.create-no-catalog__cta {
  background: var(--brand, #1a5c58);
  color: #fff;
  border: none;
  border-radius: var(--radius-xs, 6px);
  padding: 9px 18px;
  font-size: var(--fs-body-m, 14px);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.create-no-catalog__cta:hover { background: #154f4b; }

.create-thumb.is-selected {
  outline: 2.5px solid var(--brand);
  border-radius: 6px;
  outline-offset: -2px;
}

.create-thumb__check {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  pointer-events: none;
}

.create-posted-list {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.create-posted-row {
  border: 1px solid #d7deec;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 8px;
  display: grid;
  grid-template-columns: 44px 1fr 28px;
  gap: 10px;
  align-items: center;
  text-align: left;
}

.create-posted-row__thumb {
  width: 44px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}

.create-posted-row__text strong {
  display: block;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--text);
  font-weight: var(--fw-semibold);
}

.create-posted-row__text small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
}

.create-posted-row__check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.4px solid #b8c4d8;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
}

.create-posted-row.is-selected {
  border-color: #99aac4;
  background: #f3f6fb;
}

.create-posted-row.is-selected .create-posted-row__check {
  background: #99aac4;
  border-color: #99aac4;
}

/* ── Catalog page picker — search row ─────────────────────────────────────── */

.create-posted-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.create-posted-search-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-subtle);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
}

.create-posted-search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.create-posted-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
  outline: none;
  font-family: inherit;
  min-width: 0;
  -webkit-appearance: none;
}
.create-posted-search-input::placeholder { color: var(--text-muted); }
.create-posted-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── Filter pills row ─────────────────────────────────────────────────────── */

.create-filter-row {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin-bottom: 10px;
}
.create-filter-row::-webkit-scrollbar { display: none; }

.create-filter-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: var(--bg-subtle);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.create-filter-pill:hover:not(.is-active) { background: var(--line); color: var(--text); }
.create-filter-pill.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.create-filter-sep {
  width: 1px;
  height: 16px;
  background: var(--line);
  flex-shrink: 0;
  margin: 0 2px;
}

.create-posted-empty {
  text-align: center;
  padding: 28px 0;
  font-size: 14px;
  color: var(--text-muted);
  display: none;
}

/* ── Catalog page picker — summary bar ────────────────────────────────────── */

.create-posted-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
}

.create-posted-summary__count {
  font-size: 13px;
  color: var(--text-muted);
}

.create-posted-summary__clear {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
  padding: 0;
  transition: opacity 0.12s;
}
.create-posted-summary__clear:hover { opacity: 0.75; }
.create-posted-summary__clear:disabled { color: var(--text-muted); cursor: default; opacity: 1; }

/* ── Video thumbnail inside row thumb ─────────────────────────────────────── */

.create-posted-row__thumb {
  position: relative;
  overflow: hidden;
}

.create-posted-row__thumb--video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.create-catalog-form {
  margin-top: 14px;
}

.create-catalog-form label {
  display: block;
  text-align: center;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  font-weight: var(--fw-medium);
  margin-bottom: 8px;
}

.create-catalog-form input {
  width: 100%;
  height: 48px;
  border: 1.6px solid #c7d1e2;
  border-radius: 999px;
  padding: 0 14px;
  text-align: center;
  color: var(--text-secondary);
  background: #f8f9fb;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
}

.create-catalog-form__count {
  margin-top: 6px;
  text-align: right;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.create-catalog-visibility {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid #e3e8f1;
}

.create-catalog-visibility h3 {
  margin: 0;
  text-align: center;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  font-weight: var(--fw-medium);
}

.create-visibility-switch {
  margin: 8px auto 0;
  max-width: 178px;
  border: 1.5px solid #b2bfd5;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.create-visibility-switch button {
  border: 0;
  min-height: 36px;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-button-m);
  line-height: var(--lh-button-m);
  font-weight: var(--fw-medium);
}

.create-visibility-switch button.is-active {
  background: #1f5561;
  color: #fff;
}

.create-catalog-visibility p {
  margin: 12px auto 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

@keyframes create-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes create-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes create-sheet-lift {
  from {
    transform: translateY(16%);
  }
  to {
    transform: translateY(0);
  }
}

.btn {
  border: 1px solid #cad3e2;
  border-radius: var(--radius-pill);
  background: #eef2f8;
  min-height: 42px;
  color: var(--text);
  font-size: var(--fs-button-l);
  line-height: var(--lh-button-l);
  font-weight: var(--fw-semibold);
}

@media (min-width: 768px) {
  /* ── Tablet layout: full-screen app, bottom floating nav ──────────────── */

  .app-shell {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .desktop-copy {
    display: none;
  }

  .phone-frame {
    grid-column: 1;
    padding: 0;
    display: block;
  }

  /* Full-screen — no phone-frame chrome */
  .app {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  /* Wider side gutters; extra bottom room for the floating nav pill */
  .app__scroll {
    padding: 0 20px 100px;
  }

  /* Hide the layout-mode toggle at tablet and above */
  .home-layout-dot {
    display: none;
  }

  /* Tablet home feed: 2-column grid */
  .grid-layout--home-single {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  /* Triple grid also 2 columns at tablet (toggle hidden) */
  .grid-layout--three.home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

/* ── Auth Screen ──────────────────────────────────────────────────────────────── */

.auth-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 24px 16px;
  background: var(--bg);
}

.auth-guest-back {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-body-s);
  cursor: pointer;
  padding: 4px 0 16px;
  text-decoration: none;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-logo__mark {
  display: block;
  width: 32px;
  height: 32px;
  background: var(--brand);
  border-radius: var(--radius-xs);
}

.auth-logo__name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--brand);
  letter-spacing: -0.5px;
}

.auth-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auth-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--text);
  line-height: var(--lh-h3);
}

.auth-subtitle {
  margin: 0;
  font-size: var(--fs-body-m);
  color: var(--text-secondary);
  line-height: var(--lh-body-m);
}

.auth-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: var(--error);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-label {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.auth-input {
  background: var(--bg-subtle);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 11px 14px;
  font-size: var(--fs-body-m);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}

.auth-input:focus {
  border-color: var(--brand);
  background: var(--bg);
}

.auth-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-input::placeholder {
  color: var(--text-muted);
}

.auth-role-toggle {
  display: flex;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.auth-role-btn {
  flex: 1;
  padding: 10px 0;
  background: var(--bg-subtle);
  border: none;
  cursor: pointer;
  font-size: var(--fs-body-m);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}

.auth-role-btn + .auth-role-btn {
  border-left: 1.5px solid var(--line);
}

.auth-role-btn--active {
  background: var(--brand);
  color: #fff;
}

.auth-submit {
  margin-top: 4px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-xs);
  padding: 13px 16px;
  font-size: var(--fs-button-l);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: opacity 0.15s;
}

.auth-submit:hover {
  opacity: 0.9;
}

.auth-submit--loading,
.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-switch {
  text-align: center;
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
}

.auth-link {
  background: none;
  border: none;
  color: var(--brand);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ── Feed loading / empty states ─────────────────────────────────────────────── */

.feed-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  gap: 12px;
}

.feed-state__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.feed-state__text {
  margin: 0;
  font-size: var(--fs-body-m);
  color: var(--text-muted);
  text-align: center;
  line-height: var(--lh-body-m);
}

.feed-state__text--error {
  color: var(--error);
}

.catalog-page__add-btn {
  margin-top: 16px;
  width: auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ── Catalog empty state ──────────────────────────────────────────────────────── */

.catalog-empty-state {
  grid-column: 1 / -1; /* span all grid columns */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px 48px;
  text-align: center;
  width: 100%;
}


.catalog-empty-state__title {
  font-size: 18px;
  font-weight: 700;
  color: #1e4650;
  margin: 0 0 8px;
}

.catalog-empty-state__body {
  font-size: 14px;
  color: #6c7483;
  margin: 0 0 24px;
  line-height: 1.5;
  max-width: 240px;
}

.catalog-empty-state__btn {
  background: var(--accent, #1e4650);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px 30px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease;
}

.catalog-empty-state__btn:hover { background: #154f4b; }

/* ── Catalog Creation Full Page ───────────────────────────────────────────────── */
/* Mobile/tablet: scrollable page with card taking full width                      */

.cat-create-page {
  min-height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.cat-create-page__canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 64px;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

/* ── Card ─────────────────────────────────────────────────────────────────────── */

.cat-create-page__card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(21, 28, 39, 0.08);
  box-shadow:
    0 1px 4px rgba(21, 28, 39, 0.05),
    0 6px 24px rgba(21, 28, 39, 0.07);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
}

/* Close (×) button — absolute top-right of card */
.cat-create-page__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa3b2;
  transition: background 140ms ease, color 140ms ease;
}
.cat-create-page__close:hover {
  background: #f0f3f8;
  color: #6b7280;
}

/* Title — centered, large */
.cat-create-page__title {
  font-size: 21px;
  font-weight: 700;
  color: #1a1f2e;
  text-align: center;
  margin: 0 0 20px;
  padding: 0 40px; /* room for close btn */
  line-height: 1.25;
}

/* Error banner */
.cat-create-page__error {
  background: #fff5f5;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #dc2626;
  margin: 0 0 16px;
}

/* ── Name field ─────────────────────────────────────────────────────────────── */

.cat-create-page__field-group {
  margin-bottom: 20px;
}

.cat-create-page__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
  text-align: center;
}

.cat-create-page__req {
  color: #dc2626;
  margin-left: 2px;
}

.cat-create-page__input {
  width: 100%;
  padding: 12px 20px;
  border: 1.5px solid #dce2ec;
  border-radius: 999px;
  font-size: 14.5px;
  color: #23272f;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  -webkit-appearance: none;
}
.cat-create-page__input::placeholder { color: #b0bac8; font-size: 14px; }
.cat-create-page__input:focus {
  border-color: #1e4650;
  box-shadow: 0 0 0 3px rgba(30, 70, 80, 0.08);
}

.cat-create-page__counter {
  text-align: right;
  font-size: 11px;
  color: #9aa3b2;
  margin-top: 5px;
}

/* ── Visibility segmented control ─────────────────────────────────────────────── */

.cat-create-page__vis-group {
  margin-bottom: 16px;
}

.cat-create-page__vis-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  text-align: center;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}

.cat-create-page__seg {
  display: flex;
  background: #edf0f5;
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  width: 200px;
  margin: 0 auto;
}

.cat-create-page__seg-btn {
  flex: 1;
  padding: 9px 16px;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
  letter-spacing: 0.01em;
}

.cat-create-page__seg-btn.is-active {
  background: var(--accent, #1e4650);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(30, 70, 80, 0.32);
}

/* ── Private / Public info blocks ─────────────────────────────────────────────── */

.cat-create-page__info-blocks {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.cat-create-page__info-block {
  padding: 10px 0;
  border-bottom: 1px solid #f0f3f8;
}
.cat-create-page__info-block:first-child {
  border-top: 1px solid #f0f3f8;
}

.cat-create-page__info-head {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin: 0 0 5px;
  text-align: center;
}

.cat-create-page__info-desc {
  font-size: 12.5px;
  color: #6c7483;
  margin: 0;
  line-height: 1.55;
  text-align: center;
}
.cat-create-page__info-desc strong { color: #374151; font-weight: 600; }

/* ── Create CTA button ─────────────────────────────────────────────────────────── */

.cat-create-page__cta {
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: 999px;
  background: var(--accent, #1e4650);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 150ms ease, opacity 150ms ease;
  letter-spacing: 0.02em;
}
.cat-create-page__cta:hover:not(:disabled) { background: #154f4b; }
.cat-create-page__cta.is-disabled,
.cat-create-page__cta:disabled {
  background: #c8d2dc;
  color: #8899aa;
  cursor: default;
}
.cat-create-page__cta svg { display: inline-block; }

/* ── Right-side helper panel (desktop only) ──────────────────────────────────── */

.cat-create-page__helper {
  display: none; /* hidden on mobile/tablet */
}

.cat-create-page__helper-item h3 {
  font-size: 15px;
  font-weight: 600;
  color: #1e4650;
  margin: 0 0 6px;
  line-height: 1.3;
}

.cat-create-page__helper-item p {
  font-size: 13.5px;
  color: #6c7483;
  margin: 0;
  line-height: 1.55;
}

/* ── Add Page popup ───────────────────────────────────────────────────────────── */

.overlay--add-page {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 34;
}

.add-page-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 35;
  background: #fff;
  border-radius: 20px 20px 0 0;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sheet-up 220ms cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

.add-page-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px;
  border-bottom: 1px solid #f0f3f8;
  flex-shrink: 0;
}

.add-page-popup__title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1f2e;
  margin: 0;
}

.add-page-popup__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: #f4f6f9;
  cursor: pointer;
  color: #6b7280;
  transition: background 140ms ease;
}
.add-page-popup__close:hover { background: #e9ecf2; }

.add-page-popup__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 28px;
}

.add-page-popup__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid #f0f3f8;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}

.add-page-popup__count {
  font-size: 13px;
  font-weight: 500;
  color: #6c7483;
}

.add-page-popup__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.add-page-popup__cancel {
  border: 1.5px solid #d5dae4;
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #6c7483;
  background: none;
  cursor: pointer;
  transition: border-color 140ms ease;
}
.add-page-popup__cancel:hover { border-color: #b0b8c8; }

.add-page-popup__cta {
  background: var(--accent, #1e4650);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 150ms ease;
}
.add-page-popup__cta:hover:not(:disabled) { background: #154f4b; }
.add-page-popup__cta.is-disabled,
.add-page-popup__cta:disabled             { opacity: 0.42; cursor: default; }
.add-page-popup__cta svg                  { display: inline-block; }

/* ── Add Page popup: inner content spacing fixes ─────────────────────────────
   Scoped so they don't affect the full-page catalog picker (.create-fp__body).
   ─────────────────────────────────────────────────────────────────────────── */

/* More breathing room between search and filter chips */
.add-page-popup .create-posted-search-row {
  margin-bottom: 14px;
}

/* More space between filter chips and hint text */
.add-page-popup .create-filter-row {
  margin-bottom: 14px;
  padding-bottom: 0;
}

/* Tighten hint margin — body padding + search/filter margins already give space */
.add-page-popup .create-sheet__hint {
  margin: 0 0 2px;
}

/* First row spacing and row-to-row gap */
.add-page-popup .create-posted-list {
  margin-top: 14px;
  gap: 12px;
}

/* More interior padding in each row so thumbnail/text/check breathe */
.add-page-popup .create-posted-row {
  padding: 10px 12px;
}

/* ── Search screen ────────────────────────────────────────────────────────────── */

/* Outer container */
.search-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: 80px;
}

/* ── Pill search bar — width/centering from .search-body > * ─── */
.search-bar {
  position: sticky;
  top: 14px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
  margin-bottom: 30px;
}
.search-bar:focus-within {
  border-color: var(--line-strong);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.09);
}

.search-bar__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  opacity: 0.75;
}

.search-bar__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  -webkit-appearance: none;
  font-family: inherit;
}
.search-bar__input::placeholder {
  color: var(--text-muted);
  font-size: 15px;
}

.search-bar__clear {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.12s;
}
.search-bar__clear:hover {
  opacity: 1;
}

/* ── Dismiss (×) — fixed top-right corner, independent of body flow ─── */
.search-dismiss {
  display: none;
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.search-dismiss:active {
  background: var(--bg-subtle);
}

@media (min-width: 1024px) {
  .search-dismiss {
    display: flex;
  }
}

/* Body: bar + results share the same 800px-centered column */
.search-body {
  flex: 1;
  padding: 0;
}

/* Every direct child (bar, results, idle state) is 800px centered */
.search-body > * {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .search-body {
    padding: 14px 16px 0;
  }

  .search-section {
    padding: 0 16px;
  }
}

/* Recent searches */
.search-recent {
  padding: 20px 16px 8px;
}
.search-recent__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.search-recent__label {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.search-recent__clear {
  background: none;
  border: none;
  color: var(--brand);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  cursor: pointer;
  padding: 0;
}
.search-recent__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-recent__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-subtle, rgba(0,0,0,.06));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.search-recent__item:last-child {
  border-bottom: none;
}
.search-recent__clock {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}
.search-recent__query {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body-m);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-recent__loc {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}
.search-recent__remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Loading spinner */
.search-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: search-spin 0.75s linear infinite;
}
@keyframes search-spin {
  to { transform: rotate(360deg); }
}

/* State views */
.search-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px 32px;
}
.search-state--col {
  flex-direction: column;
  gap: 8px;
}
.search-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--text-muted);
  opacity: 0.45;
  margin-bottom: 4px;
}
.search-state__text {
  margin: 0;
  font-size: var(--fs-body-m);
  color: var(--text);
  text-align: center;
  font-weight: var(--fw-medium);
}
.search-state__text--error {
  color: var(--error);
}
.search-state__hint {
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--text-muted);
  text-align: center;
}
.search-retry-btn {
  margin-top: 8px;
  background: none;
  border: 1.5px solid var(--brand);
  color: var(--brand);
  border-radius: var(--radius-pill);
  padding: 8px 20px;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

/* Results */
.search-results {
  padding: 8px 0;
}
.search-section {
  padding: 0;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.search-section-title {
  margin: 16px 0 10px;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.search-section-count {
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
.search-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Mobile: hide title + 3-dot actions on 3-column grids — cards too narrow */
@media (max-width: 767px) {
  .search-product-grid .product-card__body--row,
  .grid-layout--three .product-card__body--row {
    display: none;
  }
}

/* Supplier rows */
.search-supplier-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.search-supplier-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-subtle, rgba(0,0,0,.06));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.search-supplier-row:last-child {
  border-bottom: none;
}
.search-supplier__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.search-supplier__avatar--initials {
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
}
.search-supplier__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-supplier__name {
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-supplier__cat {
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-supplier__loc {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.search-supplier__arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

/* Load more */
/* Replaced load-more button with IntersectionObserver sentinel */
.search-sentinel {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 24px;
}

.search-sentinel__spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

/* "More from the feed" divider between primary results and fallback feed */
.search-feed-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0 8px;
}

.search-feed-divider__line {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.search-feed-divider__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Create sheet submission states ──────────────────────────────────────────── */

.create-submit-error {
  margin: 0 16px 12px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: var(--error);
  border-radius: var(--radius-xs);
  font-size: var(--fs-body-s);
}

.create-submit-note {
  margin: 0 16px 12px;
  padding: 10px 14px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: var(--success);
  border-radius: var(--radius-xs);
  font-size: var(--fs-body-s);
}

/* ── Follow button ────────────────────────────────────────────────────────────── */

.follow-btn {
  flex-shrink: 0;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: opacity 0.15s;
}

.follow-btn:hover { opacity: 0.85; }
.follow-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.follow-btn--following {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1.5px solid var(--line);
}

/* ── Catalog full-page screen ────────────────────────────────────────────────── */

/* ── Catalog Page — new redesign ──────────────────────────────────────────── */

/* Full-page wrapper — flex column so seller bar is a true sticky footer */
.catalog-page {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Single Shortlist detail page — mirrors catalog-page architecture ─────── */
.sl-detail-page {
  position: absolute;
  inset: 0;
  background: var(--bg);
  overflow: hidden;
}

.sl-detail-page__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 60px;
  padding-bottom: 120px;
}

/* Controls bar — transparent sticky overlay at top, icons only */
.catalog-page__controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: transparent;
}

/* Scrollable content — flex: 1 fills space between controls overlay and seller bar */
.catalog-page__scroll {
  flex: 1;
  min-height: 0; /* required for flex children to scroll correctly */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 60px;  /* clear the absolute controls bar */
  padding-bottom: 16px;
}

/* Back button */
.catalog-page__circle-btn {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* 3-dots button */
.catalog-page__dots-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s;
  flex-shrink: 0;
}
.catalog-page__dots-btn:active { background: var(--bg-subtle); }

/* Rename input in controls bar */
.catalog-page__rename-input {
  flex: 1;
  margin: 0 8px;
  padding: 6px 10px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--bg);
  font: inherit;
  font-size: var(--fs-body-m);
  color: var(--text);
  outline: none;
}
.catalog-page__rename-input:focus { border-color: var(--brand); }

.catalog-page__rename-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.catalog-page__rename-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  transition: background 0.12s;
}
.catalog-page__rename-btn--confirm {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.catalog-page__rename-btn:active { background: var(--bg-subtle); }
.catalog-page__rename-btn--confirm:active { background: #163640; }

/* Non-sticky heading block — all centered, scrolls with page */
.catalog-page__heading {
  padding: 0 16px 4px;
  text-align: center;
}

.catalog-page__label {
  margin: 0 0 6px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.catalog-page__title {
  margin: 0 0 6px;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--text);
}

.catalog-page__count {
  margin: 0 0 4px;
  font-size: var(--fs-body-s);
  color: var(--text-muted);
}

/* Catalog layout-dot: inherits home-layout-dot, centered in heading */
.catalog-page__layout-dot {
  margin: 8px auto 12px;
}

/* Share link box */
.catalog-page__share-link {
  margin: 0 16px 12px;
}

/* Items container — padding only; layout class added dynamically */
.catalog-page__items {
  padding: 4px 12px 20px;
}

/* Item card */
.catalog-page__item {
  cursor: pointer;
  background: none;
  border: none;
  display: block;
  width: 100%;
  text-align: left;
}

.catalog-page__item-media {
  width: 100%;
  aspect-ratio: 9 / 16;
  background-color: #e8edf4;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}


.catalog-page__item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 2px 4px;
  gap: 6px;
}
.grid-layout--three .catalog-page__item-footer {
  display: none;
}

.catalog-page__item-title {
  flex: 1;
  font-size: 16px;
  padding-left: 5px;
  font-weight: var(--fw-medium);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.catalog-page__item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.catalog-page__item-save,
.catalog-page__item-more {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.12s;
}
.catalog-page__item-save.is-saved { color: var(--brand); }
.catalog-page__item-save:active,
.catalog-page__item-more:active { color: var(--text); }

/* Sticky seller bar — always at bottom of catalog-page */
.catalog-page__seller-bar {
  flex-shrink: 0;
  padding: 8px 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.catalog-page__seller-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 10px 8px 8px;
  text-align: left;
  width: 100%;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 0.12s;
}
.catalog-page__seller-pill:active { background: var(--bg-subtle); }

.catalog-page__seller-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.catalog-page__seller-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.catalog-page__seller-name {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-page__seller-bio,
.catalog-page__seller-location {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-page__seller-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* 3-dots settings menu overlay */
.catalog-page__menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 20;
}

.catalog-page__menu-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  z-index: 21;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  box-shadow: 0 -4px 24px rgba(20, 30, 44, 0.10);
  animation: sheet-up 0.28s cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* Header row: just the close button pinned to the right */
.catalog-page__menu-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 20px 4px;
}

.catalog-page__menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.catalog-page__menu-close:active { opacity: 1; }

.catalog-page__menu-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: var(--fs-body-m);
  font-weight: 500;
  color: var(--text);
  transition: background 0.1s;
}
.catalog-page__menu-row:active { background: var(--bg-subtle); }
.catalog-page__menu-row:last-child { padding-bottom: 40px; }
.catalog-page__menu-row:disabled { opacity: 0.35; cursor: not-allowed; }
.catalog-page__menu-row--danger { color: var(--error); }
.catalog-page__menu-row img { flex-shrink: 0; opacity: 0.75; }
.catalog-page__menu-row--danger img { opacity: 1; }

/* keyframe shared by profile & catalog/shortlist popovers (base-level so it's
   always resolved, even though the element only appears at ≥1024px in practice) */
@keyframes cp-popover-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Catalog / Shortlist desktop settings popover ──────────────────────────────
   Transparent overlay catches outside-click; popover anchored top-right near the
   3-dots button. Hidden on mobile — only shown via JS when catalogPageMenuPopover
   or slDetailMenuPopover flags are set (which only happens on ≥1024px viewports).
   ─────────────────────────────────────────────────────────────────────────────── */

/* Full-viewport transparent overlay — catches clicks outside the card */
.cp-settings-popover-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 25;
}

/* Compact floating card anchored below the controls bar, flush to the right */
.cp-settings-popover {
  position: absolute;
  top: 62px;    /* controls bar is ~60px tall (12px padding + 36px btn + 12px) */
  right: 10px;  /* matches the 3-dots button right edge (controls padding: 16px, btn: 36px → ~10px offset for 220px card) */
  width: 220px;
  background: var(--bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-medium), 0 0 0 1px rgba(0, 0, 0, 0.07);
  z-index: 26;
  animation: cp-popover-in 0.15s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

/* Compact row styles override the mobile-first padding/sizing */
.cp-settings-popover .catalog-page__menu-row {
  padding: 11px 16px;
  gap: 11px;
  font-size: var(--fs-body-s);
}

.cp-settings-popover .catalog-page__menu-row img {
  width: 17px;
  height: 17px;
}

/* Remove extra bottom padding added for mobile safe-area spacing */
.cp-settings-popover .catalog-page__menu-row:last-child {
  padding-bottom: 11px;
}

/* Active-state tinting */
.cp-settings-popover .catalog-page__menu-row:hover:not(:disabled) {
  background: var(--bg-subtle);
}

/* Overlay rendered above the catalog page during catalog edit/page-select flows */
.catalog-edit-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
}
/* Suppress fp-enter replay when the overlay is already mounted (page select taps) */
.catalog-edit-overlay.no-anim .create-fullpage {
  animation: none !important;
}

/* ── Enquiry sheet ────────────────────────────────────────────────────────────── */

.overlay--enquiry {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
}

/* ── Sheet container ──────────────────────────────────────────────────────── */

@keyframes enquiry-modal-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% - 14px)) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.enquiry-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-medium);
  max-height: min(90dvh, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sheet-up 0.28s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.enquiry-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--line-strong);
  border-radius: 2px;
  margin: 12px auto 0;
  flex-shrink: 0;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.enquiry-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 14px;
  flex-shrink: 0;
}

.enquiry-sheet__header-text { flex: 1; min-width: 0; }

.enquiry-sheet__title {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.enquiry-sheet__subtitle {
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--text-muted);
  line-height: 1.4;
}

.enquiry-sheet__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}
.enquiry-sheet__close:hover { background: var(--line); }

/* ── Scrollable body ──────────────────────────────────────────────────────── */

.enquiry-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 8px;
}

/* ── Product context card ─────────────────────────────────────────────────── */

.enquiry-product-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 20px;
}

.enquiry-product-card__thumb {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  background-color: var(--line);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.enquiry-product-card__thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.enquiry-product-card__info {
  flex: 1;
  min-width: 0;
}

.enquiry-product-card__title {
  margin: 0 0 4px;
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enquiry-product-card__seller {
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Form fields ──────────────────────────────────────────────────────────── */

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

.enquiry-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.enquiry-label {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.enquiry-optional {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

/* Quantity input with icon + suffix */
.enquiry-input-wrap {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  overflow: hidden;
  transition: border-color 0.15s;
}
.enquiry-input-wrap:focus-within { border-color: var(--brand); }

.enquiry-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: var(--text-muted);
  flex-shrink: 0;
  border-right: 1.5px solid var(--line);
  height: 48px;
}

.enquiry-input-suffix {
  padding: 0 14px;
  font-size: var(--fs-body-s);
  color: var(--text-muted);
  flex-shrink: 0;
  border-left: 1.5px solid var(--line);
  height: 48px;
  display: flex;
  align-items: center;
}

.enquiry-input-wrap .enquiry-input {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0 12px;
  height: 48px;
  font-size: var(--fs-body-m);
}
.enquiry-input-wrap .enquiry-input:focus { border-color: transparent; background: transparent; }

/* Standalone textarea */
.enquiry-input {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
  font-size: var(--fs-body-m);
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  width: 100%;
  box-sizing: border-box;
}
.enquiry-input:focus { border-color: var(--brand); }
.enquiry-input--textarea { resize: none; min-height: 120px; }
.enquiry-input::placeholder { color: var(--text-muted); }
.enquiry-input:disabled { opacity: 0.5; }

/* Hint + char counter */
.enquiry-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.enquiry-field-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.enquiry-char-count {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Footer with action buttons ───────────────────────────────────────────── */

.enquiry-sheet__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.enquiry-cancel {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 13px;
  font-size: var(--fs-button-l);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background 0.12s;
}
.enquiry-cancel:hover { background: var(--bg-subtle); }

.enquiry-submit {
  flex: 2;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-xs);
  padding: 13px;
  font-size: var(--fs-button-l);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: opacity 0.15s;
}
.enquiry-submit:hover { opacity: 0.9; }
.enquiry-submit--loading, .enquiry-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Error / success states ───────────────────────────────────────────────── */

.enquiry-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: var(--error);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  font-size: var(--fs-body-s);
  margin-bottom: 4px;
}

.enquiry-success {
  text-align: center;
  padding: 28px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.enquiry-success p {
  margin: 0;
  font-size: var(--fs-body-m);
  color: var(--text);
  line-height: var(--lh-body-m);
}

.enquiry-done-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-xs);
  padding: 11px 32px;
  font-size: var(--fs-button-m);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

/* ── Manufacturer enquiry inbox ───────────────────────────────────────────────── */

.enquiry-inbox {
  padding: 12px 16px 80px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.enquiry-row {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.enquiry-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.enquiry-row__buyer {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.enquiry-row__product {
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
}

.enquiry-row__qty {
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--text);
}

.enquiry-row__message {
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--text);
  line-height: var(--lh-body-s);
  background: var(--bg-subtle);
  padding: 8px 10px;
  border-radius: var(--radius-xs);
}

.enquiry-row__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.enquiry-action-btn {
  background: var(--bg-subtle);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 5px 12px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  cursor: pointer;
  color: var(--text);
}

.enquiry-action-btn--close {
  color: var(--error);
  border-color: #fca5a5;
}

.enquiry-action-btn--chat {
  color: var(--brand);
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, transparent);
}
.enquiry-action-btn--chat:hover {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.enquiry-row__buyer-email {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-weight: 400;
}

.enquiry-row__product-link {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ── Enquiry status badges ────────────────────────────────────────────────────── */

.enquiry-badge {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.badge--new     { background: #dbeafe; color: #1d4ed8; }
.badge--seen    { background: var(--bg-subtle); color: var(--text-secondary); }
.badge--replied { background: #dcfce7; color: #15803d; }
.badge--closed  { background: var(--bg-subtle); color: var(--text-muted); }

/* ── Admin Panel ──────────────────────────────────────────────────────────────── */

.admin-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg-subtle);
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  background: var(--brand);
  color: #fff;
}

.admin-header__label {
  margin: 0;
  font-size: var(--fs-caption);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-header__name {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1.2;
}

.admin-logout-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: var(--radius-xs);
  padding: 7px 14px;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.admin-tabs {
  display: flex;
  background: var(--bg);
  border-bottom: 1.5px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }

.admin-tab-btn {
  flex: 1;
  padding: 11px 8px;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  min-width: 80px;
}

.admin-tab-btn--active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.admin-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 40px;
}

.admin-section-header {
  padding: 16px 16px 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}

.admin-section-title {
  font-size: var(--fs-title-m);
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0 0 10px;
}

.admin-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.admin-filter-btn {
  background: var(--bg-subtle);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  cursor: pointer;
  color: var(--text-secondary);
}

.admin-filter-btn--active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* Dashboard stats */
.admin-dashboard {
  padding: 16px;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.admin-stat-card {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.admin-stat-card--accent {
  border-color: var(--brand);
  background: #f0f7f9;
}

.admin-stat-card__value {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--text);
}

.admin-stat-card__label {
  font-size: var(--fs-micro);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.admin-quick-links { display: flex; flex-direction: column; gap: 8px; }

.admin-quick-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-xs);
  padding: 13px 16px;
  font-size: var(--fs-button-m);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-align: left;
}

/* Moderation queue */
.admin-product-list {
  padding: 0 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-product-row {
  display: flex;
  gap: 12px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  align-items: flex-start;
}

.admin-product-row__media {
  width: 60px;
  height: 80px;
  flex-shrink: 0;
  background: var(--bg-subtle) center/cover no-repeat;
  border-radius: var(--radius-xs);
}

.admin-product-row__media--empty {
  background-color: var(--line);
}

.admin-product-row__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.admin-product-row__top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-product-row__title {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--text);
  line-height: 1.3;
}

.admin-product-row__meta {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.admin-product-row__desc {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  line-height: 1.4;
}

.admin-product-row__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.admin-action-btn {
  background: var(--bg-subtle);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 5px 12px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  cursor: pointer;
  color: var(--text);
}

.admin-action-btn--approve {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}

.admin-action-btn--reject {
  background: #fef2f2;
  border-color: #fca5a5;
  color: var(--error);
}

/* Admin badges */
.admin-badge {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

.abadge--pending  { background: #fef9c3; color: #a16207; }
.abadge--approved { background: #dcfce7; color: #15803d; }
.abadge--rejected { background: #fef2f2; color: var(--error); }
.abadge--hidden   { background: var(--bg-subtle); color: var(--text-muted); }

/* Users list */
.admin-user-list {
  padding: 0 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.admin-user-row--inactive { opacity: 0.6; }

.admin-user-row__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body-m);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.admin-user-row__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-user-row__name {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-user-row__email {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-user-row__meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; }

.admin-role-badge {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.admin-role-badge--buyer        { background: #dbeafe; color: #1d4ed8; }
.admin-role-badge--manufacturer { background: #ede9fe; color: #6d28d9; }
.admin-role-badge--admin        { background: #fef9c3; color: #a16207; }
.admin-role-badge--super        { background: #fce7f3; color: #be185d; }
.admin-role-badge--user         { background: #f0f2f5; color: var(--text-secondary); }

/* Categories */
.admin-add-cat-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.admin-cat-input {
  flex: 1;
  min-width: 120px;
  background: var(--bg-subtle);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  font-size: var(--fs-body-s);
  font-family: inherit;
  color: var(--text);
  outline: none;
}

.admin-cat-input:focus { border-color: var(--brand); }

.admin-form-error {
  width: 100%;
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--error);
}

.admin-cat-list {
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
}

.admin-cat-row__name {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  color: var(--text);
  flex: 1;
}

.admin-cat-row__slug {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-family: monospace;
}

.admin-cat-row__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Category section blocks */
.admin-cat-section {
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.admin-cat-section:last-child { border-bottom: none; }

.admin-cat-section__title {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0;
  padding: 14px 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Badges */
.admin-cat-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.admin-cat-badge--admin   { background: #e8f0fe; color: #1a73e8; }
.admin-cat-badge--user    { background: #fce8b2; color: #a56700; }
.admin-cat-badge--pending { background: var(--brand); color: #fff; font-size: 12px; }

/* Suggestion rows */
.admin-sug-list {
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-cat-suggestion-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fffbf0;
  border: 1.5px solid #f5e090;
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  flex-wrap: wrap;
}

.admin-cat-sug__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 140px;
}

.admin-cat-sug__input {
  font-weight: var(--fw-medium);
}

.admin-cat-sug__meta {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.admin-cat-sug__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.admin-empty-note {
  padding: 12px 16px;
  font-size: var(--fs-body-s);
  color: var(--text-muted);
  margin: 0;
}

/* ── Manufacturer Profile (read-only) ────────────────────────────────────────── */

.mfr-profile {
  min-height: 100%;
  background: var(--bg);
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.mfr-profile__hero {
  position: relative;
  background: var(--bg);
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}

.mfr-profile-back {
  position: absolute;
  top: 14px;
  left: 14px;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mfr-profile__avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  overflow: hidden;
}
.mfr-profile__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.mfr-profile__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0;
  text-align: center;
}

.mfr-profile__location {
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
  text-align: center;
}

.mfr-profile__website {
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--brand);
  text-align: center;
}

.mfr-profile__stats {
  display: flex;
  align-items: center;
  gap: 20px;
}

.mfr-profile__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mfr-profile__stat strong {
  font-size: var(--fs-title-m);
  font-weight: var(--fw-bold);
  color: var(--text);
}

.mfr-profile__stat span {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.mfr-profile__stat-divider {
  width: 1px;
  height: 28px;
  background: var(--line);
}

.mfr-profile__bio {
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
  text-align: center;
  line-height: var(--lh-body-s);
  max-width: 280px;
}

.mfr-follow-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 9px 28px;
  font-size: var(--fs-button-m);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  margin-top: 12px;
  transition: opacity 0.15s;
}

.mfr-follow-btn:hover { opacity: 0.9; }
.mfr-follow-btn:disabled { opacity: 0.5; }

.mfr-follow-btn--following {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1.5px solid var(--line);
}

.mfr-profile__products {
  padding: 16px 0 80px;
}


/* ── Floating message FAB ───────────────────────────────────────────────────── */

.msg-fab {
  position: absolute;
  left: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--line);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition: box-shadow 0.15s, background 0.15s;
}
.msg-fab:hover { background: var(--bg-subtle); box-shadow: 0 4px 12px rgba(0,0,0,0.14); }

.msg-fab__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ── Phase 5: Messages + Notifications ─────────────────────────────────────── */

/* Nav badge */
.nav-badge {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* Messages screen */
.msgs-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
}

.msgs-topbar {
  padding: 16px 16px 8px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.msgs-title {
  font-size: var(--fs-heading-s);
  font-weight: var(--fw-bold);
  color: var(--text);
  margin: 0;
}

.msgs-close {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.msgs-close svg {
  width: 18px;
  height: 18px;
}

.msgs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  color: var(--text-muted);
  text-align: center;
}

.msgs-empty svg { opacity: 0.4; }
.msgs-empty p { font-size: var(--fs-body-m); font-weight: var(--fw-medium); margin: 0; }
.msgs-empty span { font-size: var(--fs-body-s); }

.msgs-empty__spin {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Conversation list */
.convo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.convo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.1s;
  position: relative;
}

.convo-item:active { background: var(--bg-subtle); }
.convo-item--unread { background: var(--bg-subtle); }

.convo-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;   /* clips the photo to the circle */
}
/* Avatar photo — fills the circle */
.convo-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
/* Initials fallback span — centred inside the circle */
.convo-avatar__ini {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.convo-info { flex: 1; min-width: 0; }

.convo-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.convo-name {
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.convo-time {
  font-size: var(--fs-label);
  color: var(--text-muted);
  flex-shrink: 0;
}

.convo-product {
  font-size: var(--fs-label);
  color: var(--accent);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.convo-last {
  font-size: var(--fs-body-s);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.convo-last--bold {
  color: var(--text);
  font-weight: var(--fw-medium);
}

.convo-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Thread view */
.thread-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative; /* anchor for .thread-menu dropdown */
}

.thread-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.thread-back {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
}

.thread-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;   /* clips the photo to the circle */
}
/* Avatar photo — fills the circle */
.thread-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
/* Initials fallback span — centred inside the circle */
.thread-avatar__ini {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.thread-name {
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  color: var(--text);
  flex: 1;
}

.thread-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bubble-row {
  display: flex;
}

.bubble-row--mine { justify-content: flex-end; }
.bubble-row--theirs { justify-content: flex-start; }

.bubble {
  max-width: 72%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: var(--fs-body-s);
  line-height: 1.45;
  position: relative;
  word-break: break-word;
}

.bubble--mine {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.bubble--theirs {
  background: var(--bg-subtle);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.bubble-time {
  display: block;
  font-size: 10px;
  opacity: 0.65;
  margin-top: 4px;
  text-align: right;
}

.enquiry-inline-attach {
  margin-top: 8px;
  width: 100%;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  padding: 7px;
  text-align: left;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  cursor: pointer;
}

.bubble--theirs .enquiry-inline-attach {
  border-color: #d6deea;
  background: #fff;
}

.enquiry-inline-attach__label {
  grid-column: 1 / -1;
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: color-mix(in srgb, currentColor 70%, transparent);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.enquiry-inline-attach__thumb-wrap {
  width: 58px;
  height: 86px;
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
}

.enquiry-inline-attach__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.enquiry-inline-attach__video-badge {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.65);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 9px;
}

.enquiry-inline-attach__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.enquiry-inline-attach__title {
  font-size: var(--fs-body-s);
  line-height: 1.2;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.enquiry-inline-attach__meta {
  font-size: var(--fs-micro);
  line-height: 1.2;
  color: color-mix(in srgb, currentColor 75%, transparent);
  font-weight: var(--fw-medium);
}

.bubble-read-tick {
  display: inline-block;
  font-size: 10px;
  opacity: 0.5;
  margin-left: 4px;
  letter-spacing: -1px;
}
.bubble-read-tick--seen { opacity: 1; color: #4caf50; }

.thread-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.thread-input {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: var(--fs-body-s);
  background: var(--bg-subtle);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}

.thread-input:focus { border-color: var(--accent); }

.thread-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.thread-send:disabled { opacity: 0.5; }

.thread-send-error {
  margin: 0;
  padding: 6px 12px;
  font-size: var(--fs-caption);
  color: var(--error, #dc2626);
  background: #fef2f2;
  border-top: 1px solid #fca5a5;
}

/* ── Messages 2-pane panel structure ─────────────────────────────────────────── */

/* Panels: flex column, hidden overflow so each scrolls independently */
.msgs-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Mobile default: left panel visible, right panel hidden */
.msgs-panel--left {
  flex: 1;
}
.msgs-panel--right {
  display: none;
}

/* Mobile thread open: swap visibility */
.msgs-screen--thread .msgs-panel--left {
  display: none;
}
.msgs-screen--thread .msgs-panel--right {
  display: flex;
  flex: 1;
}

/* Panel header (replaces old .msgs-topbar) */
.msgs-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
  gap: 8px;
  flex-shrink: 0;
}

.msgs-panel__header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Compose (pencil) button */
.msgs-compose-btn {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s;
}
.msgs-compose-btn:hover { background: var(--bg-subtle); }

/* Search bar */
.msgs-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
}

.msgs-search-icon {
  flex-shrink: 0;
  color: var(--text-muted);
  pointer-events: none;
}

.msgs-search {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: var(--fs-body-s);
  color: var(--text);
  outline: none;
  padding: 0;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
}
.msgs-search::placeholder { color: var(--text-muted); }
.msgs-search::-webkit-search-cancel-button { cursor: pointer; }

/* Active conversation — left accent bar */
.convo-item--active {
  background: var(--bg-subtle);
  box-shadow: inset 3px 0 0 var(--brand, #1e4650);
}
.convo-item--active .convo-name { color: var(--brand, #1e4650); }

/* Date separator pill between message groups */
.msg-date-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.msg-date-sep::before,
.msg-date-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.msg-date-sep span {
  background: var(--bg);
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: var(--fw-medium);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Thread empty state: shown in right panel when no conversation selected */
.thread-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 40px 24px;
  background: var(--bg-subtle, #f5f7fa);
}
.thread-empty svg { opacity: 0.25; color: var(--text-muted); }
.thread-empty p { font-size: var(--fs-body-m); font-weight: var(--fw-semibold); margin: 0; color: var(--text); }
.thread-empty span { font-size: var(--fs-body-s); color: var(--text-muted); }

/* 3-dots button inside thread header */
.msgs-header-dots {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.12s;
}
.msgs-header-dots:hover,
.msgs-header-dots--active { background: var(--bg-subtle); }

/* Thread 3-dots dropdown menu */
.thread-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: transparent;
  cursor: default;
}

.thread-menu {
  position: absolute;
  top: 56px;  /* just below the thread header */
  right: 12px;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
  min-width: 180px;
  overflow: hidden;
  animation: thread-menu-in 0.12s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

@keyframes thread-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.thread-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: var(--fs-body-s);
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
}
.thread-menu__item:hover { background: var(--bg-subtle); }
.thread-menu__item + .thread-menu__item { border-top: 1px solid var(--line); }
.thread-menu__item--danger { color: var(--error, #dc2626); }
.thread-menu__item--danger:hover { background: #fef2f2; }

/* Attachment + emoji icon buttons in composer */
.thread-attach-btn,
.thread-emoji-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.thread-attach-btn:hover,
.thread-emoji-btn:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.thread-attach-btn:disabled,
.thread-emoji-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.thread-emoji-btn--active {
  background: color-mix(in srgb, var(--brand, #1e4650) 12%, transparent);
  color: var(--brand, #1e4650);
}

/* Composer wrapper — needed to anchor emoji picker */
.thread-composer-wrap {
  position: relative;
  flex-shrink: 0;
}

/* Pending attachment chip */
.attach-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 6px;
  padding: 6px 10px 6px 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: 10px;
  max-width: calc(100% - 24px);
}
.attach-chip__thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.attach-chip__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.attach-chip__name {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-chip__remove {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.attach-chip__remove:hover {
  background: rgba(0,0,0,0.08);
  color: var(--text);
}

/* Attachment bubble — images */
.bubble--attachment {
  padding: 6px 6px 28px; /* room for time below */
  background: transparent !important;
  box-shadow: none !important;
  max-width: 280px;
}
.attach-bubble {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.attach-bubble--image .attach-bubble__img {
  display: block;
  width: 100%;
  max-width: 260px;
  max-height: 260px;
  object-fit: cover;
  border-radius: 12px;
}
.attach-bubble--image .attach-bubble__caption {
  padding: 4px 8px 6px;
  font-size: 13px;
  color: var(--text);
  background: #fff;
  border-top: 1px solid var(--line);
}
.attach-bubble--doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  min-width: 200px;
  max-width: 260px;
  transition: background 0.12s;
}
.attach-bubble--doc:hover { background: var(--bg-subtle); }
.attach-bubble__icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand, #1e4650) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand, #1e4650);
  flex-shrink: 0;
}
.attach-bubble__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.attach-bubble__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-bubble__size {
  font-size: 11px;
  color: var(--text-muted);
}
.attach-bubble__dl {
  flex-shrink: 0;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

/* Emoji picker */
.emoji-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: transparent;
}
.emoji-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  animation: emoji-picker-in 0.14s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}
@keyframes emoji-picker-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.emoji-picker__scroll {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px 6px;
  overscroll-behavior: contain;
}
.emoji-picker__scroll::-webkit-scrollbar { width: 4px; }
.emoji-picker__scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.emoji-group { margin-bottom: 6px; }
.emoji-group__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 4px 6px 2px;
}
.emoji-group__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}
.emoji-btn {
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: background 0.1s;
  aspect-ratio: 1;
}
.emoji-btn:hover { background: var(--bg-subtle); }

/* Attachment send error hint */
.thread-send-error--attach { margin-top: 0; margin-bottom: 4px; }

/* Notifications overlay */
.notif-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 300;
  display: flex;
  align-items: flex-end;
}

.notif-panel {
  width: 100%;
  max-height: 72vh;
  background: var(--bg);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sheet-up 0.28s cubic-bezier(0.22, 0.7, 0.2, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.notif-panel::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin: 10px auto 4px;
  flex-shrink: 0;
}

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.notif-header h3 {
  font-size: var(--fs-heading-s);
  font-weight: var(--fw-bold);
  color: var(--text);
  margin: 0;
}

.notif-mark-all {
  background: none;
  border: none;
  color: var(--accent);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  cursor: pointer;
  padding: 4px 0;
}

.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.1s;
}

.notif-item:active { background: var(--bg-subtle); }
.notif-item--unread { background: rgba(0,0,0,0.02); }

.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 6px;
}

.notif-dot--read { background: transparent; }

.notif-body { flex: 1; }
.notif-body strong { display: block; font-size: var(--fs-body-s); color: var(--text); font-weight: var(--fw-semibold); }
.notif-body p { font-size: var(--fs-label); color: var(--text-muted); margin: 2px 0 0; }
.notif-time { font-size: 11px; color: var(--text-muted); display: block; margin-top: 4px; }

/* ── Phase 6: Profile editing, catalogs, shortlist share, pagination ────────── */

/* Profile header actions row */
.profile-header__actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

/* Avatar initial fallback */
.profile-header__avatar--initial {
  background: var(--accent);
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Edit profile button */
.profile-edit-btn {
  background: var(--bg-subtle);
  border: 1.5px solid var(--line);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 7px 20px;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background 0.15s;
}
.profile-edit-btn:hover { background: var(--line); }

/* Logout button in profile header */
.profile-logout-btn {
  background: transparent;
  border: 1.5px solid var(--danger, #e53e3e);
  color: var(--danger, #e53e3e);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: var(--fs-body-s);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.profile-logout-btn:hover { background: var(--danger, #e53e3e); color: #fff; }

/* ── Manufacturer product card action buttons ─────────────────────────────── */
.mfr-product-wrap { position: relative; }
.mfr-product-actions {
  display: flex;
  gap: 4px;
  padding: 4px 2px 2px;
}
.mfr-product-btn {
  flex: 1;
  border: 1.5px solid var(--border, #e0e0e0);
  background: var(--bg);
  border-radius: var(--radius-xs, 6px);
  padding: 5px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #555);
  cursor: pointer;
  text-align: center;
}
.mfr-product-btn--delete { color: #e53935; border-color: #fbc4c4; }

/* ── Edit product overlay — media thumbs ─────────────────────────────────── */
.edit-product-media-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px 0;
}
.edit-product-media-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--line, #e0e0e0);
}
.edit-product-media-thumb.is-removed { opacity: 0.35; }
.edit-product-media-thumb--new { border-color: var(--accent, #000); border-style: dashed; }
.edit-product-thumb-media { width: 100%; height: 100%; object-fit: cover; }
.edit-product-thumb-new-badge {
  position: absolute;
  bottom: 2px; left: 2px;
  background: var(--accent, #000);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.4;
  pointer-events: none;
}
.edit-product-thumb-remove {
  position: absolute;
  top: 2px; right: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  font-size: 13px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.edit-product-file-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #000);
  padding: 10px 16px 0;
  cursor: pointer;
}

/* Edit profile overlay + modal */
.profile-edit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.profile-edit-modal {
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  background: var(--bg);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  overflow-y: auto;
  padding: 0 0 24px;
  animation: modal-in 0.2s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.profile-edit-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line, #eee);
  z-index: 10;
  border-radius: 16px 16px 0 0;
}

.profile-edit-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark, #111);
}

.profile-edit-close {
  background: none;
  border: none;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.profile-edit-close:hover {
  background: var(--bg-subtle, #f0f0f0);
}

.profile-edit-modal::before { display: none; }
.profile-edit-modal.no-anim { animation: none; }

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Product owner 3-dots button (hero top-right) ──────────────────────────── */
.product-hero__owner-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.38);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  flex-shrink: 0;
}
.product-hero__owner-btn:active { background: rgba(0,0,0,0.6); }

/* ── Product owner action menu ─────────────────────────────────────────────── */
.product-owner-menu-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 250;
}

.product-owner-menu {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
  animation: sheet-up 0.2s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.product-owner-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  font-size: var(--fs-body-m);
  font-weight: var(--fw-medium);
  color: var(--text);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.product-owner-menu__item:active { background: var(--bg-subtle); }
.product-owner-menu__item--danger { color: #e53935; }

.product-owner-menu__divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.product-owner-menu__cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  width: 100%;
  cursor: pointer;
  margin-top: 4px;
}
.product-owner-menu__cancel:active { background: var(--bg-subtle); }

/* ── Product owner menu: desktop popover variant (≥1024px) ────────────────────
   Rendered via JS only when isDesktopViewport() — mobile never sees these.
   Transparent overlay catches outside-click; card anchored just below the
   3-dots button (top-right of the product hero).

   Geometry: on desktop the hero (left-col) right edge is always exactly 50%
   of the viewport — proven because hero = 50% of a centered max-width container.
   The 3-dots button is right:12px within the hero, so popover right edge aligns
   at right:calc(50%+12px). Vertical: expanded-post margin-top(30px) + btn top(12px)
   + btn height(34px) + gap(4px) = 80px.                                         */

.product-owner-menu-overlay--popover {
  background: transparent;   /* no dim — just catches outside-clicks */
}

.product-owner-menu-popover {
  position: absolute;
  top: 80px;                 /* below the 3-dots button */
  right: calc(50% + 12px);  /* right-aligned with the button's right edge */
  width: 200px;
  background: var(--bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-medium), 0 0 0 1px rgba(0, 0, 0, 0.07);
  z-index: 251;              /* above the overlay (z-index: 250) */
  animation: cp-popover-in 0.15s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

/* Compact row padding inside the popover */
.product-owner-menu-popover .product-owner-menu__item {
  padding: 12px 16px;
  font-size: var(--fs-body-s);
}

.profile-edit-error {
  color: #e53935;
  font-size: var(--fs-body-s);
  padding: 8px 16px 0;
  margin: 0;
}

.profile-edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}

.profile-edit-form label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin-top: 4px;
}

.profile-edit-form input,
.profile-edit-form textarea {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-input, 8px);
  padding: 10px 12px;
  font-size: var(--fs-body-s);
  color: var(--text);
  background: var(--bg-subtle);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.profile-edit-form textarea { min-height: 80px; resize: vertical; }
.profile-edit-form input:focus,
.profile-edit-form textarea:focus { border-color: var(--accent); }

.profile-edit-save {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px;
  font-size: var(--fs-button-m);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  margin-top: 8px;
  transition: opacity 0.15s;
}
.profile-edit-save:disabled { opacity: 0.5; }

/* Select dropdown inside edit-product form (category / catalog) */
.profile-edit-select {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-input, 8px);
  padding: 10px 12px;
  font-size: var(--fs-body-s);
  background: var(--bg-subtle);
  color: var(--text);
  cursor: pointer;
  appearance: auto;
  box-sizing: border-box;
}
.profile-edit-select:focus { border-color: var(--accent); outline: none; }

/* "Other" category sub-panel inside edit form */
.edit-cat-other {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.edit-cat-other__input {
  width: 100%;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-input, 8px);
  padding: 10px 12px;
  font-size: var(--fs-body-s);
  background: var(--bg-subtle);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}
.edit-cat-other__input:focus { border-color: var(--accent); }
.edit-cat-other__hint {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin: 0;
}

/* Small hint text inside edit-product form */
.profile-edit-hint {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin: 0 0 4px;
}

/* ── Edit Profile — full page ────────────────────────────────────────────────── */
.profile-fp {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow-y: auto;
}
.profile-fp__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.profile-fp__back {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
}
.profile-fp__back:hover { background: var(--line); }
.profile-fp__title {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0;
}

.profile-fp__error {
  margin: 10px 16px 0;
  padding: 10px 12px;
  background: #fff0f0;
  border: 1px solid #f5a0a0;
  border-radius: 10px;
  color: #b00;
  font-size: 13px;
}
.profile-fp__form {
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.profile-fp__label {
  display: block;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin: 14px 0 5px;
}
.profile-fp__label:first-child { margin-top: 0; }
.profile-fp__optional {
  font-weight: 400;
  color: var(--text-secondary);
  opacity: 0.7;
}
.profile-fp__input {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  box-sizing: border-box;
}
.profile-fp__input:focus {
  outline: none;
  border-color: var(--accent);
}
.profile-fp__textarea { min-height: 80px; resize: vertical; }
.profile-fp__avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
}
.profile-fp__file {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.profile-fp__save-btn {
  margin-top: 24px;
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 13px;
  font-size: var(--fs-button-m);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: opacity 0.15s;
}
.profile-fp__save-btn:disabled { opacity: 0.55; }

/* ── Account Settings — full page ────────────────────────────────────────────── */
.accs-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow-y: auto;
}
.accs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 11px;
  border-bottom: 1px solid #e4e8ef;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
  box-shadow: 0 1px 0 rgba(21, 28, 39, 0.05);
}
.accs-back {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.accs-back:hover { background: var(--line); }
.accs-header-title {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0;
  text-align: center;
  flex-grow: 1;
}
.accs-header-spacer {
  width: 32px;
  flex-shrink: 0;
}
.accs-banner {
  margin: 10px 16px 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
}
.accs-banner--error   { background: #fff0f0; border: 1px solid #f5a0a0; color: #b00; }
.accs-banner--success { background: #edfbf3; border: 1px solid #6cd9a4; color: #0a6638; }
.accs-form {
  flex: 1;        /* fills remaining height so sticky footer always at bottom */
  padding: 0;
}
.accs-section {
  padding: 20px 16px 4px;
  border-bottom: 1px solid var(--line);
}
.accs-section:last-of-type { border-bottom: none; }
.accs-section-title {
  font-size: 15px;
  font-weight: var(--fw-bold, 700);
  color: var(--accent);
  margin: 0 0 16px;
}
.accs-field {
  margin-bottom: 18px;
}

/* Vertical label (centred, bold) — Quick Contact */
.accs-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1e4650;
  margin-bottom: 8px;
  text-align: center;
}

/* Horizontal field row — Location Details */
.accs-field-h {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  min-height: 48px;
}
.accs-label-h {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e4650;
  white-space: nowrap;
  width: 140px;
  flex-shrink: 0;
}
.accs-field-h__input {
  flex: 1;
  min-width: 0;
}
.accs-required { color: #e53; margin-left: 2px; }
.accs-hint-inline { font-weight: 400; color: var(--text-secondary); opacity: 0.75; font-size: 12px; }
.accs-hint {
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.75;
  margin: 4px 0 0;
}
.accs-input {
  width: 100%;
  padding: 12px 18px;
  border: 1.5px solid #dde3ec;
  border-radius: 50px;        /* pill shape */
  font-size: 14px;
  color: var(--text);
  background: #fff;
  box-sizing: border-box;
  font-family: inherit;
  text-align: center;
}
.accs-input:focus { outline: none; border-color: var(--accent); }
.accs-input:disabled { opacity: 0.5; }
.accs-textarea {
  border-radius: 20px !important; /* textarea uses softer radius */
  text-align: center;
  resize: none;
  min-height: 130px;
  padding: 18px 22px;
  line-height: 1.7;
}
.accs-select-wrap {
  position: relative;
}
.accs-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  text-align: left;
  cursor: pointer;
}
.accs-select-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.accs-dob-row {
  display: flex;
  gap: 12px;
}
.accs-dob-row .accs-select-wrap {
  flex: 1;
  min-width: 0;
}
.accs-label-left {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1e4650;
  margin-bottom: 8px;
  text-align: left;
}
.accs-optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 12px;
  margin-left: 4px;
}
.accs-section-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  text-align: center;
  margin: -8px 0 6px;
}


/* Location: inputs left-aligned inside horizontal row */
.accs-field-h .accs-input {
  text-align: left;
  border-radius: 50px;
}

/* Checkbox row (Same as Mobile Number) */
.accs-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--text-secondary);
  cursor: pointer;
  justify-content: center;
}

/* Circle radio button */
.accs-radio-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #bcc5d0;
  background: #fff;
  flex-shrink: 0;
  display: inline-block;
}
.accs-radio-circle--checked {
  border-color: var(--accent, #1e4650);
  background: var(--accent, #1e4650);
  box-shadow: inset 0 0 0 4px #fff;
}
.accs-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 6px;
  padding: 14px 18px;
  background: #f4f6f9;
  border-radius: 16px;
}
.accs-toggle-info { flex: 1; }
.accs-toggle-label { font-size: 14px; font-weight: 700; color: #1e4650; }
.accs-toggle-desc  { font-size: 12px; color: var(--text-secondary); margin: 2px 0 0; }

/* Toggle with Yes label */
.ob-toggle-switch.accs-toggle-yes {
  width: 68px !important;
  height: 32px !important;
}
.ob-toggle-switch.accs-toggle-yes .ob-toggle-track {
  width: 68px;
  height: 32px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 10px;
  background: #d0d7e3;
  transition: background 0.2s;
}
.ob-toggle-switch.accs-toggle-yes .ob-toggle-track::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ob-toggle-switch.accs-toggle-yes input:checked + .ob-toggle-track {
  background: #1e4650;
}
.ob-toggle-switch.accs-toggle-yes input:checked + .ob-toggle-track::after {
  transform: translateX(36px) !important;
}
.accs-toggle-yes-label {
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  pointer-events: none;
}
/* When unchecked, hide the Yes label */
.ob-toggle-switch.accs-toggle-yes input:not(:checked) + .ob-toggle-track .accs-toggle-yes-label {
  display: none;
}


/* ── Section block: title above card ─────────────────────────────────── */
.accs-section-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.accs-section-heading {
  font-size: 17px;
  font-weight: 400;
  color: #1e4650;
  text-align: center;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ── Industry radio list ───────────────────────────────────────────── */
.accs-industry-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 4px;
}
.accs-industry-title {
  font-size: 17px;
  font-weight: 700;
  color: #1e4650;
  margin: 0 0 8px;
  text-align: center;
}
.accs-industry-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  text-align: center;
  margin: 0 0 4px;
  line-height: 1.5;
  max-width: 340px;
}
.accs-industry-note {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
  margin: 0 0 18px;
}
.accs-industry-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.accs-industry-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f3f8;
  cursor: pointer;
  user-select: none;
}
.accs-industry-item:last-child { border-bottom: none; }
.accs-industry-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #bcc5d0;
  background: #fff;
  flex-shrink: 0;
  margin-top: 1px;
  transition: border-color 0.15s, background 0.15s;
}
.accs-industry-radio--checked {
  border-color: var(--accent, #1e4650);
  background: var(--accent, #1e4650);
  box-shadow: inset 0 0 0 5px #fff;
}
.accs-industry-item--selected .accs-industry-name { color: var(--accent, #1e4650); }
.accs-industry-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.accs-industry-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #1e4650;
  line-height: 1.3;
}
.accs-industry-sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ── Products textarea block ────────────────────────────────────────── */
.accs-products-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
}
.accs-products-title {
  font-size: 17px;
  font-weight: 700;
  color: #1e4650;
  margin: 0;
  text-align: center;
}
.accs-products-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  text-align: center;
  margin: 0 0 10px;
}
.accs-products-textarea {
  width: 100%;
  color: var(--text-secondary) !important;
  font-size: 13.5px !important;
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SETTINGS / EDIT PROFILE — Unified card design system
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Constrained scrollable body ─────────────────────────────────────────────── */
.accs-body {
  flex: 1;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 16px 14px 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Section card ────────────────────────────────────────────────────────────── */
.accs-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e4e9f0;
  box-shadow: 0 1px 4px rgba(21, 28, 39, 0.055);
  overflow: hidden;
}
.accs-card__header {
  padding: 18px 20px 12px;
  border-bottom: 1px solid #f0f3f8;
}
.accs-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, #1e4650);
  margin: 0 0 2px;
  text-transform: none;
  letter-spacing: 0.01em;
  text-align: center;
}
.accs-card__desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
  text-align: center;
}
.accs-card__fields {
  padding: 20px 20px 12px;
  display: flex;
  flex-direction: column;
}
/* Reset field margin-bottom inside cards — gap on the container does spacing */
.accs-card__fields > .accs-field { margin-bottom: 14px; }
.accs-card__fields > .accs-row-2 { margin-bottom: 0; }
.accs-card__fields > .accs-toggle-row { margin: 2px 0 14px; }
.accs-card__fields > .ob-section { margin-bottom: 18px; }
.accs-card__fields > .ob-section:last-child { margin-bottom: 8px; }

/* Centered variant — avatar card */
.accs-card__fields--center {
  align-items: center;
  padding-top: 22px;
  padding-bottom: 20px;
}

/* ── Danger zone card ────────────────────────────────────────────────────────── */
.accs-card--danger {
  border-color: #fdd5d5;
  background: #fffafa;
}
.accs-card--danger .accs-card__header {
  border-bottom-color: #fdd5d5;
}
.accs-card--danger .accs-card__title {
  color: #c0392b;
}
.accs-danger-warn {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 16px;
}
.accs-danger-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1.5px solid #dc2626;
  border-radius: 10px;
  padding: 9px 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: #dc2626;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 4px;
}
.accs-danger-btn:hover { background: #fff0f0; }

/* ── 2-column field grid ─────────────────────────────────────────────────────── */
.accs-row-2 {
  display: grid;
  grid-template-columns: 1fr;  /* mobile: single column */
  gap: 0;
  margin-bottom: 0;
}
/* Last item in a row gets the same field margin */
.accs-row-2 > .accs-field { margin-bottom: 14px; }
.accs-row-2 > .ob-section { margin-bottom: 14px; }

/* ── Sticky bottom action bar ────────────────────────────────────────────────── */
.accs-footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid #e4e9f0;
  box-shadow: 0 -2px 12px rgba(21, 28, 39, 0.07);
}
.accs-footer__inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
}
.accs-footer-cancel {
  background: none;
  border: 1.5px solid #d5dae4;
  border-radius: 10px;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.accs-footer-cancel:hover { background: #f4f6f9; border-color: #b8bfcc; }
.accs-footer-save {
  background: var(--accent, #1e4650);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.accs-footer-save:disabled { opacity: 0.45; cursor: not-allowed; }
.accs-footer-save:not(:disabled):hover { opacity: 0.86; }

/* ── Industry chip grid ──────────────────────────────────────────────────────── */
.accs-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.accs-chip {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #d5dae4;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.13s, background 0.13s, color 0.13s;
  line-height: 1.3;
}
.accs-chip input[type="checkbox"] {
  display: none;   /* hidden; visual state handled by class */
}
.accs-chip:hover {
  border-color: var(--accent, #1e4650);
  color: var(--accent, #1e4650);
  background: #f0f6f8;
}
.accs-chip--selected {
  border-color: var(--accent, #1e4650);
  background: #e8f0f5;
  color: var(--accent, #1e4650);
  font-weight: 600;
}

/* ── Mobile (≤599px) ─────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .accs-header {
    padding: 10px 14px;
  }
  .accs-back {
    width: 28px;
    height: 28px;
    padding: 4px;
  }
  .accs-header-title {
    font-size: 15px;
  }
  .accs-header-spacer {
    width: 28px;
  }
  /* Location fields: stack label above input */
  .accs-field-h {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: auto;
  }
  .accs-label-h { width: auto; font-size: 13px; }
  .accs-field-h__input { width: 100%; }
}

/* ── Tablet (600px – 1023px) ─────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .accs-body {
    padding: 24px 24px 60px;
    max-width: 700px;
  }
  .accs-card__fields {
    padding: 24px 28px 16px;
  }
  .accs-header {
    padding: 14px 28px;
  }
}

/* ── Desktop (≥1024px) ───────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .accs-body {
    padding: 28px 40px 60px;
    gap: 24px;
    max-width: 760px;
  }
  .accs-card__fields {
    padding: 28px 36px 20px;
  }
  .accs-header {
    padding: 16px 48px;
  }
  .accs-section-heading { font-size: 20px; }
  .accs-industry-title,
  .accs-products-title  { font-size: 20px; }
  .accs-label-h { width: 165px; }
}

/* Catalog list in profile */
.catalog-list {
  list-style: none;
  margin: 0;
  padding: 0 0 80px;
}

.catalog-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.catalog-list-item__title {
  font-size: var(--fs-body-m);
  font-weight: var(--fw-medium);
  color: var(--text);
  flex: 1;
}

.catalog-list-item__meta {
  font-size: var(--fs-label);
  color: var(--text-muted);
  flex-shrink: 0;
}

.catalog-list-item__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.catalog-list-item__edit {
  background: none;
  border: none;
  color: var(--accent);
  font-size: var(--fs-label);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.catalog-list-item__delete {
  background: none;
  border: none;
  color: #e53935;
  font-size: var(--fs-label);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

/* ── Manufacturer profile: catalog card grid ─────────────────────────────── */

.catalog-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 4px 0 80px;
}

.catalog-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: default;
}

.catalog-card__cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 0 20px 20px 0;
  background-color: #e8edf4;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.catalog-card__lock {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.catalog-card__body {
  padding: 7px 2px 2px;
}

.catalog-card__title {
  margin: 0;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--text);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

.catalog-card__meta {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

.catalog-card__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 0 0;
}

.catalog-card__edit {
  background: none;
  border: none;
  color: var(--accent);
  font-size: var(--fs-label);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 4px;
}

.catalog-card__delete {
  background: none;
  border: none;
  color: #e53935;
  font-size: var(--fs-label);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 4px;
}

/* Public catalog list (manufacturer profile view) */
.mfr-profile__catalogs {
  padding: 16px 0 80px;
}

.catalog-list--public {
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog-list-item--public {
  cursor: default;
}

.catalog-list-item--public .catalog-list-item__meta {
  margin-left: auto;
}

/* Shortlist share button */
.shortlist-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.shortlist-detail-header h1 {
  flex: 1;
  font-size: var(--fs-heading-s);
  font-weight: var(--fw-bold);
  margin: 0;
}

.shortlist-share-btn {
  background: var(--bg-subtle);
  border: 1.5px solid var(--line);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.shortlist-share-btn--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Shortlist share link bar */
.shortlist-share-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--line);
}

.shortlist-share-link__label {
  font-size: var(--fs-label);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.shortlist-share-link__input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: var(--fs-label);
  background: var(--bg);
  color: var(--text);
  min-width: 0;
}

.shortlist-share-link__copy {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  cursor: pointer;
  flex-shrink: 0;
}
.shortlist-share-link__copy:disabled {
  opacity: 0.55;
  cursor: default;
}

.catalog-share-localhost-note {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  padding: 2px 12px 6px;
  margin: 0;
}

/* Feed load more */
/* Invisible sentinel that triggers infinite-scroll via IntersectionObserver */
.feed-sentinel {
  width: 100%;
  height: 1px;
  pointer-events: none;
}

/* ── Sheet overlays (canvas-constrained, absolute within app__viewport) ──── */

.overlay--shortlist-picker,
.overlay--share-sheet,
.overlay--catalog-sheet {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
}

/* ── Shortlist picker sheet ───────────────────────────────────────────────── */

.shortlist-picker-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  background: var(--bg);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  max-height: min(88dvh, calc(100% - 24px));
  animation: sheet-up 0.28s cubic-bezier(0.22, 0.7, 0.2, 1);
}
/* Suppress entrance animation when the picker re-renders while already open
   (e.g. un-selecting a shortlist item updates the sheet without closing it). */
.shortlist-picker-sheet.no-anim {
  animation: none !important;
}

.shortlist-picker-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

.shortlist-picker-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 14px;
  flex-shrink: 0;
}

.shortlist-picker-sheet__header-spacer {
  width: 36px;
  flex-shrink: 0;
}

.shortlist-picker-sheet__header h3 {
  flex: 1;
  margin: 0;
  font-size: var(--fs-title-m);
  font-weight: var(--fw-semibold);
  text-align: center;
}

.shortlist-picker-sheet__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.shortlist-picker-sheet__list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}

.shortlist-picker__empty {
  padding: 20px 16px;
  color: var(--text-muted);
  font-size: var(--fs-body-s);
  text-align: center;
}

.shortlist-picker__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.shortlist-picker__row:hover { background: var(--bg-subtle); }
.shortlist-picker__row.is-selected { background: color-mix(in srgb, var(--brand) 8%, transparent); }

.shortlist-picker__row-name {
  flex: 1;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.shortlist-picker__row-meta {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.shortlist-picker__row-check {
  font-size: 16px;
  color: var(--brand);
  font-weight: var(--fw-bold);
}

.shortlist-picker-sheet__footer {
  padding: 8px 16px max(20px, env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}

.shortlist-picker-sheet__new {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--brand);
  border: none;
  border-radius: var(--radius-pill);
  padding: 15px 16px;
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.12s;
}
.shortlist-picker-sheet__new:active { opacity: 0.82; }

.shortlist-picker-sheet__create-body {
  padding: 12px 16px;
  flex: 1;
}

.shortlist-picker-sheet__footer--row {
  display: flex;
  gap: 8px;
}

.shortlist-picker__error {
  color: var(--error);
  font-size: var(--fs-body-s);
  margin: 0 0 10px;
}

/* ── Picker sheet — body / sections / thumbnails ─────────────────────────── */

.shortlist-picker-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 8px;
}

.sl-picker-section {
  padding: 14px 0 4px;
}

.sl-picker-section__label {
  margin: 0 0 12px;
  padding: 0 16px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

/* Recent — horizontal scroll strip */
.sl-picker-recent {
  display: flex;
  gap: 10px;
  padding: 0 16px 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sl-picker-recent::-webkit-scrollbar { display: none; }

.sl-picker-thumb {
  flex-shrink: 0;
  width: 107px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}

.sl-picker-thumb__cover {
  width: 107px;
  height: 144px;
  border-radius: 20px;
  background-color: #e8edf4;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  border: 2.5px solid transparent;
  transition: border-color 0.15s;
}
.sl-picker-thumb.is-saved .sl-picker-thumb__cover {
  border-color: var(--brand);
}

.sl-picker-thumb__check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.sl-picker-thumb__name {
  width: 107px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* All — 3-column grid */
.sl-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 16px;
}

.sl-picker-card {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}

.sl-picker-card__cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  background-color: #e8edf4;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  border: 2.5px solid transparent;
  transition: border-color 0.15s;
}
.sl-picker-card.is-saved .sl-picker-card__cover {
  border-color: var(--brand);
}

.sl-picker-card__badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.sl-picker-card__name {
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}


/* Success state */
.shortlist-picker-sheet--success {
  max-height: 220px;
}

.shortlist-picker-sheet__success-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 28px;
  gap: 8px;
}

.sl-picker-success__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  margin-bottom: 4px;
}

.sl-picker-success__title {
  margin: 0;
  font-size: var(--fs-title-m);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.sl-picker-success__sub {
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
  text-align: center;
}

/* ── Shortlist picker: desktop modal (≥1024px) ────────────────────────────────
   Pure CSS override: transforms the mobile bottom sheet into a centered modal.
   All behavior, state, and interaction logic remain completely unchanged.
   Mobile/tablet (<1024px) sees none of these rules.
   ─────────────────────────────────────────────────────────────────────────── */

@keyframes sl-picker-modal-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% - 10px)) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (min-width: 1024px) {

  /* ── Shell: centered modal ───────────────────────────────────────────────── */
  .shortlist-picker-sheet {
    position: absolute;
    bottom: auto;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 94vw);
    max-height: 80vh;
    border-radius: 16px;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(0, 0, 0, 0.06);
    animation: sl-picker-modal-in 0.2s cubic-bezier(0.22, 0.7, 0.2, 1) both;
  }

  /* When re-rendering while open, skip entrance animation */
  .shortlist-picker-sheet.no-anim {
    animation: none !important;
  }

  /* Hide mobile drag handle */
  .shortlist-picker-sheet__handle { display: none; }

  /* ── Header ─────────────────────────────────────────────────────────────── */
  .shortlist-picker-sheet__header {
    padding: 18px 24px 16px;
    border-bottom: 1px solid var(--line);
  }

  /* Spacer was only needed to balance the centered-title layout on mobile */
  .shortlist-picker-sheet__header-spacer { display: none; }

  .shortlist-picker-sheet__header h3 {
    text-align: left;
    font-size: 16px;
    font-weight: 700;
  }

  /* ── Scrollable body ─────────────────────────────────────────────────────── */
  .shortlist-picker-sheet__body {
    padding: 0;
  }

  .sl-picker-section {
    padding: 16px 0 12px;
  }

  /* Subtle divider between Recent and All sections */
  .sl-picker-section + .sl-picker-section {
    border-top: 1px solid var(--line);
    margin-top: 0;
    padding-top: 14px;
  }

  /* Left-aligned section labels with standard horizontal inset */
  .sl-picker-section__label {
    text-align: left;
    padding: 0 24px;
    margin-bottom: 14px;
    font-size: 11px;
  }

  /* ── Recent row ──────────────────────────────────────────────────────────── */
  /* 3 thumbs max — enough room on desktop, no horizontal scroll needed */
  .sl-picker-recent {
    padding: 0 24px 4px;
    gap: 16px;
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .sl-picker-thumb {
    width: 130px;
  }

  .sl-picker-thumb__cover {
    width: 130px;
    height: 174px;   /* 3:4 ratio at 130px */
    border-radius: 10px;
  }

  .sl-picker-thumb__name {
    width: 130px;
    font-size: 12px;
  }

  /* ── All shortlists grid ─────────────────────────────────────────────────── */
  /* 4 columns in the 720px modal (24px padding each side = 672px content)     */
  .sl-picker-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 0 24px;
  }

  .sl-picker-card__cover {
    border-radius: 10px;
    border-width: 2px;
  }

  .sl-picker-card__name {
    font-size: 12px;
  }

  /* ── Footer ──────────────────────────────────────────────────────────────── */
  .shortlist-picker-sheet__footer {
    padding: 14px 24px 18px;
    border-top: 1px solid var(--line);
  }

  /* Shrink button to content width, left-aligned */
  .shortlist-picker-sheet__new {
    width: auto;
    display: inline-flex;
    padding: 10px 28px;
    font-size: 14px;
    border-radius: var(--radius-pill);
  }

  /* ── Success feedback: compact centered card ─────────────────────────────── */
  .shortlist-picker-sheet--success {
    width: min(380px, 94vw);
    max-height: none;
  }

}

/* ── Create Shortlist full-page screen ───────────────────────────────────── */

.csl-page {
  position: absolute;
  inset: 0;
  z-index: 400;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.csl-page__inner {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.csl-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 16px;
  flex-shrink: 0;
}

.csl-page__header-spacer {
  width: 36px;
  flex-shrink: 0;
}

.csl-page__title {
  margin: 0;
  font-size: var(--fs-title-m);
  font-weight: var(--fw-semibold);
  color: var(--text);
  text-align: center;
  flex: 1;
}

.csl-page__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 50%;
  transition: background 0.12s;
  flex-shrink: 0;
}
.csl-page__close:active { background: var(--bg-subtle); }

.csl-page__body {
  flex: 1;
  padding: 4px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Field block */
.csl-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.csl-field__label {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--text);
  text-align: center;
}

.csl-field__input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-m);
  color: var(--text);
  background: var(--bg);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.csl-field__input:focus { border-color: var(--brand); }
.csl-field__input::placeholder { color: var(--text-muted); }

.csl-field__count {
  align-self: flex-end;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: -4px;
}

/* Error */
.csl-page__error {
  margin: -8px 0 0;
  font-size: var(--fs-body-s);
  color: var(--error);
}

/* Visibility section */
.csl-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.csl-section__label {
  margin: 0;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-align: center;
}

.csl-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  border: none;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: #fff;
  background: var(--brand);
  align-self: center;
}

/* Helper text */
.csl-helper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.csl-helper p {
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
}

.csl-helper strong {
  color: var(--text);
  font-weight: var(--fw-semibold);
}

/* Footer CTA */
.csl-page__footer {
  flex-shrink: 0;
  padding: 12px 20px max(24px, env(safe-area-inset-bottom, 0px));
  background: var(--bg);
}

.csl-page__cta {
  width: 100%;
  padding: 15px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}
.csl-page__cta:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.csl-page__cta:not(:disabled):active { opacity: 0.82; }

/* ── Saved screen header + CTA ───────────────────────────────────────────── */

.saved-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.saved-screen__header {
  padding: 18px 16px 12px;
  text-align: center;
}

.saved-tabs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto;
}

.saved-tabs__btn {
  min-height: 38px;
  min-width: 132px;
  border: none;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--brand);
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  font-family: inherit;
  box-shadow:
    0 10px 22px rgba(20, 30, 44, 0.12),
    0 0 0 1px rgba(21, 28, 39, 0.06);
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.saved-tabs__btn.is-active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 24px rgba(21, 70, 80, 0.26);
}

.saved-tabs__btn img {
  display: block;
  filter: none;
}

.saved-tabs__btn.is-active img {
  filter: brightness(0) invert(1);
}

.saved-screen__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.saved-screen__title-row h1 {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.1;
}

.saved-screen__lock-icon {
  flex-shrink: 0;
  display: block;
}

.saved-screen__subtitle {
  margin: 12px auto 0;
  max-width: 520px;
  font-size: var(--fs-body-s);
  color: var(--brand);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  text-align: center;
}

.saved-screen__shortlists {
  padding: 20px 0 0;
}

.saved-section-title {
  margin: 0 0 16px;
  font-size: var(--fs-title-m);
  line-height: var(--lh-title-m);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-align: center;
}

.saved-screen__cta-wrap {
  padding: 22px 16px 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.saved-screen__create-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 32px;
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-medium);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.saved-screen__create-cta:active { background: var(--bg-subtle); }

/* All Saved Pages section */
.saved-pages {
  padding: 28px 0 80px;
}

.saved-pages__title {
  margin: 0 0 20px;
  font-size: var(--fs-title-l);
  font-weight: var(--fw-medium);
  text-align: center;
  color: var(--text);
}

.saved-pages__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 0 2px;
}

.saved-page-tile {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  min-width: 0;
}

.saved-page-tile__img {
  width: 100%;
  aspect-ratio: 9 / 16;
  background-color: #e8edf4;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.saved-page-tile__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
}

.saved-page-tile__title {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 16px;
  padding-left: 5px;
  line-height: 1.35;
  color: var(--text);
  font-weight: var(--fw-medium);
}

.saved-page-tile__footer img {
  display: block;
  flex-shrink: 0;
}

.saved-page-tile__img > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lock badge on shortlist card cover */
.shortlist-card__lock {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* ── Share sheet ──────────────────────────────────────────────────────────── */

@keyframes share-modal-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% - 12px)) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.share-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  max-height: min(88dvh, calc(100% - 24px));
  overflow: hidden;
  animation: sheet-up 0.28s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.share-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin: 12px auto 0;
  flex-shrink: 0;
}

.share-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 14px;
  flex-shrink: 0;
}

.share-sheet__header-text { flex: 1; min-width: 0; }

.share-sheet__title {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.share-sheet__subtitle {
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--text-muted);
}

.share-sheet__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}
.share-sheet__close:hover { background: var(--line); }

.share-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 24px;
}

/* Copy link row */
.share-sheet__copy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 18px;
  border-bottom: 1px solid var(--line);
}

.share-sheet__url-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-subtle);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  overflow: hidden;
}

.share-sheet__url-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.share-sheet__url {
  flex: 1;
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.share-sheet__copy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.share-sheet__copy-btn:hover { opacity: 0.85; }

/* Sections */
.share-sheet__section {
  padding: 16px 20px 0;
}
.share-sheet__section + .share-sheet__section {
  margin-top: 4px;
}
.share-sheet__section--more {
  padding-bottom: 4px;
}

.share-sheet__section-label {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.01em;
}

/* Social platform cards */
.share-sheet__socials {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.share-sheet__social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  background: var(--bg-subtle);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 6px 12px;
  font-size: 12px;
  font-weight: var(--fw-medium);
  text-align: center;
  transition: background 0.12s;
}
.share-sheet__social-card:hover { background: var(--line); }

.share-sheet__social-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-sheet__social-icon--wa { background: #25D366; }
.share-sheet__social-icon--li { background: #0A66C2; }
.share-sheet__social-icon--x  { background: #000; }
.share-sheet__social-icon--fb { background: #1877F2; }

/* More options row */
.share-sheet__more-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.share-sheet__more-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  color: var(--text);
  min-width: 64px;
}

.share-sheet__more-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: background 0.12s;
}
.share-sheet__more-btn:hover .share-sheet__more-icon { background: var(--line); }

.share-sheet__more-label {
  font-size: 11px;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
}

/* ── Comments popup ────────────────────────────────────────────────────────── */

.product-actions__comment-btn { position: relative; }
.product-actions__comment-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Backdrop ──────────────────────────────────────────────────────────────── */
.cmt-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 16, 0.52);
  z-index: 300;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: cmt-fade 0.2s ease both;
}
@keyframes cmt-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Popup shell — mobile-first: bottom sheet ─────────────────────────────── */
.cmt-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 301;
  background: #fff;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  height: 82dvh;
  max-height: 82dvh;
  box-shadow: 0 -4px 40px rgba(0,0,0,0.14);
  animation: cmt-slide-up 0.26s cubic-bezier(0.22, 0.7, 0.2, 1) both;
  overflow: hidden; /* keeps inner border-radius clean */
}
@keyframes cmt-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
/* Suppress entrance animations when popup was already open (toggle menu / edit mode) */
.cmt-popup.no-anim   { animation: none !important; }
.cmt-backdrop.no-anim { animation: none !important; }
/* drag handle pip */
.cmt-popup::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: var(--line);
  margin: 10px auto 0;
  flex-shrink: 0;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.cmt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.cmt-header__left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cmt-header__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
.cmt-header__count {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}
.cmt-header__close {
  width: 30px;
  height: 30px;
  border: 0;
  background: var(--bg-subtle, #f4f4f4);
  color: var(--text-muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.cmt-header__close:hover { background: var(--line); color: var(--text); }

/* ── Scrollable body ───────────────────────────────────────────────────────── */
.cmt-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  min-height: 0;
}
.cmt-body::-webkit-scrollbar { width: 4px; }
.cmt-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

/* ── Loading / empty ───────────────────────────────────────────────────────── */
.cmt-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 220px;
  padding: 40px 24px;
  text-align: center;
}
.cmt-spinner {
  display: block;
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--line);
  border-top-color: var(--brand, #1e4650);
  border-radius: 50%;
  animation: cmt-spin 0.7s linear infinite;
}
@keyframes cmt-spin { to { transform: rotate(360deg); } }
.cmt-state__icon { color: var(--line); }
.cmt-state__title { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; }
.cmt-state__sub   { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ── Comment list ──────────────────────────────────────────────────────────── */
.cmt-list { list-style: none; margin: 0; padding: 4px 0 2px; }

.cmt-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  position: relative;
  transition: opacity 0.22s;
}
.cmt-item:last-child { border-bottom: 0; }
.cmt-item--sending  { opacity: 0.48; }
.cmt-item--editing  { background: color-mix(in srgb, var(--brand, #1e4650) 4%, transparent); }

/* Clickable avatar wrapper */
.cmt-identity-btn {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
  transition: opacity 0.12s;
}
.cmt-identity-btn:hover { opacity: 0.8; }
.cmt-identity-btn:focus-visible { outline: 2px solid var(--brand, #1e4650); outline-offset: 2px; }

/* Avatar circle */
.cmt-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmt-avatar--initial {
  background: color-mix(in srgb, var(--brand, #1e4650) 13%, #edf0ef);
  color: var(--brand, #1e4650);
  font-size: 14px;
  font-weight: 700;
}
.cmt-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.cmt-avatar__fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand, #1e4650);
  background: color-mix(in srgb, var(--brand, #1e4650) 13%, #edf0ef);
  border-radius: 50%;
}

/* Item content */
.cmt-item__body { flex: 1; min-width: 0; }
.cmt-item__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
/* Name — plain span or clickable button */
.cmt-item__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: default;
  line-height: 1.3;
}
.cmt-item__name--link {
  cursor: pointer;
  transition: color 0.12s;
}
.cmt-item__name--link:hover { color: var(--brand, #1e4650); text-decoration: underline; }
.cmt-item__name--link:focus-visible { outline: 2px solid var(--brand, #1e4650); border-radius: 2px; }

.cmt-item__dot  { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.cmt-item__time { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.cmt-item__edited { font-size: 11px; color: var(--text-muted); font-style: italic; flex-shrink: 0; }

.cmt-item__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ── Owner actions (3-dot menu) ────────────────────────────────────────────── */
.cmt-item__actions {
  position: relative;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
}
.cmt-more-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  opacity: 0;
}
.cmt-item:hover .cmt-more-btn,
.cmt-more-btn--active { opacity: 1; }
.cmt-more-btn:hover,
.cmt-more-btn--active {
  background: var(--bg-subtle);
  color: var(--text);
}
/* Invisible full-screen click-away layer rendered as a sibling of .cmt-menu
   inside .cmt-popup. Because it is position:fixed it still covers the whole
   viewport even though it lives inside the popup's stacking context. */
.cmt-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 350;   /* above popup content (auto), below popover (400) */
}

/* Comment owner popover — rendered as a DIRECT CHILD of .cmt-popup (not
   inside .cmt-body), so it is never clipped by the list's overflow-y:auto.
   position:fixed means overflow:hidden on .cmt-popup also cannot clip it.
   top + right are set by JS (comment-more-menu handler) after render. */
.cmt-menu {
  position: fixed;
  z-index: 400;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.08),
    0 8px 24px rgba(0,0,0,0.12);
  min-width: 136px;
  overflow: hidden;
  /* Default: opens downward */
  animation: cmt-menu-down 0.14s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}
/* Upward-opening variant — set via JS as data-direction="up" */
.cmt-menu[data-direction="up"] {
  animation: cmt-menu-up 0.14s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}
@keyframes cmt-menu-down {
  from { opacity: 0; transform: translateY(-5px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes cmt-menu-up {
  from { opacity: 0; transform: translateY(5px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.cmt-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 15px;
  border: 0;
  background: transparent;
  font-size: 13.5px;
  font-weight: 450;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
  white-space: nowrap;
}
.cmt-menu__item svg { flex-shrink: 0; opacity: 0.75; }
.cmt-menu__item:hover { background: var(--bg-subtle); }
.cmt-menu__item + .cmt-menu__item { border-top: 1px solid var(--line); }
.cmt-menu__item--danger { color: var(--error, #dc2626); }
.cmt-menu__item--danger svg { opacity: 1; }
.cmt-menu__item--danger:hover { background: #fef2f2; }

/* ── Inline edit ───────────────────────────────────────────────────────────── */
.cmt-edit-wrap { margin-top: 6px; }
.cmt-edit-input {
  width: 100%;
  resize: none;
  border: 1.5px solid var(--brand, #1e4650);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  outline: none;
  line-height: 1.45;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #1e4650) 12%, transparent);
  overflow: hidden;
  scrollbar-width: none;
}
.cmt-edit-input::-webkit-scrollbar { display: none; }
.cmt-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  justify-content: flex-end;
}
.cmt-edit-btn {
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s;
}
.cmt-edit-btn--cancel {
  background: transparent;
  border-color: var(--line);
  color: var(--text-muted);
}
.cmt-edit-btn--cancel:hover { background: var(--bg-subtle); color: var(--text); }
.cmt-edit-btn--save {
  background: var(--brand, #1e4650);
  color: #fff;
}
.cmt-edit-btn--save:hover { background: color-mix(in srgb, var(--brand, #1e4650) 85%, #000); }
.cmt-edit-btn--save:disabled { opacity: 0.45; cursor: not-allowed; }
.cmt-edit-btn--save:disabled:hover { background: var(--brand, #1e4650); }

/* ── Error bar ─────────────────────────────────────────────────────────────── */
.cmt-error {
  font-size: 13px;
  color: var(--error, #dc2626);
  background: #fef2f2;
  border-top: 1px solid #fecaca;
  padding: 8px 18px;
  margin: 0;
  flex-shrink: 0;
}

/* ── Composer wrapper ──────────────────────────────────────────────────────── */
.cmt-composer-wrap {
  border-top: 1px solid var(--line);
  background: #fff;
  flex-shrink: 0;
}
.cmt-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px 12px;
}

/* Textarea — no visible scrollbar, auto-grows */
.cmt-composer__input {
  flex: 1;
  resize: none;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg-subtle, #f4f4f4);
  outline: none;
  line-height: 1.45;
  min-height: 40px;
  max-height: 100px;
  overflow: hidden; /* hides scrollbar */
  scrollbar-width: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  caret-color: var(--brand, #1e4650);
  vertical-align: bottom;
}
.cmt-composer__input::-webkit-scrollbar { display: none; }
.cmt-composer__input:focus {
  border-color: var(--brand, #1e4650);
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #1e4650) 11%, transparent);
}
.cmt-composer__input::placeholder { color: var(--text-muted); }
.cmt-composer__input:disabled { opacity: 0.5; cursor: not-allowed; }

/* Send button — 44 × 44, circular, filled */
.cmt-composer__send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand, #1e4650);
  color: #fff;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.13s, transform 0.1s, opacity 0.13s;
  padding: 0;
}
.cmt-composer__send:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand, #1e4650) 82%, #000);
  transform: scale(1.06);
}
.cmt-composer__send:active:not(:disabled) { transform: scale(0.93); }
.cmt-composer__send:disabled { opacity: 0.32; cursor: not-allowed; transform: none; }

/* ── Desktop: centered modal (≥1024px) ────────────────────────────────────── */
@media (min-width: 1024px) {
  .cmt-popup {
    position: fixed;
    inset: auto;
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -50%);
    width: min(760px, 94vw);
    height: auto;
    max-height: 78vh;
    border-radius: 20px;
    animation: cmt-modal-in 0.22s cubic-bezier(0.22, 0.7, 0.2, 1) both;
    box-shadow:
      0 4px 24px rgba(0,0,0,0.08),
      0 20px 60px rgba(0,0,0,0.18);
    overflow: hidden;
  }
  .cmt-popup::before { display: none; }
  @keyframes cmt-modal-in {
    from { opacity: 0; transform: translate(-50%, -47%) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  .cmt-header { padding: 20px 24px 16px; }
  .cmt-header__title { font-size: 18px; }
  .cmt-item { padding: 15px 24px; gap: 13px; }
  .cmt-composer { padding: 10px 24px 18px; }
  .cmt-state { min-height: 260px; }
  .cmt-avatar { width: 40px; height: 40px; }
  .cmt-avatar--initial { font-size: 15px; }
  .cmt-avatar__fallback { font-size: 15px; }
}

/* ── Catalog sheet ─────────────────────────────────────────────────────────── */

.catalog-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  background: var(--bg);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow-medium);
  display: flex;
  flex-direction: column;
  max-height: min(82dvh, calc(100% - 24px));
  animation: sheet-up 0.28s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.catalog-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

.catalog-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.catalog-sheet__header h3 {
  margin: 0;
  font-size: var(--fs-title-m);
  font-weight: var(--fw-semibold);
}

.catalog-sheet__close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
}

.catalog-sheet__body {
  overflow-y: auto;
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
}

.catalog-sheet__grid {
  padding-bottom: 0;
}

/* ── Manufacturer profile three-dots ─────────────────────────────────────────── */

.mfr-profile__menu-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  display: grid;
  place-items: center;
}

/* ── Own-profile bottom sheet ────────────────────────────────────────────────── */

.profile-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 300;
  display: flex;
  align-items: flex-end;
}

.profile-sheet {
  width: 100%;
  background: var(--bg);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 16px);
  animation: sheet-up 0.28s cubic-bezier(0.22, 0.7, 0.2, 1);
}

@keyframes sheet-up {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

.profile-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin: 10px auto 6px;
}

.profile-sheet__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-sheet__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 20px;
  background: none;
  border: none;
  font-size: var(--fs-body-m);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.profile-sheet__item:hover { background: var(--bg-subtle); }
.profile-sheet__item svg { flex-shrink: 0; color: var(--text-secondary); }

.profile-sheet__item--danger { color: var(--error, #dc2626); }
.profile-sheet__item--danger svg { color: var(--error, #dc2626); }

.profile-sheet__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  background: #ff2f2f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  padding: 0 4px;
  margin-left: auto;
}

.profile-sheet__privacy {
  text-align: right;
  padding: 8px 20px 16px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin: 0;
}

/* ── Other-profile popup menu ────────────────────────────────────────────────── */

.profile-popup-overlay {
  position: absolute;
  inset: 0;
  z-index: 300;
}

.profile-popup {
  position: absolute;
  top: 50px;
  right: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  min-width: 160px;
  overflow: hidden;
  z-index: 301;
}

.profile-popup__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  background: none;
  border: none;
  font-size: var(--fs-body-s);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.profile-popup__item:hover { background: var(--bg-subtle); }

/* ── Message bubble edit ─────────────────────────────────────────────────────── */

.bubble-row {
  position: relative;
}

.bubble-stack {
  position: relative;
  display: inline-flex;
  max-width: 72%;
}

.bubble-stack > .bubble {
  max-width: 100%;
}

.bubble--sending {
  opacity: 0.6;
}

.bubble-edited {
  font-size: 10px;
  color: color-mix(in srgb, currentColor 60%, transparent);
  margin-left: 4px;
  font-style: italic;
}

.bubble--editing {
  background: var(--bg-subtle) !important;
  padding: 8px 10px !important;
}

.bubble--editable {
  padding-right: 36px;
}

.bubble-edit-input {
  width: 100%;
  border: 1px solid var(--brand);
  border-radius: var(--radius-xs);
  padding: 6px 8px;
  font-size: var(--fs-body-s);
  background: var(--bg);
  color: var(--text);
  outline: none;
  margin-bottom: 6px;
}

.bubble-edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.bubble-edit-btn {
  border: none;
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.bubble-edit-btn--cancel {
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.bubble-edit-btn--save {
  background: var(--brand);
  color: #fff;
}

.bubble-edit-trigger {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  color: #fff;
  opacity: 0.92;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.bubble-edit-trigger svg {
  display: block;
}

.bubble-edit-trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 1px;
}

@media (hover: hover) and (pointer: fine) {
  .bubble-edit-trigger {
    opacity: 0;
  }

  .bubble-stack:hover .bubble-edit-trigger,
  .bubble-edit-trigger:focus-visible {
    opacity: 1;
  }

  .bubble-edit-trigger:hover {
    background: rgba(255, 255, 255, 0.24);
    transform: scale(1.04);
  }
}

/* Add-more / empty state */

.create-upload-add-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  align-items: center;
  justify-content: center;
}

.create-upload-add-btn {
  border: 1.5px dashed var(--line-strong);
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  min-height: 34px;
  padding: 0 14px;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.create-upload-add-btn:hover { background: var(--bg-subtle); }

.create-media-hint {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  text-align: center;
  margin: 6px 0 0;
}

.create-upload-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 0 16px;
}

.create-upload-empty__text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-body-s);
}

.create-upload-empty__btn {
  border: 0;
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-pill);
  min-height: 40px;
  padding: 0 24px;
  font-size: var(--fs-button-m);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

/* ── Create flow: publish success step ─────────────────────────────────────── */

.create-publish-success {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px 20px;
  gap: 14px;
  text-align: center;
}

.create-publish-success__icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: var(--fw-bold);
  animation: publish-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes publish-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.create-publish-success__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.create-publish-success__body {
  color: var(--text-secondary);
  font-size: var(--fs-body-m);
  line-height: 1.55;
  max-width: 280px;
  margin: 0;
}

.create-publish-success__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}

.create-publish-success__view {
  width: 100%;
  min-height: 46px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  border: 0;
  font-size: var(--fs-button-m);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: opacity 0.15s;
}
.create-publish-success__view:hover { opacity: 0.88; }

.create-publish-success__done {
  width: 100%;
  min-height: 40px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px solid var(--line);
  font-size: var(--fs-button-m);
  cursor: pointer;
}

.create-publish-success__attach-error {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #fff4e5;
  border: 1px solid #f5a623;
  border-radius: 10px;
  color: #8a5700;
  font-size: 13px;
  text-align: center;
  line-height: 1.45;
}

/* ── Product hero: carousel nav + dots + video overlay ─────────────────────── */

.product-hero__track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  touch-action: pan-y;
  user-select: none;
}

.product-hero__track.is-dragging {
  transition: none;
}

.product-hero__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.product-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent; /* icon carries its own white-circle bg */
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity 0.15s;
  z-index: 2;
}
.product-hero__nav img {
  display: block;
  width: 40px;
  height: 40px;
  pointer-events: none;
}
.product-hero__nav:hover { opacity: 0.8; }
.product-hero__nav--prev { left: 8px; }
.product-hero__nav--next { right: 8px; }
/* Enforce the [hidden] attribute — author display:grid overrides the UA stylesheet,
   so we must re-apply display:none ourselves. !important beats any display override. */
.product-hero__nav[hidden] { display: none !important; }

.product-hero__dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}

.product-hero__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.2s;
  flex-shrink: 0;
}

.product-hero__dot.is-active {
  background: #fff;
  width: 18px;
  border-radius: 3px;
}

/* ── Carousel: slide counter (bottom-right overlay) ─────────────────────────── */
.product-hero__counter {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 2;
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Phase 15: Polish pass additions ───────────────────────────────────────── */

/* Back button img alignment */
.mfr-profile-back img {
  display: block;
  flex-shrink: 0;
}

/* ── Video badge (product cards + product hero) ────────────────────────────── */

.product-card__media {
  position: relative;
}

.product-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #e9edf3;
}

.product-card__video-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  width: 28px;
  height: 28px;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
}

.product-hero__video-badge {
  position: absolute;
  top: 54px;
  right: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 3;
}

/* ── Manufacturer profile: catalog tabs ────────────────────────────────────── */


.mfr-profile__catalogs .catalog-card-grid {
  padding-bottom: 0;
}

/* ── Shortlist card grid (three-column, image-only style) ──────────────────── */

.shortlist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 12px;
  margin-top: 14px;
  padding: 0 2px;
}

.shortlist-card {
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.shortlist-card:active { transform: scale(0.95); }

.shortlist-card__cover {
  width: 100%;
  aspect-ratio: 9 / 16;
  background-size: cover;
  background-position: center;
  background-color: #e8edf4;
  border-radius: 300px;
  overflow: hidden;
  position: relative;
}

.shortlist-card__body {
  padding: 0 2px;
}
.shortlist-card__body h3 {
  margin: 0;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  text-align: center;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Buyer profile shortlists tab ──────────────────────────────────────────── */

.buyer-profile-sl-card__meta {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

/* ── Manufacturer shared-with-me extras ────────────────────────────────────── */

.mfr-shared-card .shortlist-card__body {
  padding: 0 2px;
}

.mfr-shared-card__meta {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

.mfr-shared-from {
  margin: 0 0 12px;
  padding: 0 4px;
  font-size: var(--fs-body-s);
  color: var(--text-muted);
}

/* ── Shortlist detail header redesign ──────────────────────────────────────── */

.shortlist-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 4px 10px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.shortlist-detail-back {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.shortlist-detail-back svg { display: block; }

.shortlist-detail-header h1 {
  flex: 1;
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shortlist-detail-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sl-icon-btn {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.sl-icon-btn:hover { background: var(--bg-subtle); }
.sl-icon-btn.is-active { border-color: var(--brand); background: var(--brand); color: #fff; }
.sl-icon-btn--delete { color: var(--error); border-color: rgba(198, 40, 40, 0.25); }
.sl-icon-btn--delete:hover { background: rgba(198, 40, 40, 0.08); }
.sl-icon-btn--confirm-rename { border-color: var(--brand); color: var(--brand); }
.sl-icon-btn--confirm-rename:hover { background: var(--brand); color: #fff; }
.sl-icon-btn--cancel-rename { color: var(--text-secondary); }

/* Rename inline state */
.shortlist-detail-rename-input {
  flex: 1;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  font-size: var(--fs-body-m);
  outline: none;
}
.shortlist-detail-rename-actions {
  display: flex;
  gap: 6px;
}
.sl-action-btn {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  border: 1.5px solid var(--line-strong);
  cursor: pointer;
  background: #fff;
  color: var(--text);
}
.sl-action-btn--save {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ── Share-with-user sheet ─────────────────────────────────────────────────── */

.sl-share-user-sheet {
  margin: 12px 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}

.sl-share-user-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-subtle);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--line);
}
.sl-share-user-sheet__header button {
  border: 0;
  background: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-secondary);
}

.sl-share-user-sheet__body { padding: 10px 12px; }

.sl-share-user-input {
  width: 100%;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-xs);
  padding: 8px 10px;
  font-size: var(--fs-body-m);
  box-sizing: border-box;
  outline: none;
}
.sl-share-user-input:focus { border-color: var(--brand); }

.sl-share-user-results {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.sl-share-user-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.sl-share-user-result:last-child { border-bottom: 0; }
.sl-share-user-result__name { font-size: var(--fs-body-m); }
.sl-share-user-result__btn {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.sl-share-user-result__btn:disabled { opacity: 0.6; cursor: default; }
.sl-share-user-empty, .sl-share-user-error, .sl-share-user-success {
  font-size: var(--fs-body-s);
  margin-top: 8px;
}
.sl-share-user-empty { color: var(--text-muted); }
.sl-share-user-error { color: var(--error); }
.sl-share-user-success { color: var(--success); font-weight: var(--fw-medium); }

.sl-share-user-hint {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  line-height: 1.4;
}

/* ── Unified share-user result rows (shortlist + catalog) ─────────────────── */

.share-results-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.share-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.share-result:last-child { border-bottom: 0; }

.share-result__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.share-result__avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.share-result__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.share-result__avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  border-radius: 50%;
  line-height: 1;
}

.share-result__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.share-result__name {
  font-size: var(--fs-body-m);
  font-weight: var(--fw-medium);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-result__email {
  font-size: var(--fs-body-s);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-result__btn {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--brand);
  background: transparent;
  color: var(--brand);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
}
.share-result__btn:disabled { opacity: 0.6; cursor: default; }

.feed-state__hint {
  font-size: var(--fs-body-s);
  color: var(--text-muted);
  display: block;
  margin-top: 6px;
}

/* ── Shortlist share button on detail header ───────────────────────────────── */

.shortlist-share-btn {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-strong);
  background: #fff;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  cursor: pointer;
  color: var(--text-secondary);
}
.shortlist-share-btn--active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

/* ── Media slider: Swiper carousel ───────────────────────────────────────────── */

.create-media-slider-wrap {
  /* Outer wrapper — Swiper pagination sits inside the swiper element */
}

.create-media-slider-empty {
  font-size: var(--fs-body-s);
  color: var(--text-muted);
  text-align: center;
  padding: 20px 0 8px;
}

/* Swiper container — extra bottom padding reserves space for pagination bullets */
.create-media-swiper {
  width: 100%;
  padding-bottom: 30px !important; /* room for .swiper-pagination */
}

/* Each slide sizes to its content; no clipping so the remove button corner is visible */
.create-media-swiper .swiper-slide {
  height: auto;
}

/* Non-active slides dim slightly to emphasise the centred one */
.create-media-swiper .swiper-slide .create-media-card__preview {
  opacity: 0.6;
  transition: opacity 0.25s ease;
}
.create-media-swiper .swiper-slide-active .create-media-card__preview {
  opacity: 1;
}

/* ── Swiper pagination — match CoverPage's existing dot style ─────────────────── */

.create-media-swiper .swiper-pagination {
  bottom: 6px;
  padding-top: 4px;
}

.create-media-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(143, 160, 188, 0.5);
  opacity: 1;
  margin: 0 3px !important;
  transition: width 0.2s ease, background 0.2s ease;
}

.create-media-swiper .swiper-pagination-bullet-active {
  width: 22px !important;
  border-radius: 999px;
  background: var(--icon) !important;
}

/* ── Slide content (preview + overlays) ───────────────────────────────────────── */

/* 9:16 portrait ratio — slide height is driven by its own width */
.create-media-card__preview {
  aspect-ratio: 9 / 16;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.create-media-card__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.create-media-card__play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.92);
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* Order badge — top-left corner of each slide */
.create-media-card__order {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Remove-from-post button — top-right corner */
.create-media-card__remove {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── Thumbnail grid (tap to select / deselect) ───────────────────────────────── */

.create-media-list {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.create-media-list__title {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin: 0 0 8px;
}
.create-media-list__count {
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}

/* 4-column grid; items wrap automatically — all uploads always visible */
.create-media-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 2px 0 4px;
}

.create-media-strip-thumb {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  background: var(--bg-subtle);
  cursor: pointer;
  border: 2.5px solid transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
  box-sizing: border-box;
}
.create-media-strip-thumb.is-selected {
  border-color: var(--brand);
}
.create-media-strip-thumb:not(.is-selected) {
  opacity: 0.72;
}

.create-media-strip-thumb__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.create-media-strip-thumb__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

/* Position badge — bottom-left of selected thumb */
.create-media-strip-thumb__badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 9px;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Tiny delete × — top-right corner, unobtrusive */
.create-media-strip-thumb__del {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

/* ── Shortlist modal (used in SavedScreen list view) ───────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
}
.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 320px);
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
  z-index: 201;
  overflow: hidden;
}
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.modal__header h3 {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}
.modal__close {
  border: 0;
  background: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-secondary);
}
.modal__body { padding: 14px 16px; }
.modal__footer {
  display: flex;
  gap: 8px;
  padding: 10px 16px 16px;
  justify-content: flex-end;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PERFORMANCE OPTIMISATIONS
   All rules below are purely technical — no visual change to layout, colour,
   spacing or interactions.
   ───────────────────────────────────────────────────────────────────────────── */

/* Track 1/2 — Scoped render: #cp-overlays and #cp-nav are display:contents so
   they generate no box of their own. All position:absolute children inside them
   (nav, sheets, overlays) still reference .app__viewport as their containing
   block, exactly as if they were direct children. This eliminates any
   block-flow side-effect from the wrapper divs.
   #cp-nav is intentionally separate from #cp-overlays so the bottom nav DOM
   node is never replaced when overlay/sheet state changes — eliminating icon
   flicker on navigation. */
#cp-overlays,
#cp-nav {
  display: contents;
}

/* Track 6 — Layout containment: isolates each card's layout subtree so
   internal changes (badge, title text) don't trigger ancestor reflows.
   `style` containment prevents CSS counters/quotes from escaping the card.
   NOTE: content-visibility:auto is intentionally NOT used here — it requires
   elements to be in a standard document scroll container, but .app__scroll
   uses position:absolute which causes the browser to incorrectly consider
   all cards offscreen, rendering them blank. */
.product-card {
  contain: layout style;
}

/* Track 6 — Contain bubble rows so message thread re-renders are cheap. */
.bubble-row {
  contain: layout style;
}

/* Track 8 — Overscroll containment: prevents sheet/panel scroll events from
   bubbling to the page body, eliminating accidental scroll interference. */
.shortlist-picker-sheet,
.profile-sheet,
.notif-panel,
.create-sheet,
.thread-messages,
.msgs-screen {
  overscroll-behavior: contain;
}

/* Track 8 — Compositor layer hint for the message thread; promotes to its own
   GPU layer so rapid message appends scroll without repainting the whole page. */
.thread-messages {
  will-change: scroll-position;
}

/* Track 6/8 — Vertical pan hint on scroll containers: tells the browser that
   horizontal gestures won't be consumed here, so it can begin vertical scroll
   immediately without waiting 50-100ms for touchstart JS to respond. */
.app__scroll,
.thread-messages,
.create-sheet {
  touch-action: pan-y;
}

/* iOS Safari auto-zooms focused inputs below 16px.
   Keep form controls at 16px on iOS to prevent zoom-jump while typing. */
@supports (-webkit-touch-callout: none) {
  .app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  .app textarea,
  .app select {
    font-size: 16px !important;
  }
}

/* Track 8 — Momentum scroll on iOS (belt-and-suspenders alongside
   the already-present overflow-y:auto). */
.app__scroll {
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH FLOW — new multi-step auth + onboarding
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared tokens ─────────────────────────────────────────────────────────── */
.af-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  border-radius: var(--radius-pill);
  border: none;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.af-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.af-btn--primary {
  background: var(--brand);
  color: #fff;
}
.af-btn--primary:not(:disabled):hover { opacity: 0.88; }
.af-btn--outline {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.af-btn--google {
  background: #fff;
  color: var(--text);
  border: 1.5px solid var(--line-strong);
  font-weight: var(--fw-medium);
}
.af-btn--google:hover { background: var(--bg-subtle); }

.af-input {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1.5px solid #d8dce6;
  border-radius: var(--radius-pill);
  padding: 14px 20px;
  font-size: 16px;         /* prevents iOS zoom */
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
  transition: border-color 0.15s;
}
.af-input:focus { border-color: var(--brand); }
.af-input::placeholder { color: var(--text-muted); }
.af-input:disabled { opacity: 0.5; }

.af-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  flex-shrink: 0;
}

.af-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: var(--error);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.5;
}

/* ── Wrapper ───────────────────────────────────────────────────────────────── */
.af-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: #f5f7fb;
  position: relative;
}
.af-dismiss {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--text-secondary);
  -webkit-tap-highlight-color: transparent;
}

/* ── Topbar (back + centered dots + spacer) ─────────────────────────────────── */
.af-topbar {
  display: flex;
  align-items: center;
  padding: 16px 16px 8px;
  min-height: 56px;
  gap: 0;
}
.af-topbar--back-only { /* just back btn, no spacer/dots needed */ }
.af-topbar__spacer {
  width: 32px;            /* mirrors back-btn hit area so dots stay centered */
  flex-shrink: 0;
}
/* dots sit in the flex centre between back-btn and spacer */
.af-topbar .af-dots,
.af-topbar .ob-dots {
  flex: 1;
  justify-content: center;
}
.af-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  min-width: 32px;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.af-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  box-shadow: none;
  border-radius: 0;
}
.af-close-btn img {
  display: block;
  opacity: 0.72;
}

/* ── Progress dots ─────────────────────────────────────────────────────────── */
.af-dots,
.ob-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.af-dot,
.ob-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d0d7e3;
  transition: background 0.2s;
}
.af-dot--active,
.ob-dot--active { background: var(--brand); }

/* ── Shared content area ───────────────────────────────────────────────────── */
.af-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 20px 32px;
  gap: 20px;
}
.af-content--centered {
  align-items: center;
  text-align: center;
  gap: 16px;
}
.af-title {
  font-size: 26px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  line-height: 1.25;
  margin: 0;
}
.af-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  text-align: center;
}
.af-subtitle-email {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  text-align: center;
}

/* ── Entry screen layout ───────────────────────────────────────────────────── */
.af-screen { display: flex; flex-direction: column; min-height: 100%; }
.af-screen--entry {
  justify-content: center;
  align-items: center;
  padding: 40px 20px 32px;
  gap: 20px;
  min-height: 100%;
  background: #f5f7fb;
}
.af-entry-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.af-entry-brand-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* Actual covr.page wordmark logo */
.af-logo-img {
  width: auto;
  height: 52px;          /* comfortable reading size on mobile */
  max-width: 200px;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.af-tagline {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}

/* Entry card */
.af-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px rgba(20,30,50,0.10);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.af-card__title {
  font-size: 16px;
  color: var(--text);
  text-align: center;
  margin: 0;
}
.af-form { display: flex; flex-direction: column; gap: 14px; }
.af-field { position: relative; }
.af-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 13px;
}
.af-divider::before,
.af-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.af-terms {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.55;
  margin: 0;
}
.af-terms__link { color: var(--brand); text-decoration: underline; }

/* ── Password field with eye toggle ───────────────────────────────────────── */
.af-field--password { position: relative; }
.af-field--password .af-input { padding-right: 50px; }
.af-eye-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  display: flex;
  align-items: center;
}

/* ── OTP screen specific ───────────────────────────────────────────────────── */
.af-input--otp {
  text-align: center;
  letter-spacing: 4px;
  font-size: 22px;
  font-weight: var(--fw-semibold);
}
.af-resend {
  text-align: center;
  font-size: 14px;
}
.af-resend__btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--brand);
  font-size: 14px;
  padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}
.af-resend__countdown { color: var(--text-muted); }

/* ── Welcome back screen ───────────────────────────────────────────────────── */
.af-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 28px;
  font-weight: var(--fw-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 0;
}
.af-email-label {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
}
.af-text-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--brand);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}

/* ── Password hint ─────────────────────────────────────────────────────────── */
.af-pwd-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: -6px 0 0;
  line-height: 1.5;
}

/* ── Sticky bottom button ──────────────────────────────────────────────────── */
.af-sticky-btn {
  margin-top: auto;
  padding-top: 24px;
}

/* ── Success icon ──────────────────────────────────────────────────────────── */
.af-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #e8f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONBOARDING
   ═══════════════════════════════════════════════════════════════════════════ */

.ob-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.ob-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 20px 32px;
  gap: 24px;
}
.ob-content--done {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}
.ob-title {
  font-size: 24px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0;
  line-height: 1.3;
  text-align: center;
}
.ob-title--done { font-size: 28px; }
.ob-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: -12px 0 0;
  line-height: 1.55;
  text-align: center;
}

/* ── Sections ──────────────────────────────────────────────────────────────── */
.ob-form { display: flex; flex-direction: column; flex: 1; gap: 20px; }
.ob-section { display: flex; flex-direction: column; gap: 10px; }
.ob-section-title {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0;
}
.ob-section-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin: -4px 0 0;
  line-height: 1.5;
}
.ob-section-hint--italic { font-style: italic; }
.ob-required { color: var(--error); margin-left: 2px; }
.ob-optional { font-weight: var(--fw-regular); color: var(--text-muted); font-size: 13px; }
.ob-hint-inline { font-size: 13px; color: var(--text-muted); font-weight: var(--fw-regular); }

/* ── Field states ──────────────────────────────────────────────────────────── */
.ob-field { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ob-field--error .af-input { border-color: var(--error); }
.ob-field-error { font-size: 12px; color: var(--error); }

/* ── DOB picker ────────────────────────────────────────────────────────────── */
.ob-dob-picker { display: flex; gap: 10px; }
.ob-dob-col { flex: 1; }
.ob-dob-select { border-radius: var(--radius-pill); padding: 13px 14px; }
.ob-dob-note {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* ── Handle input — status indicator ──────────────────────────────────────── */
.ob-handle-wrap { position: relative; }
.ob-handle-wrap .af-input { padding-right: 44px; }

/* Green border when available */
.ob-field--ok .af-input { border-color: #22c55e; }

/* Status icons sit inside the input on the right */
.ob-handle-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.ob-handle-icon--ok  { color: #22c55e; }
.ob-handle-icon--err { color: var(--error); }

/* Spinner — tiny rotating arc */
.ob-handle-spinner {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: ob-spin 0.7s linear infinite;
}
@keyframes ob-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Helper hint line below the field */
.ob-handle-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* ── Phone row ─────────────────────────────────────────────────────────────── */
.ob-phone-row {
  display: flex;
  align-items: center;
  border: 1.5px solid #d8dce6;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: #fff;
  transition: border-color 0.15s;
}
.ob-phone-row:focus-within { border-color: var(--brand); }
.ob-phone-prefix {
  padding: 14px 14px 14px 18px;
  font-size: 16px;
  color: var(--text);
  border-right: 1.5px solid #d8dce6;
  white-space: nowrap;
  flex-shrink: 0;
}
.ob-phone-input {
  border: none !important;
  border-radius: 0 !important;
  flex: 1;
  padding-left: 14px !important;
}
.ob-phone-input:focus { border-color: transparent !important; }
.ob-phone-row--disabled { opacity: 0.45; pointer-events: none; }

/* ── Skip link ("Complete profile later") ─────────────────────────────────── */
.ob-skip-link {
  background: none;
  border: none;
  padding: 10px 8px 4px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
  width: 100%;
}
.ob-skip-link:hover { color: var(--text-secondary); }

/* ── Checkbox ──────────────────────────────────────────────────────────────── */
.ob-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.ob-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Select wrapper ────────────────────────────────────────────────────────── */
.ob-select-wrap { position: relative; }
.ob-select-wrap .af-input { padding-right: 44px; }
.ob-select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  cursor: pointer;
}
.ob-select-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-secondary);
}

/* ── Toggle switch ─────────────────────────────────────────────────────────── */
.ob-toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
}
.ob-toggle-info { flex: 1; }
.ob-toggle-label { font-size: 15px; font-weight: var(--fw-medium); color: var(--text); }
.ob-toggle-desc { font-size: 12px; color: var(--text-muted); margin: 2px 0 0; line-height: 1.4; }
.ob-toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}
.ob-toggle-switch input { opacity: 0; width: 0; height: 0; }
.ob-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: #d0d7e3;
  transition: background 0.2s;
}
.ob-toggle-switch input:checked + .ob-toggle-track { background: var(--brand); }
.ob-toggle-track::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ob-toggle-switch input:checked + .ob-toggle-track::after { transform: translateX(20px); }

/* ── Textarea ──────────────────────────────────────────────────────────────── */
.ob-textarea, .ob-bio-textarea {
  border-radius: var(--radius-sm) !important;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  line-height: 1.5;
}
.ob-char-count {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 4px;
}
.ob-char-count--over { color: var(--error); }

/* ── Radio / checkbox list ─────────────────────────────────────────────────── */
.ob-radio-list { display: flex; flex-direction: column; gap: 2px; }
.ob-radio-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
  border: 1.5px solid transparent;
}
.ob-radio-row:hover { background: #f0f4f8; }
.ob-radio-row--selected {
}
.ob-radio-input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  flex-shrink: 0;
  cursor: pointer;
}
.ob-radio-content { display: flex; flex-direction: column; gap: 2px; }
.ob-radio-label { font-size: 14px; font-weight: var(--fw-medium); color: var(--text); }
.ob-radio-sub { font-size: 12px; color: var(--text-muted); }

/* ── Product tags ──────────────────────────────────────────────────────────── */
.ob-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
}
.ob-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e8f0f5;
  color: var(--brand);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 13px;
  font-weight: var(--fw-medium);
}
.ob-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--brand);
  padding: 0;
  display: flex;
  align-items: center;
}
.ob-tag-input-wrap { margin-top: 4px; }

/* ── Done state ────────────────────────────────────────────────────────────── */
.ob-done-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #e8f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.ob-done-btn { max-width: 300px; margin-top: 16px; }

/* ── App loading splash (shown while auth.verify() runs) ─────────────────── */
.app-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  gap: 24px;
  background: #f5f7fb;
}
.app-loading__logo {
  width: auto;
  height: 44px;
  max-width: 180px;
  object-fit: contain;
  opacity: 0.85;
  animation: app-loading-pulse 1.5s ease-in-out infinite;
}
@keyframes app-loading-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

/* ── iOS safe area / full-height fix ──────────────────────────────────────── */
.af-wrapper,
.ob-wrapper {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Auth form always fills available width (fixes shrink-wrap in centered layouts) */
.af-form {
  width: 100%;
}

/* ── Welcome-back screen: hero (avatar + email) centred, form full-width ─── */
.af-login-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.af-login-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
/* outline button inside login actions keeps full width */
.af-login-actions .af-btn--outline {
  width: 100%;
}

/* ── Address textarea in Step 3 ─────────────────────────────────────────────── */
.ob-address-textarea {
  border-radius: var(--radius-sm) !important;
  resize: none;
  min-height: 64px;
  font-family: inherit;
  line-height: 1.5;
  font-size: 16px;
}

/* ── Consistent pill height for all auth/onboarding inputs ──────────────────── */
.af-input {
  min-height: 52px;   /* matches screenshot pill height */
  /* iOS Safari zooms when input font-size < 16px — prevent that */
  font-size: 16px;
}
/* Override: keep 14px on desktop where zoom isn't an issue */
@media (min-width: 520px) {
  .af-input { font-size: var(--fs-body-m); }
}
.ob-dob-select {
  min-height: 52px;
  padding: 13px 14px;
}

/* ── Entry card — tighten side padding to reduce width gap with other screens ─ */
.af-card {
  padding: 28px 20px 24px;
}

/* ── Auth background: remove scroll padding during auth/onboarding ──────────── */
/* Applied via .is-auth class toggled on #app in render()                        */
.is-auth .app__scroll {
  padding: 0;
  background: #fff;
}

/* ── Step card (OTP / password / forgot) — same white card as entry step ────── */
.af-card--step {
  margin: 8px 20px 32px;
  /* width: 100% from .af-card base, constrained by 20px side margins */
  align-self: stretch;
}

/* ── Desktop: center the auth card ────────────────────────────────────────── */
@media (min-width: 520px) {
  .af-screen--entry {
    padding: 60px 24px 48px;
  }
  .af-content,
  .ob-content {
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
  }
  .af-topbar { max-width: 460px; margin: 0 auto; width: 100%; }
  /* Step card: match entry card centering on wider screens */
  .af-card--step {
    margin: 8px auto 32px;
    width: calc(100% - 48px);
    max-width: 420px;
  }
}

/* ── Progressive-reveal phase header (OTP / password phases inside card) ─────── */
.af-phase-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Inline "Change" / "Not you?" link inside card subtitle */
.af-inline-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand);
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Onboarding: step label ("Step X of 2") ──────────────────────────────────── */
.ob-step-label {
  font-size: 13px;
  color: var(--text-muted);
  flex: 1;
  text-align: center;
}

/* ── Avatar upload (Step B) ──────────────────────────────────────────────────── */
.ob-section--avatar {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ob-avatar-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.ob-avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #eef1f6;
  border: 2px dashed #c5cdd9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.15s;
}
.ob-avatar-circle--has-img { border-style: solid; border-color: var(--brand); }
.ob-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.ob-avatar-hint { font-size: 13px; color: var(--brand); }
.ob-avatar-input-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── Bio textarea in Step B ──────────────────────────────────────────────────── */
.ob-bio-textarea {
  resize: none;
  min-height: 72px;
  font-family: inherit;
  line-height: 1.5;
  padding-bottom: 28px; /* room for char count */
}

/* ── Char count positioned over textarea ─────────────────────────────────────── */
.ob-field { position: relative; }
.ob-char-count {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 11px;
  color: var(--text-muted);
  pointer-events: none;
}
.ob-char-count--over { color: var(--error); }

/* ── Auth: success block (password reset done) ───────────────────────────────── */
.af-success-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 8px 0 4px;
}

/* ── Confirmation modal (delete account) ─────────────────────────────────────── */
/* Uses position:absolute so it is contained inside .app__viewport (like all other
   overlays) — position:fixed gets clipped by the overflow:hidden ancestor on iOS. */
.cp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 30, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  padding: 20px;
}
.cp-modal {
  background: #fff;
  border-radius: 16px;
  padding: 24px 20px 20px;
  max-width: 340px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 40px rgba(10,15,30,0.18);
}
.cp-modal__title { font-size: 17px; font-weight: var(--fw-semibold); color: var(--text); margin: 0; }
.cp-modal__body { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin: 0; }
.cp-modal__body--warning { color: var(--text); font-weight: var(--fw-medium); margin-top: 10px; }
.cp-modal__list { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin: 8px 0 0 0; padding-left: 18px; }
.cp-modal__error { font-size: 13px; color: var(--error); margin: 0; }
.cp-modal__actions { display: flex; gap: 10px; margin-top: 4px; }
.cp-modal__btn {
  flex: 1;
  padding: 11px 16px;
  border-radius: var(--radius-pill);
  border: none;
  font-size: 14px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: opacity 0.15s;
}
.cp-modal__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cp-modal__btn--cancel { background: #f0f2f5; color: var(--text); }
.cp-modal__btn--danger { background: #dc2626; color: #fff; }

/* ── Account Settings: Delete Account row ────────────────────────────────────── */
.accs-delete-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.accs-delete-label {
  font-size: 14px;
  color: var(--text);
  margin: 0;
}
.accs-delete-btn {
  background: none;
  border: none;
  color: #dc2626;
  font-size: 14px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  padding: 6px 0;
}
.accs-delete-btn:hover { opacity: 0.75; }

/* ── Admin: section subtitle ─────────────────────────────────────────────────── */
.admin-section-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: -8px 0 12px;
}

/* ── Admin: user row action buttons group ────────────────────────────────────── */
.admin-user-row__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Admin: "you" inline badge ───────────────────────────────────────────────── */
.admin-you-badge {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: var(--fw-normal, 400);
}

/* ── Admin: promote-by-email section ────────────────────────────────────────── */
.admin-promote-section {
  padding: 16px 16px 24px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.admin-promote-title {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0 0 10px;
}
.admin-promote-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.admin-promote-input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.admin-promote-input:focus { border-color: var(--accent); }
.admin-form-success {
  font-size: 13px;
  color: #0a6638;
  margin: 6px 0 0;
}

/* ── Admin: header action group (Back to App + Logout) ───────────────────────── */
.admin-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-back-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: var(--radius-xs);
  padding: 7px 14px;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background 0.15s;
}
.admin-back-btn:hover {
  background: rgba(255,255,255,0.18);
}

/* ── Admin: unauthorized state ───────────────────────────────────────────────── */
.admin-unauth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 32px;
  text-align: center;
  gap: 16px;
}
.admin-unauth h2 {
  margin: 0;
  font-size: var(--fs-h3);
  color: var(--text);
}
.admin-unauth p {
  margin: 0;
  color: var(--text-secondary);
}
.admin-unauth__btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-xs);
  padding: 10px 20px;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

/* ── Admin: profile sheet "Open Admin Panel" item ────────────────────────────── */
.profile-sheet__item--admin {
  color: var(--brand);
}

/* ── Admin: Search Analytics ─────────────────────────────────────────────────── */
.admin-section {
  padding: 20px 16px 8px;
}
.admin-section-title {
  margin: 0 0 14px;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.admin-error {
  color: #c0392b;
  font-size: 14px;
}
.admin-inline-btn {
  background: none;
  border: none;
  color: var(--brand);
  cursor: pointer;
  font-size: inherit;
  text-decoration: underline;
  padding: 0;
}
.admin-empty-state {
  color: var(--text-secondary);
  font-size: 14px;
}

.admin-sa-window {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.admin-sa-window-btn {
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-sa-window-btn--active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.admin-sa-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 768px) {
  .admin-sa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .admin-sa-grid > .admin-sa-card:first-child {
    grid-column: 1 / -1; /* top terms spans full width */
  }
}

.admin-sa-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  overflow: hidden;
}
.admin-sa-card__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.admin-sa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-sa-table th {
  text-align: left;
  padding: 6px 8px;
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.admin-sa-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.admin-sa-table tr:last-child td { border-bottom: none; }
.admin-sa-rank  { width: 32px; color: var(--text-secondary); text-align: center; }
.admin-sa-term  { font-weight: var(--fw-medium); word-break: break-word; }
.admin-sa-count { text-align: right; width: 80px; color: var(--text-secondary); }
.admin-sa-empty { text-align: center; color: var(--text-secondary); padding: 16px 0; }
.admin-sa-gap { color: var(--error, #e53935); font-weight: var(--fw-semibold); }

/* Pagination bar for search analytics tables */
.admin-sa-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.admin-sa-pager__btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}
.admin-sa-pager__btn:hover:not(:disabled) { background: var(--bg-secondary, #f4f5f7); }
.admin-sa-pager__btn:disabled { opacity: 0.35; cursor: default; }
.admin-sa-pager__info {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}
.admin-sa-pager__total { font-size: 11px; opacity: 0.7; }

/* ── Admin: Audit Logs ───────────────────────────────────────────────────────── */
.admin-audit-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-audit-table th,
.admin-audit-table td { white-space: nowrap; }
.admin-audit-time   { color: var(--text-secondary); font-size: 12px; }
.admin-audit-actor  { font-weight: var(--fw-medium); }
.admin-audit-action { color: var(--brand); }
.admin-audit-target { }
.admin-audit-detail { color: var(--text-secondary); }

/* ── Admin: Charts ──────────────────────────────────────────────────────────── */
.admin-sparkline  { display: block; flex-shrink: 0; }
.admin-bar-chart  { display: block; width: 100%; overflow: visible; }
.admin-sa-sub     { color: var(--text-secondary); font-size: 11px; font-weight: 400; }
.admin-sa-gap     { color: #ef4444; font-weight: var(--fw-semibold); }

/* ── Admin: Window selector ─────────────────────────────────────────────────── */
.admin-win-sel-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.admin-win-sel {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-win-btn {
  padding: 5px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.admin-win-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-win-custom__label, .admin-win-custom__sep {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: var(--fw-medium);
}
.admin-win-date {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.admin-win-date:focus {
  border-color: var(--accent);
}
.admin-win-btn--active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.admin-analytics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.admin-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: opacity 0.15s;
}
.admin-export-btn:hover {
  opacity: 0.9;
}

/* ── Admin: Metric cards (analytics overview) ───────────────────────────────── */
.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}
.admin-metric-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.admin-metric-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-metric-card__val-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.admin-metric-card__val {
  font-size: 26px;
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 1;
}
.admin-metric-trend {
  font-size: 12px;
  font-weight: var(--fw-bold);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.trend--up { background: #dcfce7; color: #15803d; }
.trend--down { background: #fef2f2; color: var(--error); }
.trend--neutral { background: var(--bg-subtle); color: var(--text-secondary); }
.admin-metric-card__label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}
.admin-chart-bar {
  transition: opacity 0.15s, fill 0.15s;
  cursor: crosshair;
}
.admin-chart-bar:hover {
  opacity: 1;
}

/* ── Admin: KPI row (growth/retention) ─────────────────────────────────────── */
.admin-kpi-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 16px 0;
}
.admin-kpi-group {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.admin-kpi-group__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-kpi-group__title {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--text);
  margin: 0;
}
.admin-kpi-group__desc {
  font-size: 12px;
  color: var(--text-secondary);
}
.admin-kpi-group__stats {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  gap: 8px;
}
.admin-kpi-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.admin-kpi-item__label {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.admin-kpi-item__val {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--text);
}
.admin-kpi-item__hint {
  cursor: help;
  opacity: 0.6;
  margin-left: 2px;
}

/* ── Admin: Health dot ──────────────────────────────────────────────────────── */
.admin-health {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.admin-health__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.admin-health__dot--ok       { background: #22c55e; }
.admin-health__dot--err      { background: #ef4444; }
.admin-health__dot--loading  { background: #94a3b8; animation: pulse 1.2s infinite; }
.admin-health__label  { font-size: 13px; font-weight: var(--fw-medium); }
.admin-health__counts { font-size: 11px; color: var(--text-secondary); }

/* ── Admin: Alert bar ───────────────────────────────────────────────────────── */
.admin-alert {
  background: #fef9c3;
  border: 1px solid #fde047;
  border-radius: var(--radius-xs);
  padding: 8px 14px;
  font-size: 13px;
  color: #713f12;
  margin-bottom: 14px;
}

/* ── Admin: Error / empty states ────────────────────────────────────────────── */
.admin-error-state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.admin-error-state__icon { font-size: 16px; }
.admin-empty-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
}

/* ── Admin: Section desc ────────────────────────────────────────────────────── */
.admin-section-desc {
  color: var(--text-secondary);
  font-size: 13px;
  margin: -8px 0 16px;
}

/* ── Admin: Content Health ──────────────────────────────────────────────────── */
.admin-health-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.admin-health-group__title {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.admin-health-count {
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 7px;
  font-weight: var(--fw-semibold);
}
.admin-health-ok {
  font-size: 13px;
  color: #16a34a;
  margin: 0;
}

/* ── Admin: product thumb in moderation ─────────────────────────────────────── */
.admin-product-row__thumb {
  width: 56px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  display: block;
}
.admin-product-row__thumb--empty {
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 100px;
}
.admin-product-row__thumb--video {
  background: #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 100px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  opacity: 0.85;
}

/* ── Admin: moderation sub-tabs (Pages / Comments) ─────────────────────────── */
.admin-mod-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}
.admin-mod-tab {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: none;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.admin-mod-tab--active {
  background: var(--accent, #151c27);
  color: #fff;
  border-color: transparent;
}

/* ── Admin: product row preview button ─────────────────────────────────────── */
.admin-product-row__preview-btn {
  all: unset;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
}
.admin-product-row__preview-btn:hover .admin-product-row__thumb { opacity: 0.8; }

/* ── Admin: moderation preview overlay ─────────────────────────────────────── */
.admin-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.admin-preview-modal {
  position: relative;
  background: var(--bg);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 48px rgba(0,0,0,0.22);
}
.admin-preview-close {
  position: absolute;
  top: 14px; right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.admin-preview-close:hover { background: var(--bg-secondary, #f4f5f7); }
.admin-preview-header { margin-bottom: 16px; }
.admin-preview-title {
  font-size: 18px;
  font-weight: var(--fw-semibold);
  margin: 6px 0 4px;
  color: var(--text);
}
.admin-preview-meta { font-size: 12px; color: var(--text-secondary); margin: 0; }
/* Primary media — strict 9:16 aspect ratio */
.admin-preview-media-wrap {
  /* Fixed 9:16 rectangle, capped at 54vh tall */
  height: 54vh;
  width: calc(54vh * 9 / 16);
  max-width: 100%;
  margin: 0 auto 16px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-subtle, #f5f6f8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-preview-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Extra images (2nd+) shown as a small row below primary */
.admin-preview-extra-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.admin-preview-extra-img {
  width: calc(33.33% - 6px);
  border-radius: 8px;
  object-fit: cover;
  max-height: 140px;
}
.admin-preview-no-media {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 16px;
  padding: 32px 0;
  text-align: center;
}
.admin-preview-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 20px;
  white-space: pre-wrap;
}
.admin-preview-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ── Admin: comment moderation list ─────────────────────────────────────────── */
.admin-comment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.admin-comment-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.admin-comment-row__body { flex: 1; min-width: 0; }
.admin-comment-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  align-items: center;
}
.admin-comment-row__author { font-weight: var(--fw-semibold); color: var(--text); }
.admin-comment-row__content {
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
  margin: 0;
}
.admin-comment-row__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .admin-comment-row { flex-direction: column; }
  .admin-comment-row__actions { flex-direction: row; flex-wrap: wrap; }
}

/* ── Admin: badge variants ──────────────────────────────────────────────────── */
.admin-badge.abadge--green  { background: #dcfce7; color: #15803d; }
.admin-badge.abadge--red    { background: #fee2e2; color: #dc2626; }
.admin-badge.abadge--yellow { background: #fef9c3; color: #a16207; }
.admin-badge.abadge--accent { background: #ede9fe; color: #6d28d9; }

/* ── Admin: product row delete button ───────────────────────────────────────── */
.admin-action-btn--danger {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}
.admin-action-btn--danger:hover { background: #fee2e2; }

/* ── Role-change modal: email confirm input ──────────────────────────────────── */
.cp-modal__confirm-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}
.cp-modal__confirm-input:focus { border-color: var(--accent); }

/* ── Avatar Crop Modal (avc-*) ───────────────────────────────────────────────── */
.avc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avc-modal {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Header: Cancel / title / Use Photo */
.avc-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}
.avc-header__title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
}
.avc-header__btn {
  font-size: 14px;
  font-weight: 500;
  color: #ccc;
  background: none;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
  line-height: 1;
}
.avc-header__btn--primary {
  color: #4da1f5;
  font-weight: 600;
}
.avc-header__btn:hover { opacity: 0.8; }

/* Stage: the interactive square viewport */
.avc-stage {
  position: relative;
  width: min(100vw, 480px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #111;
  touch-action: none;
}

/* Canvas fills the stage exactly */
.avc-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.avc-canvas:active { cursor: grabbing; }


/* Hint text below the stage */
.avc-hint {
  color: #888;
  font-size: 12px;
  margin: 12px 0 0;
  text-align: center;
  padding: 0 16px;
}

/* ── Feed Card 3-dots Popup ────────────────────────────────────────────────── */

.fcp-backdrop {
  position: absolute;  /* absolute = constrained to .app__viewport, not the browser viewport */
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  z-index: 150;
  display: flex;
  align-items: flex-end;
  animation: create-fade-in 200ms ease-out both;
}

/* Suppress replay when the popup is already mounted and render() is called by an inner action */
.fcp-backdrop.no-anim,
.fcp-sheet.no-anim {
  animation: none;
}

/* Sheet uses flex-column so the header stays fixed while the body scrolls */
.fcp-sheet {
  width: 100%;
  max-height: calc(100% - 24px);  /* % of the app container, never bleeds outside the mobile frame */
  background: #fff;
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  animation: sheet-up 0.28s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

/* Non-scrolling header: drag handle + close button */
.fcp-sheet__header {
  position: relative;
  padding: 12px 16px 4px;
  flex-shrink: 0;
}

/* Scrollable area that holds the full product preview */
.fcp-sheet__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

.fcp-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #d1d5db;
  margin: 0 auto 8px;
}

.fcp-close {
  position: absolute;
  top: 10px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #374151;
}

/* Override product-screen's negative side margins which would bleed outside the sheet */
.fcp-sheet .product-screen {
  margin: 0;
  gap: 0;
  padding-bottom: 40px;
}

/* No card-level shadow needed — the sheet itself provides containment */
.fcp-sheet .expanded-post {
  box-shadow: none;
}

/* ── Popup-scoped tweaks ─────────────────────────────────────────────────────
   All rules below apply only inside the 3-dots preview popup (.fcp-sheet).   */

/* 1. Media: constrain size, round the corners */
.fcp-sheet .product-hero {
  width: 38%;
  margin: 16px auto 12px;
  border-radius: 14px;
  overflow: hidden; /* ensures child video/slides honour the radius */
}

/* 2. Carousel arrows: hidden in popup (swipe still works, arrows are just UI clutter) */
.fcp-sheet .product-hero__nav {
  display: none;
}

/* Owner 3-dots (edit/settings) button: not relevant in preview mode */
.fcp-sheet .product-hero__owner-btn {
  display: none;
}

/* 3. Actions row: strip background and border — icons/layout unchanged */
.fcp-sheet .product-actions {
  background: none;
  border-top: none;
  border-bottom: none;
}

/* ── Desktop layout (≥ 1024px) ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* 1. Shell: single column — app fills the full viewport */
  .app-shell {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .desktop-copy {
    display: none;
  }

  .phone-frame {
    grid-column: 1;
    padding: 0;
    display: block;
  }

  /* 2. App: full-screen, no phone-frame chrome */
  .app {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  /* 3. Nav: vertical left rail */
  .bottom-nav {
    right: auto;
    bottom: 0;
    top: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    width: 96px;               /* fixed — never changes */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 34px 8px 20px 30px;
    background: var(--bg);
    pointer-events: auto;
    overflow: visible;          /* pill floats out on expand; no clip here */
    z-index: 25;
  }

  .bottom-nav__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: auto;
    background: transparent;
    border: none;
    padding: 0;
    flex-shrink: 0;
    margin-bottom: 54px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
  }

  .bottom-nav__logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .bottom-nav__items {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    flex-direction: column;
    gap: 18px;
    padding: 18px 8px 18px 8px;
    border-radius: 34px;
    width: 58px;
    overflow: hidden;       /* clips labels while collapsed */
    align-items: stretch;
    box-sizing: border-box;
    transition: width 250ms ease-out; /* only the pill animates, not the rail */
  }

  .bottom-nav__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;         /* icon stays fixed-size in the flex row */
  }

  .bottom-nav__icon img {
    width: 40px;
    height: 40px;
  }

  /* 4. Scroll area: symmetric padding — nav is position:absolute, not in flow */
  .app__scroll {
    padding: 0 24px 60px 24px;
  }

  /* Home feed: match search/results width so content centres in full viewport */
  .home-content {
    max-width: 760px;
  }

  /* Auth screens: full-width, no left indent */
  .is-auth .app__scroll {
    padding: 0;
  }

  /* 5. Home header: horizontal, sticky */
  .home-header {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 20px;
  }

  /* Logo swap: mobile wordmark hidden, desktop wordmark shown */
  .home-logo--mobile {
    display: none;
  }

  .home-logo--desktop {
    display: block;
    width: 192px;
    height: auto;
  }

  /* 6. Home feed: fixed 4-column grid (toggle hidden) */
  .grid-layout--home-single {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .grid-layout--three.home-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  /* 8. Card image: 9:16 ratio preserved on desktop home grid */
  .product-card__media {
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    box-shadow: none;
  }

  .product-card__body--row {
    margin-top: 8px;
    align-items: center;
    gap: 10px;
  }

  .product-card__body h3 {
    margin: 0;
    padding-left: 5px;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #1d464f;
  }

  .product-card__body-actions {
    gap: 10px;
    align-items: center;
  }

  .product-card__save-btn,
  .product-card__menu-btn {
    width: 22px;
    height: 22px;
    opacity: 0.65;
  }

  .product-card__save-btn img {
    width: 18px;
    height: 18px;
  }

  .product-card__menu-btn img {
    width: 18px;
    height: auto;
  }
}

/* ── Profile screen: base max-width ──────────────────────────────────────── */
.profile-content {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

/* ── Profile screen: tablet layout (≥ 768px) ─────────────────────────────── */
@media (min-width: 768px) {
  /* Centered content column */
  .profile-content {
    max-width: 800px;
    margin: 0 auto;
  }

  /* Shortlists: 2-column at tablet */
  .profile-content .shortlist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Profile screen: desktop layout (≥ 1024px) ───────────────────────────── */
@media (min-width: 1024px) {
  /* Center the pill header */
  .profile-header__top-actions {
    justify-content: center;
    gap: 0;
    margin-bottom: 24px;
  }

  /* Catalogs: 3-column at desktop */
  .profile-content .catalog-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }


  /* Shortlists: 3-column at desktop */
  .profile-content .shortlist-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  /* Pages tab: widen column gaps at desktop to match wider canvas */
  .profile-content .grid-layout--three {
    gap: 18px;
  }
}

/* ── Profile → Catalogs: 9:16 cover + SVG frame overlay ─────────────────── */

/* 1. Switch cover to 9:16 (portrait book-like ratio for the catalog frame) */
.profile-content .catalog-card-grid .catalog-card__cover,
.mfr-profile__catalogs .catalog-card-grid .catalog-card__cover {
  aspect-ratio: 9 / 16;
}

/* 2. SVG frame sits on top of the cover image, scales 1:1 with the cover.
      overflow: hidden on the parent keeps it perfectly contained.            */
.profile-content .catalog-card-grid .catalog-card__cover::after,
.mfr-profile__catalogs .catalog-card-grid .catalog-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../assets/Icons/Catalog_Overlay.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* 3. Lock icon stays above the SVG frame */
.profile-content .catalog-card-grid .catalog-card__lock,
.mfr-profile__catalogs .catalog-card-grid .catalog-card__lock {
  z-index: 2;
}

/* ── Saved screen: tablet layout (≥ 768px) ───────────────────────────────── */
@media (min-width: 768px) {
  /* Center the saved-screen content column */
  .saved-screen {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
  }

  /* Shortlists row: 2-column at tablet */
  .saved-screen .shortlist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Catalog detail / shortlist detail: center inner content blocks */
  .catalog-page__heading,
  .catalog-page__items,
  .shortlist-add-items-wrap {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Expandable left nav rail (desktop ≥ 1024px) ────────────────────────────
   Hover / focus-within: expands from 80px → 220px with icon+label rows.
   Mobile/tablet (.bottom-nav horizontal pill): completely untouched.         */
@media (min-width: 1024px) {

  /* ── Expanded state: only the inner pill widens — rail stays at 80px ─────── */
  .bottom-nav:hover .bottom-nav__items,
  .bottom-nav:focus-within .bottom-nav__items {
    width: 240px;
  }

  /* ── Item: switch from grid (mobile) to horizontal flex row (desktop) ────── */
  .bottom-nav__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: 100%;
    /* padding-left: 4px places icon center at exactly 40px (nav center of 80px):
       8px (nav pad) + 6px (pill pad) + 4px (btn pad) + 22px (icon half) = 40px */
    padding: 0 0 0 4px;
    border-radius: 0;
    text-align: left;
  }

  /* ── Label: hidden while collapsed, revealed when nav is open ──────────── */
  .bottom-nav__label {
    display: block;          /* reset base display:none; opacity controls visibility */
    /* Hidden state (collapsed rail) */
    opacity: 0;
    transform: translateX(-6px);
    /* Collapse transition: quick fade-out, no delay */
    transition: opacity 140ms ease-in, transform 140ms ease-in;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    color: #3a4557;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    flex: 1;
    min-width: 0;
    padding-left: 5px;       /* visual gap between icon and text */
  }

  /* Active label: slightly darker */
  .bottom-nav__item.is-active .bottom-nav__label {
    color: #1e4650;
    font-weight: 600;
  }

  /* Reveal labels after nav starts opening (80ms delay so nav leads the text) */
  .bottom-nav:hover .bottom-nav__label,
  .bottom-nav:focus-within .bottom-nav__label {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 200ms ease-out 80ms, transform 200ms ease-out 80ms;
  }

  /* ── Reduced motion: skip slide, keep instant opacity toggle ─────────────── */
  @media (prefers-reduced-motion: reduce) {
    .bottom-nav__items {
      transition: width 0ms;
    }
    .bottom-nav__label,
    .bottom-nav:hover .bottom-nav__label,
    .bottom-nav:focus-within .bottom-nav__label {
      transition: opacity 80ms ease-out;
      transform: none;
    }
  }
}

/* ── Hide bottom nav on mobile/tablet when catalog page is open ──────────── */
/* Nav is always rendered now so the desktop rail shows; suppress it below    */
/* 1024px where it would collide with the catalog-page seller bar.            */
@media (max-width: 1023px) {
  .app:has(.catalog-page) .bottom-nav {
    display: none;
  }
}

/* ── Saved / Catalog / Shortlist detail: desktop layout (≥ 1024px) ───────── */
@media (min-width: 1024px) {
  /* Catalog page: sit to the right of the 80px left nav rail.
     Use full inset override so all four sides are explicit here,
     not split across the base inset:0 rule. Applies to BOTH
     owner catalog page and third-party catalog page — same class,
     same layout. */
  .catalog-page {
    position: absolute;
    inset: 0 0 0 80px;
  }

  /* Shortlist detail page: same nav-rail offset as catalog-page */
  .sl-detail-page {
    position: absolute;
    inset: 0 0 0 80px;
  }

  /* Scroll areas: center content at 800px, fall back to 24px min padding */
  .catalog-page__scroll,
  .sl-detail-page__scroll {
    padding-left: max(24px, calc(50% - 400px));
    padding-right: max(24px, calc(50% - 400px));
  }

  /* Saved page: shortlists 3-column */
  .saved-screen .shortlist-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  /* Saved page: widen the pages tile grid gaps */
  .saved-pages__grid {
    gap: 18px;
  }

  /* Catalog/shortlist detail items — single-col mode: 3-col (overrides general 4-col rule) */
  .catalog-page__items.grid-layout--home-single {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  /* Catalog/shortlist detail items — triple mode: widen gaps */
  .catalog-page__items.grid-layout--three {
    gap: 18px;
  }

  /* Seller pill: fixed width + centered at desktop */
  .catalog-page__seller-pill {
    width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Product screen: desktop layout (≥ 1024px) ─────────────────────────────── */
@media (min-width: 1024px) {
  /* Reset mobile bleed margin; constrain and center */
  .product-screen {
    margin: 0 auto;
    max-width: 800px;
    gap: 40px;
    padding-bottom: 60px;
  }

  /* CLOSE text button: fixed to viewport top-right so it never overlaps action icons */
  .product-screen__close {
    display: block;
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 26;           /* above left nav rail (z-index: 25), below modals */
    background: transparent;
    border: 1.5px solid rgba(100, 116, 139, 0.28);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    color: #94a3b8;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
  }

  .product-screen__close:hover,
  .product-screen__close:focus-visible {
    color: #64748b;
    border-color: rgba(100, 116, 139, 0.55);
    outline: none;
  }

  /* Hide the mobile back arrow on desktop — CLOSE replaces it */
  .product-hero__back {
    display: none;
  }

  /* ── All expanded posts in the product screen: fixed 50/50 desktop split ───
     The 800px card is divided into two 400px columns. The left media column
     owns the 9:16 ratio, so the right column stretches to the same height. */
  .product-screen .expanded-post {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    max-width: 800px;
    border-radius: 16px;
    overflow: visible;    /* tooltips must escape — clipping pushed to children */
    margin-top: 30px;
  }

  /* Left column: exactly half the 800px card, with height from 9:16. */
  .product-screen .product-hero {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    height: auto;
    flex-shrink: 0;
    aspect-ratio: 9 / 16;
    min-height: unset;
    max-height: none;
    overflow: hidden;
    border-radius: 16px 0 0 16px;
    background-color: #f5f6f8; /* neutral fill visible only while media loads  */
    background-size: cover;    /* fill the container — no side bars            */
  }

  /* Slides: cover fills the 9:16 frame completely. */
  .product-screen .product-hero__slide {
    background-size: cover;
  }

  /* Videos: cover matches the slide approach above. */
  .product-screen .product-hero__video {
    object-fit: cover;
  }

  /* Right column: exactly half the 800px card and same height as the media. */
  .product-screen .expanded-post__right {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0 16px 16px 0;
    overflow: visible;    /* allow tooltips to overflow downward */
  }

  /* Actions row: pinned to the very top of the right column */
  .product-screen .product-actions {
    flex-shrink: 0;
    background: #fff;
    border-top: none;
    border-bottom: none;
    padding: 32px 58px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  /* In flex mode the grid-template-columns no longer applies */
  .product-screen .product-actions button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;               /* gap removed — labels hidden, icon only */
    position: relative;   /* anchor for tooltip pseudo-elements */
    padding: 6px 8px;
    border-radius: 10px;
    transition: background 0.14s;
    cursor: pointer;
  }
  .product-screen .product-actions button:hover { background: #f4f6f9; }

  .product-screen .product-actions .product-actions__icon {
    width: 20px;
    height: 20px;
  }

  /* ── Hide text labels — icon-only on desktop ─────────────────────────────── */
  /* Target only the direct-child text label spans, not the comment icon-wrap   */
  .product-screen .product-actions button > span:not(.product-actions__comment-icon-wrap) {
    display: none;
  }

  /* ── Tooltip bubble (::after) ─────────────────────────────────────────────── */
  .product-screen .product-actions button[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    top: calc(100% + 14px);   /* below the icon */
    left: 50%;
    transform: translateX(-50%) translateY(-5px);

    /* Visuals */
    background: rgba(21, 28, 39, 0.88);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.01em;
    padding: 5px 11px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);

    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    z-index: 60;
    transition: opacity 150ms ease, transform 150ms ease;
  }

  /* ── Tooltip caret (::before) ─────────────────────────────────────────────── */
  .product-screen .product-actions button[aria-label]::before {
    content: "";
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);

    /* Upward-pointing triangle */
    border: 5px solid transparent;
    border-bottom-color: rgba(21, 28, 39, 0.88);

    opacity: 0;
    pointer-events: none;
    z-index: 61;
    transition: opacity 150ms ease, transform 150ms ease;
  }

  /* ── Show on hover / keyboard focus ──────────────────────────────────────── */
  .product-screen .product-actions button:hover::after,
  .product-screen .product-actions button:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .product-screen .product-actions button:hover::before,
  .product-screen .product-actions button:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* ── Edge clipping guards ─────────────────────────────────────────────────── */
  /* First button (View Catalog) — anchor tooltip to the left */
  .product-screen .product-actions button:first-child::after {
    left: 0;
    transform: translateX(0) translateY(-5px);
  }
  .product-screen .product-actions button:first-child::before {
    left: 16px;
  }
  .product-screen .product-actions button:first-child:hover::after,
  .product-screen .product-actions button:first-child:focus-visible::after {
    transform: translateX(0) translateY(0);
  }

  /* Last button (Save) — anchor tooltip to the right */
  .product-screen .product-actions button:last-child::after {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-5px);
  }
  .product-screen .product-actions button:last-child::before {
    left: auto;
    right: 16px;
  }
  .product-screen .product-actions button:last-child:hover::after,
  .product-screen .product-actions button:last-child:focus-visible::after {
    transform: translateX(0) translateY(0);
  }

  /* Content wrapper: fills the space between actions row and author bar */
  .product-screen .product-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0 42px 0;
  }

  /* Middle block: title / code / description — centered both axes */
  .product-screen .expanded-post__middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0 20px;
  }
  .product-screen .expanded-post__middle h2 {
    margin: 0;
    font-size: 32px;
    line-height: 38px;
    font-weight: 300;
  }
  .product-screen .expanded-post__middle h3 {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: var(--fw-bold);
  }
  .product-screen .expanded-post__middle p {
    margin: 16px 0 0;
    max-width: 100%;
  }

  /* Author pill: rounded profile link pinned near the bottom of the right column */
  .product-screen .seller-pill {
    flex-shrink: 0;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 32px;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-pill);
    padding: 12px 18px;
    background: #fff;
    transition: background 140ms ease, border-color 140ms ease;
  }

  .product-screen .seller-pill:hover {
    background: var(--bg-subtle);
    border-color: #aeb8c8;
  }

  .product-screen .seller-pill__initial {
    width: 46px;
    height: 46px;
    font-size: 22px;
  }

  /* ── Feed: single-column stack of expanded posts ─────────────────────────── */
  .product-screen__feed {
    display: grid;
    gap: 40px;
  }
}

/* ── Feed card popup: desktop 2-column layout (≥ 1024px) ───────────────────── */
/* Mirrors the single-page hero layout: left media, right content panel.        */
/* Mobile popup (bottom sheet) is completely unchanged.                         */
@media (min-width: 1024px) {
  /* Center the popup as a dialog instead of a bottom sheet */
  .fcp-backdrop {
    align-items: center;
    justify-content: center;
  }

  /* Dialog: 800px modal — same footprint as the single-page card */
  .fcp-sheet {
    width: 800px;
    max-width: calc(100% - 60px);
    height: auto;
    max-height: calc(100% - 80px);
    border-radius: 16px;
    box-shadow:
      0 24px 60px rgba(21, 28, 39, 0.18),
      0 4px  16px rgba(21, 28, 39, 0.10),
      0 0    0 1px rgba(21, 28, 39, 0.06);
  }

  /* Hide the mobile drag handle — not needed in a dialog */
  .fcp-sheet .fcp-handle { display: none; }

  /* Header: collapse to zero height — close button floats above the modal */
  .fcp-sheet .fcp-sheet__header {
    padding: 0;
    height: 0;
    overflow: visible;
  }

  /* Close button: top-right corner, matching the single-page design system */
  .fcp-sheet .fcp-close {
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(100,116,139,0.20);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    color: #64748b;
    z-index: 10;
  }
  .fcp-sheet .fcp-close:hover { background: #f1f5f9; color: #334155; }

  /* Body: expose its computed height to children so the image can fill it */
  .fcp-sheet .fcp-sheet__body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* expanded-post: fills the body, 2-column row — same as single-page */
  .fcp-sheet .expanded-post {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    border-radius: 16px;
    overflow: visible;
    margin-top: 0;
    box-shadow: none;
  }

  /* Left column: exactly 50%, 9:16 portrait, cover fill — same as single-page */
  .fcp-sheet .product-hero {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    height: auto;
    flex-shrink: 0;
    aspect-ratio: 9 / 16;
    min-height: unset;
    max-height: none;
    overflow: hidden;
    border-radius: 16px 0 0 16px;
    background-color: #f5f6f8;
    background-size: cover;
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
  }
  .fcp-sheet .product-hero:active { cursor: grabbing; }

  /* Slides: cover fills the 9:16 frame — same as single-page */
  .fcp-sheet .product-hero__slide {
    background-size: cover;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
  }

  /* Videos: cover fill */
  .fcp-sheet .product-hero__video { object-fit: cover; }

  /* Show carousel nav arrows */
  .fcp-sheet .product-hero__nav { display: grid; }

  /* Re-enable pointer events on nav / dots */
  .fcp-sheet .product-hero__nav,
  .fcp-sheet .product-hero__dots { pointer-events: auto; }

  /* Right column: exactly 50% — same as single-page */
  .fcp-sheet .expanded-post__right {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0 16px 16px 0;
    overflow: visible;
  }

  /* Actions row: pixel-for-pixel copy of single-page */
  .fcp-sheet .product-actions {
    flex-shrink: 0;
    background: #fff;
    border-top: none;
    border-bottom: none;
    padding: 32px 58px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .fcp-sheet .product-actions button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
    padding: 6px 8px;
    border-radius: 10px;
    transition: background 0.14s;
    cursor: pointer;
  }
  .fcp-sheet .product-actions button:hover { background: #f4f6f9; }

  .fcp-sheet .product-actions .product-actions__icon {
    width: 20px;
    height: 20px;
  }

  /* Hide text labels — icon-only, same as single-page */
  .fcp-sheet .product-actions button > span:not(.product-actions__comment-icon-wrap) {
    display: none;
  }

  /* Tooltip bubble (::after) — identical to single-page */
  .fcp-sheet .product-actions button[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    background: rgba(21, 28, 39, 0.88);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.01em;
    padding: 5px 11px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    opacity: 0;
    pointer-events: none;
    z-index: 60;
    transition: opacity 150ms ease, transform 150ms ease;
  }

  /* Tooltip caret (::before) */
  .fcp-sheet .product-actions button[aria-label]::before {
    content: "";
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    border: 5px solid transparent;
    border-bottom-color: rgba(21, 28, 39, 0.88);
    opacity: 0;
    pointer-events: none;
    z-index: 61;
    transition: opacity 150ms ease, transform 150ms ease;
  }

  /* Show on hover / focus */
  .fcp-sheet .product-actions button:hover::after,
  .fcp-sheet .product-actions button:focus-visible::after {
    opacity: 1; transform: translateX(-50%) translateY(0);
  }
  .fcp-sheet .product-actions button:hover::before,
  .fcp-sheet .product-actions button:focus-visible::before {
    opacity: 1; transform: translateX(-50%) translateY(0);
  }

  /* Edge guard — first button */
  .fcp-sheet .product-actions button:first-child::after { left: 0; transform: translateX(0) translateY(-5px); }
  .fcp-sheet .product-actions button:first-child::before { left: 16px; }
  .fcp-sheet .product-actions button:first-child:hover::after,
  .fcp-sheet .product-actions button:first-child:focus-visible::after { transform: translateX(0) translateY(0); }

  /* Edge guard — last button */
  .fcp-sheet .product-actions button:last-child::after { left: auto; right: 0; transform: translateX(0) translateY(-5px); }
  .fcp-sheet .product-actions button:last-child::before { left: auto; right: 16px; }
  .fcp-sheet .product-actions button:last-child:hover::after,
  .fcp-sheet .product-actions button:last-child:focus-visible::after { transform: translateX(0) translateY(0); }

  /* Content: fills remaining height — same padding as single-page */
  .fcp-sheet .product-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0 42px 0;
  }

  /* Middle block: title / category / description — same as single-page */
  .fcp-sheet .expanded-post__middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0 20px;
  }
  .fcp-sheet .expanded-post__middle h2 {
    margin: 0;
    font-size: 32px;
    line-height: 38px;
    font-weight: 300;
  }
  .fcp-sheet .expanded-post__middle h3 {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: var(--fw-bold);
  }
  .fcp-sheet .expanded-post__middle p {
    margin: 16px 0 0;
    max-width: 100%;
  }

  /* Seller pill: rounded and centred — same as single-page */
  .fcp-sheet .seller-pill {
    flex-shrink: 0;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 32px;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-pill);
    padding: 12px 18px;
    background: #fff;
    transition: background 140ms ease, border-color 140ms ease;
  }
  .fcp-sheet .seller-pill:hover {
    background: var(--bg-subtle);
    border-color: #aeb8c8;
  }
  .fcp-sheet .seller-pill__initial {
    width: 46px;
    height: 46px;
    font-size: 22px;
  }
}

/* ── Create sheet: desktop sizing & centering ───────────────────────────────── */
@media (min-width: 1024px) {
  /* Expanded step (page/catalog forms): stays centered as before */
  .create-sheet--expanded {
    width: 540px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── Start step: floating left panel (~15% larger than previous) ─────────── */
  .create-sheet--start {
    position: absolute;
    bottom: auto;
    left: 100px;
    right: auto;
    top: 40%;
    transform: translateY(-50%);
    width: 414px;             /* +15% from 360px */
    min-height: unset;
    border-radius: 24px;
    padding: 28px 26px 34px; /* scaled up ~15% from 24/20/28 */
    background: #fff;
    box-shadow:
      0 10px 40px rgba(21, 28, 39, 0.13),
      0 2px  10px rgba(21, 28, 39, 0.07),
      0 0   0 1px rgba(21, 28, 39, 0.06);
    animation: create-panel-in 230ms cubic-bezier(0.22, 0.7, 0.2, 1);
    overflow-y: visible;
  }

  /* Header: no divider; set position:static so close btn escapes to panel scope */
  .create-sheet--start .create-sheet__start-header {
    position: static;   /* close btn is now positioned relative to .create-sheet--start */
    min-height: unset;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 22px;
  }

  /* Close btn: absolute to the panel itself, pinned to true top-right corner */
  .create-sheet--start .create-sheet__close {
    top: 18px;
    right: 20px;
  }

  /* Cards stack vertically with slightly larger gap */
  .create-sheet--start .create-sheet__choices {
    flex-direction: column;
    gap: 12px;
    margin-top: 0;
  }

  /* ── Card: CSS-grid layout ─────────────────────────────────────────────────
     Column 1 (1fr): icon row then label row, stacked
     Column 2 (auto): chevron spans both rows, vertically centered            */
  .create-sheet--start .create-choice-card {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "icon chev"
      "label chev";
    column-gap: 14px;
    row-gap: 10px;
    padding: 20px 20px 22px 22px;
    border-radius: 18px;
    border: 1.5px solid var(--line);
    background: #fff;
    text-align: left;
    transition: background 140ms ease, border-color 140ms ease;
  }

  .create-sheet--start .create-choice-card:hover {
    background: var(--bg-subtle);
    border-color: #bac4d0;
  }

  /* Icon wrap: plain — no border, no background, no radius box */
  .create-sheet--start .create-choice-card__icon-wrap {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: auto;
    min-width: unset;
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
    justify-self: start;
    align-self: start;
  }

  .create-sheet--start .create-choice-card__icon-wrap img {
    width: 28px;
    height: 28px;
    display: block;
    object-fit: contain;
  }

  /* Label: stacked title + description */
  .create-sheet--start .create-choice-card__label {
    grid-area: label;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: unset;
    min-width: 0;
    align-self: start;
    align-items: flex-start;
    text-align: left;
  }

  .create-sheet--start .create-choice-card__title {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    color: #285261;
    line-height: 1.2;
    text-align: left;
  }

  .create-sheet--start .create-choice-card__desc {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-subtle, #6b7280);
    font-weight: 400;
    text-align: left;
  }

  /* Chevron: spans both grid rows, vertically centered to the whole card */
  .create-sheet--start .create-choice-card__chevron {
    grid-area: chev;
    display: block;
    align-self: center;
    color: #9ca3af;
    opacity: 0.55;
  }

  /* Safety: hide any stray bare span (mobile icon-label fallback) */
  .create-sheet--start .create-choice-card > span:not(.create-choice-card__label):not(.create-choice-card__icon-wrap):not(.create-choice-card__chevron) {
    display: none;
  }
}

/* ── Catalog Creation Page: desktop layout ────────────────────────────────────── */
/* On ≥1024px the page renders as a full-height screen with the card centered
   and the helper panel floating to its right, matching the reference exactly.     */

@media (min-width: 1024px) {
  /* Lift out of app__scroll's padding/overflow context and anchor to the full
     viewport so the form card centers visually, not after the left nav rail. */
  .cat-create-page {
    position: absolute;
    inset: 0;
    min-height: unset;
  }

  /* Canvas fills the anchored parent and keeps the form centered in the viewport.
     The helper panel is positioned separately so it cannot pull the card left. */
  .cat-create-page__canvas {
    position: relative;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 48px;
    gap: 0;
    min-height: unset;
  }

  /* Card: fixed 500 px wide, rounded with shadow — matches reference exactly. */
  .cat-create-page__card {
    flex: none;
    width: 500px;
    max-width: unset;
    border-radius: 22px;
    padding: 28px 38px 28px;
    box-shadow:
      0 2px 8px rgba(21, 28, 39, 0.05),
      0 8px 32px rgba(21, 28, 39, 0.10),
      0 0 0 1px rgba(21, 28, 39, 0.07);
  }

  /* Reveal right-side helper panel */
  .cat-create-page__helper {
    display: flex;
    flex-direction: column;
    gap: 28px;
    flex: none;
    width: 260px;
    position: absolute;
    left: min(calc(50% + 330px), calc(100% - 308px));
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ── Add Page popup: desktop modal override ──────────────────────────────────── */

@keyframes centered-modal-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% - 10px)) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%)              scale(1);    }
}

@media (min-width: 1024px) {
  .add-page-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: auto;
    right: auto;
    width: min(760px, 94vw);
    max-height: 82vh;
    border-radius: 20px;
    animation: centered-modal-in 220ms cubic-bezier(0.22, 0.7, 0.2, 1) both;
  }
}

/* Left-slide-in animation — keyframe must carry the translateY(-50%) centering
   so the element doesn't jump to its static position mid-animation.           */
@keyframes create-panel-in {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* ── Desktop card media: normalize all product/page cards to 4:5 ratio ──────── */
/* Covers: home feed, profile grids, manufacturer profile, search results,       */
/*         single-page feed below hero, catalog detail, shortlist detail,        */
/*         saved pages — any view using ProductCard or catalog-page__item.       */
/* Mobile ratios are unchanged (rules below are desktop-only).                   */
/* Aspect ratios are 9:16 everywhere — no desktop override needed. */

/* ── Desktop notifications popover ──────────────────────────────────────────
   Separate DOM element from the mobile bottom sheet (.notif-overlay).
   Only rendered when state.showNotificationPopover is true (≥1024px path).  */

/* Full-screen transparent backdrop — catches outside clicks to close.
   z-index 302 > all other overlays (300–301) so the popover is always
   the topmost layer, even if the profile-sheet-overlay is still in the
   DOM during the same render cycle.                                      */
.notif-popover-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 302;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* The floating card */
.notif-popover {
  width: 380px;
  max-height: 70vh;
  background: var(--bg);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  top: 72px;
  left: calc(50% - 230px);
  box-shadow: var(--shadow-medium), 0 0 0 1px rgba(0, 0, 0, 0.06);
  animation: notif-popover-in 0.18s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

/* Reset the reused NotificationsPanel (.notif-panel) inside the popover:
   strip mobile-specific sizing, animation, and rounded-top-only corners */
.notif-popover .notif-panel {
  width: 100%;
  max-height: none;
  flex: 1;
  min-height: 0;
  border-radius: 0;
  animation: none;
  box-shadow: none;
  padding-bottom: 0;
}

/* Hide the mobile drag-handle pill inside the popover */
.notif-popover .notif-panel::before {
  display: none;
}

/* Allow the list to scroll within the constrained popover height */
.notif-popover .notif-list {
  flex: 1;
  min-height: 0;
}

@keyframes notif-popover-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Profile 3-dots desktop popover (≥1024px) ────────────────────────────── */
/* Full-screen transparent overlay to catch outside clicks */
.profile-sheet-popover-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 302;
}

/* Floating compact popover anchored near the 3-dots icon.
   The 3-dots icon sits at ~viewport-center + 64px (right icon in top-actions).
   Popover width = 260px → left offset = 50% + 64 - 130 = calc(50% - 66px). */
.profile-sheet-popover {
  position: absolute;
  top: 72px;
  left: calc(50% + 30px);
  width: 260px;
  background: var(--bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-medium), 0 0 0 1px rgba(0, 0, 0, 0.06);
  animation: profile-popover-in 0.15s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

/* Tighten the list-item padding to suit a compact popover */
.profile-sheet-popover .profile-sheet__item {
  padding: 12px 16px;
  font-size: var(--fs-body-s);
}

@keyframes profile-popover-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Desktop Create-Page Flow  (≥1024px)
   Full-page view — not a modal/popup. Mobile styles above unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base rules: desktop-only elements are hidden on mobile ──────────────── */
.create-fp__inner        { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.create-fp__header-title { display: none; }
.create-fp__hcta         { display: none; }
.create-fp__dt-dz-wrap   { display: none; }
.create-fp__upload-right { display: none; }
.create-fp__strip-hd     { display: none; }
.create-fp__strip-foot   { display: none; }
/* .create-fp__det-slider-col has no display:none — it shows on mobile too (stacked at top) */

@media (min-width: 1024px) {

  /* ── Full-page container — white, no backdrop/modal ──────────────────── */
  .create-fullpage {
    background: #f4f6f9;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow: hidden;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: fp-enter 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .create-fp__inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    animation: none;
    max-height: none;
  }

  /* ── 3-column sticky header ──────────────────────────────────────────── */
  .create-fp__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 28px;
    height: 60px;
    flex-shrink: 0;
    border-bottom: 1px solid #edf0f5;
    background: #fff;
  }

  .create-fp__header-side--right {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
  }

  .create-fp__header-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1a5c58;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Hide mobile in-body title (title lives in the header on desktop) */
  .create-fp__page-title { display: none; }

  /* Hide mobile sticky footer CTA (CTA lives in the header on desktop) */
  .create-fp__footer { display: none; }

  /* Desktop header CTA button */
  .create-fp__hcta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #1a5c58;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px 8px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    white-space: nowrap;
  }
  .create-fp__hcta:hover:not(:disabled) { background: #154f4b; }
  .create-fp__hcta.is-disabled,
  .create-fp__hcta:disabled { opacity: 0.42; cursor: default; }
  .create-fp__hcta svg { display: block; flex-shrink: 0; }

  /* ── Scrollable body ─────────────────────────────────────────────────── */
  .create-fp__body {
    padding: 28px 32px;
  }

  /* ── Step 1 upload: 2-column grid ───────────────────────────────────── */
  .create-fp__upload-shell {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: flex-start;
  }

  .create-fp__upload-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
  }

  /* No uploads yet: show desktop dropzone, hide mobile content */
  .create-fp__upload-shell:not(.has-uploads) .create-fp__dt-dz-wrap {
    display: flex;
    flex-direction: column;
  }
  .create-fp__upload-shell:not(.has-uploads) .create-fp__mb-wrap { display: none; }

  /* Has uploads: show the Swiper/slider, hide the dropzone */
  .create-fp__upload-shell.has-uploads .create-fp__dt-dz-wrap { display: none; }
  .create-fp__upload-shell.has-uploads .create-fp__mb-wrap {
    display: block;
    max-width: 420px;   /* prevent slide card from stretching across the full column */
    width: 100%;
    align-self: center; /* horizontally center within the flex-column upload-left */
  }

  /* Dropzone: taller on desktop */
  .create-fp__dt-dz-wrap .create-upload-dropzone {
    min-height: 380px;
    margin-top: 0;
    flex: 1;
    gap: 16px;
  }

  /* "or" divider line */
  .create-fp__dz-or {
    display: block;
    color: #8fa0bb;
    font-size: 12.5px;
    position: relative;
    text-align: center;
  }
  .create-fp__dz-or::before,
  .create-fp__dz-or::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 60px;
    height: 1px;
    background: #3a4558;
  }
  .create-fp__dz-or::before { right: calc(100% + 10px); }
  .create-fp__dz-or::after  { left:  calc(100% + 10px); }

  .create-fp__dz-hint {
    display: block;
    color: #7a8baa;
    font-size: 12px;
    margin-top: 2px;
  }

  /* Right column: guide + selected files cards */
  .create-fp__upload-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
  }

  .create-fp__guide-card,
  .create-fp__sel-card {
    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 12px;
    padding: 16px 18px;
  }

  .create-fp__card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a2230;
    margin: 0 0 12px;
    display: block;
  }

  .create-fp__guide-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .create-fp__guide-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #444;
    line-height: 1.45;
  }

  .create-fp__guide-item--ok::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1a5c58 url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4 L3.5 6.5 L9 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  }

  .create-fp__guide-item--info {
    color: #999;
    font-size: 12.5px;
  }

  .create-fp__guide-item--info::before {
    content: "ℹ";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f0f2f5;
    color: #999;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 18px;
    text-align: center;
  }

  .create-fp__sel-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .create-fp__sel-badge {
    background: #f0f3f7;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
  }

  .create-fp__sel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 220px;
    overflow-y: auto;
  }

  .create-fp__sel-item {
    display: grid;
    grid-template-columns: 38px 1fr 22px;
    gap: 8px;
    align-items: center;
  }

  .create-fp__sel-thumb {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: #f0f2f5;
    flex-shrink: 0;
  }

  .create-fp__sel-thumb img,
  .create-fp__sel-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .create-fp__sel-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: rgba(255,255,255,0.92);
    pointer-events: none;
  }

  .create-fp__sel-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    min-width: 0;
  }

  .create-fp__sel-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a2230;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  .create-fp__sel-meta {
    font-size: 11.5px;
    color: #aab2c0;
    display: block;
  }

  .create-fp__sel-del {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f5f6f8;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #aab2c0;
    flex-shrink: 0;
    transition: background 0.14s, color 0.14s;
  }
  .create-fp__sel-del:hover { background: #fee2e2; color: #e53e3e; }

  .create-fp__sel-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0f3f7;
    font-size: 13px;
    color: #aab2c0;
  }
  .create-fp__sel-total strong { font-weight: 700; color: #1a2230; }

  /* ── Media strip below the 2-column area ─────────────────────────────── */
  .create-fp__strip-wrap {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #edf0f5;
  }

  .create-fp__strip-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .create-fp__strip-label {
    font-size: 14px;
    font-weight: 600;
    color: #1a2230;
  }

  .create-fp__strip-hint {
    font-size: 12px;
    color: #aab2c0;
  }

  .create-fp__strip-foot {
    display: block;
    font-size: 12px;
    color: #aab2c0;
    margin-top: 10px;
    padding: 8px 14px;
    background: #f9fafb;
    border-radius: 8px;
  }

  .create-fp__strip-wrap .create-media-strip {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }

  .create-fp__strip-wrap .create-media-list__title { display: none; }

  .create-fp__strip-wrap .create-media-list {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }

  /* ── Step 2 details: 30/70 split — slider left, form right ──────────── */
  .create-fp__details-shell {
    display: grid;
    grid-template-columns: 30fr 70fr;
    gap: 28px;
    align-items: flex-start;
  }

  /* Left column: Swiper preview — sticky while form scrolls */
  .create-fp__det-slider-col {
    position: sticky;
    top: 0;
    align-self: flex-start;
    overflow: hidden;
  }

  /* Make the Swiper fill the column width cleanly */
  .create-fp__det-slider-col .create-media-swiper {
    padding-bottom: 30px !important;
  }

  .create-fp__det-slider-col .create-media-card__preview {
    border-radius: var(--radius-md, 12px);
  }

  /* Right column: form */
  .create-fp__details-body {
    min-width: 0;
    padding-bottom: 28px;
  }

  .create-fp__details-body .create-page-form   { margin-top: 0; }
  .create-fp__details-body .create-page-form label { text-align: left; }
  .create-fp__details-body .create-tags-help   { text-align: left; }
  .create-fp__details-body .create-tag-list    { justify-content: flex-start; }

  /* ── Success step ─────────────────────────────────────────────────────── */
  .create-fp__body--centered { min-height: 320px; }

  .create-publish-success__actions {
    flex-direction: row;
    gap: 12px;
    width: auto;
  }

  .create-publish-success__view,
  .create-publish-success__done {
    width: auto;
    min-width: 130px;
    padding: 0 28px;
  }

  .create-publish-success__body { max-width: 360px; }

  /* ── Catalog creation: Step 1 (Details) ──────────────────────────────── */
  .create-fp__body--cat-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 32px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  /* Constrain form width and left-align everything inside it */
  .create-fp__body--cat-details .cat-dt-form {
    width: 100%;
    max-width: 520px;
  }

  /* In-body page title — keep centered above form */
  .create-fp__body--cat-details .create-fp__page-title {
    display: none; /* header carries the title on desktop */
  }

  /* Error message */
  .create-fp__body--cat-details .create-submit-error {
    width: 100%;
    max-width: 520px;
    margin-bottom: 16px;
  }

  /* Field label: left-aligned inside the constrained form */
  .create-fp__body--cat-details .create-fp__field-label {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #5a6478;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0 0 8px;
  }

  /* Input: full-width pill stays, but slightly larger on desktop */
  .create-fp__body--cat-details .create-fp__input {
    font-size: 15px;
    padding: 13px 22px;
  }

  /* Character counter: right-align */
  .create-fp__body--cat-details .create-fp__counter {
    text-align: right;
    margin-top: 4px;
    font-size: 12px;
    color: #aab2c0;
  }

  /* Section label */
  .create-fp__body--cat-details .create-fp__section-label {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #5a6478;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 24px 0 10px;
  }

  /* Visibility toggle: left-align within the form */
  .create-fp__body--cat-details .create-fp__visibility-toggle {
    max-width: none;
    margin: 0;
    display: inline-flex;
  }

  /* Hint text: left-aligned */
  .create-fp__body--cat-details .create-fp__hint {
    text-align: left;
    margin-top: 12px;
    line-height: 1.6;
    font-size: 13px;
    color: #8fa0bb;
  }
  .create-fp__body--cat-details .create-fp__hint strong {
    color: #1a5c58;
  }

  /* ── Catalog creation: Step 2 (Select Pages) ─────────────────────────── */
  .create-fp__body--cat-pages {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px;
    width: 100%;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  .create-fp__body--cat-pages .create-fp__page-title { display: none; }

  .create-fp__body--cat-pages .create-sheet__hint {
    text-align: left;
    font-size: 13.5px;
    color: #8fa0bb;
    margin: 0 0 16px;
  }

  /* Page rows: bigger thumbnails, crisper look on desktop */
  .create-fp__body--cat-pages .create-posted-list {
    gap: 8px;
  }

  .create-fp__body--cat-pages .create-posted-row {
    grid-template-columns: 56px 1fr 28px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  }

  .create-fp__body--cat-pages .create-posted-row:hover {
    background: #f5f8ff;
    border-color: #c5d3e8;
  }

  .create-fp__body--cat-pages .create-posted-row.is-selected {
    background: #edf7f6;
    border-color: #1a5c58;
    box-shadow: 0 0 0 1px #1a5c5822;
  }

  .create-fp__body--cat-pages .create-posted-row__thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
  }

  .create-fp__body--cat-pages .create-posted-row__text strong {
    font-size: 14.5px;
  }

  .create-fp__body--cat-pages .create-posted-row__text small {
    font-size: 12.5px;
  }

  /* Checkmark circle: teal brand colour on desktop */
  .create-fp__body--cat-pages .create-posted-row__check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid #c5d3e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: transparent;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }

  .create-fp__body--cat-pages .create-posted-row.is-selected .create-posted-row__check {
    background: #1a5c58;
    border-color: #1a5c58;
    color: #fff;
  }

  .create-fp__body--cat-pages .create-posted-search-row { margin-bottom: 16px; }
  .create-posted-summary { padding: 12px 32px; }
}

/* ── Enquiry sheet — desktop modal (≥1024px) ─────────────────────────────── */
@media (min-width: 1024px) {
  .enquiry-sheet {
    position: absolute;
    bottom: auto;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, 94vw);
    max-height: 84vh;
    border-radius: 20px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
    animation: enquiry-modal-in 0.2s cubic-bezier(0.22, 0.7, 0.2, 1) both;
  }
  /* Hide mobile drag handle */
  .enquiry-sheet__handle { display: none; }
  .enquiry-sheet__header { padding: 24px 28px 16px; }
  .enquiry-sheet__body   { padding: 0 28px 12px; }
  .enquiry-product-card  { margin-bottom: 22px; }
  .enquiry-product-card__thumb { width: 76px; height: 76px; }
  .enquiry-sheet__footer { padding: 16px 28px 24px; }
  .enquiry-cancel { flex: 0 0 auto; padding: 12px 32px; }
  .enquiry-submit { flex: 0 0 auto; padding: 12px 40px; }
}

/* ── Share sheet — desktop modal ──────────────────────────────────────────── */
@media (min-width: 1024px) {
  .share-sheet {
    position: absolute;
    bottom: auto;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(500px, 94vw);
    max-height: 82vh;
    border-radius: 20px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
    animation: share-modal-in 0.2s cubic-bezier(0.22, 0.7, 0.2, 1) both;
  }
  .share-sheet__handle { display: none; }
  .share-sheet__header { padding: 22px 24px 16px; }
  .share-sheet__copy-row { padding: 0 24px 18px; }
  .share-sheet__section { padding: 18px 24px 0; }
  .share-sheet__more-row { justify-content: flex-start; gap: 10px; }
}

/* ── Unified Share Popup ──────────────────────────────────────────────────────── */
.share-popup-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: share-popup-fade-in 0.15s ease;
}
.share-popup-backdrop.no-anim { animation: none !important; }
@keyframes share-popup-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.share-popup {
  background: var(--bg);
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  animation: share-popup-slide-up 0.2s ease;
}
.share-popup.no-anim { animation: none !important; }
@keyframes share-popup-slide-up {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.share-popup__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 20px 0;
}
.share-popup__header-info { flex: 1; min-width: 0; }
.share-popup__title { font-size: 18px; font-weight: var(--fw-semibold); color: var(--text); margin: 0; line-height: 1.3; }
.share-popup__subtitle { font-size: 13px; color: var(--text-muted); margin: 3px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.share-popup__close {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-subtle); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted);
  transition: background 0.12s;
}
.share-popup__close:hover { background: var(--line); }

.share-popup__tabs {
  display: flex; padding: 14px 20px 0;
  border-bottom: 1px solid var(--line);
}
.share-popup__tab {
  flex: 1; padding: 8px 4px 10px; border: none; background: none;
  font-size: 14px; font-weight: var(--fw-medium); color: var(--text-muted);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.share-popup__tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }

.share-popup__body {
  flex: 1; overflow-y: auto; padding: 14px 20px 20px;
  display: flex; flex-direction: column; gap: 12px;
}

/* Chips */
.share-popup__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.share-popup__chip {
  display: flex; align-items: center; gap: 4px;
  background: #e8f0ff; color: var(--brand);
  border-radius: var(--radius-pill); padding: 4px 8px 4px 10px;
  font-size: 13px;
}
.share-popup__chip-name { font-weight: var(--fw-medium); }
.share-popup__chip-remove {
  background: none; border: none; cursor: pointer;
  color: var(--brand); font-size: 16px; line-height: 1;
  padding: 0 2px; opacity: 0.7; transition: opacity 0.12s;
}
.share-popup__chip-remove:hover { opacity: 1; }

/* Search input */
.share-popup__search {
  width: 100%; box-sizing: border-box;
  padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 14px; font-family: inherit;
  color: var(--text); background: var(--bg-subtle);
  outline: none; transition: border-color 0.15s;
}
.share-popup__search:focus { border-color: var(--brand); background: var(--bg); }
.share-popup__search::placeholder { color: var(--text-muted); }

/* User list */
.share-popup__user-list {
  overflow-y: auto; max-height: 220px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg);
}
.share-popup__user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.share-popup__user-row:last-child { border-bottom: 0; }
.share-popup__user-row:hover,
.share-popup__user-row.is-selected { background: var(--bg-subtle); }

.share-popup__user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.share-popup__user-avatar--initials {
  background: #e8f0ff; color: var(--brand);
  font-size: 13px; font-weight: var(--fw-semibold);
  display: flex; align-items: center; justify-content: center;
}
.share-popup__user-info { flex: 1; min-width: 0; }
.share-popup__user-name { display: block; font-size: 14px; font-weight: var(--fw-medium); color: var(--text); }
.share-popup__user-email { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }

.share-popup__user-check {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.12s;
}
.share-popup__user-check.is-checked { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Empty / hint / status text */
.share-popup__empty,
.share-popup__hint { padding: 20px; text-align: center; font-size: 13px; color: var(--text-muted); margin: 0; }
.share-popup__error { font-size: 13px; color: var(--error); margin: 0; }
.share-popup__success { font-size: 13px; color: var(--success); font-weight: var(--fw-medium); margin: 0; }

/* CTA button */
.share-popup__cta {
  width: 100%; padding: 13px;
  background: var(--brand); color: #fff;
  border: none; border-radius: 12px;
  font-size: 15px; font-weight: var(--fw-semibold);
  cursor: pointer; transition: opacity 0.15s;
  font-family: inherit;
}
.share-popup__cta:disabled { opacity: 0.35; cursor: not-allowed; }
.share-popup__cta:not(:disabled):hover { opacity: 0.88; }

/* Link tab */
.share-popup__link-section { display: flex; flex-direction: column; gap: 16px; }
.share-popup__link-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.share-popup__link-label { font-size: 15px; font-weight: var(--fw-medium); color: var(--text); }
.share-popup__link-hint { font-size: 13px; color: var(--text-muted); margin: 3px 0 0; }

/* Toggle switch */
.share-popup__link-toggle {
  position: relative; width: 44px; height: 26px;
  border-radius: 13px; background: var(--line-strong);
  border: none; cursor: pointer; transition: background 0.2s;
  flex-shrink: 0; padding: 0;
}
.share-popup__link-toggle.is-on { background: var(--brand); }
.share-popup__link-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.share-popup__link-toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); display: block;
}
.share-popup__link-toggle.is-on .share-popup__link-toggle-knob { transform: translateX(18px); }

.share-popup__link-row { display: flex; gap: 8px; align-items: center; }
.share-popup__link-input {
  flex: 1; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  font-size: 13px; color: var(--text-muted);
  background: var(--bg-subtle); font-family: inherit; outline: none;
}
.share-popup__link-copy {
  padding: 10px 16px; background: var(--bg-subtle);
  border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; font-weight: var(--fw-medium);
  cursor: pointer; color: var(--text); white-space: nowrap;
  transition: background 0.12s; font-family: inherit;
}

/* ── Profile: top-level tab bar (Pages | Catalogs | Shared with me) ─────────── */
/* Scoped to .profile-main-tabs so it NEVER touches .tab-switcher--segmented     */

.profile-main-tabs.tab-switcher {
  border: 1.5px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  background: #ffffff;
  padding: 4px;
  gap: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  justify-content: center;
  max-width: fit-content;
  margin: 20px auto 32px auto;
  flex-wrap: wrap;
}

.profile-main-tabs .tab-switcher__item {
  border-radius: 999px;
  border-bottom: none !important;
  font-size: 14px;
  padding: 10px 24px;
  color: var(--text-muted);
  flex: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.profile-main-tabs .tab-switcher__item.is-active {
  background: #163640;
  color: #fff;
}

/* Red badge on the profile tab */
.profile-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  margin-left: 8px;
  background: #ff0000;
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}

/* ── Shared-with-me content panel — fully isolated under .profile-shared-view ── */

/* Inner segmented toggle (Catalogs | Shortlists) */
.profile-shared-view .swm-seg {
  display: flex;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  width: fit-content;
  margin: 14px auto 16px;
}
.profile-shared-view .swm-seg__btn {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 6px 20px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.profile-shared-view .swm-seg__btn.is-active {
  background: #dfe5f0;
  color: var(--text);
}

/* Unread badge on inner segment buttons */
.profile-shared-view .swm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #e53935;
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* "New" ribbon on unseen shared cards */
.profile-shared-view .swm-new-ribbon {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  z-index: 2;
  pointer-events: none;
  letter-spacing: 0.03em;
}

/* Shared cards need relative positioning to anchor the "New" ribbon */
.profile-shared-view .swm-catalog-card,
.profile-shared-view .swm-sl-card {
  position: relative;
}
.share-popup__link-copy:hover { background: var(--line); }

/* ── Profile pill header ─────────────────────────────────────────────────────── */

/* Mobile: three icon-only buttons spread across the row */
.profile-pill {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.profile-pill__btn {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s ease;
}

.profile-pill__btn:hover {
  opacity: 0.8;
}

/* Icon wrapper — always relative so dot/badge can be absolute children */
.profile-pill__icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.profile-pill__icon-wrap img {
  width: 40px;
  height: 40px;
  display: block;
}

/* Red dot on notifications icon */
.profile-pill__icon-wrap--dot::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff2f2f;
  pointer-events: none;
}

/* Numeric badge is absolute inside the icon-wrap */
.profile-pill__icon-wrap--rel {
  position: relative;
}

/* Hide text labels and counts on mobile — icon only */
.profile-pill__label,
.profile-pill__count {
  display: none;
}

/* Handle line (@ username below display name) */
.profile-header__handle {
  margin: 2px 0 0;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

/* ── Desktop pill (≥ 1024px) ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {

  /* Pill container: rounded white card with shadow */
  .profile-pill {
    width: 500px;
    max-width: 100%;
    justify-content: space-between;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.07);
    border-radius: 999px;
    box-shadow: 0 4px 24px rgba(18, 30, 52, 0.10), 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 5px 22px;
    gap: 32px;
  }

  /* Each button becomes a flex row: icon · label · count */
  .profile-pill__btn {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    background: none;
  }

  /* Larger icons inside pill */
  .profile-pill__icon-wrap img {
    width: 36px;
    height: 36px;
  }

  /* 3-dots button: fixed width so the icon is always fully visible */
  .profile-pill__btn--menu {
    margin-left: 40px;
    gap: 0;
    width: 52px;
    justify-content: center;
  }
  /* Show text labels */
  .profile-pill__label {
    display: inline;
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    white-space: nowrap;
    line-height: 1;
  }

  /* Red count like (2) */
  .profile-pill__count {
    display: inline;
    color: #e53935;
    font-size: 15px;
    font-weight: var(--fw-semibold);
    line-height: 1;
  }

  /* Slightly larger dot on desktop to match the bigger icon */
  .profile-pill__icon-wrap--dot::after {
    width: 8px;
    height: 8px;
    right: 4px;
    top: 2px;
  }

  /* Larger avatar on desktop */
  .profile-header__avatar {
    width: 110px;
    height: 110px;
  }

  /* Handle line slightly larger on desktop */
  .profile-header__handle {
    font-size: var(--fs-body-l);
    margin-top: 4px;
  }

  /* Bio max-width tighter on wide screens */
  .profile-header__bio {
    max-width: 560px;
  }
}

/* ── Desktop Messages: 2-pane layout (≥ 1024px) ─────────────────────────────── */
@media (min-width: 1024px) {

  /* Lift the screen out of app__scroll's padding-tunnel and anchor it to the
     viewport, offsetting the 80px left nav rail — same technique as .catalog-page
     and .sl-detail-page so the chat area is never hidden behind the nav dock. */
  .msgs-screen {
    position: absolute;
    inset: 0 0 0 100px;
    height: auto;         /* height determined by top/bottom inset, not 100% */
    flex-direction: row;  /* 2-pane side-by-side */
    overflow: hidden;
  }

  /* Left panel: fixed width, always visible */
  .msgs-panel--left {
    width: 400px;
    flex: none;
    border-right: 1px solid var(--line);
    display: flex !important;
  }

  /* Right panel: fills remaining width, always visible */
  .msgs-panel--right {
    flex: 1;
    min-width: 0;
    display: flex !important;
  }

  /* Override mobile "hide left when thread open" rule */
  .msgs-screen--thread .msgs-panel--left {
    display: flex !important;
    flex: none;
  }

  /* Right panel always flex (no "none" on desktop) */
  .msgs-screen--thread .msgs-panel--right {
    display: flex !important;
    flex: 1;
  }

  /* Left panel header: search-style — slightly more breathing room */
  .msgs-panel__header {
    padding: 16px 20px 14px;
  }

  /* Search bar: pill-shaped on desktop */
  .msgs-search-wrap {
    margin: 10px 14px;
    padding: 8px 12px;
    background: var(--bg-subtle, #f5f7fa);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill, 999px);
  }

  /* Active conversation: brand-color left bar + tinted bg */
  .convo-item--active {
    background: color-mix(in srgb, var(--brand, #1e4650) 7%, transparent);
    box-shadow: inset 3px 0 0 var(--brand, #1e4650);
  }
  .convo-item--active:hover {
    background: color-mix(in srgb, var(--brand, #1e4650) 10%, transparent);
  }

  /* Hide back button on desktop (both panels always visible) */
  .thread-back {
    display: none;
  }

  /* Thread header: slightly more padding on desktop */
  .thread-header {
    padding: 14px 20px;
  }

  /* Thread messages: more padding on desktop */
  .thread-messages {
    padding: 20px 24px;
  }

  /* Composer: more breathing room */
  .thread-input-row {
    padding: 12px 20px;
  }

  /* Thread empty state: subtle background fills nicely */
  .thread-empty {
    background: var(--bg-subtle, #f5f7fa);
  }
}

/* ── Product screen desktop: hover-reveal arrows + counter replaces dots ──── */

/* Counter: always visible on mobile; on desktop the dot row is replaced by it */
@media (min-width: 1024px) {
  /* Dots are redundant on desktop when the counter is shown */
  .product-screen .product-hero__dots { display: none; }
}

/* Arrows: transparent by default on desktop product-screen, fade in on hover.
   Scoped to (hover: hover) so touch-primary devices keep current behaviour. */
@media (min-width: 1024px) and (hover: hover) {
  .product-screen .product-hero__nav {
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  /* Reveal on hover OR keyboard focus anywhere inside the hero */
  .product-screen .product-hero:hover .product-hero__nav,
  .product-screen .product-hero:focus-within .product-hero__nav {
    opacity: 1;
  }
}

/* ── Public Profile Action Pill ────────────────────────────────────────────── */

.mfr-profile-pill {
  position: sticky;
  top: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.07);
  border-radius: 999px;
  box-shadow: 0 4px 24px rgba(18, 30, 52, 0.10), 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 5px 22px;
  width: 500px;
  max-width: 100%;
  margin: 12px auto 8px auto;
  gap: 32px;
}

.mfr-profile-pill__btn {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px 0 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.mfr-profile-pill__btn:hover {
  opacity: 0.8;
}

.mfr-profile-pill__btn img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}


/* Contact List Overlay & Items */
.mfr-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #f7f9fa;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.mfr-contact-item:hover {
  background: #f0f2f5;
  transform: translateY(-1px);
}

.mfr-contact-item__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mfr-contact-item__icon--phone {
  background: rgba(46, 117, 243, 0.1);
  color: #2e75f3;
}

.mfr-contact-item__icon--email {
  background: rgba(243, 156, 18, 0.1);
  color: #f39c12;
}

.mfr-contact-item__icon--whatsapp {
  background: rgba(37, 211, 102, 0.1);
  color: #25d366;
}

.mfr-contact-item__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  text-align: left;
}

.mfr-contact-item__label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mfr-contact-item__value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .sl-detail-page .catalog-page__circle-btn,
  .catalog-page .catalog-page__circle-btn {
    display: none;
  }

  .catalog-page__controls {
    padding: 12px 32px;
    justify-content: flex-end;
  }
}

/* MESSAGES DESKTOP REDESIGN (Floating Cards & Pill Shapes) */
@media (min-width: 1024px) {
  .msgs-screen {
    background: transparent;
    padding: 24px;
    gap: 24px;
  }

  .msgs-panel--left {
    background: #fff;
    border-radius: 24px;
    border: 1px solid var(--line);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    height: 100%;
    width: 320px;
    padding-top: 12px;
  }

  .msgs-panel__header {
    border-bottom: none;
    padding: 16px 24px 8px;
  }
  
  .msgs-title {
    font-weight: 500;
  }

  .msgs-search-wrap {
    margin: 8px 24px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
  }

  .convo-item {
    margin: 4px 16px;
    padding: 12px 16px;
    border-bottom: none;
    border-radius: 16px;
  }

  .convo-item--active {
    background: #f0f3f6 !important;
    box-shadow: none !important;
  }
  
  .convo-item--active:hover {
    background: #e8ecf1 !important;
  }

  .convo-avatar {
    background: #163640; 
  }

  .thread-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: transparent;
    border-left: none; 
  }

  .thread-header {
    background: #fff;
    border-radius: 999px;
    border: 1px solid var(--line);
    margin-bottom: 16px;
    padding: 12px 24px;
    flex: none;
  }

  .thread-messages {
    background: #fff;
    border-radius: 24px 24px 0 0;
    border: 1px solid var(--line);
    border-bottom: none;
    margin: 0;
    flex: 1;
    padding: 24px;
  }

  .thread-composer-wrap {
    background: #fff;
    border-radius: 0 0 24px 24px;
    border: 1px solid var(--line);
    border-top: none;
    padding: 16px 24px 24px;
    flex: none;
  }

  .thread-input-row {
    background: transparent;
    border: none;
    padding: 0;
  }

  .thread-input {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    padding: 14px 24px;
  }

  .thread-empty {
    background: #fff !important;
    border-radius: 24px;
    border: 1px solid var(--line);
    height: 100%;
  }

  .bottom-nav__items {
    gap: 26px;
    width: 62px;
  }
}