/**
 * ELBIN Redesign 2 — Hero №2 (Фото з хотспотами)
 *
 * Стилі для shortcode [elbin_r2_hero]. Префікс hh- (з дизайну hero-hotspots.jsx).
 * Дизайн-токени (--surface/--accent/…) мапляться на --elbin-r2-* у .hh-hero-wrap.
 * @container page(…) дизайну → звичайні @media(…) для теми.
 *
 * Тут також лишається базовий .elbin-r2-btn (його використовують search.php та
 * page-templates/info.php — тому файл вантажиться як їхня залежність).
 */

/* === FRONT-PAGE SPACING OVERRIDE === */

.ct-container-full:has(.elbin-r2-hero) {
    padding-top: 0 !important;
}

/* === МАПІНГ ДИЗАЙН-ТОКЕНІВ → --elbin-r2-* === */

.hh-hero-wrap {
    --surface:       var(--elbin-r2-surface);
    --surface-2:     var(--elbin-r2-surface-2);
    --surface-3:     var(--elbin-r2-surface-3);
    --line:          var(--elbin-r2-line);
    --text:          var(--elbin-r2-text);
    --text-2:        var(--elbin-r2-text-2);
    --text-3:        var(--elbin-r2-text-3);
    --accent:        var(--elbin-r2-accent);
    --accent-hover:  var(--elbin-r2-accent-hover);
    --accent-deep:   var(--elbin-r2-accent-700);
    --accent-tint:   var(--elbin-r2-accent-50);
    --ink-on-accent: var(--elbin-r2-ink-on-accent);
    --font-ui:       var(--elbin-r2-font-ui);
    --font-mono:     var(--elbin-r2-font-mono);
    --r-control:     var(--elbin-r2-r-control);
    --r-card:        var(--elbin-r2-r-card);
    --r-pill:        var(--elbin-r2-r-pill);
    --sh-card:       var(--elbin-r2-sh-card);
    --sh-modal:      var(--elbin-r2-sh-modal);
}

.hh-hero-wrap { background: var(--surface); padding: 36px 0 56px; }
.hh-topmeta {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--line);
    font: 500 11px/1 var(--font-mono); color: var(--text-3); letter-spacing: .16em;
}

/* ── Герой-блок: велике фото-вітрина ── */
.hh-hero {
    position: relative; height: 600px;
    border-radius: 16px; background: #171717;
    box-shadow: var(--sh-card);
}

/* ── Фото ── .hh-photo без обрізки, щоб картки виходили за межі фото;
   радіус, обрізку Ken Burns та віньєтку тримає внутрішній .hh-clip. */
.hh-photo { position: absolute; inset: 0; }
.hh-clip { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; }
/* .hh-bg — шар фото, що зміщується в паралаксі (±8px за курсором) */
.hh-bg {
    position: absolute; inset: 0;
    transform: translate3d(var(--hh-ppx, 0px), var(--hh-ppy, 0px), 0);
    will-change: transform;
}
/* .hh-peg — реальне фото пегборда; PHP інлайнить URL-и через CSS-vars
   (--peg-m/--peg-d), медіа-перемикання тут (LCP: моб бере 960w-webp).
   Поріг 768 навмисно НЕ збігається з лейаут-брейкпоінтом 1200 — панель
   планшета 900–1199 у стеку ~1150px завширшки, 960w там мильна.
   Media-запити мають ДОСЛІВНО збігатися з preload у enqueue.php.
   Ken Burns: повільний зум-пан. Масштаб ≥1.04 завжди перекриває край, тож
   зсув паралаксу (і край фото) не оголюється. */
.hh-peg {
    position: absolute; inset: 0;
    background: #181818 center / cover no-repeat;
    background-image: var(--peg-m);
    transform-origin: 55% 48%;
    animation: hh-kenburns 26s ease-in-out infinite;
    will-change: transform;
}
@media (min-width: 768px) {
    .hh-peg { background-image: var(--peg-d); }
}
@keyframes hh-kenburns {
    0%   { transform: scale(1.04) translate3d(0, 0, 0); }
    50%  { transform: scale(1.06) translate3d(-1.1%, -0.55%, 0); }
    100% { transform: scale(1.04) translate3d(0, 0, 0); }
}
.hh-clip::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 16px;
    box-shadow: inset 0 0 130px rgba(0,0,0,.55);
}

/* затемнення зліва — щоб текст читався поверх фото */
.hh-scrim {
    position: absolute; inset: 0; z-index: 3; border-radius: 16px; pointer-events: none;
    background: linear-gradient(90deg,
        rgba(15,15,16,.94) 0%, rgba(15,15,16,.88) 26%,
        rgba(15,15,16,.45) 45%, rgba(15,15,16,0) 60%);
}

/* ── Текстовий блок (накладений зліва) ── */
.hh-copy {
    position: absolute; left: 40px; top: 50%; transform: translateY(-50%);
    z-index: 6; width: 390px; max-width: calc(100% - 80px);
}
.hh-copy-inner { animation: hh-copy-in .55s cubic-bezier(.16, 1, .3, 1) .05s both; }
@keyframes hh-copy-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.hh-title {
    margin: 0; font: 800 50px/1.02 var(--font-ui); letter-spacing: -0.03em; color: #fff;
}
.hh-title .dot { color: var(--accent); }
.hh-sub {
    margin: 16px 0 0; font: 400 15px/1.55 var(--font-ui); color: rgba(255,255,255,.66);
    max-width: 410px;
}
/* Proof-бар: живі цифри магазину (замінив дубль-пошук, рішення 09.07) */
.hh-proof {
    margin-top: 24px; display: flex; align-items: stretch; gap: 0; max-width: 410px;
}
.hh-proof-item {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; gap: 5px;
    flex: 1; min-width: 0;
    padding: 0 14px;
    border-left: 1px solid rgba(255,255,255,.14);
}
.hh-proof-item:first-child { border-left: none; }
.hh-proof-num {
    font: 800 22px/1 var(--font-mono); color: var(--accent); letter-spacing: -0.01em;
    white-space: nowrap;
}
.hh-proof-lbl { font: 500 12px/1.2 var(--font-ui); color: rgba(255,255,255,.6); }

.hh-cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; max-width: 410px; }
.hh-catbtn {
    height: 52px; border: none; border-radius: var(--r-control); cursor: pointer;
    background: var(--accent); color: var(--ink-on-accent);
    font: 700 14px/1 var(--font-ui); letter-spacing: .01em;
    padding: 0 26px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    text-decoration: none; transition: background .15s, transform .12s;
    flex: 1 1 auto;
}
/* color: глобальний a:hover Blocksy фарбує лінк у бірюзу → текст зливався з фоном */
.hh-catbtn:hover { background: var(--accent-hover); color: var(--ink-on-accent); transform: translateY(-1px); }
/* Другорядна кнопка на акційні товари (?sale=1) */
.hh-salebtn {
    height: 52px; border-radius: var(--r-control); cursor: pointer;
    background: transparent; color: #fff;
    border: 1.5px solid rgba(255,255,255,.28);
    font: 700 14px/1 var(--font-ui); letter-spacing: .01em;
    padding: 0 22px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none; transition: border-color .15s, color .15s, transform .12s;
    flex: 1 1 auto;
}
.hh-salebtn .hh-pct {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--sale, #DB4437); color: #fff;
    font: 800 11px/1 var(--font-mono);
}
.hh-salebtn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.hh-hint {
    margin-top: 22px; display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 13px 8px 10px; border-radius: var(--r-pill);
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
    font: 500 12px/1.2 var(--font-ui); color: rgba(255,255,255,.82);
}
.hh-hint-dot {
    width: 13px; height: 13px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(26,208,202,.35);
}

/* ── Шар хотспотів ── */
.hh-dots {
    position: absolute; inset: 0; z-index: 12; pointer-events: none;
    transform: translate3d(var(--hh-mpx, 0px), var(--hh-mpy, 0px), 0);
    will-change: transform;
}
/* Трек точок «дихає» тим самим Ken Burns, що й фото (ідентичні keyframes/
   origin/тривалість) → гачки-піни тримаються отворів протягом усієї анімації.
   Позиції спотів у px рахує hero.js під background-size:cover. */
.hh-dots-track {
    position: absolute; inset: 0; pointer-events: none;
    transform-origin: 55% 48%;
    animation: hh-kenburns 26s ease-in-out infinite;
    will-change: transform;
}
/* вхідна поява точок (стагер, один раз при завантаженні) */
.hh-spot { position: absolute; width: 0; height: 0; opacity: 0; animation: hh-spot-in .42s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes hh-spot-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.hh-dots .hh-spot:nth-child(1) { animation-delay: .14s; }
.hh-dots .hh-spot:nth-child(2) { animation-delay: .22s; }
.hh-dots .hh-spot:nth-child(3) { animation-delay: .30s; }
.hh-dots .hh-spot:nth-child(4) { animation-delay: .38s; }
.hh-dots .hh-spot:nth-child(5) { animation-delay: .46s; }
.hh-spot:hover { z-index: 40; }
.hh-spot.is-open { z-index: 30; }
/* Невидима hover/click-зона накриває бирку, що висить нижче точки-гачка
   (від ~8px над точкою до ~118px під нею), + слугує містком до картки. */
.hh-hit {
    position: absolute; left: 0; top: 0; transform: translate(-50%, -8px);
    width: 152px; height: 168px; border-radius: 16px; pointer-events: auto; cursor: pointer;
}
.hh-dot {
    position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
    width: 30px; height: 30px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
    background: var(--accent); pointer-events: auto;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px rgba(255,255,255,.92), 0 4px 12px rgba(0,0,0,.4);
    transition: transform .15s, background .15s, box-shadow .15s;
}
/* пульсація: бірюзове кільце-«пінг» розходиться й згасає */
.hh-dot::before {
    content: ''; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid var(--accent); opacity: 0; pointer-events: none;
    animation: hh-ping 2.6s cubic-bezier(.2, .55, .3, 1) infinite;
}
@keyframes hh-ping {
    0%   { opacity: .5; transform: scale(1); }
    70%  { opacity: 0;  transform: scale(2.4); }
    100% { opacity: 0;  transform: scale(2.4); }
}
/* ядро точки ледь пульсує (в такт пінгу) */
.hh-dot::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-on-accent);
    transition: opacity .15s; animation: hh-core 2.6s ease-in-out infinite;
}
@keyframes hh-core { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
/* стагер пульсації — точки несинхронні */
.hh-dots .hh-spot:nth-child(1) .hh-dot::before, .hh-dots .hh-spot:nth-child(1) .hh-dot::after { animation-delay: 0s; }
.hh-dots .hh-spot:nth-child(2) .hh-dot::before, .hh-dots .hh-spot:nth-child(2) .hh-dot::after { animation-delay: 1.1s; }
.hh-dots .hh-spot:nth-child(3) .hh-dot::before, .hh-dots .hh-spot:nth-child(3) .hh-dot::after { animation-delay: .5s; }
.hh-dots .hh-spot:nth-child(4) .hh-dot::before, .hh-dots .hh-spot:nth-child(4) .hh-dot::after { animation-delay: 1.7s; }
.hh-dots .hh-spot:nth-child(5) .hh-dot::before, .hh-dots .hh-spot:nth-child(5) .hh-dot::after { animation-delay: .9s; }
/* активний стан точки (відкрита картка) */
.hh-spot.is-open .hh-dot {
    background: var(--accent-hover);
    transform: translate(-50%, -50%) scale(1.14);
    box-shadow: 0 0 0 5px #fff, 0 6px 18px rgba(0,0,0,.45);
}
/* hover/focus підсвічує точку лише на десктопі */
@media (min-width: 901px) {
    .hh-spot:hover .hh-dot, .hh-spot:focus-within .hh-dot {
        background: var(--accent-hover);
        transform: translate(-50%, -50%) scale(1.14);
        box-shadow: 0 0 0 5px #fff, 0 6px 18px rgba(0,0,0,.45);
    }
}
/* hover/focus/open — пінг і пульс ядра прибираємо */
.hh-spot:hover .hh-dot::before, .hh-spot:focus-within .hh-dot::before, .hh-spot.is-open .hh-dot::before { animation: none; opacity: 0; }
.hh-spot:hover .hh-dot::after, .hh-spot:focus-within .hh-dot::after, .hh-spot.is-open .hh-dot::after { animation: none; transform: scale(1); }

/* ── Фото-бирка (товар «висить» на пегборді) ──
   Гачок-кільце (акцентний маркер) → шнур → біла плитка з фото. Легке
   гойдання з півотом у гачку; ховер випрямляє й піднімає плитку. */
.hh-tile {
    position: absolute; left: 0; top: 0; transform: translateX(-50%);
    border: none; background: none; padding: 0; margin: 0; cursor: pointer;
    text-decoration: none; pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.hh-tile-inner {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    transform-origin: 50% 8px;              /* півот у штирі гачка */
    animation: hh-sway 5s ease-in-out infinite;
    transition: transform .22s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}
@keyframes hh-sway {
    0%, 100% { transform: rotate(-2.4deg); }
    50%      { transform: rotate(2.4deg); }
}
/* стагер гойдання — бирки несинхронні (різні фази й темп) */
.hh-dots .hh-spot:nth-child(1) .hh-tile-inner { animation-duration: 5.2s; animation-delay: 0s; }
.hh-dots .hh-spot:nth-child(2) .hh-tile-inner { animation-duration: 4.4s; animation-delay: -1.6s; }
.hh-dots .hh-spot:nth-child(3) .hh-tile-inner { animation-duration: 5.8s; animation-delay: -0.7s; }
.hh-dots .hh-spot:nth-child(4) .hh-tile-inner { animation-duration: 4.8s; animation-delay: -2.3s; }
.hh-dots .hh-spot:nth-child(5) .hh-tile-inner { animation-duration: 5.5s; animation-delay: -1.1s; }

/* металевий гачок: штир у отворі + дуга, на якій висить картка */
.hh-hook {
    position: relative; display: block; width: 40px; height: 44px;
    margin-bottom: -13px;            /* картка перекриває нижню дугу гачка */
    z-index: 2;
}
.hh-hook svg { display: block; width: 100%; height: 100%; overflow: visible;
    /* м'яка реалістична тінь гачка на дошці */
    filter: drop-shadow(0 4px 4px rgba(0,0,0,.55)); }

/* Скляна картка «liquid glass» (Apple-стиль): сильний blur + saturate,
   світлий кант зверху, м'який глянець, напівпрозорий градієнт-скло. */
.hh-glass {
    position: relative; z-index: 1; width: 178px; padding: 11px;
    border-radius: 20px;
    /* матовий градієнт-філ (сірі напівпрозорі тони, без чисто-білого) */
    background: linear-gradient(158deg, rgba(52,56,61,.50) 0%, rgba(22,24,26,.56) 46%, rgba(10,11,12,.64) 100%);
    -webkit-backdrop-filter: blur(26px) saturate(155%);
    backdrop-filter: blur(26px) saturate(155%);
    border: 1px solid rgba(255,255,255,.07);
    /* об'єм: зовнішня тінь-підйом + внутрішня тінь (темніші краї → «дута» поверхня) */
    box-shadow:
        0 28px 52px rgba(0,0,0,.58),
        0 6px 14px rgba(0,0,0,.42),
        inset 0 0 26px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.05);
    display: flex; flex-direction: column; gap: 8px; color: #fff;
    transition: box-shadow .25s, border-color .25s, transform .25s;
}
/* дрібнозерниста текстура матового скла — ЛИШЕ затемнення (multiply), без білих бліків */
.hh-glass::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .16;
    mix-blend-mode: multiply;
}
.hh-glass > * { position: relative; z-index: 1; }
.hh-glass-thumb {
    width: 100%; aspect-ratio: 4 / 3; padding: 8px;
    background: #fff; border-radius: 11px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.hh-glass-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hh-glass-name {
    font: 600 12.5px/1.32 var(--font-ui); color: rgba(255,255,255,.92);
    /* до 3 рядків без «…» (чистий обріз лише для екстремально довгих назв) */
    max-height: 3.96em; overflow: hidden;
}
.hh-glass-foot { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.hh-glass-price { font: 800 16px/1 var(--font-mono); color: var(--accent); letter-spacing: -0.01em; }
.hh-glass-old { font: 400 12px/1 var(--font-mono); color: rgba(255,255,255,.45); text-decoration: line-through; }
.hh-glass-badge {
    position: absolute; top: -9px; right: -9px; z-index: 3;
    padding: 4px 9px; border-radius: var(--r-pill);
    background: var(--elbin-r2-danger, #DB4437); color: #fff;
    font: 800 12px/1.12 var(--font-mono); letter-spacing: .01em; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
}


/* ховер/фокус/відкрито — плитка випрямляється, піднімається; маркер без пульсу */
.hh-tile:focus-visible { outline: none; }
.hh-spot.is-open .hh-tile-inner { animation: none; transform: translateY(-5px) scale(1.06); }
.hh-spot.is-open .hh-hook::after { animation: none; opacity: 0; }
@media (min-width: 901px) {
    .hh-spot:hover .hh-tile-inner,
    .hh-spot:focus-within .hh-tile-inner { animation: none; transform: translateY(-6px) scale(1.07); }
    .hh-spot:hover .hh-glass,
    .hh-spot:focus-within .hh-glass { box-shadow: 0 26px 50px rgba(0,0,0,.6); border-color: rgba(26,208,202,.5); }
    .hh-spot:hover .hh-hook::after,
    .hh-spot:focus-within .hh-hook::after { animation: none; opacity: 0; }
}

/* ── Міні-картка хотспота ── */
.hh-card {
    position: absolute; width: 244px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
    box-shadow: var(--sh-modal); padding: 12px;
    opacity: 0; visibility: hidden; transform: translateY(7px) scale(.97);
    transition: opacity .28s cubic-bezier(.16, 1, .3, 1), transform .28s cubic-bezier(.16, 1, .3, 1), visibility .28s;
    pointer-events: none;
}
.hh-spot.is-open .hh-card {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
@media (min-width: 901px) {
    .hh-spot:hover .hh-card, .hh-spot:focus-within .hh-card {
        opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    }
}
.hh-card-top { display: flex; gap: 12px; }
.hh-card-thumb {
    width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--r-control);
    background: var(--surface-3); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hh-card-thumb img { width: 100%; height: 100%; object-fit: contain; }
.hh-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hh-card-name {
    margin: 0; font: 700 13.5px/1.32 var(--font-ui); color: var(--text);
    /* повна назва без три крапок — місця вистачає */
}
.hh-card-foot { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.hh-card-price { font: 800 17px/1 var(--font-mono); color: var(--text); letter-spacing: -0.01em; }
.hh-card-old { font: 400 12px/1 var(--font-mono); color: var(--text-3); text-decoration: line-through; }
.hh-card-stock {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
    font: 600 11.5px/1 var(--font-mono); letter-spacing: .02em;
}
.hh-card-stock-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hh-card-stock.is-in  { color: var(--accent-deep); }
.hh-card-stock.is-in  .hh-card-stock-dot { background: var(--accent); }
.hh-card-stock.is-out { color: var(--text-3); }
.hh-card-stock.is-out .hh-card-stock-dot { background: var(--text-3); }
.hh-card-cta {
    margin-top: 11px; height: 38px; border-radius: var(--r-control);
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
    font: 700 13px/1 var(--font-ui); text-decoration: none; cursor: pointer;
    background: var(--accent); color: var(--ink-on-accent); border: none;
    transition: background .15s;
}
.hh-card-cta:hover { background: var(--accent-hover); color: var(--ink-on-accent); text-decoration: none; }
.hh-card-badge { position: absolute; top: -9px; left: 12px; z-index: 1; }
.hh-card-badge .elbin-r2-badge { padding: 4px 8px; font-size: 11px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }

/* ════════════════════ МОБІЛЬНИЙ (≤900) ════════════════════
   Заголовок і CTA — над фото; фото у потоці на всю ширину;
   тап по точці розкриває картку, яка докується внизу фото. */
/* Оверлей-макет (копі поверх дошки) має вільне місце лише ≥1500px; нижче —
   стековий макет: копі зверху, панель-дошка з грідом карток. Так ліві картки
   ніколи не налазять на текст. */
@media (max-width: 1199.98px) {
    .hh-hero-wrap { padding: 18px 0 28px; }
    .hh-topmeta { margin-bottom: 16px; padding-bottom: 12px; font-size: 9.5px; letter-spacing: .1em; gap: 10px; }

    .hh-hero {
        height: auto; background: transparent; box-shadow: none; border-radius: 0;
        display: flex; flex-direction: column; gap: 20px;
    }
    .hh-copy { position: static; transform: none; order: 1; width: auto; max-width: none; }
    .hh-title { color: var(--text); font-size: 34px; }
    .hh-sub { color: var(--text-2); max-width: none; }
    .hh-cta { max-width: none; }
    /* стек-макет світлий → перефарбувати proof-бар і ghost-кнопку */
    .hh-proof { max-width: none; }
    .hh-proof-item { border-left-color: var(--line, rgba(0,0,0,.12)); }
    .hh-proof-num { color: var(--accent-deep); }
    .hh-proof-lbl { color: var(--text-3); }
    .hh-salebtn { color: var(--text); border-color: var(--line-strong, rgba(0,0,0,.22)); }
    .hh-hint { display: none; }

    /* ── ОКРЕМИЙ МОБІЛЬНИЙ ПЕГБОРД: панель-дошка + сітка карток 2 колонки ──
       Десктопні дробові координати не годяться для вузького панелі, тож на
       мобільному спот стає коміркою гріда, а картка просто висить у ній. */
    .hh-photo {
        position: relative; inset: auto; order: 2; height: auto;
        padding: 22px 14px 24px;
    }
    .hh-clip, .hh-clip::after, .hh-peg { border-radius: var(--r-card); }
    .hh-scrim { display: none; }
    /* Ken Burns лишаємо на фоні-дошці (.hh-peg) — дошка «дихає»; паралакс off
       (за курсором, на тачі не працює). Шар карток НЕ анімуємо (грід не їде). */
    .hh-dots-track { animation: none; }
    .hh-bg { transform: none; }
    /* .hh-dots у потоці й над фоном-дошкою (.hh-clip лишається absolute) */
    .hh-dots { position: relative; z-index: 2; transform: none; }
    .hh-dots-track {
        position: static; transform: none;
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 16px;
    }
    /* спот = комірка; картка висить (гачок зверху) і гойдається (.hh-tile-inner) */
    .hh-spot { position: static; width: auto; height: auto; display: flex; justify-content: center; opacity: 1; animation: none; }
    .hh-tile { position: static; transform: none; width: 100%; max-width: 190px; }
    .hh-glass { width: 100%; }
    /* показуємо 4 картки (2×2), щоб герой не був задовгим */
    .hh-spot:nth-child(n+5) { display: none; }
}

/* Планшет / середній десктоп: 3 колонки, усі 6 карток */
@media (min-width: 600px) and (max-width: 1199.98px) {
    .hh-dots-track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 14px; }
    .hh-spot:nth-child(n+5) { display: flex; }
    .hh-tile { max-width: 210px; }
}

/* Середній десктоп (стек): більший копі-блок + обмежена ширина контенту */
@media (min-width: 1000px) and (max-width: 1199.98px) {
    .hh-title { font-size: 46px; }
    .hh-sub { font-size: 16px; }
    .hh-cta { max-width: 560px; }
    .hh-copy { max-width: 820px; }
}

/* ── Доступність: prefers-reduced-motion → вимикаємо рух ── */
@media (prefers-reduced-motion: reduce) {
    .hh-peg { animation: none !important; }
    .hh-dots-track { animation: none !important; transform: none !important; }
    .hh-bg { transform: none !important; }
    .hh-dots { transform: none !important; }
    .hh-dot::before { animation: none !important; opacity: .3; transform: scale(1.55); }
    .hh-dot::after { animation: none !important; transform: none; }
    .hh-tile-inner { animation: none !important; }
    .hh-hook::after { animation: none !important; opacity: .3; }
    .hh-spot { animation: none !important; opacity: 1 !important; }
    .hh-copy-inner { animation: none !important; }
    .hh-card { transition: none !important; }
}

/* =====================================================================
   БАЗОВА КНОПКА .elbin-r2-btn (спільна) — використовують search.php та
   page-templates/info.php; цей файл вантажиться як їхня залежність.
   ===================================================================== */

.elbin-r2-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--elbin-r2-s-8);
    padding: var(--elbin-r2-s-12) var(--elbin-r2-s-20);
    border-radius: var(--elbin-r2-r-control);
    font-family: var(--elbin-r2-font-ui);
    font-size: var(--elbin-r2-fs-small);
    font-weight: var(--elbin-r2-fw-medium);
    text-decoration: none;
    transition: all var(--elbin-r2-transition-base);
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1;
}

.elbin-r2-btn--primary {
    background: var(--elbin-r2-accent);
    color: var(--elbin-r2-ink-on-accent);
    border-color: var(--elbin-r2-accent);
}

.elbin-r2-btn--primary:hover {
    background: var(--elbin-r2-accent-600);
    border-color: var(--elbin-r2-accent-600);
    color: var(--elbin-r2-ink-on-accent);
    text-decoration: none;
}

.elbin-r2-btn--lg {
    padding: 16px 28px;
    font-size: var(--elbin-r2-fs-body);
}

.elbin-r2-btn--outline {
    background: transparent;
    color: var(--elbin-r2-text);
    border-color: var(--elbin-r2-line);
}

.elbin-r2-btn--outline:hover {
    background: var(--elbin-r2-surface-3);
    border-color: var(--elbin-r2-line);
    color: var(--elbin-r2-ink);
    text-decoration: none;
}