/* ============================================================================
   АгроМест — стили отдельных экранов (из прототипа) и дополнения для Django
   ============================================================================ */

/* Кабинет: таблицы и карточки */
.prod-cell { display: flex; align-items: center; gap: var(--sp-3); }
.prod-cell .mini-thumb { width: 48px; height: 48px; flex: none; border-radius: var(--r-md); background: var(--green-50); display: grid; place-items: center; font-size: 24px; }
.action-row { display: flex; gap: var(--sp-1); align-items: center; }
.action-row form { display: contents; }
.mobile-card-list { display: none; flex-direction: column; gap: var(--sp-3); }
@media (max-width: 767px) {
  .table-wrap { display: none; }
  .mobile-card-list { display: flex; }
}
.req-card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

/* Страница фермера */
.farmer-hero .farmer-info { display: flex; flex-direction: column; gap: var(--sp-2); }
.farmer-hero .farmer-contact { margin-left: auto; }
.map-placeholder {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border);
  height: 260px; background: linear-gradient(160deg, #F0ECE4, #E7E2D8);
  display: grid; place-items: center; color: var(--text-tertiary); position: relative;
}
@media (max-width: 767px) {
  .farmer-hero .farmer-contact { margin-left: 0; width: 100% !important; max-width: none !important; }
}

/* Вход */
.password-wrap { position: relative; }
.password-wrap .eye { position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; color: var(--text-tertiary); border-radius: var(--r-sm); }
.password-wrap .eye:hover { color: var(--text-primary); background: var(--surface-2); }

/* Форма товара */
.upload-zone { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.upload-slot { width: 96px; height: 96px; border-radius: var(--r-md); display: grid; place-items: center; position: relative; overflow: hidden; }
.upload-add { border: 1.5px dashed var(--border-strong); color: var(--text-tertiary); cursor: pointer; background: var(--surface); transition: border-color var(--transition), color var(--transition); }
.upload-add:hover { border-color: var(--brand); color: var(--brand-strong); }
.upload-add[hidden] { display: none; }
.upload-photo { background: var(--green-50); border: 1px solid var(--border); }
.upload-photo img { width: 100%; height: 100%; object-fit: cover; }
.upload-photo.is-removed img { opacity: .3; }
.upload-remove { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: var(--r-full); background: rgba(23,28,25,.6); color: #fff; display: grid; place-items: center; cursor: pointer; }
.upload-remove .icon { width: 12px; height: 12px; }
.upload-note { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--sp-2); }
.form-foot { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding: var(--sp-4) 0; margin-top: var(--sp-6); z-index: 20; }
.city-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-check { cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check:has(input:checked) { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip-check:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--focus-ring); }

/* Карточка товара: липкие контакты на мобильном */
.contact-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (max-width: 767px) {
  .contact-sticky {
    position: sticky; bottom: calc(var(--tabbar-h) + var(--sp-3)); z-index: 30;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: var(--sp-3); box-shadow: var(--shadow-md);
  }
}

/* Профиль */
.avatar-edit { display: flex; align-items: center; gap: var(--sp-4); }
.map-mini { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); height: 240px; background: linear-gradient(160deg,#F0ECE4,#E7E2D8); display: grid; place-items: center; color: var(--text-tertiary); }
.avatar-img { overflow: hidden; padding: 0; }
.avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Регистрация */
.role-option { position: relative; display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5); border: 1.5px solid var(--border-strong); border-radius: var(--r-lg); cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.role-option:hover { border-color: var(--gray-400); }
.role-option input { position: absolute; opacity: 0; }
.role-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.role-option .role-icon { width: 44px; height: 44px; flex: none; border-radius: var(--r-md); background: var(--surface-2); color: var(--text-secondary); display: grid; place-items: center; }
.role-option:has(input:checked) .role-icon { background: var(--brand); color: #fff; }
.role-option .role-title { font-weight: 600; font-size: var(--text-lg); font-family: var(--font-sans); }
.role-option .role-desc { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }
.step-labels { display: flex; justify-content: space-between; margin-top: var(--sp-2); }
.step-labels span { font-size: var(--text-xs); color: var(--text-tertiary); flex: 1; text-align: center; }
.step-labels span:first-child { text-align: left; }
.step-labels span:last-child { text-align: right; }
.code-note { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); background: var(--info-bg); color: var(--info); border-radius: var(--r-md); font-size: var(--text-sm); margin-top: var(--sp-2); }

/* Доска заявок */
.req-grid { display: flex; flex-direction: column; gap: var(--sp-4); }
.lock-note { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface-2); border-radius: var(--r-lg); font-size: var(--text-sm); color: var(--text-secondary); }

/* ---------- Дополнения для работающего сайта ---------- */
button.dropdown-item, button.drawer-nav-link, button.cabinet-nav-link { width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; }
.thumb-empty { width: 100%; height: 100%; display: grid; place-items: center; color: var(--green-400); background: var(--green-50); }
.pdp-main .thumb-empty { aspect-ratio: 4/3; }
a.stat { color: inherit; text-decoration: none; }
a.stat:hover { border-color: var(--border-strong); }
.field-error + .field-error { margin-top: 2px; }
.prose { color: var(--text-secondary); line-height: 1.65; }
.prose h2 { color: var(--text-primary); font-size: var(--text-xl, 20px); margin: var(--sp-6) 0 var(--sp-3); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--sp-4); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose a { color: var(--brand-strong); }
.request-card .title a { color: inherit; }
.leaflet-container { width: 100%; height: 100%; font: inherit; }
.catalog-toolbar form { margin: 0; }
.sidebar > form { display: flex; flex-direction: column; gap: var(--sp-6); }
@media (max-width: 767px) {
  body.has-tabbar .form-foot { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}
.cabinet-layout > *, .catalog-layout > * { min-width: 0; }
.catalog-toolbar { flex-wrap: wrap; }
@media (max-width: 767px) {
  .cabinet-nav > form, .cabinet-nav > .divider { display: none; }
}

/* ============================================================
   ГЛАВНАЯ: баннер и заголовки разделов
   ============================================================ */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-7); align-items: center;
  margin-bottom: var(--sp-8); padding: var(--sp-9) var(--sp-8);
  border-radius: var(--r-xl); background: var(--grad-hero); color: #fff;
  box-shadow: 0 30px 60px -30px rgba(17, 77, 44, 0.55);
}
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.hero::before { width: 520px; height: 520px; right: -140px; top: -220px; background: radial-gradient(circle, rgba(124, 207, 163, 0.45), transparent 65%); }
.hero::after { width: 380px; height: 380px; left: -160px; bottom: -220px; background: radial-gradient(circle, rgba(170, 224, 195, 0.25), transparent 65%); }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2); width: fit-content;
  padding: 6px var(--sp-3) 6px 6px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--green-50);
}
.hero-eyebrow .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.95); color: var(--brand-strong); }
.hero-eyebrow .dot .icon { width: 14px; height: 14px; }
.hero h1 { color: #fff; font-size: 52px; line-height: 1.04; letter-spacing: -0.035em; margin-top: var(--sp-5); }
.hero h1 em { font-style: normal; color: var(--green-200); }
.hero-lead { margin-top: var(--sp-4); font-size: var(--text-lg); color: rgba(255, 255, 255, 0.82); max-width: 520px; }
.hero-search { margin-top: var(--sp-6); max-width: 520px; display: flex; gap: var(--sp-2); padding: 6px; border-radius: var(--r-full); background: #fff; box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.35); }
.hero-search .search { flex: 1; }
.hero-search .input { border: 0; box-shadow: none; background: transparent; min-height: 48px; }
.hero-search .input:focus { box-shadow: none; }
.hero-search .btn { border-radius: var(--r-full); min-height: 48px; }
.hero-points { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-6); }
.hero-points li { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.85); }
.hero-points .icon { width: 18px; height: 18px; color: var(--green-200); }

.hero-visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.hero-tile {
  border-radius: var(--r-lg); padding: var(--sp-5); min-height: 132px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-3);
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background var(--transition), transform var(--transition);
}
.hero-tile:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-3px); }
.hero-tile .icon { width: 26px; height: 26px; color: var(--green-200); }
.hero-tile-value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1; letter-spacing: -0.03em; color: #fff; }
.hero-tile-label { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.75); }
.hero-tile-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; background: #fff; color: var(--text-primary); }
.hero-tile-wide:hover { background: #fff; }
.hero-tile-wide .icon { color: var(--brand); }
.hero-tile-wide .hero-tile-label { color: var(--text-secondary); }
.hero-tile-wide strong { display: block; font-size: var(--text-base); }

.page-head { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.page-head .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--brand-strong); }
.page-head .eyebrow .icon { width: 16px; height: 16px; }

@media (max-width: 1023px) {
  .hero { grid-template-columns: 1fr; padding: var(--sp-8) var(--sp-6); }
  .hero-visual { grid-template-columns: repeat(3, 1fr); }
  .hero-tile-wide { grid-column: auto; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
  .hero { margin-inline: calc(var(--sp-2) * -1); padding: var(--sp-6) var(--sp-5); gap: var(--sp-5); margin-bottom: var(--sp-6); }
  .hero h1 { font-size: 32px; margin-top: var(--sp-4); }
  .hero-lead { font-size: var(--text-base); }
  .hero-search { display: none; }
  .hero-visual { grid-template-columns: 1fr 1fr; }
  .hero-tile { min-height: 0; padding: var(--sp-4); }
  .hero-tile-value { font-size: var(--text-2xl); }
  .hero-tile-wide { display: none; }
}

/* Обновлённые мелочи */
.lock-note { border: 1px dashed var(--border-strong); background: var(--surface-warm); }
.lock-note .icon { color: var(--brand); }
.role-option { background: var(--surface); }
.role-option:has(input:checked) { box-shadow: 0 0 0 4px var(--focus-ring); }
.upload-add { background: var(--surface-warm); }
.contact-bar .contact-btn { flex: 1 1 auto; justify-content: center; }
@media (min-width: 1024px) {
  #req-grid.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  #req-grid.req-grid > .empty { grid-column: 1 / -1; }
}
.req-grid > .card-link > .card { height: 100%; }

/* Мобильный каталог: две колонки карточек */
@media (max-width: 767px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .product-grid .product-card .body { padding: var(--sp-3); gap: 6px; }
  .product-grid .product-card .name { font-size: var(--text-sm); }
  .product-grid .product-card .price { font-size: var(--text-lg); }
  .product-grid .product-card .price span { font-size: var(--text-xs); }
  .product-grid .product-card .wholesale { font-size: 11px; white-space: normal; }
  .product-grid .product-card .meta { font-size: var(--text-xs); padding-top: var(--sp-2); }
  .product-card .thumb-tags { left: var(--sp-2); top: var(--sp-2); gap: 4px; }
  .product-card .thumb-tags .tag { font-size: 10px; padding: 2px 6px; }
  .card-link:hover .card { transform: none; }
}
@media (max-width: 767px) {
  .request-card { padding: var(--sp-4) var(--sp-5); }
  .request-card .spec { gap: 6px; }
  .request-card .spec .item { padding: 2px var(--sp-2); font-size: var(--text-xs); }
}
.farmer-about { grid-template-columns: 1.2fr 1fr; }
.farmer-contact .contact-btn { padding: 0 var(--sp-3); }
@media (max-width: 767px) { .farmer-about { grid-template-columns: 1fr; } }