body { display: block !important; opacity: 1 !important; visibility: visible !important; }
#sidebar, .et_right_sidebar, .et_left_sidebar, #left-area + #sidebar, .widget-area { display: none !important; }
#main-content .container { max-width: 100% !important; border: none !important; box-shadow: none !important; padding-top: 0 !important; margin-top: 0 !important; }
#main-content .container::before, #main-content .container::after { display: none !important; content: none !important; background: none !important; width: 0 !important; }
#left-area, .et_pb_gutters3 #left-area, .et_pb_gutters2 #left-area { width: 100% !important; float: none !important; }
#main-content { padding-top: 0 !important; margin-top: 0 !important; }
.entry-content, .post-content { padding-top: 0 !important; margin-top: 0 !important; }
/* ── Base ── */
#species-finder {
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
background: #F7F3EE;
color: #1A0F06;
max-width: 1280px;
margin: 0 auto;
padding: 0 24px 96px;
}
/* ── Hero ── */
.sf-hero {
display: flex;
align-items: center;
gap: 48px;
padding: 72px 0 56px;
}
.sf-hero-text {
flex: 0 0 55%;
max-width: 55%;
}
.sf-hero-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pb-accent-hover);
margin: 0 0 16px;
display: block;
}
.sf-hero h1 {
font-family: 'Noto Serif', Georgia, serif;
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 400;
color: #1A0F06;
margin: 0 0 20px;
line-height: 1.08;
letter-spacing: -0.02em;
}
.sf-hero-sub {
font-size: 1rem;
color: #4A3728;
line-height: 1.65;
margin: 0 0 20px;
max-width: 480px;
}
.sf-hero-count {
display: inline-block;
background: #F0EAE3;
color: var(--pb-accent-hover);
font-size: 0.75rem;
font-weight: 600;
padding: 4px 14px;
border-radius: 99px;
letter-spacing: .04em;
}
/* ── Hero mosaic ── */
.sf-hero-mosaic {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-self: center;
max-width: 460px;
}
.sf-mosaic-tile {
border-radius: 12px;
overflow: hidden;
background: #E8DDD6;
height: 155px;
}
.sf-mosaic-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sf-mosaic-t2 { margin-top: 24px; }
.sf-mosaic-t3 { margin-top: -24px; }
@media (max-width: 768px) {
.sf-hero { flex-direction: column; gap: 24px; padding: 48px 0 40px; }
.sf-hero-text { flex: none; max-width: 100%; }
.sf-hero-mosaic { display: none; }
}
/* ── Quick picks ── */
.sf-quickpicks {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
padding: 0 0 32px;
}
.sf-qp {
border: 1.5px solid #C9B9AE;
background: #FFFFFF;
color: #1A0F06;
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
font-size: 0.8125rem;
font-weight: 600;
padding: 8px 18px;
border-radius: 99px;
cursor: pointer;
transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
white-space: nowrap;
}
.sf-qp:hover, .sf-qp.active {
background: var(--pb-accent-hover);
border-color: var(--pb-accent-hover);
color: #fff;
}
/* ── Sticky filter bar ── */
.sf-filters-wrap {
position: sticky;
top: 0;
z-index: 40;
background: #F7F3EE;
padding: 14px 0 18px;
border-bottom: 1px solid #E8DDD6;
margin-bottom: 12px;
}
.sf-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.sf-search-wrap {
flex: 1 1 220px;
position: relative;
}
.sf-search-wrap svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #7A6A5E;
pointer-events: none;
}
#sf-search {
width: 100%;
padding: 10px 12px 10px 38px;
border: 1.5px solid #C9B9AE;
border-radius: 8px;
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
font-size: 0.875rem;
background: #fff;
color: #1A0F06;
box-sizing: border-box;
outline: none;
transition: border-color 150ms;
}
#sf-search:focus { border-color: var(--pb-accent-hover); }
.sf-select {
padding: 10px 32px 10px 12px;
border: 1.5px solid #C9B9AE;
border-radius: 8px;
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
font-size: 0.875rem;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A6A5E' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center;
-webkit-appearance: none;
color: #1A0F06;
cursor: pointer;
outline: none;
transition: border-color 150ms;
}
.sf-select:focus { border-color: var(--pb-accent-hover); }
.sf-count {
font-size: 0.75rem;
font-weight: 600;
color: #7A6A5E;
margin-left: auto;
white-space: nowrap;
}
.sf-reset {
font-size: 0.8rem;
color: var(--pb-accent-hover);
cursor: pointer;
text-decoration: underline;
background: none;
border: none;
padding: 0;
font-family: inherit;
display: none;
}
.sf-reset.visible { display: inline; }
/* ── Grid ── */
.sf-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
padding: 24px 0 0;
}
@media (max-width: 860px) { .sf-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 520px) { .sf-grid { grid-template-columns: 1fr; } }
/* ── Card ── */
.sf-card {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(26,15,6,.08), 0 4px 16px rgba(26,15,6,.05);
transition: transform 220ms cubic-bezier(0.165,0.84,0.44,1), box-shadow 220ms;
position: relative;
}
@media (hover: hover) and (pointer: fine) {
.sf-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 28px rgba(26,15,6,.12);
}
}
.sf-card-img {
aspect-ratio: 16/10;
overflow: hidden;
background: #E8DDD6;
}
.sf-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 400ms cubic-bezier(0.165,0.84,0.44,1);
}
@media (hover: hover) and (pointer: fine) {
.sf-card:hover .sf-card-img img { transform: scale(1.04); }
}
.sf-card-overlay {
position: absolute;
inset: 0;
z-index: 2;
}
.sf-card-no-img {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #E8DDD6, #F5F0EB);
}
.sf-card-body {
padding: 14px 16px 18px;
}
.sf-card-name {
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
font-size: 1rem;
font-weight: 600;
color: #1A0F06;
margin: 0 0 8px;
line-height: 1.3;
}
.sf-badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 8px;
}
.sf-badge {
font-size: 0.625rem;
font-weight: 700;
letter-spacing: .05em;
padding: 3px 8px;
border-radius: 4px;
text-transform: uppercase;
}
.sf-noise-quiet { background: #D4F0DA; color: #155724; }
.sf-noise-moderate { background: #FFF3CD; color: #856404; }
.sf-noise-loud { background: #FFE5CC; color: #7A3800; }
.sf-noise-veryloud { background: #F8D7DA; color: #721C24; }
.sf-care-beginner { background: #D4F0DA; color: #155724; }
.sf-care-intermediate { background: #CCE5FF; color: #004085; }
.sf-care-advanced { background: #F8D7DA; color: #721C24; }
.sf-avail-common { background: #E8F5E9; color: #2E7D32; }
.sf-avail-uncommon { background: #FFF8E1; color: #E65100; }
.sf-avail-rare { background: #F3E5F5; color: #6A1B9A; }
.sf-origin {
font-size: 0.75rem;
color: #7A6A5E;
margin: 0 0 4px;
}
.sf-subtitle {
font-size: 0.8125rem;
color: #4A3728;
line-height: 1.45;
margin: 0;
}
/* ── Price scale ── */
.sf-price {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
margin-top: 10px;
}
.sf-price-label {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #7A6A5E;
}
.sf-price-dots {
display: flex;
gap: 4px;
align-items: center;
}
.sf-pd {
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
}
.sf-pd-on  { background: var(--pb-accent-hover); }
.sf-pd-off { background: #E8DDD6; }
.sf-price-range {
font-size: 0.625rem;
color: #9A8A7E;
display: none;
}
/* ── Price key/legend ── */
.sf-price-key{max-width:1280px;margin:8px auto 0;padding:14px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:20px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;color:var(--pb-ink-soft);background:var(--pb-surface);border:1px solid #ead7c8;border-radius:12px}
.sf-price-key-label{font-weight:700;letter-spacing:0.08em;text-transform:uppercase;font-size:11px;color:var(--pb-accent-hover)}
.sf-price-key-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sf-price-key-dots{display:inline-flex;gap:3px}
.sf-price-key-dot{width:7px;height:7px;border-radius:50%;background:var(--pb-accent-hover)}
.sf-price-key-dot.off{background:var(--pb-outline-soft)}
@media (max-width:640px){.sf-price-key{gap:12px;font-size:12px;padding:12px 16px}}
.sf-card.sf-hidden { display: none; }
.sf-no-results {
display: none;
text-align: center;
padding: 80px 24px;
color: #7A6A5E;
font-size: 1rem;
}
.sf-no-results strong { color: #1A0F06; display: block; font-size: 1.125rem; margin-bottom: 8px; }
/* ── FAQ ── */
.sf-faq {
max-width: 760px;
margin: 96px auto 0;
}
.sf-faq h2 {
font-family: 'Noto Serif', Georgia, serif;
font-size: 1.875rem;
font-weight: 400;
color: #1A0F06;
margin: 0 0 44px;
text-align: center;
letter-spacing: -0.01em;
}
.sf-faq-item {
border-top: 1px solid #E8DDD6;
padding: 24px 0;
}
.sf-faq-item:last-child { border-bottom: 1px solid #E8DDD6; }
.sf-faq-q {
font-weight: 700;
font-size: 0.9375rem;
color: #1A0F06;
margin: 0 0 10px;
}
.sf-faq-a {
font-size: 0.9rem;
line-height: 1.65;
color: #4A3728;
margin: 0;
}
/* ── Trust bar ── */
.sf-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
margin: 64px auto 0;
padding: 0;
background: #FFFFFF;
border-radius: 14px;
max-width: 620px;
border: 1px solid #E8DDD6;
overflow: hidden;
}
.sf-trust-item {
display: flex;
align-items: center;
gap: 14px;
font-size: 0.875rem;
color: #4A3728;
padding: 24px 32px;
flex: 1;
border-right: 1px solid #E8DDD6;
}
.sf-trust-item:last-child { border-right: none; }
.sf-trust-icon { color: var(--pb-accent-hover); font-size: 1.125rem; flex-shrink: 0; }
.sf-trust-label { font-weight: 700; color: #1A0F06; display: block; font-size: 0.875rem; line-height: 1.3; }
.sf-trust-desc { color: #7A6A5E; font-size: 0.75rem; display: block; line-height: 1.4; }
@media (max-width: 600px) {
.sf-trust { flex-direction: column; }
.sf-trust-item { border-right: none; border-bottom: 1px solid #E8DDD6; }
.sf-trust-item:last-child { border-bottom: none; }
}