/* ===== public/css/jc-coupon.css — вид карточек: купон «Классический талон», кнопка кода «наклейка», акция «ценник-бирка» =====
   Подключается в layouts/app сразу ПОСЛЕ jc-components.css (там раскладка и типографика карточек), до страничных файлов.
   Выкатывать вместе с partials/coupon_card.blade.php (.jc-cpn__main/.jc-cpn__stub) и partials/deal_row.blade.php:
   без новой разметки талон рисуется без фона и полей.
   Разделы:
     1. Купон — талон A2: белая половина .jc-cpn__main (с голубым верхом и голубой рамкой сверху, как купон прежнего
        сайта) и голубой корешок .jc-cpn__stub с вырезами и линией отрыва.
     2. Кнопка «Получить код» — голубая наклейка со скосом и отгибом поверх белой рамки, справа «…M05»;
        после клика (.is-open на карточке ставит public/js/jc-components.js) — зелёная «✓ Скопировано!» и код целиком.
     3. Акция — ценник-бирка: розовый скошенный носик с отверстием и петлёй, в нём выгода или логотип;
        у кнопки «Посмотреть акцию» — розовый отсвет, как у акций прежнего сайта (в RTL — зеркально, слева).
   Общий язык: рамка #D6DCE3, скругление 16, одна неподвижная тень drop-shadow, свечение при наведении — только
   через opacity и только для мыши (@media (hover:hover)), prefers-reduced-motion и forced-colors учтены
   (в forced-colors градиентов нет: фон половин талона — Canvas, слои бирки скрыты). */

/* =====================================================================================================
   1. КУПОН — «Классический талон» (A2)
   - сама карточка ничего не рисует; бумагу рисуют половины: .jc-cpn__main — белая, .jc-cpn__stub — голубой корешок;
   - каждая половина вырезает mask'ой свои четвертинки круга на общих углах (main — внизу, stub — вверху),
     вместе это полукруглые вырезы на линии отрыва. Высоты нигде не заданы: линия там, где кончается main;
   - рамка — border половин (на стыке его нет) + дуга по краю выреза (radial-gradient в фоне той же половины);
   - линия отрыва — точки на ::before корешка, repeat: space — целое число точек, поля у вырезов равные;
   - тень — один неподвижный drop-shadow на .jc-cpn (обходит вырезы); голубое свечение при наведении —
     .jc-cpn::after, меняется только opacity (filter не анимируется).
   Корешок понимает и старое имя .jc-cpn__foot. RTL — на логических свойствах; по направлению страницы
   (:dir(rtl) и запасной [dir=rtl]) — только прижим «Работает…» к концу строки.
   ===================================================================================================== */
.jc-cpn{
  --cp-r:14px;               /* радиус выреза: ПК 14, телефон 12 */
  --cp-o:2px;                /* центр вырезов и точек — на 2px ниже стыка половин: точки целиком в корешке */
  --cp-rad:16px;             /* скругление углов */
  --cp-pad:16px;             /* поля */
  --cp-gap:14px;             /* текст → линия отрыва и линия → кнопка */
  --cp-paper:#fff;
  --cp-sky:#DAF9FF;          /* голубой верх бумаги, как у купона на прежнем сайте… */
  --cp-sky-to:34%;           /* …к трети высоты .jc-cpn__main уже белый */
  --cp-rim:#0BCDF3;          /* голубая рамка сверху, к --cp-rim-to сходит в обычную --cp-line */
  --cp-rim-to:38%;
  --cp-stub:#EBFAFE;         /* корешок */
  --cp-line:#D6DCE3;         /* рамка: на белом фоне без неё вырезов не видно */
  --cp-dot:#4FC3E0;          /* точки линии отрыва */
  --cp-d:2.4px;              /* диаметр точки */
  --cp-step:7.5px;           /* шаг точек (space подгоняет до целого числа) */
  /* служебные: дырка в маске и дуга рамки по краю выреза */
  --cp-hole:#0000 var(--cp-r),#000 calc(var(--cp-r) + .5px);
  --cp-arc:#0000 calc(var(--cp-r) - .5px),var(--cp-line) var(--cp-r) calc(var(--cp-r) + 1px),#0000 calc(var(--cp-r) + 1.5px);
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;min-width:0;
  border-radius:var(--cp-rad);
  filter:drop-shadow(0 1px 2px rgba(16,24,40,.07));
  transition:transform .18s ease;
}
/* поля карточки из jc-components.css (и фон/рамка/тень плоского вида) — теперь у половин */
.jc-cpn,.jc-cpn:hover{background:none;border:0;padding:0;box-shadow:none}
.jc-cpn>.jc-cpn__sp{display:none}            /* распорка старой разметки: её место занимает .jc-cpn__main (flex:1) */

/* ---- Верх: белая бумага с голубым верхом, вырезы внизу по углам.
   Рамка прозрачная, её цвет — нижний слой фона (border-box): сверху голубая, к --cp-rim-to — обычная --cp-line,
   поэтому у вырезов и на стыке с корешком цвет рамки прежний. Бумага — слой padding-box: --cp-sky → белый.
   Текст на самом тёмном месте (#DAF9FF): заголовок 16:1, домен 8,9:1, описание 5,6:1. ---- */
.jc-cpn>.jc-cpn__main{
  flex:1 0 auto;min-width:0;
  padding:var(--cp-pad) var(--cp-pad) var(--cp-gap);
  border:1px solid #0000;border-bottom:0;
  border-radius:var(--cp-rad) var(--cp-rad) 0 0;
  background:
    radial-gradient(circle at 0 calc(100% + var(--cp-o)),var(--cp-arc)) border-box,
    radial-gradient(circle at 100% calc(100% + var(--cp-o)),var(--cp-arc)) border-box,
    linear-gradient(var(--cp-sky),var(--cp-paper) var(--cp-sky-to)) padding-box,
    linear-gradient(var(--cp-rim),var(--cp-line) var(--cp-rim-to)) border-box;
  -webkit-mask:
    radial-gradient(circle at 0 calc(100% + var(--cp-o)),var(--cp-hole)) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% calc(100% + var(--cp-o)),var(--cp-hole)) 100% 0 / 51% 100% no-repeat;
          mask:
    radial-gradient(circle at 0 calc(100% + var(--cp-o)),var(--cp-hole)) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% calc(100% + var(--cp-o)),var(--cp-hole)) 100% 0 / 51% 100% no-repeat;
}
.jc-cpn__main>.jc-cpn__body{margin-bottom:0}
.jc-cpn__main>.jc-cpn__body+.jc-tags{margin:10px 0 0}
.jc-cpn__main>.jc-cpn__top+.jc-tags{margin:0}  /* страница магазина: метки сразу под значком и заголовком */
.jc-cpn__main>:last-child,.jc-cpn__main .jc-cpn__body>:last-child{margin-bottom:0}
/* выгода вместо логотипа (страница магазина): на голубом верху своя голубая плашка терялась — белая с каймой, как логотип */
.jc-cpn__main .jc-val{background:#fff;box-shadow:inset 0 0 0 1px #C6ECF6}
/* телефон: цена в 8 знаков («$1549,99», 66px) шире плашки 64px — чуть плотнее, чтобы не наезжала на кайму */
@media (max-width:767.98px){.jc-cpn__main .jc-val b.sm{letter-spacing:-.03em}}

/* ---- Корешок: голубой, вырезы вверху по углам, линия отрыва ---- */
.jc-cpn>:is(.jc-cpn__stub,.jc-cpn__foot){
  display:block;flex:none;position:relative;min-width:0;margin:0;
  padding:var(--cp-gap) var(--cp-pad) var(--cp-pad);
  border:1px solid var(--cp-line);border-top:0;
  border-radius:0 0 var(--cp-rad) var(--cp-rad);
  background:
    radial-gradient(circle at 0 var(--cp-o),var(--cp-arc)) border-box,
    radial-gradient(circle at 100% var(--cp-o),var(--cp-arc)) border-box,
    var(--cp-stub);
  -webkit-mask:
    radial-gradient(circle at 0 var(--cp-o),var(--cp-hole)) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% var(--cp-o),var(--cp-hole)) 100% 0 / 51% 100% no-repeat;
          mask:
    radial-gradient(circle at 0 var(--cp-o),var(--cp-hole)) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% var(--cp-o),var(--cp-hole)) 100% 0 / 51% 100% no-repeat;
}
/* линия отрыва: круглые точки на высоте центров вырезов, от выреза до выреза */
.jc-cpn>:is(.jc-cpn__stub,.jc-cpn__foot)::before{
  content:"";position:absolute;pointer-events:none;
  top:calc(var(--cp-o) - 2px);height:4px;
  inset-inline:calc(var(--cp-r) + 3px);
  background:radial-gradient(circle,var(--cp-dot) calc(var(--cp-d) / 2 - .35px),#0000 calc(var(--cp-d) / 2 + .35px)) 0 0 / var(--cp-step) 4px space no-repeat;
}

/* ---- Наведение (только мышь): подъём на 2px, рамка голубеет, голубое свечение ---- */
@media (hover:hover){
  .jc-cpn::after{
    content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    box-shadow:0 14px 22px -14px rgba(11,205,243,.55);   /* только снизу: к вырезам не поднимается */
    opacity:0;transition:opacity .18s ease;
  }
  .jc-cpn:hover{--cp-line:#9EDFF0;transform:translateY(-2px)}
  .jc-cpn:hover::after{opacity:1}
}

/* ---- Строка под кнопкой (страница магазина): переносится, если не влезает ---- */
.jc-cpn .jc-cpn__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;margin-top:10px;min-height:0;color:#5d636c}
.jc-cpn__meta>.jc-cb{min-width:0}
/* «Работает…» — к концу строки и при переносе. Поля физические по направлению строки, а не самого элемента:
   у «Работает у N%» в партиале dir="auto", и его margin-inline-start в RTL-строке смотрел бы не туда */
.jc-cpn__meta>:is(.jc-vote,.jc-cpn__works){margin-left:auto}
.jc-cpn__meta:dir(rtl)>:is(.jc-vote,.jc-cpn__works){margin-left:0;margin-right:auto}
[dir="rtl"] .jc-cpn__meta>:is(.jc-vote,.jc-cpn__works){margin-left:0;margin-right:auto}
.jc-cpn__meta>span:empty{display:none}       /* заглушка <span></span> черновика больше не нужна */
.jc-cpn__meta>.jc-cb{flex:0 1 auto}
.jc-cpn__meta>:is(.jc-vote,.jc-cpn__works){flex:none}
@media (max-width:359.98px){   /* 320: плотнее, чтобы «+ кешбэк до N%» и «Работает у N%» встали в одну строку */
  .jc-cpn .jc-cpn__meta{column-gap:4px}
  .jc-cpn .jc-cpn__works{font-size:12px;gap:4px}
  .jc-cpn .jc-vote button{width:32px;height:32px}
  .jc-cpn .jc-vote button::after{inset:-6px}   /* область нажатия по-прежнему 44×44 */
}
.jc-cpn .jc-cb>bdi{min-width:0;overflow:hidden;text-overflow:ellipsis}
.jc-cpn .jc-vote{display:inline-flex;align-items:center;gap:8px;color:#5d636c;font-size:12.5px}   /* 5,7:1 на корешке */
.jc-cpn .jc-vote>span{margin:0;margin-inline-end:-6px;white-space:nowrap}
.jc-cpn .jc-vote button{position:relative;flex:none;width:36px;height:36px;border-radius:10px;color:#5d636c}
.jc-cpn .jc-vote button::after{content:"";position:absolute;inset:-4px}   /* область нажатия 44×44 */
.jc-cpn .jc-vote button:hover{background:rgba(11,205,243,.16);color:#06323c}
.jc-cpn .jc-vote button:focus-visible{outline:2px solid #06323c;outline-offset:1px}

/* ---- Плашка кешбэка с иконкой: поля зеркалятся в RTL ---- */
.jc-cpn .jc-cb{padding-inline:7px 10px}
.jc-cpn .jc-cb--sm{padding-inline:5px 8px}

/* ---- Текст латиницей/кириллицей на арабской странице: «!», «?» и «.» не прыгают в начало (plaintext —
   направление абзаца по первой букве). Выравнивание start = по направлению самого абзаца: так Chrome рисует «…»
   у обрезанной второй строки (при text-align:right у латинского абзаца многоточие пропадает).
   В RTL блок ужимается по тексту (fit-content) и встаёт к правому краю: короткая строка — справа, как вся карточка. ---- */
.jc-cpn .jc-cpn__title,.jc-cpn .jc-cpn__desc{unicode-bidi:plaintext;text-align:start}
/* родитель :dir(rtl), а не сам текст: у заголовка в партиале dir="auto", его собственное направление — по тексту */
.jc-cpn .jc-cpn__body:dir(rtl)>:is(.jc-cpn__title,.jc-cpn__desc){width:fit-content;max-width:100%}
.jc-cpn .jc-vote>span,.jc-cpn .jc-cpn__works{unicode-bidi:plaintext}   /* «Работает?» не становится «?Работает» */

/* ---- Истёкшие: серый фильтр из jc-components.css + та же тень ---- */
.jc-cpn.jc-cpn--exp{filter:grayscale(.6) drop-shadow(0 1px 2px rgba(16,24,40,.07))}

/* ---- Телефон ---- */
@media (max-width:767.98px){
  .jc-cpn{--cp-r:12px;--cp-pad:14px;--cp-gap:12px}
}
@media (min-width:640px) and (max-width:1023.98px){.jc-cpn{--cp-r:11px}}   /* две колонки: вырезы соседей не сливаются в «( )» */

@media (prefers-reduced-motion:reduce){
  .jc-cpn,.jc-cpn::after{transition:none}
  .jc-cpn:hover{transform:none}
}

/* ---- Высокая контрастность Windows: маски и тени убраны, контур сплошной, линия отрыва — пунктиром ---- */
@media (forced-colors:active){
  .jc-cpn,.jc-cpn.jc-cpn--exp{filter:none}
  .jc-cpn::after,.jc-cpn>:is(.jc-cpn__stub,.jc-cpn__foot)::before{display:none}
  .jc-cpn>:is(.jc-cpn__main,.jc-cpn__stub,.jc-cpn__foot){-webkit-mask:none;mask:none;background:Canvas;border-color:CanvasText}
  .jc-cpn>:is(.jc-cpn__stub,.jc-cpn__foot){border-top:2px dashed CanvasText}
  .jc-cpn .jc-vote button{border:1px solid ButtonText}
  .jc-cpn .jc-vote>span{margin-inline-end:0}
}

/* =====================================================================================================
   2. КНОПКА «ПОЛУЧИТЬ КОД» — наклейка, как «Copy & Go» на прежнем сайте (code-peel)
   ===================================================================================================== */
.jc-code.jc-code{
  --pc-h:46px;              /* высота кнопки (под неё рассчитан отгиб --pc-fold-0/1) */
  --pc-bd:1.5px;            /* рамка коробки */
  --pc-w:72%;               /* ширина наклейки… */
  --pc-peek:76px;           /* …но справа под конец кода остаётся не меньше этого */
  --pc-s:19.6px;            /* скос края наклейки: 18,75 на 44 из SVG → 19,6 на 46 */
  --pc-lift:10px;           /* насколько наклейка «отклеивается» при наведении */
  --pc-r:0;                 /* 0 — слева направо, 1 — справа налево */
  --pc-on:0;                /* 1 — наведение/фокус */
  --pc-line:#0BCDF3;        /* рамка — фирменный голубой, как на сайте */
  --pc-bg:#0BCDF3;          /* наклейка */
  --pc-fold:#75E8FE;        /* отгиб */
  --pc-ink:#fff;            /* текст на наклейке — белый, как «Copy & Go» на прежнем сайте */
  --pc-code:#00799A;        /* конец кода на белом: 5,0:1 */
  /* отгиб в полосе 44×46 у скоса (x от её левого края): кривые show-coupon-bg.svg ×46/44;
     -1 — при наведении: внутренние точки на 30% дальше от края, точки на скосе на месте (та же структура пути — анимируется) */
  --pc-fold-0:path("M24.4 0H44V46L43.44 45.65C36.01 40.94 20.18 30.57 15.68 27.61C11.06 24.57 12.71 18.75 14.11 16.22Z");
  --pc-fold-1:path("M24.4 0H44V46L43.44 45.65C33.61 40.94 13.03 30.57 7.18 27.61C1.18 24.57 3.32 18.75 5.14 16.22Z");
  --pc-fp:var(--pc-fold-0);
  position:relative;isolation:isolate;
  display:flex;align-items:stretch;justify-content:flex-end;
  width:100%;height:var(--pc-h);min-height:0;
  padding:0;
  border:0;border-radius:10px;
  background:#fff;box-shadow:inset 0 0 0 var(--pc-bd) var(--pc-line);
  overflow:hidden;            /* сдвинутая наклейка уходит за край коробки, как на сайте */
  font:inherit;color:var(--pc-ink);text-align:start;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
/* RTL: браузеры без :dir() понимают только первое правило; остальные — ещё и вложенный dir="ltr" внутри RTL-страницы */
[dir="rtl"] .jc-code.jc-code{--pc-r:1}
.jc-code.jc-code:dir(rtl){--pc-r:1}
.jc-code.jc-code:dir(ltr){--pc-r:0}

/* ---- Наклейка ---- */
.jc-code.jc-code>.jc-code__lbl{
  position:absolute;z-index:1;inset-block:0;inset-inline-start:0;
  width:min(var(--pc-w),100% - var(--pc-peek));
  display:block;flex:none;min-width:0;max-width:none;
  margin:0;padding-block:0;padding-inline:12px 42px;   /* текст не заходит под отгиб, даже под выросший при наведении */
  border:0;border-radius:0;box-shadow:none;
  background:var(--pc-bg);color:var(--pc-ink);
  font-size:15px;font-weight:700;line-height:var(--pc-h);
  letter-spacing:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  /* скос у конца: при --pc-r:1 те же точки зеркально */
  clip-path:polygon(
    calc(100% * var(--pc-r)) 0,
    calc(100% * (1 - var(--pc-r)) + var(--pc-s) * (2 * var(--pc-r) - 1)) 0,
    calc(100% * (1 - var(--pc-r))) 100%,
    calc(100% * var(--pc-r)) 100%);
  transform:translateX(calc(var(--pc-lift) * (2 * var(--pc-r) - 1) * var(--pc-on)));
  transition:transform .28s cubic-bezier(.3,.7,.4,1);
}
/* маски перфорации A2 (в т.ч. [dir="ltr"] .jc-cpn .jc-code__lbl:dir(ltr) — специфичность 0,4,0) */
.jc-code.jc-code.jc-code>.jc-code__lbl{-webkit-mask:none;mask:none}
.jc-code.jc-code>.jc-code__lbl::after{
  content:"";position:absolute;inset-block:0;inset-inline-end:0;
  width:44px;
  background:var(--pc-fold);
  clip-path:var(--pc-fp);
  transform:scaleX(calc(1 - 2 * var(--pc-r)));   /* RTL — зеркально */
  transition:clip-path .28s cubic-bezier(.3,.7,.4,1);
}
.jc-code.jc-code>.jc-code__lbl::before{content:none}

/* ---- Конец кода у дальнего края ---- */
.jc-code.jc-code>.jc-code__peek{
  position:relative;z-index:0;
  display:block;flex:none;        /* блок, а не flex: иначе длинный код режется с начала и без многоточия */
  width:auto;min-width:0;max-width:none;
  margin:0;padding-block:0;padding-inline:6px 14px;
  border:0;border-radius:0;background:none;box-shadow:none;
  -webkit-mask:none;mask:none;
  color:var(--pc-code);
  font-family:inherit;font-size:16px;font-weight:700;line-height:var(--pc-h);letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  unicode-bidi:plaintext;     /* «…M05» на арабской странице не превращается в «M05…» */
}

/* ---- Наведение мышью и фокус с клавиатуры: наклейка чуть отклеивается ---- */
@media (hover:hover){
  .jc-cpn:hover .jc-code.jc-code,.jc-code.jc-code:hover{--pc-on:1;--pc-fp:var(--pc-fold-1)}
}
.jc-code.jc-code:focus-visible{--pc-on:1;--pc-fp:var(--pc-fold-1);outline:3px solid #06323c;outline-offset:2px}
/* цвета держим и в этих состояниях — правила карточки перекрашивают кнопку при наведении/фокусе */
.jc-cpn:hover .jc-code.jc-code>.jc-code__lbl,.jc-code.jc-code:is(:hover,:focus-visible,:active)>.jc-code__lbl{background:var(--pc-bg);color:var(--pc-ink)}
.jc-cpn:hover .jc-code.jc-code>.jc-code__peek,.jc-code.jc-code:is(:hover,:focus-visible,:active)>.jc-code__peek{background:none;border:0;color:var(--pc-code)}

/* ---- После клика: «✓ Скопировано!» на зелёном, полный код у дальнего края ---- */
.jc-cpn.is-open .jc-code.jc-code,.jc-code.jc-code.is-open{
  --pc-line:#15803d;--pc-bg:#15803d;--pc-fold:#4ADE80;--pc-ink:#fff;--pc-code:#15803d;   /* белый на #15803d — 5,0:1 */
  --pc-on:0;--pc-fp:var(--pc-fold-0);
}
.jc-cpn.is-open .jc-code.jc-code>.jc-code__lbl,.jc-code.jc-code.is-open>.jc-code__lbl{
  position:relative;inset:auto;width:auto;max-width:72%;flex:none;
  padding-inline-end:36px;   /* отгиб больше не растёт — коду на узком телефоне остаётся на 6px больше */
}
.jc-cpn.is-open .jc-code.jc-code>.jc-code__lbl::before,.jc-code.jc-code.is-open>.jc-code__lbl::before{
  content:"";display:inline-block;width:5px;height:10px;margin-inline-end:9px;
  border:solid currentColor;border-width:0 2.5px 2.5px 0;
  transform:translateY(-3px) rotate(45deg);vertical-align:middle;
}
.jc-cpn.is-open .jc-code.jc-code>.jc-code__peek,.jc-code.jc-code.is-open>.jc-code__peek{
  flex:0 1 auto;margin-inline-start:auto;font-size:15px;letter-spacing:.02em;   /* к дальнему краю; длинный — с многоточием */
}

/* ---- Copy & Go как на прежнем сайте ----
   В коробке весь код, прижат к дальнему краю — наклейка закрывает начало, виден конец. Наведение мышью
   (класс .is-revealed ставит jc-components.js) — наклейка уезжает, код целиком (длинный — бегущей
   строкой). Клик — .is-copied: 2 с зелёное «Скопировано! ✓», зелёная рамка. */
.jc-code.jc-code>.jc-code__peek{
  flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;
  padding-inline:6px 14px;text-overflow:clip;
}
.jc-code__full{flex:none;display:inline-block;white-space:nowrap}
.jc-code.jc-code{-webkit-user-select:none;user-select:none}
/* Открытый код можно выделить мышью и скопировать самому (клик с выделением магазин не открывает) */
.jc-cpn.is-revealed .jc-code__full{-webkit-user-select:text;user-select:text;cursor:pointer}
/* значок «копировать» слева от открытого промокода */
.jc-cpn.is-revealed .jc-code.jc-code>.jc-code__peek::before{
  content:"";flex:none;width:17px;height:17px;margin-inline-end:8px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center/contain no-repeat;
}
.jc-cpn.is-copied .jc-code.jc-code>.jc-code__peek::before{content:none}
@media (forced-colors:active){.jc-cpn.is-revealed .jc-code.jc-code>.jc-code__peek::before{background:CanvasText}}
.jc-cpn.is-selecting .jc-code.jc-code>.jc-code__peek{overflow-x:auto;scrollbar-width:none}
.jc-cpn.is-selecting .jc-code.jc-code>.jc-code__peek::-webkit-scrollbar{display:none}
.jc-cpn.is-selecting .jc-code__peek>.jc-code__full{animation:none;transform:none}
.jc-code__ok{display:none;flex:none;align-items:center;gap:6px;white-space:nowrap}
.jc-code__ok::after{content:"";width:5px;height:10px;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:translateY(-2px) rotate(45deg)}
.jc-cpn.is-revealed .jc-code.jc-code>.jc-code__lbl{
  transform:translateX(calc(-110% * (1 - 2 * var(--pc-r))));   /* слева направо — влево, справа налево — вправо */
  transition:transform .3s ease;
}
.jc-cpn.is-revealed .jc-code.jc-code>.jc-code__peek{justify-content:center;padding-inline:14px}
.jc-cpn.is-revealed .jc-code.jc-code>.jc-code__peek.is-long{justify-content:flex-start}
.jc-code__peek.is-long>.jc-code__full{animation:jc-mq .7s linear infinite alternate}   /* как прежде: .7 с туда-обратно */
@keyframes jc-mq{from{transform:translateX(0)}to{transform:translateX(var(--jc-mq,0px))}}
.jc-cpn.is-copied .jc-code.jc-code{--pc-line:#16a34a}
.jc-cpn.is-copied .jc-code.jc-code>.jc-code__peek{color:#15803d;font-weight:600}
.jc-cpn.is-copied .jc-code__full{display:none}
.jc-cpn.is-copied .jc-code__ok{display:inline-flex}
@media (prefers-reduced-motion:reduce){
  .jc-code__peek.is-long>.jc-code__full{animation:none}
  .jc-cpn.is-revealed .jc-code.jc-code>.jc-code__lbl{transition:none}
}
@media (forced-colors:active){
  .jc-cpn.is-revealed .jc-code.jc-code>.jc-code__lbl:not(:last-child){display:none}
  .jc-cpn.is-copied .jc-code.jc-code{border-color:Highlight}
}

/* ---- Без конца кода («Смотреть акцию» или код короче 5 знаков): голубая во всю ширину, без скоса ---- */
.jc-code.jc-code>.jc-code__lbl:last-child{
  position:static;width:100%;padding-inline:12px;clip-path:none;transform:none;
}
.jc-code.jc-code>.jc-code__lbl:last-child::after{content:none}
.jc-cpn.is-open .jc-code.jc-code>.jc-code__lbl:last-child,.jc-code.jc-code.is-open>.jc-code__lbl:last-child{
  flex:auto;width:100%;max-width:none;padding-inline:12px;   /* короткий код после клика — зелёная во всю ширину, а не обрубок слева */
}

/* узкий телефон (320–359): после клика чуть мельче и плотнее — код в 10–14 знаков виден целиком рядом с «✓ Скопировано!» */
@media (max-width:359.98px){
  .jc-cpn.is-open .jc-code.jc-code>.jc-code__lbl,.jc-code.jc-code.is-open>.jc-code__lbl{padding-inline:10px 34px;font-size:14px}
  .jc-cpn.is-open .jc-code.jc-code>.jc-code__lbl:last-child,.jc-code.jc-code.is-open>.jc-code__lbl:last-child{padding-inline:10px}
  .jc-cpn.is-open .jc-code.jc-code>.jc-code__lbl::before,.jc-code.jc-code.is-open>.jc-code__lbl::before{margin-inline-end:7px}
  .jc-cpn.is-open .jc-code.jc-code>.jc-code__peek,.jc-code.jc-code.is-open>.jc-code__peek{padding-inline:4px 11px;font-size:14px;letter-spacing:0}
}

/* ---- Без анимации по настройке системы: наклейка не ездит, отгиб больше без плавности ---- */
@media (prefers-reduced-motion:reduce){
  .jc-code.jc-code{--pc-lift:0px}
  .jc-code.jc-code>.jc-code__lbl,.jc-code.jc-code>.jc-code__lbl::after{transition:none}
}

/* ---- Высокая контрастность Windows: тень-рамку и фон наклейки система убирает — рисуем рамки ---- */
@media (forced-colors:active){
  .jc-code.jc-code{border:2px solid ButtonText;background:ButtonFace}
  .jc-code.jc-code>.jc-code__lbl{clip-path:none;transform:none;background:ButtonFace;color:ButtonText;border-inline-end:2px solid ButtonText}
  .jc-code.jc-code>.jc-code__lbl:last-child{border:0}
  .jc-code.jc-code>.jc-code__lbl::after{content:none}
  .jc-code.jc-code>.jc-code__peek{color:ButtonText}
  .jc-cpn.is-open .jc-code.jc-code,.jc-code.jc-code.is-open{border-color:Highlight}
  .jc-code.jc-code:focus-visible{outline:3px solid Highlight}
}

/* =====================================================================================================
   3. АКЦИИ — «Ценник-бирка» (вариант D3, доработан под талон A2)
   Разметка — partials/deal_row.blade.php («растянутая ссылка»):
     div.jc-deal[.jc-deal--own][.jc-deal--exp] > (.jc-deal__logo | .jc-val) + div.jc-deal__body
       (.jc-deal__store > [.jc-deal__mini] + a.jc-deal__dom; a.jc-deal__title[dir=auto]; .jc-deal__desc; .jc-tags) + .jc-deal__go
   Купон — талон (белый + голубой корешок с кнопкой кода), акция — ценник (белый + розовый носик с отверстием).
   Как устроено:
   - форму рисуют два слоя: .jc-deal::before — контур (цвет рамки), ::after — бумага (inset: --g-bw) с розовым носиком
     (градиент --g-tint → --g-tint2) и розовым отсветом у кнопки: --g-glow от прозрачного до --g-glow-c у дальнего края.
     Оба обрезаны clip-path с двумя скосами со стороны начала строки; у бумаги скос меньше на --g-bw×0,586 — рамка
     той же толщины идёт и по скосу (в фокусе --g-bw = 2px — обводка по форме бирки);
   - отверстие — mask (radial-gradient) на обоих слоях: у контура радиус --g-r, у бумаги на --g-bw больше, поэтому
     край отверстия обведён той же линией, что и бирка; сквозь отверстие виден фон страницы. Вокруг — едва заметная
     «вмятина» (фон бумаги), внутри — тень по верхней кромке (::before логотипа/выгоды): это дырка, а не радиокнопка;
   - петля нитки — ::after логотипа/выгоды: эллипс от отверстия за край носика; часть, что «за биркой», срезана;
   - тень — один неподвижный drop-shadow на .jc-deal, как у талона; розовое свечение при наведении — тень
     у a.jc-deal__title::after (он и так накрывает строку), меняется только opacity — filter не анимируется;
   - RTL: слои нарисованы в геометрии LTR и в RTL отражаются scaleX(-1) — носик и отверстие уходят вправо;
     содержимое — на логических свойствах.
   Высота строки не растёт: носик берёт ширину, а не высоту. Без SVG и без id. */

.jc-deal{
  --g-n:20px;                 /* катет скоса носика */
  --g-r:3.5px;                /* радиус отверстия */
  --g-hx:12px;                /* центр отверстия от края носика */
  --g-sx:7px;                 /* петля выходит за край носика */
  --g-sh:12px;                /* высота петли */
  --g-pad:30px;               /* край → логотип/выгода: скос и отверстие */
  --g-w:120px;                /* ширина логотипа / выгоды в носике */
  --g-ext:14px;               /* носик выступает за логотип */
  --g-gap:16px;               /* шов → текст и текст → кнопка */
  --g-nose:calc(var(--g-pad) + var(--g-w) + var(--g-ext));
  --g-rad:16px;               /* скругление дальнего конца — как у талона */
  --g-paper:#fff;
  --g-tint:#FFC2DF;           /* розовый носик — насыщеннее, как розовый прежнего сайта */
  --g-tint2:#FFD1E8;
  --g-glow:264px;             /* розовый отсвет строки у кнопки (как на прежнем сайте): ширина… */
  --g-glow-c:#FFD1E8;         /* …и цвет у самого края — #ffd1e8, как на прежнем сайте; от текста — прозрачный */
  --g-line:#FFC9E3;           /* рамка розовая, как у акций прежнего сайта */
  --g-seam:#F5B3D3;           /* шов носик/бумага */
  --g-dent:rgba(150,0,75,.10);/* «вмятина» вокруг отверстия */
  --g-string:#B0849A;         /* нитка */
  --g-bw:1px;                 /* толщина рамки (в фокусе — 2px) */
  --g-a:24px;                 /* дальний конец — уголок-стрелка, как у акций прежнего сайта (глубина) */
  --g-ni:calc(var(--g-n) - var(--g-bw) * .586);   /* скос бумаги: та же линия, сдвинутая внутрь на --g-bw */
  position:relative;isolation:isolate;
  background:none;border:0;box-shadow:none;border-radius:var(--g-rad);
  padding:16px 20px;padding-inline-start:var(--g-pad);padding-inline-end:calc(20px + var(--g-a));gap:var(--g-gap);
  filter:drop-shadow(0 1px 2px rgba(16,24,40,.07));
  transition:transform .18s ease;
}
.jc-deal::before,.jc-deal::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  border-radius:0;
}
.jc-deal::before{
  inset:0;background:var(--g-line);
  clip-path:polygon(var(--g-n) 0,calc(100% - var(--g-a)) 0,100% 50%,calc(100% - var(--g-a)) 100%,var(--g-n) 100%,0 calc(100% - var(--g-n)),0 var(--g-n));
  -webkit-mask:radial-gradient(circle at var(--g-hx) 50%,#0000 var(--g-r),#000 calc(var(--g-r) + .5px));
          mask:radial-gradient(circle at var(--g-hx) 50%,#0000 var(--g-r),#000 calc(var(--g-r) + .5px));
}
.jc-deal::after{
  --g-hxi:calc(var(--g-hx) - var(--g-bw));
  --g-ri:calc(var(--g-r) + var(--g-bw));
  inset:var(--g-bw);border-radius:0;
  background:
    radial-gradient(circle at var(--g-hxi) 50%,var(--g-dent) var(--g-ri),#0000 calc(var(--g-ri) + 2px)),
    linear-gradient(90deg,#0000,var(--g-glow-c)) 100% 0 / var(--g-glow) 100% no-repeat,
    linear-gradient(90deg,var(--g-tint),var(--g-tint2) calc(var(--g-nose) - 1px - var(--g-bw)),
      var(--g-seam) 0 calc(var(--g-nose) - var(--g-bw)),var(--g-paper) 0);
  clip-path:polygon(var(--g-ni) 0,calc(100% - var(--g-a) + var(--g-bw) * .41) 0,100% 50%,calc(100% - var(--g-a) + var(--g-bw) * .41) 100%,var(--g-ni) 100%,0 calc(100% - var(--g-ni)),0 var(--g-ni));
  -webkit-mask:radial-gradient(circle at var(--g-hxi) 50%,#0000 var(--g-ri),#000 calc(var(--g-ri) + .5px));
          mask:radial-gradient(circle at var(--g-hxi) 50%,#0000 var(--g-ri),#000 calc(var(--g-ri) + .5px));
}
[dir="rtl"] .jc-deal::before,[dir="rtl"] .jc-deal::after{transform:scaleX(-1)}   /* браузеры без :dir() */
.jc-deal:dir(rtl)::before,.jc-deal:dir(rtl)::after{transform:scaleX(-1)}
.jc-deal:dir(ltr)::before,.jc-deal:dir(ltr)::after{transform:none}

/* ---- Отверстие и петля: псевдоэлементы логотипа/выгоды в носике. Их контейнер — сама .jc-deal (логотип не
   позиционирован), поэтому overflow:hidden логотипа их не обрезает; inset-inline-start в RTL считается справа. ---- */
.jc-deal__logo::before,.jc-deal .jc-val::before{   /* глубина: тень по верхней кромке внутри отверстия */
  content:"";position:absolute;pointer-events:none;
  inset-inline-start:calc(var(--g-hx) - var(--g-r));top:calc(50% - var(--g-r));
  width:calc(2 * var(--g-r));height:calc(2 * var(--g-r));border-radius:50%;
  box-shadow:inset 0 1.2px 1.6px rgba(70,0,35,.42);
}
.jc-deal__logo::after,.jc-deal .jc-val::after{      /* петля: от отверстия за край носика и обратно за бирку */
  content:"";position:absolute;pointer-events:none;
  inset-inline-start:calc(-1 * var(--g-sx));top:calc(50% - var(--g-sh) / 2);
  width:calc(var(--g-hx) + var(--g-sx));height:var(--g-sh);
  border:1.4px solid var(--g-string);border-radius:50%;
  /* верхняя дуга — по лицевой стороне до отверстия, нижняя видна только за краем бирки */
  clip-path:polygon(-2px -2px,calc(100% + 2px) -2px,calc(100% + 2px) 50%,var(--g-sx) 50%,var(--g-sx) calc(100% + 2px),-2px calc(100% + 2px));
}
[dir="rtl"] .jc-deal :is(.jc-deal__logo,.jc-val)::after{transform:scaleX(-1)}
.jc-deal:dir(rtl) :is(.jc-deal__logo,.jc-val)::after{transform:scaleX(-1)}
.jc-deal:dir(ltr) :is(.jc-deal__logo,.jc-val)::after{transform:none}

/* ---- Носик: логотип на белой наклейке или крупная выгода прямо на розовом ---- */
.jc-deal__logo,.jc-deal .jc-val{margin-inline-end:var(--g-ext)}
.jc-deal__logo{width:var(--g-w);height:60px;align-self:center;border:0;border-radius:10px;background:#fff;padding:6px;
  box-shadow:0 0 0 1px #F3C6DA}
.jc-deal--own{--g-w:76px}
.jc-deal .jc-val{width:var(--g-w);height:auto;min-height:56px;align-self:center;border-radius:0;background:none;color:#EC0078;gap:3px}   /* ближе к фирменному #FF0583 прежнего сайта; крупный жирный текст — 3,3:1 на #FFD1E8 */
.jc-deal .jc-val b{font-size:26px;letter-spacing:-.02em;unicode-bidi:plaintext;max-width:100%;overflow-wrap:anywhere}
.jc-deal .jc-val b.sm{font-size:17px}
.jc-deal .jc-val small{color:#9A004B;font-size:10.5px}   /* 6,3:1 */
.jc-deal .jc-val .jc-i{width:28px;height:28px}

/* ---- Маленький логотип у домена — когда в носике выгода ---- */
.jc-deal__mini{flex:none;display:inline-flex;align-items:center;justify-content:center;height:22px;max-width:76px;
  padding:2px 5px;border:1px solid #E6E9EE;border-radius:6px;background:#fff;margin-inline-end:3px;overflow:hidden}
.jc-deal__mini img{display:block;width:auto;height:auto;max-width:100%;max-height:16px;object-fit:contain}

/* ---- Текст. В отсвете у кнопки (самое тёмное — #FFE3F0): домен #5d636c — 5,0:1 (прежний #6b7280 — 4,0:1),
   описание 5,2:1, заголовок 14,8:1 ---- */
.jc-deal__store{color:#5d636c}
.jc-deal__title{color:var(--jc-ink,#17171f)}
.jc-deal .jc-tags{margin:5px 0 0}
/* Смешанный текст: у заголовка и описания dir="auto" — направление берётся из самого текста, выравнивание —
   по его началу (у обрезанной строки многоточие остаётся: при text-align:right Chrome его теряет) */
.jc-deal__title,.jc-deal__desc{text-align:start}
.jc-deal__title:not([dir]),.jc-deal__desc:not([dir]){unicode-bidi:plaintext}   /* запасной путь для разметки без dir */
.jc-deal .jc-cb>bdi{min-width:0}

/* ---- Свечение при наведении и фокус: тень только снизу — не поднимается к скосам носика ---- */
a.jc-deal__title::after{border-radius:var(--g-rad);box-shadow:none}   /* свечение — тенью самой строки по её форме (с уголком), а не прямоугольником */
a.jc-deal__title:focus-visible::after{opacity:1;outline:2px solid #06323c;outline-offset:3px}
/* фокус с клавиатуры — рамка 2px по форме бирки (скосы, отверстие); прямоугольная обводка — там, где нет :has() */
@supports selector(:has(*)){
  .jc-deal:has(.jc-deal__title:focus-visible){--g-bw:2px;--g-line:#06323c}
  a.jc-deal__title:focus-visible::after{outline:none}
}

/* ---- «Посмотреть акцию ›» ---- */
/* Как на прежнем сайте: заливка фирменным #FF0583, белый жирный текст, кнопка-стрелка (острый край к краю строки) */
.jc-deal__go{border:0;background:#FF0583;color:#fff;border-radius:10px 0 0 10px;padding:10px 12px;padding-inline:18px 30px;
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%);
  filter:drop-shadow(0 2px 3px rgba(255,5,131,.25));
  transition:background-color .15s}
[dir="rtl"] .jc-deal__go{border-radius:0 10px 10px 0;clip-path:polygon(13px 0,100% 0,100% 100%,13px 100%,0 50%)}
.jc-deal__go:dir(rtl){border-radius:0 10px 10px 0;clip-path:polygon(13px 0,100% 0,100% 100%,13px 100%,0 50%)}
.jc-deal__go .jc-i{display:none}   /* стрелка — сама форма кнопки */
[dir="rtl"] .jc-deal__go .jc-i{transform:scaleX(-1)}
.jc-deal__go .jc-i:dir(rtl){transform:scaleX(-1)}

/* ---- Наведение — только мышь (на телефоне после касания строка не «залипает» розовой и приподнятой).
   Наведение на ссылку домена — это переход на страницу магазина, а не на акцию: строку не трогаем ---- */
@media (hover:hover){
  .jc-deal:hover{--g-line:#F7A3CB;--g-seam:#F4B5D2;transform:translateY(-2px);filter:drop-shadow(0 1px 2px rgba(16,24,40,.07)) drop-shadow(0 8px 10px rgba(214,0,107,.20))}
  .jc-deal:hover a.jc-deal__title::after{opacity:1}
  .jc-deal:hover .jc-deal__go{background:#E6007A}   /* как прежний hover:bg-pink-600 */
  @supports selector(:has(*)){
    .jc-deal:has(.jc-deal__dom:hover){--g-line:#D6DCE3;--g-seam:#F6C4DB;transform:none}
    .jc-deal:has(.jc-deal__dom:hover) a.jc-deal__title::after{opacity:0}
    .jc-deal:has(.jc-deal__dom:hover) .jc-deal__go{background:#FF0583}
  }
}

/* ---- Истёкшие (страница магазина): серость поверх своей тени, а не вместо неё ---- */
.jc-deal.jc-deal--exp{filter:grayscale(.6) drop-shadow(0 1px 2px rgba(16,24,40,.07))}

/* ---- Планшет: носик компактнее, чтобы колонке текста хватало места ---- */
@media (min-width:768px) and (max-width:1023.98px){
  .jc-deal{--g-n:18px;--g-hx:11px;--g-pad:27px;--g-w:104px;--g-ext:12px;--g-gap:12px;--g-glow:216px;--g-a:20px;padding-inline-end:calc(16px + var(--g-a))}
  .jc-deal__logo{height:56px}
  .jc-deal--own{--g-w:72px}
}

/* ---- Телефон: справа только стрелка; логотип в носике не мельче 48×40 ---- */
@media (max-width:767.98px){
  /* текст не уже, чем был: 18 + 56 + 6 + 8 = 88px до текста, справа 8 + 28 + 10 */
  .jc-deal{--g-n:14px;--g-r:3px;--g-hx:9px;--g-sx:5px;--g-sh:10px;--g-pad:18px;--g-w:56px;--g-ext:6px;--g-gap:8px;--g-glow:120px;--g-a:16px;
    padding:12px 10px;padding-inline-start:var(--g-pad);padding-inline-end:calc(8px + var(--g-a))}
  .jc-deal__logo{height:48px;padding:4px;border-radius:9px}
  .jc-deal__logo>span{margin-inline:-3px;font-size:10px;letter-spacing:-.02em}   /* название вместо логотипа: «Warehouse» целым словом */
  .jc-deal--own{--g-w:56px}
  .jc-deal .jc-val{min-height:48px}
  .jc-deal .jc-val b{font-size:20px}
  .jc-deal .jc-val b.sm{font-size:14px}
  .jc-deal .jc-val small{font-size:9.5px;letter-spacing:.04em}
  .jc-deal .jc-val .jc-i{width:22px;height:22px}
  /* стрелка — белый кружок с розовой каймой: на розовом отсвете строки светло-розовый кружок терялся */
  .jc-deal__go,.jc-deal__go:dir(rtl),[dir="rtl"] .jc-deal__go{width:28px;height:28px;padding:0;border:0;border-radius:50%;clip-path:none;background:#FF0583;color:#fff;justify-content:center}
  .jc-deal__go .jc-i{display:inline-block;width:18px;height:18px}
}
/* 320: строка уже — отсвет короче (та же треть строки, что на 390), иначе розовым становится почти половина */
@media (max-width:359.98px){.jc-deal{--g-glow:96px}}
@media (max-width:767.98px) and (hover:hover){
  .jc-deal:hover .jc-deal__go{background:#E6007A}
  @supports selector(:has(*)){.jc-deal:has(.jc-deal__dom:hover) .jc-deal__go{background:#FF0583}}
}

@media (prefers-reduced-motion:reduce){
  .jc-deal,.jc-deal__go,a.jc-deal__title::after{transition:none}
  .jc-deal:hover{transform:none}
}

/* ---- Высокая контрастность Windows: формы и тени убраны, контур сплошной ---- */
@media (forced-colors:active){
  .jc-deal,.jc-deal.jc-deal--exp{filter:none;border:1px solid CanvasText}
  .jc-deal::before,.jc-deal::after,.jc-deal__logo::before,.jc-deal__logo::after,.jc-deal .jc-val::before,.jc-deal .jc-val::after{display:none}
  .jc-deal__logo{box-shadow:none;border:1px solid CanvasText}
  .jc-deal__go{border:1px solid ButtonText;clip-path:none;filter:none}
  a.jc-deal__title::after{box-shadow:none}
  a.jc-deal__title:focus-visible::after{outline:2px solid Highlight}
}

/* =====================================================================================================
   4. ССЫЛКА НА СТРАНИЦУ МАГАЗИНА в карточках купонов и акций — видно, что это ссылка:
      голубой адрес со стрелкой «›», подчёркивание при наведении; логотип купона подсвечивается
   ===================================================================================================== */
.jc-cpn .jc-cpn__who>a,.jc-cpn a.jc-cpn__dom,.jc-deal a.jc-deal__dom{color:#00708a;font-weight:700}
.jc-cpn .jc-cpn__who>a::after,.jc-cpn a.jc-cpn__dom::after,.jc-deal a.jc-deal__dom::after{
  content:"\203A";display:inline-block;margin-inline-start:4px;font-weight:800}
[dir="rtl"] :is(.jc-cpn .jc-cpn__who>a,.jc-cpn a.jc-cpn__dom,.jc-deal a.jc-deal__dom)::after{transform:scaleX(-1)}
:is(.jc-cpn .jc-cpn__who>a,.jc-cpn a.jc-cpn__dom,.jc-deal a.jc-deal__dom):dir(rtl)::after{transform:scaleX(-1)}
.jc-cpn .jc-cpn__who>a:hover,.jc-cpn a.jc-cpn__dom:hover,.jc-deal a.jc-deal__dom:hover{color:#005a70;text-decoration:underline;text-underline-offset:2px}
.jc-cpn a.jc-cpn__logo:hover{border-color:#9EDFF0;box-shadow:0 0 0 2px #E0F7FD}