/* =========================================================
   Site Toolkit — Service cards (2 layouts) v3
   Optimized: absolute-positioned actions (no layout shift),
              minimal transitions, no CSS bloat.
   ========================================================= */

/* Общий glass-ef */
.glass-ef {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(3px) saturate(130%);
    -webkit-backdrop-filter: blur(4px) saturate(130%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(255, 255, 255, 0.15),
        0 8px 30px rgba(0, 0, 0, 0.08);
}
.glass-ef::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.025) 35%,
        rgba(255, 255, 255, 0.01) 100%
    );
    z-index: 0;
}
.loco-svc-card__image-link{
    width:100%;
}
/* =========================================================
   Wrapper + grid
   ========================================================= */
.loco-services {
    box-sizing: border-box;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    font-family: var(--ltk-font, "Gilroy", "Inter", system-ui, sans-serif);
}
.loco-services *,
.loco-services *::before,
.loco-services *::after { box-sizing: border-box; }

.loco-services__grid {
    display: grid;
    gap: 32px;
}
.loco-services--home .loco-services__grid    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.loco-services--catalog .loco-services__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* =========================================================
   A) HOME CARD
   ========================================================= */
.loco-svc-card {
    padding-top: 44px; /* иконка торчит на 50% (88/2) */
    position: relative;
    display: block;
    text-decoration: none !important;
    color: inherit;
    min-width: 0;   /* v1.7.3: без этого длинный desc распирает грид-колонку */
}

/* v1.7.3: гарантируем одинаковую высоту карточек в ряду —
   ограничиваем описание 3 строками с троеточием */
.loco-svc-card .loco-svc-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* min-height задает базовую высоту (~3 строки × line-height 1.5 × 16px = 72px)
       чтобы карточки с 1-2-строчным опис были не короче 3-строчных */
    min-height: calc(1.5em * 3);
}

/* Каталог (Card B) — тоже 3 строки, но у него другой контейнер */
.loco-svc-card--catalog .loco-svc-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(1.5em * 3);
}

/* Иконка-плитка glass-ef */
.loco-svc-card__icon {
    position: absolute;
    top: 0;
    left: 32px;
    z-index: 3;
    width: 88px;
    height: 88px;
    padding: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--icon-radius, 24px);
    transition: transform .25s ease;
}
.loco-svc-card__icon svg,
.loco-svc-card__icon img {
    width: 40px !important;
    height: 40px !important;
    display: block;
    position: relative;
    z-index: 1;
}
.loco-svc-card__icon svg [fill]:not([fill="none"])     { fill: var(--ltk-primary, #1F65E9); }
.loco-svc-card__icon svg [stroke]:not([stroke="none"]) { stroke: var(--ltk-primary, #1F65E9); }

/* Body */
.loco-svc-card__body {
    position: relative;
    background: radial-gradient(ellipse 136.09% 115.59% at 5.16% 2.40%, #E8F2FD 0%, #FEFDFF 100%);
    box-shadow: 2px 0 9px -2px rgba(30, 86, 195, 0.60);
    border-radius: 24px;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    /* v1.7.4: плавный переход градиента (было .3s) */
    transition: background .5s ease;
    /* v1.7.4: чтобы .foot был прижат вниз — body растягивается по всей высоте карточки */
    flex: 1 1 auto;
}

/* v1.7.4: сама карточка становится flex column чтобы body растянулся на всю высоту grid-item */
.loco-svc-card { display: flex; flex-direction: column; }

/* Badge (правий верх) */
.loco-svc-card__badge {
    padding: 4px 8px;
    background: #FFFFFF;
    border-radius: 8px;
    color: #6687BE !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    font-family: inherit !important;
    text-transform: uppercase !important;
    align-self: flex-end;
}

/* v1.7.4: text-блок — заголовок + описание. Гибкая высота, meta прижимаем к низу */
.loco-svc-card__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;   /* растягиваем чтобы foot был снизу */
}

.loco-svc-card .loco-svc-card__title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ltk-blue-600, #1E56C3) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    font-family: inherit !important;
    text-transform: none !important;
    text-decoration: none !important;
    word-wrap: break-word;
    /* v1.7.4: макс 2 строки для одинаковой высоты */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.3em * 2);
}
.loco-svc-card .loco-svc-card__desc {
    margin: 0 !important;
    color: var(--ltk-neutral-600, #415170) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    font-family: inherit !important;
}

/* v1.7.5: FOOT — meta слева + chevron справа. В default state — виден.
   При hover — плавно уезжает (max-height + opacity) и на его месте ACTIONS.
   Высота body не меняется, соседи не двигаются. */
.loco-svc-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* Фиксированная высота = высоте actions (56px) — чтобы при swap не было прыжка */
    height: 56px;
    overflow: hidden;
    opacity: 1;
    transition: opacity .3s ease;
}
.loco-svc-card .loco-svc-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ltk-neutral-900, #1E1E1E) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    font-family: inherit !important;
    line-height: 1 !important;
    min-height: 20px; /* держим одинаковую высоту даже если duration пустой */
    flex: 0 0 auto;
}
.loco-svc-card__meta--placeholder { visibility: hidden; }
.loco-svc-card__meta svg { width: 20px; height: 20px; flex: 0 0 auto; }
.loco-svc-card__meta svg [fill]:not([fill="none"]) { fill: var(--ltk-neutral-900, #1E1E1E); }

/* v1.7.4: Chevron теперь В ПОТОКЕ (не absolute), в .foot справа */
.loco-svc-card__cta {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: transparent;
    outline: 1px solid var(--ltk-primary, #1F65E9);
    outline-offset: -1px;
    color: var(--ltk-blue-600, #1E56C3);
    text-decoration: none !important;
    transition: opacity .3s ease, transform .3s ease;
}
.loco-svc-card__cta svg { width: 32px; height: 32px; display: block; }
.loco-svc-card__cta svg [fill]:not([fill="none"]) { fill: var(--ltk-blue-600, #1E56C3); }

/* v1.7.5: ACTIONS — В ПОТОКЕ, той же высоты что и .foot (56px).
   При default: max-height 0 + opacity 0 → занимает 0px, .foot виден.
   При hover: max-height 56px + opacity 1, .foot одновременно opacity 0 + max-height 0.
   SWAP: foot ↔ actions без изменения общей высоты body. */
.loco-svc-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    /* Скрыто по умолчанию */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height .3s ease, opacity .3s ease;
}

/* Замовити — чёрная → синий градиент на hover */
.loco-svc-card__btn-primary {
    flex: 1;
    height: 56px;
    padding: 12px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ltk-dark, #1E1E1E) !important;
    color: #FFFFFF !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    font-family: inherit !important;
    border: 0;
    cursor: pointer;
    transition: background .2s ease;
}
.loco-svc-card__btn-primary:hover {
    background: var(--ltk-grad-primary, linear-gradient(90deg, #034DCF 0%, #3074F9 100%)) !important;
}

/* Детальніше — outline blue */
.loco-svc-card__btn-outlined {
    height: 56px;
    padding: 12px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    outline: 1px solid var(--ltk-primary, #1F65E9);
    outline-offset: -1px;
    color: #303030 !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    font-family: inherit !important;
    transition: background .2s ease;
}
.loco-svc-card__btn-outlined:hover {
    background: radial-gradient(ellipse 50% 50% at 50% 50%, #FEFDFF 0%, #E8F2FD 100%);
}
.loco-svc-card__btn-outlined svg { width: 18px; height: 18px; }
.loco-svc-card__btn-outlined svg [fill]:not([fill="none"]) { fill: var(--ltk-primary, #1F65E9); }

/* ============ Desktop HOVER STATE (v1.7.5) ============
   SWAP: .foot (meta + chevron) уезжает, на его месте .actions.
   Высота body не меняется — соседние карточки железно на месте. */
@media (hover: hover) and (pointer: fine) {
    .loco-svc-card:hover .loco-svc-card__body {
        background: radial-gradient(ellipse 136.09% 115.59% at 5.16% 2.40%, #B4D5FA 0%, #FEFDFF 79%, #DAE7F8 100%);
    }
    .loco-svc-card:hover .loco-svc-card__icon {
        transform: translateY(-2px);
    }
    /* .foot уезжает */
    .loco-svc-card:hover .loco-svc-card__foot {
        max-height: 0;
        opacity: 0;
        pointer-events: none;
    }
    /* .actions приезжает */
    .loco-svc-card:hover .loco-svc-card__actions {
        max-height: 72px;
        opacity: 1;
        pointer-events: auto;
    }
}

/* ============ Touch / mobile / tablet ============
   На touch нет hover — actions всегда видны СНИЗУ, .foot тоже виден (обе строки).
   Chevron скрыт (на touch не нужен, actions есть сразу). */
@media (hover: none), (pointer: coarse), (max-width: 1024px) {
    .loco-svc-card__cta { display: none; }
    .loco-svc-card__foot {
        height: auto;
        overflow: visible;
    }
    .loco-svc-card__actions {
        max-height: none;
        opacity: 1;
        pointer-events: auto;
        overflow: visible;
        margin-top: 4px;
    }
}

/* =========================================================
   B) CATALOG CARD (только одна кнопка Замовити)
   ========================================================= */
.loco-svc-card--catalog {
    padding-top: 0;
    background: radial-gradient(ellipse 136.09% 115.59% at 5.16% 2.40%, #E8F2FD 0%, #FEFDFF 100%);
    box-shadow: 2px 0 9px -2px rgba(30, 86, 195, 0.60);
    border-radius: 32px;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    transition: background .3s ease, transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine) {
    .loco-svc-card--catalog:hover {
        background: radial-gradient(ellipse 136.09% 115.59% at 5.16% 2.40%, #B4D5FA 0%, #FEFDFF 79%, #DAE7F8 100%);
        transform: translateY(-4px);
        box-shadow: 4px 8px 20px -2px rgba(30, 86, 195, 0.40);
    }
}
.loco-svc-card--catalog .loco-svc-card__image {
    width: 100%;
    height: 192px;
    display: block;
    object-fit: cover;
    border-radius: 24px;
    background: #EAF3FF;
}
.loco-svc-card--catalog .loco-svc-card__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}
.loco-svc-card--catalog .loco-svc-card__content {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
}
.loco-svc-card--catalog .loco-svc-card__title { color: var(--ltk-blue-600, #1E56C3) !important; }
.loco-svc-card--catalog .loco-svc-card__desc  { color: #6C7484 !important; }

.loco-svc-card__catalog-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #414143 !important;
    font-size: 12px !important;
    font-family: inherit !important;
    font-weight: 400 !important;
    line-height: 1;
}
.loco-svc-card__catalog-meta .loco-svc-card__meta { color: #414143 !important; }
.loco-svc-card__catalog-meta .loco-svc-card__meta svg [fill]:not([fill="none"]) { fill: #000; }
.loco-svc-card__catalog-dot {
    width: 4px;
    height: 4px;
    border-radius: 1px;
    background: var(--ltk-blue-600, #1E56C3);
    flex: 0 0 4px;
}
.loco-svc-card__price sup { font-size: 10px; }

/* Row кнопок в каталоге — ОДНА кнопка full-width */
.loco-svc-card--catalog .loco-svc-card__btn-row {
    padding: 0 24px;
    display: flex;
    align-self: stretch;
}
.loco-svc-card--catalog .loco-svc-card__btn-primary {
    flex: 1;
    width: 100%;
}

/* =========================================================
   B.5) HIDDEN CARDS (v1.7.2) — SEO-friendly скрытие сверх visible_limit
   Карточки остаются в DOM (Google их видит), но не в отрисовке.
   ========================================================= */
.loco-services .loco-svc-card.is-hidden {
    display: none !important;
}
.loco-services.is-expanded .loco-svc-card.is-hidden {
    display: flex !important;
}
/* home-cards карточка = block+flex внутренне, у нее display:block по дефолту.
   Reset для home-cards при раскрытии */
.loco-services--home.is-expanded .loco-svc-card.is-hidden {
    display: block !important;
}

/* Show more button */
.loco-services__more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
.loco-services__more {
    height: 56px;
    padding: 12px 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(90deg, #034DCF 0%, #3074F9 100%);
    color: #FFFFFF !important;
    font-family: var(--ltk-font, "Gilroy","Inter",system-ui,sans-serif) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(3, 77, 207, 0.20);
    transition: transform var(--ltk-transition, 250ms ease),
                box-shadow var(--ltk-transition, 250ms ease),
                background var(--ltk-transition, 250ms ease);
}
.loco-services__more:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(3, 77, 207, 0.30);
    background: linear-gradient(90deg, #0244B8 0%, #2565DD 100%);
    color: #FFFFFF !important;
}
.loco-services__more:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(3, 77, 207, 0.25);
}
/* When expanded — hide button (one-way) */
.loco-services.is-expanded .loco-services__more-wrap {
    display: none;
}

@media (max-width: 640px) {
    .loco-services__more-wrap { margin-top: 24px; }
    .loco-services__more { width: 100%; }
}

/* =========================================================
   C) CTA SLOT (v1.7.1) — Elementor-шаблон вставленный последней ячейкой грида
   ========================================================= */
.loco-svc-card--cta {
    grid-column: span var(--cta-span, 1);
    min-width: 0;
    display: flex;
    align-items: stretch;
    padding: 0;
    background: transparent;
}
/* CTA-контент должен растянуться на всю ячейку */
.loco-svc-card--cta > * {
    width: 100%;
    align-self: stretch;
}
/* Elementor-обёртки внутри CTA — убираем возможные внешние отступы,
   даём им заполнить всю ячейку */
.loco-svc-card--cta .elementor,
.loco-svc-card--cta .elementor-section,
.loco-svc-card--cta .elementor-container,
.loco-svc-card--cta .e-con {
    width: 100%;
    height: 100%;
    max-width: 100% !important;
}

/* =========================================================
   Laptop ≤1200 (v1.7.3): переходим на 2 колонки раньше.
   Home: 3→2 · Catalog: 4→3
   Это убирает горизонтальный скролл на 1025-1230px.
   ========================================================= */
@media (max-width: 1200px) {
    .loco-services--home .loco-services__grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .loco-services--catalog .loco-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* =========================================================
   Tablet ≤1024 (v1.7.3): каталог тоже 2 колонки.
   CTA-slot прижимаем к full-width когда грид 2 колонки —
   иначе кнопка "Замовити дзвінок" не влезает по ширине.
   ========================================================= */
@media (max-width: 1024px) {
    .loco-services--home .loco-services__grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .loco-services--catalog .loco-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    /* На 2-колоночном гриде CTA всегда full-width — телефон-инпут + кнопка иначе не влезают */
    .loco-svc-card--cta { grid-column: 1 / -1; }
}

/* =========================================================
   Mobile ≤640
   ========================================================= */
@media (max-width: 640px) {
    .loco-services--home .loco-services__grid,
    .loco-services--catalog .loco-services__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .loco-svc-card { padding-top: 40px; }
    .loco-svc-card__icon { left: 24px; width: 80px; height: 80px; padding: 20px; }
    .loco-svc-card__body { padding: 20px 24px; border-radius: 20px; }
    .loco-svc-card--catalog { border-radius: 24px; }
    .loco-svc-card--catalog .loco-svc-card__image { height: 200px; }
    .loco-svc-card--cta { grid-column: 1 / -1; 
        padding-top: 4px!important;}
}

/* =========================================================
   =========================================================
   SERVICE PAGE — HERO & PRICING (v1.7.0)
   Шорткоди: [loco_service_hero] · [loco_service_pricing]
   =========================================================
   ========================================================= */

/* =========================================================
   HERO
   ========================================================= */
.loco-svc-hero.loco-svc-hero {
    box-sizing: border-box;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    font-family: var(--ltk-font, "Gilroy","Inter",system-ui,sans-serif) !important;
    color: var(--ltk-neutral-900, #1E1E1E) !important;
}
.loco-svc-hero.loco-svc-hero *,
.loco-svc-hero.loco-svc-hero *::before,
.loco-svc-hero.loco-svc-hero *::after { box-sizing: border-box; }

.loco-svc-hero.loco-svc-hero .loco-svc-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 33px;
    align-items: start;
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ltk-primary, #1F65E9) !important;
    font-family: inherit !important;
    font-size: 56px !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    word-wrap: break-word;
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__subtitle {
    margin: 0 !important;
    color: #6C7484 !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__cta {
    align-self: flex-start;
    height: 56px;
    padding: 12px 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ltk-dark, #1E1E1E) !important;
    color: #FFFFFF !important;
    border-radius: 16px !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    border: 0;
    cursor: pointer;
    transition: background var(--ltk-transition, 250ms ease);
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__cta:hover {
    background: var(--ltk-grad-primary, linear-gradient(90deg, #034DCF 0%, #3074F9 100%)) !important;
    color: #FFFFFF !important;
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__image-wrap {
    width: 100%;
    aspect-ratio: 511 / 556;
    border-radius: 24px;
    overflow: hidden;
    background: var(--ltk-neutral-100, #EAF3FF);
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__right {
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__block-title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ltk-primary, #1F65E9) !important;
    font-family: inherit !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__block--dangers .loco-svc-hero__block-title {
    color: #E64C1E !important;
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ltk-neutral-600, #415170) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__item-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: block;
    color: var(--ltk-neutral-600, #415170);
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__item-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}
.loco-svc-hero.loco-svc-hero .loco-svc-hero__item-text {
    flex: 1 1 0;
    min-width: 0;
    word-wrap: break-word;
}

/* HERO — Tablet ≤1024 */
@media (max-width: 1024px) {
    .loco-svc-hero.loco-svc-hero .loco-svc-hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .loco-svc-hero.loco-svc-hero .loco-svc-hero__left  { order: 2; gap: 24px; }
    .loco-svc-hero.loco-svc-hero .loco-svc-hero__image-wrap {
        order: 1;
        aspect-ratio: 348 / 556;
    }
    .loco-svc-hero.loco-svc-hero .loco-svc-hero__right {
        order: 3;
        grid-column: 1 / -1;
        flex-direction: row;
        gap: 24px;
        margin-top: 24px;
    }
    .loco-svc-hero.loco-svc-hero .loco-svc-hero__right--single {
        flex-direction: column;
    }
    .loco-svc-hero.loco-svc-hero .loco-svc-hero__block { flex: 1 1 0; min-width: 0; }
}

/* HERO — Mobile ≤640 */
@media (max-width: 640px) {
    .loco-svc-hero.loco-svc-hero .loco-svc-hero__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .loco-svc-hero.loco-svc-hero .loco-svc-hero__left,
    .loco-svc-hero.loco-svc-hero .loco-svc-hero__image-wrap,
    .loco-svc-hero.loco-svc-hero .loco-svc-hero__right {
        order: initial;
        grid-column: auto;
    }
    .loco-svc-hero.loco-svc-hero .loco-svc-hero__image-wrap {
        order: 1;
        aspect-ratio: 348 / 224;
    }
    .loco-svc-hero.loco-svc-hero .loco-svc-hero__left  { order: 2; gap: 20px; }
    .loco-svc-hero.loco-svc-hero .loco-svc-hero__right {
        order: 3;
        flex-direction: column;
        gap: 24px;
        margin-top: 8px;
    }
    .loco-svc-hero.loco-svc-hero .loco-svc-hero__title {
        font-size: 38px !important;
        line-height: 1.05 !important;
    }
}

/* =========================================================
   PRICING
   ========================================================= */
.loco-svc-pricing.loco-svc-pricing {
    box-sizing: border-box;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    font-family: var(--ltk-font, "Gilroy","Inter",system-ui,sans-serif) !important;
    color: var(--ltk-neutral-900, #1E1E1E) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.loco-svc-pricing.loco-svc-pricing *,
.loco-svc-pricing.loco-svc-pricing *::before,
.loco-svc-pricing.loco-svc-pricing *::after { box-sizing: border-box; }

.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__title {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
    color: var(--ltk-primary, #1F65E9) !important;
    font-family: inherit !important;
    font-size: 56px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__tab {
    padding: 16px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 16px;
    outline: 1px solid #AFC5EB;
    outline-offset: -1px;
    color: var(--ltk-neutral-900, #1E1E1E) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer;
    border: 0;
    transition: background var(--ltk-transition, 250ms ease);
    white-space: nowrap;
}
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__tab:hover {
    background: rgba(175, 197, 235, 0.35);
}
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__tab.is-active {
    background: #AFC5EB !important;
    color: var(--ltk-neutral-900, #1E1E1E) !important;
}
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table-wrap { width: 100%; }
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__panel { display: none; }
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__panel.is-active { display: block; }
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table th,
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table td {
    padding: 16px 8px;
    border: 1px solid var(--ltk-neutral-200, #DCE7F8);
    color: var(--ltk-neutral-600, #415170) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-align: left;
    vertical-align: middle;
    background: transparent;
}
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table td:first-child { font-weight: 700 !important; }
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table th:first-child { font-weight: 400 !important; }
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table th             { font-weight: 700 !important; }
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table thead tr th:first-child { border-top-left-radius: 16px; }
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table thead tr th:last-child  { border-top-right-radius: 16px; }
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table tbody tr:last-child td:first-child { border-bottom-left-radius: 16px; }
.loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table tbody tr:last-child td:last-child  { border-bottom-right-radius: 16px; }

/* PRICING — Mobile ≤640: cards instead of table */
@media (max-width: 640px) {
    .loco-svc-pricing.loco-svc-pricing { gap: 20px; }
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__title {
        font-size: 38px !important;
        text-align: center;
    }
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__tabs {
        gap: 8px;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__tab {
        flex: 0 0 auto;
        padding: 14px 20px;
    }
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table,
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table thead,
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table tbody,
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table tr,
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table th,
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table td {
        display: block;
        width: 100%;
    }
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table thead { display: none; }
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table tr {
        border: 1px solid var(--ltk-neutral-200, #DCE7F8);
        border-radius: 16px;
        overflow: hidden;
    }
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table td {
        border: 0;
        border-bottom: 1px solid var(--ltk-neutral-200, #DCE7F8);
        border-radius: 0 !important;
        padding: 14px 16px;
    }
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table td:last-child { border-bottom: 0; }
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table td:first-child {
        background: var(--ltk-neutral-100, #EAF3FF);
        color: var(--ltk-neutral-900, #1E1E1E) !important;
        font-weight: 700 !important;
    }
    .loco-svc-pricing.loco-svc-pricing .loco-svc-pricing__table td[data-label]:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: #6C7484 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        line-height: 1.2;
    }
}