/* ============================================================================
   MADTUN — акция «Чёрная пятница», концепция В «Гаражный ценник» (владелец 28.10.2026).
   Источник — _prototype/black-friday-b.html (c71222ec). Сигнальная лента, бумажные бирки на
   верёвке, зачёркивание маркером, штамп, перекидное табло.

   Грузится из header.php, только пока акция до старта или идёт (MadtunPromo::active()) и на её
   странице (MADTUN_PROMO_PAGE). Вечные части цены (старая цена, выгода) — в shop.css.

   🔴 Всё движение — только при prefers-reduced-motion: no-preference. Скрытое «до появления»
   (штрих маркером, штамп) — только при живом JS: html.mc-bf-armed и .is-in у плитки ставит promo.js.
   НЕ [data-io] из shop.js: тот прячет и выдвигает при прокрутке ВСЮ плитку — в листинге каталога
   плитки акции «выплывали» бы среди неподвижных, а на снимке без прокрутки их не было (TEST 28.10).
   ============================================================================ */
:root {
    --bf-paper: #efe8da;
    --bf-ink:   #16161a;
    --bf-stripes: repeating-linear-gradient(-45deg, var(--red) 0 12px, #0a0a0c 12px 24px);
}

/* --- Сквозная полоса над шапкой: кусок сигнальной ленты (не липкая) --- */
.mc-bf-bar { position: relative; background: var(--bf-stripes); background-size: 34px 34px; padding-block: 4px; }
.mc-bf-off .mc-bf-bar { display: none; }   /* закрыта крестиком — класс ставит строка перед полосой */
.mc-bf-bar__in {
    display: flex; align-items: center; gap: 12px; min-height: 36px;
    background: #0a0a0c;
    /* плашка внутри ленты; края ленты видны сверху, снизу и по бокам */
    width: calc(100% - 2 * var(--pad)); padding-inline: 14px;
}
.mc-bf-bar__go {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 12px; min-height: 36px;
    font-family: var(--display); font-weight: 600; text-transform: uppercase;
    font-size: 13px; letter-spacing: .08em; color: var(--muted);
    white-space: nowrap; overflow: hidden;
}
.mc-bf-bar__name { color: #fff; }
.mc-bf-bar__t {
    font-family: var(--mono); font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums;
    color: var(--bf-ink); background: var(--bf-paper); padding: 2px 7px; border-radius: 3px;
}
.mc-bf-bar__more { margin-left: auto; color: var(--red-bright); }
.mc-bf-bar__x {
    position: relative; flex: none;
    width: 40px; height: 36px; margin-right: -12px;
    display: grid; place-items: center; color: var(--faint);
    background: none; border: 0; cursor: pointer;
}
.mc-bf-bar__x::before { content: ''; position: absolute; inset: -6px -4px; }   /* зона касания 48 */
.mc-bf-bar__x:hover { color: #fff; }
@media (max-width: 560px) {
    .mc-bf-bar__in { width: calc(100% - 16px); padding-inline: 10px; }
    .mc-bf-bar__lbl, .mc-bf-bar__more span { display: none; }
    .mc-bf-bar__go { gap: 10px; font-size: 12px; }
}

/* --- Лента во всю ширину с бегущей надписью (hero страницы акции; с главной убрана — владелец 28.10) --- */
.mc-bf-tape {
    position: relative; z-index: 1;
    width: 120vw; margin-left: -10vw;
    overflow: hidden;
    background: #0a0a0c;
    border-block: 8px solid transparent;
    border-image: repeating-linear-gradient(90deg, var(--red) 0 14px, #0a0a0c 14px 28px) 8;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9);
}
.mc-bf-tape__row { display: flex; width: max-content; }
.mc-bf-tape__i {
    display: inline-flex; align-items: center; gap: 18px; padding: 8px 18px 8px 0;
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
    font-size: 18px; line-height: 1.2; letter-spacing: .1em; color: #fff; white-space: nowrap;
}
.mc-bf-tape__i::after { content: ''; width: 9px; height: 9px; background: var(--red); transform: rotate(45deg); flex: none; }
.mc-bf-tape--a { transform: rotate(-3deg); z-index: 2; }
/* вторая лента — ПОД первой и в тени: на перекрестье надписи не слипаются */
.mc-bf-tape--b { transform: rotate(2.4deg); margin-top: -34px; z-index: 1; filter: brightness(.5); }
.mc-bf-tapes { position: relative; overflow: hidden; padding-block: 26px 30px; }

/* Карточка товара: короткая лента над ценой — в ширину блока покупки, без поворота и бега */
.mc-bf-tape--buy {
    display: flex; flex-wrap: wrap; width: auto; margin: 4px 0 14px;
    border-block-width: 5px; border-image-slice: 5;
    box-shadow: none;
}
.mc-bf-tape--buy .mc-bf-tape__i { font-size: 13px; padding: 5px 0 5px 12px; gap: 12px; }
.mc-bf-tape--buy .mc-bf-tape__i:last-child { color: var(--bf-paper); }
.mc-bf-tape--buy .mc-bf-tape__i:last-child::after { display: none; }

/* --- Заголовок: «ЧЁРНАЯ» + «ПЯТНИЦА» на красной наклейке --- */
.mc-bf-h, .mc-hero--bf h1 {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;                       /* правило №6: H1–H3 ≥ 1.1 */
    letter-spacing: .5px;
    font-size: clamp(50px, 12vw, 140px);
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    margin: 12px 0 0;
    text-shadow: none;
}
.mc-bf-h__sticker {
    display: inline-block;
    padding: 0 .12em;
    color: var(--bf-ink);
    background: var(--red);
    transform: rotate(-2.5deg);
    box-shadow: 0 .12em .3em -.12em rgba(0, 0, 0, .8);
    margin-top: .04em;
}
.mc-bf-h--sm { font-size: clamp(44px, 11vw, 116px); }

/* --- Перекидное табло: каждая цифра — две половины, верхняя падает вниз (строит promo.js) --- */
.mc-bf-timer {
    display: inline-flex; align-items: flex-start; gap: clamp(6px, 1.4vw, 12px);
    padding: 12px 14px 10px; border-radius: 12px;
    background: #0d0d10; border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 4px #121216, 0 18px 40px -20px rgba(0, 0, 0, .9);
    font-family: var(--mono); font-size: 14px; color: var(--bf-paper);   /* текст без JS: «до 22 ноября» */
}
.mc-bf-timer__g { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.mc-bf-timer__n { display: flex; gap: 3px; }
.mc-bf-timer small {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--faint);
}
.mc-bf-timer__sep {
    font-family: var(--display); font-weight: 600; color: var(--bf-paper);
    font-size: clamp(24px, 4.6vw, 40px); line-height: 1.5; opacity: .5;
}
.mc-bf-d {
    --h: 1.32em;
    position: relative;
    width: .78em; height: var(--h);
    font-family: var(--display); font-weight: 600; line-height: 1;
    font-size: clamp(30px, 6vw, 52px);
    font-variant-numeric: tabular-nums;
    color: var(--bf-paper);
    perspective: 260px;
}
.mc-bf-d > span {
    position: absolute; left: 0; right: 0; height: 50%;
    overflow: hidden; backface-visibility: hidden;
}
.mc-bf-d > span > i { display: block; height: var(--h); line-height: var(--h); text-align: center; font-style: normal; }
.mc-bf-d .t, .mc-bf-d .ft { top: 0; border-radius: 6px 6px 0 0; background: linear-gradient(#24242a, #1b1b20); }
.mc-bf-d .b, .mc-bf-d .fb { bottom: 0; border-radius: 0 0 6px 6px; background: linear-gradient(#18181c, #121215); }
.mc-bf-d .b > i, .mc-bf-d .fb > i { margin-top: calc(var(--h) / -2); }
.mc-bf-d .ft { z-index: 2; transform-origin: 50% 100%; }
.mc-bf-d .fb { z-index: 2; transform-origin: 50% 0; }
.mc-bf-d::after {   /* щель между половинами */
    content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px;
    background: #050506; z-index: 3;
}
.mc-bf-tlabel {
    font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 10px;
}

/* --- Блок на главной (index.php, между первым экраном и бегущей строкой) --- */
.mc-bf-home {
    position: relative; overflow: hidden; isolation: isolate;
    padding-block: 0 clamp(26px, 4vw, 40px);
    background: #0b0b0e;
}
.mc-bf-home__body { padding-top: clamp(26px, 4vw, 44px); }
.mc-bf-home__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.mc-bf-home__lead { color: var(--muted); max-width: 62ch; margin: 18px 0 22px; }
.mc-bf-home__lead b { color: var(--txt); }
.mc-bf-home .mc-rail { grid-auto-columns: minmax(220px, 1fr); padding-top: 18px; }
.mc-bf-home__go { margin-top: 22px; }

/* --- Верх страницы /black-friday/ (mtPageHeadBegin, mod=bf, aside): слева заголовок, справа табло --- */
.mc-hero--bf { background: #0b0b0e; padding-bottom: 0; border-bottom: 0; }
.mc-hero--bf .mc-hero__cols { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px 40px; }
.mc-hero--bf .mc-hero__lead { max-width: 58ch; margin-top: 22px; }   /* наклейка повёрнута — не прижимать лид */
.mc-bf-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
/* Цифры акции — бумажными ценниками */
.mc-bf-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.mc-bf-stats span {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 14px 9px 20px; background: var(--bf-paper); color: #55555c;
    font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
.mc-bf-stats span:nth-child(2) { transform: rotate(-2deg); }
.mc-bf-stats b { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--bf-ink); letter-spacing: .5px; }
.mc-bf-stats b em { font-style: normal; color: var(--red); }
@media (max-width: 900px) { .mc-hero--bf .mc-hero__cols { grid-template-columns: 1fr; } }

/* --- Плитка: лента-уголок, бирка с процентом, маркер, штамп --- */
.mc-bf-card .mc-card__pic { overflow: hidden; }
.mc-bf-ribbon {
    position: absolute; z-index: 2; top: 20px; left: -46px;
    width: 180px; transform: rotate(-45deg);
    padding: 3px 0; text-align: center;
    font-family: var(--display); font-weight: 600; text-transform: uppercase;
    font-size: 10.5px; line-height: 1.2; letter-spacing: .1em; color: #fff;
    background: #0a0a0c;
    border-block: 4px solid transparent;
    border-image: repeating-linear-gradient(90deg, var(--red) 0 7px, #0a0a0c 7px 14px) 4;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .8);
}
/* Бирка висит на верёвке: верёвка — у обёртки (не обрезается), бумага — у <i> */
.mc-bf-label {
    position: absolute; z-index: 2; top: 0; right: 16px;
    padding-top: 22px;
    transform-origin: 50% 0;
}
.mc-bf-label::before {   /* верёвка от верхнего края фото до дырки */
    content: ''; position: absolute; top: 0; left: 50%; width: 1.5px; height: 30px;
    background: #c9c2b2; transform: translateX(-50%);
}
.mc-bf-label i {
    display: block; position: relative;
    min-width: 62px; padding: 20px 9px 9px;
    font-style: normal; text-align: center; white-space: nowrap;
    font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--red);
    background: radial-gradient(circle at 50% 9px, transparent 0 4px, #b9b2a2 4.5px 5.5px, var(--bf-paper) 6px);
    clip-path: polygon(24% 0, 76% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
}
/* Телефон, две колонки: бирка не должна закрывать полфото */
@media (max-width: 560px) {
    .mc-bf-card .mc-bf-label { right: 10px; padding-top: 16px; }
    .mc-bf-card .mc-bf-label::before { height: 24px; }
    .mc-bf-card .mc-bf-label i { min-width: 50px; padding: 17px 6px 7px; font-size: 17px; }
}
/* Старая цена: вместо линии зачёркивания — штрих маркером (SVG из MadtunPrice::MARKER) */
.mc-bf-card .mc-price__old { text-decoration: none; color: var(--muted); font-size: 13px; }
.mc-bf-card .mc-price__old svg {
    display: block;
    position: absolute; left: -6%; top: 0; width: 112%; height: 100%;
    overflow: visible; fill: none; stroke: var(--red-bright); stroke-width: 2.4; stroke-linecap: round;
}
.mc-bf-card .mc-price__old path { stroke-dasharray: 100; stroke-dashoffset: 0; }
.mc-bf-stamp {
    display: inline-block; margin-top: 8px;
    padding: 3px 8px; border: 2px solid var(--red-bright); border-radius: 4px;
    font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--red-bright);
    transform: rotate(-5deg);
    /* «непрокрас» штемпельной краски */
    -webkit-mask-image: repeating-linear-gradient(-30deg, #000 0 3px, rgba(0, 0, 0, .78) 3px 4px, #000 4px 9px);
    mask-image: repeating-linear-gradient(-30deg, #000 0 3px, rgba(0, 0, 0, .78) 3px 4px, #000 4px 9px);
}
.mc-bf-card .mc-price__save.mc-bf-stamp { display: table; }   /* своя строка, но по ширине текста */
.mc-buybox__save.mc-bf-stamp { font-size: 13px; padding: 5px 10px; margin-top: 12px; }

/* --- Список страницы: группы по разделам (разметка подбора .mc-fitlay/.mc-fitcol) --- */
.mc-bf-grp + .mc-bf-grp { margin-top: 30px; }
.mc-bf-grp .mc-bar { margin-bottom: 14px; }
.mc-bf-grp { scroll-margin-top: calc(var(--sticky-top) + 12px); }   /* якорь из «Разделы» — не под липкой шапкой */
.mc-bf-before > .mc-sec-title, .mc-bf-done .mc-sec-title { margin-top: 0; }

/* --- Состояния «до старта» и «завершена» --- */
.mc-bf-soon { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 6px; }
.mc-bf-soon a {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
    min-height: 150px; padding: 14px;
    border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--panel);
    font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 17px; line-height: 1.1;
}
.mc-bf-soon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; z-index: -1; }
.mc-bf-soon small { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); text-transform: none; font-weight: 400; }
.mc-bf-soon .mc-bf-label { right: 12px; }
.mc-bf-soon .mc-bf-label i { font-size: 13px; color: var(--bf-ink); min-width: 56px; }
.mc-bf-done { position: relative; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--panel); max-width: 720px; overflow: hidden; }
.mc-bf-done p { color: var(--muted); margin: 8px 0 18px; }
.mc-bf-done .mc-bf-stamp { position: absolute; right: 18px; top: 18px; font-size: 14px; transform: rotate(-9deg); opacity: .8; }

/* --- Движение. Только если человек не просил «меньше движения». --- */
@media (prefers-reduced-motion: no-preference) {
    .mc-bf-bar { animation: bf-b-crawl 1.6s linear infinite; }
    .mc-bf-tape--a .mc-bf-tape__row { animation: bf-b-run 38s linear infinite; }
    .mc-bf-tape--b .mc-bf-tape__row { animation: bf-b-run 46s linear infinite reverse; }
    .mc-bf-h__sticker { animation: bf-b-slap .6s cubic-bezier(.2, 1.5, .4, 1) .25s both; }
    .mc-bf-d.is-go .ft { animation: bf-b-top .26s ease-in both; }
    .mc-bf-d.is-go .fb { animation: bf-b-bot .26s ease-out .26s both; }

    /* «до появления» — только при живом JS (см. шапку файла) */
    .mc-bf-armed .mc-bf-card:not(.is-in) .mc-price__old path { stroke-dashoffset: 100; }
    .mc-bf-armed .mc-bf-card:not(.is-in) .mc-bf-stamp { opacity: 0; }
    .mc-bf-armed .mc-bf-card.is-in .mc-price__old path { animation: bf-b-draw .5s var(--ease) .45s both; }
    .mc-bf-armed .mc-bf-card.is-in .mc-bf-stamp { animation: bf-b-stamp .38s cubic-bezier(.2, 1.6, .4, 1) .95s both; }
    .mc-bf-armed .mc-bf-card.is-in .mc-bf-label { animation: bf-b-swing 2.6s ease-out .2s 1; }
    .mc-bf-card:hover .mc-bf-label { animation: bf-b-swing2 1.8s ease-out 1; }
}
@keyframes bf-b-crawl { to { background-position: 34px 0; } }
@keyframes bf-b-run   { to { transform: translateX(-50%); } }
@keyframes bf-b-slap  { 0% { transform: rotate(-9deg) scale(1.35); opacity: 0; } 100% { transform: rotate(-2.5deg) scale(1); opacity: 1; } }
@keyframes bf-b-top   { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes bf-b-bot   { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
@keyframes bf-b-draw  { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes bf-b-stamp { 0% { opacity: 0; transform: rotate(-14deg) scale(2.2); } 100% { opacity: 1; transform: rotate(-5deg) scale(1); } }
@keyframes bf-b-swing {
    0% { transform: rotate(0); } 12% { transform: rotate(10deg); } 30% { transform: rotate(-7deg); }
    48% { transform: rotate(4deg); } 66% { transform: rotate(-2deg); } 84% { transform: rotate(1deg); } 100% { transform: rotate(0); }
}
@keyframes bf-b-swing2 {
    0% { transform: rotate(0); } 15% { transform: rotate(-8deg); } 35% { transform: rotate(5deg); }
    55% { transform: rotate(-3deg); } 75% { transform: rotate(1deg); } 100% { transform: rotate(0); }
}