/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
	--eh-vp-blue:    #2563eb;
	--eh-vp-teal:    #0d9488;
	--eh-vp-green:   #16a34a;
	--eh-vp-gray-1:  #f8fafc;
	--eh-vp-gray-2:  #e2e8f0;
	--eh-vp-gray-3:  #94a3b8;
	--eh-vp-gray-9:  #1e293b;
	--eh-vp-radius:  8px;
	--eh-vp-shadow:  0 1px 4px rgb(0 0 0 / .08);
	--eh-vp-max:     1100px;
}

/* ── Directory layout ─────────────────────────────────────────────────────── */
.eh-vendor-dir {
	max-width: var(--eh-vp-max);
	margin: 0 auto;
	padding: 24px 16px;
}

.eh-vendor-dir__header { margin-bottom: 24px; }
.eh-vendor-dir__title { font-size: 24px; font-weight: 700; color: var(--eh-vp-gray-9); margin: 0; }

.eh-vendor-dir__layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 24px;
}

@media ( max-width: 720px ) {
	.eh-vendor-dir__layout { grid-template-columns: 1fr; }
}

/* Filter sidebar */
.eh-vendor-dir__sidebar {
	background: #fff;
	border: 1px solid var(--eh-vp-gray-2);
	border-radius: var(--eh-vp-radius);
	padding: 18px;
	height: fit-content;
	box-shadow: var(--eh-vp-shadow);
}

.eh-vendor-dir__filters h3 {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 14px;
}

.eh-vs-filter-group {
	border: none;
	padding: 0;
	margin: 0 0 16px;
}

.eh-vs-filter-group legend {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--eh-vp-gray-3);
	margin-bottom: 8px;
	padding: 0;
}

.eh-vs-radio {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	cursor: pointer;
	margin-bottom: 5px;
}

/* Vendor grid */
.eh-vendor-dir__meta {
	font-size: 13px;
	color: var(--eh-vp-gray-3);
	margin-bottom: 16px;
}

.eh-vendor-dir__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}

.eh-vendor-dir__empty {
	color: var(--eh-vp-gray-3);
	font-size: 14px;
	padding: 32px 0;
}

/* Vendor card */
.eh-vendor-card {
	background: #fff;
	border: 1px solid var(--eh-vp-gray-2);
	border-radius: var(--eh-vp-radius);
	padding: 20px;
	box-shadow: var(--eh-vp-shadow);
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: box-shadow .15s, border-color .15s;
}

.eh-vendor-card:hover {
	box-shadow: 0 4px 12px rgb(0 0 0 / .1);
	border-color: var(--eh-vp-teal);
}

.eh-vendor-card__logo-link { display: block; }
.eh-vendor-card__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.eh-vendor-card__initials {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--eh-vp-teal);
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.eh-vendor-card__name a {
	font-size: 15px;
	font-weight: 600;
	color: var(--eh-vp-gray-9);
	text-decoration: none;
}

.eh-vendor-card__name a:hover { color: var(--eh-vp-teal); }

.eh-vendor-card__areas {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.eh-vendor-card__tag {
	display: inline-block;
	font-size: 11px;
	padding: 2px 8px;
	background: #f0fdf4;
	color: var(--eh-vp-green);
	border-radius: 20px;
	border: 1px solid #bbf7d0;
}

.eh-vendor-card__cta {
	display: inline-block;
	margin-top: auto;
	font-size: 13px;
	font-weight: 500;
	color: var(--eh-vp-teal);
	text-decoration: none;
}

.eh-vendor-card__cta:hover { text-decoration: underline; }

/* Area chip */
.eh-vendor-area-chip {
	display: inline-block;
	font-size: 11px;
	padding: 2px 8px;
	background: #eff6ff;
	color: var(--eh-vp-blue);
	border-radius: 20px;
	border: 1px solid #bfdbfe;
}

.eh-vendor-area-chip--lg { font-size: 13px; padding: 4px 12px; }

/* Pagination */
.eh-vendor-dir__pagination {
	display: flex;
	gap: 6px;
	margin-top: 24px;
	justify-content: center;
}

.eh-vendor-dir__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--eh-vp-gray-2);
	border-radius: 6px;
	font-size: 13px;
	text-decoration: none;
	color: var(--eh-vp-gray-9);
	transition: background .15s, border-color .15s;
}

.eh-vendor-dir__page:hover,
.eh-vendor-dir__page.is-current {
	background: var(--eh-vp-teal);
	border-color: var(--eh-vp-teal);
	color: #fff;
}

/* ── Profile page ─────────────────────────────────────────────────────────── */
.eh-vendor-profile-wrap {
	background: var(--eh-vp-gray-1);
	min-height: 100vh;
	padding-bottom: 48px;
}

.eh-vendor-profile {
	max-width: var(--eh-vp-max);
	margin: 0 auto;
	padding: 24px 16px;
}

.eh-vendor-profile__back {
	display: inline-block;
	font-size: 13px;
	color: var(--eh-vp-gray-3);
	text-decoration: none;
	margin-bottom: 16px;
}

.eh-vendor-profile__back:hover { color: var(--eh-vp-teal); }

/* Header */
.eh-vendor-profile__header {
	background: #fff;
	border: 1px solid var(--eh-vp-gray-2);
	border-radius: var(--eh-vp-radius);
	padding: 24px;
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
	box-shadow: var(--eh-vp-shadow);
}

.eh-vendor-profile__avatar {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.eh-vendor-profile__initials {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	background: var(--eh-vp-teal);
	color: #fff;
	font-size: 42px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.eh-vendor-profile__name {
	font-size: 22px;
	font-weight: 700;
	color: var(--eh-vp-gray-9);
	margin: 0 0 8px;
}

.eh-vendor-profile__meta {
	font-size: 13px;
	color: var(--eh-vp-gray-3);
	margin-bottom: 12px;
}

.eh-vendor-profile__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.eh-vendor-contact-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	padding: 6px 14px;
	border: 1px solid var(--eh-vp-gray-2);
	border-radius: 6px;
	text-decoration: none;
	color: var(--eh-vp-gray-9);
	transition: background .15s, border-color .15s;
}

.eh-vendor-contact-btn:hover { background: var(--eh-vp-gray-1); border-color: var(--eh-vp-teal); }
.eh-vendor-contact-btn--wa { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.eh-vendor-contact-btn--wa:hover { background: #bbf7d0; }

/* Cards and grid */
.eh-vendor-profile__grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

@media ( max-width: 680px ) {
	.eh-vendor-profile__grid-2 { grid-template-columns: 1fr; }
	.eh-vendor-profile__header { flex-direction: column; align-items: center; text-align: center; }
}

.eh-vendor-profile__card {
	background: #fff;
	border: 1px solid var(--eh-vp-gray-2);
	border-radius: var(--eh-vp-radius);
	padding: 20px;
	box-shadow: var(--eh-vp-shadow);
	margin-bottom: 0;
}

.eh-vendor-profile__card--full {
	grid-column: 1 / -1;
	margin-bottom: 16px;
}

.eh-vendor-profile__section-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--eh-vp-gray-9);
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--eh-vp-gray-2);
}

/* Data rows */
.eh-vp-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 13px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.eh-vp-label { font-weight: 500; color: var(--eh-vp-gray-3); min-width: 90px; flex-shrink: 0; }
.eh-vp-yes { color: var(--eh-vp-green); font-weight: 500; }
.eh-vp-note { color: var(--eh-vp-gray-3); font-size: 12px; }
.eh-vp-row--indent { padding-left: 98px; color: var(--eh-vp-gray-3); font-size: 12px; margin-top: -4px; }
.eh-vp-empty { color: var(--eh-vp-gray-3); font-size: 13px; }

/* Badges section */
.eh-vendor-profile__badges-section {
	background: #fff;
	border: 1px solid var(--eh-vp-gray-2);
	border-radius: var(--eh-vp-radius);
	padding: 20px;
	margin-bottom: 16px;
	box-shadow: var(--eh-vp-shadow);
}

.eh-vendor-profile__admin-badges { margin-top: 10px; }

/* Badge chips */
.eh-vendor-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.eh-vendor-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
	color: var(--eh-vp-blue);
}

.eh-vendor-badges--lg .eh-vendor-badge { font-size: 13px; padding: 6px 14px; }
.eh-vendor-badges--sm .eh-vendor-badge { font-size: 11px; padding: 3px 10px; }

/* Areas */
.eh-vendor-profile__areas { display: flex; flex-wrap: wrap; gap: 8px; }

/* Cert list */
.eh-vendor-profile__cert-list {
	list-style: disc;
	padding-left: 18px;
	font-size: 13px;
	color: var(--eh-vp-gray-9);
}

.eh-vendor-profile__cert-list li { margin-bottom: 6px; }

/* Experience */
.eh-vendor-profile__experience {
	font-size: 14px;
	line-height: 1.7;
	color: var(--eh-vp-gray-9);
}

/* Products grid */
.eh-vendor-profile__products {
	background: #fff;
	border: 1px solid var(--eh-vp-gray-2);
	border-radius: var(--eh-vp-radius);
	padding: 20px;
	box-shadow: var(--eh-vp-shadow);
	margin-top: 16px;
}

.eh-vendor-profile__product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.eh-vendor-product-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--eh-vp-gray-2);
	border-radius: var(--eh-vp-radius);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow .15s;
}

.eh-vendor-product-card:hover { box-shadow: 0 4px 12px rgb(0 0 0 / .1); }
.eh-vendor-product-card__img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.eh-vendor-product-card__body { padding: 10px; }
.eh-vendor-product-card__name { display: block; font-size: 13px; font-weight: 500; color: var(--eh-vp-gray-9); margin-bottom: 4px; }
.eh-vendor-product-card__price { display: block; font-size: 13px; color: var(--eh-vp-teal); font-weight: 600; }

/* ── WooCommerce tab ──────────────────────────────────────────────────────── */
.eh-vendor-wc-tab {
	padding: 16px 0;
}

.eh-vendor-wc-tab__header {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 16px;
}

.eh-vendor-wc-tab__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.eh-vendor-wc-tab__name {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--eh-vp-gray-9);
	margin-bottom: 6px;
}

.eh-vendor-wc-tab__areas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
	align-items: center;
}

.eh-vendor-wc-tab__label {
	font-size: 12px;
	color: var(--eh-vp-gray-3);
	margin-right: 4px;
}

.eh-vendor-wc-tab__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.eh-vendor-wc-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--eh-vp-gray-9);
}

.eh-vendor-wc-meta-item--yes { color: var(--eh-vp-green); font-weight: 500; }

.eh-vendor-wc-tab__link {
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	color: var(--eh-vp-teal);
	text-decoration: none;
}

.eh-vendor-wc-tab__link:hover { text-decoration: underline; }

/* ── Vendor chip on shop product cards ─────────────────────────────────── */
.eh-vendor-product-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	color: #0EA5A5;
	text-decoration: none;
	border: 1px solid #b3e5e5;
	border-radius: 99px;
	padding: 2px 8px;
	margin-top: 4px;
	background: #f0fafa;
	transition: background 0.15s;
}
.eh-vendor-product-chip:hover { background: #b3e5e5; color: #0B8C8C; }
.eh-vpc-icon { font-size: 12px; }
.eh-vpc-name { font-weight: 500; }

/* ── Product count chip on vendor directory cards ───────────────────────── */
.eh-vendor-card__product-count {
	display: inline-block;
	font-size: 11.5px;
	color: #555;
	background: #f5f5f5;
	border-radius: 4px;
	padding: 2px 7px;
	margin-top: 4px;
}

/* ── Product submission form [tambah_produk_eh] ─────────────────────────── */
.eh-vps-form { max-width: 640px; }
.eh-vps-form__field { margin-bottom: 20px; }
.eh-vps-form__field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .88rem; }
.eh-vps-form__input,
.eh-vps-form__textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1.5px solid #E9EDF3;
	border-radius: 8px;
	font-size: .88rem;
	font-family: inherit;
	box-sizing: border-box;
}
.eh-vps-form__input:focus,
.eh-vps-form__textarea:focus { outline: none; border-color: #0EA5A5; box-shadow: 0 0 0 3px #E6F7F7; }
.eh-vps-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.eh-vps-form__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.eh-vps-form__cat-label { font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.eh-vps-form__submit {
	background: #0EA5A5;
	color: #fff;
	border: none;
	padding: 11px 28px;
	border-radius: 9px;
	font-size: .9rem;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	transition: background .15s;
}
.eh-vps-form__submit:hover { background: #0B8C8C; }
.eh-vps__notice { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: .88rem; }
.eh-vps__notice--ok  { background: #E7F8EF; color: #16A34A; border: 1px solid #bbf0d0; }
.eh-vps__notice--err { background: #FEF2F2; color: #DC2626; border: 1px solid #fecaca; }
@media (max-width: 600px) { .eh-vps-form__row { grid-template-columns: 1fr; } }