/* =============================================================================
   B420 — ВИРІЗИ / CUTOUTS
   -----------------------------------------------------------------------------
   ⚠️  УСІ вогнуті кути та маски (банер + картка «+80») зібрані ТІЛЬКИ ТУТ.
       Якщо шукаєш «де воно обрізається» — це єдине місце.

   ЯК ЦЕ ПРАЦЮЄ (без «накладань»):
     mask: radial-gradient(R at top left, transparent, black)
     — вирізає у САМОМУ елементі плавний ВОГНУТИЙ кут радіусом R.
     Крізь виріз видно те, що ЗА елементом (фон сторінки або фото банера).
     Це справжня дірка в елементі, тому стик завжди чистий, нічого не «лежить зверху».

   ВАЖЛИВО (щоб було плавно, а не «криво»):
     кут, який ріжемо маскою, мусить мати border-radius: 0.
     Інакше опукле заокруглення (border-radius) б'ється з увігнутою маскою
     і на стику з'являється злам. Тому кут вирізу завжди зводимо в 0.

   Розміри вирізів — у змінних нижче. Хочеш більший/менший виріз — міняєш тут.
============================================================================= */
:root {
    --notch-hero: 104px;  /* виріз банера, зверху-зліва (під лого + «Каталог») — великий, як у макеті */
    --notch-card: 60px;   /* виріз картки «+80», зверху-зліва (крізь нього — фото) */
    --notch-scale: 1;     /* масштаб фігурного вирізу банера — 1 = десктоп, менше = мобільний/планшет */
}

/* ─── 1) БАНЕР: вогнутий кут ЗВЕРХУ-ЗЛІВА ─────────────────────────────────────
   Крізь виріз видно білий фон сторінки → лого + «Каталог» «врізаються» в банер.
   • ріжемо тільки верхній-лівий кут (border-top-left-radius: 0, щоб не було зламу);
   • решта кутів банера лишаються заокругленими (28px — задано в style.css);
   • overflow:hidden банера (style.css) тримає все всередині його меж.
   Плитка масштабується через --notch-scale (та сама SVG-фігура, просто менша —
   тому на планшеті/мобільному виріз має РІВНО ТОЙ САМИЙ малюнок, що на ПК). */
.hero__stage {
    border-top-left-radius: 0;
    /* Форма «полки» знята 1-в-1 з фігми (шейп Subtract 1417×681, заміряно по пікселях):
       глибина 20px, сходинка закінчується на x=274 плавною S-кривою, лівий кут полки
       скруглений r=26. Контур намальовано SVG-шляхом (точні дуги, без артефактів);
       два linear-шари добивають решту банера праворуч і знизу від плитки 400×88. */
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='88'%3E%3Cpath d='M400 0H284C273 0 268 6 265 14L262.5 19.5C260 25 256 27 250 27H30C13.4 27 0 40.4 0 57V88H400Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / calc(400px * var(--notch-scale)) calc(88px * var(--notch-scale)) no-repeat,
        linear-gradient(#000, #000) calc(400px * var(--notch-scale) - 1px) 0 / calc(100% - (400px * var(--notch-scale) - 1px)) 100% no-repeat,
        linear-gradient(#000, #000) 0 calc(88px * var(--notch-scale) - 1px) / 100% calc(100% - (88px * var(--notch-scale) - 1px)) no-repeat;
            mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='88'%3E%3Cpath d='M400 0H284C273 0 268 6 265 14L262.5 19.5C260 25 256 27 250 27H30C13.4 27 0 40.4 0 57V88H400Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / calc(400px * var(--notch-scale)) calc(88px * var(--notch-scale)) no-repeat,
        linear-gradient(#000, #000) calc(400px * var(--notch-scale) - 1px) 0 / calc(100% - (400px * var(--notch-scale) - 1px)) 100% no-repeat,
        linear-gradient(#000, #000) 0 calc(88px * var(--notch-scale) - 1px) / 100% calc(100% - (88px * var(--notch-scale) - 1px)) no-repeat;
}

/* ─── 2) КАРТКА «+80»: стоїть ВПРИТУЛ у правому-нижньому куті банера ───────────
   За макетом (заміряно з фігми: виріз під картку ~393×133px) — це ПРОСТИЙ
   заокруглений прямокутник, БЕЗ вогнутої виїмки:
     • зверху-зліва  → звичайне опукле скруглення 24px (фото видно навколо);
     • зверху-справа → 0 (впритул до правого краю банера);
     • знизу-зліва   → 0 (впритул до нижньої кромки банера);
     • знизу-справа  → 0 → його заокруглює САМ банер (overflow:hidden, 28px).      */
.hero__card {
    right: 0; bottom: 0; margin: 0;
    width: min(400px, 60%);
    background: #fff; box-shadow: none;
    padding: 24px 26px 24px 32px;
    border-radius: 42px 0 0 0;      /* TL / TR / BR / BL — м'який великий радіус */
    -webkit-mask: none; mask: none; /* жодних масок — форма чиста */
}
/* М'які «перетікання» картки у краї банера (вогнуті дужки-філети):
   • ::before — НАД карткою, біля правого краю банера (перехід край→картка);
   • ::after  — ЛІВОРУЧ від картки, на нижній кромці банера (перехід кромка→картка).
   Техніка: білий квадрат R×R з вирізаною чвертю кола (radial-gradient) —
   біле заповнює кутовий «клин», фото видно крізь дугу. */
.hero__card::before, .hero__card::after {
    content: '';
    position: absolute;
    width: var(--fillet, 30px); height: var(--fillet, 30px);
    background: radial-gradient(var(--fillet, 30px) at top left,
                #0000 calc(var(--fillet, 30px) - 0.5px), #fff var(--fillet, 30px));
}
.hero__card::before { right: 0; top: calc(-1 * var(--fillet, 30px)); }   /* зверху-справа */
.hero__card::after  { left: calc(-1 * var(--fillet, 30px)); bottom: 0; } /* знизу-зліва   */

/* Коли картка показується — нижній-правий кут банера НЕ скругляємо:
   він повністю накритий білою карткою, а скруглення+overflow малювало
   тонку темну дужку (антиаліасинг темного фону по дузі) поверх білого. */
.hero__stage.has-card { border-bottom-right-radius: 0; }

/* ─── 3) ПЛАНШЕТ, ШИРОКИЙ (≤1200px): майже десктопний масштаб ───────────────
   На великих планшетах/малих ноутбуках шапка ще НЕ стискається (каталог з
   текстом, картка соцмереж — точно як на ПК), тому просто трохи зменшуємо
   виріз пропорційно до звуженого банера. Соцмережі й картка тут не чіпаються
   взагалі — лишаються 1-в-1 як на десктопі.                                 */
@media (max-width: 1200px) {
    :root { --notch-scale: 0.92; }
}

/* ─── 3.1) ПЛАНШЕТ, СЕРЕДНІЙ (≤1024px): той самий принцип, крок менше ────── */
@media (max-width: 1024px) {
    :root { --notch-scale: 0.85; }
}

/* ─── 3.2) ПЛАНШЕТ, ВУЗЬКИЙ (≤900px): останній крок ПЕРЕД тим, як шапка
   стискається в мобільний режим на 860px. Картка соцмереж і тут лишається
   ПК-стилем (з текстом, у ряд) — нижче, на ≤860px, вона вже стає простим
   блоком під банером через компактнішу шапку.                              */
@media (max-width: 900px) {
    :root { --notch-scale: 0.8; }
}

/* ─── 4) ПЛАНШЕТ, КОМПАКТНИЙ (≤860px): та сама фігура вирізу, просто менша ──
   Шапка тут стиснута (менше лого, «Каталог» без тексту) — тому зменшуємо
   --notch-scale замість того, щоб рахувати новий шлях: SVG-плитка та сама,
   просто виводиться дрібнішою, тож форма («полка» + заокруглений кут)
   лишається ІДЕНТИЧНОЮ десктопній, тільки в масштабі.                        */
@media (max-width: 860px) {
    :root { --notch-scale: 0.72; --fillet: 20px; }
    .hero__stage.has-card { border-bottom-right-radius: var(--radius-lg); }   /* картка вже не лежить у куті — кут знову круглий */
    .hero__card {
        /* на планшеті картка йде звичайним блоком під банером —
           власних вирізів/філетів тут не потрібно, банер сам скруглений знизу */
        position: static; width: auto; max-width: 100%; box-sizing: border-box;
        margin-top: 14px; padding: 16px; border-radius: 16px;
        -webkit-mask: none; mask: none;
    }
    .hero__card::before, .hero__card::after { content: none; }  /* філети лише на десктопі/телефоні (нижче) */
}

/* ─── 5) МОБІЛЬНИЙ (≤560px): той самий вигин, масштаб трохи менший ──────────
   Шапка тут ще вужча (лого/бургер/іконка каталогу впритул) — тому додатково
   зменшуємо --notch-scale, форма лишається тією самою.
   Іконки соцмереж — просто круглі кнопки поверх фото (без картки/фону),
   у кутку банера, фото лишається повністю видним навколо них.             */
@media (max-width: 560px) {
    :root { --notch-scale: 0.65; --fillet: 16px; }
    .hero__stage { grid-template-columns: minmax(0, 1fr); }   /* колонка не ширша за контейнер → нема гориз. скролу */
    .hero__stage.has-card { border-bottom-right-radius: 0; }  /* картка знову лежить у куті банера, кут знову «вирізаний» */
    .hero__card {
        position: absolute; right: 0; bottom: 0; margin: 0;
        width: fit-content; padding: 12px 14px; border-radius: 18px 0 0 0;
        background: #fff; box-shadow: none; border: none;
        -webkit-mask: none; mask: none;
    }
    .hero__card-head { display: none; }                       /* «Наші соцмережі» текст — прибираємо, лишаються тільки іконки */
    .hero__card::before, .hero__card::after { content: ''; }  /* філети повертаються — та сама вирізана дуга, що й у банера */
    .hero__socials { flex-direction: row; flex-wrap: nowrap; gap: 8px; width: auto; }
    .hero__socials a {
        flex: none; width: 40px; height: 40px; min-height: 0;
        padding: 0; font-size: 0;                             /* ховаємо текст-мітку, лишається тільки іконка */
        border: none; border-radius: 10px; background: transparent;
    }
    .hero__socials a i { font-size: 20px; color: var(--ink); }   /* іконки чорні за замовчуванням */
    .hero__socials a:hover i, .hero__socials a:active i { color: #fff; }

    /* Кнопка «Перейти у Shop» — менша, щоб гарантовано не перетиналась з іконками соцмереж */
    .hero__cta .btn { padding: 12px 50px 12px 16px; font-size: 13px; border-radius: 8px; }
    .hero__cta .btn .b-arrow { width: 38px; }
}

/* Тач-аналог ПК-ховера для іконок соцмереж (:hover не «тримається» на дотику) */
@media (hover: none) {
    .hero__socials a:active { color: #fff; border-color: transparent; }
    .hero__socials a.is-tg:active { background: #2aabee; }
    .hero__socials a.is-ig:active {
        background: linear-gradient(45deg, #f09433 0%, #e6683c 22%, #dc2743 50%, #cc2366 74%, #bc1888 100%);
    }
}

/* ─── 6) ДУЖЕ ВУЗЬКІ ТЕЛЕФОНИ (≤400px) — ще трохи менший масштаб ───────────── */
@media (max-width: 400px) {
    :root { --notch-scale: 0.58; --fillet: 13px; }
    .hero__socials a i { font-size: 18px; }
    .hero__cta .btn { padding: 11px 44px 11px 14px; font-size: 12.5px; }
    .hero__cta .btn .b-arrow { width: 34px; }
}