/* Build 22 Booth dashboard, seller profile, and catalog polish. */
.account-notification-drawer > .notification-sync-status {
  width: 46px;
  min-height: 46px;
  margin: 8px auto;
  padding: 8px;
  grid-template-columns: 1fr;
  border-color: transparent;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.account-notification-drawer > .notification-sync-status .communication-sync-spinner {
  width: 25px;
  height: 25px;
}

body.profile-transfer-open { overflow: hidden; }
.profile-transfer-overlay { z-index: 6900; }
.profile-transfer-card { max-width: 420px; }
.profile-transfer-spinner {
  width: 54px;
  height: 54px;
  margin: 10px;
  border-width: 5px;
}

.profile-stripe-connection-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px;
  border: 1px solid rgba(99, 91, 255, 0.22); border-radius: 18px; padding: 15px 16px;
  background: linear-gradient(145deg, #fff 0%, #f8f7ff 100%);
  box-shadow: 0 10px 28px rgba(50, 43, 120, 0.08);
  box-sizing: border-box; overflow: visible; color: #171329;
}
.profile-stripe-connection-summary { min-width: 0; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; }
.profile-stripe-connection-copy { min-width: 0; display: grid; gap: 3px; overflow-wrap: anywhere; }
.profile-stripe-connection-copy > small { color: #635bff; font: 900 0.64rem/1.2 system-ui, sans-serif; letter-spacing: .09em; }
.profile-stripe-connection-copy > strong { color: #171329; font: 900 1rem/1.15 system-ui, sans-serif; }
.profile-stripe-connection-copy > span { color: #514b60; font: 700 .76rem/1.4 system-ui, sans-serif; white-space: normal; }
.profile-stripe-live-pill { display: none; color: #11704c; font-weight: 900; }
.is-ready .profile-stripe-live-pill { display: inline-flex; }
.profile-stripe-connection-actions { min-width: 0; display: flex; align-items: stretch; justify-content: flex-end; gap: 10px; overflow: visible; }
.profile-stripe-connection-actions > button { box-sizing: border-box; max-width: 100%; }
.profile-stripe-state-toggle { display: none; }
.profile-stripe-connect-action { min-width: 140px; min-height: 46px; border: 0; border-radius: 13px; padding: 0 18px; color: #fff; background: #635bff; box-shadow: 0 9px 20px rgba(99, 91, 255, .22); font-weight: 900; }
.is-ready .profile-stripe-connect-action { display: none; }
.profile-stripe-connection-card > .profile-stripe-dashboard-status {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  min-height: 1.2rem;
  margin: -2px 0 0;
  padding: 0 4px 2px;
  box-sizing: border-box;
  overflow: visible;
  color: #453e59 !important;
  font: 750 0.76rem/1.45 system-ui, sans-serif;
  text-align: left;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
.profile-stripe-connection-card > .profile-stripe-dashboard-status:empty { display: none; }
.is-dashboard-address.is-missing-address { margin-top: 0 !important; }
.is-dashboard-address.is-missing-address .buyer-address-visual { min-height: 126px !important; aspect-ratio: auto !important; }
.is-dashboard-address.is-missing-address .buyer-address-artwork { grid-template-columns: 48px 1fr minmax(210px,31%) !important; grid-template-rows: 1fr !important; gap: 11px; padding: 12px !important; }
.is-dashboard-address.is-missing-address .buyer-address-pin-mark { width: 46px !important; grid-row: auto !important; }
.is-dashboard-address.is-missing-address .buyer-address-seller-copy { padding: 0 !important; }
.is-dashboard-address.is-missing-address .buyer-address-privacy-copy { min-height: 0 !important; padding: 0 0 0 12px !important; }
@media (max-width:700px) {
  .profile-dashboard-heading .profile-dashboard-scanner-action { min-width: min(188px,52vw); min-height: 54px; }
  .profile-stripe-connection-card { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
  .profile-stripe-connection-actions,.profile-stripe-connect-action { width: 100%; }
  .profile-stripe-connection-actions { justify-content: stretch; }
  .profile-stripe-connection-actions > button,
  .profile-stripe-connect-action { width: 100%; min-width: 0; }
  .profile-stripe-connection-summary { grid-template-columns: 42px minmax(0, 1fr); }
  .profile-stripe-connection-summary > .profile-stripe-live-pill { grid-column: 2; justify-self: start; }
  .profile-stripe-connection-card > .profile-stripe-dashboard-status { margin-top: 0; padding-inline: 2px; }
  .is-dashboard-address.is-missing-address .buyer-address-visual { min-height: 164px !important; }
  .is-dashboard-address.is-missing-address .buyer-address-artwork { grid-template-columns: 44px 1fr !important; grid-template-rows: auto auto !important; gap: 6px 10px; }
  .is-dashboard-address.is-missing-address .buyer-address-pin-mark { width: 42px !important; grid-row: 1/3 !important; }
  .is-dashboard-address.is-missing-address .buyer-address-seller-copy p { display: none; }
  .is-dashboard-address.is-missing-address .buyer-address-privacy-copy { grid-column: 2; border: 0; border-top: 1px solid #ffd2b5; padding-top: 7px !important; }
}

@media (max-width: 760px) {
  /* WebKit can briefly discard and repaint text inside scroll-snap cards when
     content-visibility changes during a tap. Keep native iPhone Reel cards
     painted; image decoding still stays bounded by the preload observer. */
  html.native-ios-shell body #nationalFeed .national-feed-card.reel-card {
    content-visibility: visible;
    contain: layout paint;
    contain-intrinsic-size: none;
  }
}

.profile-stripe-dashboard-button {
  min-height: 66px;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  border-color: rgba(125, 116, 255, 0.48);
  border-radius: 18px;
  padding: 11px 14px;
  color: #fff;
  background: radial-gradient(circle at 12% 0%, rgba(139, 132, 255, 0.34), transparent 38%), linear-gradient(132deg, #171329 0%, #312a72 58%, #4b43bc 100%);
  box-shadow: 0 14px 30px rgba(44, 36, 116, 0.24);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.profile-stripe-dashboard-button:hover {
  border-color: rgba(171, 165, 255, 0.72);
  box-shadow: 0 18px 38px rgba(44, 36, 116, 0.32);
}

.profile-stripe-dashboard-button .profile-stripe-dashboard-mark {
  background: linear-gradient(145deg, #817aff, #635bff);
  box-shadow: 0 8px 18px rgba(6, 3, 31, 0.28);
}

.profile-stripe-dashboard-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.profile-stripe-dashboard-button strong {
  color: inherit;
  font-size: 1rem;
}

.profile-stripe-dashboard-copy small {
  overflow: visible;
  color: rgba(255, 255, 255, 0.88);
  font: 750 0.69rem/1.35 system-ui, sans-serif;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.profile-stripe-dashboard-button .profile-stripe-live-pill {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  border: 1px solid rgba(141, 255, 200, 0.25);
  border-radius: 999px;
  padding: 0 8px;
  color: #92f0bd;
  background: rgba(16, 126, 81, 0.22);
  font: 900 0.61rem/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
}

.profile-stripe-dashboard-button .profile-stripe-dashboard-arrow {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.08rem;
}

.profile-stripe-connection-card.is-ready {
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 13px;
  border-color: rgba(99, 91, 255, 0.28);
  background: linear-gradient(145deg, #fff 0%, #f8f7ff 100%);
}

.profile-stripe-connection-card.is-ready .profile-stripe-connection-summary { display: none; }
.profile-stripe-connection-card.is-ready .profile-stripe-connection-actions,
.profile-stripe-connection-card .profile-stripe-dashboard-button { width: 100%; }
.profile-stripe-connection-card .profile-stripe-dashboard-button { margin: 0; }
.profile-stripe-connection-card .profile-stripe-connection-actions {
  flex-wrap: wrap;
  overflow: visible;
}
.profile-stripe-connection-card .profile-stripe-connection-actions > :is(p, small, [aria-live]) {
  width: 100%;
  min-width: 0;
  flex: 1 0 100%;
  margin: 8px 2px 0;
  overflow: visible;
  color: #453e59 !important;
  font: 750 0.74rem/1.45 system-ui, sans-serif;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

@media (max-width: 560px) {
  .profile-stripe-dashboard-button {
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    min-height: 76px;
  }

  .profile-stripe-dashboard-copy small { font-size: 0.67rem; }

  .profile-stripe-connection-card .profile-stripe-dashboard-button {
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    grid-template-areas:
      "mark copy arrow"
      "mark live arrow";
    column-gap: 10px;
    row-gap: 5px;
    min-height: 82px;
    padding: 12px;
  }

  .profile-stripe-connection-card .profile-stripe-dashboard-button .profile-stripe-dashboard-mark { grid-area: mark; }
  .profile-stripe-connection-card .profile-stripe-dashboard-button .profile-stripe-dashboard-copy { grid-area: copy; }
  .profile-stripe-connection-card .profile-stripe-dashboard-button .profile-stripe-live-pill { grid-area: live; justify-self: start; }
  .profile-stripe-connection-card .profile-stripe-dashboard-button .profile-stripe-dashboard-arrow { grid-area: arrow; justify-self: end; }
}

/* The Booth owner dashboard uses the public storefront's full-frame visual language. */
#buyerProfileScreen.is-booth-profile:not([hidden]) {
  --booth-profile-inline-gutter: clamp(12px, 3vw, 26px);
  position: relative;
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns:
    minmax(var(--booth-profile-inline-gutter), 1fr)
    minmax(0, calc(1160px - var(--booth-profile-inline-gutter) - var(--booth-profile-inline-gutter)))
    minmax(var(--booth-profile-inline-gutter), 1fr);
  padding-inline: 0;
}
#buyerProfileScreen.is-booth-profile > :not(.profile-dashboard-header):not(.profile-booth-hub) {
  grid-column: 2;
  width: 100%;
  min-width: 0;
}
#buyerProfileScreen.is-booth-profile > .profile-dashboard-header {
  position: absolute; inset-block: 0 auto;
  inset-inline: max(12px, calc(env(safe-area-inset-left) + 8px)) max(12px, calc(env(safe-area-inset-right) + 8px));
  z-index: 20; width: auto; max-width: none; min-width: 0; min-height: 82px; margin: 0;
  padding: max(15px, calc(env(safe-area-inset-top) + 9px)) 0 8px;
  background: transparent; pointer-events: none;
}
#buyerProfileScreen.is-booth-profile > .profile-dashboard-header > .sell-logo { display: none; }
#buyerProfileScreen.is-booth-profile > .profile-dashboard-header > .profile-dashboard-header-actions {
  grid-column: 1 / -1; width: 100%; min-width: 0; justify-content: space-between; pointer-events: none;
}
#buyerProfileScreen.is-booth-profile > .profile-dashboard-header #backBuyerHomeButton,
#buyerProfileScreen.is-booth-profile > .profile-dashboard-header .profile-dashboard-avatar-button {
  width: 46px; height: 46px; display: grid; flex: 0 0 46px; border: 1px solid rgba(255,255,255,.72);
  color: #fff; background: rgba(8, 15, 25, 0.18); box-shadow: 0 8px 24px rgba(4,8,15,.22);
  -webkit-backdrop-filter: blur(10px) saturate(.92); backdrop-filter: blur(10px) saturate(.92); pointer-events: auto;
}
#buyerProfileScreen.is-booth-profile > .profile-dashboard-header .profile-dashboard-avatar-button { padding: 3px; }
#buyerProfileScreen.is-booth-profile > .profile-dashboard-header .profile-dashboard-avatar-button > img {
  width: 100%; height: 100%; border: 0; border-radius: inherit; object-fit: cover;
}
#buyerProfileScreen.is-booth-profile > .profile-booth-hub {
  width: 100%;
  max-width: none;
  grid-column: 1 / -1;
  grid-template-columns:
    minmax(var(--booth-profile-inline-gutter), 1fr)
    minmax(0, calc(1160px - var(--booth-profile-inline-gutter) - var(--booth-profile-inline-gutter)))
    minmax(var(--booth-profile-inline-gutter), 1fr);
  margin: 0;
}
#buyerProfileScreen.is-booth-profile > .profile-booth-hub > :not(.profile-dashboard-booth-card) {
  grid-column: 2;
  width: 100%;
  min-width: 0;
}
#buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card {
  position: relative; width: 100%; max-width: none; grid-column: 1 / -1; justify-self: stretch; overflow: hidden;
  margin: 0; border: 0; border-radius: 0; padding: 0;
  background: #0b111b; box-shadow: none;
}
#buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero {
  min-height: clamp(320px, 38vw, 430px); grid-template-columns: 88px minmax(0,1fr) auto auto;
  align-items: end; gap: 16px; border-radius: 0;
  padding: max(104px, calc(env(safe-area-inset-top) + 86px)) clamp(22px,3.2vw,34px) clamp(24px,3.2vw,34px);
  background: linear-gradient(145deg, #fb7a27, #e84605);
}
#buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero.has-background::after {
  background: linear-gradient(180deg, rgba(5, 9, 15, 0.03) 8%, rgba(5, 9, 15, 0.1) 42%, rgba(5, 9, 15, 0.9) 100%);
}
#buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero > .booth-brand-background {
  object-position: center; filter: none;
}
#buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero > .dashboard-booth-avatar {
  width: 88px; height: 88px; border: 3px solid rgba(255,255,255,.94); box-shadow: 0 10px 26px rgba(4,8,15,.3);
}
#buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero > span,
#buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero.has-background > span {
  width: min(100%,680px); max-width: 100%; gap: 4px; border: 0; border-radius: 0; padding: 0;
  background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
#buyerProfileScreen.is-booth-profile .dashboard-booth-profile-bar.is-booth-hero .dashboard-booth-profile-eyebrow { display: none; }
#buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero > span strong {
  color: #fff; font-size: clamp(1.55rem,3.6vw,2.2rem); letter-spacing: -.035em; line-height: 1.02;
  text-shadow: 0 3px 14px rgba(4,8,15,.76);
}
#buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero > span :is(em,small) {
  color: rgba(255,255,255,.9); text-shadow: 0 2px 9px rgba(4,8,15,.82);
}
#buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero .dashboard-booth-description {
  display: -webkit-box; max-width: 640px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  text-overflow: ellipsis; white-space: normal;
}
#buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-social > span { border-color: rgba(255,255,255,.58); }
#buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-edit-toggle {
  min-height: 42px; align-self: end; border: 1px solid rgba(255,255,255,.76); border-radius: 999px; padding: 0 16px;
  color: #fff; background: rgba(8,15,25,.24); box-shadow: 0 8px 24px rgba(4,8,15,.18);
  -webkit-backdrop-filter: blur(10px) saturate(.92); backdrop-filter: blur(10px) saturate(.92);
}

@media (max-width: 700px) {
  #buyerProfileScreen.is-booth-profile > .profile-dashboard-header {
    inset-inline-start: max(18px, calc(env(safe-area-inset-left) + 10px));
    inset-inline-end: max(18px, calc(env(safe-area-inset-right) + 10px));
    width: auto; min-height: 72px; padding-inline: 0;
  }
  #buyerProfileScreen.is-booth-profile > .profile-dashboard-header #backBuyerHomeButton,
  #buyerProfileScreen.is-booth-profile > .profile-dashboard-header .profile-dashboard-avatar-button {
    width: 42px; height: 42px; flex-basis: 42px;
  }
  #buyerProfileScreen.is-booth-profile > .profile-booth-hub {
    width: 100%; margin: 0;
  }
  #buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card { border-radius: 0; box-shadow: none; }
  #buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero {
    min-height: clamp(270px, 78vw, 340px); grid-template-columns: 64px minmax(0,1fr) auto;
    align-content: end; gap: 10px; border-radius: 0; padding: max(82px, calc(env(safe-area-inset-top) + 68px)) 15px 16px;
  }
  #buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero > .dashboard-booth-avatar {
    width: 64px; height: 64px;
  }
  #buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero > span { width: 100%; padding: 0; }
  #buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero > span strong { font-size: clamp(1.3rem,6vw,1.7rem); }
  #buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-social { display: none; }
  #buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-edit-toggle {
    grid-column: 3; width: auto; min-width: 0; padding: 0 12px;
  }
}
@media (max-width: 430px) {
  #buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero { grid-template-columns: 64px minmax(0,1fr); }
  #buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-edit-toggle {
    grid-column: 1 / -1; width: fit-content; justify-self: end;
  }
}

.seller-store-business-contact {
  display: grid; justify-items: center; gap: 5px; margin: -5px 0 12px;
}
.seller-store-message-business {
  min-height: 43px; border: 0; border-radius: 999px; padding: 0 22px; color: #fff;
  background: linear-gradient(100deg,#1769c2,#0b4f9e); box-shadow: 0 9px 22px rgba(19,88,167,.24);
  font: 900 .78rem/1 system-ui,sans-serif; cursor: pointer;
}
.seller-store-message-business:disabled { opacity: .7; cursor: wait; }
.seller-store-message-status { min-height: 1em; margin: 0; color: #5f6978; font: 650 .66rem/1.3 system-ui,sans-serif; text-align: center; }
.profile-booth-analytics-product { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.profile-booth-analytics-product:is(:hover,:focus-visible) {
  border-color: #a9c9ef; background: #f3f8ff; outline: none; box-shadow: 0 0 0 3px rgba(23,105,194,.12);
}

.buyer-avatar-upload-button {
  width: 100%; min-height: 58px; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center;
  gap: 11px; border: 1px solid #cfd8e6; border-radius: 15px; padding: 9px 12px; color: #0b294d;
  background: linear-gradient(135deg,#f7fbff,#fff); box-shadow: 0 8px 18px rgba(11,41,77,.08); text-align: left; cursor: pointer;
}
.buyer-avatar-upload-button > span:first-child {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff;
  background: linear-gradient(135deg,#2869c2,#174f9d); font-size: 1.2rem; font-weight: 900;
}
.buyer-avatar-upload-button > span:last-child { min-width: 0; display: grid; gap: 2px; }
.buyer-avatar-upload-button strong { font-size: .86rem; }
.buyer-avatar-upload-button small { color: #687386; font-size: .7rem; }
.buyer-avatar-upload-status { min-height: 0; margin: 0; text-align: center; }

/* Build 23 responsive storefront catalog and categorized Booth directory. */
body #sellerStoreScreen { width: min(100%, 1120px); }
html body #sellerStoreScreen .store-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
html body #sellerStoreScreen:has(.seller-store-banner.is-booth-profile) .store-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body #sellerStoreScreen .store-product-card {
  min-width: 0; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 9px;
  border-radius: 16px; padding: 8px; background: #fff; box-shadow: 0 8px 24px rgba(11,24,48,.07);
}
body #sellerStoreScreen .store-product-card > img { aspect-ratio: 1; border-radius: 12px; }
body #sellerStoreScreen .store-product-copy { align-content: start; gap: 7px; padding: 2px 3px 5px; }
body #sellerStoreScreen .store-product-copy h3 { font-size: .95rem; }
body #sellerStoreScreen .store-price-row { gap: 5px; }
body #sellerStoreScreen .store-price-row span { min-width: 0; border-radius: 9px; padding: 7px; }
body #sellerStoreScreen .store-price-row strong { font-size: .88rem; }

.booth-directory-screen[hidden] { display: none !important; }
.booth-directory-screen {
  width: min(100%, 1120px); display: grid; gap: 18px; margin: 0 auto; padding-bottom: 38px; text-align: left;
}
.booth-directory-header {
  box-sizing: border-box; width: 100vw; margin-left: calc(50% - 50vw);
  min-height: 98px; display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: center; gap: 14px;
  border: 0; border-radius: 0; padding: max(15px,calc(env(safe-area-inset-top) + 8px)) max(20px,env(safe-area-inset-right)) 15px max(20px,env(safe-area-inset-left));
  background: radial-gradient(circle at 88% -20%,rgba(255,255,255,.28),transparent 42%),linear-gradient(135deg,#c83e00,#f45b08 58%,#ff7a22);
  box-shadow: 0 16px 38px rgba(171,57,0,.2);
}
.booth-directory-back {
  width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
  color: #fff; background: rgba(255,255,255,.12); cursor: pointer; backdrop-filter: blur(9px);
}
.booth-directory-back svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.booth-directory-header > span { min-width: 0; display: grid; gap: 4px; }
.booth-directory-header small { color: #fff1e7; font: 900 .65rem/1 system-ui,sans-serif; letter-spacing: .11em; }
.booth-directory-header h1 { margin: 0; color: #fff; font: 800 clamp(1.55rem,4vw,2.25rem)/1 var(--font-profile-title,system-ui,sans-serif); letter-spacing: -.03em; }
.booth-directory-filters {
  display: flex; align-items: end; justify-content: space-between; gap: 16px; border: 1px solid #e1e8f0; border-radius: 20px;
  padding: 15px 17px; background: linear-gradient(135deg,#f5f9fe,#fff); box-shadow: 0 9px 24px rgba(11,24,48,.05);
}
.booth-directory-filters label { min-width: min(100%,420px); display: grid; gap: 7px; }
.booth-directory-filters label > span { color: #172c49; font: 850 .82rem/1.2 system-ui,sans-serif; }
.booth-directory-filters select {
  width: 100%; min-height: 44px; border: 1px solid #c7d5e5; border-radius: 12px; padding: 0 40px 0 12px;
  color: #0b294d; background: #fff; font: 750 .82rem/1 system-ui,sans-serif;
}
.booth-directory-filters p { margin: 0 0 9px; color: #627084; font: 700 .74rem/1.3 system-ui,sans-serif; }
.booth-directory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.booth-directory-card {
  min-width: 0; overflow: hidden; border: 1px solid #dfe6ee; border-radius: 20px; background: #fff;
  box-shadow: 0 10px 26px rgba(11,24,48,.08); cursor: pointer; transition: transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease;
}
.booth-directory-card:is(:hover,:focus-within) { border-color: #9cbfe5; transform: translateY(-2px); box-shadow: 0 15px 32px rgba(11,55,100,.14); }
.booth-directory-cover { position: relative; height: 190px; background: #e9eef4; }
.booth-directory-cover-photo { width: 100%; height: 100%; display: block; object-fit: cover; }
.booth-directory-cover::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg,transparent,rgba(5,14,26,.62)); pointer-events: none; }
.booth-directory-avatar {
  position: absolute; z-index: 2; right: 14px; bottom: -25px; width: 58px; height: 58px; border: 3px solid #fff; border-radius: 999px;
  background: #fff; box-shadow: 0 7px 18px rgba(4,15,29,.2); object-fit: cover;
}
.booth-directory-cover > span {
  position: absolute; z-index: 2; left: 13px; bottom: 12px; max-width: calc(100% - 92px); overflow: hidden; border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px; padding: 6px 9px; color: #fff; background: rgba(7,25,46,.48); backdrop-filter: blur(8px);
  font: 850 .64rem/1 system-ui,sans-serif; text-overflow: ellipsis; white-space: nowrap;
}
.booth-directory-card-copy { display: grid; gap: 8px; padding: 14px 14px 15px; }
.booth-directory-card-copy h2 { min-width: 0; margin: 0; padding-right: 58px; color: #102946; font: 850 1.05rem/1.08 var(--font-profile-title,system-ui,sans-serif); overflow-wrap: anywhere; }
.booth-directory-card-copy p { margin: 0; color: #697487; font: 650 .7rem/1.35 system-ui,sans-serif; }
.booth-directory-card-copy > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #667286; font: 700 .68rem/1.2 system-ui,sans-serif; }
.booth-directory-card-copy > span strong { color: #cc550d; }
.booth-directory-card-copy button {
  min-height: 39px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(105deg,#1769c2,#0b4f9e);
  font: 900 .72rem/1 system-ui,sans-serif; cursor: pointer;
}
.booth-directory-empty {
  grid-column: 1/-1; min-height: 220px; display: grid; place-content: center; gap: 8px; border: 1px dashed #b9cbe0;
  border-radius: 20px; padding: 28px; color: #67758a; background: #f7fafe; text-align: center;
}
.booth-directory-empty strong { color: #15375e; font-size: 1rem; }
.booth-directory-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; }
.booth-directory-pagination button {
  min-width: 98px; min-height: 42px; border: 1px solid #bad0e8; border-radius: 999px; color: #0c559f; background: #f4f9ff;
  font: 850 .74rem/1 system-ui,sans-serif; cursor: pointer;
}
.booth-directory-pagination button:disabled { opacity: .42; cursor: default; }
.booth-directory-pagination span { color: #607087; font: 800 .7rem/1 system-ui,sans-serif; }

@media (max-width: 700px) {
  html body #sellerStoreScreen .store-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  html body #sellerStoreScreen:has(.seller-store-banner.is-booth-profile) .store-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body #sellerStoreScreen .store-product-card { border-radius: 13px; padding: 6px; }
  body #sellerStoreScreen .store-product-card > img { border-radius: 10px; }
  body #sellerStoreScreen .store-product-copy { gap: 5px; padding: 1px 2px 4px; }
  body #sellerStoreScreen .store-product-copy h3 { font-size: .82rem; }
  body #sellerStoreScreen .store-price-row span { padding: 6px 5px; }
  body #sellerStoreScreen .store-price-row small,body #sellerStoreScreen .store-product-copy > small,body #sellerStoreScreen .store-product-copy p { font-size: .62rem; }
  body #sellerStoreScreen .store-price-row strong { font-size: .76rem; }
  .booth-directory-screen { width: min(calc(100vw - 24px),520px); gap: 14px; }
  .booth-directory-header { min-height: 86px; border-radius: 0; padding-right: max(15px,env(safe-area-inset-right)); padding-left: max(15px,env(safe-area-inset-left)); }
  .booth-directory-filters { display: grid; align-items: stretch; gap: 7px; border-radius: 17px; padding: 13px; }
  .booth-directory-filters label { min-width: 0; }
  .booth-directory-filters p { margin: 0; }
  .booth-directory-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .booth-directory-cover { height: clamp(205px,58vw,280px); }
}

/* Reel search must always expose an obvious way back to the product feed. */
body #nationalFeed .feed-search {
  z-index: 2;
  width: min(410px, calc(100vw - 20px));
  gap: 11px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 22px;
  padding: 12px;
  background: linear-gradient(145deg,rgba(255,252,248,.99),rgba(255,238,224,.99));
  box-shadow: 0 22px 60px rgba(22,15,10,.36), inset 0 1px rgba(255,255,255,.9);
}
body #nationalFeed.is-searching .national-feed-header { z-index: 4700; isolation: isolate; }
/* Predictive Home matches stay above ZIP, radius, and list-view controls. */
body .home-header:has(.header-search-field:focus-within),
body .home-header:has(.header-search-suggestions:not([hidden])) { z-index: 4700; isolation: isolate; }

/* If a mobile browser still shrinks its visual viewport, keep persistent
   navigation at the physical screen bottom so the keyboard covers it. */
@media (max-width:760px) {
  body.has-footer-keyboard-overlay .home-bottom-navigation {
    transform: translate3d(0,var(--persistent-footer-keyboard-offset),0)!important;
  }
  body.has-footer-keyboard-overlay #nationalFeed .national-feed-nav {
    transform: translate3d(-50%,var(--persistent-footer-keyboard-offset),0)!important;
  }

  /* Text-entry dialogs use the actual visual space above the native keyboard.
     Their cards scroll internally, so reviews, reports, offers, pickup forms,
     and listing fields stay readable without lifting persistent navigation. */
  body.has-editor-keyboard [role="dialog"].is-editor-keyboard-dialog {
    --editor-dialog-safe-height: var(--editor-keyboard-safe-height, 100dvh);
  }
  body.has-editor-keyboard .offer-confirm-modal.is-editor-keyboard-dialog,
  body.has-editor-keyboard .standard-review-modal.is-editor-keyboard-dialog,
  body.has-editor-keyboard .question-reply-modal.is-editor-keyboard-dialog {
    inset: var(--editor-keyboard-safe-top, 0) 0 auto;
    height: var(--editor-dialog-safe-height);
    max-height: var(--editor-dialog-safe-height);
    place-items: end center;
    overflow: hidden;
    padding: 8px 8px 0;
  }
  body.has-editor-keyboard .offer-confirm-modal.is-editor-keyboard-dialog > .offer-confirm-card,
  body.has-editor-keyboard .standard-review-modal.is-editor-keyboard-dialog > .standard-review-card,
  body.has-editor-keyboard .question-reply-modal.is-editor-keyboard-dialog > .question-reply-card {
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 18px 96px;
  }
  body.has-editor-keyboard
    :is(.feed-question-panel, .reel-question-bubble).is-editor-keyboard-dialog {
    position: fixed !important;
    inset:
      calc(var(--editor-keyboard-safe-top, 0px) + 8px)
      8px
      auto !important;
    width: auto !important;
    height: calc(var(--editor-keyboard-safe-height, 100dvh) - 16px) !important;
    min-height: 0 !important;
    max-height: calc(var(--editor-keyboard-safe-height, 100dvh) - 16px) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    transform: none !important;
  }
  body.has-editor-keyboard [role="dialog"].is-editor-keyboard-dialog :is(input, textarea, select, [contenteditable="true"]) {
    scroll-margin-block: 20px 96px;
  }
  body.has-editor-keyboard #marketplaceReviewModal .marketplace-review-card {
    width: min(100%, 500px);
    border-radius: 20px 20px 0 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  body.has-editor-keyboard #marketplaceReviewComment {
    min-height: 132px;
    font-size: 16px;
  }

  /* One keyboard contract for every remaining text-entry sheet. The native
     shells intentionally overlay the keyboard so persistent navigation stays
     anchored; focused dialog cards therefore consume the measured safe
     viewport and scroll their own content instead of hiding the composer. */
  body.has-editor-keyboard
    [role="dialog"].is-editor-keyboard-dialog:not(#messageConversation) {
    box-sizing: border-box;
    min-height: 0 !important;
    inset: var(--editor-keyboard-safe-top, 0px) 0 auto !important;
    height: var(--editor-keyboard-safe-height, 100dvh) !important;
    max-height: var(--editor-keyboard-safe-height, 100dvh) !important;
    overflow: hidden !important;
    scroll-padding-block: 18px 112px;
  }
  body.has-editor-keyboard
    [role="dialog"].is-editor-keyboard-dialog:not(#messageConversation)
    > :is([class$="-card"], [class*="-card "]) {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 18px 112px;
    -webkit-overflow-scrolling: touch;
  }
  body.has-editor-keyboard .is-editor-keyboard-dialog
    :is(
      .message-compose-toolbar,
      .offer-confirm-actions,
      .question-input-bubble,
      .question-reply-field,
      .reel-comment-composer,
      .reel-comment-reply,
      input,
      textarea,
      select,
      [contenteditable="true"]
    ) {
    scroll-margin-block: 18px 112px;
  }
  body.has-native-message-keyboard
    #messageCenterScreen
    .message-conversation.is-mobile-dialog-open {
    scroll-padding-block-end: 112px;
  }
  body.has-native-message-keyboard
    #messageCenterScreen
    .message-conversation.is-mobile-dialog-open
    :is(.message-compose-wrap, .message-transaction-card:focus-within) {
    scroll-margin-block-end: 112px;
  }
}

/* The product Reel remains full-screen while Capacitor overlays the native
   keyboard. Move the existing offer action row as one unit into the measured
   visual viewport; never detach the field from its Send Offer control or add
   another fixed footer. The value is an absolute transform recalculated from
   the unshifted footer edge, so duplicate native/VisualViewport events cannot
   compound the offset. */
body #nationalFeed.is-national-offer-keyboard-open .national-feed-track {
  scroll-snap-type: none;
}

body #nationalFeed.is-national-offer-keyboard-open
  .national-feed-card.is-national-offer-keyboard-card
  .national-card-footer {
  transform: translate3d(
    0,
    var(--national-offer-keyboard-translate-y, 0px),
    0
  );
  transition: none;
  will-change: transform;
}

body #nationalFeed.is-national-offer-keyboard-open
  .national-feed-card.is-national-offer-keyboard-card
  .national-offer-box {
  scroll-margin-block: 8px calc(16px + env(safe-area-inset-bottom));
}

/* Personal seller payments: a compact status card, not a promotional banner.
   Runtime state, test-mode routing, control IDs, and Stripe actions stay owned
   by the existing handlers; this layer only makes on/off state unmistakable. */
body .profile-stripe-connection-card {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  gap: 10px;
  margin: 0;
  border: 1px solid #dfe4ea !important;
  border-left: 5px solid #ef5b16 !important;
  border-radius: 16px !important;
  padding: 13px 14px !important;
  color: #172033 !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(23,32,51,.08) !important;
}
body .profile-stripe-connection-card:is(.is-ready,.is-connected) {
  border-color: #cfe5d8 !important;
  border-left-color: #168553 !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(20,90,57,.08) !important;
}
body .profile-stripe-connection-card .profile-stripe-connection-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent !important;
}
body .profile-stripe-connection-card .profile-stripe-dashboard-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff !important;
  background: #ef5b16 !important;
  box-shadow: none !important;
  font: 900 1rem/1 system-ui,sans-serif;
}
body .profile-stripe-connection-card:is(.is-ready,.is-connected) .profile-stripe-dashboard-mark {
  background: #168553 !important;
}
body .profile-stripe-connection-card .profile-stripe-connection-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
body .profile-stripe-connection-card .profile-stripe-connection-copy > small {
  color: #8d3e17 !important;
  font: 900 .61rem/1.1 system-ui,sans-serif;
  letter-spacing: .09em;
}
body .profile-stripe-connection-card:is(.is-ready,.is-connected) .profile-stripe-connection-copy > small {
  color: #116a43 !important;
}
body .profile-stripe-connection-card .profile-stripe-connection-copy > strong {
  color: #172033 !important;
  font: 900 1rem/1.15 system-ui,sans-serif;
  letter-spacing: -.015em;
}
body .profile-stripe-connection-card .profile-stripe-connection-copy > span {
  color: #606b79 !important;
  font: 650 .73rem/1.35 system-ui,sans-serif;
  overflow-wrap: anywhere;
}
body .profile-stripe-connection-card .profile-stripe-live-pill {
  display: none;
  border: 0;
  border-radius: 999px;
  padding: 5px 8px;
  color: #116a43 !important;
  background: #e8f7ef !important;
  font: 900 .59rem/1 system-ui,sans-serif;
  letter-spacing: .08em;
}
body .profile-stripe-connection-card:is(.is-ready,.is-connected) .profile-stripe-live-pill {
  display: inline-flex;
}
body .profile-stripe-connection-card .profile-stripe-connection-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  background: transparent !important;
}
body .profile-stripe-connection-card .profile-stripe-state-toggle {
  min-width: 78px;
  min-height: 42px;
  margin: 0;
}
body .profile-stripe-connection-card .profile-stripe-connect-action {
  width: 100%;
  min-height: 42px;
  margin: 0;
  border: 0;
  border-radius: 11px;
  padding: 0 16px;
  color: #fff !important;
  background: #ef5b16 !important;
  box-shadow: none !important;
  font: 900 .82rem/1 system-ui,sans-serif;
}
body .profile-stripe-connection-card .profile-stripe-dashboard-button {
  width: 100%;
  min-height: 46px;
  grid-column: 1 / -1;
  grid-template-columns: 32px minmax(0,1fr) auto;
  gap: 9px;
  margin: 0;
  border: 1px solid #d7e5dd;
  border-radius: 11px;
  padding: 7px 10px;
  color: #172033 !important;
  background: #f8fbf9 !important;
  box-shadow: none !important;
  text-align: left;
}
body .profile-stripe-connection-card .profile-stripe-dashboard-button .profile-stripe-dashboard-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}
body .profile-stripe-connection-card .profile-stripe-dashboard-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
body .profile-stripe-connection-card .profile-stripe-dashboard-copy strong {
  color: #172033 !important;
  font: 900 .8rem/1.15 system-ui,sans-serif;
}
body .profile-stripe-connection-card .profile-stripe-dashboard-copy small {
  color: #68736f !important;
  font: 650 .65rem/1.25 system-ui,sans-serif;
  white-space: normal;
  overflow-wrap: anywhere;
}
body .profile-stripe-connection-card .profile-stripe-dashboard-button > .profile-stripe-live-pill {
  display: none !important;
}
body .profile-stripe-connection-card :is(.profile-stripe-connect-action,.profile-stripe-dashboard-button)[hidden] {
  display: none !important;
}
body .profile-stripe-connection-card .profile-stripe-dashboard-status {
  min-height: 0;
  margin: 0;
  border: 0;
  padding: 0;
  color: #68736f !important;
  background: transparent !important;
  font: 650 .68rem/1.3 system-ui,sans-serif;
  text-align: left;
}
body .profile-stripe-connection-card .profile-stripe-dashboard-status:empty {
  display: none;
}
@media (max-width:560px) {
  body .profile-stripe-connection-card {
    gap: 9px;
    padding: 12px !important;
  }
  body .profile-stripe-connection-card .profile-stripe-connection-summary {
    grid-template-columns: 36px minmax(0,1fr) auto;
    gap: 9px;
  }
  body .profile-stripe-connection-card .profile-stripe-dashboard-mark {
    width: 36px;
    height: 36px;
  }
  body .profile-stripe-connection-card .profile-stripe-connection-actions {
    grid-template-columns: minmax(72px,auto) minmax(0,1fr);
  }
  body .profile-stripe-connection-card .profile-stripe-dashboard-button {
    width: 100%;
    margin-inline: 0;
  }
}

/* The mascot payment art is decorative; copy and controls remain responsive
   HTML so neither mobile card depends on coordinates baked into an image. */
body #profileCardPaymentsPanel.profile-stripe-connection-card,
body .profile-booth-stripe-card-slot {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
body #profileCardPaymentsPanel .profile-stripe-mascot-banner {
  box-sizing: border-box;
  max-width: 100%;
}
body #profileCardPaymentsPanel .profile-stripe-mascot-connect {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: none;
}
body #profileCardPaymentsPanel .profile-stripe-mascot-dashboard {
  width: 100%;
  transform: translate(-50%,-50%);
}
body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-mascot-banner {
  aspect-ratio: 2.7 / 1;
  border: 1px solid rgba(255,154,42,.42);
  background: linear-gradient(105deg,#fff 0%,#fff8ef 72%,#fff2e3 100%);
  box-shadow: 0 12px 24px rgba(13,35,55,.16), 0 8px 20px rgba(255,120,25,.16);
  cursor: pointer;
}
body #profileCardPaymentsPanel .profile-stripe-banner-copy {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: clamp(196px,29%,250px);
  left: clamp(205px,32%,340px);
  min-width: 0;
  display: grid;
  gap: 6px;
  transform: translateY(-50%);
  color: #fff;
  text-shadow: 0 2px 4px rgba(89,36,5,.45);
  pointer-events: none;
}
body #profileCardPaymentsPanel .profile-stripe-banner-copy strong {
  overflow-wrap: anywhere;
  font: 950 clamp(1.2rem,3.5vw,2.65rem)/.98 system-ui,sans-serif;
  letter-spacing: -.035em;
}
body #profileCardPaymentsPanel .profile-stripe-banner-copy small {
  font: 700 clamp(.78rem,1.75vw,1.35rem)/1.15 system-ui,sans-serif;
}
body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-banner-copy {
  display: none;
}
body #profileCardPaymentsPanel .profile-stripe-connect-action {
  right: max(4.3%,16px);
  z-index: 3;
  min-height: 44px;
  max-width: 27%;
}
body #profileCardPaymentsPanel .profile-stripe-connect-action:focus-visible {
  outline: 3px solid #102f4a;
  outline-offset: 4px;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-button {
  inset: 0;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  border: 0;
  border-radius: inherit;
  padding: 3px max(22px,calc(env(safe-area-inset-right) + 16px)) 0 16px;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-button:is(:hover,:active,:focus-visible) {
  transform: none !important;
  box-shadow: none !important;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-button:focus-visible {
  outline: 3px solid #0f69e8;
  outline-offset: -5px;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-button:active .profile-stripe-dashboard-cue {
  transform: scale(.96);
  box-shadow: 0 2px 0 rgba(6,25,41,.34),0 5px 10px rgba(31,39,44,.18);
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-cue {
  flex: 0 0 auto;
  width: clamp(48px,9.5vw,72px);
  min-width: 48px;
  min-height: 48px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid #071a2b;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg,#183a55 0%,#071f34 100%);
  box-shadow: 0 5px 0 rgba(6,25,41,.34),0 10px 18px rgba(31,39,44,.22);
  transition: transform .12s ease,box-shadow .12s ease;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-arrow {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform: none;
  font: 700 clamp(1.6rem,5vw,2.6rem)/1 system-ui,sans-serif;
}

@media (max-width:700px) {
  body #profileCardPaymentsPanel:not(.is-ready):not(.is-connected) .profile-stripe-mascot-banner {
    min-height: 200px;
    aspect-ratio: auto;
  }
  body #profileCardPaymentsPanel:not(.is-ready):not(.is-connected) .profile-stripe-mascot-connect {
    width: auto;
    height: 72%;
    object-fit: contain;
    object-position: left top;
  }
  body #profileCardPaymentsPanel .profile-stripe-banner-copy {
    top: 26px;
    right: 16px;
    left: 44%;
    gap: 4px;
    transform: none;
  }
  body #profileCardPaymentsPanel .profile-stripe-banner-copy strong {
    font-size: clamp(1.3rem,7vw,1.8rem);
  }
  body #profileCardPaymentsPanel .profile-stripe-banner-copy small {
    font-size: clamp(.78rem,3.8vw,1rem);
  }
  body #profileCardPaymentsPanel .profile-stripe-connect-action {
    top: auto;
    right: 16px;
    bottom: 17px;
    left: 16px;
    width: auto;
    max-width: none;
    min-height: 48px;
    transform: none;
  }
  body #profileCardPaymentsPanel .profile-stripe-connect-action:is(:hover,:focus-visible) {
    transform: translateY(-2px);
  }
  body #profileCardPaymentsPanel .profile-stripe-connect-action:active {
    transform: translateY(2px);
  }
  body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-mascot-banner {
    aspect-ratio: 2.7 / 1;
    min-height: 0;
  }
  body #profileCardPaymentsPanel .profile-stripe-dashboard-button {
    padding-right: max(16px,calc(env(safe-area-inset-right) + 12px));
  }
  body #profileCardPaymentsPanel .profile-stripe-dashboard-cue {
    width: 48px;
  }
}

/* Personal seller payments use approved mascot artwork as presentation only.
   All actions remain real, accessible HTML buttons above the artwork. */
body #profileCardPaymentsPanel.profile-stripe-connection-card {
  display: block;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body #profileCardPaymentsPanel .profile-stripe-connection-summary,
body #profileCardPaymentsPanel .profile-stripe-state-toggle {
  display: none !important;
}
body #profileCardPaymentsPanel .profile-stripe-mascot-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 3.5 / 1;
  overflow: hidden;
  border-radius: clamp(17px,3.5vw,28px);
  isolation: isolate;
  background: #ff6a00;
  box-shadow: 0 12px 24px rgba(13,35,55,.16);
}
body #profileCardPaymentsPanel .profile-stripe-mascot-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
body #profileCardPaymentsPanel .profile-stripe-mascot-image {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  height: auto;
  transform: translate(-50%,-50%);
  transition: opacity .2s ease;
  user-select: none;
}
body #profileCardPaymentsPanel .profile-stripe-mascot-connect {
  width: 110%;
  opacity: 1;
}
body #profileCardPaymentsPanel .profile-stripe-mascot-dashboard {
  width: 119%;
  opacity: 0;
}
body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-mascot-connect {
  opacity: 0;
}
body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-mascot-dashboard {
  opacity: 1;
}
body #profileCardPaymentsPanel .profile-stripe-connection-actions {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  pointer-events: none;
}

body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-connection-actions {
  width: 56px;
  align-self: stretch;
}
body #profileCardPaymentsPanel .profile-stripe-connect-action {
  position: absolute;
  top: 50%;
  right: 4.3%;
  width: auto;
  min-width: clamp(104px,23%,184px);
  min-height: clamp(44px,8vw,64px);
  transform: translateY(-50%);
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 999px;
  padding: 0 clamp(18px,3vw,34px);
  color: #0d2940 !important;
  background: linear-gradient(180deg,#fff 0%,#fff8ef 100%) !important;
  box-shadow: 0 5px 0 rgba(151,55,8,.42),0 10px 18px rgba(47,28,11,.22) !important;
  font: 950 clamp(.77rem,2.2vw,1.08rem)/1 system-ui,sans-serif;
  text-align: center;
  white-space: nowrap;
  pointer-events: auto;
}
body #profileCardPaymentsPanel .profile-stripe-connect-action:is(:hover,:focus-visible) {
  transform: translateY(calc(-50% - 2px));
  box-shadow: 0 7px 0 rgba(151,55,8,.42),0 13px 22px rgba(47,28,11,.25) !important;
}
body #profileCardPaymentsPanel .profile-stripe-connect-action:active {
  transform: translateY(calc(-50% + 2px));
  box-shadow: 0 2px 0 rgba(151,55,8,.42),0 5px 10px rgba(47,28,11,.18) !important;
}
body #profileCardPaymentsPanel .profile-stripe-connect-action:disabled {
  cursor: wait;
  opacity: .78;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-button {
  position: absolute;
  top: 50%;
  right: 5.6%;
  width: clamp(48px,9.5vw,72px);
  min-height: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 2px solid #071a2b;
  border-radius: 999px;
  padding: 0;
  color: #fff !important;
  background: linear-gradient(180deg,#183a55 0%,#071f34 100%) !important;
  box-shadow: 0 5px 0 rgba(6,25,41,.34),0 10px 18px rgba(31,39,44,.22) !important;
  pointer-events: auto;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-button[hidden] {
  display: none !important;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-button:is(:hover,:focus-visible) {
  transform: translateY(calc(-50% - 2px));
  box-shadow: 0 7px 0 rgba(6,25,41,.34),0 13px 22px rgba(31,39,44,.25) !important;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-button:active {
  transform: translateY(calc(-50% + 2px));
  box-shadow: 0 2px 0 rgba(6,25,41,.34),0 5px 10px rgba(31,39,44,.18) !important;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-button:disabled {
  cursor: wait;
  opacity: .76;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-arrow {
  display: block;
  color: #fff;
  font: 700 clamp(1.6rem,5vw,2.6rem)/1 system-ui,sans-serif;
  transform: translateY(-.05em);
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-button > .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-status {
  margin: 8px 10px 0;
  color: #4f5d68 !important;
  font-size: .72rem;
  text-align: center;
}
@media (max-width:560px) {
  body #profileCardPaymentsPanel .profile-stripe-mascot-banner {
    aspect-ratio: 3.25 / 1;
    border-radius: 18px;
  }
  body #profileCardPaymentsPanel .profile-stripe-mascot-connect { width: 117%; }
  body #profileCardPaymentsPanel .profile-stripe-mascot-dashboard { width: 126%; }
  body #profileCardPaymentsPanel .profile-stripe-connect-action {
    right: 3.7%;
    min-width: 96px;
    min-height: 42px;
    padding-inline: 16px;
  }
  body #profileCardPaymentsPanel .profile-stripe-dashboard-button {
    right: 4.8%;
    width: 48px;
  }
}

/* Build 44 avatar system: every identity photo is a true circle and uses a
   centered cover crop. Product art and Booth cover imagery are intentionally
   outside this selector. */
body :is(
  img[class*="avatar" i],
  img[id*="avatar" i],
  img[id$="ProfilePhoto"],
  #profileConfirmPhoto,
  #tableFoundPhoto,
  [data-avatar-picker] img,
  .account-profile-summary > img,
  .seller-store-banner > img:not(.booth-brand-background),
  .notification-card-profile img,
  .question-profile-card img,
  .message-recipient-card img,
  [data-message-profile-avatar]
) {
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  clip-path: circle(50% at 50% 50%);
  background: #f4f6f8;
}

body [data-avatar-picker] :is(button,[role="radio"]) {
  border-radius: 50%;
}
body [data-avatar-picker] :is(button,[role="radio"]):focus-visible,
body :is(.profile-bubble-button,.profile-dashboard-avatar-button,.buyer-avatar-menu-button):focus-visible {
  outline: 3px solid #ff6a16;
  outline-offset: 3px;
}

/* The existing wired brand editor owns profile-photo cropping. These late
   overrides preserve its pointer/pinch/range handlers while giving the active
   profile-photo mode a polished circular mask and mobile-safe presentation. */
body .brand-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  background: rgba(12,17,25,.76);
  backdrop-filter: blur(14px);
}
body .brand-editor-modal[hidden] { display:none !important; }
body .brand-editor-card {
  box-sizing: border-box;
  width: min(100%, 540px);
  max-height: min(
    var(--editor-keyboard-safe-height, 100dvh),
    calc(100dvh - max(28px, env(safe-area-inset-top)) - max(28px, env(safe-area-inset-bottom)))
  );
  display: grid;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 24px;
  padding: 18px;
  color: #172033;
  background: linear-gradient(155deg,#fff 0%,#fff8f2 100%);
  box-shadow: 0 30px 90px rgba(0,0,0,.38);
  -webkit-overflow-scrolling: touch;
}
body .brand-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
body .brand-editor-head > span { min-width:0; display:grid; gap:4px; }
body .brand-editor-head strong {
  color: #172033;
  font: 900 clamp(1.25rem,4vw,1.7rem)/1.05 system-ui,sans-serif;
  letter-spacing: -.035em;
}
body .brand-editor-head small {
  color:#647083;
  font:650 .75rem/1.4 system-ui,sans-serif;
}
body .brand-editor-head #closeBrandEditor {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid #e4e7eb;
  border-radius: 50%;
  padding: 0;
  color: #394454;
  background: #fff;
  font: 800 1.35rem/1 system-ui,sans-serif;
  cursor: pointer;
}
body .brand-crop-stage {
  position: relative;
  width: min(100%, 380px);
  justify-self: center;
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 22px;
  padding: 10px;
  background: #111722;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 16px 34px rgba(17,23,34,.22);
  cursor: grab;
  touch-action: none;
}
body .brand-crop-stage.is-adjusting { cursor:grabbing; }
body .brand-crop-stage::after {
  content: "Drag to reposition";
  position: absolute;
  right: 50%;
  bottom: 13px;
  z-index: 3;
  transform: translateX(50%);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: 6px 10px;
  color: #fff;
  background: rgba(10,15,23,.72);
  font: 800 .64rem/1 system-ui,sans-serif;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
body .brand-editor-modal.is-logo-crop .brand-crop-stage {
  width:min(100%,380px);
  min-height:0;
  aspect-ratio:1 / 1;
  padding:10px;
}
body .brand-editor-modal.is-logo-crop .brand-crop-frame {
  width:min(78%,330px);
  aspect-ratio:1 / 1;
  border:3px solid rgba(255,255,255,.96);
  box-shadow:0 0 0 999px rgba(8,12,18,.58);
}
body .brand-editor-modal.is-logo-crop .brand-crop-frame[style*="border-radius: 50%"] {
  border-radius:50% !important;
}
body .brand-editor-modal.is-logo-crop #brandEditorImage {
  width:min(88%,420px);
  height:auto;
  max-height:390px;
  object-fit:contain;
  will-change:transform;
}
body .brand-zoom-control {
  grid-template-columns:auto minmax(0,1fr) 52px;
  gap:11px;
  border:1px solid #ebe4de;
  border-radius:14px;
  padding:11px 13px;
  color:#7d3a17;
  background:rgba(255,255,255,.82);
}
body .brand-zoom-control input[type="range"] {
  width:100%;
  min-width:0;
  accent-color:#ef5b16;
  cursor:pointer;
}
body .brand-crop-controls {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
}
body .brand-crop-controls button {
  min-height:42px;
  border:1px solid #ead8cd;
  border-radius:11px;
  color:#a6400c;
  background:#fff7f1;
}
body .brand-editor-actions {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:10px;
}
body .brand-editor-actions button {
  min-height:48px;
  border-radius:13px;
  font-weight:900;
}
body #applyBrandEdit {
  border:0;
  color:#fff;
  background:#ef5b16;
  box-shadow:0 9px 20px rgba(220,73,3,.22);
}
body :is(#closeBrandEditor,#cancelBrandEdit,#applyBrandEdit,.brand-crop-stage,.brand-crop-controls button):focus-visible {
  outline:3px solid rgba(239,91,22,.34);
  outline-offset:3px;
}
@media (max-width:600px) {
  body .brand-editor-modal {
    place-items:end center;
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      0
      max(8px, env(safe-area-inset-left));
  }
  body .brand-editor-card {
    width:100%;
    max-height:calc(var(--editor-keyboard-safe-height, 100dvh) - max(8px, env(safe-area-inset-top)));
    gap:11px;
    border-width:1px 1px 0;
    border-radius:24px 24px 0 0;
    padding:15px 15px max(16px, calc(env(safe-area-inset-bottom) + 10px));
  }
  body .brand-editor-modal.is-logo-crop .brand-crop-stage {
    width:min(78vw,320px);
    padding:8px;
    border-radius:19px;
  }
  body .brand-crop-controls { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body .brand-editor-actions {
    position:sticky;
    bottom:calc(-1 * max(16px, calc(env(safe-area-inset-bottom) + 10px)));
    z-index:4;
    margin:0 -15px calc(-1 * max(16px, calc(env(safe-area-inset-bottom) + 10px)));
    padding:10px 15px max(14px, env(safe-area-inset-bottom));
    background:rgba(255,250,246,.96);
    backdrop-filter:blur(10px);
  }
}
@media (max-height:700px) and (max-width:600px) {
  body .brand-editor-card { gap:9px; }
  body .brand-editor-modal.is-logo-crop .brand-crop-stage { width:min(56dvh,270px); }
  body .brand-zoom-control { padding:8px 11px; }
}
@media (prefers-reduced-motion:reduce) {
  body #brandEditorImage { transition:none !important; }
}
body #nationalFeed .feed-search-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
body #nationalFeed .feed-search-header > span {
  padding: 0 4px; color: #8e3b0d; font: 900 .72rem/1 system-ui,sans-serif; letter-spacing: .09em;
}
body #nationalFeed .feed-search-exit {
  width: 38px; height: 38px; min-width: 38px; display: grid; place-items: center; border: 0; border-radius: 999px;
  padding: 0; color: #fff; background: linear-gradient(135deg,#ee4b20,#c92518); box-shadow: 0 8px 18px rgba(195,37,24,.25); cursor: pointer;
}
body #nationalFeed .feed-search-exit svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Profile-scoped Reel likes and bounded Messages loading states. */
.reaction-like-button svg { width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round; }
.reaction-like-button:is(.is-liked,[aria-pressed="true"]) { border-color:#5aa8ff!important;color:#fff!important;background:#1877f2!important; }
.reaction-like-button:is(.is-liked,[aria-pressed="true"]) svg { fill:currentColor; }
body #messageCenterScreen .message-navigation-loading { min-height:150px;display:grid;place-items:center;align-content:center;gap:9px; }
body #messageCenterScreen .message-navigation-loading .communication-sync-spinner { width:28px;height:28px; }
body #messageCenterScreen .message-navigation-loading strong { color:#1b2b3f; }
body #messageCenterScreen .message-navigation-loading small { max-width:240px; }
body #messageCenterScreen .message-navigation-loading button { min-height:40px;border:0;border-radius:999px;padding:0 17px;color:#fff;background:#f45b08;font:850 .72rem/1 system-ui,sans-serif;cursor:pointer; }
/* Recovery stays visible without inflating the primary application bundle. */
body #messageCenterScreen .message-recovery-banner { width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #f0c9ad;border-radius:14px;padding:11px 12px;color:#5e341d;background:#fff8f2; }
body #messageCenterScreen .message-recovery-banner>div { min-width:0;display:grid;gap:2px; }
body #messageCenterScreen .message-recovery-banner strong { color:#48200e;font-size:.78rem; }
body #messageCenterScreen .message-recovery-banner span { color:#6b4b3a;font-size:.7rem;line-height:1.4; }
body #messageCenterScreen .message-recovery-banner button { flex:0 0 auto;border:1px solid #df7432;border-radius:999px;padding:8px 11px;color:#8a3508;background:#fff;font:800 .68rem/1 system-ui,sans-serif;cursor:pointer; }
@media (max-width:520px) {
  body #messageCenterScreen .message-recovery-banner { align-items:stretch;flex-direction:column; }
  body #messageCenterScreen .message-recovery-banner button { align-self:start; }
}
body #nationalFeed .feed-search-field {
  min-width: 0; min-height: 52px; display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center;
  gap: 8px; border: 1px solid rgba(210,110,51,.28); border-radius: 16px; padding: 0 8px 0 14px; background: #fff;
  box-shadow: inset 0 1px 2px rgba(105,53,20,.05),0 7px 18px rgba(105,53,20,.07);
}
body #nationalFeed .feed-search-field > .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
body #nationalFeed .feed-search-field > svg { width: 21px; height: 21px; fill: none; stroke: #c54d0b; stroke-width: 2; stroke-linecap: round; }
body #nationalFeed .feed-search-field input {
  min-width: 0; min-height: 50px; border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; outline: 0;
}
body #nationalFeed .feed-search-field:focus-within { border-color: #ff6515; box-shadow: 0 0 0 3px rgba(255,101,21,.16); }
body #nationalFeed #clearFeedSearch {
  min-height: 36px; border: 0; border-radius: 999px; padding: 0 11px; color: #9a3f0e; background: #ffeadb; font: 900 .7rem/1 system-ui,sans-serif; cursor: pointer;
}
body #nationalFeed #clearFeedSearch[hidden] { display: none; }
body #nationalFeed .feed-search-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
body #nationalFeed .feed-search-filters label { min-width: 0; display: grid; gap: 5px; color: #88401a; font: 850 .66rem/1 system-ui,sans-serif; }
body #nationalFeed .feed-search-filters label > span { padding: 0 3px; letter-spacing: .02em; text-transform: none; }
body #nationalFeed .feed-search-filters select {
  width: 100%; min-width: 0; min-height: 44px; border: 1px solid rgba(210,110,51,.25); border-radius: 13px; padding: 0 28px 0 10px;
  color: #5e2b10; background: #fff; font: 800 .76rem/1 system-ui,sans-serif;
}
body #nationalFeed .feed-search-status { min-height: 16px; margin: -2px 4px 0; color: #775b4b; font: 700 .68rem/1.3 system-ui,sans-serif; }
body #nationalFeed .feed-search-empty-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
body #nationalFeed .feed-search-empty-actions button {
  min-height: 44px; border: 1px solid rgba(255,255,255,.58); border-radius: 999px; padding: 0 16px; color: #fff;
  background: rgba(255,255,255,.14); font: 900 .76rem/1 system-ui,sans-serif; cursor: pointer;
}
body #nationalFeed .feed-search-empty-actions button:first-child { border-color: #ff6a1a; background: #ff5a00; }
body #nationalFeed :is(.feed-search-exit,#clearFeedSearch,.feed-search-empty-actions button):focus-visible { outline: 3px solid rgba(45,128,255,.55); outline-offset: 2px; }
@media (max-width: 430px) {
  body #nationalFeed .feed-search {
    position: fixed;
    top: calc(62px + env(safe-area-inset-top));
    right: max(8px,env(safe-area-inset-right));
    left: max(8px,env(safe-area-inset-left));
    width: auto;
    max-height: calc(100dvh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: none;
    transform: none;
  }
  body #nationalFeed .feed-search-filters { grid-template-columns: minmax(0,1fr); }
  body #nationalFeed :is(.feed-search-field,.feed-search-exit,#clearFeedSearch,.feed-search-filters select) { touch-action: manipulation; }
}
@media (prefers-reduced-motion: reduce) { body #nationalFeed .feed-search { animation: none; } }

/* Messages stay conversational: archives and support remain, without a second search surface. */
body #messageCenterScreen .message-thread-list {
  min-width: 0;
  grid-template-rows: minmax(0,1fr) auto auto;
}
body #messageCenterScreen .message-thread-scroll {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  align-content: start;
  overflow-x: hidden;
}
body #messageCenterScreen .message-thread-entry {
  position: relative;
  min-width: 0;
  min-height: max-content;
  height: auto;
  flex: 0 0 auto;
  isolation: isolate;
}
body #messageCenterScreen .message-thread {
  width: 100%;
  min-width: 0;
  min-height: 88px;
  height: auto;
  overflow: visible;
}
body #messageCenterScreen .message-thread > *,
body #messageCenterScreen :is(
  .message-thread-copy,
  .message-thread-content,
  .message-thread-details,
  .message-thread-stage
) {
  min-width: 0;
}
body #messageCenterScreen :is(
  .message-thread-copy,
  .message-thread-content,
  .message-thread-details,
  .message-thread-stage
) :is(strong, small, em) {
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
body #messageCenterScreen .message-thread-indicators {
  min-width: 30px;
  width: auto;
  height: auto;
  align-self: center;
  flex: 0 0 auto;
  overflow: visible;
}
body #messageCenterScreen .message-thread-unread {
  box-sizing: border-box;
  min-width: 24px;
  width: auto;
  flex: 0 0 auto;
  padding-inline: 7px;
  white-space: nowrap;
  overflow: visible;
}

@media (max-width: 760px) {
  body #messageCenterScreen .message-thread-scroll {
    overflow-y: visible;
  }
  body #messageCenterScreen .message-thread-entry {
    width: 100%;
  }
  body #messageCenterScreen .message-thread {
    min-height: 96px;
    align-items: center;
  }
}

body #sellerStoreScreen .seller-store-banner:not(.is-booth-profile) {
  min-height: 0;
  padding: 8px 4px 14px;
  color: inherit;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
body #sellerStoreScreen .seller-store-banner:not(.is-booth-profile)::after { display: none; }
body #sellerStoreScreen .seller-store-banner:not(.is-booth-profile) #storeSellerType { display: none; }
body #sellerStoreScreen .seller-store-banner:not(.is-booth-profile) > #storeSellerAvatar {
  border: 0;
  background: transparent;
  box-shadow: none;
}
body #sellerStoreScreen .seller-store-banner.is-booth-profile #storeSellerType { display: block !important; }

/* Public Booth storefronts use a full-width parent grid so the hero follows
   the usable layout viewport rather than 100vw. Viewport units include a
   reserved scrollbar in some webviews, which clips one edge and leaves the
   opposite edge short. The content column keeps the existing catalog width. */
body #sellerStoreScreen:not([hidden]):has(> .seller-store-banner.is-booth-profile) {
  --booth-store-inline-gutter: clamp(12px, 3vw, 26px);
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns:
    minmax(var(--booth-store-inline-gutter), 1fr)
    minmax(0, calc(980px - var(--booth-store-inline-gutter) - var(--booth-store-inline-gutter)))
    minmax(var(--booth-store-inline-gutter), 1fr);
  padding-inline: 0;
}
body #sellerStoreScreen:has(> .seller-store-banner.is-booth-profile) > :not(.seller-store-banner) {
  grid-column: 2;
  width: 100%;
  min-width: 0;
}
body #sellerStoreScreen .seller-store-banner.is-booth-profile {
  width: 100%;
  max-width: none;
  grid-column: 1 / -1;
  justify-self: stretch;
  grid-template-columns: minmax(0, 1fr);
  margin-inline: 0;
  border: 0;
  border-radius: 0;
}
body #sellerStoreScreen .seller-store-banner.is-booth-profile > #storeSellerAvatar {
  display: none;
}
body #sellerStoreScreen .seller-store-banner.is-booth-profile > .booth-brand-background {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  object-fit: cover !important;
}

#nationalFeed .reel-card .reel-photo-region {
  position: absolute;
  inset: var(--reel-top) 0 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
}
#nationalFeed .reel-card .reel-photo-region > .national-image-strip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Phone Reels return product photography to the full viewport. The media now
   paints behind the safe-area header and seller identity while the existing
   gradients and translucent controls preserve readable actions. */
@media (max-width: 760px) {
  #nationalFeed .reel-card {
    --reel-top: 0px;
  }

  #nationalFeed .reel-card .reel-photo-region {
    inset: 0;
  }

  html.native-ios-shell body #nationalFeed .reel-card .reel-photo-region {
    inset: calc(-1 * env(safe-area-inset-top)) 0 0;
  }

  body #nationalFeed .reel-card .national-image-strip > .national-photo-slide-shell > .national-photo-slide {
    object-fit: contain !important;
    object-position: center;
  }

  #nationalFeed .reel-booth-listing,
  html.native-ios-shell body #nationalFeed .national-feed-card.reel-booth-listing {
    --booth-reel-ad-height: calc(116px + env(safe-area-inset-top));
  }

  body #nationalFeed .reel-booth-listing .national-seller-overlay .profile-chip-booth.reel-seller-profile-trigger {
    background: linear-gradient(180deg, rgba(5, 8, 11, 0.5) 0%, rgba(5, 8, 11, 0.16) 48%, rgba(5, 8, 11, 0.78) 100%);
    box-shadow: none;
    backdrop-filter: blur(2px);
  }

  body #nationalFeed .reel-booth-listing .national-seller-overlay .profile-chip-booth.reel-seller-profile-trigger > .booth-brand-background {
    display: none;
  }
}

/* A shared listing is a one-post visual preview until the visitor joins Flea. */
#nationalFeed.is-shared-listing-guest .shared-listing-guest-card { isolation: isolate; }
#nationalFeed.is-shared-listing-guest .shared-listing-guest-ad {
  position: absolute;
  z-index: 12;
  inset: auto 14px 106px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 18px;
  padding: 13px 14px;
  color: #fff;
  background: linear-gradient(135deg,rgba(18,25,31,.9),rgba(7,12,16,.82));
  box-shadow: 0 18px 42px rgba(0,0,0,.34);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
}
#nationalFeed.is-shared-listing-guest .shared-listing-guest-ad small { color: #ffad72; font: 950 .62rem/1 system-ui,sans-serif; letter-spacing: .12em; }
#nationalFeed.is-shared-listing-guest .shared-listing-guest-ad strong { font: 950 1.03rem/1.15 "Fredoka",system-ui,sans-serif; }
#nationalFeed.is-shared-listing-guest .shared-listing-guest-ad p { margin: 0; color: rgba(255,255,255,.8); font: 720 .72rem/1.35 system-ui,sans-serif; }
#nationalFeed.is-shared-listing-guest .shared-listing-guest-ad button {
  min-height: 42px;
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  color: #311508;
  background: linear-gradient(135deg,#ffb177,#ff6a18);
  font: 950 .76rem/1 system-ui,sans-serif;
  box-shadow: 0 10px 22px rgba(255,91,19,.28);
}
#nationalFeed.is-shared-listing-guest .shared-listing-guest-card .national-offer-box input { cursor: pointer; }
@media (max-width: 420px) {
  #nationalFeed.is-shared-listing-guest .shared-listing-guest-ad { inset-inline: 10px; bottom: 102px; padding: 11px 12px; }
}

/* Profile-card accessibility repair. Keep Flea's existing cards and branding,
   but do not shrink seller identity, location, review, or business copy below
   a readable interface size. Long names wrap inside the card instead of
   colliding with badges or being clipped by the old single-line rules. */
body .nearby-grid .profile-result-info {
  gap: 6px;
  padding-bottom: 12px;
}

body .nearby-grid .profile-result-title {
  min-width: 0;
  font-size: 1rem;
  line-height: 1.3;
}

body .nearby-grid .profile-title-button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  display: -webkit-box;
  overflow: hidden;
  padding-block: 5px;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body .nearby-grid .profile-result-copy small {
  font-size: 0.8125rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

body .nearby-grid .profile-card-social-row {
  min-height: 36px;
  flex-wrap: wrap;
  row-gap: 6px;
}

body .nearby-grid .profile-review-score,
body .nearby-grid .profile-card-item-count {
  font-size: 0.78rem;
  line-height: 1.35;
}

body .nearby-grid .seller-social-link {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  font-size: 0.78rem;
}

body :is(
  #nationalFeed .feed-question-panel,
  .reel-card .reel-question-bubble,
  .seller-listing-snapshot-questions
) .question-profile-card {
  min-height: 36px;
}

body :is(
  #nationalFeed .feed-question-panel,
  .reel-card .reel-question-bubble,
  .seller-listing-snapshot-questions
) .question-profile-card > img {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

body :is(
  #nationalFeed .feed-question-panel,
  .reel-card .reel-question-bubble,
  .seller-listing-snapshot-questions
) .question-profile-card strong {
  max-width: min(28ch, 100%);
  font-size: 0.8125rem !important;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

body :is(
  #nationalFeed .feed-question-panel,
  .reel-card .reel-question-bubble,
  .seller-listing-snapshot-questions
) :is(.question-thread-question, .question-thread-reply) > p {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

body #sellerStoreScreen .store-banner-copy {
  min-width: 0;
}

body #sellerStoreScreen .store-banner-copy h1 {
  max-width: 100%;
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.12;
  white-space: normal;
  overflow-wrap: anywhere;
}

body #sellerStoreScreen .store-banner-copy > span,
body #buyerProfileScreen .dashboard-booth-description {
  font-size: 0.875rem;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

body #sellerStoreScreen .store-banner-copy .seller-social-link,
body #buyerProfileScreen .dashboard-booth-profile-social a,
body #buyerProfileScreen .dashboard-booth-edit-toggle {
  min-width: 44px;
  min-height: 44px;
}

body #buyerProfileScreen .buyer-profile-identity > h1 {
  max-width: 100%;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
}

body #buyerProfileScreen :is(
  .buyer-rating,
  .buyer-profile-provider,
  .buyer-profile-email-summary,
  .buyer-address-notice small,
  .profile-email-explainer
) {
  max-width: 100%;
  font-size: 0.875rem;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

body #buyerProfileScreen :is(
  .buyer-profile-photo-settings > div > small,
  .buyer-profile-section small,
  .profile-list small
) {
  font-size: 0.8125rem;
  line-height: 1.45;
}

body #buyerProfileScreen :is(
  .buyer-profile-primary-controls .edit-profile-button,
  .buyer-profile-photo-settings > button,
  .buyer-address-live-controls button,
  .buyer-avatar-menu-card > header button
) {
  min-width: 44px;
  min-height: 44px;
}

body #buyerProfileScreen .buyer-profile-primary-controls .edit-profile-button,
body #buyerProfileScreen .buyer-profile-photo-settings > button,
body #buyerProfileScreen .buyer-avatar-menu-button > span {
  font-size: 0.875rem;
}

@media (max-width: 620px) {
  body .nearby-grid .profile-result {
    flex-basis: min(82vw, 292px);
    width: min(82vw, 292px);
  }

  body #sellerStoreScreen .seller-store-banner.is-booth-profile .store-banner-copy > span {
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  body #sellerStoreScreen .seller-store-banner.is-booth-profile .store-banner-copy .seller-social-link {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 0.75rem;
  }

  body #buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero {
    align-items: end;
  }

  body #buyerProfileScreen.is-booth-profile .profile-dashboard-booth-card .dashboard-booth-profile-bar.is-booth-hero > span strong {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body #buyerProfileScreen .buyer-profile-primary-controls .edit-profile-button {
    min-height: 44px;
  }
}

/* Final payment-card geometry overrides must follow the legacy card skin. */
body #profileCardPaymentsPanel.profile-stripe-connection-card,
body .profile-booth-stripe-card-slot {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
body #profileCardPaymentsPanel .profile-stripe-mascot-banner {
  box-sizing: border-box;
  max-width: 100%;
}
body #profileCardPaymentsPanel .profile-stripe-mascot-connect {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: none;
}
body #profileCardPaymentsPanel .profile-stripe-mascot-dashboard {
  width: 100%;
  transform: translate(-50%,-50%);
}
body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-mascot-banner {
  aspect-ratio: 2.7 / 1;
  border: 1px solid rgba(255,154,42,.42);
  background: linear-gradient(105deg,#fff 0%,#fff8ef 72%,#fff2e3 100%);
  box-shadow: 0 12px 24px rgba(13,35,55,.16),0 8px 20px rgba(255,120,25,.16);
  cursor: pointer;
}
body #profileCardPaymentsPanel .profile-stripe-connect-action {
  right: max(4.3%,16px);
  z-index: 3;
  min-height: 44px;
  max-width: 27%;
}
body #profileCardPaymentsPanel .profile-stripe-connect-action:focus-visible {
  outline: 3px solid #102f4a;
  outline-offset: 4px;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-button {
  inset: 0;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  border: 0;
  border-radius: inherit;
  padding: 3px max(22px,calc(env(safe-area-inset-right) + 16px)) 0 16px;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-button:is(:hover,:active,:focus-visible) {
  transform: none !important;
  box-shadow: none !important;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-button:focus-visible {
  outline: 3px solid #0f69e8;
  outline-offset: -5px;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-button:active .profile-stripe-dashboard-cue {
  transform: scale(.96);
  box-shadow: 0 2px 0 rgba(6,25,41,.34),0 5px 10px rgba(31,39,44,.18);
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-cue {
  flex: 0 0 auto;
  width: clamp(48px,9.5vw,72px);
  min-width: 48px;
  min-height: 48px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid #071a2b;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg,#183a55 0%,#071f34 100%);
  box-shadow: 0 5px 0 rgba(6,25,41,.34),0 10px 18px rgba(31,39,44,.22);
  transition: transform .12s ease,box-shadow .12s ease;
}
body #profileCardPaymentsPanel .profile-stripe-dashboard-arrow {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform: none;
  font: 700 clamp(1.6rem,5vw,2.6rem)/1 system-ui,sans-serif;
}

@media (max-width:700px) {
  body #profileCardPaymentsPanel:not(.is-ready):not(.is-connected) .profile-stripe-mascot-banner {
    min-height: 200px;
    aspect-ratio: auto;
  }
  body #profileCardPaymentsPanel:not(.is-ready):not(.is-connected) .profile-stripe-mascot-connect {
    top: 0;
    left: 0;
    width: auto;
    height: 72%;
    object-fit: contain;
    object-position: left top;
    transform: none;
  }
  body #profileCardPaymentsPanel .profile-stripe-banner-copy {
    top: 26px;
    right: 16px;
    left: 44%;
    gap: 4px;
    transform: none;
  }
  body #profileCardPaymentsPanel .profile-stripe-banner-copy strong { font-size: clamp(1.3rem,7vw,1.8rem); }
  body #profileCardPaymentsPanel .profile-stripe-banner-copy small { font-size: clamp(.78rem,3.8vw,1rem); }
  body #profileCardPaymentsPanel .profile-stripe-connect-action {
    top: auto;
    right: 16px;
    bottom: 17px;
    left: 16px;
    width: auto;
    max-width: none;
    min-height: 48px;
    transform: none;
  }
  body #profileCardPaymentsPanel .profile-stripe-connect-action:is(:hover,:focus-visible) { transform: translateY(-2px); }
  body #profileCardPaymentsPanel .profile-stripe-connect-action:active { transform: translateY(2px); }
  body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-mascot-banner {
    min-height: 0;
    aspect-ratio: 2.7 / 1;
  }
  body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-mascot-dashboard { width: 100%; }
  body #profileCardPaymentsPanel .profile-stripe-dashboard-button {
    inset: 0;
    width: 100%;
    padding-right: max(16px,calc(env(safe-area-inset-right) + 12px));
  }
  body #profileCardPaymentsPanel .profile-stripe-dashboard-cue { width: 48px; }
}

body #profileCardPaymentsPanel .profile-stripe-dashboard-cue > .profile-stripe-dashboard-arrow {
  grid-area: auto !important;
  width: auto;
  height: auto;
  place-self: stretch;
  text-align: center;
}

@media (min-width:701px) {
  body #profileCardPaymentsPanel:not(.is-ready):not(.is-connected) .profile-stripe-mascot-connect {
    top: calc(50% + 4px);
    left: 50%;
    width: 116%;
    height: auto;
    object-fit: contain;
    transform: translate(-50%,-50%);
  }
}

@media (max-width:700px) {
  body #profileCardPaymentsPanel:not(.is-ready):not(.is-connected) .profile-stripe-mascot-banner {
    background: linear-gradient(105deg,#ff4b00 0%,#ff7600 56%,#ff9e00 100%);
  }
  body #profileCardPaymentsPanel:not(.is-ready):not(.is-connected) .profile-stripe-mascot-connect {
    top: -16.5px;
    clip-path: inset(0 0 15% 2.5% round 24px 24px 0 0);
  }
}

/* Keep the themed payout surface proportional in wide browser dashboards.
   Phone and native-shell geometry above remains unchanged. */
@media (min-width:901px) {
  body .profile-booth-stripe-card-slot {
    display: grid;
    justify-items: center;
  }

  body #profileCardPaymentsPanel.profile-stripe-connection-card {
    width: min(100%,720px);
    max-width: 720px;
    margin-inline: auto;
    justify-self: center;
  }
}

/* Compact payment action card.
   The source artwork contains legacy baked-in copy and controls, so only its
   mascot region is visible. Copy and the single active CTA remain real HTML. */
body #profileCardPaymentsPanel.profile-stripe-connection-card {
  width: 100%;
  max-width: 640px;
  min-width: 0;
  margin-inline: auto;
}

body .profile-booth-stripe-card-slot {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  justify-items: center;
}

body #profileCardPaymentsPanel .profile-stripe-mascot-banner,
body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-mascot-banner,
body #profileCardPaymentsPanel:not(.is-ready):not(.is-connected) .profile-stripe-mascot-banner {
  --stripe-art-width: clamp(84px,10vw,104px);
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 112px;
  aspect-ratio: auto !important;
  display: grid;
  grid-template-columns: var(--stripe-art-width) minmax(0,1fr) auto;
  grid-template-areas: "art copy actions";
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #efded1;
  border-radius: 18px;
  padding: 11px 16px 11px 10px;
  background: linear-gradient(112deg,#fff8f0 0%,#fff 68%,#f8f5ff 100%);
  box-shadow: 0 9px 22px rgba(24,37,53,.11);
}

body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-mascot-banner {
  border-color: #dce3e8;
  background: linear-gradient(112deg,#fff9f1 0%,#fff 68%,#f3f7fa 100%);
}

body #profileCardPaymentsPanel .profile-stripe-mascot-art {
  position: relative !important;
  inset: auto !important;
  grid-area: art;
  width: var(--stripe-art-width);
  height: 88px;
  min-width: 0;
  overflow: hidden;
  border-radius: 14px;
  pointer-events: none;
}

body #profileCardPaymentsPanel .profile-stripe-mascot-image,
body #profileCardPaymentsPanel .profile-stripe-mascot-connect,
body #profileCardPaymentsPanel .profile-stripe-mascot-dashboard,
body #profileCardPaymentsPanel:not(.is-ready):not(.is-connected) .profile-stripe-mascot-connect,
body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-mascot-dashboard {
  position: absolute;
  top: 50% !important;
  left: 0 !important;
  width: 260px !important;
  max-width: none;
  height: auto !important;
  object-fit: contain !important;
  object-position: left center !important;
  clip-path: none;
  transform: translateY(-50%) !important;
}

body #profileCardPaymentsPanel .profile-stripe-banner-copy,
body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-banner-copy {
  position: static;
  inset: auto;
  z-index: 2;
  grid-area: copy;
  min-width: 0;
  display: grid;
  gap: 4px;
  color: #102b43;
  text-shadow: none;
  transform: none;
}

body #profileCardPaymentsPanel .profile-stripe-banner-copy strong,
body #profileCardPaymentsPanel .profile-stripe-banner-copy small {
  min-width: 0;
  overflow-wrap: anywhere;
}

body #profileCardPaymentsPanel .profile-stripe-banner-copy strong {
  color: #102b43;
  font: 950 clamp(1rem,2.1vw,1.35rem)/1.05 system-ui,sans-serif;
  letter-spacing: -.025em;
}

body #profileCardPaymentsPanel .profile-stripe-banner-copy small {
  color: #657282;
  font: 700 clamp(.69rem,1.2vw,.82rem)/1.3 system-ui,sans-serif;
}

body #profileCardPaymentsPanel .profile-stripe-connection-actions {
  position: static !important;
  inset: auto !important;
  z-index: 3;
  grid-area: actions;
  width: auto;
  min-width: 0;
  display: grid !important;
  place-items: center;
  pointer-events: none;
}

body #profileCardPaymentsPanel .profile-stripe-connect-action {
  position: static;
  inset: auto;
  width: auto;
  min-width: 124px;
  max-width: 176px;
  min-height: 44px;
  margin: 0;
  border: 0;
  border-radius: 12px;
  padding: 0 18px;
  color: #fff !important;
  background: linear-gradient(180deg,#ff6a00 0%,#e84b00 100%) !important;
  box-shadow: 0 4px 0 #a93800,0 8px 15px rgba(151,55,8,.18) !important;
  font: 900 .82rem/1 system-ui,sans-serif;
  white-space: normal;
  transform: none;
  pointer-events: auto;
}

body #profileCardPaymentsPanel .profile-stripe-connect-action:is(:hover,:focus-visible) {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #a93800,0 10px 18px rgba(151,55,8,.2) !important;
}

body #profileCardPaymentsPanel .profile-stripe-connect-action:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #a93800,0 4px 9px rgba(151,55,8,.16) !important;
}

body #profileCardPaymentsPanel .profile-stripe-connect-action:focus-visible {
  outline: 3px solid rgba(15,72,116,.35);
  outline-offset: 3px;
}

body #profileCardPaymentsPanel .profile-stripe-dashboard-button {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  border: 0;
  border-radius: inherit;
  padding: 0 max(16px,calc(env(safe-area-inset-right) + 12px)) 0 12px;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: auto;
}

body #profileCardPaymentsPanel .profile-stripe-dashboard-button[hidden] {
  display: none !important;
}

body #profileCardPaymentsPanel .profile-stripe-dashboard-button:is(:hover,:active,:focus-visible) {
  transform: none !important;
  box-shadow: none !important;
}

body #profileCardPaymentsPanel .profile-stripe-dashboard-button:focus-visible {
  outline: 3px solid #0f69e8;
  outline-offset: -4px;
}

body #profileCardPaymentsPanel .profile-stripe-dashboard-cue {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid #071a2b;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg,#183a55 0%,#071f34 100%);
  box-shadow: 0 4px 0 rgba(6,25,41,.34),0 8px 15px rgba(31,39,44,.18);
}

body #profileCardPaymentsPanel .profile-stripe-dashboard-cue > .profile-stripe-dashboard-arrow {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  font: 800 1.7rem/1 system-ui,sans-serif;
  text-align: center;
  transform: none;
}

body #profileCardPaymentsPanel .profile-stripe-dashboard-button:active .profile-stripe-dashboard-cue {
  transform: translateY(2px) scale(.97);
  box-shadow: 0 2px 0 rgba(6,25,41,.34),0 4px 9px rgba(31,39,44,.16);
}

@media (max-width:560px) {
  body #profileCardPaymentsPanel .profile-stripe-mascot-banner,
  body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-mascot-banner,
  body #profileCardPaymentsPanel:not(.is-ready):not(.is-connected) .profile-stripe-mascot-banner {
    --stripe-art-width: 78px;
    min-height: 124px;
    grid-template-columns: var(--stripe-art-width) minmax(0,1fr);
    grid-template-areas:
      "art copy"
      "art actions";
    column-gap: 10px;
    row-gap: 8px;
    border-radius: 16px;
    padding: 10px 12px 10px 8px;
  }

  body #profileCardPaymentsPanel .profile-stripe-mascot-art {
    height: 96px;
  }

  body #profileCardPaymentsPanel .profile-stripe-mascot-image,
  body #profileCardPaymentsPanel .profile-stripe-mascot-connect,
  body #profileCardPaymentsPanel .profile-stripe-mascot-dashboard,
  body #profileCardPaymentsPanel:not(.is-ready):not(.is-connected) .profile-stripe-mascot-connect,
  body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-mascot-dashboard {
    width: 236px !important;
  }

  body #profileCardPaymentsPanel .profile-stripe-banner-copy strong {
    font-size: clamp(.98rem,4.8vw,1.16rem);
  }

  body #profileCardPaymentsPanel .profile-stripe-banner-copy small {
    font-size: clamp(.66rem,3.15vw,.76rem);
  }

  body #profileCardPaymentsPanel .profile-stripe-connection-actions {
    width: 100%;
    justify-items: stretch;
  }

  body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-mascot-banner {
    grid-template-columns: var(--stripe-art-width) minmax(0,1fr) 56px;
    grid-template-areas: "art copy actions";
  }

  body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-connection-actions {
    width: 56px;
    height: 100%;
    justify-items: center;
  }

  body #profileCardPaymentsPanel .profile-stripe-connect-action {
    width: 100%;
    max-width: 184px;
    min-width: 0;
    min-height: 44px;
  }

  body #profileCardPaymentsPanel .profile-stripe-dashboard-button {
    padding-right: max(12px,calc(env(safe-area-inset-right) + 10px));
  }
}

@media (max-width:360px) {
  body #profileCardPaymentsPanel .profile-stripe-mascot-banner,
  body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-mascot-banner,
  body #profileCardPaymentsPanel:not(.is-ready):not(.is-connected) .profile-stripe-mascot-banner {
    --stripe-art-width: 70px;
    min-height: 118px;
    gap: 7px;
    padding-inline: 7px 10px;
  }

  body #profileCardPaymentsPanel .profile-stripe-mascot-art {
    height: 90px;
  }

  body #profileCardPaymentsPanel .profile-stripe-mascot-image,
  body #profileCardPaymentsPanel .profile-stripe-mascot-connect,
  body #profileCardPaymentsPanel .profile-stripe-mascot-dashboard,
  body #profileCardPaymentsPanel:not(.is-ready):not(.is-connected) .profile-stripe-mascot-connect,
  body #profileCardPaymentsPanel:is(.is-ready,.is-connected) .profile-stripe-mascot-dashboard {
    width: 220px !important;
  }
}