/* Kasvumajad greenhouse finder, key specs, buy box, spec tables (workq #2142). Uses theme tokens from brand.css. */
.km-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Finder ready: hide the server-rendered loop (kept for crawlers / no-JS). */
body.km-has-finder.km-finder-ready .woocommerce ul.products,
body.km-has-finder.km-finder-ready ul.products,
body.km-has-finder.km-finder-ready .woocommerce-pagination,
body.km-has-finder.km-finder-ready .woocommerce-result-count,
body.km-has-finder.km-finder-ready .woocommerce-ordering { display: none !important; }

.km-finder { margin: 1.5rem 0 2.5rem; }
.km-finder__head { margin-bottom: 1rem; }
.km-finder__title { margin: 0 0 .25rem; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.km-finder__lead { margin: 0; color: var(--text-soft); }
.km-finder__body { display: grid; grid-template-columns: 280px 1fr; gap: 1.75rem; align-items: start; }
@media (max-width: 900px) { .km-finder__body { grid-template-columns: 1fr; } }

.km-finder__filters { position: sticky; top: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1rem .5rem; box-shadow: var(--shadow-sm); max-height: calc(100vh - 2rem); overflow: auto; }
@media (max-width: 900px) { .km-finder__filters { position: static; max-height: none; display: flex; gap: .75rem; overflow-x: auto; padding: .75rem; } .km-facet { min-width: 220px; } }
.km-facet { border: 0; margin: 0 0 1rem; padding: 0; }
.km-facet legend { font-weight: 650; font-size: .95rem; margin-bottom: .45rem; color: var(--text); }
.km-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.km-chip { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); cursor: pointer; font-size: .9rem; line-height: 1.2; transition: border-color .15s, background .15s; }
.km-chip input { position: absolute; opacity: 0; pointer-events: none; }
.km-chip small { color: var(--text-mute); font-size: .78rem; }
.km-chip:hover { border-color: var(--brand-orange); }
.km-chip.is-on { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }
.km-chip.is-on small { color: rgba(255,255,255,.8); }
.km-chip.is-zero { opacity: .45; }
.km-chip:focus-within { outline: 2px solid var(--brand-orange); outline-offset: 2px; }
.km-range2 { display: flex; align-items: center; gap: .4rem; }
.km-facet select, .km-finder__sort select { padding: .4rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font: inherit; font-size: .9rem; }
.km-facet input[type=range] { width: 100%; accent-color: var(--brand-orange); }
.km-facet output { font-weight: 500; color: var(--brand-orange-dark); }
.km-stock { display: flex; gap: .5rem; align-items: center; margin: .25rem 0 .75rem; font-size: .92rem; }

.km-finder__bar { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-bottom: 1rem; }
.km-finder__count { font-weight: 600; margin-right: auto; }
.km-finder__sort { display: flex; gap: .5rem; align-items: center; font-size: .92rem; }
.km-finder__reset { background: none; border: 0; color: var(--brand-orange-dark); text-decoration: underline; cursor: pointer; font: inherit; font-size: .92rem; }

.km-finder__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.km-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; }
.km-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .km-card, .km-card:hover { transition: none; transform: none; } }
.km-card__img { display: block; aspect-ratio: 4 / 3; background: var(--surface-alt); }
.km-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.km-card__body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.1rem; flex: 1; }
.km-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.km-card h3 a { color: var(--text); text-decoration: none; }
.km-card__spec { margin: 0; color: var(--text-soft); font-size: .88rem; }
.km-card__badge { margin: 0; align-self: flex-start; font-size: .78rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; background: var(--brand-pink); color: var(--brand-orange-dark); }
.km-card__sizes { display: flex; flex-wrap: wrap; gap: .35rem; }
.km-size { font-size: .82rem; padding: .25rem .55rem; border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); background: var(--bg); }
.km-size small { color: var(--text-mute); }
.km-size:hover { border-color: var(--brand-orange); }
.km-size.is-out { opacity: .5; text-decoration: line-through; }
.km-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; padding-top: .5rem; border-top: 1px solid var(--border-soft); }
.km-card__price strong { font-size: 1.3rem; color: var(--text); }
.km-card__esto { font-size: .8rem; font-weight: 600; color: var(--brand-orange-dark); }
.km-card__out { font-size: .8rem; color: var(--error); }
.km-empty { grid-column: 1 / -1; padding: 2rem; background: var(--surface-alt); border-radius: var(--radius); }

/* Product page: key specs + buy box */
.km-keyspecs { margin: 1rem 0; padding: 1rem 1.1rem; background: var(--surface-alt); border-radius: var(--radius); }
.km-keyspecs dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1rem; }
@media (max-width: 520px) { .km-keyspecs dl { grid-template-columns: 1fr; } }
.km-keyspecs dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mute); }
.km-keyspecs dd { margin: 0; font-weight: 600; }
.km-keyspecs__more { display: inline-block; margin-top: .6rem; font-size: .9rem; }
.km-buybox { display: grid; gap: .6rem; margin: 1rem 0 1.25rem; }
.km-buybox__item { display: flex; flex-direction: column; gap: .15rem; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: .92rem; }
.km-buybox__item strong { font-size: .98rem; }
.km-buybox__item span { color: var(--text-soft); }
.km-buybox__esto { border-color: var(--brand-orange); background: linear-gradient(0deg, var(--brand-pink), var(--brand-pink)); }

.km-size-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .5rem; }
.km-size-chip { padding: .55rem .8rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font: inherit; font-size: .9rem; min-height: 44px; }
.km-size-chip:hover { border-color: var(--brand-orange); }
.km-size-chip.is-on { border-color: var(--brand-orange); background: var(--brand-pink); font-weight: 650; box-shadow: inset 0 0 0 1px var(--brand-orange); }
.km-size-chip:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }

/* Tabs content */
.km-spec-table { width: 100%; border-collapse: collapse; margin: .5rem 0 1.5rem; font-size: .95rem; }
.km-spec-table th, .km-spec-table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.km-spec-table th[scope=row] { width: 40%; color: var(--text-soft); font-weight: 500; }
.km-size-table thead th { background: var(--surface-alt); font-weight: 650; }
.km-ask { color: var(--text-mute); font-style: italic; }
.km-source { font-size: .82rem; color: var(--text-mute); }
.km-drawing img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.km-list { padding-left: 1.2rem; } .km-list li { margin: .3rem 0; }
.km-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .5rem 0 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); }
.km-compare { border-collapse: collapse; min-width: 900px; width: 100%; font-size: .88rem; }
.km-compare th, .km-compare td { padding: .55rem .65rem; border-bottom: 1px solid var(--border-soft); text-align: left; white-space: nowrap; }
.km-compare thead th { background: var(--surface-alt); position: sticky; top: 0; }
.km-compare tbody th { position: sticky; left: 0; background: var(--surface); }
.km-compare tr.is-current td, .km-compare tr.is-current th { background: var(--brand-pink); font-weight: 600; }
.km-faq details { border-bottom: 1px solid var(--border-soft); padding: .7rem 0; }
.km-faq summary { cursor: pointer; font-weight: 600; }
.km-faq p { margin: .5rem 0 0; color: var(--text-soft); }
