@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;450;500;550;600;650;700;750;800;900&display=swap");
:root {
--ink:#142722;
--muted:#75827b;
--green:#197658;
--line:#dde4df;
--paper:#f7f8f5;
--lime:#d5ed9b;
--white:#fff
}
* {
box-sizing:border-box
}
html {
scroll-behavior:smooth;
scroll-padding-top:100px
}
body {
margin:0;
background:var(--paper);
font-family:'Golos Text',Arial,sans-serif;
color:var(--ink);
font-size:14px;
line-height:1.55
}
button,input,select {
font:inherit
}
button,a,input,select {
 -webkit-tap-highlight-color:transparent
}
button,a {
touch-action:manipulation
}
button {
cursor:pointer
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
outline:3px solid #8dbda7;
outline-offset:4px
}
a {
color:inherit;
text-decoration:none
}
button {
color:inherit
}
button:disabled {
cursor:default;
opacity:.55
}
button[hidden],[hidden] {
display:none!important
}
.site-header {
height:101px;
max-width:1424px;
margin:auto;
padding:0 56px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
border-bottom:1px solid var(--line)
}
.brand {
display:flex;
align-items:center;
gap:13px
}
.brand-mark {
display:grid;
place-items:center;
width:44px;
height:44px;
background:var(--ink);
color:var(--lime);
font-size:42px;
font-weight:700;
line-height:40px;
text-align:center;
border-radius:12px;
letter-spacing:0;
padding:0
}
.brand-mark svg { display:block; width:27px; height:29px; }
.brand strong {
font-size:22px;
letter-spacing:1.4px;
display:block;
line-height:1.15
}
.brand small {
font-size:10px;
color:#718076;
display:block;
margin-top:5px
}
.site-header nav {
display:flex;
gap:34px;
align-items:center;
margin-left:auto;
margin-right:32px;
font-weight:550
}
.text-button {
border:0;
padding:0;
background:none;
font-weight:550;
line-height:1.6
}
.text-button:hover {
color:var(--green)
}
.owner-badge {
display:flex;
align-items:center;
gap:8px;
font-size:10px;
color:#5f7467;
background:#edf2e9;
border:1px solid #e3e9dd;
border-radius:30px;
padding:8px 12px;
white-space:nowrap
}
.owner-badge span,.eyebrow>span,.mini-dot {
height:6px;
width:6px;
border-radius:50%;
background:var(--green);
display:inline-block;
flex-shrink:0
}
main {
max-width:1424px;
margin:auto;
padding:0 56px
}
.hero {
display:grid;
grid-template-columns:1.05fr 1fr;
gap:50px;
padding:62px 0 63px;
align-items:center
}
.eyebrow {
text-transform:uppercase;
font-size:10px;
letter-spacing:1.8px;
font-weight:650;
line-height:1.6;
display:flex;
align-items:center;
gap:9px;
margin:0 0 23px;
color:#658071
}
h1 {
font-size:clamp(46px,4.7vw,68px);
line-height:1.08;
letter-spacing:-3px;
font-weight:600;
margin:0 0 22px
}
h1>span {
color:var(--green)
}
.hero-description {
font-size:14px;
line-height:1.8;
color:#6a7b71;
max-width:365px;
margin:0 0 27px
}
.primary-button {
background:var(--ink);
border:1px solid var(--ink);
color:var(--white);
display:inline-flex;
align-items:center;
justify-content:center;
gap:28px;
padding:13px 20px;
border-radius:9px;
font-size:12px;
font-weight:550;
min-height:45px;
transition:background .16s,transform .16s
}
.primary-button:hover {
background:var(--green);
border-color:var(--green);
transform:translateY(-1px)
}
.hero-button span {
font-size:22px;
line-height:1
}
.hero-stats {
display:flex;
gap:33px;
margin-top:35px
}
.hero-stats>div {
display:flex;
flex-direction:column;
gap:1px;
padding-right:28px;
border-right:1px solid var(--line)
}
.hero-stats>div:last-child {
border-right:0;
padding-right:0
}
.hero-stats strong {
font-size:27px;
font-weight:550;
line-height:1.4;
letter-spacing:-1px
}
.hero-stats span {
color:var(--muted);
font-size:9px;
white-space:nowrap
}
.hero-visual {
height:430px;
background:#e9eee6;
border-radius:20px;
position:relative;
overflow:hidden;
isolation:isolate;
border:1px solid #e0e7dc
}
.visual-grid {
position:absolute;
inset:0;
background-image:linear-gradient(#dce5d966 1px,transparent 1px),linear-gradient(90deg,#dce5d966 1px,transparent 1px);
background-size:36px 36px;
mask-image:linear-gradient(135deg,#0008,transparent)
}
.orbit {
position:absolute;
border:1px solid #d2dec8;
border-radius:50%;
width:360px;
height:360px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:-1
}
.orbit-two {
width:295px;
height:295px;
background:#e0e9d8;
border:0
}
.visual-label {
position:absolute;
top:23px;
left:25px;
font-size:9px;
letter-spacing:1.7px;
color:#637c69;
font-weight:550
}
.hero-product {
position:absolute;
inset:49px 15px 65px;
display:flex;
align-items:center;
justify-content:center
}
.hero-product img {
width:92%;
height:94%;
object-fit:contain;
mix-blend-mode:multiply;
filter:drop-shadow(0 22px 14px #26382414)
}
.hero-product .product-placeholder {
font-size:80px
}
.hero-source {
position:absolute;
bottom:42px;
left:24px;
right:24px;
min-height:45px;
padding:12px 15px;
display:flex;
align-items:center;
gap:8px;
border-radius:8px;
background:#ffffffd9;
backdrop-filter:blur(10px);
font-size:10px;
border:1px solid #ffffff
}
.hero-source>span:nth-child(2) {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.hero-source>span:last-child {
margin-left:auto;
font-size:16px
}
.visual-caption {
position:absolute;
bottom:18px;
left:25px;
color:#7a8d7d;
font-size:8px
}
.catalog-section {
border-top:1px solid var(--line);
padding-top:42px;
padding-bottom:50px
}
.section-heading {
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:25px;
margin-bottom:26px
}
.section-heading .eyebrow {
margin-bottom:9px;
font-size:9px
}
.section-heading h2 {
font-size:28px;
font-weight:550;
letter-spacing:-1px;
line-height:1.25;
margin:0
}
.section-heading h2 span {
color:var(--green)
}
.data-date {
font-size:10px;
color:#8a978e;
white-space:nowrap;
padding-bottom:3px
}
.search-toolbar {
display:flex;
gap:12px
}
.search-box {
display:flex;
align-items:center;
gap:12px;
background:var(--white);
border:1px solid var(--line);
border-radius:9px;
padding:0 17px;
height:49px;
flex:1;
min-width:100px
}
.search-box:focus-within {
border-color:#8dbda7;
box-shadow:0 0 0 3px #1976580b
}
.search-icon {
width:13px;
height:13px;
border:1.7px solid #7d8e82;
border-radius:50%;
position:relative;
flex-shrink:0
}
.search-icon:after {
content:'';
position:absolute;
height:5px;
width:1.7px;
background:#7d8e82;
transform:rotate(-42deg);
bottom:-4px;
right:-3px
}
.search-box input {
border:0;
outline:0!important;
min-width:30px;
width:100%;
background:transparent;
font-size:11px;
color:var(--ink);
height:100%
}
.search-box input::placeholder {
color:#9aa59c
}
.search-box input::-webkit-search-cancel-button {
display:none
}
.search-box button {
background:#edf1eb;
border:0;
border-radius:50%;
width:23px;
height:23px;
flex-shrink:0;
line-height:1;
font-size:18px;
color:#7d8e82
}
.city-filter {
border:1px solid var(--line);
background:var(--white);
border-radius:9px;
min-width:170px;
padding:0 13px;
display:flex
}
.city-filter select {
border:0;
background:transparent;
width:100%;
font-size:11px;
outline:0;
color:#4c6356
}
.favorite-filter {
border:1px solid var(--line);
background:var(--white);
border-radius:9px;
padding:0 13px;
display:flex;
gap:8px;
align-items:center;
font-size:11px
}
.favorite-filter>span:first-child {
font-size:21px;
font-family:Arial;
line-height:1
}
.favorite-filter[aria-pressed=true] {
background:#e5eee7;
border-color:#9cbeaa
}
.favorite-count {
font-size:9px;
background:#edf1ec;
color:#7a8b7d;
padding:1px 6px;
border-radius:5px
}
.category-filters {
display:flex;
gap:7px;
flex-wrap:wrap;
padding:17px 0 20px;
border-bottom:1px solid var(--line)
}
.category-filters button {
border:1px solid transparent;
padding:7px 11px;
border-radius:7px;
background:transparent;
color:#78897d;
font-size:10px;
white-space:nowrap
}
.category-filters button[aria-pressed=true] {
background:var(--ink);
color:white
}
.category-filters button:hover:not([aria-pressed=true]) {
background:#e9eee5
}
.category-filters button span {
margin-left:6px;
font-size:8px;
opacity:.65
}
.result-toolbar {
display:flex;
align-items:center;
justify-content:space-between;
min-height:60px;
gap:20px
}
.result-toolbar p {
font-size:10px;
color:#819086;
margin:0
}
.sort-label {
display:flex;
align-items:center;
gap:8px;
font-size:9px;
color:#8d9a91
}
.sort-label select {
border:0;
background:transparent;
color:#526959;
font-size:10px;
max-width:130px
}
.supplier-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:21px
}
.supplier-card {
background:var(--white);
border:1px solid #e1e7e1;
border-radius:14px;
overflow:hidden;
transition:transform .18s,border-color .18s,box-shadow .18s;
min-width:0
}
.supplier-card:hover {
transform:translateY(-3px);
border-color:#b2c8b8;
box-shadow:0 10px 24px #14272207
}
.card-image {
height:210px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
background:#f0f3ee;
margin:9px;
border-radius:9px;
overflow:hidden
}
.card-image img {
height:88%;
width:88%;
object-fit:contain;
mix-blend-mode:multiply;
transition:transform .3s
}
.supplier-card:hover .card-image img {
transform:scale(1.045)
}
.card-category {
position:absolute;
left:11px;
top:11px;
font-size:8px;
padding:4px 7px;
border-radius:4px;
background:#ffffffdc;
border:1px solid #e7ece3;
color:#718276;
z-index:1
}
.save-button {
width:30px;
height:30px;
display:grid;
place-items:center;
border:1px solid #e1e8df;
background:#ffffffdf;
border-radius:50%;
position:absolute;
right:10px;
top:10px;
font-size:21px;
font-family:Arial;
line-height:1;
color:#7b8c7e;
z-index:2
}
.save-button[aria-pressed=true] {
background:var(--ink);
color:var(--lime);
border-color:var(--ink)
}
.card-number {
position:absolute;
bottom:9px;
right:11px;
font-size:8px;
letter-spacing:1px;
color:#a0ada0
}
.card-content {
padding:10px 20px 19px
}
.card-location {
display:flex;
align-items:center;
gap:5px;
font-size:9px;
color:#92a094;
margin:0 0 5px
}
.location-icon {
width:9px;
height:11px;
display:inline-block;
fill:none;
stroke:currentColor;
stroke-width:1.7
}
.card-content h3 {
font-size:19px;
font-weight:600;
margin:0 0 4px;
letter-spacing:-.45px;
line-height:1.3
}
.card-company {
font-size:8px;
line-height:1.5;
color:#97a398;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
margin:0 0 11px;
letter-spacing:.05px
}
.card-description {
font-size:10px;
line-height:1.7;
color:#687f6e;
min-height:35px;
margin:0 0 12px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden
}
.product-tags {
display:flex;
gap:5px;
flex-wrap:wrap;
min-height:21px;
margin-bottom:16px
}
.product-tags span {
font-size:8px;
padding:3px 6px;
border:1px solid #e9ede7;
border-radius:4px;
color:#8a9a8d;
max-width:100%;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden
}
.card-bottom {
display:flex;
justify-content:space-between;
align-items:center;
gap:9px;
padding-top:13px;
border-top:1px solid #edf0eb
}
.checked-status {
display:flex;
align-items:center;
gap:5px;
font-size:8px;
color:#70947c;
white-space:nowrap
}
.checked-status svg {
height:12px;
width:12px;
stroke:currentColor;
fill:none;
stroke-width:1.6
}
.details-button {
border:0;
background:#eef3ec;
border-radius:6px;
padding:7px 10px;
font-size:9px;
color:#42634e;
display:flex;
align-items:center;
gap:11px;
white-space:nowrap
}
.details-button:hover {
background:#dce9db
}
.details-button>span {
font-size:13px
}
.product-placeholder {
display:grid;
place-items:center;
width:100%;
height:100%;
font-size:42px;
color:#a4b3a2;
letter-spacing:-3px;
font-weight:600
}
.empty-state {
text-align:center;
border:1px dashed #ccdbcc;
border-radius:12px;
padding:45px 25px;
margin-bottom:20px
}
.empty-icon {
font-size:50px;
color:#7c9c82
}
.empty-state h3 {
font-size:22px;
letter-spacing:-.6px;
font-weight:550;
margin:5px
}
.empty-state p {
font-size:12px;
color:var(--muted);
max-width:390px;
margin:10px auto 22px
}
.catalog-note {
display:flex;
align-items:center;
gap:12px;
margin-top:28px;
padding:19px 20px;
border:1px solid #e1e7dd;
border-radius:9px;
background:#f0f3eb
}
.note-symbol {
height:19px;
width:19px;
display:grid;
place-items:center;
border:1px solid #afc0ad;
border-radius:50%;
font-size:10px;
color:#7b937a;
flex-shrink:0
}
.catalog-note p {
color:#7e907e;
font-size:9px;
line-height:1.7;
margin:0;
max-width:650px
}
.catalog-note button {
font-size:9px;
white-space:nowrap;
margin-left:auto;
color:#5a775d
}
.catalog-note button span {
margin-left:12px
}
.site-footer {
border-top:1px solid var(--line);
max-width:1312px;
margin:auto;
padding:27px 0 35px;
display:flex;
align-items:center;
gap:25px
}
.footer-brand {
font-size:21px;
letter-spacing:.5px;
font-weight:750
}
.footer-brand span {
color:var(--green)
}
.site-footer p {
font-size:9px;
color:#8a998d;
margin:0
}
.site-footer>span {
margin-left:auto;
font-size:9px;
color:#a0aba1
}
dialog {
border:0;
color:var(--ink);
background:var(--paper);
padding:0;
border-radius:17px;
box-shadow:0 30px 120px #071d1360
}
dialog::backdrop {
background:#13251dc7;
backdrop-filter:blur(5px)
}
.supplier-dialog {
width:min(930px,calc(100% - 40px));
max-height:calc(100dvh - 60px)
}
.dialog-close {
position:absolute;
right:18px;
top:17px;
border:1px solid #dce5d9;
background:#fffffff2;
display:grid;
place-items:center;
border-radius:50%;
height:32px;
width:32px;
font-size:24px;
line-height:1;
color:#6f8576;
z-index:5
}
.dialog-close:hover {
background:#dce9db
}
.detail-header {
padding:37px 38px 26px;
border-bottom:1px solid var(--line)
}
.detail-header .eyebrow {
font-size:9px;
margin-bottom:10px
}
.detail-header h2 {
font-size:31px;
letter-spacing:-1px;
margin:0 40px 8px 0;
line-height:1.2;
font-weight:600
}
.detail-company {
font-size:10px;
color:#829385;
line-height:1.6;
margin:0 0 9px
}
.detail-location {
font-size:11px;
color:var(--green);
margin:0
}
.detail-layout {
padding:25px 38px 35px;
display:grid;
grid-template-columns:1.1fr 1fr;
gap:28px
}
.detail-description {
font-size:12px;
line-height:1.85;
color:#617868;
margin:0 0 20px
}
.detail-layout h3 {
font-size:12px;
margin:0 0 12px;
font-weight:600
}
.gallery-item {
border:1px solid var(--line);
border-radius:9px;
margin-bottom:11px;
background:#fff;
overflow:hidden
}
.gallery-item img {
width:100%;
height:205px;
object-fit:contain;
display:block;
background:#f0f3ee;
padding:15px;
mix-blend-mode:multiply
}
.gallery-caption {
padding:11px 13px;
font-size:11px;
line-height:1.5;
display:flex;
align-items:center;
justify-content:space-between;
gap:15px
}
.gallery-caption small {
font-size:9px;
color:#8da18f;
display:block
}
.gallery-caption a {
font-size:9px;
color:var(--green);
white-space:nowrap
}
.contact-box {
background:white;
border:1px solid #d7e2d6;
border-radius:11px;
padding:20px;
margin-bottom:19px
}
.contact-box h3 {
font-size:15px;
margin-bottom:8px
}
.contact-box>p {
font-size:10px;
color:#91a091;
line-height:1.6;
margin:0 0 17px
}
.contact-box .primary-button {
width:100%;
font-size:11px
}
.contacts-content {
padding-top:4px
}
.contact-row {
display:flex;
gap:10px;
justify-content:space-between;
padding:9px 0;
border-bottom:1px solid #edf0eb;
word-break:break-word
}
.contact-row:last-of-type {
border:0
}
.contact-value {
display:block;
min-width:0;
font-size:11px
}
.contact-value small {
display:block;
font-size:8px;
color:#8fa08f;
margin-bottom:3px;
letter-spacing:.3px
}
.contact-value a {
color:var(--green)
}
.copy-small {
background:#eff4ec;
border:0;
border-radius:5px;
font-size:8px;
padding:5px 8px;
height:26px;
white-space:nowrap;
flex-shrink:0
}
.contact-address {
font-size:10px;
line-height:1.8;
color:#798d7b;
margin:14px 0
}
.website-link {
display:flex;
align-items:center;
justify-content:space-between;
border:1px solid var(--line);
border-radius:7px;
padding:10px 12px;
font-size:10px;
margin-top:12px
}
.chinese-intro {
width:100%;
margin-top:9px;
background:#edf3e7;
border:0;
border-radius:7px;
padding:11px 12px;
font-size:10px;
color:#53764f
}
.verification-text {
font-size:10px;
line-height:1.8;
color:#7d907f;
margin:10px 0 18px
}
.sources-section {
border-top:1px solid var(--line);
padding-top:16px
}
.sources-section h3 {
font-size:11px
}
.source-link {
display:block;
font-size:9px;
color:var(--green);
line-height:1.6;
padding:5px 0;
word-break:break-word
}
.source-link small {
display:block;
color:#91a18f;
font-size:8px
}
.source-meta,.photo-rights {
font-size:8px;
color:#98a594;
line-height:1.8;
margin:12px 0 0
}
.detail-favorite {
border:1px solid var(--line);
background:#fff;
padding:8px 11px;
border-radius:6px;
font-size:10px;
margin-top:13px
}
.detail-favorite[aria-pressed=true] {
background:#e2eddd
}
.method-dialog {
width:min(580px,calc(100% - 32px));
padding:35px;
max-height:calc(100dvh - 40px)
}
.method-dialog>.eyebrow {
margin:0 0 10px;
font-size:9px
}
.method-dialog h2 {
font-size:26px;
letter-spacing:-.7px;
line-height:1.2;
margin:0 25px 19px 0;
font-weight:550
}
.method-dialog>p,.method-dialog li {
font-size:12px;
line-height:1.8;
color:#6d8271
}
.method-dialog ol {
padding-left:20px
}
.method-dialog li {
padding:5px 0 8px 4px
}
.method-dialog li strong {
font-weight:600;
color:#344f3e
}
.method-footnote {
font-size:10px;
line-height:1.8;
color:#8a9c8a;
padding:15px;
background:#ecf1e7;
border-radius:8px;
margin:20px 0
}
.method-dialog .primary-button {
width:100%
}
#toast {
position:fixed;
bottom:24px;
left:50%;
transform:translate(-50%,15px);
padding:12px 20px;
background:var(--ink);
color:#fff;
font-size:12px;
border-radius:8px;
opacity:0;
transition:opacity .2s,transform .2s;
pointer-events:none;
z-index:20;
box-shadow:0 6px 25px #14272228;
max-width:calc(100% - 30px);
text-align:center
}
#toast.visible {
opacity:1;
transform:translate(-50%,0)
}
.sr-only {
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0
}

@media(min-width:1500px) {
.hero {
gap:80px
}
.hero-visual {
height:460px
}
.card-image {
height:225px
}

}

@media(max-width:1150px) {
.site-header {
padding:0 35px
}
.site-header nav {
margin-right:0;
gap:22px
}
main {
padding:0 35px
}
.hero {
gap:30px
}
.hero-visual {
height:390px
}
h1 {
font-size:55px
}
.hero-stats {
gap:20px
}
.hero-stats>div {
padding-right:20px
}
.supplier-grid {
gap:15px
}
.card-content {
padding-left:15px;
padding-right:15px
}
.card-image {
height:185px
}
.site-footer {
margin:0 35px
}
.catalog-note {
align-items:flex-start
}
.catalog-note button {
white-space:normal;
min-width:115px
}

}

@media(max-width:850px) {
.owner-badge {
font-size:9px;
padding:7px 9px
}
.site-header {
padding:0 25px;
height:85px;
gap:15px
}
.site-header nav {
gap:16px
}
.catalog-nav {
display:none
}
main {
padding:0 25px
}
.hero {
padding:40px 0 43px;
gap:25px;
grid-template-columns:1.1fr 1fr
}
h1 {
font-size:43px;
letter-spacing:-2px
}
.hero-description {
font-size:12px
}
.hero-visual {
height:345px
}
.hero-stats {
gap:13px
}
.hero-stats>div {
padding-right:13px
}
.hero-stats strong {
font-size:23px
}
.hero-stats span {
font-size:7px
}
.eyebrow {
font-size:8px;
letter-spacing:1.4px
}
.hero-source {
left:14px;
right:14px;
font-size:9px
}
.visual-label {
font-size:8px;
left:17px
}
.visual-caption {
left:17px
}
.section-heading h2 {
font-size:25px
}
.data-date {
font-size:8px
}
.supplier-grid {
grid-template-columns:repeat(2,minmax(0,1fr))
}
.card-image {
height:220px
}
.city-filter {
min-width:135px
}
.favorite-filter {
padding:0 10px
}
.favorite-filter>span:nth-child(2) {
display:none
}
.site-footer {
margin:0 25px
}
.detail-layout {
padding:24px;
gap:20px
}
.detail-header {
padding:30px 24px 22px
}
.detail-header h2 {
font-size:27px
}
.detail-layout {
grid-template-columns:1fr 1fr
}

}

@media(max-width:600px) {
html {
scroll-padding-top:20px
}
.site-header {
height:80px;
padding:0 20px
}
.brand-mark {
width:35px;
height:35px;
border-radius:10px;
font-size:34px;
line-height:32px;
letter-spacing:-5px
}
.brand {
gap:9px
}
.brand strong {
font-size:19px
}
.brand small {
font-size:8px;
margin-top:3px
}
.site-header nav {
margin:0 0 0 auto;
font-size:10px
}
.owner-badge {
position:absolute;
right:20px;
top:89px;
font-size:7px;
padding:5px 8px;
gap:5px
}
.owner-badge span {
width:4px;
height:4px
}
main {
padding:0 20px
}
.hero {
display:flex;
flex-direction:column;
gap:30px;
padding:51px 0 33px;
align-items:stretch
}
.hero .eyebrow {
font-size:8px;
letter-spacing:1.3px;
margin-bottom:18px
}
h1 {
font-size:47px;
letter-spacing:-2.4px;
line-height:1.07;
margin-bottom:18px
}
.hero-description {
font-size:12px;
line-height:1.75;
max-width:330px;
margin-bottom:22px
}
.hero-button {
font-size:11px;
padding:11px 16px;
gap:32px
}
.hero-stats {
gap:25px;
margin-top:24px
}
.hero-stats>div {
padding-right:25px
}
.hero-stats strong {
font-size:25px
}
.hero-stats span {
font-size:7px
}
.hero-visual {
height:280px;
border-radius:15px
}
.hero-product {
inset:25px 35px 55px
}
.hero-product img {
width:85%;
height:100%
}
.hero-source {
bottom:33px;
left:16px;
right:16px;
font-size:9px;
padding:10px 12px;
min-height:36px
}
.visual-caption {
bottom:12px;
font-size:7px
}
.visual-label {
top:15px;
font-size:7px
}
.orbit-one {
width:270px;
height:270px
}
.orbit-two {
width:220px;
height:220px
}
.catalog-section {
padding-top:28px;
padding-bottom:30px
}
.section-heading {
align-items:flex-start;
flex-direction:column;
gap:10px;
margin-bottom:20px
}
.section-heading .eyebrow {
margin-bottom:8px
}
.section-heading h2 {
font-size:25px;
letter-spacing:-.9px;
max-width:280px
}
.data-date {
font-size:8px
}
.search-toolbar {
flex-wrap:wrap;
gap:8px
}
.search-box {
flex-basis:100%;
height:45px;
padding:0 14px
}
.search-box input {
font-size:10px
}
.city-filter {
height:37px;
flex:1
}
.city-filter select {
font-size:10px
}
.favorite-filter {
font-size:10px
}
.favorite-filter>span:nth-child(2) {
display:inline
}
.favorite-filter>span:first-child {
font-size:19px
}
.category-filters {
flex-wrap:nowrap;
overflow-x:auto;
margin-right:-20px;
padding:14px 20px 15px 0;
scrollbar-width:none;
gap:5px
}
.category-filters::-webkit-scrollbar {
display:none
}
.category-filters button {
font-size:9px;
padding:6px 9px
}
.result-toolbar {
min-height:50px;
gap:10px
}
.result-toolbar p {
font-size:9px
}
.sort-label {
font-size:0;
gap:0
}
.sort-label select {
font-size:9px;
max-width:110px
}
.supplier-grid {
gap:11px;
grid-template-columns:repeat(2,minmax(0,1fr))
}
.supplier-card {
border-radius:10px
}
.card-image {
height:145px;
margin:5px;
border-radius:6px
}
.card-image img {
width:92%;
height:85%
}
.card-category {
top:7px;
left:7px;
font-size:6px;
padding:3px 5px;
max-width:calc(100% - 38px);
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap
}
.save-button {
top:6px;
right:6px;
height:23px;
width:23px;
font-size:17px
}
.card-number {
font-size:6px;
bottom:6px;
right:7px
}
.card-content {
padding:8px 10px 11px
}
.card-location {
font-size:7px;
gap:3px;
margin-bottom:5px
}
.location-icon {
height:9px;
width:7px
}
.card-content h3 {
font-size:15px;
letter-spacing:-.4px;
line-height:1.2;
margin-bottom:4px
}
.card-company {
font-size:6px;
margin-bottom:8px
}
.card-description {
font-size:8px;
min-height:39px;
line-height:1.55;
margin-bottom:9px;
-webkit-line-clamp:3
}
.product-tags {
gap:3px;
margin-bottom:11px;
min-height:33px;
align-content:flex-start
}
.product-tags span {
font-size:6px;
padding:2px 4px;
max-width:100%
}
.card-bottom {
align-items:flex-start;
flex-direction:column;
gap:9px;
padding-top:9px
}
.checked-status {
font-size:7px
}
.checked-status svg {
height:10px;
width:10px
}
.details-button {
width:100%;
justify-content:space-between;
padding:7px 8px;
font-size:8px
}
.catalog-note {
padding:14px 13px;
gap:9px;
margin-top:20px;
flex-wrap:wrap
}
.catalog-note p {
font-size:8px;
flex:1;
min-width:200px
}
.catalog-note button {
font-size:8px;
margin-left:28px;
white-space:nowrap
}
.note-symbol {
width:17px;
height:17px;
font-size:9px
}
.site-footer {
margin:0 20px;
padding:23px 0 27px;
flex-wrap:wrap;
gap:8px 20px
}
.footer-brand {
font-size:18px
}
.site-footer p {
font-size:7px
}
.site-footer>span {
font-size:7px;
margin-left:0;
flex-basis:100%
}
.supplier-dialog {
width:calc(100% - 20px);
max-height:calc(100dvh - 20px);
border-radius:13px
}
.dialog-close {
top:13px;
right:13px;
height:29px;
width:29px;
font-size:22px
}
.detail-header {
padding:29px 20px 20px
}
.detail-header .eyebrow {
font-size:7px;
letter-spacing:1.3px
}
.detail-header h2 {
font-size:27px;
margin-right:30px
}
.detail-company {
font-size:8px
}
.detail-location {
font-size:10px
}
.detail-layout {
padding:20px;
grid-template-columns:1fr;
gap:22px
}
.detail-description {
font-size:11px
}
.gallery-item img {
height:220px
}
.contact-box {
padding:18px
}
.source-link {
font-size:10px;
padding:7px 0
}
.source-link small {
font-size:9px
}
.source-meta,.photo-rights {
font-size:9px
}
.method-dialog {
padding:30px 23px
}
.method-dialog h2 {
font-size:24px
}
.method-dialog>p,.method-dialog li {
font-size:11px
}
.empty-state {
padding:30px 17px
}
.empty-state h3 {
font-size:20px
}
.empty-state p {
font-size:10px
}

}

@media(prefers-reduced-motion:reduce) {
* {
scroll-behavior:auto!important;
transition:none!important
}
}

@media (max-width: 600px) {
  h1 { font-size: clamp(34px, 9.2vw, 47px); letter-spacing: -1.6px; }
  .brand small { font-size: 10px; }
  .site-header nav { font-size: 12px; }
  .owner-badge { font-size: 9px; }
  .hero-description { font-size: 14px; }
  .hero-button { font-size: 14px; min-height: 46px; }
  .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hero-stats > div { min-width: 0; padding-right: 10px; }
  .hero-stats span { font-size: 10px; white-space: normal; }
  .hero-source { font-size: 11px; }
  .visual-caption { font-size: 9px; }
  .section-heading h2 { font-size: 29px; }
  .data-date { font-size: 11px; }
  .search-box input { font-size: 13px; }
  .city-filter select, .favorite-filter { font-size: 12px; }
  .city-filter { height: 44px; }
  .category-filters button { font-size: 12px; min-height: 40px; }
  .result-toolbar p, .sort-label select { font-size: 11px; }
  .supplier-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .card-image { height: 235px; margin: 8px; }
  .card-content { padding: 12px 18px 18px; }
  .card-category { font-size: 10px; padding: 5px 8px; }
  .save-button { width: 36px; height: 36px; font-size: 24px; }
  .card-number { font-size: 10px; }
  .card-location { font-size: 11px; }
  .location-icon { width: 10px; height: 13px; }
  .card-content h3 { font-size: 23px; }
  .card-company { font-size: 10px; }
  .card-description { font-size: 13px; line-height: 1.6; min-height: 0; }
  .product-tags { min-height: 0; margin-top: 12px; }
  .product-tags span { font-size: 10px; padding: 4px 7px; }
  .card-bottom { flex-direction: row; align-items: center; gap: 12px; }
  .checked-status { font-size: 11px; white-space: nowrap; }
  .details-button { width: auto; min-height: 42px; font-size: 13px; }
  .catalog-note p, .catalog-note button { font-size: 11px; }
  .site-footer p, .site-footer > span { font-size: 10px; }
  .detail-header .eyebrow { font-size: 9px; }
  .detail-company { font-size: 11px; }
  .detail-location, .detail-description { font-size: 13px; }
  .detail-favorite { min-height: 42px; }
  .contact-box > p, .verification-text { font-size: 12px; }
  .contact-row { gap: 8px; }
  .contact-value a { overflow-wrap: anywhere; }
  .source-link { font-size: 12px; }
  .source-link small, .source-meta, .photo-rights { font-size: 11px; }
  .method-dialog > p, .method-dialog li { font-size: 13px; }
}

.hero-copy { min-width: 0; }
.hero-copy h1 { font-size: clamp(42px, 4.6vw, 64px); }
.buyer-region {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 40px;
  align-items: center;
  padding: 28px 32px;
  margin-bottom: 30px;
  background: #edf2e9;
  border: 1px solid #dce5d9;
  border-radius: 18px;
}
.buyer-region .eyebrow { margin: 0 0 8px; }
.buyer-region h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -0.6px; }
.buyer-region p { margin: 0; color: #5d7064; font-size: 13px; }
.buyer-country-control label { display: block; font-weight: 600; margin-bottom: 7px; }
.buyer-country-control select {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid #cad7cb;
  background: white;
  color: var(--ink);
  border-radius: 9px;
}
.buyer-country-control #countryHint { margin-top: 8px; font-size: 12px; line-height: 1.5; }
.inquiry-country { margin-top: 18px; color: var(--green); font-size: 13px; line-height: 1.6; }
.inquiry-preview { margin-top: 12px; font-size: 12px; }
.inquiry-preview summary { cursor: pointer; font-weight: 550; }
.inquiry-preview p { line-height: 1.9; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .buyer-region { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 23px; }
  .buyer-region h2 { font-size: 23px; }
}
@media (max-width: 600px) {
  .hero-copy h1 { font-size: clamp(32px, 8.5vw, 43px); }
  .buyer-region { margin-bottom: 0; }
  .brand-mark svg { width:22px; height:24px; }
}

/* Full catalog and product galleries */
.brand-type{font-size:10px;letter-spacing:.12em;color:#6a7770;margin:0 0 7px;font-weight:700}.card-image{padding-bottom:58px;overflow:hidden}.card-image>.card-main-photo{height:calc(100% - 57px);object-fit:contain;padding:28px 20px 8px}.photo-strip{position:absolute;bottom:10px;left:12px;right:12px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;height:46px}.photo-strip button{border:1px solid #dbe1d5;background:white;border-radius:5px;cursor:pointer;padding:3px;overflow:hidden}.photo-strip button[aria-pressed=true]{border:2px solid #3b5145}.photo-strip img{width:100%;height:100%;object-fit:contain}.photo-counter{position:absolute;bottom:65px;right:12px;background:#fffE;font-size:10px;padding:4px 7px;border-radius:10px}.photo-pending{height:100%;min-height:210px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#7e8a7b;gap:9px}.photo-pending svg{width:50px;fill:none;stroke:#a6b29f;stroke-width:1.5}.photo-pending small{font-size:11px}.photo-pending span{font-size:13px}.pending-status{color:#7b806b}.card-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.product-tags span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.category-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:12px}.category-filters button{flex-shrink:0}.pagination{display:flex;gap:20px;justify-content:center;align-items:center;padding:35px 0}.page-button{border:1px solid #bbc6b6;padding:12px 24px;border-radius:6px;background:white;cursor:pointer}.page-button:disabled{opacity:.4;cursor:default}.paywall-icon{font-size:40px;color:#778b70}.unlock-list{padding-left:20px;font-size:13px;line-height:2;color:#48594a}.unlock-price{font-size:28px;display:block;margin:18px 0}.payment-hint{font-size:12px!important;line-height:1.6;color:#75816e}.payment-message{font-size:13px;color:#8a4a33}.contact-box .primary-button{width:100%;justify-content:center}.primary-button:disabled{opacity:.55;cursor:default}.contact-box .text-button{font-size:12px;margin-top:10px}.enriching-note{border:1px dashed #b9c5ad;background:#f2f4ed;padding:24px;border-radius:8px;font-size:14px;line-height:1.7}.city-secondary{font-size:12px;color:#7d8676;margin-top:25px}.detail-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px}.detail-gallery .gallery-item:first-child{grid-column:1/-1}.detail-gallery .gallery-item img{width:100%;height:230px;object-fit:contain;background:white}.detail-gallery .gallery-item:first-child img{height:350px}.detail-gallery .gallery-caption{font-size:13px}.detail-gallery .gallery-caption>span{font-size:10px;color:#809073}.card-category{max-width:calc(100% - 70px);white-space:normal;font-size:10px}.card-bottom{gap:6px}.details-button{font-size:12px}.checked-status{font-size:10px}.hero-stats strong{font-size:36px}.sort-label{display:none}@media(max-width:600px){.detail-gallery{grid-template-columns:1fr}.detail-gallery .gallery-item img,.detail-gallery .gallery-item:first-child img{height:250px}.hero-stats strong{font-size:27px}.card-image{min-height:300px}.photo-pending{min-height:240px}.category-filters{margin-right:-20px}.pagination{gap:10px}.page-button{padding:12px 17px}.card-image>.card-main-photo{height:245px}}
.category-filters{flex-wrap:wrap;overflow:visible}@media(max-width:600px){.category-filters{flex-wrap:nowrap;overflow-x:auto}}
/* Reserve the main image area independently from the five thumbnail buttons. */
.supplier-card .card-image{height:300px;min-height:300px;padding:0 0 58px;aspect-ratio:auto}
.supplier-card .card-image>.card-main-photo{display:block;width:100%;max-width:100%;height:242px;max-height:none;margin:0;padding:28px 20px 8px;object-fit:contain}
@media(max-width:600px){.supplier-card .card-image{height:330px;min-height:330px}.supplier-card .card-image>.card-main-photo{height:272px}}

.account-dialog{max-width:560px;width:calc(100% - 24px)}.account-dialog form>label{display:block;margin:18px 0 8px;font-weight:600}.account-dialog input:not([type=checkbox]){display:block;width:100%;padding:13px;border:1px solid var(--line);border-radius:10px;font:inherit;margin-top:7px}.purchase-consent{font-size:13px;line-height:1.6;text-align:left;display:block;margin:18px 0}.purchase-consent input{width:auto;display:inline;vertical-align:middle}.purchase-consent a{color:var(--green);text-decoration:underline}.account-modes{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px}.recovery-display{display:block;overflow-wrap:anywhere;background:var(--paper);padding:18px;border-radius:10px;margin:20px 0}.purchased-item{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--paper);padding:15px;border-radius:10px;margin:12px 0;font:inherit}.purchased-item span{display:block;font-size:13px;color:var(--green);margin-top:6px}.footer-links{display:flex;flex-wrap:wrap;gap:12px;font-size:12px}.footer-links a{color:var(--muted)}#accountError{color:#a42a35}