/* Общие компоненты сайта, дизайн v2: карточка купона .jc-cpn (раскладка), строка акции .jc-deal,
   карточка магазина .jc-store, плашка кешбэка .jc-cb, метки .jc-tag, окно купона .jc-dlg,
   вставка-призыв .jc-promo / .jp-cta, пагинация .jc-pg, чипы .jc-chip, пустой список .jc-empty, иконки .jc-i.
   Статический файл, а не resources/css/app.css: Tailwind собран Vite, сборку не пересобираем.
   Подключается в layouts/app на всех страницах ДО страничных файлов (home-v2.css и т. п.).
   Форма карточки купона (фон, рамка, тень, скругления, вырезы) — отдельно, в jc-coupon.css.
   Кнопка кода — тёмный текст #06323c на фирменном голубом #0BCDF3 (контраст 7,2 : 1).
   Собирается из scratchpad/tools/jc-components.src.css (build_css.py подставляет иконки). */

:root{--jc-cyan:#0BCDF3;--jc-cyan-hover:#0ab8da;--jc-cyan-ink:#06323c;--jc-pink:#FF0583;--jc-ink:#17171f;--jc-text:#5b6169;--jc-muted:#6b7280;--jc-line:#eef0f3}

/* Размеры считаем с рамкой и полями — и там, где preflight Tailwind не загружен (вставки в чужой разметке) */
.jc-cpn,.jc-cpn *,.jc-deal,.jc-deal *,.jc-store,.jc-store *,.jc-promo,.jc-promo *,.jp-cta,.jp-cta *,.jc-pg,.jc-pg *,.jc-dlg,.jc-dlg *,.jc-btn,.jc-chip,.jc-empty{box-sizing:border-box}

/* Видимость по ширине: jc-d — только ПК/планшет, jc-m — только телефон */
@media (max-width:767.98px){.jc-d{display:none!important}}
@media (min-width:768px){.jc-m{display:none!important}}

/* ---------- Иконки: одна копия SVG здесь вместо повторов в каждой карточке.
   Одноцветные — маской (цвет = currentColor), цветные — фоном.
   --down — шеврон (выпадающие списки, <details>); --like / --dislike — голосование. ---------- */
.jc-i{display:inline-block;flex:none;width:16px;height:16px;vertical-align:-3px;background-color:currentColor;-webkit-mask:var(--jc-i) center/contain no-repeat;mask:var(--jc-i) center/contain no-repeat}
.jc-i--arrow{--jc-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 4.5L13 10l-5.5 5.5'/%3E%3C/svg%3E")}
.jc-i--right{--jc-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 4.5L13 10l-5.5 5.5'/%3E%3C/svg%3E")}
.jc-i--left{--jc-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 4.5L7 10l5.5 5.5'/%3E%3C/svg%3E")}
.jc-i--x{--jc-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5l10 10M15 5L5 15'/%3E%3C/svg%3E")}
.jc-i--check{--jc-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0l-3.5-3.5a1 1 0 111.4-1.4l2.8 2.8 6.8-6.8a1 1 0 011.4 0z'/%3E%3C/svg%3E")}
.jc-i--down{--jc-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E")}
.jc-i--like{--jc-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5'/%3E%3C/svg%3E")}
.jc-i--dislike{--jc-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5'/%3E%3C/svg%3E")}
.jc-i--tag{--jc-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h.01M7 3h5a1.99 1.99 0 011.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z'/%3E%3C/svg%3E")}
.jc-i--coin{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23F5B300'/%3E%3Cpath d='M10 5.5v9M7.5 8c0-1 1.1-1.7 2.5-1.7s2.5.7 2.5 1.7-1 1.4-2.5 1.7-2.5.8-2.5 1.8 1.1 1.7 2.5 1.7 2.5-.7 2.5-1.7' stroke='%23fff' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:none;mask:none}

/* ---------- Кнопки ---------- */
.jc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:10px;font:600 16px/1.1 Inter,system-ui,sans-serif;padding:14px 22px;text-decoration:none;cursor:pointer;border:0;transition:background .15s,transform .15s,box-shadow .15s;text-align:center}
.jc-btn img{width:22px;height:22px;flex:none}
.jc-btn--pink{background:var(--jc-pink);color:#fff;box-shadow:0 4px 0 #ffafd7}
.jc-btn--pink:hover{background:#e6007a;color:#fff;transform:translateY(2px);box-shadow:0 2px 0 #ffafd7}
.jc-btn--ghost{background:rgba(255,255,255,.9);color:#242a2b;box-shadow:inset 0 0 0 1.5px #e2e3ea}
.jc-btn--ghost:hover{color:#242a2b;box-shadow:inset 0 0 0 1.5px #c9cbd6}
.jc-btn--cyan{background:var(--jc-cyan);color:var(--jc-cyan-ink);font-weight:700}
.jc-btn--cyan:hover{background:var(--jc-cyan-hover);color:var(--jc-cyan-ink)}
.jc-btn--sm{font-size:14px;padding:11px 16px;box-shadow:none}
.jc-btn--sm img{width:20px;height:20px}
.jc-btn--ghost.jc-btn--sm{box-shadow:inset 0 0 0 1.5px #e2e3ea}
.jc-btn:focus-visible,.jc-pg a:focus-visible,.jc-store:focus-visible,.jc-chip:focus-visible{outline:2px solid var(--jc-cyan-ink);outline-offset:2px}

/* ---------- Заголовок секции и «Все …» (главная, «Ещё магазины с кешбэком») ---------- */
.jc-sec__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.jc-sec__head h2{margin:0;font:800 20px/1.2 Inter,sans-serif;color:var(--jc-ink);letter-spacing:-.01em}
@media (min-width:768px){.jc-sec__head h2{font-size:24px}}
.jc-sec__head h2 a{color:inherit;text-decoration:none}
.jc-more{display:inline-flex;align-items:center;gap:2px;font-size:14px;font-weight:700;color:#7a5a00;text-decoration:none;white-space:nowrap}
.jc-more:hover{text-decoration:underline}
.jc-more .jc-i{width:16px;height:16px}
/* #00708a — 5,1 : 1 на фоне секций #f3f3f3 (#00809e давал 4,1 : 1) */
.jc-more--cyan{color:#00708a}
.jc-more--pink{color:#d6006b}

/* ---------- Плашка кешбэка — одна на сайте. dir="auto" в разметке: арабская строка
   с «3.8%» в LTR-странице иначе отрывает знак процента; отсюда и padding-inline.
   Переносится, а не обрезается: в узкой карточке многоточие съедало саму ставку
   («Cashback hingga 22,…»). Радиус 14px — для одной строки та же «таблетка» ---------- */
.jc-cb{display:inline-flex;align-items:center;gap:5px;background:#FFF1C2;color:#5c4200;font-weight:700;font-size:12.5px;line-height:1.15;border-radius:14px;padding:6px 10px;padding-inline-start:7px;max-width:100%}
.jc-cb .jc-i{width:15px;height:15px}
.jc-cb--none{visibility:hidden}
.jc-cb--sm{font-size:12px;padding:4px 8px;padding-inline-start:5px}
.jc-cb--sm .jc-i{width:13px;height:13px}
.jc-cb-slot{display:block;min-height:20px;max-width:100%}
.jc-cb-slot:empty{min-height:0}

/* ---------- Карточка магазина ---------- */
.jc-stores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){.jc-stores{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){.jc-stores{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
@media (min-width:1024px){.jc-stores{grid-template-columns:repeat(5,minmax(0,1fr))}}
.jc-store{display:flex;flex-direction:column;align-items:center;background:#fff;border:1.5px solid transparent;border-radius:16px;padding:14px 10px 12px;text-decoration:none;box-shadow:0 1px 2px rgba(16,24,40,.06);transition:border-color .15s,box-shadow .15s;min-width:0}
.jc-store:hover{border-color:#ffc2e0;box-shadow:0 6px 18px rgba(255,5,131,.08)}
.jc-store__logo{height:50px;display:flex;align-items:center;justify-content:center;width:100%;margin-bottom:8px}
.jc-store__logo img{max-width:132px;max-height:44px;width:auto;height:auto;object-fit:contain}
.jc-store__txt{font:800 17px/1.1 Nunito,Inter,sans-serif;color:#242a2b;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.jc-store__dom{font-size:13.5px;font-weight:600;color:#242a2b;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Серый #6b7280 — 4,8 : 1 на белом. В узкой карточке строка переносится между частями
   (каждая — свой <span>), а не обрезается многоточием: «70 Angebote · 1 Gutschein» на 360 px не влезает */
.jc-store__meta{font-size:12px;color:var(--jc-muted);margin:2px 0 10px;max-width:100%;text-align:center;line-height:1.35}
.jc-store__meta>span{white-space:nowrap}
/* margin-top:auto — плашки кешбэка в ряду карточек на одной линии, даже если строка выше перенеслась */
.jc-store .jc-cb{text-align:center;margin-top:auto}
@media (min-width:768px){.jc-store{padding:18px 12px 14px}.jc-store__logo{height:58px}}

/* ---------- Карточка купона: раскладка и типографика. Форма (фон, рамка, тень, скругления,
   вырезы, перфорация) — в jc-coupon.css ---------- */
.jc-cpns{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.jc-cpns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.jc-cpns{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.jc-cpns>.jc-deal,.jc-cpns>.jc-promo,.jc-cpns>.jc-empty{grid-column:1/-1}
.jc-cpn{display:flex;flex-direction:column;padding:16px;cursor:pointer;min-width:0}
@media (max-width:767.98px){.jc-cpn{padding:14px}}
.jc-cpn__top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.jc-cpn--own .jc-cpn__top{align-items:flex-start;gap:14px}
.jc-cpn__logo{flex:none;width:68px;height:44px;border:1px solid var(--jc-line);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:5px;background:#fff;text-decoration:none;overflow:hidden}
.jc-cpn__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.jc-cpn__who{min-width:0;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.jc-cpn__who>a,.jc-cpn__dom{font-size:13.5px;font-weight:700;color:#3f444b;text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc-cpn__who>a:hover{text-decoration:underline}
.jc-fl{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;margin-inline-end:5px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.jc-ver{margin-left:auto;flex:none;width:22px;height:22px;align-self:flex-start}
/* Значок — фоном у пустого span партиалов; у разметки со вложенным <svg> (главная до перехода) — её svg */
.jc-ver:empty{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2316a34a' fill-rule='evenodd' d='M8.6 3.8A4.5 4.5 0 0112 2.25c1.36 0 2.57.6 3.4 1.55a4.5 4.5 0 014.8 4.8A4.5 4.5 0 0121.75 12c0 1.36-.6 2.57-1.55 3.4a4.5 4.5 0 01-4.8 4.8A4.5 4.5 0 0112 21.75c-1.36 0-2.57-.6-3.4-1.55a4.5 4.5 0 01-4.8-4.8A4.5 4.5 0 012.25 12c0-1.36.6-2.57 1.55-3.4a4.5 4.5 0 014.8-4.8zm7 6.39a.75.75 0 10-1.22-.87l-3.24 4.53-1.6-1.6a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.1l3.75-5.25z' clip-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat}
.jc-ver--sm{width:15px;height:15px;margin:0;align-self:center;display:inline-block}
.jc-cpn__body{min-width:0}
.jc-cpn--own .jc-cpn__body{flex:1}
.jc-cpn__title{font-size:16.5px;font-weight:700;line-height:1.3;color:var(--jc-ink);margin:0 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jc-cpn--own .jc-cpn__title{font-size:16px}
.jc-cpn__desc{font-size:14px;color:var(--jc-text);line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jc-cpn>.jc-cpn__body+.jc-tags{margin-top:10px}
/* Низ карточки — «отрывная часть» талона: кнопка кода и строка с кешбэком/«Работает у N%».
   margin-top:auto прижимает её к низу, если соседняя карточка в ряду выше */
.jc-cpn__foot{margin-top:auto;padding-top:14px}
.jc-cpn__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;min-height:24px;font-size:12.5px;color:var(--jc-muted)}
.jc-cpn__works{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:#15803d;white-space:nowrap}
.jc-cpn__works .jc-i{width:15px;height:15px}
.jc-logo-txt{font-size:11px;font-weight:800;color:#0a7f99;text-align:center;line-height:1.1;overflow:hidden}
/* Длинное название вместо логотипа — не больше двух строк (у главной до перехода на партиалы — как было) */
[data-jc-cpn] .jc-logo-txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
/* Значок выгоды вместо логотипа на странице самого магазина */
.jc-val{flex:none;width:72px;height:68px;border-radius:12px;background:#E6FAFE;color:#005f75;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center}
.jc-val b{font:900 22px/1 Nunito,Inter,sans-serif;letter-spacing:-.01em}
.jc-val b.sm{font-size:15px}
.jc-val small{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.jc-val .jc-i{width:26px;height:26px}
@media (max-width:767.98px){.jc-val{width:64px;height:62px}}

/* Метки: срок, условия, событие */
.jc-tags{display:flex;flex-wrap:wrap;gap:6px}
.jc-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;line-height:1;border-radius:6px;padding:5px 8px;background:#f3f4f6;color:#4b5563}
.jc-tag .jc-i{width:13px;height:13px}
.jc-tag--warn{background:#FFF6DB;color:#7c5800}
.jc-tag--hot{background:#FFE3EE;color:#c80050}
.jc-tag--soon{background:#FFEFE2;color:#a84a06}
.jc-tag--ok{background:#E8F7EE;color:#15803d}
.jc-tag--ev{background:#FFF4E5;color:#8a4b00}

/* Кнопка кода: слева «Получить код» (#06323c на #0BCDF3), справа хвост кода (#005f75 на #effbfe).
   После клика — «Скопировано!» белым на #15803d и код целиком */
.jc-code{display:flex;align-items:stretch;width:100%;height:46px;border:0;padding:0;cursor:pointer;font:inherit;background:none;border-radius:10px}
.jc-code__lbl{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;background:var(--jc-cyan);color:var(--jc-cyan-ink);font-weight:700;font-size:15px;border-radius:10px 0 0 10px;transition:background .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
.jc-code__lbl:last-child{border-radius:10px}
.jc-code__peek{flex:none;min-width:82px;max-width:62%;padding:0 10px;display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--jc-cyan);border-left:0;border-radius:0 10px 10px 0;color:#005f75;font:800 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;background:#effbfe;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jc-cpn:hover .jc-code__lbl,[data-jc-cpn] .jc-code:focus-visible .jc-code__lbl{background:var(--jc-cyan-hover)}
[data-jc-cpn] .jc-code:focus-visible{outline:2px solid var(--jc-cyan-ink);outline-offset:2px}
.jc-cpn.is-open .jc-code__lbl{background:#15803d;color:#fff}
.jc-cpn.is-open .jc-code__peek{border-color:#15803d;color:#14532d;background:#f0fdf4;letter-spacing:.02em}

/* ---------- Строка акции. «Растянутая ссылка»: ::after заголовка накрывает строку,
   ссылка на магазин (домен) — поверх него ---------- */
.jc-deals{display:flex;flex-direction:column;gap:10px}
.jc-deal{position:relative;display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;padding:12px 14px;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(16,24,40,.06);border:1.5px solid transparent;transition:border-color .15s}
@media (hover:hover){.jc-deal:hover{border-color:#ffc2e0;color:inherit}}
.jc-deal__logo{flex:none;width:60px;height:52px;border:1px solid var(--jc-line);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:6px;align-self:flex-start;overflow:hidden;background:#fff}
.jc-deal__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.jc-deal__logo span{font-size:11px;font-weight:700;color:#242a2b;text-align:center;line-height:1.15;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.jc-deal .jc-val{width:60px;height:56px;align-self:flex-start}
.jc-deal .jc-val b{font-size:19px}
.jc-deal .jc-val b.sm{font-size:15px}   /* иначе правило выше перебивает .jc-val b.sm и длинная цена не влезает */
.jc-deal__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.jc-deal__store{font-size:12.5px;color:var(--jc-muted);font-weight:600;display:flex;align-items:center;gap:4px;min-width:0}
.jc-deal__dom,.jc-deal__store>a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Домен акции #6b7280 на белом — 4,8 : 1. z-index:2 — над «растянутой» ссылкой заголовка */
.jc-deal__store>a{position:relative;z-index:2;color:inherit;text-decoration:none}
.jc-deal__store>a:hover{color:var(--jc-ink);text-decoration:underline}
/* Телефон: область нажатия ссылки на магазин — не меньше 24px по высоте, строка от этого не растёт */
@media (max-width:767.98px){.jc-deal__store>a{padding-block:5px;margin-block:-5px}}
/* Значок «Проверено» у домена — над растянутой ссылкой, чтобы мышью была видна подсказка; на тач-экранах подсказок нет, там тап по значку открывает акцию */
@media (hover:hover){.jc-deal__store .jc-ver{position:relative;z-index:2}}
.jc-deal__title{font-size:15.5px;font-weight:700;color:var(--jc-ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
a.jc-deal__title{text-decoration:none}
/* z-index:1, а не 0: иконки с mask (.jc-i) и плашки образуют свои слои и иначе перехватывали бы клик */
a.jc-deal__title::after{content:"";position:absolute;inset:0;z-index:1;border-radius:16px}
/* Иконки-маски и «Посмотреть акцию» — только картинка: клик по ним уходит в ссылку заголовка под ними */
.jc-deal .jc-i,.jc-deal__go{pointer-events:none}
a.jc-deal__title:focus-visible{outline:none}
a.jc-deal__title:focus-visible::after{outline:2px solid var(--jc-cyan-ink);outline-offset:2px}
.jc-deal__desc{font-size:13.5px;color:var(--jc-text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.jc-deal .jc-tags{margin-top:5px}
.jc-deal__go{flex:none;display:inline-flex;align-items:center;gap:6px;color:#d6006b;font-weight:700;font-size:14px;white-space:nowrap}
.jc-deal__go .jc-i{width:20px;height:20px}
@media (min-width:768px){
  .jc-deal{padding:16px 20px;gap:20px}
  .jc-deal__logo{width:132px;height:64px;align-self:center}
  .jc-deal .jc-val{width:72px;height:64px;align-self:center}
  .jc-deal__go{border:1.5px solid #ffc2e0;background:#fff5fa;border-radius:10px;padding:10px 12px;padding-inline-start:16px}
  .jc-deal__go .jc-i{width:16px;height:16px}
}
@media (min-width:768px) and (hover:hover){.jc-deal:hover .jc-deal__go{background:var(--jc-pink);border-color:var(--jc-pink);color:#fff}}

/* Истёкшие (страница магазина) */
.jc-cpn--exp,.jc-deal--exp{opacity:.62;filter:grayscale(.6)}
.jc-cpn--exp:hover,.jc-deal--exp:hover{opacity:.85}

/* ---------- Пустой список ---------- */
.jc-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 20px;border-radius:16px;background:#fff;border:1.5px dashed #e2e3ea;text-align:center;color:var(--jc-text);font-size:15px;line-height:1.5}
.jc-empty>b,.jc-empty>strong{font-size:17px;color:var(--jc-ink)}
.jc-empty>p{margin:0;max-width:34rem}
.jc-empty .jc-btn{margin-top:4px}
@media (max-width:767.98px){.jc-empty{padding:24px 16px;font-size:14.5px}}

/* ---------- Вставка-призыв в списках и блоге ---------- */
.jc-promo{grid-column:1/-1;display:flex;align-items:center;gap:18px;border-radius:16px;padding:18px 22px;background:linear-gradient(100deg,#FFF6D6 0%,#FFE9A6 70%,#FFDD7A 100%);border:1px solid #FFE08A}
.jc-promo__ic{flex:none;width:52px;height:52px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.jc-promo__ic img{width:36px;height:36px}
.jc-promo__tx{flex:1;min-width:0}
.jc-promo__tx b{display:block;font:800 18px/1.25 Nunito,Inter,sans-serif;color:var(--jc-ink)}
.jc-promo__tx p{margin:3px 0 0;font-size:14px;line-height:1.45;color:#5b4a14}
.jc-promo .jc-btn{flex:none}
.jc-deals .jc-promo{margin:2px 0}
@media (max-width:767.98px){
  .jc-promo{flex-wrap:wrap;padding:16px;gap:12px}
  .jc-promo__ic{width:44px;height:44px}.jc-promo__ic img{width:30px;height:30px}
  .jc-promo__tx{flex:1 1 calc(100% - 60px)}
  .jc-promo__tx b{font-size:16.5px}
  .jc-promo .jc-btn{width:100%}
  html.jc-authed .jc-promo,html.jc-authed .jp-cta{display:none}
}
/* В конце статьи блога: текст, шаги 1–2–3 (статья-инструкция) и кнопки */
.jp-cta{margin-top:28px;border-radius:16px;padding:22px 24px;background:linear-gradient(100deg,#FFF6D6 0%,#FFE9A6 100%);border:1px solid #FFE08A;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.jp-cta__tx{min-width:0}
.jp-cta b{display:block;font:800 19px/1.25 Nunito,Inter,sans-serif;color:var(--jc-ink)}
.jp-cta p{margin:4px 0 0;font-size:15px;line-height:1.5;color:#5b4a14}
.jp-cta__btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.jp-cta .jc-btn{flex:none}
.jp-steps{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:13.5px;font-weight:600;color:#5b4a14}
.jp-steps span{display:inline-flex;align-items:center;gap:6px}
.jp-steps i{font-style:normal;width:20px;height:20px;border-radius:50%;background:#fff;color:#8a5a00;display:inline-flex;align-items:center;justify-content:center;font:800 11.5px/1 Inter,sans-serif}
@media (max-width:767.98px){
  .jp-cta{align-items:stretch;padding:18px}
  .jp-cta__btns{flex-direction:column;align-items:stretch}
  .jp-cta .jc-btn{width:100%;padding:14px 12px;font-size:15px}
}

/* ---------- Чипы-подборки (списки — <button data-jc-href>, блог — <a>) ---------- */
.jc-fbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.jc-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;margin:0 -16px;padding:2px 16px}
.jc-chips::-webkit-scrollbar{display:none}
@media (min-width:640px) and (max-width:767.98px){.jc-chips{margin:0 -24px;padding:2px 24px}}
@media (min-width:768px){.jc-fbar{margin-bottom:22px}.jc-chips{margin:0;padding:2px 0;flex-wrap:wrap;overflow:visible}}
.jc-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;background:#fff;border:1.5px solid #e6e8ec;font:600 14px/1 Inter,sans-serif;color:#3f444b;text-decoration:none;white-space:nowrap;cursor:pointer}
button.jc-chip{-webkit-appearance:none;appearance:none;font:600 14px/1 Inter,sans-serif;cursor:pointer;margin:0}
.jc-chip:hover{border-color:#c9cbd6;color:#3f444b}
.jc-chip.on,.jc-chip[aria-pressed=true]{background:#242a2b;border-color:#242a2b;color:#fff}
.jc-chip img{width:16px;height:16px;border-radius:50%}
.jc-chip svg,.jc-chip .jc-i{width:16px;height:16px;flex:none}
.jc-chip--ev{background:#FFF4E5;border-color:#FFD9A8;color:#8a4b00}
.jc-chip--ev:hover{color:#8a4b00}
.jc-chip--ev i{width:8px;height:8px;border-radius:50%;background:#F08A00;display:block}
.jc-chip--icon{padding:0 12px}
/* Число в рубрике блога — серое; счётчик активных фильтров (списки) — розовый кружок */
.jc-chip__n{color:#8a8f98;font-weight:500}
.jc-chip.on .jc-chip__n,.jc-chip[aria-pressed=true] .jc-chip__n{color:#c9cbd6}
.jc-chip__badge{min-width:18px;height:18px;border-radius:9px;background:#FF0583;color:#fff;font:700 11px/18px Inter,sans-serif;text-align:center;padding:0 5px}

/* ---------- Пагинация: счётчик, «Показать ещё», номера по центру ---------- */
.jc-pg{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px}
.jc-pg__info{margin:0;font-size:13.5px;color:var(--jc-muted)}
.jc-pg__more{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 28px;border-radius:12px;background:#fff;border:1.5px solid #e2e3ea;font:700 15px/1.2 Inter,sans-serif;color:var(--jc-ink);text-decoration:none;min-width:260px;text-align:center}
.jc-pg__more:hover{border-color:#c9cbd6;color:var(--jc-ink)}
.jc-pg__more[aria-busy=true]{opacity:.6;pointer-events:none}
.jc-pg__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;align-items:center}
.jc-pg__nav a,.jc-pg__nav span{min-width:44px;height:44px;padding:0 6px;display:flex;align-items:center;justify-content:center;border-radius:12px;font:600 15px/1 Inter,sans-serif;color:#3f444b;text-decoration:none}
.jc-pg__nav a{background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.jc-pg__nav a:hover{background:#effbfe;color:var(--jc-ink)}
.jc-pg__nav .cur{background:#242a2b;color:#fff}
.jc-pg__nav .is-off{color:#c4c7cf}
.jc-pg__nav .jc-pg__gap{min-width:24px;color:#8a8f98}
.jc-pg__nav .jc-i{width:18px;height:18px}
[dir=rtl] .jc-pg__nav .jc-i--left,[dir=rtl] .jc-pg__nav .jc-i--right{transform:scaleX(-1)}
@media (max-width:767.98px){.jc-pg__more{width:100%;min-width:0}}

/* ---------- Окно купона (после «Получить код») ---------- */
.jc-dlg{border:0;padding:0;margin:auto;border-radius:20px;width:min(440px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);background:#fff;color:var(--jc-ink);box-shadow:0 24px 60px rgba(16,24,40,.25);overflow:auto}
.jc-dlg::backdrop{background:rgba(17,17,31,.55)}
.jc-dlg__in{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 20px 18px}
.jc-dlg__x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;border-radius:10px;background:none;color:var(--jc-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.jc-dlg__x:hover{background:#f3f4f6;color:var(--jc-ink)}
.jc-dlg__x .jc-i{width:20px;height:20px}
.jc-dlg__store{margin:0 44px 0 0;font-size:13px;font-weight:700;color:var(--jc-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc-dlg__title{margin:-6px 44px 0 0;font:800 18px/1.3 Inter,sans-serif;color:var(--jc-ink)}
.jc-dlg__code{display:flex;align-items:stretch;border:1.5px dashed var(--jc-cyan);border-radius:12px;background:#effbfe;overflow:hidden}
.jc-dlg__val{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:12px;font:800 22px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--jc-cyan-ink);word-break:break-all;text-align:center;user-select:all;-webkit-user-select:all}
.jc-dlg__copy{flex:none;border:0;background:var(--jc-cyan);color:var(--jc-cyan-ink);font:700 15px/1 Inter,sans-serif;padding:0 18px;cursor:pointer;min-height:52px}
.jc-dlg__copy:hover{background:var(--jc-cyan-hover)}
.jc-dlg__copy:focus-visible,.jc-dlg__x:focus-visible,.jc-dlg__vote button:focus-visible{outline:2px solid var(--jc-cyan-ink);outline-offset:2px}
.jc-dlg__hint{margin:0;font-size:13.5px;line-height:1.45;color:var(--jc-text)}
.jc-dlg__go{width:100%}
.jc-dlg__go .jc-i{width:18px;height:18px}
.jc-dlg__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.jc-dlg__cbgo{font-size:13px;font-weight:700;color:#7a5a00;text-decoration:underline;text-underline-offset:2px}
.jc-dlg__cond{font-size:13px;color:var(--jc-text)}
.jc-dlg__cond summary{cursor:pointer;font-weight:600;color:#3f444b}
.jc-dlg__cond p{margin:6px 0 0;line-height:1.5;white-space:pre-line}
.jc-dlg__vote{display:flex;flex-wrap:wrap;align-items:center;gap:6px;border-top:1px solid var(--jc-line);padding-top:12px;font-size:14px;color:#3f444b}
.jc-dlg__vote>span:first-child{margin-right:auto;font-weight:600}
.jc-dlg__vote button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:10px;border:1.5px solid #e2e3ea;background:#fff;color:#3f444b;font:600 14px/1 Inter,sans-serif;cursor:pointer}
.jc-dlg__vote button:hover{border-color:#c9cbd6}
.jc-dlg__vote button[data-jc-vote=up][aria-pressed=true]{background:#E8F7EE;border-color:#86d19f;color:#15803d}
.jc-dlg__vote button[data-jc-vote=down][aria-pressed=true]{background:#FFE3EE;border-color:#f5a3c4;color:#c80050}
.jc-dlg__thanks{flex-basis:100%;font-size:13px;color:#15803d}
/* Телефон — снизу, как лист */
@media (max-width:639.98px){
  .jc-dlg{width:100%;max-width:100%;margin:auto 0 0;border-radius:20px 20px 0 0;max-height:92dvh}
  .jc-dlg__in{padding:20px 16px calc(16px + env(safe-area-inset-bottom))}
}