/*
Theme Name: TCM Wholesale
Theme URI: https://tcmwholesale.nl
Description: Wholesale theme for Traditional Chinese Medicine supply. Built to sit alongside the TCM Wholesale plugin, using the visual language of tcmtrader.net: Figtree and Fraunces, deep petrol ink, one warm red accent and fully rounded controls.
Author: TCM Wholesale
Version: 1.1.1
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tcmwholesale
*/

:root {
	--ink: #072835;
	--ink-light: #0d3d51;
	--sub: #516971;
	--ink-60: #5d7078;
	--ink-40: #9ca9ae;
	--line: #e6e9eb;
	--line-soft: #f0f2f4;
	--control: #8b989d;
	--bg: #fff;
	--bg-2: #f6f6f6;
	--field: #ededed;
	--accent: #c4301c;
	--accent-dark: #a52715;
	--accent-wash: #fdf1ef;
	--green: #0d8756;
	--green-wash: #eff7f3;

	--radius: 10px;
	--pill: 100px;

	--sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--serif: "Fraunces", Georgia, "Times New Roman", serif;
	--cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;

	--wrap: 1400px;
	--wrap-narrow: 760px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--ink);
	text-decoration-color: var(--ink-40);
	text-underline-offset: 3px;
}

a:hover {
	text-decoration-color: var(--accent);
}

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.005em;
	margin: 0 0 .5em;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 20px;
	background: var(--ink);
	color: #fff;
	border-radius: var(--pill);
}

.wrap {
	width: min(100% - 40px, var(--wrap));
	margin-inline: auto;
}

.wrap--narrow {
	width: min(100% - 40px, var(--wrap-narrow));
}

.eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
}

/* ----------------------------------------------------------------- buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 44px;
	padding: .6em 1.6em;
	border: 1px solid transparent;
	border-radius: var(--pill);
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn--primary {
	background: var(--ink);
	color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--ink-light);
	color: #fff;
}

.btn--ghost {
	background: transparent;
	border-color: var(--control);
	color: var(--ink);
}

.btn--ghost:hover {
	border-color: var(--ink-40);
	background: var(--bg-2);
}

.btn--invert {
	background: #fff;
	color: var(--ink);
}

.btn--invert:hover,
.btn--invert:focus-visible {
	background: #e9eef0;
	color: var(--ink);
}

.btn--lg {
	min-height: 52px;
	padding: .7em 2em;
	font-size: 16px;
}

/* ------------------------------------------------------------------ header */

.site-header {
	--header-full: 190px;
	--header-compact: 104px;
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
	transition: margin-bottom .18s ease;
}

/* Someone logged in has the WordPress bar fixed over the top of the page. */
.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Without this a first child's margin would collapse into the header's. */
.site-main {
	display: flow-root;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	/* Room for the wordmark at full size. The header shrinks once the page is
	   scrolled, and --tt-chrome in the plugin's order-list.css is set to that
	   smaller height, because that is the state the sticky toolbar meets. */
	min-height: var(--header-full);
	transition: min-height .18s ease;
}

/* The margin gives back exactly what the shrink takes away. If the page got
   shorter here the browser would move the scroll position to compensate, that
   move would cross the point where the header grows again, and the two would
   chase each other for as long as the page rests there. */
.site-header.is-compact {
	margin-bottom: calc(var(--header-full) - var(--header-compact));
}

.site-header.is-compact .site-header__inner {
	min-height: var(--header-compact);
}

.site-header.is-compact .brand__logo {
	max-height: 60px;
}

/* Pushes the navigation and the language switch to the right together, instead
   of spreading them across the header. */
.brand {
	margin-right: auto;
}

.langs {
	display: flex;
	align-items: center;
	gap: 2px;
}

.langs__item {
	padding: 6px 10px;
	white-space: nowrap;
	border-radius: var(--pill);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	color: var(--ink-60);
}

.langs__item[lang="zh"] {
	font-family: var(--cjk);
}

.langs__item:hover {
	background: var(--line-soft);
	color: var(--ink);
}

.langs__item.is-on {
	background: var(--ink);
	color: #fff;
}

.brand__link {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
	color: var(--ink);
}

/* The mark and the wordmark read as one lockup, so they share a baseline block
   and the divider between them is space, not a rule. */
.brand__logo {
	max-height: 112px;
	width: auto;
	transition: max-height .18s ease;
}

.brand__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.1;
}

.brand__name {
	font-family: var(--serif);
	font-size: clamp(20px, 2.1vw, 28px);
	white-space: nowrap;
}

.brand__cn {
	font-family: var(--cjk);
	font-size: clamp(13px, 1.2vw, 16px);
	letter-spacing: .14em;
	white-space: nowrap;
	color: var(--ink-60);
}

.nav {
	display: flex;
	align-items: center;
	gap: 26px;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__list a {
	font-weight: 600;
	text-decoration: none;
	color: var(--ink);
}

.nav__list a:hover {
	color: var(--accent);
}

.nav__list .sub-menu {
	display: none;
}

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 16px;
	height: 1.5px;
	margin: 0 auto;
	background: var(--ink);
	content: "";
	transition: transform .18s ease;
}

.nav-toggle__bars::before {
	transform: translateY(-5px);
}

.nav-toggle__bars::after {
	transform: translateY(3.5px);
}

/* ---------------------------------------------------------------- sections */

.section {
	padding: 76px 0;
}

.section--tint {
	background: var(--bg-2);
}

/* The homepage opens on this section, so its title does a hero's work. */
.section--opening {
	padding-top: 60px;
}

.section--opening .section__title {
	font-size: clamp(30px, 4vw, 46px);
	max-width: 22ch;
}

.section__title {
	margin: 0 0 16px;
	font-size: clamp(26px, 3vw, 38px);
	max-width: 20ch;
}

.section__lede {
	margin: 0 0 36px;
	max-width: 62ch;
	font-size: 16.5px;
	color: var(--sub);
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.card__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}

.card__link:hover {
	border-color: var(--ink);
	transform: translateY(-2px);
}

.card__name {
	font-family: var(--serif);
	font-size: 19px;
}

.card__cn {
	font-family: var(--cjk);
	font-size: 15px;
	line-height: 1.3;
	color: var(--ink-60);
}

.card__count {
	font-size: 13px;
	color: var(--ink-60);
	font-variant-numeric: tabular-nums;
}

.steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.step {
	padding-top: 20px;
	border-top: 2px solid var(--ink);
}

.step__number {
	margin: 0 0 10px;
	font-family: var(--serif);
	font-size: 34px;
	line-height: 1;
	color: var(--accent);
}

.step__title {
	margin: 0 0 8px;
	font-size: 20px;
}

.step__text {
	margin: 0;
	color: var(--sub);
}

.two-col {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 56px;
	align-items: start;
}

.points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.point__title {
	margin: 0 0 6px;
	font-size: 17px;
}

.point p {
	margin: 0;
	color: var(--sub);
	font-size: 14.5px;
}

.band {
	padding: 56px 0;
	background: var(--ink);
	color: #fff;
}

.band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.band__title {
	margin: 0 0 8px;
	font-size: clamp(24px, 2.6vw, 32px);
}

.band__text {
	margin: 0;
	max-width: 54ch;
	color: #b9c6cb;
}

.band__actions {
	margin: 0;
}

/* --------------------------------------------------------------------- faq */

.faq {
	border-top: 1px solid var(--line);
}

.faq__item {
	border-bottom: 1px solid var(--line);
}

.faq__item summary {
	padding: 18px 0;
	font-family: var(--serif);
	font-size: 19px;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

.faq__item summary::after {
	content: "+";
	font-family: var(--sans);
	font-size: 22px;
	color: var(--accent);
	flex: none;
}

.faq__item[open] summary::after {
	content: "\2013";
}

.faq__item p {
	margin: 0 0 18px;
	max-width: 68ch;
	color: var(--sub);
}

/* -------------------------------------------------------------------- page */

.page {
	padding: 48px 0 80px;
}

.page--wide {
	padding-top: 32px;
}

.page__title {
	margin: 0 0 24px;
	font-size: clamp(28px, 3.4vw, 42px);
}

.prose > * + * {
	margin-top: 1.1em;
}

.prose h2 {
	margin-top: 1.8em;
	font-size: 26px;
}

.prose h3 {
	margin-top: 1.6em;
	font-size: 20px;
}

.prose ul,
.prose ol {
	padding-left: 1.3em;
}

.postlist__item {
	padding: 26px 0;
	border-bottom: 1px solid var(--line);
}

.postlist__title {
	margin: 0 0 4px;
	font-size: 22px;
}

.postlist__meta {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--ink-60);
}

/* --------------------------------------------------------- access request */

.tt-access-request {
	max-width: 760px;
}

.tt-access-request .tt-fields {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

.tt-access-request .tt-field {
	margin: 0;
	grid-column: span 6;
}

.tt-access-request .tt-field--half {
	grid-column: span 3;
}

.tt-access-request label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
}

.tt-access-request input,
.tt-access-request textarea {
	width: 100%;
	min-height: 46px;
	padding: 11px 18px;
	border: 1px solid var(--control);
	border-radius: var(--radius);
	background: #fff;
	font: inherit;
	font-size: 16px;
	color: var(--ink);
}

.tt-access-request textarea {
	min-height: 90px;
	resize: vertical;
}

.tt-access-request .tt-req {
	color: var(--accent);
}

.tt-access-request .tt-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tt-notice {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-radius: var(--radius);
	border: 1px solid #cfe6dc;
	background: var(--green-wash);
}

.tt-notice--error {
	border-color: #f0cdc7;
	background: var(--accent-wash);
	color: var(--accent-dark);
}

/* ------------------------------------------------------------------ footer */

.site-footer {
	margin-top: 0;
	padding: 56px 0 28px;
	background: var(--bg-2);
	border-top: 1px solid var(--line);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.footer__text--quiet {
	max-width: 34ch;
	font-size: 13px;
	color: var(--ink-60);
}

.footer__contact li {
	margin-bottom: 10px;
}

.footer__label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-60);
}

.footer__list--menu {
	margin-top: 10px;
}

.footer__name {
	margin: 0 0 4px;
	font-family: var(--serif);
	font-size: 20px;
}

.footer__name-cn {
	margin-left: 8px;
	font-family: var(--cjk);
	font-size: 14px;
	letter-spacing: .12em;
	color: var(--ink-60);
}

.footer__tagline {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-60);
}

.footer__text {
	margin: 0 0 10px;
	color: var(--sub);
	font-size: 14px;
}

.footer__title {
	margin: 0 0 10px;
	line-height: 1.3;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-60);
}

.footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.footer__list li {
	margin-bottom: 7px;
}

.site-footer__legal {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
	color: var(--ink-60);
}

.site-footer__legal p {
	margin: 0 0 4px;
}

/* -------------------------------------------------------------------- news */

.section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.section__head-action {
	margin: 0;
}

.newsgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.newscard__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, transform .15s ease;
}

.newscard__link:hover,
.newscard__link:focus-visible {
	border-color: var(--control);
	transform: translateY(-2px);
}

.newscard__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--bg-2);
}

.newscard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.newscard__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	padding: 20px;
}

.newscard__date {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-40);
}

.newscard__title {
	font-family: var(--serif);
	font-size: 20px;
	line-height: 1.25;
}

.newscard__excerpt {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--sub);
}

/* Pushed to the bottom so the links line up however long the excerpts are. */
.newscard__more {
	margin-top: auto;
	padding-top: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--accent);
}

.news__empty {
	padding: 40px 0 64px;
	color: var(--sub);
}

.page__lede {
	max-width: 60ch;
	margin: 10px 0 0;
	font-size: 17px;
	color: var(--sub);
}

.article__meta {
	margin: 10px 0 0;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-40);
}

.article__media {
	margin: 0 0 28px;
}

.article__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.article__nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.article__nav-link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 45%;
	font-weight: 600;
	text-decoration: none;
	color: var(--ink);
}

.article__nav-link--next {
	margin-left: auto;
	text-align: right;
}

.article__nav-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-40);
}

.article__back {
	margin: 32px 0 64px;
}

.pagination {
	margin: 40px 0 64px;
}

.pagination .page-numbers {
	display: inline-block;
	min-width: 38px;
	padding: 7px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-right: 6px;
	text-align: center;
	text-decoration: none;
	color: var(--ink);
}

.pagination .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

/* ------------------------------------------------------------------ narrow */

@media (max-width: 1024px) {
	.two-col {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.steps {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.newsgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}
}

@media (max-width: 782px) {
	.nav-toggle {
		display: block;
	}

	.nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px 20px 20px;
		background: #fff;
		border-bottom: 1px solid var(--line);
	}

	.nav.is-open {
		display: flex;
	}

	.nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nav__list li {
		border-bottom: 1px solid var(--line-soft);
	}

	.nav__list a {
		display: block;
		padding: 14px 0;
	}

	.nav__cta {
		margin-top: 14px;
	}

	.site-header {
		--header-full: 132px;
		--header-compact: 88px;
	}

	.site-header__inner {
		position: relative;
	}

	/* The switch stays beside the menu button rather than disappearing into the
	   menu — the visitor who needs it cannot read the button either. */
	.langs {
		order: 1;
	}

	.nav-toggle {
		order: 2;
	}

	.brand__logo {
		max-height: 76px;
	}

	.site-header.is-compact .brand__logo {
		max-height: 48px;
	}

	.section {
		padding: 52px 0;
	}

	.points,
	.newsgrid {
		grid-template-columns: 1fr;
	}

	.article__nav {
		flex-direction: column;
	}

	.article__nav-link,
	.article__nav-link--next {
		max-width: none;
		margin-left: 0;
		text-align: left;
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.tt-access-request .tt-field--half {
		grid-column: span 6;
	}
}

/* ------------------------------------------------------------------ phone */

@media (max-width: 600px) {
	/* Below this width WordPress lets its bar scroll away with the page. */
	.admin-bar .site-header {
		top: 0;
	}
}

@media (max-width: 560px) {
	/* The mark, the wordmark, the language switch and the menu button all have
	   to share one line, so the lockup shrinks rather than wrapping over them. */
	.site-header {
		--header-full: 104px;
		--header-compact: 76px;
	}

	.site-header__inner {
		gap: 10px;
	}

	.brand__link {
		gap: 8px;
	}

	.brand__logo,
	.site-header.is-compact .brand__logo {
		max-height: 38px;
	}

	.brand__name {
		font-size: 14px;
	}

	.brand__cn {
		font-size: 10px;
		letter-spacing: .08em;
	}

	.langs__item {
		padding: 5px 6px;
		font-size: 12px;
	}
}

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