.ndfHFb-c4YZDc-Wrql6b {
    opacity: 0;
    display: none;
}

.ndfHFb-c4YZDc-Wrql6b:hover {
    display: none;
}

.ndfHFb-c4YZDc-i5oIFb .ndfHFb-c4YZDc-Wrql6b-SmKAyb {
   display: none;
}

.ndfHFb-c4YZDc.ndfHFb-c4YZDc-i5oIFb .ndfHFb-c4YZDc-Bz112c:not([onclick]):not(:link):not(:visited) {
    background-image: url(//ssl.gstatic.com/docs/common/viewer/v3/v-sprite35.svg)!important;
    display: none;
}
.ndfHFb-c4YZDc-i5oIFb.ndfHFb-c4YZDc-e1YmVc .ndfHFb-c4YZDc-Wrql6b-AeOLfc-b0t70b .ndfHFb-c4YZDc-GSQQnc-LgbsSe {
    display: none;
}
.agon {
    allign: centr-centr;
}



  .agon {
    position: relative;
    padding-bottom: 140%; // (450 ÷ 500 = 0.9 = 90%)
    height: 0;
    overflow: hidden;
}
.agon iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Определяем CSS переменные для шрифтов */
:root {
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-headings: 'Poppins', var(--font-family-base); /* Poppins как основной для заголовков, Inter как запасной */
}

/* Применяем шрифты к основным элементам Tilda */
/* Важно: эти селекторы могут потребовать корректировки в зависимости от того, 
   какие стандартные блоки Tilda вы используете и хотите ли вы переопределять их шрифты глобально.
   Используйте с осторожностью, чтобы не сломать дизайн стандартных блоков Tilda.
   Лучше всего применять шрифты через ваши кастомные классы для HTML-блоков.
*/

body, 
.t-text, /* Общий класс для текста в Tilda */
.t-descr, /* Класс для описаний */
.tn-atom /* Текст в Zero Block */ {
    font-family: var(--font-family-base) !important; /* !important может понадобиться для переопределения стилей Tilda */
}

h1, h2, h3, h4, h5, h6,
.t-title, /* Общий класс для заголовков в Tilda */
.t-name, /* Класс для имен/названий */
.t-heading /* Еще один класс для заголовков */ {
    font-family: var(--font-family-headings) !important; /* !important может понадобиться */
}

/* 
   Если вы хотите, чтобы ЗАГОЛОВКИ из стандартных блоков Tilda также использовали Poppins, 
   вам нужно будет найти их специфичные классы (например, .t-title_xxl, .t-name_md и т.д.) 
   и применить к ним --font-family-headings.
   Это может быть довольно объемной задачей, если вы хотите покрыть все стандартные блоки.
*/

/* Ваши кастомные блоки уже будут использовать эти шрифты, если вы в их стилях указываете: */
/* font-family: var(--font-family-base); */
/* font-family: var(--font-family-headings); */

/* src/styles/global.css */

/* ==========================================================================
   1. CSS Переменные (Custom Properties)
   ========================================================================== */
:root {
    --primary-color: #6f4e37;       /* Коричневый для акцентов и кнопок */
    --secondary-color: #f8f8f8;    /* Очень светло-серый для фонов секций */
    --accent-color: #e8a374;        /* Мягкий оранжевый/персиковый для подзаголовков, иконок */
    --text-color: #333333;          /* Основной цвет текста */
    --heading-color: #4b3832;       /* Темно-коричневый для заголовков */
    --white-color: #ffffff;         /* Белый цвет */
    --border-color: #e0e0e0;        /* Цвет границ */
    --light-gray-text: #666666;     /* Светло-серый текст для описаний */
    --muted-text-color: #555555;    /* Приглушенный текст */

    --border-radius: 10px;
    --border-radius-large: 16px;
    --box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    --box-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.12);
    
    --transition-speed: 0.3s;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-headings: 'Poppins', var(--font-family); /* Пример, если для заголовков другой шрифт */
}

/* ==========================================================================
   2. Базовый сброс и основные стили
   ========================================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* 1rem = 16px */
    line-height: 1.6; /* Базовая высота строки */
    -webkit-text-size-adjust: 100%; /* Предотвращение масштабирования текста на iOS */
}

body {
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: var(--white-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Предотвращение горизонтального скролла */
}

/* ==========================================================================
   3. Общие элементы и утилиты
   ========================================================================== */
.container {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;  /* Уменьшил немного для лучшего вида на мобильных */
    padding-right: 20px; /* Уменьшил немного для лучшего вида на мобильных */
}

section {
    padding: 80px 0;
    text-align: center;
    overflow: hidden; /* Предотвращение вылезания анимированных элементов */
}

/* Чередование фона секций */
.welcome-section,
.advantages-section,
.how-it-works-section,
.brands-serviced,
.instructions-section,
.stats-section, /* Для страницы "О нас" */
.partners-section { /* Для страницы "О нас" */
    background-color: var(--secondary-color);
}

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    max-width: 100%;
    height: auto;
}
img {
    border-radius: var(--border-radius); /* Общее скругление для изображений */
}

/* Заголовки */
h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
    font-family: var(--font-family-headings); /* Используем Poppins для заголовков */
    margin-bottom: 0.7em;
    line-height: 1.3;
    font-weight: 600;
}
h1 { font-size: 2.8rem; font-weight: 700; } /* Немного уменьшил для баланса */
h2 { font-size: 2.2rem; margin-bottom: 1em; } /* Немного уменьшил */
h3 { font-size: 1.4rem; }
h4 { font-size: 1.15rem; color: var(--primary-color); margin-bottom: 0.8em; font-weight: 600;}

p {
    margin-bottom: 1.2em;
    color: var(--muted-text-color);
    max-width: 680px; /* Ограничение ширины для читаемости */
    margin-left: auto;
    margin-right: auto;
    font-size: 1.05rem;
}
p.lead { /* Для более крупного вводного текста */
    font-size: 1.2rem;
    color: var(--text-color);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}
a:hover {
    color: var(--accent-color);
    text-decoration: none; /* Часто не нужно подчеркивание при ховере */
}

/* Кнопки */
a.btn {
    text-decoration: none; /* Убираем подчеркивание, если оно где-то наследуется */
}
.btn {
    display: inline-block;
    padding: 14px 32px;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--font-family);
    color: var(--text-color);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    text-decoration: none;
    text-align: center;
    position: relative;
    box-shadow: 0 3px 8px rgba(111, 78, 55, 0.1); /* Уменьшил интенсивность тени */
}
.btn-primary {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    background-color: #5a3d2b; /* Затемненный primary */
    border-color: #5a3d2b;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(111, 78, 55, 0.2);
}
.btn-secondary {
    background-color: var(--white-color);
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    box-shadow: none;
}
.btn-secondary:hover {
    background-color: var(--secondary-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}
.btn-sm { /* Маленькая кнопка, например, в навигации */
    padding: 8px 20px;
    font-size: 0.9rem;
    box-shadow: none;
}
.btn-sm:hover {
    box-shadow: none; /* Убираем тень при ховере для маленьких кнопок, если она не нужна */
}
/* Гарантируем белый цвет текста для ссылок с классом .btn-primary */
a.btn-primary,
button.btn-primary { /* Добавил button на всякий случай */
    background-color: var(--primary-color);
    color: var(--white-color) !important; /*  p:first-of-type { /* Вступительный параграф */
    text-align: center;
    margin-bottom: 2.5em;
    color: var(--muted-text-color);
    max-width: 700px;
}

.contact-intro-grid {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 30px; /* Уменьшил немного отступ между блоками на мобильных */
    margin-bottom: 40px;
}

@media (min-width: 992px) {
    .contact-intro-grid {
        grid-template-columns: 1fr 1fr; 
        gap: 40px; /* Отступ между блоками на десктопе */
    }
}

.contact-block { /* Общий стиль для блоков "Как связаться" и "Реквизиты" */
    text-align: left;
    padding: 30px; /* Увеличил внутренние отступы */
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow);
    display: flex; /* Для выравнивания кнопки вниз, если она есть */
    flex-direction: column;
}
.contact-block.primary-contacts { /* Блок "Как с нами связаться" */
    background-color: var(--secondary-color); /* Светло-серый фон */
}
.contact-block.requisites-details { /* Новый класс для блока реквизитов */
    background-color: #f0f4f8; /* Немного другой оттенок фона, например, очень светлый синеватый */
                               /* или используйте var(--white-color) с рамкой, если предпочитаете */
    /* border: 1px solid var(--border-color); */
}
.contact-block h2 {
    font-size: 1.5rem; /* Немного уменьшил для гармонии */
    color: var(--heading-color);
    margin-top: 0;
    margin-bottom: 1.2em; /* Увеличил отступ под заголовком */
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--border-color);
}
.contact-block p,
.contact-block dl { /* Применяем отступ и к dl */
    margin-bottom: 0.9em; /* Единый отступ для параграфов и списков */
    line-height: 1.65;
    max-width: none; 
    margin-left: 0;
    color: var(--muted-text-color);
}
.contact-block p strong {
    color: var(--heading-color);
    font-weight: 500; /* Не слишком жирно */
}
.contact-block a {
    color: var(--primary-color);
    text-decoration: none; /* Убираем подчеркивание по умолчанию */
}
.contact-block a:hover {
    color: var(--accent-color);
    text-decoration: underline; /* Подчеркивание при наведении */
}
.contact-block .small-text {
    font-size: 0.85rem;
    color: var(--light-gray-text);
    margin-top: 0.2em; /* Немного уменьшил отступ */
    line-height: 1.4;
}
.contact-block .social-icons {
    margin-top: 15px;
    margin-bottom: 25px;
    display: flex;
    gap: 18px;
}
.contact-block .social-icons img {
    width: 30px; 
    height: 30px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.contact-block .social-icons a:hover img {
    opacity: 1;
}

.contact-block .btn-primary { /* Кнопка консультации */
    margin-top: auto; /* Прижимает кнопку вниз, если блок flex */
    align-self: flex-start; /* Выравнивание кнопки по левому краю */
}

/* Стили для реквизитов */
.requisites-list dt {
    font-weight: 500; /* Немного менее жирный, чем strong */
    color: var(--text-color); /* Темнее, чем значение */
    margin-top: 0.8em;
    padding-left: 10px; /* Отступ слева для меток реквизитов */
}
.requisites-list dt:first-of-type {
    margin-top: 0;
}
.requisites-list dd {
    margin-left: 10px; /* Отступ слева для значений реквизитов, такой же как у dt */
    margin-bottom: 0.6em;
    color: var(--muted-text-color);
    word-break: break-word; /* Для длинных строк, таких как номер счета */
}

.site-footer {
    background-color: var(--white-color); /* Или другой фон, если нужно */
    color: var(--light-gray-text, #666);
    padding: 30px 0;
    font-size: 0.9rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
    text-align: center; /* Общее выравнивание по центру для мобильных */
}

.site-footer .container {
    display: flex;
    flex-direction: column; /* На мобильных стек */
    justify-content: center;
    align-items: center;
    gap: 15px; /* Отступ между блоками копирайта и контактов */
}

.map-container-block { 
    text-align: center;
    padding: 40px 0; /* Отступы сверху и снизу */
    background-color: var(--secondary-color); /* Фон для секции с картой */
}
.map-container-block h2 {
    margin-bottom: 0.8em; /* Уменьшил отступ */
    font-size: 1.8rem;
}
.map-container-block p:first-of-type { /* Параграф с адресом под заголовком карты */
    margin-bottom: 1.5em;
    color: var(--muted-text-color);
}

.map-embed-wrapper { /* Новая обертка для карты */
    position: relative;
    width: 100%;
    /* height: 0; */ /* Если используем padding-bottom для соотношения сторон */
    height: 450%; /* Или фиксированная высота, если не нужно соотношение сторон */
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    background-color: #e0e0e0; /* Фон-заглушка, пока карта грузится */
}
.map-embed-wrapper iframe {
    position: absolute; /* Позиционируем iframe внутри обертки */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Заставляем iframe занять всю высоту обертки */
    border: 0; /* Убираем рамку iframe */
}
.map-container-block .btn-secondary {
    margin-top: 25px;
}


.footer-copy { /* Копирайт */
    order: 2; /* Копирайт ниже на мобильных */
    margin-top: 10px; 
}

@media (min-width: 992px) { /* Или ваш основной breakpoint для десктопа */
    .site-footer .container {
        flex-direction: row; /* В строку на десктопе */
        justify-content: space-between; /* Разнести по краям */
        align-items: center;
    }
    .footer-copy {
        order: 1; /* Копирайт слева */
        margin-top: 0;
        text-align: left;
    }
    /* Класс .footer-contacts-component уже имеет свои @media стили внутри компонента */
}

.page-content-section { /* Общий класс для страниц с текстовым контентом */
    padding-top: 40px;
    padding-bottom: 60px;
    background-color: var(--white-color); 
}

.page-content-section .container {
    max-width: 900px; /* Ограничиваем ширину контента для читаемости */
    text-align: left; /* Основной текст выравниваем по левому краю */
}

.page-content-section h1 {
    text-align: center; /* Главный заголовок страницы по центру */
    margin-bottom: 1.5em;
    font-size: 2.2rem;
}

.page-content-section h2 { /* Подзаголовки секций (Доставка, Оплата) */
    font-size: 1.8rem;
    margin-top: 2em;
    margin-bottom: 1em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--border-color);
}

.page-content-section h3 { /* Подзаголовки подсекций (1. Доставка...) */
    font-size: 1.3rem;
    color: var(--heading-color);
    margin-top: 1.5em;
    margin-bottom: 0.7em;
}

.page-content-section p, 
.page-content-section ul {
    margin-bottom: 1.2em;
    line-height: 1.7;
}

.page-content-section ul {
    list-style-position: outside;
    padding-left: 20px; /* Для стандартных маркеров списка */
}
.page-content-section ul li {
    margin-bottom: 0.5em;
}

.payment-methods-logos,
.delivery-company-logo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px; /* Отступы между логотипами */
    margin-top: 10px;
    margin-bottom: 20px;
}

.payment-methods-logos img,
.delivery-company-logo img {
    max-height: 40px; /* Высота логотипов платежных систем */
    width: auto;
    object-fit: contain;
    border-radius: 0; /* Убираем общее скругление, если не нужно */
}
.delivery-company-logo img {
    max-height: 60px; /* Для лого Автолайтэкспресс */
}

.cta-section-generic { /* Для блока "Оставьте заявку" в конце */
    padding: 60px 0;
    background-color: var(--secondary-color); /* Или другой фон */
    text-align: center;
}
.cta-section-generic h2 {
    border-bottom: none; /* Убираем бордер у заголовка в CTA */
    margin-bottom: 0.5em;
}
.cta-section-generic p {
    margin-bottom: 1.5em;
}

/* Убираем "хлебные крошки" и "к основному контенту", если они не нужны */
.breadcrumbs, .skip-link {
    display: none; 
}

/* src/styles/global.css */

/* ... ваши существующие стили ... */

/* ==========================================================================
   Стили для страницы Блога (blog/index.astro)
   ========================================================================== */
.blog-listing-section {
    padding-top: 40px;
    padding-bottom: 60px;
}

.blog-listing-section .container {
    max-width: 960px; /* Немного шире для списка постов */
}

.blog-header {
    text-align: center;
    margin-bottom: 3em;
}
.blog-header h1 {
    font-size: 2.5rem; /* Заголовок страницы блога */
    margin-bottom: 0.3em;
}
.blog-header .blog-subtitle {
    font-size: 1.1rem;
    color: var(--muted-text-color);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.blog-posts-grid {
    display: grid;
    grid-template-columns: 1fr; /* По умолчанию одна колонка */
    gap: 40px;
}

@media (min-width: 768px) {
    .blog-posts-grid {
        grid-template-columns: repeat(2, 1fr); /* Две колонки на планшетах */
        gap: 30px;
    }
}
@media (min-width: 992px) {
    /* Можно оставить 2 колонки или сделать 3, если карточки компактные */
    /* .blog-posts-grid {
        grid-template-columns: repeat(3, 1fr);
    } */
}

.post-card {
    background-color: var(--white-color);
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}
.post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-hover);
}

.post-card-image-link {
    display: block;
}
.post-card-image {
    width: 100%;
    height: 200px; /* Фиксированная высота для обложки */
    object-fit: cover;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0; /* Убираем скругление у картинки, так как оно на .post-card */
}

.post-card-content {
    padding: 20px 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.post-card-content h2 {
    font-size: 1.4rem;
    margin-bottom: 0.5em;
    line-height: 1.4;
}
.post-card-content h2 a {
    color: var(--heading-color);
    text-decoration: none;
}
.post-card-content h2 a:hover {
    color: var(--primary-color);
}
.post-card-meta {
    font-size: 0.85rem;
    color: var(--light-gray-text);
    margin-bottom: 1em;
}
.post-card-excerpt {
    font-size: 0.95rem;
    color: var(--muted-text-color);
    margin-bottom: 1.5em;
    flex-grow: 1; /* Чтобы описание занимало доступное место */
     /* Ограничение текста по количеству строк (опционально) */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Количество строк */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
}
.post-card-readmore {
    margin-top: auto; /* Прижимаем кнопку "Читать далее" к низу карточки */
    align-self: flex-start; /* Выравниваем по левому краю */
}

/* Стили для галереи изображений в посте блога */
.image-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Адаптивные колонки */
    gap: 15px;
    margin: 1.5em 0;
}
.image-gallery-grid figure {
    margin: 0; /* Убираем стандартный отступ у figure */
}
.image-gallery-grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* Можно настроить */
    object-fit: cover;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

/* Стили для адаптивного видео */
.video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    position: relative;
    height: 0;
    margin: 1.5em 0;
    border-radius: var(--border-radius); /* Скругление для контейнера видео */
    box-shadow: var(--box-shadow); /* Тень для контейнера видео */
}
.video-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border: 0; /* Убираем рамку iframe */
}

/* Общие стили для контента в .prose (если они еще не в BlogPostLayout.astro) */
.prose { 
    line-height: 1.7;
}
.prose h2 { font-size: 1.8rem; margin-top: 1.8em; margin-bottom: 0.8em; }
.prose h3 { font-size: 1.4rem; margin-top: 1.5em; margin-bottom: 0.7em; }
.prose p { margin-bottom: 1em; max-width: none; }
.prose ul, .prose ol { margin-bottom: 1em; padding-left: 25px; }
.prose li { margin-bottom: 0.5em; }
.prose a { text-decoration: underline; color: var(--primary-color); }
.prose a:hover { text-decoration: none; color: var(--accent-color); }
.prose img { margin: 1.5em auto; display: block; box-shadow: var(--box-shadow); border-radius: var(--border-radius); }
.prose blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1em;
    margin: 1.5em 0 1.5em 0; /* Добавил отступ слева 0, чтобы не было двойного */
    font-style: italic;
    color: var(--muted-text-color);
}
.prose code:not(pre > code) { /* Инлайновый код */
    background-color: var(--secondary-color);
    padding: 0.2em 0.4em;
    border-radius: var(--border-radius);
    font-size: 0.9em;
}
.prose pre { /* Блок кода */
    background-color: #2d2d2d; 
    color: #f8f8f2;
    padding: 1em;
    border-radius: var(--border-radius);
    overflow-x: auto;
    margin: 1.5em 0;
}
.prose pre code {
    background-color: transparent;
    padding: 0;
    font-size: inherit; /* Наследуем размер шрифта от pre */
    color: inherit; /* Наследуем цвет от pre */
}

/* ==========================================================================
   Стили для страницы Услуг (uslugi/index.astro)
   ========================================================================== */
.services-page-section { /* Общий класс для страниц с текстовым контентом */
    padding-top: 40px;
    padding-bottom: 60px;
    background-color: var(--white-color); 
}

.services-page-section .container {
    max-width: 960px; 
    text-align: left; 
}

.services-page-header {
    text-align: center;
    margin-bottom: 3em;
}
.services-page-header h1 {
    font-size: 2.5rem; 
    margin-bottom: 0.3em;
}
.services-page-header .page-subtitle { /* Используем общий класс, если есть */
    font-size: 1.15rem;
    color: var(--muted-text-color);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr; /* Одна колонка по умолчанию */
    gap: 30px;
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* Две колонки на планшетах и десктопах */
    }
}
/* Если хотите 3 колонки на больших экранах: */
/* @media (min-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
} */


.service-card {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: 25px 30px;
    box-shadow: var(--box-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    text-align: left; /* Выравнивание текста внутри карточки */
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-hover);
}

.service-card h3 {
    font-size: 1.3rem;
    color: var(--heading-color);
    margin-bottom: 0.7em;
    line-height: 1.4;
}
.service-card h3 a {
    color: inherit; /* Наследуем цвет от h3 */
    text-decoration: none;
}
.service-card h3 a:hover {
    color: var(--primary-color); /* Акцентный цвет при наведении на заголовок */
    text-decoration: underline;
}

.service-card p { /* Краткое описание услуги, если будет */
    font-size: 0.95rem;
    color: var(--muted-text-color);
    margin-bottom: 1.5em;
    flex-grow: 1; /* Если есть описание, оно будет занимать место */
    max-width: none; /* Сбрасываем ограничение p для карточки */
    margin-left: 0;
}

.service-card .btn {
    margin-top: auto; /* Прижимаем кнопку к низу карточки */
    align-self: flex-start; /* Кнопка слева */
}
/* ==========================================================================
   Стили для страницы Продажи кофе (coffee-price.astro)
   ========================================================================== */
.coffee-price-section {
    padding-top: 40px;
    padding-bottom: 60px;
}

.coffee-price-section .container {
    max-width: 960px;
    text-align: left;
}

.coffee-price-header {
    text-align: center;
    margin-bottom: 2em;
}
.coffee-price-header .brand-title { /* "Tasty Coffee" */
    font-size: 1.2rem;
    color: var(--muted-text-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.2em;
}
.coffee-price-header h1 { /* "Tasty Coffee — это вкусный..." */
    font-size: 1.8rem; /* Немного меньше главного заголовка страницы */
    line-height: 1.5;
    color: var(--heading-color);
    margin-bottom: 1.5em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.price-table-container {
    overflow-x: auto; /* Для адаптивности таблицы на малых экранах */
    margin-bottom: 3em;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
.price-table {
    width: 100%;
    border-collapse: collapse; /* Убираем двойные рамки */
    font-size: 0.95rem;
}
.price-table th,
.price-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.price-table thead th {
    background-color: var(--secondary-color);
    font-weight: 600;
    color: var(--heading-color);
    white-space: nowrap; /* Чтобы заголовки не переносились, если возможно */
}
.price-table tbody tr:hover {
    background-color: #f9f9f9; /* Легкий фон при наведении на строку */
}
.price-table td:nth-child(1), /* № */
.price-table td:nth-child(3), /* Масса */
.price-table td:nth-child(4) { /* Цена */
    white-space: nowrap;
    text-align: center;
}
.price-table td:nth-child(4) { /* Цена */
    font-weight: 500;
    color: var(--primary-color);
}


.order-info-section {
    margin-bottom: 3em;
    padding: 25px;
    background-color: var(--secondary-color);
    border-radius: var(--border-radius-large);
}
.order-info-section h2 {
    font-size: 1.6rem;
    margin-top: 0;
    margin-bottom: 1em;
    text-align: center;
    border-bottom: none;
}
.order-info-section h3 {
    font-size: 1.2rem;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
.order-info-section ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 1em;
}
.order-info-section ul li {
    margin-bottom: 0.3em;
}
.contact-links-coffee {
    margin-top: 1em;
}
.contact-links-coffee p {
    margin-bottom: 0.5em;
    max-width: none;
}
.contact-links-coffee a {
    margin-right: 10px;
    word-break: break-all; /* Для длинных ссылок */
}

.related-articles-section {
    padding-top: 40px;
    border-top: 1px solid var(--border-color); /* Отделяем от предыдущего блока */
}
.related-articles-section h2 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 1.5em;
    border-bottom: none;
}
/* Стили для .blog-posts-grid и .post-card уже должны быть в global.css из предыдущего примера */

/* Убираем "хлебные крошки" и "к основному контенту", если они не нужны на этой странице */
/* .breadcrumbs, .skip-link {
    display: none; 
} */

/* src/styles/global.css */

/* ... ваши существующие стили ... */

/* ==========================================================================
   Стили для страницы Услуги (конкретный сервис)
   ========================================================================== */
.service-detail-section {
    padding-top: 40px;
    padding-bottom: 60px;
    background-color: var(--white-color);
}

.service-detail-section .container {
    max-width: 900px;
    text-align: left;
}

.service-detail-header {
    text-align: center;
    margin-bottom: 2.5em;
}
.service-detail-header .service-category-link { /* "Сервисное обслуживание кофемашин" */
    display: block;
    font-size: 0.9rem;
    color: var(--light-gray-text);
    margin-bottom: 0.5em;
    text-transform: uppercase;
}
.service-detail-header .service-category-link a {
    color: var(--light-gray-text);
    text-decoration: none;
}
.service-detail-header .service-category-link a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}
.service-detail-header h1 {
    font-size: 2.2rem;
    margin-bottom: 0.3em;
}
.service-detail-header .page-subtitle {
    font-size: 1.1rem;
    color: var(--muted-text-color);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
}

.service-pricing-block ul {
    list-style-type: none;
    padding-left: 0;
}
.service-pricing-block ul li {
    position: relative;
    padding-left: 28px; /* Место для галочки */
    margin-bottom: 0.6em;
    line-height: 1.6;
}
.service-pricing-block ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 1px; 
    color: var(--primary-color); 
    font-weight: bold;
    font-size: 1.1em;
}

/* И для delivery-info-block, если там тоже списки */
.delivery-info-block ul {
    list-style-type: none;
    padding-left: 0;
}
.delivery-info-block ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 0.6em;
    line-height: 1.6;
}
.delivery-info-block ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 1px; 
    color: var(--primary-color); 
    font-weight: bold;
    font-size: 1.1em;
}

.additional-services-block h3,
.price-notes-block h3,
.delivery-info-block h3,
.timing-info-block h3 {
    font-size: 1.3rem;
    margin-top: 1.8em;
    margin-bottom: 0.7em;
}

.text-block { /* Для общих текстовых блоков */
    margin-bottom: 2.5em;
}
.text-block h2 { /* Для заголовков типа "Почему важно обслуживание" */
    font-size: 1.8rem;
    margin-top: 2em;
    margin-bottom: 1em;
    text-align: center; /* Можно сделать по центру или слева */
}

/* src/styles/global.css */

/* ... ваши существующие стили ... */

/* ==========================================================================
   Улучшенные стили для Аккордеона
   ========================================================================== */
.accordion-block {
    margin-top: 2em;
    margin-bottom: 2.5em;
}
.accordion-block h2 { /* Заголовок перед аккордеоном */
     text-align: center;
     margin-bottom: 1.5em; /* Увеличил отступ */
     font-size: 1.8rem; /* Сделал немного крупнее */
     color: var(--heading-color);
}
.accordion-block > .container > p { /* Подзаголовок аккордеона */
    text-align: center;
    margin-bottom: 2em;
    color: var(--muted-text-color);
}

.accordion-item {
    background-color: var(--white-color); /* Белый фон для каждого элемента */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius); /* Скругление для элемента */
    margin-bottom: 15px; /* Отступ между элементами аккордеона */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Легкая тень */
    transition: box-shadow 0.3s ease;
}
.accordion-item:last-child {
    margin-bottom: 0;
}
.accordion-item:hover {
    box-shadow: var(--box-shadow); /* Тень поярче при наведении на весь элемент */
}

.accordion-item-header {
    background-color: transparent; /* Убираем фон, так как он на .accordion-item */
    padding: 18px 25px; /* Увеличиваем паддинги */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600; /* Делаем текст заголовка жирнее */
    color: var(--heading-color);
    width: 100%; /* Чтобы кнопка занимала всю ширину */
    border: none; /* Убираем стандартную рамку кнопки */
    text-align: left; /* Текст заголовка слева */
    font-size: 1.1rem; /* Размер шрифта заголовка */
    transition: color 0.3s ease;
}
.accordion-item-header:hover,
.accordion-item-header:focus { /* Стиль при фокусе для доступности */
    color: var(--primary-color);
    outline: none; /* Убираем стандартный outline, если добавляем свой */
}
.accordion-item.active .accordion-item-header {
    color: var(--primary-color); /* Активный заголовок */
    /* Можно добавить верхнюю/нижнюю границу, если нужно отделить от контента */
    /* border-bottom: 1px solid var(--border-color); */
}

.accordion-item-header::after { /* Индикатор (стрелка) */
    content: '▼'; /* Более стильная стрелка вправо (можно заменить на SVG или FontAwesome) */
    font-size: 1.2em; /* Размер стрелки */
    color: var(--primary-color);
    transition: transform 0.3s ease;
    transform-origin: center;
    margin-left: 15px; /* Отступ для стрелки */
}
.accordion-item.active .accordion-item-header::after {
    transform: rotate(90deg); /* Поворачиваем стрелку вниз при открытии */
}

.accordion-item-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), 
                padding-top 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), 
                padding-bottom 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); /* Более плавная анимация */
    background-color: var(--white-color); /* Фон для контента */
    padding: 0 25px; /* Горизонтальный паддинг будет всегда, вертикальный анимируется */
    border-top: 1px solid transparent; /* Граница появится при раскрытии */
}
.accordion-item.active .accordion-item-content {
    /* max-height устанавливается JS */
    /* padding-top и padding-bottom устанавливаются JS */
    border-top-color: var(--border-color); /* Показываем границу при раскрытии */
}

.accordion-item-content-inner { 
    padding: 20px 0; /* Только вертикальные отступы здесь */
    /* Класс .prose для стилизации markdown-подобного контента уже должен быть определен */
}

/* Стили для класса .prose (если еще не определены или нуждаются в корректировке для аккордеона) */
.accordion-item-content-inner.prose p:first-child {
    margin-top: 0;
}
.accordion-item-content-inner.prose p:last-child {
    margin-bottom: 0;
}
.accordion-item-content-inner.prose ul,
.accordion-item-content-inner.prose ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.contact-info-service-page { /* Блок с контактами на странице услуги */
    margin-top: 2em;
    padding: 25px;
    background-color: var(--secondary-color);
    border-radius: var(--border-radius-large);
    text-align: center;
}
.contact-info-service-page h3 {
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 1em;
}
.contact-info-service-page p {
    margin-bottom: 0.8em;
    max-width: none;
}
.contact-info-service-page a {
    margin: 0 5px;
}

.service-info-block { /* Новый класс для секции "О нашем сервисе", если нужны уникальные отступы */
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: var(--secondary-color); /* Например, если хотите другой фон */
}

.service-info-block h2 {
    text-align: center;
    margin-bottom: 1.5em;
}

.service-info-item h3 { /* Заголовки пунктов из бывшего аккордеона */
    font-size: 1.4rem; /* Или другой размер */
    color: var(--heading-color);
    margin-top: 1.5em; /* Отступ перед новым пунктом */
    margin-bottom: 0.7em;
}
.service-info-item:first-child h3 {
    margin-top: 0; /* Убираем верхний отступ у первого заголовка */
}

/* Стили для класса .prose (типографика контента из Markdown или HTML-строк) */
.prose { 
    line-height: 1.7;
    color: var(--muted-text-color); /* Основной цвет текста для прозы */
}
.prose h2 { font-size: 1.8rem; margin-top: 1.8em; margin-bottom: 0.8em; color: var(--heading-color); }
.prose h3 { font-size: 1.4rem; margin-top: 1.5em; margin-bottom: 0.7em; color: var(--heading-color); }
.prose h4 { font-size: 1.15rem; margin-top: 1.2em; margin-bottom: 0.6em; color: var(--heading-color); }

.prose p { 
    margin-bottom: 1em; 
    max-width: none; /* Убираем ограничение ширины для p внутри .prose, если оно было глобальным */
}

.prose ul, 
.prose ol {
    margin-bottom: 1em;
    padding-left: 0; /* Убираем стандартный отступ браузера */
    list-style-type: none; /* Убираем стандартные маркеры */
}

.prose ul li,
.prose ol li { /* Применяем стили к li внутри .prose */
    position: relative; /* Для позиционирования псевдоэлемента */
    padding-left: 28px; /* Место для галочки и небольшого отступа */
    margin-bottom: 0.6em; /* Отступ между пунктами списка */
    line-height: 1.6; /* Высота строки для пунктов списка */
}

.prose ul li::before {
    content: '✓'; /* Символ галочки */
    position: absolute;
    left: 0;
    top: 1px; /* Небольшая коррекция вертикального положения, подберите по шрифту */
    color: var(--primary-color); /* Ваш кофейный цвет */
    font-weight: bold; /* Можно сделать галочку жирнее */
    font-size: 1.1em; /* Размер галочки относительно текста li */
}

/* Если у вас есть нумерованные списки в .prose и вы хотите для них стандартную нумерацию */
.prose ol {
    list-style-type: decimal; /* Возвращаем стандартную нумерацию */
    padding-left: 28px; /* Отступ для номеров */
}
.prose ol li::before {
    content: none; /* Убираем галочку для нумерованных списков */
}


.prose a { text-decoration: underline; color: var(--primary-color); }
.prose a:hover { text-decoration: none; color: var(--accent-color); }
.prose img { margin: 1.5em auto; display: block; box-shadow: var(--box-shadow); border-radius: var(--border-radius); }
.prose blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1em;
    margin: 1.5em 0 1.5em 0; 
    font-style: italic;
    color: var(--muted-text-color);
}
.prose code:not(pre > code) {
    background-color: var(--secondary-color);
    padding: 0.2em 0.4em;
    border-radius: var(--border-radius);
    font-size: 0.9em;
}
.prose pre { 
    background-color: #2d2d2d; 
    color: #f8f8f2;
    padding: 1em;
    border-radius: var(--border-radius);
    overflow-x: auto;
    margin: 1.5em 0;
}
.prose pre code {
    background-color: transparent;
    padding: 0;
    font-size: inherit; 
    color: inherit; 
}

/* src/styles/global.css */

/* ... ваши существующие стили ... */

.welcome-content ul.welcome-bullet-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 1em;
    margin-bottom: 1em;
}

.welcome-content ul.welcome-bullet-list li {
    position: relative;
    /* Базовый padding-left для десктопа, чтобы галочка была чуть поодаль */
    padding-left: 22px; /* Уменьшили базовый отступ, можно начать с этого */
    margin-bottom: 0.8em;
    line-height: 1.6;
    color: var(--muted-text-color);
}

.welcome-content ul.welcome-bullet-list li strong {
    color: var(--text-color);
    font-weight: 600;
}

.welcome-content ul.welcome-bullet-list li::before {
    content: '✓';
    position: absolute;
    left: 0; /* Галочка начинается с самого края padding-left */
    /* top: 1px; */ /* Можно попробовать top: 0; или использовать em для относительного позиционирования */
    top: 0.1em; /* Попробуйте это значение для лучшего вертикального выравнивания */
    font-size: 1.1em; 
    font-weight: bold;
    color: var(--primary-color);
    line-height: 1; 
}

/* Адаптивность */
@media (max-width: 767px) { /* Стили для телефонов */
    .welcome-content ul.welcome-bullet-list li {
        padding-left: 18px; /* ЕЩЕ УМЕНЬШИЛИ padding-left для мобильных */
                                /* Это значение должно быть чуть больше ширины самой галочки + маленький отступ */
        margin-bottom: 0.7em;
        font-size: 0.95rem; 
    }
    .welcome-content ul.welcome-bullet-list li::before {
        font-size: 1em; /* Можно оставить или немного уменьшить галочку */
        left: 0px;      /* Галочка будет в самом начале padding-left */
        top: 0.12em;    /* Тонкая подстройка вертикального положения для мобильных */
                        /* Возможно, придется поиграть с этим значением (0.1em, 0.15em, 0.05em) */
    }
}