/* Public website tokens follow AppColors; content stays usable without JS. */
:root { color-scheme:light dark; --green:#176a36; --green-deep:#0e502a; --green-soft:#e5f2e8; --gold:#d99a3c; --bg:#fafbf8; --surface:#fff; --text:#17291e; --muted:#526458; --line:#dce4db; --shadow:0 14px 44px #123b1510; --radius:22px }
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:6rem }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif }
a { color:var(--green-deep); text-underline-offset:4px }
button,input,select { font:inherit }
img { display:block; max-width:100%; height:auto }
h1,h2,h3,p { margin:0 }
h1,h2,h3 { line-height:1.16; letter-spacing:-.035em }
h1 { font-size:clamp(2.4rem,4.7vw,4.5rem); font-weight:750 }
h2 { font-size:clamp(1.7rem,3vw,2.65rem); font-weight:700 }
h3 { font-size:1.2rem; line-height:1.35 }
p { color:var(--muted) }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--gold); outline-offset:4px }
.container { width:min(1184px,calc(100% - 64px)); margin-inline:auto }
.section { padding-block:76px }
.skip-link { position:absolute; left:1rem; top:-6rem; padding:12px 20px; background:var(--surface); z-index:20 }
.skip-link:focus { top:1rem }
.site-header { background:var(--surface); border-bottom:1px solid var(--line) }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:88px }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-size:1.5rem; font-weight:800; letter-spacing:-.04em }
.brand img { border-radius:10px; flex-shrink:0 }
.brand-express { color:var(--text) }
.header-inner nav { display:flex; align-items:center; gap:30px }
.header-inner nav>a { text-decoration:none; font-size:.94rem; font-weight:600 }
.header-inner nav>a[aria-current] { text-decoration:underline }
.button { display:inline-flex; justify-content:center; align-items:center; gap:18px; min-height:52px; padding:13px 23px; border:1px solid transparent; border-radius:10px; background:var(--green); color:#fff; font-weight:650; text-decoration:none; cursor:pointer; line-height:1.4 }
.button:hover { background:var(--green-deep) }
.button-small { min-height:42px; padding:10px 21px }
.button-outline { background:transparent; color:var(--green-deep); border-color:var(--line) }
.button-outline:hover { background:var(--green-soft) }
.text-link { font-weight:650; text-decoration:none }
.text-link:hover { text-decoration:underline }
.eyebrow { color:var(--green-deep); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:750; line-height:1.6 }
.hero { padding-block:64px 72px; background:linear-gradient(115deg,var(--bg) 45%,var(--green-soft)) }
.hero-grid { display:grid; grid-template-columns:1.13fr 1fr; align-items:center; gap:68px }
.hero-copy h1 { margin-top:22px }
.hero-copy h1 span { color:var(--green) }
.hero-description { font-size:1.12rem; max-width:470px; margin-top:25px }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:30px }
.hero-note { font-size:.81rem; margin-top:23px }
.hero-spotlight { display:block; background:var(--green-soft); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); color:var(--text); text-decoration:none }
.hero-spotlight>img { width:100%; aspect-ratio:1.08; object-fit:cover }
.spotlight-caption { background:var(--surface); padding:22px 25px; display:flex; flex-direction:column; gap:6px }
.spotlight-caption strong { font-size:1.1rem; line-height:1.35 }
.spotlight-caption>span:last-child { display:flex; justify-content:space-between; font-size:.9rem; color:var(--green-deep) }
.hero-brand { text-align:center; border-radius:var(--radius); background:var(--green-deep); padding:50px }
.hero-brand img { margin:auto }
.hero-brand p { color:#fff; margin-top:18px }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; margin-bottom:32px }
.section-heading h2 { margin-top:10px }
.listing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px }
.listing-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s }
.listing-card:hover { box-shadow:var(--shadow) }
.card-image { display:block; background:var(--green-soft); overflow:hidden }
.card-image img { width:100%; aspect-ratio:1.5; object-fit:cover }
.card-content { padding:23px; display:flex; flex-direction:column; flex:1; gap:10px }
.card-content h3 a { text-decoration:none; color:var(--text) }
.card-content h3 a:hover { text-decoration:underline }
.seller { font-size:.8rem }
.card-description { font-size:.88rem; line-height:1.6 }
.card-bottom { margin-top:auto; padding-top:16px; display:flex; align-items:flex-start; flex-direction:column; gap:9px }
.card-bottom strong { font-size:1rem; line-height:1.5 }
.status { display:inline-block; border-radius:6px; padding:4px 9px; font-size:.73rem; background:var(--green-soft); color:var(--green-deep); font-weight:650 }
.status-muted { background:var(--bg); color:var(--muted) }
.how-section { background:var(--green-soft) }
.how-section h2 { margin-top:10px }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:40px }
.step-number { color:var(--green); font-weight:650; font-size:.9rem }
.steps h3 { margin-block:14px 10px }
.steps p { font-size:.93rem }
.business-panel { background:var(--green-deep); color:#fff; border-radius:var(--radius); padding:48px 52px; display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:center }
.business-panel .eyebrow { color:#d7bd69 }
.business-panel h2 { margin-block:16px }
.business-panel p { color:#d5e7d9; max-width:500px }
.business-actions { display:flex; flex-direction:column; align-items:flex-start; gap:18px; justify-self:end }
.business-actions>a:last-child { color:#e2f1e6; font-size:.88rem }
.button-light { background:#fff; color:#0e502a }
.button-light:hover { background:#e5f2e8 }
.site-footer { border-top:1px solid var(--line); background:var(--surface); padding-block:36px }
.footer-inner { display:flex; justify-content:space-between; gap:35px; align-items:flex-start }
.footer-brand { font-size:1.2rem; font-weight:750; text-decoration:none }
.footer-inner p { font-size:.8rem; margin-top:5px }
.footer-inner nav { display:flex; flex-wrap:wrap; max-width:590px; gap:12px 24px }
.footer-inner nav a { font-size:.8rem; color:var(--muted); text-decoration:none }
.footer-inner nav a:hover { text-decoration:underline }
.marketplace>h1 { margin-top:15px; font-size:clamp(2.3rem,4.5vw,3.6rem) }
.page-intro { margin-top:18px }
.search-form { margin-top:32px; padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:14px; display:flex; align-items:flex-end; gap:14px }
.search-form>div { min-width:0 }
.search-field { flex:1 }
.search-form label { display:block; font-size:.78rem; font-weight:650; margin-bottom:7px }
.search-form input,.search-form select { width:100%; height:50px; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:0 13px; color:var(--text) }
.search-form input { min-width:180px }
.search-form .button { height:50px; min-height:50px }
.results-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-block:42px 24px }
.results-heading h2 { font-size:1.45rem; overflow-wrap:anywhere }
.pagination { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:40px; font-size:.88rem; flex-wrap:wrap }
.empty-state { padding:50px 26px; border:1px dashed var(--line); border-radius:16px; text-align:center; background:var(--surface) }
.empty-state p { margin-block:12px }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:10px; font-size:.8rem; color:var(--muted); margin-bottom:30px }
.breadcrumbs a { text-decoration:none }
.product-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:start }
.product-image { background:var(--green-soft); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden }
.product-image img { width:100%; aspect-ratio:1; object-fit:cover }
.product-copy h1 { font-size:clamp(2rem,3.3vw,3.1rem); margin-top:12px; overflow-wrap:anywhere }
.product-seller { font-size:.95rem; margin-top:16px }
.product-price { font-size:1.6rem; color:var(--text); font-weight:700; margin-block:26px 12px }
.product-description { margin-top:32px }
.product-description h2,.variant-list h2 { font-size:1.1rem; margin-bottom:12px }
.product-description p { white-space:pre-line; overflow-wrap:anywhere }
.variant-list { margin-top:28px }
.variant-list ul { list-style:none; padding:0; margin:0 }
.variant-list li { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-bottom:1px solid var(--line); padding-block:10px; font-size:.9rem }
.product-action { margin-top:32px; padding-top:28px; border-top:1px solid var(--line) }
.product-action .button { width:100% }
.product-action p { font-size:.8rem; margin-top:14px }
.back-to-market { margin-top:50px }
@media(prefers-color-scheme:dark) {
  :root { --green:#78c28b; --green-deep:#a4d7af; --green-soft:#1b3224; --bg:#101710; --surface:#182019; --text:#ecf1e9; --muted:#b2c0b1; --line:#324035; --shadow:0 14px 44px #0003 }
  .button { background:#176a36; color:#fff } .button:hover { background:#0e502a }
  .button-outline { background:transparent; color:var(--green-deep) } .button-outline:hover { background:var(--green-soft) }
  .business-panel,.hero-brand { background:#103d29 } .button-light { background:#edf4ec; color:#0e502a } .button-light:hover { background:#d5e7d9 }
}
@media(max-width:1000px) {
  .hero-grid { gap:36px } .listing-grid { gap:18px } .hero-copy h1 { font-size:3rem }
  .search-form { flex-wrap:wrap } .search-field { flex-basis:100% } .search-form>div:not(.search-field) { flex:1 }
  .business-panel { padding:36px } .product-grid { gap:32px } .steps { gap:26px }
}
@media(max-width:700px) {
  .container { width:calc(100% - 36px) } .header-inner { min-height:74px; gap:12px }
  .brand { font-size:1.19rem; gap:7px } .brand img { width:32px; height:32px }
  .header-inner nav { gap:15px } .header-inner nav>a { font-size:.78rem }
  .header-inner .button-small { padding:9px 14px; min-height:40px } .business-nav { display:none }
  .hero { padding-block:38px 42px } .hero-grid { grid-template-columns:1fr; gap:32px }
  .hero-copy h1 { font-size:clamp(2.4rem,10vw,3.4rem); margin-top:16px } .hero-description { font-size:1rem; margin-top:20px }
  .actions { gap:18px; margin-top:24px } .hero-spotlight>img { aspect-ratio:1.55 } .spotlight-caption { padding:18px 20px }
  .section { padding-block:44px } .section-heading { align-items:flex-start; flex-direction:column; gap:16px; margin-bottom:24px }
  .listing-grid { grid-template-columns:1fr } .card-image img { aspect-ratio:1.7 } .card-content { padding:20px }
  .card-bottom { flex-direction:row; justify-content:space-between; flex-wrap:wrap }
  .steps { grid-template-columns:1fr; gap:28px; margin-top:28px } .steps h3 { margin-top:8px }
  .business-panel { grid-template-columns:1fr; gap:28px; padding:30px 25px } .business-actions { justify-self:start }
  .footer-inner { flex-direction:column; gap:24px } .footer-inner nav { gap:12px 20px }
  .search-form { padding:16px; gap:12px } .search-form>div:not(.search-field) { flex-basis:100% }
  .search-form .button { width:100% } .search-form input { min-width:0 }
  .product-grid { grid-template-columns:1fr; gap:26px } .product-image img { aspect-ratio:1.7; max-height:280px }
  .product-copy h1 { font-size:2.1rem } .product-price { font-size:1.4rem } .product-action { margin-top:25px }
  .eyebrow { font-size:.68rem } .breadcrumbs { margin-bottom:22px }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } * { transition:none!important } }
@media(max-width:380px) {
  .brand { font-size:1.08rem; gap:5px } .brand img { width:28px; height:28px }
  .header-inner nav { gap:10px } .header-inner nav>a { font-size:.73rem }
  .header-inner .button-small { padding:9px 12px }
}