/* =========================================================
   Каталог — списки категорий, плитки товаров, цены.
   Использует токены и шрифты из styles.css.
   ========================================================= */
.c-page{padding-top:24px;padding-bottom:72px;}
.c-lead{color:var(--muted);max-width:640px;margin:-22px 0 10px;}
.c-count{
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;color:var(--muted);margin-bottom:28px;
}

/* ---------- хлебные крошки ---------- */
.c-crumbs{
  font-family:var(--font-mono);font-size:13px;color:var(--muted);
  margin-bottom:22px;line-height:1.7;
}
.c-crumbs a{color:var(--muted);transition:color .2s;}
.c-crumbs a:hover{color:var(--gold);}
.c-crumbs span:not(.c-crumbs__sep){color:var(--cream);}
.c-crumbs__sep{opacity:.4;margin:0 2px;}

/* ---------- плитки категорий ---------- */
.c-tiles{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:40px;}
@media(min-width:560px){.c-tiles{grid-template-columns:1fr 1fr;}}
@media(min-width:960px){.c-tiles{grid-template-columns:repeat(3,1fr);}}
.c-tile{
  display:flex;flex-direction:column;
  background:var(--graphite);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:border-color .2s ease, transform .2s ease;
}
.c-tile:hover{border-color:var(--gold);}
.c-tile__img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ink);}
.c-tile__img img{width:100%;height:100%;object-fit:cover;display:block;}
.c-tile__name{
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  padding:16px 18px 4px;line-height:1.2;
}
.c-tile__meta{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding:0 18px 18px;
}

/* ---------- плитки товаров ---------- */
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:40px;}
@media(min-width:720px){.c-grid{grid-template-columns:repeat(3,1fr);gap:16px;}}
@media(min-width:1040px){.c-grid{grid-template-columns:repeat(4,1fr);}}
.c-card{
  display:flex;flex-direction:column;
  background:var(--graphite);border:1px solid var(--line);border-radius:0;
  overflow:hidden;transition:border-color .2s ease, transform .2s ease;
}
.c-card:hover{border-color:var(--gold);}
.c-card__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ink);}
.c-card__img img{width:100%;height:100%;object-fit:cover;display:block;}
.c-card__name{
  font-size:14px;line-height:1.35;padding:12px 12px 6px;flex:1;
  /* длинные китайские названия обрезаем до трёх строк, чтобы плитки не разъезжались */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.c-card__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;padding:0 12px 12px;}
.c-card__price{font-family:var(--font-mono);font-weight:700;font-size:1.3rem;color:var(--amber);}
.c-card__unit{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.c-card__rub{font-family:var(--font-mono);font-size:12px;color:var(--muted);}
.c-card__min{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  color:var(--muted);width:100%;
}

/* ---------- цена на карточке товара ---------- */
.c-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 18px;}
.c-price__cny{font-family:var(--font-mono);font-weight:700;font-size:clamp(2rem,7vw,2.8rem);line-height:1;color:var(--amber);}
.c-price__unit{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.c-price__rub{font-family:var(--font-mono);font-size:15px;color:var(--muted);}
.c-price--ask{font-family:var(--font-mono);font-size:15px;color:var(--muted);}

.c-note{
  font-size:13px;line-height:1.5;color:var(--muted);
  background:rgba(224,164,74,.08);border:1px solid rgba(224,164,74,.24);
  border-radius:0;padding:12px 14px;margin:-6px 0 22px;
}
.c-note b{color:var(--cream);}
.c-note--wide{max-width:720px;}

/* ---------- характеристики ---------- */
.c-spec{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:0;overflow:hidden;margin:0 0 26px;
}
.c-spec__row{display:flex;justify-content:space-between;gap:16px;background:var(--graphite);padding:12px 16px;}
.c-spec dt{color:var(--muted);font-size:14px;}
.c-spec dd{margin:0;font-weight:500;text-align:right;}

/* ---------- прайс для скачивания ----------
   Имя .c-pricebox, а не .c-price: .c-price — это цена на карточке товара,
   и одноимённый блок перебивал её рамкой и отступами.
   Прямые углы, золото только линией слева (v2.0), кнопка — основная янтарная. */
.c-pricebox{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:var(--graphite);border:1px solid var(--line);border-left:2px solid var(--gold);
  padding:24px 28px;margin:0 0 8px;
}
.c-pricebox__kicker{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px;
}
.c-pricebox__title{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.25;margin-bottom:6px;}
.c-pricebox__desc{color:var(--muted);font-size:14px;line-height:1.5;max-width:520px;}
.c-pricebox__meta{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:8px;letter-spacing:.02em;}
.c-pricebox__btn{flex:0 0 auto;min-width:240px;}
.c-pricebox__btns{display:flex;flex-direction:column;gap:10px;flex:0 0 auto;}
.c-pricebox__btns .c-pricebox__btn{width:100%;}
@media(max-width:700px){
  .c-pricebox{flex-direction:column;align-items:stretch;padding:20px;}
  .c-pricebox__btn{min-width:0;width:100%;}
  .c-pricebox__btns{width:100%;}
}

/* ---------- призыв к действию ---------- */
.c-cta{margin:30px 0 34px;}
.c-cta__label{font-weight:500;margin-bottom:12px;}

/* ---------- подвал каталога ---------- */
.c-foot{
  border-top:1px solid var(--line);padding:28px 0 40px;margin-top:20px;
  font-size:13px;color:var(--muted);
}
.c-foot p{margin-bottom:6px;}
.c-foot a{color:var(--gold);}
.c-foot a:hover{text-decoration:underline;}


/* На телефоне плитки собираются в «стопку»: каждая прилипает под шапкой,
   следующая наезжает сверху — тот же приём, что у блока «Как проходит заказ».
   display:block обязателен: в grid каждый элемент липнет внутри своей
   ячейки, и наложения не получается. */
@media(max-width:600px){
  .c-tiles{display:block;margin-bottom:28px;}
  .c-tile{
    position:sticky;top:74px;margin-bottom:14px;
    will-change:transform;background:var(--graphite);
  }
  .c-tile:last-child{margin-bottom:0;}
}

/* =========================================================
   Печать категории (брендбук v2.0, раздел 08)
   Иероглиф на цветном квадрате, радиус 6 px — цитата печати 茶
   в логотипе. Цвет категории живёт только здесь: он не заливает
   блок и не уходит в фон.
   Место — правый нижний угол карточки: там пусто, и печать читается
   на ровном фоне, а не поверх пёстрой фотографии.
   ========================================================= */
.seal{
  position:absolute;right:14px;bottom:14px;z-index:2;
  /* Заголовок категории набран градиентом (-webkit-text-fill-color:transparent),
     и печать внутри него наследовала прозрачный текст — иероглиф пропадал.
     Возвращаем заливку букве явно. */
  -webkit-text-fill-color:#F4EEE2;
  background-clip:border-box;-webkit-background-clip:border-box;
  width:34px;height:34px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-han);font-weight:700;font-size:19px;line-height:1;
  color:#F4EEE2;
  /* тонкая обводка: печать светлой категории (белый чай) не растворяется */
  box-shadow:inset 0 0 0 1px rgba(20,22,15,.35);
}
.c-tile{position:relative;}

/* Внутри категории печать не нужна: у всех позиций она одинаковая
   и превращается из признака в шум. Остаётся там, где различает —
   на плитках категорий и на странице товара. */

/* На странице товара печать сидит на углу галереи */
.seal--float{position:absolute;top:12px;right:12px;bottom:auto;width:44px;height:44px;font-size:24px;}
.p-gallery{position:relative;}

@media(max-width:600px){
  .seal{width:30px;height:30px;font-size:17px;right:12px;bottom:12px;}
  .seal--float{width:38px;height:38px;font-size:21px;top:10px;right:10px;}
}

/* Печать рядом с заголовком категории и над названием товара —
   не поверх фотографии: на пёстром кадре иероглиф терялся. */
.seal--inline{
  position:static;display:inline-flex;vertical-align:middle;
  width:30px;height:30px;font-size:17px;margin-left:12px;
  flex:0 0 auto;
}
.c-cat-title{display:flex;align-items:center;flex-wrap:wrap;gap:0;}

/* Строка категории над названием товара */
.p-cat{
  display:flex;align-items:center;gap:10px;
  margin:0 0 10px;
}
.p-cat .seal--inline{margin-left:0;}
.p-cat span{
  font-family:var(--font-mono);font-weight:500;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

/* Категория на карточке в списке: видно, что за чай, не открывая карточку */
.c-card__cat{
  display:flex;align-items:center;gap:8px;
  padding:12px 12px 0;
}
.c-card__cat > span:last-child{
  font-family:var(--font-mono);font-weight:500;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.seal--xs{width:22px;height:22px;font-size:13px;margin-left:0;}