/* Акции и блог концепции E (e-sale.html, e-blog.html). Токены и общие блоки — в e.css. */

/* ===== Общее: панель фильтров под заголовком ===== */
.cp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 22px; }
.cp-bar .chips { min-width: 0; }
.cp-year { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.cp-year .sel { width: auto; min-width: 140px; height: 36px; font-size: 13.5px; }
.cp-date { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.cp-date i { color: var(--yolk); font-size: 14px; }
.cp-left { color: var(--ink); font-weight: 500; }
.cp-sec { padding-top: 56px; }
.cp-sec .sh h2 { display: flex; align-items: baseline; gap: 10px; }
.cp-sec .sh h2 small { font: 400 14px/1 var(--f-text); color: var(--muted); }
@media (max-width: 767px) {
  .cp-bar .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); flex: 1 0 100%; }
  .cp-sec { padding-top: 40px; }
}

/* ===== Акции: сетка карточек ===== */
.sa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.sa-grid > .empty { grid-column: 1 / -1; }
.sa-card { display: grid; grid-template-rows: auto 1fr; gap: 16px; align-content: start; color: var(--text); }
.sa-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); background: var(--soft); }
.sa-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease, filter .3s; }
.sa-img .lb { position: absolute; top: 14px; left: 14px; }
@media (hover: hover) and (pointer: fine) { .sa-card:hover .sa-img img { transform: scale(1.03); } .sa-card:hover b { color: var(--olive); } }
.sa-txt { display: grid; gap: 10px; align-content: start; }
.sa-txt b { font: 400 19px/1.3 var(--f-disp); color: var(--ink); letter-spacing: -.005em; transition: color .2s; }
.sa-lead { font-size: 14px; line-height: 1.55; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sa-card--big { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: none; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sa-card--big .sa-img { aspect-ratio: auto; min-height: 420px; height: 100%; border-radius: 0; }
.sa-card--big .sa-txt { align-content: center; gap: 16px; padding: 40px clamp(28px, 3.4vw, 56px); }
.sa-card--big .sa-txt b { font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; line-height: 1.2; }
.sa-card--big .sa-lead { font-size: 15.5px; -webkit-line-clamp: 5; }
.sa-go { justify-self: start; margin-top: 8px; }
.sa-card.is-over .sa-img img { filter: grayscale(1); opacity: .75; }
.sa-card.is-over b { color: var(--muted); }
.lb--over { background: var(--muted); }
@media (max-width: 1023px) {
  .sa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; }
  .sa-card--big { grid-template-columns: 1fr; }
  .sa-card--big .sa-img { min-height: 0; aspect-ratio: 16 / 9; }
  .sa-card--big .sa-txt { padding: 24px 24px 28px; }
}
@media (max-width: 767px) {
  .sa-grid { grid-template-columns: 1fr; gap: 28px; }
  .sa-card--big .sa-txt { padding: 20px 18px 22px; gap: 12px; }
  .sa-txt b { font-size: 18px; }
}

/* ===== Подписка на акции ===== */
.sa-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 48px; align-items: center; padding: 36px clamp(22px, 3.4vw, 48px); background: var(--soft); border-radius: var(--r); }
.sa-sub-h { display: flex; gap: 20px; align-items: flex-start; }
.sa-sub-h > i { flex: none; font-size: 44px; color: var(--ink); }
.sa-sub-h h2 { margin-bottom: 8px; }
.sa-sub-h p { margin: 0; color: var(--muted); font-size: 14px; }
.sa-sub-f { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 10px; align-items: end; }
.sa-sub-f .field > span { font-size: 12.5px; }
.sa-sub-f .chk { grid-column: 1 / -1; font-size: 13px; flex-wrap: wrap; }
.sa-sub-f .chk > span { flex: 1; min-width: 0; }
.sa-sub-f .chk .err { flex: 1 0 100%; padding-left: 28px; }
.sa-sub-ok { display: flex; gap: 14px; align-items: flex-start; }
.sa-sub-ok:focus { outline: none; }
.sa-sub-ok > i { font-size: 32px; color: var(--ok); flex: none; }
.sa-sub-ok b { display: block; font: 500 18px/1.3 var(--f-disp); color: var(--ink); margin-bottom: 4px; }
.sa-sub-ok p { margin: 0; font-size: 14px; }
@media (max-width: 1023px) { .sa-sub { grid-template-columns: 1fr; } }
@media (max-width: 479px) { .sa-sub-f { grid-template-columns: 1fr; } .sa-sub-f .btn { width: 100%; } .sa-sub-h > i { display: none; } }

/* ===== Страница акции ===== */
.sa-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sa-hero-img { margin: 0; min-height: 440px; background: var(--soft); }
.sa-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.sa-hero.is-over .sa-hero-img img { filter: grayscale(1); opacity: .8; }
.sa-hero-i { display: grid; align-content: center; gap: 18px; padding: 36px clamp(24px, 3vw, 48px); }
.sa-period { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--ink); }
.sa-period i { font-size: 18px; color: var(--muted); }
.sa-hero-lead { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); }
.sa-timer { display: grid; gap: 10px; padding: 16px 18px; background: var(--soft); border-radius: var(--r); }
.sa-timer-t { font: 600 11px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sa-timer-n { display: flex; gap: 8px; }
.sa-timer-n > span { display: grid; justify-items: center; gap: 4px; min-width: 64px; padding: 10px 8px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); }
.sa-timer-n b { font: 500 26px/1 var(--f-disp); color: var(--ink); font-variant-numeric: tabular-nums; }
.sa-timer-n small { font-size: 11.5px; color: var(--muted); }
.sa-ended { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: var(--soft); border-radius: var(--r); font-size: 14px; color: var(--ink); }
.sa-ended i { flex: none; font-size: 20px; color: var(--muted); }
.sa-ended--on i { color: var(--olive); }
.sa-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14px; color: var(--text); }
.sa-note i { flex: none; font-size: 20px; color: var(--olive); }
.sa-note b { color: var(--ink); white-space: nowrap; }
.sa-hero-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sa-terms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 16px 48px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.sa-terms ol { list-style: none; counter-reset: t; margin: 0; padding: 0; display: grid; gap: 0; }
.sa-terms li { counter-increment: t; display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--text); max-width: 72ch; }
.sa-terms li:first-child { padding-top: 0; }
.sa-terms li::before { content: counter(t, decimal-leading-zero); font: 500 14px/1.6 var(--f-text); color: var(--muted); font-variant-numeric: tabular-nums; }
.sa-grid--other .sa-card b { font-size: 17px; }
@media (max-width: 1023px) {
  .sa-hero { grid-template-columns: 1fr; }
  .sa-hero-img { min-height: 0; aspect-ratio: 16 / 9; }
  .sa-hero-i { padding: 24px 24px 28px; }
  .sa-terms { grid-template-columns: 1fr; margin-top: 36px; }
}
@media (max-width: 767px) {
  .sa-hero { border: 0; border-radius: 0; margin: 0 calc(var(--gut) * -1); }
  .sa-hero-i { padding: 20px var(--gut) 4px; gap: 14px; }
  .sa-hero-acts .btn { flex: 1 1 auto; }
  .sa-timer-n > span { min-width: 0; flex: 1; }
  .sa-terms li { grid-template-columns: 30px 1fr; }
  .sa-grid--other { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); gap: 14px; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); scrollbar-width: none; }
  .sa-grid--other .sa-card { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ===== Блог: список ===== */
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; transition: opacity .15s; }
.bl-grid.is-loading { opacity: .45; }
.bl-grid > .empty { grid-column: 1 / -1; }
.bl-post .post-txt b { transition: color .2s; }
@media (hover: hover) { .bl-post:hover .post-txt b { color: var(--olive); } }
.bl-grid .post--big { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.bl-grid .post--big .post-img { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
.bl-grid .post--big .post-img img { object-position: 50% 72%; }
.bl-grid .post--big .post-txt { grid-template-rows: none; align-content: center; gap: 14px; padding: 40px clamp(24px, 3.4vw, 52px); }
.bl-grid .post--big .post-txt b { font-size: clamp(22px, 2.1vw, 30px); font-weight: 300; line-height: 1.22; }
.bl-lead { font-size: 15px; line-height: 1.6; color: var(--text); }
@media (max-width: 1023px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .bl-grid .post--big { grid-template-columns: 1fr; }
  .bl-grid .post--big .post-img { min-height: 0; aspect-ratio: 16 / 9; }
  .bl-grid .post--big .post-txt { padding: 22px 22px 24px; }
}
@media (max-width: 767px) {
  .bl-grid { grid-template-columns: 1fr; }
  .cp-year { flex: 1 0 100%; }
  .cp-year .sel { flex: 1; }
}

/* ===== Блог: статья ===== */
.bl-head { max-width: calc(var(--wrap) + var(--gut) * 2); }
.bl-head h1 { max-width: 30ch; font-size: clamp(28px, 3vw, 42px); line-height: 1.15; }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-bottom: 16px; font-size: 13px; color: var(--muted); }
.bl-tag { font: 600 10.5px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 6px 9px; border: 1px solid var(--line-2); border-radius: var(--r); transition: border-color .2s; }
.bl-tag:hover { border-color: var(--ink); }
.bl-cover { margin: 0; aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--r); background: var(--soft); }
.bl-cover img { width: 100%; height: 100%; object-fit: cover; }
.bl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; justify-content: space-between; margin-top: 44px; }
.bl-art { max-width: 720px; font-size: 16.5px; line-height: 1.75; color: var(--text); }
.bl-art-lead { font-size: 19px; line-height: 1.6; color: var(--ink); font-weight: 300; margin-bottom: 1.4em; }
.bl-art h2 { margin: 1.9em 0 .6em; font-size: clamp(21px, 1.9vw, 25px); scroll-margin-top: 90px; }
.bl-art p { margin: 0 0 1.1em; }
.bl-art a:not(.bl-sh) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.bl-art a:not(.bl-sh):hover { text-decoration-color: currentColor; }
.bl-quote { margin: 2em 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--yolk); }
.bl-quote p { margin: 0 0 10px; font: 300 clamp(20px, 1.8vw, 24px)/1.4 var(--f-disp); color: var(--ink); }
.bl-quote cite { font-style: normal; font-size: 13px; color: var(--muted); }
.bl-cta { margin: 1.6em 0; }
.bl-aside-in { position: sticky; top: 96px; display: grid; gap: 32px; }
.bl-aside-t, .bl-share-t { margin: 0 0 12px; font: 600 11px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bl-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.bl-toc a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--text); transition: color .15s, border-color .15s; }
.bl-toc a:hover { color: var(--ink); }
.bl-toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--ink); }
.bl-share-t { display: block; }
.bl-share-b { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-sh { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); font-size: 13.5px; color: var(--ink); white-space: nowrap; transition: border-color .2s; }
.bl-sh i { font-size: 18px; }
.bl-sh:hover { border-color: var(--ink); }
.bl-share--side .bl-share-b { display: grid; justify-items: start; }
.bl-share--foot { display: none; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.bl-grid--more .post-txt b { font-size: 15.5px; }
@media (max-width: 1023px) {
  .bl-layout { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .bl-art { max-width: none; }
  .bl-aside { display: none; }
  .bl-share--foot { display: block; }
}
@media (max-width: 767px) {
  .bl-cover { aspect-ratio: 4 / 3; margin: 0 calc(var(--gut) * -1); border-radius: 0; }
  .bl-art { font-size: 16px; line-height: 1.7; }
  .bl-art-lead { font-size: 17.5px; }
  .bl-quote { padding-left: 18px; }
  .bl-grid--more { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); gap: 14px; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); scrollbar-width: none; }
  .bl-grid--more .post { flex: 0 0 78%; scroll-snap-align: start; }
}
.bl-quote .bl-quote-ru { font: 400 15px/1.5 var(--f-text); color: var(--text); }

/* Ссылка в строке фильтров: на телефоне стоит отдельной строкой, нужна высота под палец */
.cp-bar .more { display: inline-flex; align-items: center; min-height: 44px; }

/* У .btn свой display, поэтому атрибут hidden без этого правила кнопку не прячет */
.btn[hidden] { display: none; }