:root {
  --brand: #087f5b;
  --brand-dark: #056044;
  --brand-soft: #e8f5ef;
  --ink: #17221e;
  --ink-soft: #3d4b45;
  --muted: #68756f;
  --line: #dce3df;
  --surface: #ffffff;
  --canvas: #f6f7f5;
  --warm: #fff4ea;
  --coral: #e75d4f;
  --gold: #d99b22;
  --danger: #bf3b32;
  --warning: #9a6700;
  --success: #087f5b;
  --shadow-sm: 0 2px 10px rgba(23, 34, 30, 0.07);
  --shadow-md: 0 16px 38px rgba(23, 34, 30, 0.12);
  --radius: 8px;
  --header-height: 144px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; max-width: 100%; overflow-x: hidden; background: var(--canvas); color: var(--ink); }
body.admin-view { --header-height: 72px; }
body.admin-view .utility-bar, body.admin-view .global-search, body.admin-view .category-nav, body.admin-view .header-actions > *:not(.account-link), body.admin-view .mobile-bottom-nav, body.admin-view .chat-launcher { display: none !important; }
body.admin-view .header-main { justify-content: space-between; min-height: 72px; }
body.admin-view .header-actions, body.admin-view .header-actions .account-link { display: inline-flex; }
body, button, input, select, textarea { font: inherit; }
button, input, select, textarea { letter-spacing: 0; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, h4 { overflow-wrap: anywhere; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 16px; font-size: 48px; line-height: 1.04; letter-spacing: 0; }
h2 { margin-bottom: 12px; font-size: 28px; line-height: 1.15; letter-spacing: 0; }
h3 { margin-bottom: 8px; font-size: 17px; letter-spacing: 0; }
p { color: var(--ink-soft); line-height: 1.65; }
button, [role="button"] { cursor: pointer; }
button:disabled, .disabled { cursor: not-allowed; opacity: .58; }
:focus-visible { outline: 3px solid rgba(8, 127, 91, .28); outline-offset: 2px; }
input, select, textarea { width: 100%; min-height: 44px; border: 1px solid #cfd8d3; border-radius: var(--radius); background: #fff; color: var(--ink); padding: 11px 12px; outline: 0; }
textarea { min-height: 116px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(8, 127, 91, .12); }
label { display: grid; gap: 7px; color: var(--ink-soft); font-size: 14px; font-weight: 750; }
label small { color: var(--muted); font-size: 12px; font-weight: 500; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: 8px; color: var(--ink-soft); font-size: 14px; font-weight: 750; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 12px 16px; background: var(--ink); color: #fff; border-radius: var(--radius); }
.skip-link:focus { top: 12px; }
.page-shell { width: min(1380px, calc(100% - 48px)); margin-inline: auto; }
.eyebrow { display: block; margin-bottom: 10px; color: var(--brand); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.muted { color: var(--muted); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--radius); font-weight: 850; transition: background .16s, border-color .16s, transform .16s; }
button.button { appearance: none; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--brand); color: #fff; }
.button.primary:hover { background: var(--brand-dark); }
.button.secondary { border-color: #cbd6d1; background: #fff; color: var(--ink); }
.button.secondary:hover { border-color: var(--brand); color: var(--brand-dark); }
.button.danger { background: var(--danger); color: #fff; }
.button.light { background: #fff; color: var(--brand-dark); }
.button.large { min-height: 52px; padding-inline: 22px; }
.button.full { width: 100%; }
.button.disabled { border-color: var(--line); background: #e7ebe9; color: var(--muted); }
.icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 24px; }
.text-arrow { color: var(--brand-dark); font-weight: 850; }

/* Global shell */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(23,34,30,.02); }
.utility-bar { display: flex; align-items: center; gap: 24px; min-height: 30px; padding: 0 max(24px, calc((100vw - 1380px) / 2)); background: var(--ink); color: #dce8e2; font-size: 12px; }
.utility-bar a { margin-left: auto; color: #fff; font-weight: 700; }
.header-main { display: grid; grid-template-columns: auto minmax(320px, 1fr) auto; align-items: center; gap: 26px; width: min(1380px, calc(100% - 48px)); min-height: 74px; margin: auto; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 950; white-space: nowrap; }
.brand-mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius); background: var(--brand); color: #fff; font-size: 19px; font-weight: 950; }
.brand.inverse { color: #fff; }
.global-search { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; height: 48px; border: 2px solid var(--brand); border-radius: var(--radius); background: #fff; }
.global-search select, .global-search input { height: 44px; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.global-search select { border-right: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.search-submit { height: 40px; margin-right: 3px; padding: 0 18px; border: 0; border-radius: 6px; background: var(--brand); color: #fff; font-weight: 850; }
.search-suggestions { position: absolute; top: 54px; left: 0; right: 0; z-index: 70; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); }
.search-suggestions[hidden] { display: none; }
.search-suggestions > div { display: grid; align-content: start; gap: 4px; min-width: 0; }
.search-suggestions strong { margin-bottom: 5px; font-size: 12px; text-transform: uppercase; color: var(--muted); }
.search-suggestions a, .suggestion-empty { padding: 7px 4px; font-size: 13px; }
.search-suggestions a:hover { color: var(--brand); }
.search-suggestions a b { float: right; color: var(--brand-dark); }
.header-actions { display: flex; align-items: center; gap: 5px; }
.text-link { padding: 9px 7px; font-size: 14px; font-weight: 850; }
.text-link:hover { color: var(--brand); }
.icon-link { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 23px; }
.icon-link svg, .mobile-search-button svg { width: 20px; height: 20px; }
.icon-link:hover { background: var(--brand-soft); color: var(--brand); }
.badge-anchor { position: relative; font-size: 12px; }
.badge-anchor b { position: absolute; top: -2px; right: -2px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid #fff; border-radius: 9px; background: var(--coral); color: #fff; font-size: 10px; }
.account-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; font-size: 13px; font-weight: 800; }
.publish-button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border-radius: var(--radius); background: var(--coral); color: #fff; font-size: 13px; font-weight: 900; white-space: nowrap; }
.category-nav { display: flex; align-items: center; justify-content: center; gap: 26px; min-height: 40px; border-top: 1px solid #edf0ee; overflow: hidden; }
.category-nav a { color: var(--ink-soft); font-size: 12px; font-weight: 750; white-space: nowrap; }
.category-nav a:hover { color: var(--brand); }
.mobile-search-button, .mobile-account, .mobile-bottom-nav { display: none; }

#app { min-height: 60vh; }
.content-section { width: min(1380px, calc(100% - 48px)); margin: 0 auto; padding: 54px 0; }
.section-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.section-header h2 { margin: 0; }
.section-header p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.section-header > a { flex: 0 0 auto; color: var(--brand-dark); font-size: 14px; font-weight: 850; }

/* Homepage */
.home-hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr); gap: 42px; align-items: center; width: min(1380px, calc(100% - 48px)); min-height: 510px; margin: 0 auto; padding: 40px 0; }
.hero-content { min-width: 0; }
.hero-content h1 { margin-bottom: 18px; font-size: 64px; }
.hero-content > p { max-width: 620px; margin-bottom: 22px; font-size: 18px; }
.hero-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; max-width: 620px; padding: 7px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.hero-search input { border: 0; box-shadow: none; }
.hero-search button { padding: 0 22px; border: 0; border-radius: 6px; background: var(--brand); color: #fff; font-weight: 900; }
.hero-ctas { display: flex; gap: 10px; margin-top: 14px; }
.hero-ctas > * { min-width: 0; text-align: center; white-space: normal; }
.trust-strip { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; color: var(--muted); font-size: 12px; font-weight: 700; }
.trust-strip span::first-letter { color: var(--brand); }
.hero-image { position: relative; height: 430px; overflow: hidden; border-radius: var(--radius); background: #ece8df; }
.hero-image > img { width: 100%; height: 100%; object-fit: cover; }
.hero-note, .floating-sale { position: absolute; right: 18px; bottom: 18px; display: grid; padding: 14px 18px; border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius); background: rgba(255,255,255,.94); box-shadow: var(--shadow-md); }
.hero-note strong { font-size: 24px; color: var(--brand); }
.hero-note span { color: var(--muted); font-size: 12px; }
.categories-section { padding-top: 24px; }
.category-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.category-card { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; min-height: 74px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .16s, transform .16s, box-shadow .16s; }
.category-card:hover { transform: translateY(-2px); border-color: #9bbcaf; box-shadow: var(--shadow-sm); }
.category-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-size: 12px; font-weight: 950; }
.category-icon svg { width: 21px; height: 21px; }
.category-card span:nth-child(2) { display: grid; min-width: 0; }
.category-card strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.category-card small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.category-card > b { color: var(--muted); }
.discovery { border-top: 1px solid var(--line); }
.product-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.carousel-shell { position: relative; }
.carousel-control { display: none; }
.product-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .16s, box-shadow .16s, border-color .16s; }
.product-card:hover { transform: translateY(-3px); border-color: #bdcbc5; box-shadow: var(--shadow-sm); }
.card-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #edf0ee; }
.card-media > a { display: block; width: 100%; height: 100%; }
.product-photo { width: 100%; height: 100%; overflow: hidden; background: #edf0ee; }
.product-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .24s; }
.product-card:hover .product-photo img, .product-card:hover .atlas-photo { transform: scale(1.025); }
.atlas-photo { background-image: url('/assets/product-atlas.png'); background-repeat: no-repeat; background-size: 600% 600%; background-position: var(--atlas-x) var(--atlas-y); transition: transform .24s; }
.card-badges { position: absolute; left: 8px; top: 8px; display: flex; flex-wrap: wrap; gap: 5px; max-width: calc(100% - 52px); }
.badge { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 7px; border-radius: 4px; background: rgba(255,255,255,.94); color: var(--ink); font-size: 10px; font-weight: 850; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.badge.promoted { background: #ffefbd; color: #765300; }
.favourite-button { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(0,0,0,.08); border-radius: 50%; background: rgba(255,255,255,.96); color: #52615b; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.09); }
.favourite-button svg, .favourite-wide svg { width: 19px; height: 19px; fill: transparent; transition: fill .16s ease, color .16s ease, transform .16s ease; }
.favourite-button.active, .favourite-wide.active { border-color: #fecaca; background: #fff1f2; color: #dc2626; }
.favourite-button.active svg, .favourite-wide.active svg { fill: currentColor; transform: scale(1.06); }
.unavailable-overlay { position: absolute; inset: auto 8px 8px 8px; padding: 8px; border-radius: 5px; background: rgba(23,34,30,.88); color: #fff; text-align: center; font-size: 12px; font-weight: 850; }
.card-body { display: grid; gap: 8px; min-width: 0; padding: 11px; }
.card-title { min-height: 38px; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 800; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-title:hover { color: var(--brand-dark); }
.card-price { display: grid; gap: 2px; }
.card-price strong { font-size: 18px; }
.card-price span { color: var(--muted); font-size: 10px; }
.card-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.card-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-seller { display: flex; align-items: center; gap: 5px; min-width: 0; padding-top: 7px; border-top: 1px solid #edf0ee; color: var(--ink-soft); font-size: 10px; }
.card-seller > span:not(.avatar):not(.verified) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: inline-grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #cce7dc; color: #0a684c; font-size: 12px; font-weight: 900; }
.avatar[data-tone="1"] { background: #f7d7cf; color: #8d3c30; }
.avatar[data-tone="2"] { background: #e4d9f2; color: #61417f; }
.avatar[data-tone="3"] { background: #f4e1b9; color: #78590f; }
.avatar[data-tone="4"] { background: #d5e2ef; color: #365a77; }
.avatar.xs { width: 22px; height: 22px; font-size: 8px; }
.avatar.sm { width: 34px; height: 34px; font-size: 10px; }
.avatar.lg { width: 58px; height: 58px; font-size: 16px; }
.avatar.xl { width: 94px; height: 94px; border: 5px solid #fff; font-size: 25px; box-shadow: var(--shadow-sm); }
.verified { display: inline-grid; flex: 0 0 auto; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 9px; }
.how-section { display: grid; grid-template-columns: 1fr 1fr; width: min(1380px, calc(100% - 48px)); margin: 22px auto 54px; border-radius: var(--radius); overflow: hidden; }
.path-card { padding: 38px; background: var(--ink); color: #fff; }
.path-card p { color: #c9d4cf; }
.path-card .eyebrow, .path-card .text-arrow { color: #7fe0bc; }
.path-card.seller-path { background: var(--warm); color: var(--ink); }
.path-card.seller-path .eyebrow, .path-card.seller-path .text-arrow { color: var(--coral); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 28px 0; }
.steps > div { display: grid; gap: 8px; }
.steps b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; }
.steps span { font-size: 13px; font-weight: 750; }
.seller-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.seller-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.seller-card:hover { border-color: var(--brand); }
.seller-card > div { display: grid; gap: 3px; min-width: 0; }
.seller-card strong, .seller-card span, .seller-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seller-card span, .seller-card small { color: var(--muted); font-size: 12px; }
.trust-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; width: min(1380px, calc(100% - 48px)); margin: 28px auto 64px; padding: 46px; border-radius: var(--radius); background: var(--brand-soft); }
.trust-section > div:first-child p { max-width: 650px; }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trust-item { display: flex; gap: 10px; padding: 15px; border: 1px solid rgba(8,127,91,.16); border-radius: var(--radius); background: rgba(255,255,255,.62); }
.trust-item > span { display: grid; flex: 0 0 auto; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--brand); color: #fff; }
.trust-item p { margin: 3px 0 0; font-size: 12px; line-height: 1.45; }
.seller-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: min(1380px, calc(100% - 48px)); margin: 0 auto 64px; padding: 36px 42px; border-radius: var(--radius); background: var(--coral); color: #fff; }
.seller-cta h2 { margin: 6px 0 0; }

/* Marketplace */
.market-head { padding-top: 30px; }
.breadcrumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--muted); font-size: 12px; }
.breadcrumbs a:hover { color: var(--brand); }
.market-head > div:nth-child(2) { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.market-head h1 { margin-bottom: 8px; font-size: 38px; }
.market-head p { margin: 0; }
.category-shortcuts { display: flex; gap: 8px; margin-top: 20px; padding-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.category-shortcuts a { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; font-size: 12px; font-weight: 750; }
.category-shortcuts a:hover, .category-shortcuts a.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.marketplace { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 26px; padding: 24px 0 70px; border-top: 1px solid var(--line); }
.market-results { min-width: 0; }
.filter-sidebar { position: sticky; top: 164px; align-self: start; max-height: calc(100vh - 184px); padding-right: 14px; overflow-y: auto; }
.filter-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.filter-title h2 { margin: 0; font-size: 19px; }
#filter-close { display: none; }
#filter-form { display: grid; gap: 17px; }
#filter-form > label, #filter-form fieldset { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.two-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.check-list { display: grid; gap: 10px; }
.check-list label, .toggle-row { display: flex; align-items: flex-start; gap: 9px; font-weight: 650; }
.check-list input, .toggle-row input, .rules-check input { flex: 0 0 auto; width: 17px; min-height: 17px; margin-top: 2px; accent-color: var(--brand); }
.clear-filters { text-align: center; color: var(--danger); font-size: 13px; font-weight: 750; }
.results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 46px; margin-bottom: 16px; }
.results-toolbar > label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.results-toolbar select { width: 210px; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.active-filters span { padding: 6px 9px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-dark); font-size: 11px; font-weight: 750; }
.active-filters .muted-chip { background: #e9ecea; color: var(--muted); }
.mobile-filter { display: none; }
.load-more { display: block; min-width: 240px; min-height: 46px; margin: 30px auto 0; border: 1px solid var(--brand); border-radius: var(--radius); background: #fff; color: var(--brand-dark); font-weight: 850; }

/* Product details */
.product-page { padding: 28px 0 70px; }
.product-main { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr); gap: 40px; align-items: start; }
.product-gallery { min-width: 0; }
.detail-photo-wrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: #edf0ee; cursor: zoom-in; }
.detail-photo { width: 100%; height: 100%; }
.detail-photo img, .detail-photo.atlas-photo { transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); transition: transform .22s ease-out; }
.hover-magnifier { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(0,0,0,.14); border-radius: 50%; background: rgba(255,255,255,.94); color: var(--ink); box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transform: translate(-50%, -50%); transition: opacity .14s; }
.hover-magnifier svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .detail-photo-wrap:hover .detail-photo img, .detail-photo-wrap:hover .detail-photo.atlas-photo { transform: scale(1.4); }
  .detail-photo-wrap:hover .hover-magnifier { opacity: 1; }
}
.zoom-button { position: absolute; right: 12px; bottom: 12px; min-height: 38px; padding: 0 13px; border: 1px solid rgba(0,0,0,.14); border-radius: var(--radius); background: rgba(255,255,255,.94); font-size: 12px; font-weight: 800; }
.zoom-button { display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--shadow-sm); }
.zoom-button svg { width: 15px; height: 15px; }
.thumbnail-row { display: flex; gap: 8px; margin-top: 10px; }
.thumbnail { width: 72px; height: 72px; padding: 3px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.thumbnail.active { border: 2px solid var(--brand); }
.thumbnail .product-photo, .thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.product-summary { min-width: 0; }
.detail-kicker, .detail-stats, .secondary-actions { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 12px; }
.detail-kicker span:first-child { color: var(--brand-dark); font-weight: 850; }
.product-summary h1 { margin: 12px 0 10px; font-size: 36px; }
.price-box { margin: 22px 0 16px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.main-price { display: block; margin-bottom: 13px; font-size: 34px; }
.price-breakdown { display: grid; gap: 9px; }
.price-breakdown > div { display: flex; justify-content: space-between; gap: 20px; color: var(--ink-soft); font-size: 14px; }
.price-breakdown > div strong { color: var(--ink); }
.price-breakdown .service-cost strong { color: var(--muted); font-size: 12px; font-weight: 750; }
.price-breakdown .price-total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 18px; }
.price-breakdown .price-total strong { color: var(--brand-dark); }
.price-breakdown p { margin: 5px 0 0; padding: 10px; border-radius: 6px; background: var(--brand-soft); font-size: 11px; line-height: 1.5; }
.price-breakdown.compact { gap: 5px; }
.price-breakdown.compact > div { font-size: 12px; }
.price-breakdown.compact .price-total { font-size: 15px; }
.purchase-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.favourite-wide { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 190px; }
.secondary-actions { justify-content: center; margin: 10px 0 18px; }
.secondary-actions button { padding: 8px; border: 0; background: transparent; text-decoration: underline; }
.delivery-box { display: grid; gap: 11px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.delivery-box > div { display: flex; justify-content: space-between; gap: 14px; }
.delivery-box span { color: var(--muted); font-size: 12px; text-align: right; }
.delivery-box p { margin: 2px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; }
.seller-panel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.seller-panel > div { display: grid; gap: 3px; min-width: 0; }
.seller-panel span, .seller-panel small { color: var(--muted); font-size: 11px; }
.seller-panel > b { color: var(--brand-dark); font-size: 11px; }
.detail-content { display: grid; grid-template-columns: 1fr 350px; gap: 48px; margin-top: 48px; padding: 38px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.product-information { min-width: 0; }
.description-copy { padding: 0 0 28px; border-bottom: 1px solid var(--line); }
.description-copy h2 { margin: 4px 0 10px; font-size: 30px; }
.description-copy p { max-width: 900px; margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.75; white-space: pre-line; }
.details-heading { display: flex; align-items: center; gap: 11px; margin: 26px 0 13px; }
.details-heading > svg { width: 25px; height: 25px; color: var(--brand); }
.details-heading h3 { margin: 0; font-size: 18px; }
.details-heading p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.detail-content aside { align-self: start; padding: 22px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.product-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.product-facts > div { display: grid; grid-template-columns: minmax(120px, .72fr) minmax(120px, 1fr); align-items: center; gap: 12px; min-height: 58px; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.product-facts > div:nth-child(odd) { border-right: 1px solid var(--line); }
.product-facts > div:last-child, .product-facts > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.product-facts > div:last-child:nth-child(odd) { border-right: 0; }
.product-facts dt { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 650; }
.product-facts dt svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--brand); }
.product-facts dd { margin: 0; color: var(--ink); font-size: 12px; font-weight: 850; }
.detail-related { padding-top: 46px; }
.mobile-buy-bar { display: none; }
.lightbox-open { overflow: hidden; }
.product-lightbox { position: fixed; inset: 0; z-index: 180; display: grid; grid-template-rows: 62px minmax(0, 1fr) 82px 28px; background: rgba(9,14,12,.97); color: #fff; }
.product-lightbox > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.product-lightbox > header > div:first-child { display: grid; min-width: 0; }
.product-lightbox > header strong { overflow: hidden; max-width: min(620px, 55vw); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.product-lightbox > header span { color: #aebbb5; font-size: 10px; }
.lightbox-tools { display: flex; align-items: center; gap: 5px; }
.lightbox-tools button, .lightbox-nav { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; background: rgba(255,255,255,.08); color: #fff; font-size: 10px; font-weight: 800; }
.lightbox-tools button:hover, .lightbox-nav:hover { background: rgba(255,255,255,.16); }
.lightbox-tools svg, .lightbox-nav svg { width: 19px; height: 19px; }
.lightbox-stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; }
.lightbox-media { display: grid; place-items: center; width: 100%; height: 100%; cursor: zoom-in; touch-action: none; }
.lightbox-media.zoomed { cursor: grab; }
.lightbox-media.zoomed:active { cursor: grabbing; }
.lightbox-photo { display: block; width: auto; height: auto; max-width: min(88vw, 1500px); max-height: min(72vh, 900px); object-fit: contain; object-position: center; user-select: none; transition: transform .14s ease-out; will-change: transform; }
.lightbox-photo.atlas-photo { width: min(88vw, 1200px); height: auto; aspect-ratio: 4 / 3; max-height: min(72vh, 900px); background-color: transparent; }
.lightbox-nav { position: absolute; top: 50%; width: 46px; height: 58px; transform: translateY(-50%); }
.lightbox-nav.previous { left: 18px; }
.lightbox-nav.next { right: 18px; }
.product-lightbox > footer { display: flex; justify-content: center; gap: 7px; padding: 8px 18px; overflow-x: auto; border-top: 1px solid rgba(255,255,255,.1); }
.product-lightbox > footer button { flex: 0 0 auto; width: 62px; height: 62px; padding: 3px; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 5px; background: #1c2421; opacity: .65; }
.product-lightbox > footer button.active { border: 2px solid #50c59c; opacity: 1; }
.product-lightbox > footer .product-photo { width: 100%; height: 100%; border-radius: 3px; }
.lightbox-hint { margin: 0; color: #96a49e; font-size: 9px; text-align: center; }

/* Seller */
.seller-page { padding: 28px 0 70px; }
.seller-hero { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.seller-cover { height: 150px; background: linear-gradient(120deg, #dceee6, #fff0e5); }
.seller-identity { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 0 26px 24px; }
.seller-identity > .avatar { margin-top: -45px; }
.seller-identity h1 { margin: 14px 0 4px; font-size: 30px; }
.seller-identity p { margin: 0; font-size: 13px; }
.seller-metrics { display: flex; gap: 28px; margin-top: 16px; }
.seller-metrics span { display: grid; color: var(--muted); font-size: 11px; }
.seller-metrics strong { color: var(--ink); font-size: 18px; }
.profile-tabs, .status-tabs { display: flex; gap: 2px; margin: 20px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.profile-tabs a, .profile-tabs button, .status-tabs button { flex: 0 0 auto; padding: 12px 16px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 13px; font-weight: 800; }
.profile-tabs .active, .status-tabs .active { border-color: var(--brand); color: var(--brand-dark); }
.content-section.no-pad { width: 100%; padding: 10px 0; }

/* Sell */
.sell-hero { display: grid; grid-template-columns: 1fr .8fr; gap: 56px; align-items: center; min-height: 470px; padding-top: 46px; padding-bottom: 46px; }
.sell-hero h1 { font-size: 52px; }
.sell-hero > div:first-child > p { max-width: 610px; font-size: 17px; }
.sell-benefits { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 22px; color: var(--muted); font-size: 12px; font-weight: 750; }
.sell-visual { position: relative; height: 390px; overflow: hidden; border-radius: var(--radius); }
.sell-visual .product-photo { height: 100%; }
.floating-sale span { color: var(--muted); font-size: 11px; }
.floating-sale strong { color: var(--brand-dark); font-size: 22px; }
.sell-steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sell-steps > div { padding: 32px 22px; border-right: 1px solid var(--line); }
.sell-steps > div:last-child { border: 0; }
.step-number { color: var(--coral); font-size: 12px; font-weight: 900; }
.sell-steps h3 { margin-top: 16px; }
.sell-steps p { margin: 0; font-size: 13px; }
.earnings-section { display: grid; grid-template-columns: 1fr 420px; gap: 70px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.earnings-section aside { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.range-row { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.range-row input { flex: 1; padding: 0; accent-color: var(--brand); }
.range-row output { min-width: 100px; font-size: 24px; font-weight: 900; text-align: right; }
.seller-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding: 54px 0; border-top: 1px solid var(--line); }
.seller-rules li { margin-bottom: 12px; color: var(--ink-soft); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 16px 34px 16px 0; font-weight: 800; cursor: pointer; }
.faq-list p { margin-bottom: 18px; font-size: 14px; }
.sticky-sell-cta { display: none; }

/* Wizard */
.wizard-page { padding: 36px 0 76px; }
.wizard-head { display: flex; justify-content: space-between; gap: 20px; }
.wizard-head h1 { margin-bottom: 8px; font-size: 38px; }
.wizard-progress { display: grid; grid-template-columns: repeat(6, 1fr); margin: 26px 0 34px; padding: 0; list-style: none; }
.wizard-progress li { position: relative; display: grid; justify-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 750; text-align: center; }
.wizard-progress li::before { position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--line); content: ""; }
.wizard-progress li:first-child::before { display: none; }
.wizard-progress b { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--line); border-radius: 50%; background: var(--canvas); }
.wizard-progress .active, .wizard-progress .done { color: var(--brand-dark); }
.wizard-progress .active b, .wizard-progress .done b { border-color: var(--brand); background: var(--brand); color: #fff; }
.wizard-progress .done::before, .wizard-progress .active::before { background: var(--brand); }
.wizard-step { display: grid; grid-template-columns: 320px minmax(0, 760px); gap: 60px; justify-content: center; min-height: 430px; }
.wizard-step[hidden] { display: none; }
.step-copy { padding-top: 18px; }
.step-copy p, .step-copy li { font-size: 13px; }
.step-copy ul { padding-left: 18px; color: var(--muted); }
.form-card { display: grid; gap: 18px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.char-count { float: right; color: var(--muted); font-size: 11px; font-weight: 500; }
.upload-zone { display: grid; place-items: center; min-height: 240px; padding: 28px; border: 2px dashed #9cb5aa; border-radius: var(--radius); background: #f7fbf9; text-align: center; cursor: pointer; }
.upload-zone:hover { border-color: var(--brand); background: var(--brand-soft); }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-zone strong { font-size: 18px; }
.upload-zone span { margin-top: 8px; color: var(--muted); font-size: 12px; }
.upload-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 12px; }
.upload-thumb { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: #e7ebe9; }
.upload-thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload-thumb > span { position: absolute; left: 5px; top: 5px; padding: 3px 6px; border-radius: 4px; background: rgba(255,255,255,.9); font-size: 9px; font-weight: 800; }
.upload-thumb > div { position: absolute; left: 5px; right: 5px; bottom: 5px; display: flex; justify-content: center; gap: 3px; }
.upload-thumb button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); font-size: 14px; }
.price-input { position: relative; }
.price-input input { padding-right: 56px; font-size: 24px; font-weight: 900; }
.price-input span { position: absolute; right: 14px; top: 14px; color: var(--muted); }
.delivery-note { display: flex; justify-content: space-between; padding: 14px; border-radius: var(--radius); background: var(--brand-soft); font-size: 12px; }
.preview-product { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.preview-product > div { min-height: 390px; }
.preview-product article h2 { font-size: 26px; }
.publish-check { display: grid; justify-items: center; align-content: center; min-height: 380px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-align: center; }
.success-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 32px; }
.publish-check > div { display: flex; gap: 10px; margin-top: 20px; }
.wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1140px; margin: 24px auto 0; padding-top: 20px; border-top: 1px solid var(--line); }
#autosave-status { color: var(--muted); font-size: 11px; }

/* Auth */
.auth-page { display: grid; grid-template-columns: .9fr 1.1fr; min-height: calc(100vh - var(--header-height)); background: #fff; }
.auth-story { display: flex; flex-direction: column; justify-content: space-between; min-height: 720px; padding: 44px max(40px, calc((100vw - 1380px) / 2)); padding-right: 50px; background: var(--ink); color: #fff; }
.auth-story h1 { font-size: 47px; }
.auth-story p { color: #cbd7d1; }
.auth-trust { display: flex; flex-wrap: wrap; gap: 16px; color: #d8e7e0; font-size: 12px; }
.auth-panel { display: grid; place-items: center; padding: 40px; background: var(--canvas); }
.auth-card { width: min(100%, 570px); padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.auth-card h2 { font-size: 30px; }
.auth-card > p { margin-bottom: 24px; font-size: 14px; }
.auth-card form { display: grid; gap: 15px; }
.google-auth { margin: 20px 0; }
#google-signin { display: flex; justify-content: center; width: 100%; min-height: 44px; overflow: hidden; }
.google-setup-button { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; min-height: 46px; border: 1px solid #c9cfcc; border-radius: 6px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 800; }
.google-setup-button:hover:not(:disabled) { border-color: #8d9994; background: #f8faf9; }
.google-mark { display: grid; place-items: center; width: 22px; height: 22px; color: #4285f4; font-family: Arial, sans-serif; font-size: 18px; font-weight: 800; }
.google-helper { margin: 7px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin-top: 17px; color: var(--muted); font-size: 10px; text-align: center; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-divider span { white-space: nowrap; }
.google-doc-link { display: inline-flex; align-items: center; gap: 5px; }
.google-doc-link svg { width: 14px; height: 14px; }
.form-link { margin-top: -7px; color: var(--brand-dark); font-size: 12px; font-weight: 750; text-align: right; }
.demo-login { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.demo-login span { color: var(--muted); font-size: 11px; }
.demo-login button { min-height: 34px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 11px; font-weight: 800; }
.auth-switch { margin: 20px 0 0; text-align: center; font-size: 13px; }
.auth-switch a { color: var(--brand-dark); font-weight: 850; }

/* Dashboard */
.dashboard-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 30px; padding: 34px 0 76px; }
.dashboard-sidebar { position: sticky; top: 164px; align-self: start; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.dashboard-user { display: flex; gap: 10px; align-items: center; padding: 18px; border-bottom: 1px solid var(--line); }
.dashboard-user > div { display: grid; min-width: 0; }
.dashboard-user strong, .dashboard-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-user span { color: var(--muted); font-size: 10px; }
.dashboard-sidebar nav { display: grid; padding: 8px; }
.dashboard-sidebar nav a { display: flex; justify-content: space-between; padding: 10px; border-radius: 6px; color: var(--ink-soft); font-size: 12px; font-weight: 750; }
.dashboard-sidebar nav a:hover, .dashboard-sidebar nav a.active { background: var(--brand-soft); color: var(--brand-dark); }
.dashboard-sidebar nav b { display: grid; place-items: center; min-width: 19px; height: 19px; border-radius: 10px; background: var(--coral); color: #fff; font-size: 9px; }
.logout-button { width: 100%; padding: 13px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--danger); font-size: 12px; font-weight: 800; text-align: left; }
.dashboard-main { min-width: 0; }
.dashboard-title { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.dashboard-title h1 { margin-bottom: 5px; font-size: 35px; }
.dashboard-title p { margin: 0; font-size: 13px; }
.metric-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 20px; }
.metric-card { position: relative; display: grid; gap: 5px; min-height: 108px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.metric-card:hover { border-color: var(--brand); }
.metric-card strong { font-size: 28px; }
.metric-card span { color: var(--muted); font-size: 11px; }
.metric-card b { position: absolute; right: 12px; bottom: 10px; color: var(--brand); }
.dashboard-columns { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
.dashboard-panel { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-head h2 { margin: 0; font-size: 19px; }
.panel-head a { color: var(--brand-dark); font-size: 11px; font-weight: 800; }
.list-rows { display: grid; }
.list-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list-row:last-child { border: 0; }
.list-row > .product-photo { width: 54px; height: 54px; border-radius: 6px; }
.list-row > div:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.list-row a:first-child { overflow: hidden; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.list-row span, .list-row small { color: var(--muted); font-size: 10px; }
.row-action, .row-menu a, .row-menu button { border: 0; background: transparent; color: var(--brand-dark); font-size: 11px; font-weight: 750; }
.row-menu { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; max-width: 240px; }
.danger-text { color: var(--danger) !important; }
.status { display: inline-flex; align-items: center; width: max-content; min-height: 22px; padding: 3px 7px; border-radius: 12px; background: #e9ecea; color: var(--ink-soft); font-size: 9px; font-weight: 850; }
.status-active, .status-completed, .status-delivered, .status-accepted, .status-reviewed, .status-resolved { background: #dff3e9; color: #056044; }
.status-pending, .status-preparing, .status-countered { background: #fff0c9; color: #775600; }
.status-reserved, .status-shipped, .status-confirmed { background: #dcecf7; color: #315e7b; }
.status-rejected, .status-removed, .status-cancelled, .status-blocked, .status-withdrawn, .status-actioned { background: #fae0dd; color: #95352d; }
.profile-form { display: grid; gap: 18px; max-width: 820px; }
.order-stack { display: grid; gap: 10px; }
.order-card { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.order-card > .product-photo { width: 88px; height: 88px; border-radius: 6px; }
.order-main > div:first-child { display: flex; align-items: center; gap: 8px; }
.order-ref { color: var(--muted); font-size: 10px; font-weight: 800; }
.order-main h3 { margin: 6px 0 3px; }
.order-main p, .order-main small { margin: 0; color: var(--muted); font-size: 11px; }
.order-actions { display: grid; gap: 7px; }
.order-actions a, .order-actions button { min-height: 32px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 10px; font-weight: 800; text-align: center; }
.notification-list { display: grid; }
.notification-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; padding: 14px 8px; border-bottom: 1px solid var(--line); }
.notification-item.unread { background: #f2faf6; }
.notification-item > span { color: var(--brand); }
.notification-item strong { font-size: 13px; }
.notification-item p { margin: 3px 0; font-size: 11px; line-height: 1.4; }
.notification-item small { color: var(--muted); font-size: 10px; }
.messages-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 570px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.conversation-list { border-right: 1px solid var(--line); }
.conversation-list > button { display: grid; grid-template-columns: auto 1fr; gap: 9px; width: 100%; padding: 12px; border: 0; border-bottom: 1px solid var(--line); background: #fff; text-align: left; }
.conversation-list > button:hover { background: var(--brand-soft); }
.conversation-list button > div { display: grid; min-width: 0; }
.conversation-list strong, .conversation-list span, .conversation-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-list span, .conversation-list small { color: var(--muted); font-size: 10px; }
.conversation-view { display: grid; grid-template-rows: auto auto 1fr auto; min-width: 0; }
.conversation-view > header { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.conversation-view header > div { display: grid; }
.conversation-view header span { color: var(--muted); font-size: 10px; }
.conversation-view header button { margin-left: auto; border: 0; background: transparent; color: var(--danger); font-size: 11px; }
.conversation-product { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; margin: 10px; padding: 8px; border-radius: 6px; background: var(--canvas); }
.conversation-product .product-photo { width: 52px; height: 52px; border-radius: 5px; }
.conversation-product > div { display: grid; }
.conversation-product span { color: var(--brand-dark); font-size: 11px; }
.message-thread { display: flex; flex-direction: column; gap: 8px; padding: 16px; overflow-y: auto; }
.message { align-self: start; max-width: 76%; }
.message.mine { align-self: end; }
.message p { margin: 0; padding: 9px 12px; border-radius: 8px 8px 8px 2px; background: #e9ecea; font-size: 12px; line-height: 1.45; }
.message.mine p { background: var(--brand); color: #fff; border-radius: 8px 8px 2px 8px; }
.message span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; text-align: right; }
#message-form { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 12px; border-top: 1px solid var(--line); }
#message-form button { padding: 0 16px; border: 0; border-radius: 6px; background: var(--brand); color: #fff; font-weight: 800; }
.settings-list { display: grid; gap: 18px; max-width: 750px; }
.settings-list > div { padding-top: 15px; border-top: 1px solid var(--line); }
.settings-list p { margin: 6px 0; font-size: 12px; }

/* Checkout */
.checkout-page { padding: 30px 0 70px; }
.checkout-head h1 { font-size: 38px; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 28px; align-items: start; }
.checkout-sections { display: grid; gap: 10px; }
.checkout-section { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.checkout-section > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-size: 12px; font-weight: 900; }
.checkout-section h2 { margin: 3px 0 16px; font-size: 18px; }
.checkout-product { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center; }
.checkout-product .product-photo { width: 80px; height: 80px; border-radius: 6px; }
.checkout-product p { margin: 4px 0; font-size: 11px; }
.checkout-product a { color: var(--brand-dark); font-size: 10px; font-weight: 800; }
.payment-option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-bottom: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.payment-option.active { border-color: var(--brand); background: var(--brand-soft); }
.payment-option > input { width: 18px; min-height: 18px; accent-color: var(--brand); }
.payment-option > span { display: grid; }
.payment-option small { color: var(--muted); font-size: 11px; }
.payment-option > b { font-size: 10px; }
.order-summary { position: sticky; top: 164px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.rules-check { display: flex; align-items: flex-start; gap: 8px; margin: 20px 0 14px; font-size: 11px; font-weight: 600; }
.rules-check a { color: var(--brand-dark); text-decoration: underline; }
.safe-note { margin: 12px 0 0; font-size: 10px; text-align: center; }
.success-page { display: grid; justify-items: center; width: min(720px, calc(100% - 32px)); margin: 70px auto; padding: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-align: center; }
.success-page h1 { font-size: 38px; }
.success-reference { display: grid; margin: 10px 0 18px; padding: 12px 40px; border-radius: var(--radius); background: var(--brand-soft); }
.success-reference span { color: var(--muted); font-size: 10px; }
.success-reference strong { font-size: 20px; }
.success-product { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; min-width: 330px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); text-align: left; }
.success-product .product-photo { width: 64px; height: 64px; border-radius: 5px; }
.success-product > div { display: grid; }
.success-product span { color: var(--muted); font-size: 11px; }
.success-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; margin: 28px 0; }
.success-steps span { padding: 9px 5px; border-top: 3px solid var(--line); color: var(--muted); font-size: 10px; }
.success-steps .done { border-color: var(--brand); color: var(--brand-dark); }

/* Marketplace extensions */
.save-search-button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--brand-dark); font-size: 10px; font-weight: 850; white-space: nowrap; }
.save-search-button svg, .purchase-actions .button svg, .negotiated-note svg { width: 14px; height: 14px; }
.offer-button { border-color: #b4d8cb; background: #eef8f4; color: var(--brand-dark); }
.reservation-note, .negotiated-note { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 10px 12px; border-left: 3px solid #d5a637; background: #fff9e8; color: #614810; font-size: 11px; font-weight: 700; }
.reservation-note svg { width: 15px; height: 15px; }
.seller-reviews-section { padding: 36px 0; border-top: 1px solid var(--line); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.review-grid article { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.review-grid article > div { display: flex; align-items: center; gap: 8px; }
.review-grid article > div > div { display: grid; }
.review-grid article time { margin-left: auto; color: var(--muted); font-size: 9px; }
.review-grid article span { color: #c28a00; font-size: 11px; letter-spacing: 0; }
.review-grid article p { min-height: 42px; margin: 14px 0; font-size: 11px; }
.review-grid article > small { color: var(--brand-dark); font-size: 9px; font-weight: 800; }
.store-hero { color: #fff; background: var(--store-accent); }
.store-hero > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 26px; min-height: 300px; padding-top: 38px; padding-bottom: 38px; }
.store-hero .eyebrow, .store-hero small { color: rgba(255,255,255,.78); }
.store-hero h1 { margin: 4px 0 8px; color: #fff; font-size: 44px; }
.store-hero p { max-width: 620px; margin: 0 0 10px; color: #fff; }
.store-badge { display: grid; justify-items: center; gap: 8px; }
.store-badge .avatar { width: 92px; height: 92px; border: 4px solid rgba(255,255,255,.8); font-size: 28px; }
.store-badge > span { padding: 5px 8px; border-radius: 4px; background: rgba(0,0,0,.18); font-size: 9px; font-weight: 800; }
.button.light { border-color: rgba(255,255,255,.5); background: #fff; color: var(--ink); }
.store-metrics { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: -22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.store-metrics span { display: grid; gap: 2px; padding: 17px; border-right: 1px solid var(--line); color: var(--muted); font-size: 9px; text-align: center; }
.store-metrics span:last-child { border-right: 0; }
.store-metrics strong { color: var(--ink); font-size: 18px; }
.profile-tabs { display: flex; gap: 22px; margin-top: 28px; border-bottom: 1px solid var(--line); }
.profile-tabs a, .profile-tabs button { padding: 12px 0; color: var(--muted); font-size: 11px; font-weight: 800; }
.profile-tabs a.active, .profile-tabs button.active { border-bottom: 2px solid var(--brand); color: var(--brand-dark); }
.content-section.no-pad { padding-top: 28px; }
.store-reviews { padding-top: 44px; }
.store-about { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding-top: 45px; padding-bottom: 65px; }
.store-about > div:last-child { display: grid; gap: 12px; }

/* Account extensions */
.offer-list, .saved-search-list { display: grid; gap: 10px; }
.offer-card { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.offer-card > .product-photo { width: 86px; height: 86px; border-radius: 6px; }
.offer-main { display: grid; gap: 3px; min-width: 0; }
.offer-main > div { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; }
.offer-main h3 { margin: 2px 0; font-size: 15px; }
.offer-main p, .offer-main small { margin: 0; color: var(--muted); font-size: 10px; }
.offer-main > strong { margin-top: 4px; color: var(--brand-dark); font-size: 19px; }
.offer-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; max-width: 330px; }
.offer-actions .button { min-height: 34px; padding: 6px 10px; font-size: 9px; }
.text-action { padding: 7px; border: 0; background: transparent; font-size: 9px; font-weight: 800; }
.performance-list { display: grid; gap: 11px; margin-top: 18px; }
.performance-list a { display: grid; grid-template-columns: minmax(140px, 260px) 1fr 42px; align-items: center; gap: 12px; font-size: 11px; }
.performance-list a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.performance-list i, .distribution-bars i { height: 7px; overflow: hidden; border-radius: 4px; background: #e8ecea; }
.performance-list i b, .distribution-bars i b { display: block; height: 100%; background: var(--brand); }
.performance-list strong { text-align: right; }
.analytics-advice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.analytics-advice > div { display: grid; grid-template-columns: 28px 1fr; gap: 2px 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.analytics-advice svg { grid-row: 1 / 3; width: 22px; color: var(--brand); }
.analytics-advice p { margin: 0; font-size: 10px; }
.saved-search-list article { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 36px; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.saved-search-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); }
.saved-search-icon svg { width: 19px; }
.saved-search-list p { margin: 4px 0; color: var(--muted); font-size: 10px; }
.saved-search-list small { color: var(--brand-dark); font-size: 9px; }
.tracking-details { margin-top: 12px; }
.tracking-details summary { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-dark); cursor: pointer; font-size: 10px; font-weight: 800; }
.tracking-details summary svg { width: 14px; }
.tracking-timeline { display: grid; gap: 0; margin: 12px 0 0 5px; }
.tracking-timeline > div { display: grid; grid-template-columns: 14px 1fr; gap: 7px; min-height: 42px; }
.tracking-timeline i { position: relative; width: 8px; height: 8px; margin-top: 3px; border: 2px solid var(--brand); border-radius: 50%; }
.tracking-timeline i::after { position: absolute; top: 8px; left: 1px; width: 2px; height: 32px; background: var(--line); content: ""; }
.tracking-timeline > div:last-child i::after { display: none; }
.tracking-timeline .current i { background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.tracking-timeline span { display: grid; }
.tracking-timeline small { color: var(--muted); font-size: 9px; }
.reviewed-label { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-dark); font-size: 9px; font-weight: 800; }
.reviewed-label svg { width: 13px; }

/* Admin */
.admin-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: calc(100vh - var(--header-height)); background: #eef1ef; }
.admin-sidebar { position: sticky; top: var(--header-height); align-self: start; display: flex; flex-direction: column; height: calc(100vh - var(--header-height)); padding: 18px 12px; background: var(--ink); color: #fff; }
.admin-sidebar > div { display: flex; align-items: center; gap: 9px; padding: 0 8px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.admin-sidebar .brand-mark { width: 30px; height: 30px; font-size: 14px; }
.admin-sidebar nav { display: grid; gap: 2px; padding: 14px 0; }
.admin-sidebar nav a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 6px; color: #cbd6d1; font-size: 12px; font-weight: 700; }
.admin-sidebar nav a svg, .admin-logout svg { flex: 0 0 auto; width: 15px; height: 15px; }
.admin-sidebar nav a.active, .admin-sidebar nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.admin-logout { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 10px; border: 0; background: transparent; color: #cbd6d1; font-size: 11px; text-align: left; }
.admin-logout:hover { color: #fff; }
.admin-main { min-width: 0; padding: 30px; overflow: hidden; }
.admin-title { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 22px; }
.admin-title h1 { margin-bottom: 4px; font-size: 34px; }
.admin-title p { margin: 0; font-size: 12px; }
.admin-title > span { color: var(--muted); font-size: 10px; }
.admin-metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.admin-metrics > div { display: grid; gap: 5px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.admin-metrics span, .admin-metrics small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.admin-metrics strong { overflow: hidden; font-size: 22px; text-overflow: ellipsis; white-space: nowrap; }
.admin-columns { display: grid; grid-template-columns: 1.4fr .6fr; gap: 14px; margin-bottom: 14px; }
.admin-panel { min-width: 0; margin-bottom: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 10px 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; text-align: left; text-transform: uppercase; }
td { padding: 10px 8px; border-bottom: 1px solid var(--line); font-size: 11px; vertical-align: middle; }
td > small, td > span { display: block; color: var(--muted); font-size: 9px; }
.table-product, .user-cell { display: flex; align-items: center; gap: 9px; min-width: 180px; }
.table-product .product-photo { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 5px; }
.table-product > div, .user-cell > div { display: grid; min-width: 0; }
.table-product a, .user-cell strong { overflow: hidden; max-width: 190px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.table-product span, .user-cell span { color: var(--muted); font-size: 9px; }
.table-actions { display: flex; flex-wrap: wrap; gap: 4px; min-width: 150px; }
.table-actions a, .table-actions button { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font-size: 9px; font-weight: 750; }
.table-actions svg { width: 12px; height: 12px; }
.table-product-title { padding: 0; border: 0; background: transparent; font-size: inherit; font-weight: 850; text-align: left; }
.table-product-title:hover { color: var(--brand-dark); text-decoration: underline; }
.admin-product-preview { display: grid; grid-template-columns: 180px 1fr; gap: 18px; }
.admin-product-preview > .product-photo { width: 180px; aspect-ratio: 1; border-radius: 6px; }
.admin-product-preview p { margin: 10px 0; font-size: 12px; }
.admin-product-preview dl { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; }
.admin-product-preview dl div, .admin-price-details span { display: flex; justify-content: space-between; gap: 10px; }
.admin-product-preview dt { color: var(--muted); font-size: 11px; }
.admin-product-preview dd { margin: 0; font-size: 11px; font-weight: 750; }
.admin-price-details { display: grid; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; }
.admin-price-details span:last-child { padding-top: 7px; border-top: 1px solid var(--line); font-size: 13px; }
.fee-bars { display: grid; gap: 13px; }
.fee-bars > div { display: grid; grid-template-columns: 100px 1fr 54px; align-items: center; gap: 8px; font-size: 10px; }
.fee-bars i { height: 6px; overflow: hidden; border-radius: 3px; background: #e8ecea; }
.fee-bars b { display: block; height: 100%; background: var(--brand); }
.audit-list { display: grid; }
.audit-list > div { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.audit-list > div > span { color: var(--brand); font-size: 7px; }
.audit-list p { display: grid; margin: 0; }
.audit-list strong { font-size: 11px; text-transform: capitalize; }
.audit-list small, .audit-list time { color: var(--muted); font-size: 9px; }
.report-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.report-list article { padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); }
.report-list article > div:first-child, .report-list article > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.report-list small { color: var(--muted); font-size: 9px; }
.report-list h3 { margin-top: 14px; }
.report-list p { font-size: 11px; }
.report-list .button { min-height: 32px; padding: 6px 9px; font-size: 9px; }
.settings-form { max-width: 880px; }
.settings-form .button { margin-top: 18px; }
.category-admin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.category-admin-grid > div { display: grid; justify-items: center; gap: 7px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.category-admin-grid span:not(.category-icon) { color: var(--muted); font-size: 10px; }
.category-admin-grid button { border: 0; background: transparent; color: var(--brand-dark); font-size: 10px; font-weight: 800; }
.admin-sidebar nav { min-height: 0; overflow-y: auto; }
.admin-overview-strip, .analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-overview-strip { margin-bottom: 14px; }
.trend-chart { display: flex; align-items: end; gap: 10px; height: 190px; padding-top: 28px; }
.trend-chart > div { position: relative; display: grid; grid-template-rows: 1fr 18px; justify-items: center; align-items: end; flex: 1; height: 100%; }
.trend-chart i { width: min(38px, 70%); min-height: 5px; border-radius: 4px 4px 1px 1px; background: var(--brand); }
.trend-chart small { color: var(--muted); font-size: 9px; }
.trend-value { position: absolute; top: -22px; color: var(--ink-soft); font-size: 8px; font-weight: 800; white-space: nowrap; }
.distribution-bars { display: grid; gap: 11px; margin-top: 14px; }
.distribution-bars > div { display: grid; grid-template-columns: 110px 1fr 38px; align-items: center; gap: 9px; font-size: 10px; }
.distribution-bars > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.distribution-bars strong { text-align: right; }
.security-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding: 16px 18px; border: 1px solid #ead6a4; border-radius: var(--radius); background: #fff9e8; }
.security-summary > div { display: flex; align-items: center; gap: 10px; }
.security-summary svg { width: 24px; color: #9b6b00; }
.security-summary strong { margin-right: 4px; font-size: 22px; }
.security-summary p { margin: 0; font-size: 10px; }
.security-list { display: grid; gap: 9px; }
.security-list article { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 0; }
.security-list article.handled { opacity: .68; }
.risk-score { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fff1ee; color: var(--danger); }
.risk-score strong { font-size: 20px; }
.risk-score span { font-size: 8px; text-transform: uppercase; }
.security-meta { display: flex; align-items: center; gap: 8px; }
.security-meta > span:last-child { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.security-list h3 { margin: 5px 0 2px; font-size: 14px; }
.security-list p { margin: 0 0 5px; font-size: 10px; }
.security-list small { color: var(--muted); font-size: 9px; }
.security-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 4px; max-width: 310px; }
.security-actions button { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font-size: 9px; font-weight: 750; }
.security-actions svg { width: 12px; }

/* Static, contact, states */
.static-hero { width: min(900px, calc(100% - 48px)); margin: 0 auto; padding: 70px 0 44px; text-align: center; }
.static-hero.compact { padding-bottom: 20px; }
.static-hero h1 { font-size: 48px; }
.static-hero p { max-width: 660px; margin: 0 auto; font-size: 17px; }
.static-content { width: min(900px, calc(100% - 48px)); margin: 0 auto 60px; border-top: 1px solid var(--line); }
.static-content article { display: grid; grid-template-columns: 60px 1fr; gap: 18px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.static-content article > span { color: var(--coral); font-size: 12px; font-weight: 900; }
.static-content h2 { font-size: 22px; }
.static-content p { margin: 0; }
.static-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: min(900px, calc(100% - 48px)); margin: 0 auto 70px; padding: 28px; border-radius: var(--radius); background: var(--brand-soft); }
.static-cta h2 { margin: 0; }
.static-cta > div { display: flex; gap: 8px; }
.faq-page { width: min(800px, calc(100% - 48px)); margin: 0 auto 70px; padding: 20px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.contact-page { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; padding: 70px 0; }
.contact-page h1 { font-size: 46px; }
.contact-details { display: grid; gap: 8px; margin-top: 30px; }
.contact-details > * { display: grid; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-details span { color: var(--muted); font-size: 12px; }
.contact-form { display: grid; gap: 15px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.all-categories { padding: 20px 0 70px; }
.category-grid.large { grid-template-columns: repeat(4, 1fr); }
.category-grid.large .category-card { min-height: 92px; }
.empty-state { display: grid; justify-items: center; align-content: center; min-height: 300px; padding: 32px; grid-column: 1 / -1; text-align: center; }
.empty-state > span { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 15px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--muted); font-size: 28px; }
.empty-state h2 { margin-bottom: 6px; font-size: 22px; }
.empty-state p { max-width: 500px; font-size: 13px; }
.empty-actions { display: flex; gap: 8px; }

/* Loading, toast, modal, assistant */
.skeleton { overflow: hidden; border-radius: var(--radius); background: linear-gradient(90deg, #e8ecea 25%, #f5f7f6 50%, #e8ecea 75%); background-size: 200% 100%; animation: skeleton 1.3s infinite; }
.skeleton-title { width: 320px; height: 46px; margin: 40px 0 24px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.skeleton-card { height: 330px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.skeleton-card span { display: block; aspect-ratio: 1; background: #e8ecea; }
.skeleton-card i, .skeleton-card b { display: block; width: 80%; height: 12px; margin: 15px 12px; border-radius: 4px; background: #e8ecea; }
.skeleton-card b { width: 45%; }
.skeleton-list { height: 300px; margin: 12px; }
@keyframes skeleton { to { background-position: -200% 0; } }
.toast-root { position: fixed; right: 18px; top: 160px; z-index: 150; display: grid; gap: 8px; width: min(360px, calc(100% - 32px)); }
.toast { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); animation: toastIn .2s ease; }
.toast.error { border-left-color: var(--danger); }
.toast.info { border-left-color: #4a7897; }
.toast > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-size: 12px; font-weight: 900; }
.toast p { margin: 0; font-size: 12px; line-height: 1.4; }
.toast button { border: 0; background: transparent; font-size: 18px; }
@keyframes toastIn { from { transform: translateY(-8px); opacity: 0; } }
.modal-backdrop { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 18px; background: rgba(15,24,20,.58); }
.modal { position: relative; width: min(540px, 100%); max-height: 88vh; overflow-y: auto; padding: 26px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); }
.modal > .modal-close { position: absolute; right: 10px; top: 10px; }
.modal h2 { padding-right: 36px; }
.modal-actions { display: flex; justify-content: end; gap: 8px; margin-top: 22px; }
.chat-launcher { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: grid; place-items: center; width: 54px; height: 54px; border: 3px solid #fff; border-radius: 50%; background: var(--coral); color: #fff; box-shadow: var(--shadow-md); font-size: 22px; font-weight: 950; }
.chat-launcher svg { width: 25px; height: 25px; }
.search-match { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; color: var(--brand-dark); font-size: 11px; }
.search-match svg { width: 14px; height: 14px; }
.search-suggestions strong { display: flex; align-items: center; gap: 5px; }
.search-suggestions strong svg, .search-suggestions a svg { width: 14px; height: 14px; }
.search-suggestions a { display: flex; align-items: center; gap: 7px; }
.chatbot { position: fixed; right: 22px; bottom: 86px; z-index: 90; display: none; grid-template-rows: auto 1fr auto; width: min(380px, calc(100vw - 32px)); height: min(590px, calc(100vh - 120px)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); }
.chatbot.open { display: grid; }
.chat-head { display: flex; align-items: center; padding: 14px; background: var(--ink); color: #fff; }
.chat-head > div { display: grid; }
.chat-head span { color: #c6d2cc; font-size: 10px; }
.chat-head button { margin-left: auto; color: #fff; }
.chat-body { padding: 14px; overflow-y: auto; background: #f7f8f7; }
.chat-message { max-width: 88%; margin-bottom: 9px; }
.chat-message p { margin: 0; padding: 10px 12px; border-radius: 8px 8px 8px 2px; background: #fff; box-shadow: var(--shadow-sm); font-size: 12px; line-height: 1.45; }
.chat-message.user { margin-left: auto; }
.chat-message.user p { border-radius: 8px 8px 2px 8px; background: var(--brand); color: #fff; }
.chat-message a { display: inline-block; margin: 5px 0 0 8px; color: var(--brand-dark); font-size: 10px; font-weight: 800; }
.chat-questions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chat-questions button { padding: 7px 9px; border: 1px solid var(--line); border-radius: 15px; background: #fff; color: var(--ink-soft); font-size: 10px; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }
.chat-form button { padding: 0 14px; border: 0; border-radius: 6px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; }

/* Footer */
.site-footer { background: var(--ink); color: #fff; }
.footer-inner { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 34px; width: min(1380px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0 40px; }
.footer-brand p { max-width: 280px; margin: 16px 0; color: #b9c6c0; font-size: 12px; }
.socials { display: flex; gap: 7px; }
.socials button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: transparent; color: #fff; font-size: 10px; font-weight: 800; }
.footer-column { display: grid; align-content: start; gap: 9px; }
.footer-column h3 { margin-bottom: 7px; font-size: 13px; }
.footer-column a { color: #b9c6c0; font-size: 11px; }
.footer-column a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; width: min(1380px, calc(100% - 48px)); margin: 0 auto; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.12); color: #9dafA6; font-size: 10px; }
.footer-bottom b { margin-left: 10px; color: #fff; }

.compact-products .card-body { padding: 8px; gap: 6px; }
.compact-products .card-seller { display: none; }

@media (max-width: 1280px) {
  .header-main { gap: 14px; }
  .text-link { display: none; }
  .product-grid, .skeleton-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .category-grid { grid-template-columns: repeat(4, 1fr); }
  .metric-grid, .admin-metrics { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1180px) {
  .product-main { grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr); gap: 24px; }
}

@media (max-width: 1040px) {
  :root { --header-height: 104px; }
  .utility-bar, .category-nav { display: none; }
  .header-main { grid-template-columns: auto 1fr auto; min-height: 72px; }
  .header-actions .icon-link, .header-actions .account-link { display: none; }
  .product-grid, .skeleton-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-hero { grid-template-columns: 1fr 1fr; min-height: 450px; }
  .hero-content h1 { font-size: 52px; }
  .hero-image { height: 360px; }
  .seller-grid { grid-template-columns: 1fr 1fr; }
  .product-main { gap: 24px; }
  .dashboard-layout { grid-template-columns: 200px 1fr; gap: 20px; }
  .dashboard-sidebar, .filter-sidebar, .order-summary { top: 92px; }
  .admin-sidebar { top: 72px; height: calc(100vh - 72px); }
  .admin-columns { grid-template-columns: 1fr; }
  .report-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  h1 { font-size: 38px; }
  .page-shell, .content-section, .home-hero, .how-section, .trust-section, .seller-cta, .footer-inner, .footer-bottom { width: min(100% - 32px, 760px); }
  .header-main { grid-template-columns: auto 1fr auto auto; width: calc(100% - 32px); }
  .global-search { display: none; position: absolute; top: 64px; left: 16px; right: 16px; z-index: 60; grid-template-columns: 110px 1fr auto; box-shadow: var(--shadow-md); }
  .site-header.mobile-search-open .global-search { display: grid; }
  .header-actions { display: none; }
  .mobile-search-button, .mobile-account { display: grid; place-items: center; }
  .mobile-search-button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 24px; }
  .mobile-account .mini-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-size: 11px; font-weight: 900; }
  .home-hero { grid-template-columns: 1fr; padding: 34px 0 24px; }
  .hero-content h1 { font-size: 48px; }
  .hero-image { height: 300px; }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid, .skeleton-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .how-section { grid-template-columns: 1fr; }
  .trust-section { grid-template-columns: 1fr; gap: 28px; padding: 34px; }
  .marketplace { grid-template-columns: 1fr; }
  .filter-sidebar { position: fixed; inset: 0 0 0 auto; z-index: 100; width: min(390px, 92vw); max-height: none; padding: 20px; background: #fff; box-shadow: var(--shadow-md); transform: translateX(105%); transition: transform .2s; overflow-y: auto; }
  .filter-sidebar.open { transform: translateX(0); }
  #filter-close { display: inline-grid; }
  .mobile-filter { display: inline-flex; min-width: 84px; white-space: nowrap; }
  .results-toolbar { align-items: flex-start; }
  .active-filters { flex: 1; }
  .product-main { grid-template-columns: 1fr; }
  .product-summary { max-width: 680px; }
  .detail-content { grid-template-columns: 1fr; }
  .detail-content aside { order: -1; }
  .sell-hero { grid-template-columns: 1fr; }
  .sell-visual { height: 320px; }
  .sell-steps { grid-template-columns: 1fr 1fr; }
  .sell-steps > div:nth-child(2) { border-right: 0; }
  .sell-steps > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .earnings-section, .seller-rules { grid-template-columns: 1fr; gap: 32px; }
  .wizard-step { grid-template-columns: 1fr; gap: 16px; }
  .step-copy { padding-top: 0; }
  .preview-product { grid-template-columns: 1fr; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-story { display: none; }
  .auth-panel { min-height: calc(100vh - 72px); }
  .dashboard-layout { grid-template-columns: 1fr; }
  .dashboard-sidebar { position: static; }
  .dashboard-sidebar nav { display: flex; overflow-x: auto; }
  .dashboard-sidebar nav a { flex: 0 0 auto; }
  .dashboard-user, .logout-button { display: none; }
  .dashboard-columns { grid-template-columns: 1fr; }
  .messages-layout { grid-template-columns: 230px 1fr; }
  .checkout-grid { grid-template-columns: 1fr; }
  .order-summary { position: static; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; }
  .admin-sidebar nav { display: flex; overflow-x: auto; }
  .admin-sidebar nav a { flex: 0 0 auto; }
  .admin-logout { margin: 8px 0 0; }
  .admin-main { padding: 20px 16px; }
  .category-admin-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-page { grid-template-columns: 1fr; gap: 30px; }
  .footer-inner { grid-template-columns: 2fr 1fr 1fr; }
  .footer-brand { grid-row: span 2; }
}

@media (max-width: 560px) {
  .admin-product-preview { grid-template-columns: 1fr; }
  .admin-product-preview > .product-photo { width: 100%; max-width: 220px; }
  :root { --header-height: 66px; }
  body { padding-bottom: 66px; }
  h1 { font-size: 34px; }
  h2 { font-size: 24px; }
  .page-shell, .content-section, .home-hero, .how-section, .trust-section, .seller-cta, .footer-inner, .footer-bottom { width: calc(100% - 24px); }
  .site-header { top: 0; }
  .header-main { width: calc(100% - 24px); min-height: 64px; grid-template-columns: auto 1fr auto auto; }
  .brand { font-size: 17px; }
  .brand-mark { width: 34px; height: 34px; font-size: 16px; }
  .global-search { top: 62px; left: 8px; right: 8px; grid-template-columns: 1fr auto; height: 52px; }
  .global-search select { display: none; }
  .search-suggestions { grid-template-columns: 1fr; max-height: 70vh; overflow-y: auto; }
  .home-hero { min-height: 0; padding-top: 28px; }
  .hero-content h1 { font-size: 44px; }
  .hero-content > p { font-size: 15px; }
  .hero-search { grid-template-columns: 1fr; }
  .hero-search button { min-height: 44px; }
  .hero-ctas .button { flex: 1; }
  .hero-ctas .button { padding-inline: 8px; font-size: 12px; }
  .trust-strip { gap: 8px 14px; }
  .hero-image { height: 260px; }
  .hero-note { right: 10px; bottom: 10px; padding: 10px 13px; }
  .content-section { padding: 38px 0; }
  .section-header { align-items: center; margin-bottom: 16px; }
  .section-header p { display: none; }
  .section-header h2 { font-size: 21px; }
  .section-header > a { font-size: 11px; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .category-card { grid-template-columns: 36px 1fr; min-height: 66px; padding: 9px; }
  .category-icon { width: 36px; height: 36px; }
  .category-card > b { display: none; }
  .product-grid, .skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .product-card { border-radius: 6px; }
  .card-body { gap: 6px; padding: 8px; }
  .card-title { min-height: 34px; font-size: 12px; }
  .card-price strong { font-size: 16px; }
  .card-price span { font-size: 8px; }
  .card-meta { font-size: 9px; }
  .card-seller { font-size: 9px; }
  .badge { min-height: 20px; padding: 2px 5px; font-size: 8px; }
  .favourite-button { width: 31px; height: 31px; font-size: 20px; }
  .path-card { padding: 24px 20px; }
  .steps { gap: 6px; }
  .steps span { font-size: 10px; }
  .seller-grid { grid-template-columns: 1fr; }
  .trust-section { padding: 24px 18px; }
  .trust-grid { grid-template-columns: 1fr; }
  .seller-cta { display: grid; padding: 26px 20px; }
  .market-head { padding-top: 20px; }
  .market-head h1 { font-size: 29px; }
  .market-head > div:nth-child(2) { display: block; }
  .marketplace { padding-top: 15px; }
  .results-toolbar { flex-wrap: wrap; }
  .results-toolbar > label { margin-left: auto; }
  .results-toolbar select { width: 155px; min-height: 40px; font-size: 11px; }
  .active-filters { order: 3; width: 100%; }
  .detail-photo-wrap { aspect-ratio: 1 / 1; }
  .product-summary h1 { font-size: 28px; }
  .purchase-actions { grid-template-columns: 1fr; }
  .favourite-wide { min-width: 0; }
  .seller-panel { grid-template-columns: auto 1fr; }
  .seller-panel > b { display: none; }
  .product-facts { grid-template-columns: 1fr; }
  .product-facts > div { grid-template-columns: 105px 1fr; border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .product-facts > div:last-child { border-bottom: 0 !important; }
  .mobile-buy-bar { position: fixed; left: 0; right: 0; bottom: 65px; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); background: #fff; box-shadow: 0 -5px 20px rgba(23,34,30,.09); }
  .mobile-buy-bar .button { min-height: 42px; }
  .seller-identity { grid-template-columns: auto 1fr; padding: 0 16px 18px; }
  .seller-identity > button { grid-column: 1 / -1; }
  .seller-metrics { grid-column: 1 / -1; gap: 16px; overflow-x: auto; }
  .sell-hero h1 { font-size: 38px; }
  .sell-steps { width: 100%; }
  .sell-steps > div { padding: 22px 14px; }
  .sticky-sell-cta { position: fixed; left: 0; right: 0; bottom: 65px; z-index: 44; display: block; padding: 8px 12px; background: #fff; border-top: 1px solid var(--line); }
  .sticky-sell-cta .button { width: 100%; }
  .wizard-page { padding-top: 20px; }
  .wizard-head .button { display: none; }
  .wizard-head h1 { font-size: 30px; }
  .wizard-progress { gap: 2px; margin-bottom: 24px; }
  .wizard-progress li span { display: none; }
  .wizard-progress b { width: 28px; height: 28px; font-size: 11px; }
  .wizard-progress li::before { top: 13px; }
  .form-card { padding: 16px; }
  .form-grid { grid-template-columns: 1fr; gap: 13px; }
  .upload-preview { grid-template-columns: repeat(3, 1fr); }
  .delivery-note { display: grid; gap: 4px; }
  .wizard-actions { position: sticky; bottom: 66px; z-index: 30; margin-inline: -12px; padding: 9px 12px; background: #fff; box-shadow: 0 -5px 20px rgba(23,34,30,.08); }
  #autosave-status { display: none; }
  .publish-check > div { display: grid; width: 100%; }
  .auth-panel { padding: 22px 12px; }
  .auth-card { padding: 22px 16px; }
  .demo-login { grid-template-columns: 1fr 1fr; }
  .demo-login span { grid-column: 1 / -1; text-align: center; }
  .dashboard-layout { padding-top: 18px; }
  .dashboard-sidebar { margin-inline: -4px; }
  .dashboard-title { display: grid; }
  .dashboard-title h1 { font-size: 29px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .list-row { grid-template-columns: 48px minmax(0, 1fr); }
  .list-row > .product-photo { width: 48px; height: 48px; }
  .row-action, .row-menu { grid-column: 1 / -1; justify-content: start; }
  .order-card { grid-template-columns: 64px 1fr; }
  .order-card > .product-photo { width: 64px; height: 64px; }
  .order-actions { grid-column: 1 / -1; display: flex; }
  .messages-layout { grid-template-columns: 1fr; }
  .conversation-list { max-height: 220px; overflow-y: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .conversation-view { min-height: 480px; }
  .checkout-section { grid-template-columns: 28px 1fr; padding: 15px 12px; }
  .checkout-product { grid-template-columns: 64px 1fr; }
  .checkout-product .product-photo { width: 64px; height: 64px; }
  .checkout-product > b { grid-column: 2; }
  .success-page { margin: 28px auto; padding: 26px 16px; }
  .success-page h1 { font-size: 30px; }
  .success-product { min-width: 0; width: 100%; }
  .success-steps { grid-template-columns: 1fr 1fr; }
  .admin-main { padding: 18px 12px; }
  .admin-metrics { grid-template-columns: repeat(2, 1fr); }
  .admin-columns { display: block; }
  .report-list { grid-template-columns: 1fr; }
  .category-admin-grid { grid-template-columns: repeat(2, 1fr); }
  .static-hero { width: calc(100% - 24px); padding: 46px 0 28px; }
  .static-hero h1 { font-size: 35px; }
  .static-hero p { font-size: 14px; }
  .static-content { width: calc(100% - 24px); }
  .static-content article { grid-template-columns: 36px 1fr; padding: 24px 0; }
  .static-cta { display: grid; width: calc(100% - 24px); padding: 20px; }
  .static-cta > div { display: grid; }
  .contact-page { padding: 40px 0; }
  .contact-page h1 { font-size: 35px; }
  .contact-form { padding: 20px 16px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .footer-brand { grid-column: 1 / -1; grid-row: auto; }
  .footer-bottom { display: grid; padding-bottom: 24px; }
  .chat-launcher { right: 14px; bottom: 78px; width: 48px; height: 48px; }
  .chatbot { right: 8px; bottom: 72px; width: calc(100vw - 16px); height: min(600px, calc(100vh - 90px)); }
  .toast-root { top: 76px; right: 8px; width: calc(100% - 16px); }
  .mobile-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr); height: 66px; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(255,255,255,.98); box-shadow: 0 -4px 18px rgba(23,34,30,.08); }
  .mobile-bottom-nav a { display: grid; place-items: center; align-content: center; gap: 2px; min-width: 0; color: var(--muted); }
  .mobile-bottom-nav > a > svg { width: 19px; height: 19px; }
  .mobile-bottom-nav small { max-width: 100%; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-bottom-nav a.active { color: var(--brand); }
  .mobile-bottom-nav .mobile-sell span { display: grid; place-items: center; width: 36px; height: 36px; margin-top: -17px; border: 3px solid #fff; border-radius: 50%; background: var(--coral); color: #fff; font-size: 24px; box-shadow: var(--shadow-sm); }
  .mobile-bottom-nav .mobile-sell span svg { width: 20px; height: 20px; }
}

@media (max-width: 380px) {
  .card-meta span:last-child, .card-seller .verified { display: none; }
  .category-card strong { font-size: 11px; }
  .category-card small { font-size: 9px; }
  .product-grid { gap: 6px; }
}

@media (max-width: 820px) {
  .review-grid { grid-template-columns: 1fr 1fr; }
  .store-hero > div { grid-template-columns: 90px 1fr; min-height: 260px; }
  .store-hero > div > button { grid-column: 1 / -1; justify-self: start; }
  .store-hero h1 { font-size: 34px; }
  .store-metrics { grid-template-columns: repeat(3, 1fr); overflow: hidden; }
  .store-metrics span { border-bottom: 1px solid var(--line); }
  .store-about { grid-template-columns: 1fr; gap: 24px; }
  .admin-overview-strip, .analytics-grid { grid-template-columns: 1fr; }
  .security-list article { grid-template-columns: 58px 1fr; }
  .security-actions { grid-column: 1 / -1; justify-content: start; max-width: none; }
}

@media (max-width: 600px) {
  .product-lightbox { grid-template-rows: 58px minmax(0, 1fr) 74px 24px; }
  .product-lightbox > header { padding-inline: 10px; }
  .product-lightbox > header strong { max-width: 120px; font-size: 11px; }
  .lightbox-tools { margin-left: auto; }
  .lightbox-tools button { min-width: 36px; height: 36px; padding-inline: 7px; }
  .lightbox-photo { width: auto; height: auto; max-width: 94vw; max-height: 68vh; }
  .lightbox-photo.atlas-photo { width: 94vw; height: auto; }
  .lightbox-nav { width: 38px; height: 48px; }
  .lightbox-nav.previous { left: 7px; }
  .lightbox-nav.next { right: 7px; }
  .product-lightbox > footer { justify-content: start; padding: 6px 10px; }
  .product-lightbox > footer button { width: 56px; height: 56px; }
  .carousel-shell { width: 100%; min-width: 0; }
  .product-grid.mobile-carousel { display: flex; gap: 10px; padding: 2px 12px 14px; overflow-x: auto; scroll-behavior: smooth; scroll-padding-inline: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .product-grid.mobile-carousel::-webkit-scrollbar { display: none; }
  .mobile-carousel .product-card { flex: 0 0 min(68vw, 245px); scroll-snap-align: start; }
  .carousel-control { position: absolute; top: 36%; z-index: 6; display: grid; place-items: center; width: 36px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.95); color: var(--ink); box-shadow: var(--shadow-sm); }
  .carousel-control svg { width: 18px; height: 18px; }
  .carousel-control.previous { left: 5px; }
  .carousel-control.next { right: 5px; }
  .save-search-button { order: 2; }
  .review-grid { grid-template-columns: 1fr; }
  .store-hero > div { grid-template-columns: 1fr; justify-items: start; gap: 14px; }
  .store-badge { grid-template-columns: auto 1fr; align-items: center; }
  .store-badge .avatar { width: 70px; height: 70px; }
  .store-metrics { grid-template-columns: repeat(2, 1fr); margin-top: 0; border-radius: 0; }
  .profile-tabs { gap: 14px; overflow-x: auto; }
  .profile-tabs a, .profile-tabs button { white-space: nowrap; }
  .seller-page .section-header { padding-right: 56px; }
  .offer-card { grid-template-columns: 64px 1fr; gap: 10px; }
  .offer-card > .product-photo { width: 64px; height: 64px; }
  .offer-actions { grid-column: 1 / -1; justify-content: start; max-width: none; }
  .analytics-advice { grid-template-columns: 1fr; }
  .saved-search-list article { grid-template-columns: 38px 1fr 34px; }
  .saved-search-list article > .button { grid-column: 2; justify-self: start; }
  .performance-list a { grid-template-columns: minmax(100px, 1fr) 1fr 34px; gap: 7px; }
  .security-summary { display: grid; }
  .trend-chart { height: 160px; gap: 5px; }
  .trend-value { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 560px) {
  body:has(.mobile-buy-bar) .chat-launcher, body:has(.sticky-sell-cta) .chat-launcher { bottom: 134px; }
}