/* =========================================================
   Phytarion — публичный каталог на данных из базы
   Дополняет styles.css и product.css
   ========================================================= */

.catalog-page{background:var(--paper)}
.cat-main,
.page-main{padding:clamp(116px,12vw,140px) 0 0}
.page-main--hero{padding-top:0}   /* первый экран уходит под шапку сам */

.cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;
  padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:clamp(28px,4vw,46px)}
.cat-head__text{margin-top:14px;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.cat-head__count{font-size:14px;color:var(--ink-3)}
.cat-search{display:flex;gap:8px;align-items:center}
.cat-search input{min-width:260px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-pill);
  font:inherit;font-size:14.5px;background:#fff;outline:none;transition:border-color .25s}
.cat-search input::placeholder,.varieties__tools input::placeholder{color:rgba(18,35,26,.66)}
.cat-search input:focus{border-color:var(--moss)}

.cat-section{margin-bottom:clamp(44px,6vw,80px)}
.cat-section__more{margin-top:clamp(26px,3vw,36px)}
.cat-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:18px}
.cat-section__head h2{font-size:clamp(22px,2.6vw,34px);letter-spacing:-.03em}
.cat-section__head a:hover{color:var(--moss)}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2);transition:all .25s var(--ease)}
.chip:hover{border-color:var(--forest-900);color:var(--ink);transform:translateY(-1px)}

/* значок корзины в шапке */
.basket{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:rgba(247,242,228,.14);color:var(--ivory);transition:background .25s}
.basket:hover{background:rgba(247,242,228,.24)}
.basket svg{width:21px;height:21px}
.basket__count{position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--lime);color:var(--forest-900);
  font-size:11.5px;font-weight:600;display:grid;place-items:center}

/* кнопка «в список» на карточке каталога */
.card__media{position:relative}
.fav{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--forest-900);display:grid;place-items:center;
  cursor:pointer;border:0;transition:transform .25s var(--ease),background .25s}
.fav svg{width:19px;height:19px}
.fav:hover{transform:scale(1.08)}
.fav.is-active{background:var(--lime)}
.fav.is-busy{opacity:.5;pointer-events:none}

.fav-btn.is-active{background:var(--lime);border-color:var(--lime)}
.fav-btn svg{flex:none}

/* ─────────── таблица сортов ─────────── */
.varieties{padding:clamp(40px,5vw,70px) 0 0;border-top:1px solid var(--line);margin-top:clamp(40px,5vw,70px)}
.varieties__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.varieties__tools input{padding:11px 16px;border:1px solid var(--line);border-radius:var(--r-pill);
  font:inherit;font-size:14px;min-width:240px;background:#fff;outline:none}
.varieties__tools input:focus{border-color:var(--moss)}

.segtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.segtab{padding:10px 18px;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2);background:none;cursor:pointer;transition:all .25s var(--ease)}
.segtab:hover{border-color:var(--ink-3);color:var(--ink)}
.segtab.is-active{background:var(--forest-900);border-color:var(--forest-900);color:var(--ivory)}

.segment{margin-bottom:clamp(30px,4vw,52px)}
.segment.is-hidden{display:none}
.segment__title{font-size:clamp(18px,2vw,24px);letter-spacing:-.025em;margin-bottom:16px;
  padding-bottom:10px;border-bottom:2px solid var(--forest-900);display:inline-block}

.vgroup{margin-bottom:26px}
.vgroup.is-hidden{display:none}
.vgroup__title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;
  color:var(--ink-2);margin-bottom:10px}
.vgroup__title span{font-size:12px;font-weight:500;color:var(--ink-3);
  background:var(--ivory-2);padding:2px 9px;border-radius:999px}

.vtable{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--ivory)}
.vtable__head,.vrow{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(4, minmax(0,1fr)) auto;
  gap:12px;align-items:center;padding:11px 18px}
.vtable__head{background:var(--ivory-2);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.vtable__head span:not(:first-child){text-align:right}
.vrow{border-top:1px solid var(--line);font-size:14px;transition:background .2s}
.vrow:hover{background:#fff}
.vrow.is-hidden{display:none}
.vrow__name b{font-weight:500;display:block}
.vrow__name i{font-style:italic;font-size:12.5px;color:var(--ink-3)}
.vrow__price{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.vrow__action{text-align:right}
.vrow__btn{padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:#fff;font:inherit;font-size:12.5px;cursor:pointer;color:var(--moss);
  transition:all .25s var(--ease)}
.vrow__btn:hover{background:var(--forest-900);border-color:var(--forest-900);color:var(--ivory)}

/* ─────────── поиск ─────────── */
.search-list{display:flex;flex-direction:column;gap:2px;margin-bottom:60px}
.search-list li{display:flex;align-items:baseline;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line)}
.search-list a{font-weight:500}
.search-list a:hover{color:var(--moss)}

/* ─────────── избранное ─────────── */
.fav-layout{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(20px,3vw,40px);
  align-items:start;padding-bottom:clamp(50px,7vw,90px)}
.fav-list{display:flex;flex-direction:column;gap:10px}
.fav-item{display:grid;grid-template-columns:76px 1fr auto auto;gap:16px;align-items:center;
  padding:12px;background:var(--ivory);border:1px solid var(--line);border-radius:var(--r-lg)}
.fav-item img{width:76px;height:62px;object-fit:cover;border-radius:12px}
.fav-item h3{font-size:17px;letter-spacing:-.02em;margin-bottom:3px}
.fav-item h3 a:hover{color:var(--moss)}
.fav-item__price{font-size:14.5px;font-weight:500;white-space:nowrap}
.fav-item__remove{width:32px;height:32px;border-radius:50%;border:0;background:var(--ivory-2);
  color:var(--ink-2);font-size:19px;line-height:1;cursor:pointer;transition:background .25s,color .25s}
.fav-item__remove:hover{background:var(--forest-900);color:var(--ivory)}

.fav-empty{padding:44px 24px;text-align:center;background:var(--ivory);border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:10px;align-items:center}

.fav-form{position:sticky;top:110px;background:var(--ivory);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:clamp(20px,2.4vw,30px)}
.fav-form h2{font-size:21px;letter-spacing:-.025em;margin-bottom:8px}
.fav-form .field{margin-top:14px}
.fav-form .field span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fav-form .field input{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font:inherit;font-size:14.5px;outline:none}
.fav-form .field input:focus{border-color:var(--moss)}
.fav-form .field input::placeholder{color:rgba(18,35,26,.66)}
.fav-form .btn{margin-top:18px}

/* ─────────── адаптив ─────────── */
@media (max-width:1000px){
  .fav-layout{grid-template-columns:1fr}
  .fav-form{position:static}
}
@media (max-width:760px){
  .vtable__head{display:none}
  .vrow{grid-template-columns:1fr auto;gap:6px 12px;padding:14px}
  .vrow__name{grid-column:1/-1}
  .vrow__price{text-align:left;font-size:13px;color:var(--ink-2)}
  .vrow__price::before{content:attr(data-label) " ";color:var(--ink-3)}
  .vrow__action{grid-column:1/-1;text-align:left;margin-top:6px}
  .cat-search input{min-width:0;width:100%}
  .cat-search{width:100%}
  .fav-item{grid-template-columns:60px 1fr auto;gap:12px}
  .fav-item img{width:60px;height:52px}
  .fav-item__price{grid-column:2/3}
}

/* на внутренних страницах под шапкой нет баннера — делаем её непрозрачной,
   отступ сверху остаётся таким же, как на главной */
.catalog-page .nav__inner{background:rgba(11,33,22,.95)}