/* DrHerbo Herbal Portal: uses the DrHerbo Premium design tokens (with fallbacks). */
.drh-portal, .drh-herb { padding-block: var(--dh-space-6, 1.5rem) var(--dh-section-y, 4rem); }
.drh-hero { padding: var(--dh-space-8, 2rem) 0 var(--dh-space-6, 1.5rem); max-width: 52rem; }
.drh-hero__title { font-family: var(--dh-font-heading, serif); font-size: var(--dh-text-4xl, 2.5rem); color: var(--dh-heading, #013b31); line-height: var(--dh-leading-tight, 1.2); margin: 0 0 var(--dh-space-4, 1rem); }
.drh-hero__text { font-size: var(--dh-text-lg, 1.2rem); color: var(--dh-text-muted, #56645b); }
.drh-hero__text p { margin: 0 0 var(--dh-space-3, .75rem); }

.drh-search { background: var(--dh-surface, #fffdf8); border: 1px solid var(--dh-color-line, #e2d9c6); border-radius: var(--dh-radius-lg, 16px); padding: var(--dh-space-5, 1.25rem); margin: 0 0 var(--dh-space-10, 2.5rem); box-shadow: var(--dh-shadow-sm, none); }
.drh-search__label { display: block; font-weight: var(--dh-weight-semibold, 600); margin-bottom: var(--dh-space-2, .5rem); color: var(--dh-heading, #013b31); }
.drh-search__row { display: flex; gap: var(--dh-space-2, .5rem); }
.drh-search__input { flex: 1 1 auto; min-width: 0; min-height: var(--dh-control-h, 48px); padding: 0 var(--dh-space-4, 1rem); border: 1px solid var(--dh-color-line-strong, #cbbd9f); border-radius: var(--dh-radius-pill, 999px); font: inherit; font-size: 16px; background: #fff; }
.drh-search__submit { flex: 0 0 auto; }
.drh-filters { margin-top: var(--dh-space-4, 1rem); }
.drh-filters summary { cursor: pointer; font-weight: var(--dh-weight-semibold, 600); min-height: var(--dh-tap, 44px); display: flex; align-items: center; }
.drh-filters__grid { display: grid; gap: var(--dh-space-3, .75rem); grid-template-columns: 1fr; align-items: end; padding-top: var(--dh-space-3, .75rem); }
.drh-filter { display: flex; flex-direction: column; gap: var(--dh-space-1, .25rem); font-size: var(--dh-text-sm, .95rem); }
.drh-filter select { min-height: var(--dh-control-h, 48px); border: 1px solid var(--dh-color-line-strong, #cbbd9f); border-radius: var(--dh-radius-sm, 6px); padding: 0 var(--dh-space-3, .75rem); font: inherit; font-size: 16px; background: #fff; width: 100%; }
.drh-letters ul { list-style: none; margin: var(--dh-space-4, 1rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--dh-space-1, .25rem); }
.drh-letters a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--dh-tap, 44px); min-height: var(--dh-tap, 44px); border-radius: var(--dh-radius-sm, 6px); text-decoration: none; color: var(--dh-link, #025043); background: var(--dh-surface-alt, #f1e9d8); }
.drh-letters a[aria-current] { background: var(--dh-color-primary, #025043); color: var(--dh-on-dark, #fff); }

.drh-section { margin: 0 0 var(--dh-space-12, 3rem); }
.drh-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dh-space-4, 1rem); margin-bottom: var(--dh-space-4, 1rem); }
.drh-section__title { font-family: var(--dh-font-heading, serif); font-size: var(--dh-text-2xl, 1.8rem); color: var(--dh-heading, #013b31); margin: 0; }
.drh-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dh-space-4, 1rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drh-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--dh-surface, #fffdf8); border: 1px solid var(--dh-color-line, #e2d9c6); border-radius: var(--dh-radius-md, 10px); overflow: hidden; transition: box-shadow var(--dh-duration, .25s) var(--dh-ease, ease); }
.drh-card__link:hover, .drh-card__link:focus-visible { box-shadow: var(--dh-shadow-md, 0 6px 18px rgba(0,0,0,.08)); }
.drh-card__media { aspect-ratio: 1 / 1; background: var(--dh-surface-alt, #f1e9d8); display: flex; align-items: center; justify-content: center; }
.drh-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drh-card__placeholder { font-family: var(--dh-font-heading, serif); font-size: 2.5rem; color: var(--dh-color-botanical, #477b56); }
.drh-card__body { display: flex; flex-direction: column; gap: 2px; padding: var(--dh-space-3, .75rem); }
.drh-card__name { font-weight: var(--dh-weight-semibold, 600); color: var(--dh-heading, #013b31); }
.drh-card__botanical, .drh-card__alt { font-size: var(--dh-text-xs, .8rem); color: var(--dh-text-muted, #56645b); overflow-wrap: anywhere; }
.drh-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dh-space-3, .75rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drh-cat { display: flex; flex-direction: column; gap: 2px; padding: var(--dh-space-4, 1rem); min-height: var(--dh-tap, 44px); border-radius: var(--dh-radius-md, 10px); background: var(--dh-surface-alt, #f1e9d8); text-decoration: none; color: var(--dh-heading, #013b31); }
.drh-cat__name { font-weight: var(--dh-weight-semibold, 600); }
.drh-cat__count { font-size: var(--dh-text-xs, .8rem); color: var(--dh-text-muted, #56645b); }
.drh-count { color: var(--dh-text-muted, #56645b); margin: 0 0 var(--dh-space-4, 1rem); }
.drh-empty { padding: var(--dh-space-8, 2rem); border-radius: var(--dh-radius-lg, 16px); background: var(--dh-surface-alt, #f1e9d8); text-align: center; margin-bottom: var(--dh-space-10, 2.5rem); }
.drh-pagination ul { list-style: none; margin: var(--dh-space-8, 2rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--dh-space-2, .5rem); justify-content: center; }
.drh-pagination a, .drh-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--dh-tap, 44px); min-height: var(--dh-tap, 44px); padding: 0 var(--dh-space-3, .75rem); border-radius: var(--dh-radius-sm, 6px); border: 1px solid var(--dh-color-line, #e2d9c6); text-decoration: none; }
.drh-pagination span[aria-current] { background: var(--dh-color-primary, #025043); color: var(--dh-on-dark, #fff); border-color: transparent; }
.drh-note { font-size: var(--dh-text-sm, .95rem); color: var(--dh-text-muted, #56645b); }
.drh-disclaimer { margin-top: var(--dh-space-10, 2.5rem); padding: var(--dh-space-5, 1.25rem); border-left: 4px solid var(--dh-color-gold, #c5a46d); background: var(--dh-surface, #fffdf8); border-radius: var(--dh-radius-sm, 6px); font-size: var(--dh-text-sm, .95rem); }
.drh-disclaimer p { margin: 0; }

/* Ingredient page */
.drh-herb__header { display: grid; gap: var(--dh-space-6, 1.5rem); margin: var(--dh-space-6, 1.5rem) 0 var(--dh-space-8, 2rem); }
.drh-herb__title { font-family: var(--dh-font-heading, serif); font-size: var(--dh-text-4xl, 2.5rem); color: var(--dh-heading, #013b31); line-height: var(--dh-leading-tight, 1.2); margin: 0; }
.drh-herb__botanical { font-size: var(--dh-text-lg, 1.2rem); color: var(--dh-color-botanical, #477b56); margin: var(--dh-space-1, .25rem) 0 var(--dh-space-4, 1rem); }
.drh-herb__media { margin: 0; border-radius: var(--dh-radius-lg, 16px); overflow: hidden; background: var(--dh-surface-alt, #f1e9d8); }
.drh-herb__img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.drh-herb__lead { font-size: var(--dh-text-lg, 1.2rem); }
.drh-names { display: flex; flex-wrap: wrap; gap: var(--dh-space-2, .5rem) var(--dh-space-6, 1.5rem); margin: 0 0 var(--dh-space-4, 1rem); }
.drh-names div { display: flex; gap: var(--dh-space-2, .5rem); }
.drh-names dt { color: var(--dh-text-muted, #56645b); }
.drh-names dt::after { content: ":"; }
.drh-names dd { margin: 0; font-weight: var(--dh-weight-semibold, 600); }
.drh-review { display: inline-block; font-size: var(--dh-text-sm, .95rem); padding: var(--dh-space-1, .25rem) var(--dh-space-3, .75rem); border-radius: var(--dh-radius-pill, 999px); background: var(--dh-surface-alt, #f1e9d8); margin: 0 0 var(--dh-space-4, 1rem); }
.drh-review--ok { background: #e6f2ee; color: var(--dh-color-success, #2e6b45); }
.drh-toc ul { list-style: none; margin: 0 0 var(--dh-space-8, 2rem); padding: 0; display: flex; gap: var(--dh-space-2, .5rem); overflow-x: auto; scrollbar-width: thin; }
.drh-toc a { display: inline-flex; align-items: center; white-space: nowrap; min-height: var(--dh-tap, 44px); padding: 0 var(--dh-space-4, 1rem); border-radius: var(--dh-radius-pill, 999px); border: 1px solid var(--dh-color-line, #e2d9c6); text-decoration: none; background: var(--dh-surface, #fffdf8); }
.drh-block { max-width: var(--dh-container-narrow, 820px); margin: 0 0 var(--dh-space-10, 2.5rem); scroll-margin-top: calc(var(--dh-header-h, 64px) + 1rem); }
.drh-block--wide { max-width: none; }
.drh-block h2 { font-family: var(--dh-font-heading, serif); font-size: var(--dh-text-2xl, 1.8rem); color: var(--dh-heading, #013b31); margin: 0 0 var(--dh-space-4, 1rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--dh-space-3, .75rem); }
.drh-block h3 { font-size: var(--dh-text-lg, 1.2rem); margin: var(--dh-space-5, 1.25rem) 0 var(--dh-space-2, .5rem); }
.drh-kind { font-family: var(--dh-font-body, sans-serif); font-size: var(--dh-text-xs, .8rem); font-weight: var(--dh-weight-semibold, 600); letter-spacing: var(--dh-tracking-caps, .1em); text-transform: uppercase; color: var(--dh-color-earth, #8a6a4b); background: var(--dh-surface-alt, #f1e9d8); padding: 2px var(--dh-space-2, .5rem); border-radius: var(--dh-radius-sm, 6px); }
.drh-list { padding-left: 1.2em; }
.drh-list--tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--dh-space-2, .5rem); }
.drh-list--tags li { padding: var(--dh-space-1, .25rem) var(--dh-space-3, .75rem); border-radius: var(--dh-radius-pill, 999px); background: var(--dh-surface-alt, #f1e9d8); }
.drh-facts { display: grid; gap: var(--dh-space-2, .5rem); margin: 0 0 var(--dh-space-4, 1rem); }
.drh-facts div { display: grid; grid-template-columns: minmax(8rem, 35%) 1fr; gap: var(--dh-space-3, .75rem); padding-bottom: var(--dh-space-2, .5rem); border-bottom: 1px solid var(--dh-color-line, #e2d9c6); }
.drh-facts dt { color: var(--dh-text-muted, #56645b); }
.drh-facts dd { margin: 0; overflow-wrap: anywhere; }
.drh-evidence { padding: var(--dh-space-4, 1rem); border-radius: var(--dh-radius-md, 10px); background: var(--dh-surface-alt, #f1e9d8); }
.drh-block--safety { padding: var(--dh-space-5, 1.25rem); border: 1px solid var(--dh-color-line-strong, #cbbd9f); border-radius: var(--dh-radius-lg, 16px); background: var(--dh-surface, #fffdf8); }
.drh-refs { padding-left: 1.4em; overflow-wrap: anywhere; }
.drh-refs li { margin-bottom: var(--dh-space-2, .5rem); }
.drh-ref-type { font-size: var(--dh-text-xs, .8rem); color: var(--dh-text-muted, #56645b); }
.drh-verified { font-size: var(--dh-text-xs, .8rem); color: var(--dh-color-success, #2e6b45); margin: 2px 0 0; }
.dh-stock--in { color: var(--dh-color-success, #2e6b45); }

@media (min-width: 768px) {
	.drh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.drh-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.drh-filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.drh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.drh-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.drh-filters__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
	.drh-herb__header { grid-template-columns: 1.1fr 1fr; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .drh-card__link { transition: none; } }