/* ==========================================================================
   Store directory (/stores, hubs, /store/{slug}): additions on top of style.css.
   Same tokens (--c-*, --radius, --shadow) and vocabulary as the legacy sheet.
   ========================================================================== */

/* Card / profile artwork: the store's initial on a warm candle-light gradient. */
.store-art { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; }
.store-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 90% at 80% 10%, rgba(255, 210, 63, .38), transparent 62%); }
.store-art__initial { position: relative; z-index: 1; font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(47, 42, 36, .25); }
.store-art--0 { background: linear-gradient(135deg, #f7931e, #c2660f); }
.store-art--1 { background: linear-gradient(135deg, #e8a13a, #8a5a2b); }
.store-art--2 { background: linear-gradient(135deg, #b9826a, #6d4a3f); }
.store-art--3 { background: linear-gradient(135deg, #8fa77f, #4f6b48); }
.store-art--4 { background: linear-gradient(135deg, #c98aa0, #7d4a63); }
.store-art--5 { background: linear-gradient(135deg, #6f7f9b, #3f4a63); }

.store-card__media { aspect-ratio: 16 / 7; }
.store-card__media:hover { color: #fff; }
.store-card__location { font-size: .86rem; color: var(--c-ink-mute); }
.store-card__location::before { content: '📍 '; }
.store-card__tags { display: inline-flex; gap: .35rem; flex-wrap: wrap; }

.store-chip {
    display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--c-primary-dark); background: var(--c-primary-tint); border-radius: 50px; padding: .22rem .6rem;
}
.store-chip--verified { color: #fff; background: var(--c-success); }

/* Search bar in page headers. */
.dir-search { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; max-width: 860px; margin: 1.6rem auto 0; }
.dir-search input[type="search"] { flex: 2 1 260px; }
.dir-search select { flex: 1 1 170px; }
.dir-search .btn { flex: 0 0 auto; }

/* Landing: type cards + country pills. */
.dir-type-card { display: flex; flex-direction: column; align-items: center; }
.dir-type-card p { flex: 1; }
.dir-count { display: inline-block; margin-top: .8rem; font-size: .82rem; font-weight: 700; color: var(--c-primary-dark); }
.dir-pills { justify-content: center; }
.dir-pills__count { color: var(--c-ink-mute); font-weight: 600; margin-left: .2rem; }

/* Hub sidebar lists can be long (cities). */
.dir-scroll-list { max-height: 420px; overflow-y: auto; }

/* Pagination. */
.dir-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-top: 2.5rem; }
.dir-pagination ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.dir-pagination .btn { padding: .55rem .95rem; min-width: 2.75rem; }
.dir-pagination__gap { align-self: center; color: var(--c-ink-mute); padding-inline: .2rem; }

/* Store page. */
.store-profile { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; padding-block: 1rem 2rem; }
.store-profile__head { display: flex; gap: 1.4rem; align-items: center; }
.store-profile__art { flex: 0 0 auto; width: 112px; height: 112px; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.store-profile__art .store-art__initial { font-size: 3.2rem; }
.store-profile__title { margin: .3rem 0 .4rem; font-size: clamp(1.9rem, 4.4vw, 2.9rem); overflow-wrap: anywhere; }
.store-profile__location { color: var(--c-ink-soft); font-weight: 600; }
.store-profile__location::before { content: '📍 '; }
.store-profile__chips { margin-top: .7rem; gap: .4rem; }
.store-profile__about { margin-top: 2rem; }
.store-profile__about h2, .store-profile__subhead { font-size: 1.25rem; margin-bottom: .6rem; }
.store-profile__about p { font-size: 1.06rem; }
.store-profile__subhead { margin-top: 2rem; }
.store-profile .spec-table { margin-top: .4rem; }
.store-profile .spec-table td { overflow-wrap: anywhere; }
.store-profile__aside { position: sticky; top: 100px; display: grid; gap: 1rem; }

.store-contact { padding: 1.5rem; gap: .7rem; }
.store-contact:hover { transform: none; box-shadow: var(--shadow-sm); }
.store-contact h2 { font-size: 1.1rem; margin-bottom: .2rem; overflow-wrap: anywhere; }
.store-contact .btn { overflow-wrap: anywhere; }
.store-contact__socials { font-size: .92rem; font-weight: 600; text-align: center; }
.store-contact__note { font-size: .82rem; color: var(--c-ink-mute); text-align: center; }
.store-email { margin: 0; }
.store-email__error { font-size: .85rem; color: var(--c-flame-deep); text-align: center; }

.store-owner { background: var(--c-bg-warm); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.1rem 1.3rem; font-size: .92rem; }
.store-owner p + p { margin-top: .5rem; }

/* Forms (claim / report). */
.dir-notice { padding: 2rem; border-top: 5px solid var(--c-success); }
.dir-notice:hover { transform: none; }
.dir-error { display: block; color: var(--c-flame-deep); }
.dir-hint { display: block; font-size: .85rem; color: var(--c-ink-mute); margin-top: .3rem; }
.dir-optional { font-weight: 400; color: var(--c-ink-mute); }

@media (max-width: 900px) {
    .store-profile { grid-template-columns: 1fr; }
    .store-profile__aside { position: static; }
}

@media (max-width: 560px) {
    .dir-grid { grid-template-columns: 1fr; }
    .store-card__media { aspect-ratio: 16 / 5; }
    .store-profile__head { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .store-profile__art { width: 84px; height: 84px; }
    .store-profile__art .store-art__initial { font-size: 2.4rem; }
    .store-art__initial { font-size: 2rem; }
    .dir-search .btn { flex: 1 1 100%; }
    .dir-pagination > .btn { flex: 1 1 40%; }
}