/* Витрина лавки (тип бизнеса shop), блок S2 плана docs-project/fair-makers/
   PLAN.md. Свои классы с префиксом shop-, цвета - общие токены витрины из
   showcase.html (--color-*-rgb, --accent-color), тёмная тема - body.theme-dark. */
#shop-root {
  --shop-line: rgb(226 232 240);
  --shop-soft: rgb(var(--color-surface-2-rgb));
  --shop-cta: var(--gradient-cta, var(--accent-color, #6A35D6));
  --shop-cta-ink: #fff;
  color: rgb(var(--color-text-rgb));
}
body.theme-dark #shop-root { --shop-line: rgb(72 72 72); }

.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.shop-head-place { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.8rem; }
.shop-head-city, .shop-head-section { background: var(--shop-soft); border-radius: 999px; padding: 0.25rem 0.7rem; font-weight: 600; }
.shop-head-city::before { content: "📍 "; }
.shop-link-btn { border: 0; background: none; color: rgb(var(--accent-text-rgb, 106 53 214)); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; padding: 0.4rem 0.1rem; }

.shop-banner, .shop-note { background: rgb(var(--color-danger-rgb) / 0.08); border: 1px solid rgb(var(--color-danger-rgb) / 0.25); border-radius: 0.75rem; padding: 0.7rem 0.9rem; font-size: 0.85rem; margin-bottom: 0.9rem; }
.shop-empty { text-align: center; color: rgb(var(--color-text-muted-rgb)); font-size: 0.9rem; padding: 1.5rem 0; }
.shop-hint { font-size: 0.8rem; color: rgb(var(--color-text-muted-rgb)); margin: 0.4rem 0 0.8rem; }
.shop-error { font-size: 0.85rem; font-weight: 600; color: rgb(var(--color-danger-rgb)); margin: 0.5rem 0 0; }

.shop-search-row { margin-bottom: 0.6rem; }
.shop-input { width: 100%; box-sizing: border-box; border: 1px solid var(--shop-line); background: rgb(var(--color-surface-rgb)); color: inherit; border-radius: 0.8rem; padding: 0.7rem 0.85rem; font: inherit; font-size: 0.95rem; }
.shop-input:focus { outline: 2px solid rgb(var(--accent-text-rgb, 106 53 214)); outline-offset: 1px; }
textarea.shop-input { resize: vertical; }

.shop-chips { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.4rem; margin-bottom: 0.4rem; scrollbar-width: none; }
.shop-chips::-webkit-scrollbar { display: none; }
.shop-chip { flex: none; border: 1px solid var(--shop-line); background: rgb(var(--color-surface-rgb)); color: inherit; border-radius: 999px; padding: 0.45rem 0.9rem; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.shop-chip.is-active { background: var(--shop-cta); color: var(--shop-cta-ink); border-color: transparent; }

.shop-section { margin-bottom: 1.25rem; }
.shop-section-title { font-size: 1rem; font-weight: 700; margin: 0.6rem 0; }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
@media (min-width: 640px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shop-card { display: flex; flex-direction: column; gap: 0.4rem; text-align: left; border: 1px solid var(--shop-line); background: rgb(var(--color-surface-rgb)); color: inherit; border-radius: 1rem; padding: 0.5rem 0.5rem 0.7rem; font: inherit; cursor: pointer; min-width: 0; }
.shop-card.is-unavailable { opacity: 0.55; }
.shop-card-photo { display: block; aspect-ratio: 1 / 1; border-radius: 0.75rem; overflow: hidden; background: var(--shop-soft); }
.shop-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-card-nophoto { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.6rem; font-weight: 700; color: rgb(var(--color-text-muted-rgb)); }
.shop-card-title { font-size: 0.88rem; font-weight: 600; line-height: 1.25; padding: 0 0.2rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.shop-card-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; padding: 0 0.2rem; margin-top: auto; }
.shop-card-price { font-weight: 800; font-size: 0.95rem; }
.shop-card-note { font-size: 0.7rem; color: rgb(var(--color-text-muted-rgb)); }

.shop-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; border: 0; border-radius: 0.9rem; padding: 0.9rem 1rem; background: var(--shop-cta); color: var(--shop-cta-ink); font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; text-decoration: none; }
.shop-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.shop-btn--ghost { background: transparent; color: inherit; border: 1.5px solid var(--shop-line); margin-top: 0.75rem; }
.shop-btn--danger { background: transparent; color: rgb(var(--color-danger-rgb)); border: 1.5px solid rgb(var(--color-danger-rgb) / 0.4); margin-top: 0.6rem; }

.shop-cart-bar { position: fixed; left: 1rem; right: 1rem; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 900; display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: 640px; margin: 0 auto; border: 0; border-radius: 1rem; padding: 0.9rem 1.1rem; background: var(--shop-cta); color: var(--shop-cta-ink); font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25); }
.shop-cart-bar[hidden], .shop-sheet[hidden], .shop-screen[hidden], .shop-backdrop[hidden], .shop-toast[hidden] { display: none; }

.shop-backdrop { position: fixed; inset: 0; background: rgb(var(--color-ink-fixed-rgb) / 0.5); z-index: 1065; }
.shop-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1070; max-height: 88vh; display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; background: rgb(var(--color-surface-rgb)); color: rgb(var(--color-text-rgb)); border-radius: 1.25rem 1.25rem 0 0; }
.shop-close { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 0; background: rgb(var(--color-ink-fixed-rgb) / 0.55); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.shop-sheet-scroll { overflow-y: auto; padding: 1rem 1.1rem 0.5rem; min-height: 0; }
.shop-sheet-photos { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-bottom: 0.8rem; border-radius: 0.9rem; }
.shop-sheet-photos img { flex: none; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.9rem; scroll-snap-align: start; }
.shop-sheet-photos img:not(:only-child) { width: 86%; }
.shop-sheet-title { font-size: 1.15rem; font-weight: 700; }
.shop-sheet-price { font-size: 1.1rem; font-weight: 800; margin: 0.2rem 0 0.6rem; }
.shop-sheet-desc { font-size: 0.9rem; line-height: 1.5; white-space: pre-line; color: rgb(var(--color-text-muted-rgb)); margin-bottom: 0.8rem; }
.shop-sheet-foot { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem 1.1rem calc(0.9rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--shop-line); }
.shop-sheet-foot[hidden] { display: none; }
.shop-sheet-foot .shop-btn { flex: 1; }

.shop-qty { display: inline-flex; align-items: center; gap: 0.2rem; flex: none; background: var(--shop-soft); border-radius: 999px; padding: 0.2rem; }
.shop-qty button { width: 2rem; height: 2rem; border-radius: 999px; border: 0; background: rgb(var(--color-surface-rgb)); color: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.shop-qty span { min-width: 1.6rem; text-align: center; font-weight: 700; font-size: 0.95rem; }

.shop-screen { position: fixed; inset: 0; z-index: 1060; display: flex; flex-direction: column; background: rgb(var(--color-surface-rgb)); color: rgb(var(--color-text-rgb)); }
.shop-screen-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; padding: calc(0.6rem + env(safe-area-inset-top)) 1rem 0.6rem; border-bottom: 1px solid var(--shop-line); }
.shop-screen-head > :last-child { justify-self: end; }
.shop-screen-head > :first-child { justify-self: start; }
.shop-screen-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; width: 100%; max-width: 640px; margin: 0 auto; box-sizing: border-box; }
.shop-screen-foot { padding: 0.75rem 1rem calc(0.9rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--shop-line); width: 100%; max-width: 640px; margin: 0 auto; box-sizing: border-box; }
body.shop-screen-open { overflow: hidden; }

.shop-line { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0; border-bottom: 1px solid var(--shop-line); }
.shop-line-photo { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 0.7rem; overflow: hidden; background: var(--shop-soft); }
.shop-line-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.shop-line-title { font-size: 0.9rem; font-weight: 600; }
.shop-line-price { font-size: 0.85rem; color: rgb(var(--color-text-muted-rgb)); }

.shop-form-title { font-size: 1rem; font-weight: 700; margin: 1.2rem 0 0.6rem; }
.shop-toggle { display: flex; gap: 0.4rem; background: var(--shop-soft); border-radius: 0.9rem; padding: 0.25rem; }
.shop-toggle-btn { flex: 1; border: 0; background: transparent; color: inherit; border-radius: 0.7rem; padding: 0.65rem 0.5rem; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.shop-toggle-btn[hidden] { display: none; }
/* Блок S8: третий способ с длинным названием занимает свою строку. */
.shop-toggle { flex-wrap: wrap; }
.shop-toggle-btn[data-method="postal"] { flex-basis: 100%; }
.shop-toggle-btn.is-active { background: rgb(var(--color-surface-rgb)); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.shop-toggle-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.shop-field { margin-bottom: 0.75rem; }
.shop-field[hidden] { display: none; }
.shop-field label { display: block; font-size: 0.8rem; font-weight: 700; color: rgb(var(--color-text-muted-rgb)); margin-bottom: 0.3rem; }

.shop-totals { border-top: 1px solid var(--shop-line); margin-top: 1rem; padding-top: 0.75rem; font-size: 0.9rem; }
.shop-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; }
.shop-totals > div[hidden] { display: none; }
.shop-totals-sum { font-weight: 800; font-size: 1.05rem; }

.shop-status-done { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.5rem; }
.shop-status-badge { display: inline-block; border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: 700; background: var(--shop-soft); }
.shop-status-badge[data-status="accepted"], .shop-status-badge[data-status="preparing"] { background: rgb(217 119 6 / 0.16); }
.shop-status-badge[data-status="ready"], .shop-status-badge[data-status="served"] { background: rgb(var(--color-success-strong-rgb) / 0.18); }
.shop-status-badge[data-status="cancelled"] { background: rgb(var(--color-danger-rgb) / 0.14); }
.shop-status-block { background: var(--shop-soft); border-radius: 0.9rem; padding: 0.8rem 0.9rem; font-size: 0.9rem; line-height: 1.5; margin-top: 0.75rem; }
.shop-status-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; }

.shop-order-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; text-align: left; border: 1px solid var(--shop-line); background: rgb(var(--color-surface-rgb)); color: inherit; border-radius: 0.9rem; padding: 0.8rem 0.9rem; font: inherit; font-size: 0.9rem; cursor: pointer; margin-bottom: 0.6rem; }
.shop-order-row-right { text-align: right; font-weight: 700; }

.shop-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(140px + env(safe-area-inset-bottom)); z-index: 1100; background: rgb(var(--color-ink-fixed-rgb) / 0.92); color: #fff; border-radius: 999px; padding: 0.55rem 1.1rem; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }

/* Блок S3: варианты, наличие, «под заказ», предзаказ */
.shop-card-note[data-state="preorder"], .shop-card-note[data-state="made_to_order"],
.shop-line-note, .shop-sheet-state { display: inline-block; border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.72rem; font-weight: 700; background: rgb(106 53 214 / 0.14); color: inherit; }
.shop-card-note[data-state="in_stock"] { color: rgb(var(--color-warning-strong-rgb, 180 83 9)); font-weight: 700; }
.shop-card-bottom { flex-wrap: wrap; }
.shop-sheet-state { font-size: 0.8rem; margin-bottom: 0.6rem; }
.shop-sheet-state[data-state="in_stock"] { background: rgb(217 119 6 / 0.16); }
.shop-sheet-state[hidden], .shop-sheet-group[hidden], .shop-sheet-perishable[hidden], .shop-note[hidden] { display: none; }
.shop-sheet-group { margin-bottom: 0.8rem; }
.shop-sheet-group-title { font-size: 0.8rem; font-weight: 700; color: rgb(var(--color-text-muted-rgb)); margin-bottom: 0.35rem; }
.shop-options { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.shop-option { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; border: 1.5px solid var(--shop-line); background: rgb(var(--color-surface-rgb)); color: inherit; border-radius: 0.8rem; padding: 0.5rem 0.8rem; font: inherit; font-size: 0.88rem; cursor: pointer; text-align: left; }
.shop-option.is-active { border-color: transparent; background: linear-gradient(rgb(var(--color-surface-rgb)), rgb(var(--color-surface-rgb))) padding-box, var(--shop-cta) border-box; border: 2px solid transparent; }
.shop-option:disabled, .shop-option.is-out { opacity: 0.45; cursor: not-allowed; }
.shop-option-title { font-weight: 700; }
.shop-option-price { font-size: 0.82rem; }
.shop-option-note { font-size: 0.7rem; color: rgb(var(--color-text-muted-rgb)); }
.shop-sheet-perishable { font-size: 0.8rem; color: rgb(var(--color-text-muted-rgb)); margin-bottom: 0.8rem; }
.shop-line-note { margin: 0.15rem 0; align-self: flex-start; }
.shop-status-line .shop-line-note { margin-left: 0.3rem; }
.shop-note--info { background: rgb(106 53 214 / 0.1); border-color: rgb(106 53 214 / 0.25); margin-top: 0.9rem; }
.shop-qty button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Блок S4: заказ к дате, вопросы к товару, цена за кг */
.shop-card-note[data-kind="to-date"], .shop-card-note[data-kind="per-kg"] { flex-basis: 100%; }
.shop-card-note[data-kind="to-date"] { font-weight: 700; color: inherit; }
.shop-sheet-perkg, .shop-sheet-todate { font-size: 0.82rem; line-height: 1.4; color: rgb(var(--color-text-muted-rgb)); margin-bottom: 0.7rem; }
.shop-sheet-todate { background: rgb(106 53 214 / 0.1); border-radius: 0.7rem; padding: 0.5rem 0.7rem; color: inherit; }
.shop-sheet-perkg[hidden], .shop-sheet-todate[hidden], #shop-ready-block[hidden] { display: none; }
.shop-question-text { margin-bottom: 0.6rem; }
.shop-sheet-group .shop-options { margin-bottom: 0.6rem; }
.shop-line-answers { display: block; font-size: 0.78rem; color: rgb(var(--color-text-muted-rgb)); overflow-wrap: anywhere; }
.shop-status-line .shop-line-answers { margin-top: 0.1rem; }
.shop-cal-month { font-size: 0.85rem; font-weight: 700; margin: 0.7rem 0 0.35rem; }
.shop-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
.shop-cal-wd { text-align: center; font-size: 0.7rem; color: rgb(var(--color-text-muted-rgb)); }
.shop-cal-day { border: 1.5px solid var(--shop-line); background: rgb(var(--color-surface-rgb)); color: inherit; border-radius: 0.65rem; padding: 0.5rem 0; font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; min-width: 0; }
.shop-cal-day.is-active { background: var(--shop-cta); color: var(--shop-cta-ink); border-color: transparent; }
.shop-cal-day:disabled { opacity: 0.4; cursor: not-allowed; }
.shop-cal-day.is-blocked { text-decoration: line-through; }
.shop-status-ready { background: rgb(106 53 214 / 0.12); }
/* Отзывы (блок R8): кнопка «Оценить» и свой отзыв в «Моих заказах» и в заказе. */
.shop-order-card { margin-bottom: 0.6rem; }
.shop-order-card .shop-order-row { margin-bottom: 0; }
.shop-review { margin: 0.5rem 0 0.75rem; }
.shop-review .rv-own { text-align: left; }