/* ============================================================================
   Bestia — Headless Shopify page template
   Body class: .page-template-page-headless-shopify

   Цей файл НЕ дублює стилі — він лише додає селектор шаблону Headless Shopify
   до існуючих правил AI-сторінки. Стилі для секцій header-block, client-logos,
   client-reviews + footer-top/footer-block уже описані у CSS AI-сторінки під
   префіксом body.page-template-page-ai.

   У файлі — лише ті секції які реально треба продублювати під наш темплейт:
   header-block, client-logos, client-reviews + базові правила (site-info, h2, p).

   Секції footer-top / footer-block / about-us тут НЕ опрацьовуються —
   використайте стилі AI-сторінки або існуючі стилі теми як є.
   ============================================================================ */


/* Якщо ви вирішили НЕ використовувати body_class фільтр у PHP, цей файл
   містить мінімальний набір селекторів-аліасів — для кожного правила
   AI-сторінки що має повторюватись. Усе нижче — копія селекторів з AI CSS,
   але з нашим body class замість page-ai. Стилі ті самі. */


/* ---------- Base ---------- */
body.page-template-page-headless-shopify .site-info { padding-top: 245px; }
body.page-template-page-headless-shopify h2 { font-size: 48px; font-weight: 600; line-height: normal; }
body.page-template-page-headless-shopify p { margin: 0; }


/* ============================================================================
   HEADER / HERO — повний набір з AI CSS
   ============================================================================ */
body.page-template-page-headless-shopify .header-block {
    background-image: var(--bg-desktop);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 20px;
    min-height: 625px;
}

body.page-template-page-headless-shopify .header-block .achievement-inner {
    display: flex;
    flex-direction: row;
    gap: 40px;
    padding-top: 35px;
    justify-content: flex-end;
    flex-wrap: nowrap;
    position: absolute;
    bottom: 0;
}
body.page-template-page-headless-shopify .header-block .achievement-inner .achievement-block {
    padding: 13px 20px;
    border-radius: 20px;
    max-width: 231px;
    width: 100%;
}
body.page-template-page-headless-shopify .header-block .achievement-inner .achievement-block .logo {
    width: 95px;
    height: 25px;
}
body.page-template-page-headless-shopify .header-block .achievement-inner .achievement-block .score {
    font-size: 12px;
    gap: 4px;
}
body.page-template-page-headless-shopify .header-block .achievement-inner .achievement-block .score .stars svg {
    width: 12px;
    height: 20px;
}

body.page-template-page-headless-shopify .header-block .header-block-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}

body.page-template-page-headless-shopify .header-block .header-block-inner .text-block {
    color: var(--c-white);
    padding-top: 0;
    max-width: 680px;
    flex: 1 1 auto;
}
body.page-template-page-headless-shopify .header-block .header-block-inner .text-block h1 {
    font-size: 44px;
    font-weight: 600;
    line-height: 120%;
    padding-bottom: 24px;
    margin: 0;
    text-transform: uppercase;
}
body.page-template-page-headless-shopify .header-block .header-block-inner .text-block h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    padding-bottom: 28px;
    margin: 0;
}
body.page-template-page-headless-shopify .header-block .header-block-inner .text-block p:not(:last-child) {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
    padding-bottom: 48px;
    max-width: 600px;
    margin: 0;
}

body.page-template-page-headless-shopify .header-block .header-block-inner .text-block p a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #4d61ff;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    border-radius: 10px;
    padding: 13px;
    background: #fefeff;
    transition: all .5s;
    max-width: 230px;
    height: 50px;
    position: relative;
    border-top: 1px solid var(--Bestia-stroke-what-our, #e4ecfe);
    border-right: 1px solid var(--Bestia-stroke-what-our, #e4ecfe);
    border-bottom: 2px solid var(--Bestia-stroke-what-our, #e4ecfe);
    border-left: 1px solid var(--Bestia-stroke-what-our, #e4ecfe);
    box-shadow: 0 15px 7px -11px rgba(79, 12, 222, .57);
}
body.page-template-page-headless-shopify .header-block .header-block-inner .text-block p a:hover {
    border-top: 1px solid var(--Bestia-stroke-button, #8a97ff);
    border-right: 1px solid var(--Bestia-stroke-button, #8a97ff);
    border-bottom: 2px solid var(--Bestia-stroke-button, #8a97ff);
    border-left: 1px solid var(--Bestia-stroke-button, #8a97ff);
    background: var(--Bestia-blue, #4d61ff);
    color: #fefeff;
    justify-content: center;
    gap: 0;
}
body.page-template-page-headless-shopify .header-block .header-block-inner .text-block p a:hover img {
    visibility: hidden;
    opacity: 0;
    width: 0;
    transition: all .5s;
}
body.page-template-page-headless-shopify .header-block .header-block-inner .text-block p a img {
    width: 30px;
}

body.page-template-page-headless-shopify .header-block .header-block-inner .image-block {
    width: 100%;
    max-width: 870px;
    height: auto;
    max-height: none;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
body.page-template-page-headless-shopify .header-block .header-block-inner .image-block > img {
    width: 100%;
    height: auto;
    max-height: 587px;
    object-fit: contain;
    display: block;
}


/* ============================================================================
   CLIENT LOGOS
   ============================================================================ */
body.page-template-page-headless-shopify .client-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 40px;
    column-gap: 120px;
    row-gap: 40px;
}
body.page-template-page-headless-shopify .client-logos .slick-track {
    display: flex;
    align-items: center;
    justify-content: center;
}
body.page-template-page-headless-shopify .client-logos .slick-track .logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================================
   D-FLEX
   ============================================================================ */
body.page-template-page-headless-shopify .d-flex {
    flex-direction: column;
}


/* ============================================================================
   CLIENT REVIEWS
   ============================================================================ */
body.page-template-page-headless-shopify .footer-top .footer-block .footer-content {
    max-width: 1070px;
}

body.page-template-page-headless-shopify .client-reviews {
    padding-top: 80px;
    padding-bottom: 147px;
    background: radial-gradient(ellipse at center, #c1d1f4 0, rgb(187 203 237 / 30%) 70%);
}
body.page-template-page-headless-shopify .client-reviews .client-reviews-title {
    padding-bottom: 64px;
}

body.page-template-page-headless-shopify .client-reviews .client-reviews-list.slick-loaded {
    visibility: visible;
    opacity: 1;
    height: 100%;
}
body.page-template-page-headless-shopify .client-reviews .client-reviews-list {
    margin-bottom: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    height: 697px;
}

body.page-template-page-headless-shopify .client-reviews .client-reviews-list .slick-track {
    display: flex;
    padding-bottom: 100px;
}

body.page-template-page-headless-shopify .client-reviews .client-reviews-list .slick-dots {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    bottom: 30px;
}
body.page-template-page-headless-shopify .client-reviews .client-reviews-list .slick-dots .slick-active button::before {
    color: #4D61FF;
    font-size: 15px;
    width: 15px;
    height: 15px;
}
body.page-template-page-headless-shopify .client-reviews .client-reviews-list .slick-dots li {
    margin: 0;
    width: 15px;
}
body.page-template-page-headless-shopify .client-reviews .client-reviews-list .slick-dots li button {
    padding: 0;
    width: 15px;
}
body.page-template-page-headless-shopify .client-reviews .client-reviews-list .slick-dots li button::before {
    opacity: 1;
    color: #CAD5F0;
    font-size: 15px;
    transition: all .5s;
    width: 15px;
    height: 15px;
}

body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item {
    max-width: 100%;
    margin-right: 20px;
    margin-left: 20px;
}
body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-user-info {
    max-height: 100%;
    border-radius: 40px;
    box-shadow: inset 0 4px 9px 0px #fff, inset 2px 0px 0 #fff, inset -4px 0 0 #e4ecfe, inset 0 -2px 0 rgba(228, 236, 254, 0.47), 0 48px 18px -38px rgba(115, 152, 228, 0.43), -2px -2px 13px 0 rgba(255, 255, 255, 0.4);
    background: #F8F8F8;
    padding: 20px;
}

body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 30px;
    padding: 0 40px;
}
body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info-mobile {
    display: none;
}
body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-image img {
    max-width: 200px;
    width: 100%;
    height: auto;
    display: block;
}
body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-name {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
}
body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-country {
    font-weight: 600;
    font-size: 14px;
    line-height: 34px;
}
body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-position {
    font-size: 14px;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-text {
    padding-top: 20px;
}
body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-text p {
    line-height: 34px;
}


/* ============================================================================
   MEDIA QUERIES — точно як в AI CSS
   ============================================================================ */
@media screen and (max-width: 1466px) {
    body.page-template-page-headless-shopify .header-block .header-block-inner .image-block {
        max-width: 770px;
    }
}

@media screen and (max-width: 1440px) {
    body.page-template-page-headless-shopify .header-block .header-block-inner .image-block {
        max-width: 670px;
    }
}

@media screen and (max-width: 1200px) {
    body.page-template-page-headless-shopify .header-block .header-block-inner .image-block {
        max-width: 520px;
    }
    body.page-template-page-headless-shopify .header-block .header-block-inner .text-block h1 {
        font-size: 36px;
    }
    body.page-template-page-headless-shopify .header-block .header-block-inner .text-block h2 {
        font-size: 22px;
    }
}

@media screen and (max-width: 977px) {
    body.page-template-page-headless-shopify .header-block .header-block-inner .text-block {
        display: grid;
        justify-items: center;
        text-align: center;
        max-width: 100%;
    }
    body.page-template-page-headless-shopify .header-block .header-block-inner .text-block p:not(:last-child) {
        max-width: 100%;
    }
    body.page-template-page-headless-shopify .header-block .header-block-inner {
        flex-wrap: wrap;
        row-gap: 40px;
        justify-content: center;
    }
    body.page-template-page-headless-shopify .header-block .achievement-inner {
        justify-content: center;
    }
    body.page-template-page-headless-shopify .header-block {
        padding-top: 130px;
        min-height: auto;
    }
}

@media (max-width: 768px) {
    body.page-template-page-headless-shopify .site-info {
        padding-top: 215px;
    }
    body.page-template-page-headless-shopify h2 {
        font-size: 28px !important;
        padding-bottom: 12px;
    }

    body.page-template-page-headless-shopify .header-block {
        background-image: var(--bg-mobile);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        padding-top: 120px;
        padding-bottom: 40px;
        min-height: auto;
    }
    body.page-template-page-headless-shopify .header-block .achievement-inner {
        justify-content: flex-start;
        padding-top: 12px;
        gap: 16px;
        flex-wrap: nowrap;
    }
    body.page-template-page-headless-shopify .header-block .achievement-inner .achievement-block {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 12px;
        padding: 10px 7px;
    }
    body.page-template-page-headless-shopify .header-block .achievement-inner .achievement-block .logo {
        width: 60px;
        height: 19px;
    }
    body.page-template-page-headless-shopify .header-block .achievement-inner .achievement-block .score {
        font-weight: 400;
        font-size: 8px;
        line-height: normal;
        color: rgba(51, 51, 51, 1);
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    body.page-template-page-headless-shopify .header-block .achievement-inner .achievement-block .score .stars {
        display: flex;
        align-items: center;
        gap: 2px;
    }
    body.page-template-page-headless-shopify .header-block .achievement-inner .achievement-block .score .stars svg {
        width: 8px;
        height: 8px;
    }
    body.page-template-page-headless-shopify .header-block .header-block-inner .text-block {
        padding-top: 0;
    }
    body.page-template-page-headless-shopify .header-block .header-block-inner .text-block h2 {
        font-size: 18px;
        padding-bottom: 16px;
    }
    body.page-template-page-headless-shopify .header-block .header-block-inner .text-block p:not(:last-child) {
        font-size: 14px;
        padding-bottom: 28px;
    }
    body.page-template-page-headless-shopify .header-block .header-block-inner .text-block p a {
        min-width: 0;
        width: 100%;
        max-width: 340px;
        padding: 14px 20px;
        font-size: 12px;
    }
    body.page-template-page-headless-shopify .header-block .header-block-inner .image-block > img {
        max-height: none;
    }

    /* Clients */
    body.page-template-page-headless-shopify .client-logos {
        padding: 36px 0;
        margin-bottom: 0;
    }
    body.page-template-page-headless-shopify .client-logos .slick-list .slick-track {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    body.page-template-page-headless-shopify .client-logos .slick-list .slick-track .client-logo-item {
        margin: 0 13px;
    }
    body.page-template-page-headless-shopify .client-logos .slick-list .slick-track .client-logo-item .logo-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Client reviews — mobile */
    body.page-template-page-headless-shopify .client-reviews h2 {
        padding-bottom: 0;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-title {
        padding-bottom: 24px;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list {
        margin-bottom: 70px;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .slick-track {
        padding-bottom: 30px;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .slick-list {
        margin-right: -8px;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .slick-dots {
        bottom: -16px;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item {
        margin-right: 8px;
        margin-left: 0;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-text {
        padding-top: 0 !important;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-text p {
        -webkit-line-clamp: 10;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner {
        padding: 0;
        gap: 20px;
        flex-direction: column;
        display: flex;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-inner-mobile {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        order: 2;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-inner-mobile .review-image img {
        max-width: 78px;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info-mobile {
        display: grid;
        gap: 4px;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info-mobile .review-name {
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 120%;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info-mobile .review-country {
        font-weight: 600;
        font-size: 14px;
        line-height: 120%;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info-mobile .review-position {
        font-size: 14px;
        line-height: 120%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info {
        display: grid;
        row-gap: 10px;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-name,
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-position,
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list .client-review-item .review-inner .review-user-info .review-country {
        display: none;
    }

    body.page-template-page-headless-shopify .footer-top .footer-block .footer-block-inner {
        padding: 30px 15px 42px;
    }
}

@media (max-width: 600px) {
    body.page-template-page-headless-shopify .header-block .header-block-inner .text-block {
        text-align: left;
        justify-items: flex-start;
    }
    body.page-template-page-headless-shopify .header-block .header-block-inner .text-block p a {
        margin: 0;
    }
    body.page-template-page-headless-shopify .client-reviews .client-reviews-list {
        margin-bottom: 50px;
    }
}

@media (max-width: 500px) {
    body.page-template-page-headless-shopify .header-block .header-block-inner .text-block h1 {
        font-size: 24px;
        line-height: 1.2;
        padding-bottom: 16px;
    }
    body.page-template-page-headless-shopify .header-block h2 {
        font-size: 20px !important;
    }
}

body.page-template-page-headless-shopify .site-info {
    padding-top: 345px;
}


/* ============================================================================
   КАСТОМНІ СЕКЦІЇ (унікальні для Headless Shopify):
   Services Accordion · How We Work · Results · Technology Stack
   Усі під префіксом .custom-headless-shopify
   ============================================================================ */

.custom-headless-shopify {
    --hs-primary:       #4D61FF;
    --hs-primary-light: #8997FF;
    --hs-primary-dark:  #3B4FEA;
    --hs-dark:          #1A1A40;
    --hs-muted:         #5566AA;
    --hs-border:        #E0E6F5;
    --hs-border-light:  rgba(180, 203, 255, 0.7);
    --hs-bg-light:      #F4F7FE;
    --hs-bg-lighter:    #EEF3FE;
    --hs-bg-soft:       #F4F8FF;
    --hs-white:         #FEFEFF;
    --hs-accent:        #FACC15;
    --hs-radius-md:  12px;
    --hs-radius-lg:  16px;
    --hs-radius-xl:  20px;
    --hs-radius-2xl: 24px;
}
.custom-headless-shopify,
.custom-headless-shopify *,
.custom-headless-shopify *::before,
.custom-headless-shopify *::after {
    box-sizing: border-box;
}
.custom-headless-shopify img {
    max-width: 100%;
    height: auto;
    display: block;
}

.custom-headless-shopify h2.hs-section-title {
    margin: 0 0 64px;
}
.custom-headless-shopify .hs-section-title--center {
    text-align: center;
    margin-bottom: 40px;
}


/* ============================================================================
   WHY HEADLESS SHOPIFY
   Послідовність дизайну:
   - Row 1 (image-left): картинка ліворуч + контент із заголовком "What you gain:"
   - Row 2 (image-right): контент із заголовком "Headless Shopify is the right..." + картинка праворуч
   - Усередині .why-headless__content WYSIWYG-контент: h3 + ul (список з checkmark)
   ============================================================================ */

body.page-template-page-headless-shopify .why-headless {
    padding: 120px 0 165px;
}

body.page-template-page-headless-shopify .why-headless__title {
    text-align: center;
    margin: 0 auto 64px;
}
body.page-template-page-headless-shopify .why-headless__title h2 {
    font-size: 48px;
    font-weight: 600;
    line-height: normal;
    margin: 0 0 16px;
}
body.page-template-page-headless-shopify .why-headless__title p {
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    max-width: 1000px;
    margin: 0 auto;
}

/* Список рядків */
body.page-template-page-headless-shopify .why-headless__list {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* Один рядок (картинка + контент) */
body.page-template-page-headless-shopify .why-headless__row {
    display: flex;
    align-items: center;
    gap: 100px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
body.page-template-page-headless-shopify .why-headless__row--image-left {
    flex-direction: row;
    justify-content: flex-start;
}
body.page-template-page-headless-shopify .why-headless__row--image-right {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* Картинка */
body.page-template-page-headless-shopify .why-headless__image {
    flex: 0 0 auto;
    max-width: 500px;
    width: 100%;
}
body.page-template-page-headless-shopify .why-headless__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Контент */
body.page-template-page-headless-shopify .why-headless__content {
    flex: 1 1 auto;
    max-width: 600px;
}
body.page-template-page-headless-shopify .why-headless__content h2,
body.page-template-page-headless-shopify .why-headless__content h3,
body.page-template-page-headless-shopify .why-headless__content h4 {
    color: #4D61FF;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 28px;
}

/* Список з кастомним checkmark */
body.page-template-page-headless-shopify .why-headless__content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
body.page-template-page-headless-shopify .why-headless__content ul li {
    position: relative;
    padding-left: 32px;
    font-size: 16px;
    line-height: 1.5;
    color: #1A1A40;
}
body.page-template-page-headless-shopify .why-headless__content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14' fill='none'><path d='M1.5 7.5L6.5 12.5L16.5 1.5' stroke='%234D61FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Якщо у WYSIWYG звичайний параграф (не список) */
body.page-template-page-headless-shopify .why-headless__content p {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
    color: #1A1A40;
    margin: 0 0 24px;
}
body.page-template-page-headless-shopify .why-headless__content p:last-child {
    margin-bottom: 0;
}


/* Адаптив */
@media screen and (max-width: 1080px) {
    body.page-template-page-headless-shopify .why-headless__row {
        gap: 60px;
    }
    body.page-template-page-headless-shopify .why-headless__image {
        max-width: 420px;
    }
}

@media screen and (max-width: 977px) {
    body.page-template-page-headless-shopify .why-headless__list {
        gap: 56px;
    }
    body.page-template-page-headless-shopify .why-headless__row,
    body.page-template-page-headless-shopify .why-headless__row--image-left,
    body.page-template-page-headless-shopify .why-headless__row--image-right {
        flex-direction: column;
        gap: 32px;
        align-items: center;
        text-align: left;
    }
    body.page-template-page-headless-shopify .why-headless__image {
        max-width: 460px;
        margin: 0 auto;
    }
    body.page-template-page-headless-shopify .why-headless__content {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 768px) {
    body.page-template-page-headless-shopify .why-headless {
        padding: 40px 0 20px;
    }
    body.page-template-page-headless-shopify .why-headless__title {
        margin-bottom: 32px;
    }
    body.page-template-page-headless-shopify .why-headless__title p {
        font-size: 16px;
    }
    body.page-template-page-headless-shopify .why-headless__content h2,
    body.page-template-page-headless-shopify .why-headless__content h3,
    body.page-template-page-headless-shopify .why-headless__content h4 {
        font-size: 18px;
        margin-bottom: 20px;
    }
    body.page-template-page-headless-shopify .why-headless__content ul {
        gap: 14px;
    }
    body.page-template-page-headless-shopify .why-headless__content ul li {
        font-size: 14px;
        padding-left: 28px;
    }
    body.page-template-page-headless-shopify .why-headless__content ul li::before {
        width: 16px;
        height: 12px;
        top: 4px;
    }
}


/* ============================================================================
   ABOUT US — спільні стилі секції + лівий блок (фото-слайдер + counters)
   Копія стилів AI-сторінки під body.page-template-page-headless-shopify.
   Лівий блок виглядає 1:1 як на AI-сторінці.
   ============================================================================ */

body.page-template-page-headless-shopify .about-us {
    padding-top: 140px;
    padding-bottom: 160px;
}
body.page-template-page-headless-shopify .about-us .text-block {
    text-align: center;
}
body.page-template-page-headless-shopify .about-us .text-block p {
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    max-width: 1344px;
    margin: 0 auto;
}

body.page-template-page-headless-shopify .about-us .about-us-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 85px;
    padding-top: 64px;
}

/* ---- Left section ---- */
body.page-template-page-headless-shopify .about-us .about-us-container .left-section {
    min-width: 0;
    width: 100%;
    max-width: 495px;
}
body.page-template-page-headless-shopify .about-us .about-us-container .left-section .left-image {
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease;
}
body.page-template-page-headless-shopify .about-us .about-us-container .left-section .left-image.slick-initialized {
    opacity: 1;
    visibility: visible;
}
body.page-template-page-headless-shopify .about-us .about-us-container .left-section .left-image.slick-initialized img {
    width: 100%;
    object-fit: cover;
    max-height: 651px;
    border-radius: 40px;
    border-top: 2px solid #c7d7fd;
    border-right: 1px solid #c7d7fd;
    border-bottom: 1px solid #c7d7fd;
    border-left: 1px solid #c7d7fd;
    box-sizing: border-box;
    box-shadow: 0px 48px 18px -38px #7398E46E;
}

/* Counters */
body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 27px;
    column-gap: 40px;
    padding-top: 63px;
}
body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters .counter-item:nth-child(1)::after { background-color: #7166F9; }
body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters .counter-item:nth-child(2)::after { background-color: #7166F9; }
body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters .counter-item:nth-child(3)::after { background-color: #FD7A72; }
body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters .counter-item:nth-child(4)::after { background-color: #FD7A72; }
body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters .counter-item:nth-child(5)::after { background-color: #17C7EE; }
body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters .counter-item:nth-child(6)::after { background-color: #17C7EE; }

body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters .counter-item {
    display: grid;
    position: relative;
    max-width: 250px;
}
body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters .counter-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
}
body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters .counter-item .counter-number {
    font-size: 48px;
    font-weight: 600;
    line-height: normal;
}
body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters .counter-item .counter-text {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

body.page-template-page-headless-shopify .about-us .slick-track {
    padding-bottom: 48px;
}
@media (max-width: 768px) {
    body.page-template-page-headless-shopify .about-us .slick-track {
        padding-bottom: 33px;
    }
}

/* Адаптив About Us — left section (ті ж брейкпоінти що у AI) */
@media screen and (max-width: 1080px) {
    body.page-template-page-headless-shopify .about-us .about-us-container {
        flex-wrap: wrap;
        padding-left: 0;
        justify-content: center;
    }
    body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters {
        padding-top: 40px;
    }
}

@media screen and (max-width: 977px) {
    body.page-template-page-headless-shopify .about-us .about-us-container {
        padding-top: 24px;
        gap: 40px;
        justify-content: center;
    }
    body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters .counter-item::after {
        height: 1px;
    }
    body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters .counter-item .counter-number {
        font-size: 24px;
    }
    body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters .counter-item .counter-text {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    body.page-template-page-headless-shopify .about-us {
        padding-top: 40px;
    }
    body.page-template-page-headless-shopify .about-us .text-block p {
        font-size: 16px;
        font-weight: 400;
    }
    body.page-template-page-headless-shopify .about-us .about-us-container .left-section .counters {
        row-gap: 12px;
        column-gap: 16px;
    }
}


/* ============================================================================
   ABOUT US — права колонка (Why Work With Us — на цій сторінці)
   Перевизначає стилі AI-теми для правої колонки під дизайн Headless Shopify.
   Лівий блок (фото, counters) — не чіпаємо, тема дає AI-стилі як треба.
   ============================================================================ */

body.page-template-page-headless-shopify .about-us .about-us-container .right-section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 800px;
    row-gap: 32px;
    padding-top: 10px;
}

body.page-template-page-headless-shopify .about-us .about-us-container .right-section .right-block {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 24px;
    row-gap: 12px;
    align-items: center;
}

/* Іконка — синій rounded square 40×40 */
body.page-template-page-headless-shopify .about-us .about-us-container .right-section .right-block img {
    grid-column: 1;
    grid-row: 1;
    width: 40px;
    height: 40px;
    object-fit: contain;
    padding: 0;
    margin: 0;
    align-self: center;
}

/* Заголовок — поряд з іконкою, інлайн */
body.page-template-page-headless-shopify .about-us .about-us-container .right-section .right-block .right-text-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: #333333;
    padding: 0;
    margin: 0;
    align-self: center;
}

/* Опис — під заголовком, з тим самим лівим відступом (під текстом, не під іконкою) */
body.page-template-page-headless-shopify .about-us .about-us-container .right-section .right-block .right-text {
    grid-column: 2;
    grid-row: 2;
    padding: 0;
    margin: 0;
}
body.page-template-page-headless-shopify .about-us .about-us-container .right-section .right-block .right-text p {
    margin: 0;
    max-width: 100%;
    color: #333333;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
}
body.page-template-page-headless-shopify .about-us .about-us-container .right-section .right-block .right-text h3 {
    /* На цій сторінці заголовок виводиться через right-text-title, а не h3.
       Якщо в WYSIWYG тексті раптом буде h3 — нормалізуємо. */
    font-size: 16px;
    font-weight: 600;
    padding: 0;
    margin: 0 0 6px;
}

/* Адаптив правої колонки */
@media (max-width: 1080px) {
    body.page-template-page-headless-shopify .about-us .about-us-container .right-section {
        max-width: 600px;
    }
}

@media (max-width: 768px) {
    body.page-template-page-headless-shopify .about-us .about-us-container .right-section {
        gap: 24px;
        row-gap: 24px;
    }
    body.page-template-page-headless-shopify .about-us .about-us-container .right-section .right-block {
        grid-template-columns: 32px 1fr;
        column-gap: 12px;
        row-gap: 8px;
    }
    body.page-template-page-headless-shopify .about-us .about-us-container .right-section .right-block img {
        width: 32px;
        height: 32px;
    }
    body.page-template-page-headless-shopify .about-us .about-us-container .right-section .right-block .right-text-title {
        font-size: 18px;
    }
    body.page-template-page-headless-shopify .about-us .about-us-container .right-section .right-block .right-text p {
        font-size: 14px;
    }
}


/* ---------- SERVICES (NUMBERED ACCORDION) ----------
   Анімація через grid-template-rows: 0fr → 1fr — точно по висоті контенту,
   без max-height-стрибків. Підтримка: усі сучасні браузери (з кінця 2023). */

.custom-headless-shopify.hs-services {
    background: linear-gradient(180deg, var(--hs-bg-soft), var(--hs-bg-lighter));
    padding: 80px 0;
}

.custom-headless-shopify .hs-services__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.custom-headless-shopify .hs-service-item {
    background: var(--hs-white);
    border: 1px solid rgba(180, 203, 255, 0.5);
    border-radius: 40px;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
}
.custom-headless-shopify .hs-service-item:hover:not(.is-open) {
    border-color: var(--hs-primary-light);
}

/* Active card: light beige bg + blue glow shadow (like in design) */
.custom-headless-shopify .hs-service-item.is-open {
    background: #F8F8F8;
    box-shadow: -2px -2px 13px 0 rgba(255, 255, 255, 0.40), 0 48px 18px -38px rgba(115, 152, 228, 0.43);
    position: relative;
    border-color: #ffffff;
}
.custom-headless-shopify .hs-service-item.is-open:before {
    content: '';
    border-radius: 40px;
    border-top: 3px solid #ffffff;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    border-left: 3px solid #ffffff;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.custom-headless-shopify .hs-service-item__head {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding: 40px 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: inherit;
}

/* Number — large, light-purple, italic-ish weight */
.custom-headless-shopify .hs-service-item__num {
    flex-shrink: 0;
    width: 32px;
    font-size: 50px;
    font-weight: 700;
    line-height: 44px;
    color: #C8CDFA;
    transition: color 0.3s ease;
    text-align: left;
}
.custom-headless-shopify .hs-service-item.is-open .hs-service-item__num {
    color: #C8CDFA;
}

/* Title */
.custom-headless-shopify .hs-service-item__title {
    flex: 1;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--hs-dark);
    transition: color 0.3s ease;
}
.custom-headless-shopify .hs-service-item.is-open .hs-service-item__title {
    color: var(--hs-primary);
}

/* Icons — closed and open states swapped via opacity */
.custom-headless-shopify .hs-service-item__icon {
    flex-shrink: 0;
    position: relative;
    width: 32px;
    height: 32px;
}
.custom-headless-shopify .hs-service-item__icon svg {
    position: absolute;
    inset: 0;
    transition: opacity 0.3s ease;
}
.custom-headless-shopify .hs-service-item__icon-open {
    opacity: 0;
}
.custom-headless-shopify .hs-service-item.is-open .hs-service-item__icon-closed {
    opacity: 0;
}
.custom-headless-shopify .hs-service-item.is-open .hs-service-item__icon-open {
    opacity: 1;
}

/* SMOOTH ACCORDION ANIMATION — grid-rows technique */
.custom-headless-shopify .hs-service-item__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.custom-headless-shopify .hs-service-item.is-open .hs-service-item__body {
    grid-template-rows: 1fr;
}
.custom-headless-shopify .hs-service-item__body-inner {
    overflow: hidden;
    min-height: 0;
}
.custom-headless-shopify .hs-service-item__body-inner > * {
    padding: 0 40px 40px;
    color: var(--hs-dark);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}
.custom-headless-shopify .hs-service-item__body-inner > *:not(:last-child) {
    padding-bottom: 12px;
}


/* ---------- HOW WE WORK ---------- */
.custom-headless-shopify.hs-how {
    background: var(--Bestia-Stroke-2, linear-gradient(296deg, #E4ECFE 5.71%, #FFF 61.76%));
    padding: 80px 0;
}
.custom-headless-shopify .hs-how__steps {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: nowrap;
}
.custom-headless-shopify .hs-how-step {
    flex: 1;
    text-align: center;
    padding: 0 16px;
    min-width: 0;
}
.custom-headless-shopify .hs-how-step__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-headless-shopify .hs-how-step__icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}
.custom-headless-shopify .hs-how-step__title {
    font-size: 17px;
    font-weight: 500;
    color: var(--hs-dark);
    margin: 0 0 8px;
}
.custom-headless-shopify .hs-how-step__desc {
    font-size: 14px;
    line-height: 1.6;
}
.custom-headless-shopify .hs-how__arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 4px;
    margin-top: 0;
    align-self: flex-start;
}


/* ---------- RESULTS ---------- */
.custom-headless-shopify.hs-results {
    background: var(--hs-white);
    padding: 120px 0 120px;
}
.custom-headless-shopify .hs-results__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin: 0 auto;
    padding: 60px 20px 0;
}
.custom-headless-shopify .hs-result-card {
    position: relative;
    background: var(--hs-white);
    padding: 38px 20px;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 20px;
    border: 1px solid var(--Bestia-blue, #4D61FF);
    background: var(--Bestia-Stroke-2, linear-gradient(296deg, #E4ECFE 5.71%, #FFF 61.76%));

    /* Shadow */
    box-shadow: 0 5px 15px -1px rgba(0, 95, 249, 0.31);
    overflow: visible;
}
.custom-headless-shopify .hs-result-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 36px 40px -22px rgba(77, 97, 255, 0.28);
}

/* Велике значення виходить за верхній край картки */
.custom-headless-shopify .hs-result-card__value {
    position: absolute;
    top: -39px;
    left: 0;
    right: 0;
    font-size: 56px;
    font-weight: 600;
    color: var(--hs-primary);
    line-height: 1;
    margin: 0;
    text-align: center;
}

.custom-headless-shopify .hs-result-card__label {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.45;
    margin: 0 auto;
    max-width: 180px;
}

.custom-headless-shopify .hs-results__disclaimer {
    margin: 56px auto 0;
    padding: 0 20px;
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
}


/* ---------- TECHNOLOGY STACK ---------- */
.custom-headless-shopify.hs-stack {
    padding: 0 0 160px;
}
.custom-headless-shopify .hs-stack__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
.custom-headless-shopify .hs-stack-card {
    border-radius: 20px;
    padding: 30px 30px 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 1px solid var(--Process, rgba(180, 203, 255, 0.50));
    background: rgba(255, 255, 255, 0.70);
}
.custom-headless-shopify .hs-stack-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(77, 97, 255, 0.14);
}
.custom-headless-shopify .hs-stack-card__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-headless-shopify .hs-stack-card__icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.custom-headless-shopify .hs-stack-card__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 14px;
}
.custom-headless-shopify .hs-stack-card__desc {
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
}


/* ---------- RESPONSIVE для кастомних секцій ---------- */
@media (max-width: 1200px) {
    .custom-headless-shopify .hs-section-title { font-size: 30px; }
    .custom-headless-shopify .hs-result-card__value { font-size: 48px; top: -30px; }
    .custom-headless-shopify .hs-how__steps { flex-wrap: wrap; gap: 24px 0; }
    .custom-headless-shopify .hs-how-step { flex: 0 0 50%; }
    .custom-headless-shopify .hs-how__arrow { display: none; }
}

@media (max-width: 1024px) {
    .custom-headless-shopify.hs-stack { padding: 60px 0 80px; }
    .custom-headless-shopify .hs-stack__grid { gap: 16px; }
    .custom-headless-shopify .hs-stack-card { padding: 28px 20px; }
    .custom-headless-shopify .hs-stack-card__title { font-size: 18px; }

    .custom-headless-shopify .hs-results__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 56px 20px;
        padding-top: 60px;
    }
}

@media (max-width: 768px) {
    .custom-headless-shopify.hs-services,
    .custom-headless-shopify.hs-how,
    .custom-headless-shopify.hs-results,
    .custom-headless-shopify.hs-stack { padding: 56px 0; }

    .custom-headless-shopify .hs-section-title { font-size: 26px; }
    .custom-headless-shopify .hs-section-title--center { margin-bottom: 28px; }

    .custom-headless-shopify .hs-service-item__head { padding: 20px 20px; gap: 16px; }
    .custom-headless-shopify .hs-service-item__num { font-size: 30px; width: 24px; }
    .custom-headless-shopify .hs-service-item__title { font-size: 15px; }
    .custom-headless-shopify .hs-service-item__icon { width: 28px; height: 28px; }
    .custom-headless-shopify .hs-service-item__icon svg { width: 28px; height: 28px; }
    .custom-headless-shopify .hs-service-item__body-inner > * { padding: 0 20px 22px 60px; font-size: 13px; }

    .custom-headless-shopify .hs-how-step { flex: 0 0 100%; }

    .custom-headless-shopify .hs-results__grid {
        grid-template-columns: 1fr 1fr;
        gap: 48px 12px;
        padding: 50px 16px 0;
    }
    .custom-headless-shopify .hs-result-card { padding: 50px 14px 22px; border-radius: 20px; }
    .custom-headless-shopify .hs-result-card__value { font-size: 40px; top: -26px; }
    .custom-headless-shopify .hs-result-card__label { font-size: 14px; }
    .custom-headless-shopify .hs-results__disclaimer { margin-top: 40px; }

    .custom-headless-shopify .hs-stack__grid { grid-template-columns: 1fr; gap: 16px; }
    .custom-headless-shopify .hs-stack-card { padding: 24px 20px; }

    .custom-headless-shopify .hs-how__steps {
        gap: 50px 0;
    }
}

@media (max-width: 480px) {
    .custom-headless-shopify .hs-section-title { font-size: 22px; }
    .custom-headless-shopify .hs-result-card__value { font-size: 34px; top: -22px; }
    .custom-headless-shopify .hs-result-card { padding: 30px 12px; }

    .custom-headless-shopify h2.hs-section-title {
        margin: 0 0 24px;
    }

    .custom-headless-shopify .hs-results__grid {
        padding: 20px 16px 0;
    }
    .custom-headless-shopify .hs-results__disclaimer {
        font-size: 13px;
    }
    .custom-headless-shopify.hs-stack {
        padding: 0 0 56px;
    }
    body.page-template-page-headless-shopify .client-reviews {
        padding-top: 50px;
    }
    body.page-template-page-headless-shopify .site-info {
        padding-top: 450px;
    }
    body.page-template-page-headless-shopify .about-us {
        padding-bottom: 60px;
    }
    body.page-template-page-headless-shopify .footer-top .footer-block .footer-block-inner {
        overflow: hidden;
    }
    body.page-template-page-headless-shopify .why-headless__title {
        margin-bottom: 40px;
    }
    body.page-template-page-headless-shopify .why-headless__list {
        gap: 60px;
    }
    body.page-template-page-headless-shopify .why-headless {
        padding: 40px 0 60px;
    }
    .custom-headless-shopify .hs-services__list {
        padding: 0;
    }
}

@media (max-width: 400px) {
    body.page-template-page-headless-shopify .site-info {
        padding-top: 500px;
    }
    body.page-template-page-headless-shopify h2 {
        font-size: 24px !important;
    }
    body.page-template-page-headless-shopify .footer-top .footer-block .footer-content p {
        font-size: 14px;
    }

}