/* com_vendorstore — Sible storefront styles.
   Brand: black ground, brown (#bea27b) cards/boxes, green (#34552f) accents —
   "a sprout growing out of fertile dirt". Page chrome comes from Gantry; this
   styles the component body only. Text on brown is dark ink; text on the black
   page is bone/green, so neither the theme nor the cards can hide it. */

.vendorstore {
    --vs-clay: #bea27b;          /* fertile dirt — cards/boxes */
    --vs-clay-edge: #a98c63;
    --vs-clay-stripe: #b69876;
    --vs-sprout: #34552f;        /* growth green — accents */
    --vs-sprout-bright: #74a35e; /* young shoot — text/marks on black */
    --vs-sprout-deep: #243b20;   /* readable green on clay */
    --vs-ink: #1b1a13;           /* text on clay */
    --vs-bone: #efe9dc;          /* text on black */
    max-width: 1100px; margin: 0 auto;
}
.vendorstore a:focus-visible { outline: 2px solid var(--vs-sprout-bright); outline-offset: 2px; }
.vs-sprout-mark { width: 32px; height: 34px; color: var(--vs-sprout-bright); }

/* ---------- Directory ---------- */
.vs-directory-header { text-align: center; margin: 1.25rem 0 2.25rem; }
.vs-directory-header h1 { margin: .4rem 0 .4rem; color: var(--vs-sprout-bright); letter-spacing: .01em; }
.vs-directory-header p { margin: 0; color: var(--vs-bone); opacity: .75; }

.vs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }

.vs-card {
    display: block; border-radius: 14px; overflow: hidden; text-decoration: none;
    background: var(--vs-clay); border: 1px solid var(--vs-clay-edge);
    transition: transform .15s ease, box-shadow .15s ease;
}
.vs-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.45); text-decoration: none; }
.vs-card-banner { height: 92px; background-size: cover; background-position: center; background-color: var(--vs-sprout); }
.vs-card-banner--placeholder { background-image: linear-gradient(135deg, #3f6537, #2c4827); }
.vs-card-body { padding: 1rem 1.1rem 1.2rem; position: relative; }
.vs-card-logo {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--vs-clay); margin-top: -46px; display: block; background: var(--vs-clay); position: relative;
}
.vs-card-logo--initial {
    display: flex; align-items: center; justify-content: center;
    color: var(--vs-bone); background: var(--vs-sprout); font-weight: 700; font-size: 1.5rem; line-height: 1;
}
.vendorstore .vs-card-name { margin: .6rem 0 .25rem; font-size: 1.18rem; color: var(--vs-ink); }
.vendorstore .vs-card-tagline { margin: 0; font-size: .9rem; color: var(--vs-ink); opacity: .72; }

/* ---------- Storefront ---------- */
.vs-banner {
    height: 240px; border-radius: 14px;
    background-color: var(--vs-sprout);
    background-image: linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.30));
    background-size: cover; background-position: center;
    position: relative; display: flex; align-items: flex-end;
}
.vs-logo {
    width: 112px; height: 112px; border-radius: 50%; object-fit: cover;
    border: 4px solid var(--vs-bone); margin: 0 0 -56px 2rem; background: var(--vs-clay); position: relative;
}
.vs-logo--initial {
    display: flex; align-items: center; justify-content: center;
    color: var(--vs-bone); background: var(--vs-sprout); font-weight: 700; font-size: 2.9rem; line-height: 1;
}
.vs-header { padding: 4.75rem 0 1rem; text-align: center; }
.vendorstore .vs-shop-name { color: var(--vs-sprout-bright); margin: 0 0 .3rem; letter-spacing: .01em; }
.vendorstore .vs-tagline { color: var(--vs-bone); opacity: .78; margin: 0 0 1.1rem; }

.vs-social { display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap; }
.vs-btn {
    display: inline-block; padding: .45rem 1.05rem; border-radius: 999px;
    border: 1.5px solid var(--vs-bone); color: var(--vs-bone); text-decoration: none; font-size: .9rem; line-height: 1;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vs-btn:hover { background: var(--vs-sprout); border-color: var(--vs-sprout); color: var(--vs-bone); }

.vs-tabs { display: flex; gap: .4rem; justify-content: center; border-bottom: 1px solid rgba(239,233,220,.18); margin: 1.75rem 0 1.5rem; }
.vendorstore .vs-tab {
    background: none; border: none; border-bottom: 3px solid transparent;
    padding: .65rem 1.15rem; cursor: pointer; font-size: 1rem; color: var(--vs-bone); opacity: .6;
}
.vendorstore .vs-tab.is-active { border-bottom-color: var(--vs-sprout-bright); color: var(--vs-sprout-bright); opacity: 1; }

.vs-panel { display: none; }
.vs-panel.is-active { display: block; }

.vs-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; }
.vs-product {
    display: block; text-decoration: none; border-radius: 12px; overflow: hidden;
    background: var(--vs-clay); border: 1px solid var(--vs-clay-edge);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.vs-product:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.4); border-color: var(--vs-sprout); text-decoration: none; }
.vs-product-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #cdb88f; }
.vs-product-img--placeholder { background: repeating-linear-gradient(45deg, var(--vs-clay-stripe), var(--vs-clay-stripe) 10px, var(--vs-clay-edge) 10px, var(--vs-clay-edge) 20px); }
.vendorstore .vs-product-title { margin: 0; padding: .7rem .8rem .2rem; font-size: .95rem; color: var(--vs-ink); }
.vs-product-price { margin: 0; padding: 0 .8rem .85rem; font-weight: 700; color: var(--vs-sprout-deep); }

.vs-prose { max-width: 720px; margin: 0 auto; color: var(--vs-bone); }
.vs-empty { text-align: center; color: var(--vs-bone); opacity: .75; padding: 2.5rem 0; }
.vs-empty .vs-sprout-mark { display: block; margin: 0 auto .6rem; }

@media (prefers-reduced-motion: reduce) {
    .vs-card, .vs-product { transition: none; }
    .vs-card:hover, .vs-product:hover { transform: none; }
}

/* ---------- Dashboard (self-serve vendor editor) ---------- */
.vendorstore-dashboard { max-width: 720px; }
.vs-dash-header { margin: 1.25rem 0 1.75rem; }
.vendorstore-dashboard .vs-dash-header h1 { color: var(--vs-sprout-bright); margin: 0 0 .35rem; }
.vendorstore-dashboard .vs-dash-header p { color: var(--vs-bone); opacity: .8; margin: 0; }
.vs-dash-link { color: var(--vs-sprout-bright); text-decoration: none; }
.vs-dash-link:hover { text-decoration: underline; }

.vs-dash-form { background: var(--vs-clay); border: 1px solid var(--vs-clay-edge); border-radius: 14px; padding: 1.5rem; }
.vs-field { display: block; margin-bottom: 1.1rem; }
.vs-field-label { display: block; font-weight: 600; color: var(--vs-ink); margin-bottom: .35rem; font-size: .9rem; }
.vs-dash-form input[type="text"],
.vs-dash-form textarea {
    width: 100%; box-sizing: border-box; padding: .6rem .7rem;
    border: 1px solid var(--vs-clay-edge); border-radius: 8px; background: #fffdf8; color: var(--vs-ink); font: inherit;
}
.vs-dash-form input[type="text"]:focus,
.vs-dash-form textarea:focus { outline: 2px solid var(--vs-sprout); outline-offset: 1px; border-color: var(--vs-sprout); }
.vs-dash-form textarea { resize: vertical; }
.vs-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.vs-field--color input[type="color"] { width: 100%; height: 42px; border: 1px solid var(--vs-clay-edge); border-radius: 8px; background: #fffdf8; cursor: pointer; }
.vs-dash-thumb { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; margin-bottom: .4rem; border: 1px solid var(--vs-clay-edge); }
.vs-dash-thumb--wide { width: 100%; height: 70px; }
.vs-dash-form input[type="file"] { display: block; width: 100%; color: var(--vs-ink); font-size: .85rem; }
.vs-check { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 1.25rem; color: var(--vs-ink); font-weight: 600; }
.vs-check input { width: 18px; height: 18px; }
.vs-dash-actions { text-align: right; }
.vs-dash-save {
    background: var(--vs-sprout); color: var(--vs-bone); border: none; border-radius: 999px;
    padding: .7rem 1.6rem; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .15s ease;
}
.vs-dash-save:hover { background: #2a4426; }

/* ---------- Directory search ---------- */
.vs-search-wrap { display: flex; justify-content: center; margin: 0 0 1.75rem; }
.vs-search {
    width: 100%; max-width: 420px; box-sizing: border-box;
    padding: .65rem 1rem; font: inherit; color: var(--vs-ink);
    background: var(--vs-clay); border: 1px solid var(--vs-clay-edge); border-radius: 999px;
}
.vs-search::placeholder { color: var(--vs-ink); opacity: .55; }
.vs-search:focus { outline: 2px solid var(--vs-sprout-bright); outline-offset: 2px; border-color: var(--vs-sprout-bright); }
.vs-card[hidden] { display: none; }
.vs-search-empty { text-align: center; color: var(--vs-bone); opacity: .75; padding: 1.5rem 0; }

/* ---- Product management (v1.7.0) ---- */
.vendorstore-products, .vendorstore-pedit { max-width: 760px; margin: 0 auto; }
.vendorstore-products .vs-products-head { margin-bottom: 1.4rem; }
.vendorstore-products .vs-products-title { color: var(--vs-sprout-bright); margin: 0 0 .35rem; }
.vendorstore-products .vs-products-intro { color: var(--vs-bone); opacity: .8; margin: 0; }

.vs-plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.vs-prow {
    display: flex; align-items: center; gap: 1rem;
    background: var(--vs-clay); border: 1px solid var(--vs-clay-edge);
    border-radius: 12px; padding: .8rem 1rem;
}
.vs-prow--hidden { opacity: .62; }
.vs-prow-thumb { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; background: var(--vs-clay-stripe); }
.vs-prow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-prow-thumb--placeholder { display: block; width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, var(--vs-clay-stripe), var(--vs-clay-stripe) 8px, var(--vs-clay-edge) 8px, var(--vs-clay-edge) 16px); }
.vs-prow-main { flex: 1 1 auto; min-width: 0; }
.vendorstore .vs-prow-name { margin: 0 0 .3rem; font-size: 1.02rem; color: var(--vs-ink); }
.vs-prow-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.vs-prow-price { font-weight: 700; color: var(--vs-sprout-deep); }
.vs-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .15rem .5rem; border-radius: 999px; }
.vs-tag--live { background: var(--vs-sprout); color: var(--vs-bone); }
.vs-tag--hidden { background: #8a7350; color: var(--vs-bone); }
.vs-prow-actions { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; }
.vs-inline-form { margin: 0; }

/* buttons — clay-context variants sit on the brown cards */
.vendorstore .vs-btn--edit, .vendorstore .vs-btn--ghost {
    border: 1.5px solid var(--vs-sprout-deep); color: var(--vs-sprout-deep); background: transparent;
}
.vendorstore .vs-btn--edit:hover, .vendorstore .vs-btn--ghost:hover { background: var(--vs-sprout); border-color: var(--vs-sprout); color: var(--vs-bone); }
.vendorstore .vs-btn--save {
    border: none; background: var(--vs-sprout); color: var(--vs-bone); border-radius: 999px;
    padding: .6rem 1.4rem; font: inherit; font-weight: 600; cursor: pointer;
}
.vendorstore .vs-btn--save:hover { background: var(--vs-sprout-deep); }

/* edit form */
.vendorstore-pedit .vs-back { margin: 0 0 .6rem; }
.vendorstore-pedit .vs-back a { color: var(--vs-sprout-bright); text-decoration: none; }
.vendorstore-pedit .vs-pedit-title { color: var(--vs-sprout-bright); margin: 0 0 1.2rem; }
.vendorstore .vs-form { background: var(--vs-clay); border: 1px solid var(--vs-clay-edge); border-radius: 14px; padding: 1.5rem; }
.vendorstore .vs-form .vs-field { display: block; margin-bottom: 1.15rem; }
.vendorstore .vs-label { display: block; font-weight: 600; color: var(--vs-ink); margin-bottom: .35rem; font-size: .9rem; }
.vendorstore .vs-input {
    width: 100%; box-sizing: border-box; padding: .6rem .7rem;
    border: 1px solid var(--vs-clay-edge); border-radius: 8px; background: #fffdf8; color: var(--vs-ink); font: inherit;
}
.vendorstore .vs-input:focus { outline: 2px solid var(--vs-sprout); outline-offset: 1px; border-color: var(--vs-sprout); }
.vendorstore .vs-textarea { resize: vertical; min-height: 8rem; }
.vendorstore .vs-hint { margin: .35rem 0 0; font-size: .8rem; color: var(--vs-ink); opacity: .68; }
.vendorstore .vs-pedit-img { display: block; max-width: 160px; border-radius: 10px; border: 1px solid var(--vs-clay-edge); }
.vs-price-input { position: relative; }
.vs-price-sign { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--vs-ink); opacity: .7; }
.vs-price-input .vs-input { padding-left: 1.5rem; }
.vs-form-actions { display: flex; align-items: center; gap: .8rem; margin-top: .5rem; }

/* ---- Product photo + delete (v1.7.2) ---- */
.vendorstore .vs-file { display: block; width: 100%; margin-top: .6rem; color: var(--vs-ink); font-size: .85rem; }
.vendorstore .vs-pedit-img { margin-bottom: .2rem; }

.vs-danger {
    margin-top: 2rem; padding: 1.25rem 1.5rem;
    border: 1px solid #a5453a; border-radius: 12px; background: rgba(165, 69, 58, .08);
}
.vendorstore .vs-danger-title { margin: 0 0 .4rem; font-size: 1.05rem; color: #d98b82; }
.vendorstore .vs-danger-text { margin: 0 0 1rem; color: var(--vs-bone); opacity: .85; font-size: .9rem; }
.vendorstore .vs-btn--delete {
    border: none; background: #a5453a; color: #fff; border-radius: 999px;
    padding: .6rem 1.4rem; font: inherit; font-weight: 600; cursor: pointer;
}
.vendorstore .vs-btn--delete:hover { background: #8c382f; }

/* ---- Unified search (v1.7.4) ---- */
.vendorstore-search { max-width: 1040px; margin: 0 auto; }
.vs-srch { display: flex; gap: .5rem; max-width: 560px; margin: 0 auto 1.5rem; }
.vs-srch__input { flex: 1; height: 44px; border-radius: 999px; border: 1px solid var(--vs-clay-edge); background: #fffdf8; color: var(--vs-ink); padding: 0 1rem; font: inherit; }
.vs-srch__input:focus { outline: 2px solid var(--vs-sprout); outline-offset: 1px; border-color: var(--vs-sprout); }
.vs-srch__btn { border: none; background: var(--vs-sprout); color: var(--vs-bone); border-radius: 999px; padding: 0 1.4rem; font: inherit; font-weight: 600; cursor: pointer; }
.vs-srch__btn:hover { background: var(--vs-sprout-deep); }
.vs-srch__hint { text-align: center; color: var(--vs-bone); opacity: .8; padding: 1.5rem 0; }
.vendorstore .vs-srch__title { color: var(--vs-sprout-bright); margin: 0 0 1.2rem; }
.vs-srch__sec { margin: 0 0 2rem; }
.vendorstore .vs-srch__h { font-size: 1.2rem; color: var(--vs-bone); margin: 0 0 1rem; border-bottom: 1px solid #2a2a2a; padding-bottom: .4rem; }

.vs-grid { display: grid; gap: 1rem; }
.vs-grid--products { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.vs-grid--vendors { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* product card (shared look with the home rail) */
.vs-pcard { background: var(--vs-clay); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.vs-pcard__imglink { display: block; }
.vs-pcard__img { display: block; height: 150px; background: #e9e1d1 center/cover no-repeat; }
.vs-pcard__img--ph { display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #b9a884; }
.vs-pcard__body { padding: .7rem .85rem .85rem; display: flex; flex-direction: column; flex: 1; }
.vs-pcard__vendor { font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: #6b5836; margin: 0 0 .25rem; text-decoration: none; }
.vs-pcard__vendor:hover { text-decoration: underline; }
.vendorstore .vs-pcard__name { font-size: .92rem; color: var(--vs-ink); margin: 0 0 .65rem; font-weight: 600; line-height: 1.3; text-decoration: none; }
.vs-pcard__name:hover { color: var(--vs-sprout); }
.vs-pcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.vs-pcard__price { font-size: 1rem; font-weight: 700; color: var(--vs-sprout-deep); }
.vs-pcard__buy { background: var(--vs-sprout); color: var(--vs-bone); font-size: .78rem; border-radius: 999px; padding: .42rem .95rem; text-decoration: none; white-space: nowrap; }
.vs-pcard__buy:hover { background: var(--vs-sprout-deep); }

/* vendor card */
.vs-vcard { background: var(--vs-clay); border-radius: 12px; padding: 1.15rem 1rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.vs-vcard__logo { width: 66px; height: 66px; border-radius: 50%; background: var(--vs-sprout); color: var(--vs-bone); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 600; overflow: hidden; margin-bottom: .65rem; text-decoration: none; }
.vs-vcard__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vendorstore .vs-vcard__name { font-size: 1rem; color: var(--vs-ink); font-weight: 600; margin: 0 0 .25rem; text-decoration: none; }
.vs-vcard__name:hover { color: var(--vs-sprout); }
.vs-vcard__tag { font-size: .78rem; color: #6b5836; margin: 0 0 .95rem; line-height: 1.35; }
.vs-vcard__visit { margin-top: auto; border: 1px solid var(--vs-sprout); color: var(--vs-sprout); background: transparent; border-radius: 999px; padding: .42rem 1.05rem; font-size: .8rem; text-decoration: none; }
.vs-vcard__visit:hover { background: var(--vs-sprout); color: var(--vs-bone); }

/* ---- Vendor contact form (v1.8.0) ---- */
.vs-contact-intro { color: var(--vs-bone); opacity: .85; margin: 0 0 1.1rem; }
.vs-contact-form { background: var(--vs-clay); border: 1px solid var(--vs-clay-edge); border-radius: 14px; padding: 1.5rem; max-width: 640px; }
.vs-contact-form .vs-field { display: block; margin-bottom: 1.1rem; }
.vs-contact-form .vs-field-label { display: block; font-weight: 600; color: var(--vs-ink); margin-bottom: .35rem; font-size: .9rem; }
.vs-contact-form .vs-optional { font-weight: 400; opacity: .65; }
.vs-contact-form input[type="text"],
.vs-contact-form input[type="email"],
.vs-contact-form textarea {
    width: 100%; box-sizing: border-box; padding: .6rem .7rem;
    border: 1px solid var(--vs-clay-edge); border-radius: 8px;
    background: #fffdf8; color: var(--vs-ink); font: inherit;
}
.vs-contact-form input:focus, .vs-contact-form textarea:focus {
    outline: 2px solid var(--vs-sprout); outline-offset: 1px; border-color: var(--vs-sprout);
}
.vs-contact-form textarea { resize: vertical; min-height: 8rem; }
.vendorstore .vs-btn--send {
    border: none; background: var(--vs-sprout); color: var(--vs-bone);
    border-radius: 999px; padding: .65rem 1.6rem; font: inherit; font-weight: 600; cursor: pointer;
}
.vendorstore .vs-btn--send:hover { background: var(--vs-sprout-deep); }

/* Honeypot: off-screen for people, visible to bots. Never display:none. */
.vs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vs-field-hint { display: block; margin-top: .35rem; font-size: .8rem; color: var(--vs-ink); opacity: .7; line-height: 1.4; }
/* ---- Payout / Stripe connect (v1.9.0) ---- */
.vs-stripe { background: var(--vs-clay); border: 1px solid var(--vs-clay-edge); border-radius: 14px; padding: 1.5rem; max-width: 640px; margin-bottom: 1.5rem; }
.vs-stripe-title { margin: 0 0 .8rem; font-size: 1.05rem; color: var(--vs-ink); }
.vs-stripe-status { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; color: var(--vs-ink); font-size: .92rem; line-height: 1.45; }
.vs-stripe-dot { flex: none; width: .6rem; height: .6rem; border-radius: 999px; background: #c9a227; }
.vs-stripe-status--ok .vs-stripe-dot { background: var(--vs-sprout); }
.vs-stripe-status--none .vs-stripe-dot { background: var(--vs-clay-edge); }
.vendorstore .vs-stripe-btn {
    border: none; background: var(--vs-sprout); color: var(--vs-bone);
    border-radius: 999px; padding: .65rem 1.6rem; font: inherit; font-weight: 600; cursor: pointer;
}
.vendorstore .vs-stripe-btn:hover { background: var(--vs-sprout-deep); }