/* =========================================================================
   CURE — Chulalongkorn Herbal Database
   Component / layout / page styles — ported 1:1 from the approved static
   prototype (html-prototype/assets/styles.css).

   Design tokens + reset live in style.css.

   IMPORTANT: the WordPress templates use BEM-ish class names that differ from
   the prototype's. Every rule below therefore targets BOTH the prototype
   selector and the theme selector (comma separated) so the markup does not
   need to change. See the "theme ↔ prototype" notes next to each block.

   Contents
     01. Layout primitives (container, section)
     02. Header (87px sticky white bar, nav, search, login, lang switch)
     03. Buttons
     04. Inputs / search bars
     05. Chips / badges / eyebrow
     06. Cards, icon tiles, photos
     07. Footer (dark green)
     08. Home page (hero, intro, features-3)
     09. Herb card (shared component)
     10. Archive — two column + filters + pagination
     11. Detail page (hero, tabs, content card, studies table)
     12. Generic page / index templates
     13. Shared inner-page head + box input
     14. Services page
     15. Resources page
     16. Contact page
     17. E-catalogue page
     18. Login page
     19. Responsive (1024 / 900 / 720) + mobile nav toggle
     20. Layout resilience
   ========================================================================= */


/* =========================================================================
   01. LAYOUT PRIMITIVES
   theme: .site-header__inner .site-footer__inner .home-hero__container
          .herb-archive__container
          .herb-index__container .herb-detail ≈ prototype .container
   ========================================================================= */
.container,
.site-header__inner,
.site-footer__inner,
.home-hero__container,
.herb-archive__container,
.herb-index__container,
.herb-detail {
	width: 100%;
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: 24px;
}

.section { padding-block: 72px; }

.site-content { min-height: 40vh; }

/* The theme's <main> wrappers: keep vertical rhythm but let page-level
   sections (hero bands) bleed full width. */
.site-main { padding-block: 0; }
.home-main { padding: 0; }
.page-main,
.herb-index { padding-block: 40px 72px; }

.text-muted,
.herb-filter__label,
.herb-card__excerpt { color: var(--n600); }


/* =========================================================================
   02. HEADER  (87px, white, sticky)
   theme: .site-header__inner ≈ .header-inner
          .site-header__nav / .main-navigation__list ≈ .main-nav
          .site-header__actions ≈ .header-actions
          .herb-lang-switcher ≈ .lang-switch
   ========================================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--white);
	border-bottom: 1px solid var(--n200);
}

/* Prototype fixes the header at 87px; the theme uses min-height so a wrapped
   mobile header can grow. */
.header-inner { height: var(--header-h); }

.header-inner,
.site-header__inner {
	min-height: var(--header-h);
	display: flex;
	align-items: center;
	gap: 28px;
}

/* --- Brand / logo mark --- */
.logo-mark {
	width: 53px;
	height: 53px;
	border-radius: 50%;
	flex: none;
	background: radial-gradient(circle at 35% 30%, #E9EBB0 0%, #C9CE7E 65%, #B7BD68 100%);
	box-shadow: inset 0 -6px 12px rgba(0,0,0,.06);
}

.logo-img {
	width: 53px;
	height: 53px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}
.logo-img-sm { width: 40px; height: 40px; }

.site-header__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

/* WordPress core custom-logo → prototype .logo-img */
.custom-logo,
.site-header__brand img {
	width: 53px;
	height: 53px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.site-header__title-link {
	font-weight: 600;
	font-size: 18px;
	color: var(--green-800);
}

/* --- Primary navigation --- */
.site-header__nav { flex: 1 1 auto; }

.main-nav,
.main-navigation__list {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
	margin-inline: auto;
}

.main-nav a,
.main-navigation__list a {
	position: relative;
	font-size: 16px;
	font-weight: 500;
	color: var(--text-body);
	padding-block: 6px;
	text-decoration: none;
	transition: color .15s ease;
}

.main-nav a:hover,
.main-navigation__list a:hover,
.main-navigation__list a:focus {
	color: var(--pink);
	text-decoration: none;
}

/* Active state: pink label + 2px pink underline (theme uses current-menu-item). */
.main-nav a.active,
.main-navigation__list .current-menu-item > a,
.main-navigation__list .current_page_item > a,
.main-navigation__list .current-menu-ancestor > a {
	color: var(--pink);
	font-weight: 600;
}

.main-nav a.active::after,
.main-navigation__list .current-menu-item > a::after,
.main-navigation__list .current_page_item > a::after,
.main-navigation__list .current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -4px;
	height: 2px;
	border-radius: 2px;
	background: var(--pink);
}

/* --- Right-hand actions cluster --- */
.header-actions,
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: none;
}

/* --- Compact header search: pill input + round pink button ---
   theme: .site-header__search-form ≈ .search-bar.search-compact */
.search-compact,
.site-header__search-form {
	max-width: 320px;
}

.site-header__search-form {
	display: flex;
	align-items: center;
	gap: 10px;
}

.site-header__search-input {
	width: 200px;
	max-width: 34vw;
	min-width: 0;
}

/* --- Login pill ---
   theme: .site-header__login ≈ .btn.btn-primary.btn-login */
.btn-login,
.site-header__login {
	padding: 9px 22px;
}

/* --- Language switcher pill (EN | TH) ---
   theme: .herb-lang-switcher ≈ .lang-switch */
.lang-switch,
.herb-lang-switcher,
.herb-lang-switcher__list {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 13px;
	font-weight: 600;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lang-switch,
.herb-lang-switcher {
	padding: 4px;
	border: 1px solid var(--n200);
	border-radius: var(--radius-pill);
	background: var(--white);
}

.herb-lang-switcher__item { list-style: none; margin: 0; }

.lang-switch a,
.herb-lang-switcher a,
.herb-lang-switcher span {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	color: var(--n600);
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.lang-switch a:hover,
.herb-lang-switcher a:hover {
	color: var(--pink);
	text-decoration: none;
}

.lang-switch a.active,
.herb-lang-switcher__item.is-active a,
.herb-lang-switcher__item.is-active span,
.herb-lang-switcher .current-language a,
.herb-lang-switcher .wpml-ls-current-language a {
	background: var(--pink-50);
	color: var(--pink);
}

/* --- Header search icon (border-drawn magnifier, no icon font) --- */
.site-header__search-icon {
	width: 12px;
	height: 12px;
	border: 2px solid var(--white);
	border-radius: 50%;
	position: relative;
	display: inline-block;
}

.site-header__search-icon::after {
	content: "";
	position: absolute;
	right: -4px;
	bottom: -3px;
	width: 6px;
	height: 2px;
	background-color: var(--white);
	transform: rotate(45deg);
}

/* --- Hamburger toggle (hidden until ≤720px) --- */
.site-header__menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--n200);
	border-radius: 10px;
	background: var(--white);
	cursor: pointer;
	position: relative;
}

.site-header__menu-toggle-box,
.site-header__menu-toggle-box::before,
.site-header__menu-toggle-box::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 20px;
	height: 2px;
	background-color: var(--green-800);
	transform: translateX(-50%);
	transition: transform .2s ease, opacity .2s ease;
}

.site-header__menu-toggle-box { top: 50%; margin-top: -1px; }
.site-header__menu-toggle-box::before { top: -6px; }
.site-header__menu-toggle-box::after { top: 6px; }

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-box {
	background-color: transparent;
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-box::before {
	top: 0;
	transform: translateX(-50%) rotate(45deg);
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-box::after {
	top: 0;
	transform: translateX(-50%) rotate(-45deg);
}


/* =========================================================================
   03. BUTTONS
   theme also emits bare `.button` — it gets the pink pill treatment.
   ========================================================================= */
.btn,
.button,
.herb-filter__apply,
.herb-detail__pdf-button,
.herb-archive__no-results-reset,
.herb-index__no-results-home,
.home-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	border: none;
	border-radius: var(--radius-pill);
	padding: 12px 22px;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

.btn:focus-visible,
.button:focus-visible {
	outline: none;
	box-shadow: var(--ring-pink);
}

/* --- Primary pink pill (also the default for bare `.button`) --- */
.btn-primary,
.button,
.button--primary,
.herb-filter__apply,
.herb-detail__pdf-button,
.herb-archive__no-results-reset,
.herb-index__no-results-home,
.home-hero__cta,
.site-header__login {
	background: var(--pink);
	color: var(--white);
}

.btn-primary:hover,
.button:hover,
.button:focus,
.button--primary:hover,
.herb-filter__apply:hover,
.herb-detail__pdf-button:hover,
.herb-archive__no-results-reset:hover,
.herb-index__no-results-home:hover,
.home-hero__cta:hover,
.site-header__login:hover,
.site-header__login:focus {
	background: var(--pink-hover);
	color: var(--white);
	text-decoration: none;
}

/* --- Ghost / secondary outline pink --- */
.btn-ghost,
.button--secondary,
.btn--ghost {
	background: transparent;
	color: var(--pink);
	border: 1.5px solid var(--pink);
	padding: 10.5px 20px;
}

.btn-ghost:hover,
.button--secondary:hover,
.btn--ghost:hover {
	background: var(--pink-50);
	color: var(--pink);
}

/* --- Neutral outline (Filters, Previous/Next, Reset) --- */
.btn-outline {
	background: var(--white);
	color: var(--n900);
	border: 1px solid var(--n200);
	font-weight: 500;
	box-shadow: var(--shadow-soft);
}

.btn-outline:hover { border-color: var(--pink-200); color: var(--pink); }

.btn-sm,
.btn--pill { padding: 9px 18px; font-size: 14px; }

/* --- Round 45x45 pink search button ---
   theme: .btn-search ≈ .site-header__search-button
          ≈ .home-hero__search-button ≈ .herb-search-form__button */
.btn-search,
.site-header__search-button,
.home-hero__search-button,
.herb-search-form__button {
	width: 45px;
	height: 45px;
	flex: none;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--pink);
	color: var(--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, box-shadow .15s ease;
}

.btn-search:hover,
.site-header__search-button:hover,
.site-header__search-button:focus,
.home-hero__search-button:hover,
.home-hero__search-button:focus,
.herb-search-form__button:hover,
.herb-search-form__button:focus {
	background: var(--pink-hover);
}

.btn-search:focus-visible,
.site-header__search-button:focus-visible,
.home-hero__search-button:focus-visible,
.herb-search-form__button:focus-visible {
	outline: none;
	box-shadow: var(--ring-pink);
}

/* Header search button is compact (34px) to sit inside the 87px bar. */
.site-header__search-button { width: 38px; height: 38px; font-size: 16px; }


/* =========================================================================
   04. INPUTS / SEARCH BARS
   theme: .input ≈ .site-header__search-input
                 ≈ .home-hero__search-input ≈ .herb-search-form__input
          .search-bar ≈ .home-hero__search-bar ≈ .herb-search-form__bar
   ========================================================================= */
.input,
.site-header__search-input,
.home-hero__search-input,
.herb-search-form__input,
.herb-filter__select,
input[type="search"],
input[type="text"],
input[type="email"],
select {
	width: 100%;
	height: 45px;
	border: 1px solid var(--n200);
	border-radius: var(--radius-pill);
	background: var(--white);
	padding: 0 20px;
	font-family: inherit;
	font-size: 15px;
	color: var(--n900);
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.input::placeholder,
input::placeholder,
textarea::placeholder { color: var(--n600); opacity: .8; }

.input:focus,
.site-header__search-input:focus,
.home-hero__search-input:focus,
.herb-search-form__input:focus,
.herb-filter__select:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--pink-200);
	box-shadow: var(--ring-pink);
}

textarea {
	font-family: inherit;
	font-size: 15px;
	color: var(--n900);
	border: 1px solid var(--n200);
	border-radius: 8px;
	padding: 12px 16px;
	background: var(--white);
}

/* Search bar = pill input (cream) + round pink button. */
.search-bar,
.home-hero__search-bar,
.herb-search-form__bar {
	display: flex;
	align-items: center;
	gap: 14px;
}

.search-bar .input,
.home-hero__search-bar .home-hero__search-input,
.herb-search-form__bar .herb-search-form__input {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--cream-deep);
	border-color: transparent;
	height: 52px;
}

.search-bar .input:focus,
.home-hero__search-bar .home-hero__search-input:focus,
.herb-search-form__bar .herb-search-form__input:focus {
	background: var(--white);
	border-color: var(--pink-200);
}

/* The compact header form keeps the 45px pill, not the 52px hero variant. */
.site-header__search-form .site-header__search-input {
	height: 42px;
	background: var(--cream-deep);
	border-color: transparent;
}
.site-header__search-form .site-header__search-input:focus {
	background: var(--white);
	border-color: var(--pink-200);
}


/* =========================================================================
   05. CHIPS / BADGES / EYEBROW
   theme: .herb-detail__chip ≈ .chip.chip-green
   ========================================================================= */
.chip,
.herb-detail__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

/* Detail chips default to the green tint used in the prototype. */
.chip-green,
.herb-detail__chip {
	background: var(--green-50);
	color: var(--green-600);
}

.chip-pink,
.herb-detail__chip--herb_category {
	background: var(--pink-50);
	color: var(--pink);
}

.eyebrow {
	font-size: 14px;
	font-weight: 600;
	color: var(--pink);
	letter-spacing: .01em;
}


/* =========================================================================
   06. CARDS / ICON TILES / PHOTOS
   ========================================================================= */
.card,
.herb-detail__card,
.info-card,
.search-card {
	background: var(--white);
	border: 1px solid var(--n200);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

/* Circular icon tile. */
.icon-tile,
.herb-card__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	flex: none;
	overflow: hidden;
}

.icon-tile-pink  { background: var(--pink-50);  color: var(--pink); }
.icon-tile-green { background: var(--green-50); color: var(--green-600); }
.icon-tile-cream,
.herb-card__icon { background: var(--cream-deep); color: var(--pink); }

/* Photo placeholder. */
.photo,
.info-card__media,
.herb-detail__hero-media {
	background: var(--green-50);
	border-radius: var(--radius-card);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--green-200);
	font-size: 48px;
	overflow: hidden;
}

.photo iconify-icon { font-size: 1em; }
.photo-16x9 { aspect-ratio: 16 / 9; }
.photo-4x3  { aspect-ratio: 4 / 3; }
.photo-1x1  { aspect-ratio: 1 / 1; }

.info-card__image,
.herb-detail__hero-image,
.herb-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* =========================================================================
   07. FOOTER (dark green)
   theme: .site-footer__inner ≈ .container
          .site-footer__regions ≈ .footer-grid
          .site-footer__heading ≈ .footer-col h4
          .site-footer__menu ≈ .footer-col ul
          .site-footer__bar ≈ .footer-bottom
   ========================================================================= */
.site-footer {
	background: var(--green-800);
	color: rgba(255,255,255,.85);
	padding-block: 64px 40px;
	margin-top: 96px;
}

.footer-grid,
.site-footer__regions {
	display: grid;
	grid-template-columns: 1.6fr repeat(4, 1fr);
	gap: 40px;
}

/* The theme footer is brand-only, so its region row is a single auto column. */
.site-footer__regions { grid-template-columns: auto; }

.footer-brand .logo-mark { width: 40px; height: 40px; }

.site-footer .custom-logo,
.site-footer__logo img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 14px;
}

.footer-brand strong,
.site-footer__brand-name {
	display: block;
	color: var(--white);
	font-size: 18px;
	font-weight: 600;
	margin: 14px 0 10px;
}

.footer-brand p,
.site-footer__brand-tagline {
	font-size: 14px;
	max-width: 260px;
	color: rgba(255,255,255,.7);
}

.footer-col h4,
.site-footer__heading {
	color: var(--white);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.footer-col ul,
.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.footer-col a,
.site-footer__menu a,
.site-footer__brand-link {
	font-size: 14px;
	color: rgba(255,255,255,.75);
	text-decoration: none;
}

.footer-col a:hover,
.site-footer__menu a:hover,
.site-footer__brand-link:hover {
	color: var(--white);
	text-decoration: none;
}

.footer-tag {
	display: inline-block;
	margin-left: 8px;
	font-size: 11px;
	font-weight: 600;
	color: var(--green-200);
}

.footer-bottom,
.site-footer__bar {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.15);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: rgba(255,255,255,.6);
}

.site-footer__copyright {
	margin: 0;
	font-size: 13px;
	color: rgba(255,255,255,.6);
}


/* =========================================================================
   08. HOME PAGE
   theme: .home-hero ≈ .hero ; .home-hero__heading ≈ .hero h1
   ========================================================================= */
.hero,
.home-hero {
	background: var(--cream);
	padding-block: 88px 96px;
	text-align: center;
	background-size: cover;
	background-position: center;
}

.hero h1,
.home-hero__heading {
	font-size: 40px;
	line-height: 1.15;
	margin: 0 0 18px;
	color: var(--n900);
}

.hero-caption,
.home-hero__subheading {
	font-size: 13px;
	color: var(--n600);
	margin: 0 0 34px;
}

.hero-caption span { margin-inline: 6px; }

.hero .search-bar,
.home-hero__search-bar {
	max-width: 720px;
	margin-inline: auto;
}

.home-hero__container { position: relative; z-index: 1; }

/* Optional ACF background image → dark green scrim for legibility. */
.home-hero--has-bg { position: relative; color: var(--white); }

.home-hero--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(27, 77, 46, .55);
}

.home-hero--has-bg .home-hero__heading { color: var(--white); }
.home-hero--has-bg .home-hero__subheading { color: rgba(255,255,255,.9); }

.home-hero__cta-wrap { margin-top: 24px; }

/* --- Intro band --- */
.intro { text-align: center; }
.intro .eyebrow { display: block; margin-bottom: 12px; }
.intro h2 { font-size: 34px; margin-bottom: 14px; }
.intro p { color: var(--n600); }

/* --- Services / features section --- */
.section-muted { background: var(--cream); }
.features-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 48px;
	margin-top: 48px;
}
.feature-item { text-align: center; }
.feature-item .icon-tile { margin: 0 auto 16px; }
.feature-item h3 { font-size: 18px; margin-bottom: 8px; }
.feature-item p { font-size: 14px; color: var(--n600); }
.feature-wide { max-width: 360px; margin: 40px auto 0; text-align: center; }


/* =========================================================================
   09. HERB CARD (shared component)
   theme: .herb-results-grid ≈ .herb-grid
          .herb-card__link/__icon/__name/__name-th/__scientific/__excerpt
          render the prototype's centered card contents.
   ========================================================================= */
.herb-grid,
.herb-results-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.herb-card {
	min-width: 0;
	border: 1px solid var(--n200);
	border-radius: var(--radius-card);
	background: var(--white);
	padding: 26px 18px 24px;
	text-align: center;
	min-height: 298px;
	box-shadow: var(--shadow-soft);
	overflow: hidden;
	transition: box-shadow .15s ease, border-color .15s ease;
}

.herb-card:hover {
	box-shadow: var(--shadow-card);
	border-color: var(--pink-100);
}

/* Theme card wraps its contents in an <a> — make it the flex column. */
.herb-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	height: 100%;
	color: var(--n900);
	text-decoration: none;
}

.herb-card__link:hover { text-decoration: none; }

/* Circular cream icon tile. */
.herb-card .icon-tile,
.herb-card__icon {
	margin: 0 auto 18px;
	width: 64px;
	height: 64px;
	background: var(--cream-deep);
	color: var(--pink);
}

.herb-card h3,
.herb-card__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--n900);
	margin: 0 0 14px;
	line-height: 1.3;
}

.herb-card__name-th {
	display: block;
	font-weight: 400;
	color: var(--n600);
	font-size: 13px;
	margin-top: 2px;
}

.herb-card p,
.herb-card__scientific,
.herb-card__excerpt {
	font-size: 13px;
	color: var(--n600);
	margin: 0 0 12px;
}

.herb-card__scientific em { font-style: italic; }

.herb-card .research { font-size: 13px; color: var(--n600); }

/* Selected herb card = pink gradient. */
.herb-card.is-selected {
	border-color: var(--pink-100);
	background: linear-gradient(180deg, var(--pink-50) 0%, var(--pink-200) 100%);
}
.herb-card.is-selected .icon-tile,
.herb-card.is-selected .herb-card__icon { background: rgba(255,255,255,.55); }
.herb-card.is-selected h3,
.herb-card.is-selected p,
.herb-card.is-selected .research { color: var(--n900); }


/* =========================================================================
   10. ARCHIVE PAGE
   theme: .herb-archive__layout ≈ .archive-layout
          .herb-archive__info / .info-card ≈ .info-card
          .herb-archive__search / .search-card ≈ .search-card
          .herb-archive__pagination .page-numbers ≈ .page-num (.current ≈ .active)
   ========================================================================= */
.archive-layout,
.herb-archive__layout {
	display: grid;
	grid-template-columns: 484px minmax(0, 1fr);
	gap: 30px;
	align-items: start;
	padding-block: 40px 72px;
}

/* --- Left info card --- */
.info-card,
.herb-archive__info {
	padding: 0;
	overflow: hidden;
}

.info-card .photo,
.info-card__media {
	border-radius: 0;
	aspect-ratio: 484 / 308;
}

.info-card-body,
.info-card__body {
	padding: 28px 26px 26px;
	position: relative;
	min-height: 360px;
}

.info-card-body h2,
.info-card__heading {
	font-size: 22px;
	margin: 0 0 20px;
}

.info-card-body p,
.info-card__text {
	color: var(--text-body);
	font-size: 15px;
	margin: 0 0 18px;
}

.info-card-body .muted {
	color: var(--n600);
	white-space: pre-line;
	font-size: 14.5px;
}

.info-card .doc-icon {
	position: absolute;
	right: 24px; bottom: 22px;
	color: var(--pink);
	font-size: 24px;
}

/* --- Right search card --- */
.search-card,
.herb-archive__search { padding: 28px 26px 26px; min-width: 0; }

.search-card h1,
.herb-archive__search h1 { font-size: 22px; margin: 0 0 18px; }

.search-card-tools {
	display: flex;
	justify-content: flex-end;
	margin: 16px 0 20px;
}

.herb-search-form__bar { margin-bottom: 18px; }

/* --- Filter row: tidy .input / .btn-outline look --- */
.herb-search-form__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	padding-bottom: 22px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--n200);
}

.herb-filter {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.herb-filter__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--n600);
}

.herb-filter__select {
	min-width: 160px;
	height: 45px;
	padding: 0 16px;
	background: var(--white);
	box-shadow: var(--shadow-soft);
}

.herb-filter--actions {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

.herb-filter__apply { padding: 11px 20px; font-size: 14px; }

.herb-filter__reset {
	font-size: 14px;
	font-weight: 500;
	color: var(--n600);
	padding: 10px 16px;
	border: 1px solid var(--n200);
	border-radius: var(--radius-pill);
	background: var(--white);
	box-shadow: var(--shadow-soft);
	white-space: nowrap;
}

.herb-filter__reset:hover { border-color: var(--pink-200); color: var(--pink); }

/* --- Messages (empty search / no results) --- */
.herb-archive__message,
.herb-archive__no-results,
.herb-archive__prompt,
.herb-index__message,
.herb-index__no-results {
	text-align: center;
	padding: 56px 16px;
	color: var(--n600);
	font-size: 15px;
}

.herb-archive__no-results-title,
.herb-index__no-results-title {
	font-size: 22px;
	color: var(--n900);
	margin: 0 0 10px;
}

.herb-archive__no-results-text,
.herb-index__no-results-text { color: var(--n600); margin: 0 0 20px; }

.herb-archive__no-results-reset,
.herb-index__no-results-home { margin-top: 8px; }

/* --- Pagination --- */
.pagination,
.herb-archive__pagination,
.herb-index__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}

.page-status { font-size: 14px; color: var(--n600); }
.page-nums { display: flex; gap: 8px; }

.page-num,
.herb-archive__pagination .page-numbers,
.herb-index__pagination .page-numbers {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--n200);
	border-radius: var(--radius-pill);
	background: var(--white);
	font-size: 14px;
	font-weight: 500;
	color: var(--n900);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.page-num:hover,
.herb-archive__pagination a.page-numbers:hover,
.herb-index__pagination a.page-numbers:hover {
	border-color: var(--pink-200);
	color: var(--pink);
	text-decoration: none;
}

.page-num.active,
.herb-archive__pagination .page-numbers.current,
.herb-index__pagination .page-numbers.current {
	background: var(--pink);
	border-color: var(--pink);
	color: var(--white);
}

.herb-archive__pagination .page-numbers.dots,
.herb-index__pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--n600);
}

.page-actions { display: flex; gap: 12px; }


/* =========================================================================
   11. DETAIL PAGE
   theme: .herb-detail ≈ .detail-wrap ; .herb-detail__breadcrumb ≈ .breadcrumb
          .herb-detail__hero ≈ .detail-hero ; .herb-detail__hero-media ≈ .detail-photo
          .herb-detail__card ≈ .card.content-card ; .herb-detail__studies ≈ .studies-table
   ========================================================================= */
.detail-wrap,
.herb-detail { padding-block: 40px 72px; }

.breadcrumb,
.herb-detail__breadcrumb {
	font-size: 14px;
	color: var(--n600);
	margin-bottom: 28px;
}

.breadcrumb .sep,
.herb-detail__breadcrumb-sep { margin-inline: 6px; color: var(--n200); }

.herb-detail__breadcrumb-link { color: var(--n600); }
.herb-detail__breadcrumb-link:hover { color: var(--pink); }
.herb-detail__breadcrumb-current { color: var(--n900); font-weight: 500; }

/* Translation-fallback notice — tasteful pink-50 banner. */
.herb-detail__fallback-banner {
	background: var(--pink-50);
	border: 1px solid var(--pink-100);
	color: #8a2360;
	border-radius: 10px;
	padding: 12px 18px;
	font-size: 14px;
	margin-bottom: 28px;
}

/* Content-unavailable state. */
.herb-detail__unavailable { text-align: center; padding: 96px 16px; }
.herb-detail__unavailable-title { font-size: 28px; margin-bottom: 12px; }
.herb-detail__unavailable-text { color: var(--n600); }

/* --- Hero row --- */
.detail-hero,
.herb-detail__hero {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr) auto;
	gap: 36px;
	align-items: start;
	margin-bottom: 8px;
}

/* The theme hero has only 2 children (media + body). */
.herb-detail__hero { grid-template-columns: 260px minmax(0, 1fr); }

.detail-photo,
.herb-detail__hero-media {
	width: 260px;
	height: 260px;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-card);
	flex: none;
}

.herb-detail__hero-body { min-width: 0; }

.detail-title h1,
.herb-detail__title {
	font-size: 32px;
	line-height: 1.15;
	margin: 0;
}

.herb-detail__title-thai {
	font-weight: 400;
	color: var(--n600);
}

.detail-title .latin,
.herb-detail__scientific {
	font-style: italic;
	color: var(--n600);
	font-size: 20px;
	margin: 2px 0 0;
}

.detail-chips,
.herb-detail__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 22px;
	list-style: none;
	padding: 0;
}

.detail-desc,
.herb-detail__description {
	color: var(--text-body);
	font-size: 16px;
	max-width: 460px;
}

.herb-detail__description p { margin: 0 0 14px; }

.herb-detail__pdf-button { margin-top: 22px; }

/* --- Tabs --- */
.tabs {
	display: flex;
	gap: 40px;
	border-bottom: 1px solid var(--n200);
	margin: 48px 0 36px;
}
.tab {
	position: relative;
	padding-bottom: 14px;
	font-size: 16px;
	font-weight: 500;
	color: var(--n600);
}
.tab.active { color: var(--n900); font-weight: 600; }
.tab.active::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--pink);
}

/* --- Content card --- */
.content-card,
.herb-detail__card { padding: 34px 36px 40px; margin-top: 48px; }

.content-card h2,
.herb-detail__card-heading { font-size: 22px; margin: 0 0 16px; }

.content-card > p,
.herb-detail__medicinal,
.herb-detail__overview-text {
	color: var(--n900);
	max-width: 1050px;
	margin-bottom: 28px;
}

.herb-detail__medicinal p,
.herb-detail__overview-text p { margin: 0 0 14px; }

/* --- Studies table --- */
.studies-table,
.herb-detail__studies {
	width: 100%;
	border-collapse: collapse;
}

.studies-table th,
.herb-detail__studies th {
	text-align: left;
	font-size: 14px;
	font-weight: 500;
	color: var(--n600);
	background: var(--cream);
	padding: 14px 18px;
}

.studies-table th:first-child,
.herb-detail__studies th:first-child { border-radius: 8px 0 0 8px; }
.studies-table th:last-child,
.herb-detail__studies th:last-child { border-radius: 0 8px 8px 0; }

.studies-table td,
.herb-detail__studies td {
	font-size: 15px;
	padding: 16px 18px;
	color: var(--n900);
	vertical-align: top;
}

.studies-table tbody tr:nth-child(odd) td,
.herb-detail__studies tbody tr:nth-child(odd) td { background: var(--cream); }


/* =========================================================================
   12. GENERIC PAGE / INDEX TEMPLATES
   theme: .page-entry / .page-entry__title / .page-entry__content
   ========================================================================= */
.page-entry {
	width: 100%;
	max-width: 800px;
	margin-inline: auto;
	padding-inline: 24px;
}

.page-entry__header { margin-bottom: 28px; }

.page-entry__title {
	font-size: 40px;
	line-height: 1.15;
	margin: 0;
}

.page-entry__featured-image { margin: 0 0 32px; }

.page-entry__thumb { border-radius: var(--radius-card); }

.page-entry__content { font-size: 16px; color: var(--n900); }

.page-entry__content > * + * { margin-top: 20px; }

.page-entry__content p { margin: 0 0 20px; }

.page-entry__content h2 { font-size: 28px; margin: 40px 0 14px; }
.page-entry__content h3 { font-size: 21px; margin: 32px 0 12px; }

.page-entry__content a { color: var(--pink); }
.page-entry__content a:hover { text-decoration: underline; }

.page-entry__content ul,
.page-entry__content ol { margin: 0 0 20px; padding-left: 22px; }
.page-entry__content li { margin-bottom: 8px; }

.page-entry__content img { border-radius: var(--radius-card); margin-block: 8px; }

.page-entry__content blockquote {
	margin: 24px 0;
	padding: 18px 24px;
	background: var(--cream);
	border-left: 3px solid var(--pink);
	border-radius: 0 8px 8px 0;
	color: var(--n600);
}

.page-entry__pagination {
	margin-top: 32px;
	font-size: 14px;
	color: var(--n600);
	display: flex;
	gap: 10px;
	align-items: center;
}

.page-entry__pagination-label { font-weight: 600; }

/* --- index.php listing --- */
.herb-index__header { text-align: center; margin-bottom: 48px; }
.herb-index__title { font-size: 34px; line-height: 1.2; margin: 0 0 12px; }
.herb-index__description { color: var(--n600); }


/* =========================================================================
   13. SHARED — inner page head + box input
   ========================================================================= */
.page-head { padding-block: 56px 8px; }
.page-head .eyebrow { display: block; margin-bottom: 12px; }
.page-head h1 { font-size: 44px; line-height: 1.1; margin-bottom: 16px; }
.page-head .lead { color: var(--n900); font-size: 16px; max-width: 620px; }

.input-box {
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--n200);
	border-radius: 8px;
	background: var(--cream-deep);
	padding: 12px 16px;
	font-family: inherit;
	font-size: 15px;
	color: var(--n900);
}
.input-box::placeholder { color: var(--n600); opacity: .75; }
.input-box:focus {
	outline: none;
	border-color: var(--pink-200);
	box-shadow: var(--ring-pink);
	background: var(--white);
}


/* =========================================================================
   14. SERVICES PAGE
   ========================================================================= */
.service-rows { display: grid; gap: 22px; margin-top: 44px; }
.service-row {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	align-items: center;
	gap: 30px;
	padding: 28px 32px;
}
.service-row .service-body h3 { font-size: 21px; margin-bottom: 8px; }
.service-row .service-body p { color: var(--n600); font-size: 15px; max-width: 600px; }
.services-cta { text-align: center; margin-top: 72px; }
.services-cta p { font-size: 17px; font-weight: 600; margin-bottom: 22px; }


/* =========================================================================
   15. RESOURCES PAGE
   ========================================================================= */
.filter-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 28px; }
.filter-chip {
	padding: 8px 18px;
	border-radius: var(--radius-pill);
	font-size: 14px;
	font-weight: 500;
	background: var(--green-50);
	color: var(--green-600);
	border: none;
}
.filter-chip:hover { background: var(--pink-50); color: var(--pink); }
.filter-chip.active { background: var(--pink); color: var(--white); }

.article-rows { display: grid; gap: 20px; }
.article-row {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	align-items: center;
	gap: 30px;
	padding: 24px 30px;
}
.article-body .chip { margin-bottom: 10px; }
.article-body h3 { font-size: 19px; margin-bottom: 6px; line-height: 1.3; }
.article-body p { color: var(--text-body); font-size: 14.5px; max-width: 620px; }
.article-date { font-size: 14px; color: var(--n600); white-space: nowrap; }


/* =========================================================================
   16. CONTACT PAGE
   ========================================================================= */
.contact-layout {
	display: grid;
	grid-template-columns: 560px 1fr;
	gap: 64px;
	align-items: start;
	padding-block: 8px 80px;
}
.contact-form h2 { font-size: 24px; margin-bottom: 26px; }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.field textarea.input-box { min-height: 180px; resize: vertical; }
.inquiry-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.inquiry-pill {
	padding: 12px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	background: var(--green-50);
	color: var(--green-600);
	border: 1px solid transparent;
	text-align: center;
}
.inquiry-pill.active { background: var(--pink-100); color: var(--pink); }
.contact-form .btn-primary { width: 100%; margin-top: 6px; }

.contact-info { display: grid; gap: 26px; }
.contact-map {
	background: var(--cream-deep);
	border-radius: var(--radius-card);
	aspect-ratio: 445/246;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pink);
	font-size: 40px;
}
.info-rows { display: grid; gap: 24px; }
.info-line { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; }
.info-line iconify-icon { color: var(--pink); font-size: 22px; margin-top: 2px; }
.info-line span { font-size: 15px; color: var(--n900); }


/* =========================================================================
   17. E-CATALOGUE PAGE
   ========================================================================= */
.catalogue-tools {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 8px 0 24px;
}
.catalogue-tools .search-bar { flex: 1; }
.catalogue-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
}
.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.product-card { display: flex; flex-direction: column; overflow: hidden; }
.product-card .photo { border-radius: 0; aspect-ratio: 16/11; }
.product-card .product-body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.product-card .chip { align-self: flex-start; margin-bottom: 10px; }
.product-card h3 { font-size: 16px; margin-bottom: 6px; }
.product-card .product-sub { font-size: 13.5px; color: var(--n600); margin-bottom: 16px; }
.product-actions { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.product-actions .btn-ghost { flex: 1; }
.btn-download {
	width: 40px; height: 40px; flex: none;
	border: 1px solid var(--n200);
	border-radius: 50%;
	background: var(--white);
	color: var(--n600);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 18px;
}
.btn-download:hover { border-color: var(--pink-200); color: var(--pink); }


/* =========================================================================
   18. LOGIN PAGE
   ========================================================================= */
.login-split {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.login-brand {
	background: var(--green-800);
	color: var(--white);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px 96px;
}
.login-brand .logo-img { width: 96px; height: 96px; margin-bottom: 40px; }
.login-brand h1 { color: var(--white); font-size: 56px; line-height: 1; margin-bottom: 18px; }
.login-brand h2 { color: var(--white); font-size: 30px; font-weight: 500; margin-bottom: 40px; }
.login-brand p { font-style: italic; font-size: 16px; color: rgba(255,255,255,.85); max-width: 320px; }
.login-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px 96px;
}
.login-form { width: 100%; max-width: 380px; margin-inline: auto; }
.login-form h2 { font-size: 32px; text-align: center; margin-bottom: 10px; }
.login-form .login-sub { text-align: center; color: var(--n600); font-size: 15px; margin-bottom: 40px; }
.login-form .input { margin-bottom: 18px; height: 52px; }
.login-form .forgot {
	display: block;
	text-align: right;
	color: var(--pink);
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 28px;
}
.login-form .btn-primary { width: 100%; height: 52px; }


/* =========================================================================
   19. RESPONSIVE (prototype breakpoints: 1024 / 900 / 720)
   ========================================================================= */
@media (max-width: 1024px) {
	.archive-layout,
	.herb-archive__layout { grid-template-columns: 1fr; }

	.footer-grid,
	.site-footer__regions { grid-template-columns: 1fr 1fr; }

	.detail-hero,
	.herb-detail__hero { grid-template-columns: 1fr; }

	.detail-hero .btn-primary,
	.herb-detail__hero .btn-primary { justify-self: start; }

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

	.site-header__search-input { width: 150px; }
}

@media (max-width: 900px) {
	.contact-layout { grid-template-columns: 1fr; gap: 40px; }
	.product-grid { grid-template-columns: repeat(2, 1fr); }
	.login-split { grid-template-columns: 1fr; }
	.login-brand { padding: 56px 40px; }
	.login-panel { padding: 56px 40px; }
	.service-row, .article-row { grid-template-columns: 56px 1fr; }
	.service-row .btn, .article-date { grid-column: 2; }
}

@media (max-width: 720px) {
	/* Prototype hides the nav outright; the theme collapses it behind the
	   hamburger toggle (#primary-navigation.is-open). */
	.main-nav { display: none; }

	.hero h1,
	.home-hero__heading,
	.intro h2,
	.herb-index__title,
	.page-entry__title { font-size: 28px; }

	.herb-grid,
	.herb-results-grid { grid-template-columns: 1fr 1fr; }

	.features-3 { grid-template-columns: 1fr; }

	.footer-grid,
	.site-footer__regions { grid-template-columns: 1fr; gap: 32px; }

	.footer-bottom,
	.site-footer__bar { flex-direction: column; gap: 12px; align-items: flex-start; }

	.tabs { gap: 24px; }

	.pagination { flex-direction: column; gap: 16px; align-items: flex-start; }

	.hero, .home-hero { padding-block: 56px 64px; }

	/* --- Header: wrap into rows, expose the toggle --- */
	.header-inner,
	.site-header__inner {
		height: auto;
		flex-wrap: wrap;
		gap: 12px;
		padding-block: 12px;
	}

	.site-header__brand { order: 1; }

	.site-header__menu-toggle {
		display: inline-block;
		order: 2;
		margin-left: auto;
	}

	.site-header__actions {
		order: 3;
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	/* Collapsible nav — hidden until the toggle sets .is-open. */
	.site-header__nav {
		order: 4;
		flex-basis: 100%;
		display: none;
	}

	.site-header__nav.is-open { display: block; }

	.main-navigation__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-inline: 0;
	}

	.main-navigation__list li { border-top: 1px solid var(--n200); }

	.main-navigation__list a { display: block; padding: 12px 0; }

	/* Underline indicator would look odd stacked — keep colour only. */
	.main-navigation__list .current-menu-item > a::after,
	.main-navigation__list .current_page_item > a::after,
	.main-navigation__list .current-menu-ancestor > a::after { display: none; }

	/* Header search goes full width and stays reachable. */
	.site-header__search,
	.site-header__search-form { width: 100%; max-width: none; }

	.site-header__search-input { width: 100%; max-width: none; }

	/* Detail hero image no longer fixed width. */
	.detail-photo,
	.herb-detail__hero-media { width: 100%; max-width: 260px; height: auto; }

	.detail-title h1,
	.herb-detail__title { font-size: 26px; }

	.content-card,
	.herb-detail__card { padding: 24px 20px 28px; }

	.search-card,
	.herb-archive__search,
	.info-card-body,
	.info-card__body { padding: 22px 18px; }

	.info-card-body,
	.info-card__body { min-height: 0; }

	.herb-search-form__filters { flex-direction: column; align-items: stretch; }

	.herb-filter--actions { margin-left: 0; justify-content: space-between; }
}


/* =========================================================================
   20. LAYOUT RESILIENCE
   Guard against overflow / overlap regardless of content length.
   ========================================================================= */
html,
body { overflow-x: hidden; max-width: 100%; }

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

.herb-card__name,
.herb-card__scientific,
.herb-card__excerpt,
.herb-detail__title,
.herb-detail__scientific,
.herb-detail__description,
.info-card__heading,
.info-card__text,
.home-hero__heading,
.page-entry__title,
.herb-index__title {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.herb-grid > *,
.herb-results-grid > *,
.archive-layout > *,
.herb-archive__layout > *,
.detail-hero > *,
.herb-detail__hero > *,
.footer-grid > *,
.site-footer__regions > * { min-width: 0; }

/* Tables scroll inside the card rather than breaking the page. */
.content-card,
.herb-detail__card { overflow-x: auto; }

.studies-table,
.herb-detail__studies { min-width: 480px; }

.herb-detail__description img,
.herb-detail__medicinal img,
.info-card__body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* =========================================================================
   21. FIGMA PARITY — Services (page-services.php) +
       E-Catalogue (page-e-catalogue.php)

   Added for the Figma-accurate page templates. Nothing above is modified:
   `.btn-rect` is an additive modifier that overrides only border-radius, so
   `.btn-primary` / `.btn-outline` keep their colours, and the existing pill
   classes (header "Log in" = `.btn--pill`) are untouched.
   ========================================================================= */

/* --- Rounded-rectangle buttons (in-page actions; NOT pills) --- */
.btn-rect,
.btn.btn-rect { border-radius: 8px; }

/* --- Left-aligned page hero (large h1 + 2-line intro) --- */
.page-hero { padding-block: 48px 8px; }
.page-hero__title {
	font-size: 44px;
	line-height: 1.1;
	font-weight: 400;
	color: var(--n900);
	text-align: left;
	margin: 0 0 14px;
}
.page-hero__intro {
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-body);
	max-width: 640px;
	margin: 0;
}

/* =========================== SERVICES ==================================== */
.svc-rows { display: grid; gap: 20px; margin-top: 40px; }
.svc-row {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	align-items: center;
	gap: 30px;
	padding: 28px 32px;
	background: var(--white);
	border: 1px solid var(--n200);
	border-radius: var(--radius-card);
	box-shadow: none;
}
.svc-row__title {
	font-size: 21px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--n900);
	margin: 0 0 8px;
}
.svc-row__desc {
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-body);
	max-width: 620px;
	margin: 0;
}
.svc-row__cta { white-space: nowrap; }

.svc-outro { text-align: center; padding-block: 80px 96px; }
.svc-outro__text {
	font-size: 16px;
	font-weight: 500;
	color: var(--n900);
	margin: 0 0 24px;
}

/* ========================== E-CATALOGUE ================================== */
.cat-tools {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 26px 0 20px;
}
.cat-tools__form {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 14px;
}
.cat-tools__input {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--cream-deep);  /* cream search pill from the Figma */
	border-color: transparent;
}
.cat-tools__input:focus { background: var(--white); }
.cat-tools__filters {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cat-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.cat-pager__count { font-size: 14.5px; color: var(--n900); margin: 0; }
.cat-pager__nav { display: flex; align-items: center; gap: 10px; }

.cat-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 24px;
	align-items: start;
	padding-bottom: 90px;
}

.cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-content: start;
}

.cat-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;           /* clips the photo to the card radius */
	box-shadow: none;
}
.cat-card__photo {
	border-radius: 0;
	aspect-ratio: 16 / 11;
	background: var(--green-50);
	color: var(--pink);
	font-size: 40px;
}
.cat-card__body {
	background: #FFFFFF;        /* white card body (measured) */
	padding: 14px 16px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
/* Full-width template opt-out: the three Figma-parity page templates
   (services / e-catalogue / contact) wrap their content in `.page-entry`
   inside `.container`. Section 12 caps `.page-entry` at 800px for the
   generic page.php reading column, which squeezes these designs. This
   modifier hands width control back to the 1230px `.container`. */
.page-entry--wide {
	max-width: none;
	padding-inline: 0;
	margin-inline: 0;
}

/* Catalogue card chips may carry long labels ("Standardized extract").
   The global `.chip` rule uses white-space: nowrap, which overflows the
   narrow card, so allow wrapping here only (pill shape is preserved). */
.cat-card__chip {
	background: var(--cream-deep);
	color: var(--pink);
	align-self: flex-start;
	margin-bottom: 10px;
	white-space: normal;
	max-width: 100%;
}
.cat-card__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--n900);
	margin: 0 0 6px;
	overflow-wrap: anywhere;
}
.cat-card__sub {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--text-body);
	margin: 0 0 16px;
	overflow-wrap: anywhere;
}
.cat-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: auto;
}
.cat-card__view { flex: 1; text-align: center; justify-content: center; }
.cat-card__download.btn-rect {
	width: 40px;
	height: 40px;
	border-radius: 8px;
}

.cat-detail {
	background: var(--cream);
	border-radius: var(--radius-card);
	overflow: hidden;
	position: sticky;
	top: calc(var(--header-h) + 20px);
}
.cat-detail__photo {
	border-radius: 0;
	aspect-ratio: 16 / 11;
	background: var(--green-50);
	color: var(--pink);
	font-size: 54px;
}
.cat-detail__body { padding: 24px 26px 30px; }
.cat-detail__title {
	font-size: 22px;
	font-weight: 400;
	color: var(--n900);
	margin: 0 0 20px;
}
.cat-detail__line {
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-body);
	margin: 0 0 2px;
}
.cat-detail__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
}
.cat-detail__actions .btn { display: inline-flex; align-items: center; gap: 8px; }

/* --- Responsive --- */
@media (max-width: 1024px) {
	/* Detail panel drops below the product grid. */
	.cat-layout { grid-template-columns: 1fr; }
	.cat-detail { position: static; }
	.page-hero__title { font-size: 38px; }
}

@media (max-width: 900px) {
	.cat-grid { grid-template-columns: repeat(2, 1fr); }
	.svc-row { grid-template-columns: 64px 1fr; gap: 20px 24px; }
	.svc-row__cta { grid-column: 2; justify-self: start; margin-top: 4px; }
}

@media (max-width: 720px) {
	.page-hero { padding-block: 32px 4px; }
	.page-hero__title { font-size: 32px; }
	.cat-grid { grid-template-columns: 1fr; }
	.cat-tools { flex-wrap: wrap; }
	.cat-tools__form { flex-basis: 100%; }
	.cat-pager { flex-direction: column; align-items: flex-start; gap: 10px; }
	/* Service row stacks: icon, then body, then the CTA. */
	.svc-row {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 24px 20px;
	}
	.svc-row__cta { grid-column: 1; justify-self: stretch; text-align: center; }
	.svc-outro { padding-block: 48px 64px; }
}


/* =========================================================================
   21. CONTACT PAGE — Contact Form 7 integration
   -------------------------------------------------------------------------
   CF7 emits its own markup, so instead of restyling the template we map CF7's
   classes onto the theme's existing form language:
     .wpcf7-form input/textarea  ->  looks like .input-box
     .wpcf7-radio                ->  looks like .inquiry-pills / .inquiry-pill
     .wpcf7-submit               ->  looks like .btn.btn-primary.btn-rect (full width)
     response / validation text  ->  tasteful pink (error) + green (success)
   ========================================================================= */

/* --- Field wrappers + labels ------------------------------------------- */
.wpcf7-form p { margin: 0 0 22px; }
.wpcf7-form label { display: block; font-size: 15px; font-weight: 500; }
.wpcf7-form label > .wpcf7-form-control-wrap { margin-top: 8px; display: block; }
.wpcf7-form .wpcf7-form-control-wrap { display: block; }

/* --- Text inputs + textarea = .input-box ------------------------------- */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--n200);
	border-radius: 8px;
	background: var(--cream-deep);
	padding: 12px 16px;
	font-family: inherit;
	font-size: 15px;
	color: var(--n900);
	box-sizing: border-box;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: var(--n600); opacity: .75; }

.wpcf7-form textarea { min-height: 180px; resize: vertical; }

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form input[type="date"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--pink-200);
	box-shadow: var(--ring-pink);
	background: var(--white);
}

/* --- Radio / checkbox groups = inline pills ---------------------------- */
.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}
.wpcf7-form .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 88px;
	padding: 12px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	background: var(--green-50);
	color: var(--green-600);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wpcf7-form .wpcf7-list-item label:hover { border-color: var(--pink-100); }
/* Selected option adopts the .inquiry-pill.active pink treatment. */
.wpcf7-form .wpcf7-list-item input:checked + .wpcf7-list-item-label,
.wpcf7-form .wpcf7-list-item label:has(input:checked) {
	background: var(--pink-100);
	color: var(--pink);
}
.wpcf7-form .wpcf7-list-item input:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* --- Submit = .btn.btn-primary.btn-rect, full width -------------------- */
.wpcf7-form .wpcf7-submit {
	width: 100%;
	margin-top: 6px;
	min-height: 48px;
	padding: 13px 24px;
	border: none;
	border-radius: 10px;
	background: var(--pink);
	color: var(--white);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: filter .15s ease, box-shadow .15s ease;
}
.wpcf7-form .wpcf7-submit:hover { filter: brightness(.94); }
.wpcf7-form .wpcf7-submit:focus-visible { outline: none; box-shadow: var(--ring-pink); }
.wpcf7-form .wpcf7-submit:disabled { opacity: .6; cursor: not-allowed; }

/* --- Spinner ----------------------------------------------------------- */
.wpcf7-form .wpcf7-spinner { margin: 12px auto 0; display: block; }

/* --- Response + validation messages ----------------------------------- */
.wpcf7-form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 18px;
	border-radius: 10px;
	border: 1px solid var(--pink-100);
	background: var(--pink-50);
	color: #8a2360;
	font-size: 14px;
	line-height: 1.5;
}
.wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--green-200);
	background: var(--green-50);
	color: var(--green-600);
}
.wpcf7-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: var(--pink);
	font-size: 13px;
	font-weight: 500;
}
.wpcf7-form .wpcf7-not-valid { border-color: var(--pink) !important; }

/* --- Static fallback form (CF7 missing) -------------------------------- */
.contact-form__notice { margin-bottom: 22px; }
.contact-form__fallback fieldset.field { border: 0; margin: 0 0 22px; padding: 0; }
.contact-form__fallback fieldset.field legend {
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 8px;
	padding: 0;
}
.contact-form__fallback .inquiry-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	margin: 0;
}
.contact-form__fallback .btn-primary { width: 100%; margin-top: 6px; }

/* Contact info column: links inherit the body colour with a subtle underline. */
.info-line a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--n200); }
.info-line a:hover,
.info-line a:focus-visible { color: var(--pink); border-bottom-color: var(--pink); }
.info-line { margin: 0; }

/* =========================================================================
   21c. RESOURCES PAGE — Figma parity additions (page-resources.php)

   Section 15 already defines `.filter-chips` / `.filter-chip` / `.article-rows`
   / `.article-row` / `.article-body` / `.article-date`, and the 900px media
   query already stacks the date under the body. This sub-block only appends
   what the Figma needs on top of that:
     - `.article-row` gets the same bordered / no-shadow card treatment as
       `.svc-row` (section 21 services rows).
     - `.filter-chip` becomes anchor-friendly (chips render as links that set
       `?topic=`), keeping the pink active state from section 15.
   ========================================================================= */

/* --- Chips as links ----------------------------------------------------- */
.filter-chips { margin: 4px 0 24px; }
.filter-chip {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.filter-chip:visited { color: var(--green-600); }
.filter-chip:hover,
.filter-chip:focus-visible { text-decoration: none; }
.filter-chip:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.filter-chip.active,
.filter-chip.active:visited,
.filter-chip.active:hover { background: var(--pink); color: var(--white); }

/* --- Article rows = bordered cards, same as .svc-row -------------------- */
.article-rows { margin-top: 4px; }
.article-row {
	background: var(--white);
	border: 1px solid var(--n200);
	border-radius: var(--radius-card);
	box-shadow: none;
}
.article-body h3 { font-weight: 400; color: var(--n900); }
.article-body p { margin: 0; }
.article-date { margin: 0; }
.article-rows__empty { color: var(--n600); font-size: 15px; margin: 0; }

/* --- Pager spacing below the rows -------------------------------------- */
.res-pager { margin-top: 28px; margin-bottom: 90px; }

/* --- Responsive stacking ----------------------------------------------- */
@media (max-width: 900px) {
	/* Date drops under the body (section 15's 900px rule sets grid-column). */
	.article-date { justify-self: start; margin-top: 4px; }
}

@media (max-width: 720px) {
	.article-row {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 22px 20px;
	}
	.article-date { grid-column: 1; }
	.res-pager { margin-bottom: 56px; }
}

/* Ensure the catalogue search pill keeps the Figma cream fill even though it
   also carries the generic `.input` class (equal specificity). */
.cat-tools .cat-tools__input,
input.cat-tools__input { background: var(--cream-deep); border-color: transparent; }
.cat-tools .cat-tools__input:focus,
input.cat-tools__input:focus { background: var(--white); border-color: var(--pink-200); }


/* =========================================================================
   21. FIGMA ALIGNMENT — Herbal Database archive (measured)
   Values below were measured pixel-by-pixel against the Figma export
   design-assets/CURE/Screen/Herbal Database.png at a 1440px viewport, and
   verified against design-proof/herbal-database.html (all landmarks within
   2px). This block is last in the file so it wins over the earlier
   prototype-derived rules without editing them.

   Key deltas from the prototype:
     - the archive grid is NOT centred: 98px left gutter / 162px right
     - the right column is a bare region, not a bordered card
     - result cards are 290px tall with 30px padding (that padding is what
       makes the long herb names wrap onto two lines like the design)
     - the selected card has no border at all — a 1px transparent border
       leaks a pink hairline from the gradient, so we drop the border and
       add 1px of padding to keep it aligned with its neighbours
   ========================================================================= */

:root {
	--cure-line:        #E3E3E3; /* result-card border */
	--cure-line-strong: #C9C9C9; /* Filters / pager button border */
	--cure-placeholder: #929292; /* search placeholder */
	--cure-card-sel-top: #FFFDFE;
	--cure-card-sel-mid: #F7D6E7;
	--cure-card-sel-bot: #F0B6D3;
}

/* --- Page gutters: 98 / 1180 / 162 ------------------------------------- */
.herb-archive .herb-archive__container {
	max-width: 1440px;
	padding-inline: 98px 162px;
}

.archive-layout,
.herb-archive__layout {
	grid-template-columns: 484px minmax(0, 620px);
	gap: 76px;
	padding-block: 28px 64px;
}

/* --- Left detail panel ------------------------------------------------- */
.herb-archive__info.info-card {
	border-color: var(--cure-line);
	border-radius: 12px;
	box-shadow: none;
	min-height: 860px;
	display: flex;
	flex-direction: column;
}

.herb-archive__info .info-card__media {
	aspect-ratio: auto;
	height: 310px;
	flex: none;
}

.herb-archive__info .info-card__body {
	padding: 28px 26px 22px 47px;
	min-height: 0;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.herb-archive__info .info-card__heading {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0 0 56px;
}

.herb-archive__info .info-card__name-th { font-weight: 400; }

.herb-archive__info .info-card__scientific { margin: -48px 0 24px; }

.herb-archive__info .info-card__text,
.herb-archive__info .info-card__text p {
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-body);
}

.herb-archive__info .info-card__docs {
	margin: auto 0 0;
	padding-top: 24px;
	text-align: right;
}

.herb-archive__info .info-card__docs-link {
	display: inline-flex;
	color: var(--pink);
	text-decoration: none;
}

.herb-archive__info .info-card__docs-link:hover { color: var(--pink-hover); }

/* --- Right column is a plain region in the design, not a card ---------- */
.herb-archive__search.search-card {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.search-card__title {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--n900);
	margin: 6px 0 35px;
}

/* --- Search bar: cream pill + detached round pink button --------------- */
.herb-archive__search .herb-search-form__bar {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-bottom: 12px;
}

.herb-archive__search .herb-search-form__input {
	height: 44px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--cream-deep);
	padding-inline: 26px;
	font-size: 16px;
	color: var(--n900);
}

.herb-archive__search .herb-search-form__input::placeholder { color: var(--cure-placeholder); }

.herb-archive__search .herb-search-form__input:focus {
	background: var(--cream-deep);
	border: 0;
	outline: 2px solid var(--pink);
	outline-offset: 2px;
	box-shadow: none;
}

.herb-archive__search .herb-search-form__button {
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 50%;
	display: grid;
	place-items: center;
}

.herb-archive__search .herb-search-form__button-icon { display: grid; line-height: 0; }

/* --- Collapsed "Filters" control --------------------------------------- */
.herb-filters {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-bottom: 17px;
}

.herb-filters__toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 38px;
	padding-inline: 18px;
	background: var(--white);
	border: 1px solid var(--cure-line-strong);
	border-radius: 8px;
	font-size: 16px;
	color: var(--n900);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.herb-filters__toggle::-webkit-details-marker { display: none; }
.herb-filters__toggle::marker { content: ''; }

.herb-filters__toggle:hover,
.herb-filters[open] > .herb-filters__toggle {
	border-color: var(--pink);
	color: var(--pink);
}

.herb-filters__toggle-icon { display: grid; line-height: 0; color: currentColor; }

.herb-filters > .herb-search-form__filters {
	width: 100%;
	margin: 14px 0 0;
	padding: 18px;
	border: 1px solid var(--cure-line);
	border-radius: 10px;
	background: var(--white);
}

.herb-filters__toggle:focus-visible {
	outline: none;
	box-shadow: var(--ring-pink);
}

/* --- Result grid: 3 × ~195px, 290px tall, 18px gap --------------------- */
.herb-archive__search .herb-results-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.herb-archive__search .herb-card {
	border-color: var(--cure-line);
	border-radius: 10px;
	box-shadow: none;
	padding: 30px 30px 24px;
	min-height: 290px;
}

.herb-archive__search .herb-card:hover {
	border-color: var(--pink);
	box-shadow: none;
}

.herb-archive__search .herb-card__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--cream-deep);
	color: var(--pink);
}

.herb-archive__search .herb-card__name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 16px;
	color: var(--n900);
}

/* Design prints the Thai name inline with the English one, same weight. */
.herb-archive__search .herb-card__name-th {
	display: inline;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	margin: 0;
}

.herb-archive__search .herb-card__use,
.herb-archive__search .herb-card__scientific,
.herb-archive__search .herb-card__research,
.herb-archive__search .herb-card__excerpt {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--n900);
	margin: 0 0 16px;
}

.herb-archive__search .herb-card__research,
.herb-archive__search .herb-card__excerpt { margin-bottom: 0; }

/* Selected card: vertical pink gradient, no border (see note above). */
.herb-archive__search .herb-card.is-selected {
	border: 0;
	padding: 31px 31px 25px;
	background: linear-gradient(
		180deg,
		var(--cure-card-sel-top) 0%,
		var(--cure-card-sel-mid) 55%,
		var(--cure-card-sel-bot) 100%
	);
	background-clip: padding-box;
}

.herb-archive__search .herb-card.is-selected .herb-card__icon { background: #F6F2DC; }

/* --- Pager: "Page X of Y" + Previous / Next --------------------------- */
.herb-archive__pagination {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 26px;
	padding: 0;
	border: 0;
}

.herb-archive__pagination-count {
	font-size: 15px;
	color: var(--n900);
	margin: 0;
}

.herb-archive__pagination-nav {
	margin-left: auto;
	display: flex;
	gap: 14px;
}

.herb-pager-btn {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding-inline: 20px;
	background: var(--white);
	border: 1px solid var(--cure-line-strong);
	border-radius: 8px;
	font-size: 15px;
	color: var(--n900);
	text-decoration: none;
}

.herb-pager-btn:hover {
	border-color: var(--pink);
	color: var(--pink);
	text-decoration: none;
}

.herb-pager-btn.is-disabled {
	color: var(--cure-placeholder);
	border-color: var(--n200);
	cursor: default;
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 1280px) {
	.herb-archive .herb-archive__container { padding-inline: 32px; }

	.archive-layout,
	.herb-archive__layout {
		grid-template-columns: 420px minmax(0, 1fr);
		gap: 40px;
	}

	.herb-archive__info.info-card { min-height: 0; }
	.herb-archive__info .info-card__body { padding: 24px; }
	.herb-archive__info .info-card__heading { margin-bottom: 24px; }
	.herb-archive__info .info-card__scientific { margin: -16px 0 20px; }
}

@media (max-width: 1020px) {
	.archive-layout,
	.herb-archive__layout { grid-template-columns: minmax(0, 1fr); }

	.herb-archive__info.info-card { order: 2; }
	.herb-archive__search.search-card { order: 1; }
	.herb-archive__search .herb-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.herb-archive .herb-archive__container { padding-inline: 16px; }
	.herb-archive__search .herb-results-grid { grid-template-columns: minmax(0, 1fr); }
	.herb-archive__search .herb-search-form__bar { gap: 12px; }
	.herb-archive__pagination { flex-wrap: wrap; }
	.herb-archive__pagination-nav { margin-left: 0; width: 100%; }
}


/* --- Header nav active state -------------------------------------------
   Measured against the Figma header: the active item is pink text only.
   There is no underline indicator (checked for pink pixels in the 20px band
   under "Herbal database" — none), so the prototype's 2px rule is removed. */
.main-nav a.active::after,
.main-navigation__list .current-menu-item > a::after,
.main-navigation__list .current_page_item > a::after,
.main-navigation__list .current-menu-ancestor > a::after,
.main-navigation__list .current-herb-archive > a::after {
	display: none;
}

.main-navigation__list .current-herb-archive > a { color: var(--pink); }


/* The hero search button now carries an inline SVG instead of an emoji glyph,
   so it needs the same centring treatment as the archive one. */
.home-hero__search-button { display: grid; place-items: center; }
.home-hero__search-icon { display: grid; line-height: 0; color: currentColor; }
.home-hero__search-button .herb-icon,
.herb-search-form__button .herb-icon { color: var(--white); }


/* =========================================================================
   22. FOOTER — three columns + divided bottom bar
   Measured against the reference WordPress render
   (comparison-report/wp/wp-home.png): band #1B4D2E starting at y=1502, an
   1180px inner container with column origins at 0 / 479 / 796, a 1px #3D684D
   rule 315px down, and the bottom bar 92px tall.
   ========================================================================= */
.site-footer {
	background: var(--footer-bg, #1B4D2E);
	color: var(--footer-fg, #FFFFFF);
	/* Section 07 padded the band itself; all vertical rhythm now lives on the
	   inner container so the measured offsets hold. */
	padding-block: 0;
}

.site-footer__inner {
	max-width: var(--content-max);
	margin-inline: auto;
	padding: 64px 24px 0;
}

.site-footer__regions.footer-grid {
	display: grid;
	/* Column origins 0 / 479 / 796 of 1180 — expressed as ratios so the
	   footer still tracks the container width. */
	grid-template-columns: minmax(0, 479fr) minmax(0, 317fr) minmax(0, 384fr);
	gap: 0;
	align-items: start;
	padding-bottom: 48px;
}

/* --- Column 1: brand --------------------------------------------------- */
.site-footer__logo { margin-bottom: 14px; }

.site-footer__logo img,
.site-footer__logo .custom-logo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.site-footer__brand-name {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
}

.site-footer__brand-link,
.site-footer__brand-link:hover {
	color: var(--footer-fg, #FFFFFF);
	text-decoration: none;
}

.site-footer__brand-tagline {
	margin: 0;
	max-width: 250px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--footer-muted, #EAF5EE);
}

/* --- Column headings --------------------------------------------------- */
.site-footer__heading {
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--footer-fg, #FFFFFF);
}

/* --- Column 2: explore menu ------------------------------------------- */
.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.site-footer__menu a {
	font-size: 14px;
	line-height: 1.5;
	color: var(--footer-muted, #EAF5EE);
	text-decoration: none;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible {
	color: var(--footer-fg, #FFFFFF);
	text-decoration: underline;
}

/* --- Column 3: contact ------------------------------------------------- */
.site-footer__contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 13px;
}

.site-footer__contact-item {
	font-size: 14px;
	line-height: 1.5;
	color: var(--footer-muted, #EAF5EE);
}

.site-footer__contact-item a {
	color: inherit;
	text-decoration: none;
}

.site-footer__contact-item a:hover,
.site-footer__contact-item a:focus-visible { text-decoration: underline; }

.site-footer__contact-item--hours { font-weight: 600; }

/* --- Bottom bar -------------------------------------------------------- */
.site-footer__bar.footer-bottom {
	display: flex;
	align-items: center;
	gap: 16px;
	border-top: 1px solid var(--footer-rule, #3D684D);
	/* Section 07 added margin-top/padding-top here — reset both. */
	margin-top: 0;
	padding: 26px 0 44px;
}

.site-footer__copyright {
	margin: 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .72);
}

.site-footer__copyright-mark { margin-right: 2px; }

.site-footer__social {
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 18px;
}

.site-footer__social-link {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	color: rgba(255, 255, 255, .72);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible { color: var(--footer-fg, #FFFFFF); }

.site-footer__social-link .herb-icon { display: block; }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
	.site-footer__regions.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 32px;
		padding-bottom: 40px;
	}

	.site-footer__brand { grid-column: 1 / -1; }
	.site-footer__inner { padding-top: 48px; }
}

@media (max-width: 600px) {
	.site-footer__regions.footer-grid { grid-template-columns: minmax(0, 1fr); }

	.site-footer__bar.footer-bottom {
		flex-wrap: wrap;
		padding-bottom: 32px;
	}

	.site-footer__social { margin-left: 0; }
}


/* =========================================================================
   23. CATALOGUE / RESOURCES / SINGLE — controls that are now functional
   The catalogue and resources pages moved from hardcoded arrays to real
   queries, which introduced a filter panel, an empty state, an active-filter
   summary, and real single-post pages. Styles for those live here.
   ========================================================================= */

/* --- Filters panel shared by the catalogue + resources ------------------ */
.herb-filters__panel {
	margin-top: 14px;
	padding: 18px;
	border: 1px solid var(--cure-line, #E3E3E3);
	border-radius: 10px;
	background: var(--white);
	min-width: 280px;
}

.herb-filters__legend {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--n900);
}

.herb-filters__panel .filter-chips { margin: 0; }

/* The catalogue toolbar keeps search + Filters on one row, with the panel
   dropping below without pushing the search field around. */
.cat-tools__filters-panel {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	position: relative;
}

.cat-tools__filters-panel[open] > .herb-filters__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 20;
	box-shadow: var(--shadow-card);
}

/* --- Active filter summary --------------------------------------------- */
.cat-active-filters,
.res-active-filters {
	margin: 4px 0 18px;
	font-size: 14px;
	color: var(--n600);
}

.cat-active-filters__reset,
.res-active-filters__reset {
	color: var(--pink);
	text-decoration: underline;
}

/* --- Empty states ------------------------------------------------------ */
.cat-grid__empty,
.article-rows__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 32px;
	border: 1px dashed var(--cure-line-strong, #C9C9C9);
	border-radius: 10px;
	text-align: center;
	color: var(--n600);
}

/* --- Catalogue cards: real links + images ------------------------------ */
.cat-card__photo {
	display: grid;
	place-items: center;
	overflow: hidden;
	color: var(--pink);
}

.cat-card__thumb,
.cat-detail__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cat-card__title a,
.cat-detail__title a {
	color: inherit;
	text-decoration: none;
}

.cat-card__title a:hover,
.cat-detail__title a:hover {
	color: var(--pink);
	text-decoration: none;
}

.cat-card.is-selected {
	border-color: var(--pink-200);
	box-shadow: var(--shadow-card);
}

.cat-detail__photo {
	display: grid;
	place-items: center;
	overflow: hidden;
	color: var(--pink);
}

.btn-download .herb-icon { display: block; }

/* --- Resources rows: linked titles + date ------------------------------ */
.article-row__link,
.article-body h3 a {
	color: inherit;
	text-decoration: none;
}

.article-body h3 a:hover {
	color: var(--pink);
	text-decoration: none;
}

.article-row__icon .herb-icon { color: var(--pink); }

/* --- Generic single template (products, resources, posts) --------------- */
.single-entry__header { padding-bottom: 8px; }

.single-entry__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}

.single-entry__chips .chip { text-decoration: none; }

.single-entry__meta {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--n600);
}

.single-entry__figure {
	margin: 0 0 28px;
	border-radius: var(--radius-card);
	overflow: hidden;
}

.single-entry__thumb {
	width: 100%;
	height: auto;
	display: block;
}

.single-entry__content { max-width: 78ch; }

.single-entry__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

.single-entry__nav {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--n200);
}

.single-entry__nav-back {
	margin-inline: auto;
	font-size: 14px;
	color: var(--pink);
}

@media (max-width: 640px) {
	.cat-tools__filters-panel[open] > .herb-filters__panel {
		position: static;
		box-shadow: none;
		min-width: 0;
	}

	.single-entry__nav { flex-wrap: wrap; }
	.single-entry__nav-back { margin-inline: 0; order: 3; width: 100%; }
}


/* =========================================================================
   24. CONTACT PAGE — working form states
   The form now posts to admin-post.php and redirects back with a status flag,
   and the inquiry pills track the real radio state instead of a hardcoded
   "first pill is active" class.
   ========================================================================= */
.contact-notice {
	margin: 0 0 22px;
	padding: 14px 18px;
	border-radius: 10px;
	border: 1px solid transparent;
	font-size: 14.5px;
	line-height: 1.5;
}

.contact-notice--success {
	background: var(--green-50);
	border-color: var(--green-200);
	color: var(--green-800);
}

.contact-notice--error {
	background: var(--pink-50);
	border-color: var(--pink-200);
	color: #8f1f55;
}

/* Honeypot: off-screen rather than display:none so bots still fill it. */
.contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Inquiry pills: state driven by the radio ------------------------- */
.inquiry-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

/* Keep the radio focusable/operable but visually replaced by the pill. */
.inquiry-pill input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	inset: 0;
	cursor: pointer;
}

.inquiry-pill > span {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var(--n200);
	border-radius: var(--radius-pill);
	background: var(--white);
	font-size: 14px;
	color: var(--text-body);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.inquiry-pill:hover > span { border-color: var(--pink-200); }

.inquiry-pill input[type="radio"]:checked + span {
	background: var(--pink);
	border-color: var(--pink);
	color: var(--white);
}

.inquiry-pill input[type="radio"]:focus-visible + span {
	outline: none;
	box-shadow: var(--ring-pink);
}

/* Legacy `.active` class is no longer emitted — neutralise it so an old
   cached page cannot show two pills as selected. */
.inquiry-pill.active > span { background: var(--white); color: var(--text-body); }
.inquiry-pill.active input[type="radio"]:checked + span { background: var(--pink); color: var(--white); }

/* --- Map block is now a real link -------------------------------------- */
a.contact-map {
	display: grid;
	place-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--pink);
}

a.contact-map:hover { color: var(--pink-hover); }

.contact-map__label {
	font-size: 13.5px;
	color: var(--n600);
}

a.contact-map:hover .contact-map__label { color: var(--pink-hover); }

/* --- Contact info rows: inline SVG icons instead of iconify ------------- */
.info-line {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.info-line .herb-icon {
	flex: none;
	margin-top: 2px;
	color: var(--pink);
}

.contact-info__admin-note {
	margin: 20px 0 0;
	font-size: 13px;
	color: var(--n600);
}


/* --- Contact Form 7 output: match the theme's own form ------------------
   When CF7 renders the contact form its radio group is a <span> list, so the
   pill treatment is applied to CF7's own markup as well. */
.contact-form .wpcf7-form-control-wrap { display: block; }

.contact-form .cf-field { margin-bottom: 18px; }

.contact-form .cf-field > label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-body);
}

.contact-form .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.contact-form .wpcf7-radio .wpcf7-list-item { margin: 0; }

/* Section 20's CF7 mapping already turned the <label> itself into a pill.
   Now that the inner .wpcf7-list-item-label carries the pill, strip the outer
   one back to a bare wrapper — otherwise each option renders as a box in a box. */
.contact-form .wpcf7-radio .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
}

.contact-form .wpcf7-radio .wpcf7-list-item label:hover,
.contact-form .wpcf7-radio .wpcf7-list-item label:has(input:checked) {
	background: none;
	border-color: transparent;
	color: inherit;
}

.contact-form .wpcf7-radio .wpcf7-list-item input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.contact-form .wpcf7-radio .wpcf7-list-item-label {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var(--n200);
	border-radius: var(--radius-pill);
	background: var(--white);
	font-size: 14px;
	color: var(--text-body);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.contact-form .wpcf7-radio .wpcf7-list-item label:hover .wpcf7-list-item-label {
	border-color: var(--pink-200);
}

.contact-form .wpcf7-radio .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label {
	background: var(--pink);
	border-color: var(--pink);
	color: var(--white);
}

.contact-form .wpcf7-radio .wpcf7-list-item input[type="radio"]:focus-visible + .wpcf7-list-item-label {
	outline: none;
	box-shadow: var(--ring-pink);
}

.contact-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
	color: #b3245f;
}

.contact-form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 14px 18px;
	border-radius: 10px;
	border: 1px solid var(--green-200);
	background: var(--green-50);
	color: var(--green-800);
	font-size: 14.5px;
}

.contact-form form.invalid .wpcf7-response-output,
.contact-form form.failed .wpcf7-response-output {
	border-color: var(--pink-200);
	background: var(--pink-50);
	color: #8f1f55;
}


/* =========================================================================
   25. ICONIFY REMOVAL — inline SVG replacements
   Every <iconify-icon> is now an inline <svg class="herb-icon">, so the rules
   that coloured/sized the web component are re-pointed at the SVG.
   ========================================================================= */
.icon-tile .herb-icon,
.article-row__icon .herb-icon,
.svc-row__icon .herb-icon {
	color: var(--pink);
	display: block;
}

.photo .herb-icon,
.cat-card__photo .herb-icon,
.cat-detail__photo .herb-icon,
.herb-detail__hero-placeholder .herb-icon {
	color: var(--pink);
	display: block;
}

/* The old grid-based .info-line rule assumed a 28px icon column; section 24
   switched it to flex, so drop the stale template columns. */
.info-line { grid-template-columns: none; }

/* Hero subheading can now be editor HTML (wpautop paragraphs). */
.home-hero__subheading p { margin: 0 0 6px; }
.home-hero__subheading p:last-child { margin-bottom: 0; }


/* =========================================================================
   26. HOME — Featured herbs section
   Restores the band the reference WordPress render has between the hero and
   the footer (comparison-report/wp/wp-home.png): a centred heading, a grid of
   herb cards, and a pill CTA into the full database.
   ========================================================================= */
.home-featured { padding-block: 72px 96px; }

.home-featured__heading {
	margin: 0 0 40px;
	font-size: 34px;
	font-weight: 700;
	text-align: center;
	color: var(--n900);
}

.home-featured__grid { margin-bottom: 40px; }

.home-featured__cta {
	margin: 0;
	text-align: center;
}

.home-featured .herb-card { min-height: 0; }

.home-featured .herb-card__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--cream-deep);
	color: var(--pink);
	margin: 0 auto 18px;
}

.home-featured .herb-card__research {
	font-size: 13px;
	color: var(--n600);
	margin: 0;
}

@media (max-width: 900px) {
	.home-featured { padding-block: 48px 64px; }
	.home-featured__heading { font-size: 28px; margin-bottom: 28px; }
	.home-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.home-featured__grid { grid-template-columns: minmax(0, 1fr); }
}


/* =========================================================================
   27. HERB CARD — hover lift + shared pink gradient
   Hover now shows the same pink gradient as the selected card, plus a lift
   (translateY + scale 1.03 + shadow).

   The gradient lives on a ::before overlay rather than on `background`, for
   two reasons:

   1. A `background` gradient cannot be transitioned, but the overlay's
      `opacity` can — so the pink fades in instead of snapping.
   2. Painting a gradient on a bordered box leaks a hairline of the gradient's
      end colour along the top edge (this is what forced the earlier
      `border: 0; padding: 31px` workaround on the selected card). The overlay
      is inset by -1px so it covers the border box exactly, which means every
      card — hovered, selected or plain — keeps identical box metrics and the
      grid never shifts.
   ========================================================================= */
.herb-card {
	position: relative;
	z-index: 0;
	transform-origin: center;
	transition:
		transform .2s ease,
		box-shadow .2s ease,
		border-color .2s ease;
}

.herb-card::before {
	content: "";
	position: absolute;
	inset: -1px; /* cover the 1px border so no border colour shows through */
	border-radius: inherit;
	background: linear-gradient(
		180deg,
		var(--cure-card-sel-top, #FFFDFE) 0%,
		var(--cure-card-sel-mid, #F7D6E7) 55%,
		var(--cure-card-sel-bot, #F0B6D3) 100%
	);
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
}

/* Card contents sit above the overlay. */
.herb-card > * { position: relative; z-index: 1; }

/* Hover / keyboard focus: gradient in, card lifts, raised above neighbours. */
.herb-card:hover,
.herb-card:focus-within {
	z-index: 2;
	border-color: transparent;
	transform: translateY(-6px) scale(1.03);
	box-shadow: 0 14px 30px rgba(214, 51, 132, .18), 0 4px 10px rgba(23, 23, 23, .06);
}

.herb-card:hover::before,
.herb-card:focus-within::before,
.herb-card.is-selected::before { opacity: 1; }

/* The selected card no longer needs the border/padding workaround — the
   overlay hides its border, so it shares the plain card's box metrics. */
.herb-archive__search .herb-card.is-selected,
.herb-card.is-selected {
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	padding: 30px 30px 24px;
	background: var(--white);
}

.herb-card.is-selected .herb-card__icon,
.herb-archive__search .herb-card.is-selected .herb-card__icon { background: #F6F2DC; }

/* Keep the cream icon disc readable once the pink is showing. */
.herb-card:hover .herb-card__icon,
.herb-card:focus-within .herb-card__icon { background: #F6F2DC; }

/*
 * Section 21 scoped both a flat `box-shadow: none` and a pink hover border to
 * `.herb-archive__search .herb-card`, which outranks the plain `.herb-card`
 * selectors above. Re-state the lift at that specificity so the archive cards
 * behave like the rest.
 */
.herb-archive__search .herb-card:hover,
.herb-archive__search .herb-card:focus-within {
	border-color: transparent;
	box-shadow: 0 14px 30px rgba(214, 51, 132, .18), 0 4px 10px rgba(23, 23, 23, .06);
}

/* Respect a reduced-motion preference: keep the colour change, drop the move. */
@media (prefers-reduced-motion: reduce) {
	.herb-card {
		transition: box-shadow .2s ease, border-color .2s ease;
	}

	.herb-card:hover,
	.herb-card:focus-within { transform: none; }
}