:root {
    font-family:Inter,Segoe UI,Arial,sans-serif;
    color:#182d2c;
    background:#f6f7f3;
    font-synthesis:none
}
* {
    box-sizing:border-box
}
body {
    margin:0
}
button,input,select,textarea {
    font:inherit
}
button,.button {
    cursor:pointer;
    border:1px solid #d6ded8;
    background:white;
    border-radius:10px;
    padding:12px 17px;
    color:#203d37;
    font-weight:600;
    text-decoration:none;
    display:inline-block
}
button:hover,.button:hover {
    border-color:#547e67;
    background:#f0f5ee
}
button:disabled {
    opacity:.55;
    cursor:wait
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
    outline:3px solid #e4b55a;
    outline-offset:3px
}
.primary {
    background:#1c5746;
    color:white;
    border-color:#1c5746
}
.primary:hover {
    background:#143f33;
    color:white
}
.quiet {
    border:0;
    background:transparent;
    color:#597069
}
.brand {
    text-decoration:none;
    font-size:27px;
    font-weight:800;
    color:#183c31;
    letter-spacing:-1.4px
}
.brand span {
    font-size:17px;
    font-weight:400;
    color:#75867c;
    letter-spacing:-.4px
}
header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:23px 5%;
    border-bottom:1px solid #e1e6df;
    background:#fff;
    gap:20px
}
nav {
    display:flex;
    gap:8px
}
nav button {
    border:0;
    background:none;
    color:#6e7e75
}
nav button.active {
    background:#e9f0e8;
    color:#244e3b
}
nav span {
    font-size:12px;
    background:#d7e5d4;
    padding:3px 6px;
    border-radius:5px
}
main {
    max-width:1480px;
    margin:0 auto;
    padding:42px 5% 60px
}
.hero {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin-bottom:30px
}
h1 {
    font-size:clamp(32px,3.7vw,53px);
    line-height:1.12;
    letter-spacing:-1.7px;
    margin:15px 0
}
h1 span {
    color:#568066
}
h2 {
    font-size:24px;
    letter-spacing:-.5px
}
.eyebrow {
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
    color:#68816b
}
.muted {
    color:#728076;
    line-height:1.6;
    font-size:14px
}
.hero-note {
    padding:22px 25px;
    background:#edf1e8;
    border:1px solid #dfe7d9;
    border-radius:14px;
    font-size:14px;
    min-width:290px
}
.hero-note small {
    display:block;
    color:#788471;
    line-height:1.7;
    margin-top:12px
}
.dot {
    display:inline-block;
    width:8px;
    height:8px;
    background:#71994b;
    border-radius:50%;
    margin-right:8px
}
.search-panel {
    background:#fff;
    border:1px solid #e0e5df;
    padding:22px;
    border-radius:16px;
    box-shadow:0 4px 18px #1c332405
}
.search-row {
    display:flex;
    gap:10px
}
.search-row>input {
    flex:1;
    min-width:100px;
    font-size:15px;
    padding:15px
}
.idea {
    background:#ecf0df;
    border-color:#ecf0df;
    white-space:nowrap
}
input,select,textarea {
    border:1px solid #dbe2db;
    border-radius:8px;
    background:#fff;
    color:#1c3d30;
    padding:11px 12px;
    max-width:100%
}
label {
    font-size:12px;
    font-weight:600;
    color:#758075;
    display:flex;
    flex-direction:column;
    gap:7px
}
.filters {
    display:flex;
    align-items:end;
    gap:14px;
    margin-top:20px;
    flex-wrap:wrap
}
.filters input[type=number] {
    width:116px
}
.filters .check {
    flex-direction:row;
    align-items:center;
    align-self:center;
    margin-top:21px;
    font-size:13px;
    white-space:nowrap
}
input[type=checkbox] {
    accent-color:#1c5746;
    width:17px;
    height:17px
}
.hint {
    font-size:12px;
    color:#859084;
    line-height:1.6;
    margin-bottom:0
}
.history {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin:15px 0 25px
}
.history button {
    font-size:12px;
    padding:7px 10px;
    background:transparent;
    border-radius:20px;
    font-weight:400
}
.results-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px
}
.results-heading h2 {
    margin:10px 0
}
.results-heading a {
    font-size:13px;
    color:#45795b
}
.grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-top:22px
}
.card {
    background:white;
    border:1px solid #e0e5df;
    border-radius:14px;
    overflow:hidden;
    display:flex;
    flex-direction:column
}
.image-wrap {
    position:relative;
    background:#fff;
    height:210px;
    padding:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid #f1f3ee
}
.image-wrap img {
    width:100%;
    height:100%;
    object-fit:contain
}
.save {
    position:absolute;
    top:10px;
    right:10px;
    width:35px;
    height:35px;
    padding:0;
    border-radius:50%;
    box-shadow:0 2px 6px #00000008;
    font-size:21px;
    color:#668163
}
.save.saved {
    background:#e7efdc;
    color:#3e602d;
    border-color:#d7e5c5
}
.card-body {
    padding:17px;
    display:flex;
    flex-direction:column;
    flex:1
}
.product-name {
    font-size:14px;
    line-height:1.5;
    font-weight:600;
    color:#24392d;
    text-decoration:none;
    min-height:63px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.price {
    font-size:25px;
    font-weight:700;
    margin:15px 0 7px;
    letter-spacing:-.5px
}
.presence {
    font-size:11px;
    color:#57804c;
    margin-bottom:13px
}
.seller {
    font-size:12px;
    color:#7c887e;
    line-height:1.5;
    margin:0 0 16px;
    overflow-wrap:anywhere
}
.contact-button {
    width:100%;
    font-size:12px;
    padding:11px;
    margin-top:auto
}
.notes {
    border-top:1px solid #eef0ec;
    padding-top:12px;
    margin-top:14px;
    display:grid;
    gap:8px
}
.notes textarea {
    font-size:12px;
    width:100%;
    resize:vertical
}
.notes select,.notes button {
    font-size:12px
}
.empty {
    grid-column:1/-1;
    text-align:center;
    padding:65px 20px;
    border:1px dashed #d4ded0;
    border-radius:14px;
    color:#75816f;
    line-height:1.8
}
.more {
    text-align:center;
    margin-top:26px
}
.template-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin:25px 0
}
.template-editor {
    padding:20px;
    background:white;
    border:1px solid #e0e5df;
    border-radius:12px;
    display:grid;
    gap:12px
}
.template-editor textarea {
    width:100%;
    min-height:150px;
    line-height:1.6;
    font-size:13px
}
footer {
    border-top:1px solid #e0e5df;
    margin:0 5%;
    padding:22px 0;
    font-size:13px;
    color:#738170;
    display:flex;
    justify-content:space-between;
    gap:20px
}
footer span {
    font-size:11px
}
dialog {
    border:0;
    border-radius:18px;
    max-width:620px;
    width:calc(100% - 32px);
    padding:30px;
    box-shadow:0 20px 80px #0c241c30
}
dialog::backdrop {
    background:#172b236e;
    backdrop-filter:blur(3px)
}
dialog h2 {
    font-size:20px;
    line-height:1.5
}
dialog textarea {
    width:100%;
    margin:15px 0;
    line-height:1.7;
    resize:vertical
}
.close {
    float:right;
    border:0;
    padding:0 5px;
    font-size:26px;
    background:none
}
.dialog-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap
}
.dialog-actions>* {
    font-size:12px
}
#toast {
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    max-width:90%;
    padding:15px 23px;
    background:#203f33;
    color:#fff;
    border-radius:10px;
    box-shadow:0 8px 40px #0002;
    z-index:20;
    font-size:14px
}
.login {
    max-width:620px;
    padding-top:10vh
}
.login .brand {
    display:inline-block;
    margin-bottom:50px
}
.login h1 {
    font-size:45px
}
.login form {
    display:grid;
    gap:18px;
    margin-top:35px;
    max-width:380px
}
.login input {
    padding:15px
}
#loginError {
    color:#a24435;
    font-size:14px
}
[hidden] {
    display:none!important
}
@media(min-width:1600px) {
    .grid {
        grid-template-columns:repeat(5,minmax(0,1fr))
    }
}
@media(max-width:1050px) {
    .grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .hero-note {
        display:none
    }
    .search-row {
        flex-wrap:wrap
    }
    .search-row>input {
        flex-basis:100%
    }
    .search-row button {
        flex:1
    }
}
@media(max-width:720px) {
    header {
        padding:16px 5%;
        flex-wrap:wrap;
        gap:12px
    }
    nav {
        order:3;
        width:100%
    }
    nav button {
        flex:1;
        font-size:12px;
        padding:10px
    }
    .brand {
        font-size:24px
    }
    main {
        padding-top:24px
    }
    .hero {
        margin-bottom:22px
    }
    .hero h1 {
        font-size:37px
    }
    .grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px
    }
    .image-wrap {
        height:170px;
        padding:12px
    }
    .card-body {
        padding:12px
    }
    .product-name {
        font-size:12px;
        min-height:54px
    }
    .price {
        font-size:22px
    }
    .seller {
        font-size:11px
    }
    .contact-button {
        padding:10px 5px;
        font-size:11px
    }
    .search-panel {
        padding:15px
    }
    .filters {
        gap:12px
    }
    .filters>label:first-child {
        width:100%
    }
    .filters>label:nth-child(4) {
        flex:1
    }
    .template-grid {
        grid-template-columns:1fr
    }
    .results-heading {
        align-items:start
    }
    .results-heading a {
        max-width:130px;
        text-align:right;
        font-size:11px
    }
    h2 {
        font-size:21px
    }
    footer {
        flex-direction:column
    }
    .login h1 {
        font-size:36px
    }
}
@media(max-width:360px) {
    .grid {
        grid-template-columns:1fr
    }
}