:root {
  --color-bg: #faf8f4;
  --color-surface: #fff;
  --color-text: #161616;
  --color-heading: #333333;
  --color-highlight: #20868c;
  --color-on-highlight: #fff;
  --color-nav: #967d72;
  --color-button: #3d713e;
  --color-button-hover: #766851;
  --color-dark: #3d713e;
  --color-on-dark: #fff;
  --color-muted: #d7cdc8;
  --font-body: "Poppins", sans-serif;
  --font-heading: "Playfair Display", serif;
}

body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-weight: 300 }
* { font-family: var(--font-body) }
h1, h2, h3, h1 a, h2 a, h3 a { font-family: var(--font-heading); font-weight: 400; color: var(--color-heading) }
h3 { font-size: 1.7rem }
h1 { margin-bottom: 40px; font-size: 2.4rem; line-height: 1.15 }
p, ul, ol, blockquote, label { color: var(--color-text) }
p { line-height: 1.5 }
a { color: var(--color-heading) }
a:hover { color: var(--color-highlight) }
.button { background: var(--color-button); color: var(--color-on-highlight); font-family: var(--font-body); font-size: 1rem; font-weight: 400; margin-top: 4px }
.button:hover { background: var(--color-button-hover); color: var(--color-on-highlight) }
p a { border-bottom: 1px solid }
p a:hover { border-bottom-color: transparent }

body.home .row:not(.expanded) { max-width: 90rem }
.full-width-bg { padding: 60px 0; background: var(--color-surface) }

@media only screen and (min-width: 40.063em) {
	h1 { font-size: 3.2rem }
	.sbs.full-width-bg img { margin-bottom: 0 }
}


.intro p { font-size: 1.2rem; line-height: 1.2 }
.news-updates { margin-top: 30px; margin-bottom: 50px; border-bottom: 2px solid color-mix(in srgb, var(--color-highlight) 31%, transparent); border-top: 2px solid color-mix(in srgb, var(--color-highlight) 31%, transparent); padding-bottom: 50px; padding-top: 50px }
.news-updates h2 { color: var(--color-heading); font-size: 1.9rem }
.item { padding: 8px 20px 20px 20px; margin-bottom: 15px; margin-top: 15px; border-bottom: 1px dashed color-mix(in srgb, var(--color-text) 31%, transparent) }
.item:last-of-type { border-bottom: 0; margin-bottom: 5px }
.item p { font-size: .9rem; line-height: 1.3; margin-bottom: 0;  }
.item h3 { font-size: 1.4rem }
.item span.date { font-size: .85rem; text-transform: uppercase; font-weight: 500 }
.home-news .button { margin-bottom: 30px }

@media only screen and (min-width: 40.063em) {
	.news-updates { margin-top: 0; margin-bottom: 80px }
}
@media only screen and (min-width: 64.063em) {
	.news-updates { position: relative; top: -100px; border-top: 0; z-index: 99; margin-bottom: 0 }
	.home-news { padding-top: 100px }
}

/* ----------------------
	FOOTER
---------------------- */
footer { background: transparent; margin-top: 60px; padding: 35px 0; border-top: 1px solid var(--color-muted) }
footer img.logo { width: 140px }
footer, footer a, footer a:hover { color: var(--color-heading) }
footer a:hover { color: var(--color-highlight); text-decoration: underline }
footer ul { margin-left: 0 }
footer i { margin-right: 8px; color: var(--color-nav) }
footer h3 { font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: 10px; margin-top: 15px; color: var(--color-heading) }

/* ----------------------
	PLANTS & BLOG
---------------------- */
.row.content.noFeature { padding-top: 40px }
.plant-search { margin: 20px 0 30px }
.plant-search label { font-weight: 500; font-size: .85rem; text-transform: uppercase }
.plant-search input,
.plant-search select { width: 100%; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent); border-radius: 6px; background: var(--color-surface) }
.plant-count { font-size: .9rem; margin-bottom: 20px }
.plant-list { display: flex; flex-direction: column; gap: 2px }
.plant-list-item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed color-mix(in srgb, var(--color-text) 25%, transparent); text-decoration: none }
.plant-list-item:hover .plant-list-title { color: var(--color-highlight) }
.plant-list-title { font-weight: 500 }
.plant-list-cat { font-size: .85rem; text-transform: uppercase; color: var(--color-nav) }
.plant-meta p { margin-bottom: 6px }
.plant-body, .blog-body { margin-top: 30px }
.blog-blocks { padding-bottom: 40px }
.blog-blocks .text-columns { margin-top: 10px }
.blog-blocks .text-columns p:last-child { margin-bottom: 0 }
.blog-date { text-transform: uppercase; font-size: .85rem; font-weight: 500; margin-bottom: 24px; color: var(--color-nav) }
.blog-card { display: block; background: var(--color-surface); padding: 24px; margin-bottom: 16px; text-decoration: none; min-height: 140px }
.blog-card:hover { background: color-mix(in srgb, var(--color-nav) 12%, var(--color-surface)) }
.blog-card span { display: block; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 400; line-height: 1.2; color: var(--color-heading) }
.blog-card em { display: block; margin-top: 8px; font-style: normal; font-size: .85rem; color: var(--color-nav) }
.blog-hero { margin-bottom: 24px }
.blog-hero img, .plant-image img, .text-column-image { width: 100%; height: auto }
.text-column-image { margin-bottom: 20px }
.pagination { display: flex; gap: 8px; list-style: none; margin: 30px 0 0; padding: 0 }
.pagination a, .pagination span { display: inline-block; padding: 6px 10px }
.pagination .here span { font-weight: 500 }
.breadcrumbs { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; opacity: .5 }

/* ----------------------
	COMMUNITY
---------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0 }
.button-text { background: none; border: 0; padding: 0; color: var(--color-highlight); font: inherit; cursor: pointer }
.button-text:hover { text-decoration: underline }
.inline-form { display: inline }
.card { background: var(--color-surface); border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent); overflow: visible }
.account-bar { font-size: .85rem; padding: 0 15px 8px }
.account-bar .column { display: flex; justify-content: flex-end; gap: 16px; align-items: center }
.account-form label, .composer-form label, .comment-form label { display: block; font-weight: 500; font-size: .85rem; margin: 12px 0 6px }
.account-form input[type=text],
.account-form input[type=email],
.account-form input[type=password],
.account-form input[type=search],
.account-form textarea,
.composer-form textarea,
.composer-form select,
.composer-form input[type=search],
.comment-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--color-muted); border-radius: 8px; background: var(--color-bg); font: inherit }
.account-form .button { width: 100%; margin-top: 16px }
.account-form span, .composer-form label span { font-weight: 300; color: var(--color-nav) }
.flash { padding: 12px 16px; border-radius: 8px; margin: 12px 0 }
.flash-notice { background: color-mix(in srgb, var(--color-highlight) 12%, var(--color-surface)) }
.flash-error, .form-error { color: #8a2a2a }
.flash-error { background: color-mix(in srgb, #8a2a2a 12%, var(--color-surface)) }
.check { display: flex; gap: 8px; align-items: center; font-weight: 400 }
.honeypot { position: absolute; left: -9999px }
.community-top h1 { margin-bottom: 8px }
.community-welcome { color: var(--color-nav); margin-bottom: 20px }
.topic-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px }
.topic-chip, .plant-chip { display: inline-block; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--color-nav) 12%, var(--color-surface)); color: var(--color-heading); font-size: .85rem; text-decoration: none }
.topic-chip.is-active, .topic-chip:hover, .plant-chip:hover { background: var(--color-nav); color: #fff; text-decoration: none }
.community-composer .composer-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px }
.community-composer .composer-head > div span { display: block; font-size: .85rem; color: var(--color-nav) }
.composer-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px }
.file-btn { cursor: pointer; font-weight: 500; color: var(--color-highlight) }
.file-btn input { position: absolute; width: 1px; height: 1px; opacity: 0 }
.composer-guest p { margin-bottom: 10px }
.community-card-link { display: block; text-decoration: none; color: inherit }
.community-card-link:hover { text-decoration: none }
.community-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 12px }
.community-meta time, .comment-tools time { display: block; font-size: .8rem; color: var(--color-nav) }
.community-body p:last-child { margin-bottom: 0 }
.community-photos { display: grid; gap: 6px; margin: 12px 0 }
.community-photos.count-1 { grid-template-columns: 1fr }
.community-photos.count-2, .community-photos.count-4 { grid-template-columns: 1fr 1fr }
.community-photos.count-3 { grid-template-columns: 1fr 1fr }
.community-photos img { width: 100%; height: 220px; object-fit: cover; border-radius: 8px }
.community-card-footer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px }
.comment-count { margin-left: auto; font-size: .85rem; color: var(--color-nav) }
.avatar { border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; flex-shrink: 0 }
.avatar-fallback { display: inline-flex; align-items: center; justify-content: center; line-height: 1; border-radius: 50%; background: var(--color-button); color: #fff; font-weight: 500 }
.community-comments h2 { font-size: 1.4rem; margin: 30px 0 16px }
.comment { display: flex; gap: 10px; margin-bottom: 14px }
.comment-main { flex: 1; min-width: 0 }
.comment-bubble { background: color-mix(in srgb, var(--color-nav) 8%, var(--color-surface)); border-radius: 12px; padding: 10px 14px }
.comment-tools { display: flex; gap: 12px; align-items: center; margin: 4px 0 0 4px; font-size: .8rem }
.comment-replies { margin-top: 10px; padding-left: 8px; border-left: 2px solid var(--color-muted) }
.reply-form { margin-top: 8px }
.plant-suggest { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-muted); border-radius: 8px; background: var(--color-surface) }
.plant-suggest li button { display: block; width: 100%; text-align: left; padding: 8px 12px; background: none; border: 0; font: inherit; cursor: pointer }
.plant-suggest li button:hover { background: var(--color-bg) }
.community-empty { color: var(--color-nav) }
.post-delete { margin-top: 12px }