/* =========================================================================
   Фабрика KS — внутренние страницы (общий каркас + блоки страниц).
   Подключается после main.css. Размеры сняты с живых страниц.
   ========================================================================= */

/* ---------- Каркас ---------- */
/* Белый фон области контента. Подвал заезжает на неё снизу (отрицательный отступ),
   и белым в углах бирюзового блока становится только секция с собственным белым фоном —
   как на сайте (у «О нас» последняя секция прозрачная, там углы тёмные). */
.ks-inner .ks-main { background: #fff; }
.ks-bg-white { background: #fff; }
.ks-inner .ks-footer { margin-top: -80px; }
@media (max-width: 640px) { .ks-inner .ks-footer { margin-top: -40px; } }
@media (min-width: 640px) and (max-width: 1024px) { .ks-inner .ks-footer { margin-top: -32px; } }

/* ---------- Плашка заголовка (UiCore page title) ----------
   Пороги у темы неровные: 640 / 700 / 767 / 1024 / 1100 — повторены как есть. */
@keyframes ks-ptFadeDown { from { transform: translate3d(0, -7vh, 0); } to { transform: translateZ(0); } }
@keyframes ks-ptFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ks-ptitle { position: relative; overflow: hidden; background: #070707; border-radius: 0 0 20px 20px; }
.ks-ptitle__inner { display: flex; flex-direction: column; width: min(95%, 1170px); margin: 0 auto; padding: 120px 10px 2px; }
.ks-ptitle__crumbs { margin: 0; font: 400 20px/30px var(--ks-font); color: #fff; }
.ks-ptitle__crumbs a { max-width: 70%; color: #fff; }
.ks-ptitle__crumbs a span { opacity: .6; transition: opacity .3s ease; }
.ks-ptitle__crumbs a:hover span { opacity: 1; }
.ks-ptitle__sep { font-family: 'ks-uicore'; font-style: normal; font-weight: 400; line-height: 1; }
.ks-ptitle__sep::before { content: '\e901'; display: inline-block; padding: 0 6px; font-size: 10px; opacity: .5; transform: rotate(-90deg); vertical-align: middle; }
.ks-ptitle__h1 { width: 100%; margin: 28px 0; font: 600 70px/70px var(--ks-font); letter-spacing: -.027em; color: #fff; }
.ks-ptitle__anim {
  opacity: 0;
  animation-name: ks-ptFadeDown, ks-ptFadeIn; animation-duration: 1.8s; animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1), cubic-bezier(0, 0, .2, 1);
}
.ks-ptitle__anim:nth-child(1) { animation-delay: .5s; }
.ks-ptitle__anim:nth-child(2) { animation-delay: .7s; }
@media (prefers-reduced-motion: reduce) { .ks-ptitle__anim { opacity: 1; animation: none; } }

@media (max-width: 1100px) and (min-width: 700px) {
  .ks-ptitle__h1 { font-size: 30px; line-height: 36px; margin: 12px 0 20px; }
}
@media (max-width: 1024px) {
  .ks-ptitle__crumbs { font-size: 18px; line-height: 27px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ks-ptitle__inner { padding-top: 75px; }
}
@media (max-width: 767px) {
  .ks-ptitle__crumbs { font-size: 16px; line-height: 24px; }
}
@media (max-width: 699px) {
  .ks-ptitle__h1 { font-size: 40px; line-height: 44px; margin: 16px 0; }
}
@media (max-width: 640px) {
  .ks-ptitle { padding-bottom: 15px; }
  .ks-ptitle__h1 { font-size: 30px; line-height: 33px; margin: 12px 0; }
}

/* ---------- Контейнер секции (повторяет поведение контейнера Elementor) ----------
   Горизонтальные отступы — у внешнего блока, вертикальные — у внутреннего,
   ширина внутреннего min(95%, 1170px), зазор между блоками 20px.
   Отступы задаются переменными: --pt/--pb (сверху/снизу), --px (по бокам). По умолчанию 10px, как у Elementor. */
.ks-con { --px: 10px; --pt: 10px; --pb: 10px; --gap: 20px; position: relative; display: flex; flex-direction: column; padding: 0 var(--px); }
.ks-con__in {
  display: flex; flex-direction: column; gap: var(--gap);
  width: 100%; max-width: min(100%, min(95%, 1170px)); margin: 0 auto;
  padding: var(--pt) 0 var(--pb);
}
@media (max-width: 1024px) { .ks-con__in { max-width: none; } }
@media (min-width: 640px) and (max-width: 1024px) { .ks-con__in { margin: 0; } }

/* ---------- Текстовый блок (виджет «Текст» с классом .text на сайте) ---------- */
.ks-text { font: 400 18px/26px var(--ks-font); color: #333; }
.ks-text p { margin: 0; }
.ks-text ul { margin: 5px 0 1em; padding-left: 25px; list-style: disc; }
.ks-text ol { margin: 1em 0; padding-left: 40px; list-style: decimal; } /* правило сайта .text ul на ol не действует */
.ks-text li > ul, .ks-text li > ol { margin-bottom: 0; }
.ks-text a { color: var(--ks-teal); }
@media (max-width: 767px) { .ks-text { font-size: 14px; line-height: 20px; } }

/* ---------- Прочие общие элементы страниц ---------- */
/* переменные задаются на самом элементе, чтобы не наследовались во вложенные блоки */
.ks-col { --gap: 20px; position: relative; display: flex; flex-direction: column; gap: var(--gap); }
.ks-h { margin: 0; }
.ks-rt p { margin: 0 0 1em; }
.ks-rt p:last-child { margin-bottom: 0; }
.ks-rt ul, .ks-rt ol { margin: 1em 0; padding-left: 40px; list-style: disc; }
.ks-rt ol { list-style: decimal; }
.ks-rt a { color: var(--ks-teal); }
/* у большинства текстов на телефоне margin-top: -4px — ставится классом */
@media (max-width: 767px) { .ks-m4 { margin-top: -4px; } }
/* Кнопка Elementor: текст прижат к верху строки, иконка по центру (как на сайте) */
.ks-btn { display: flex; align-items: stretch; justify-content: center; gap: 10px; text-align: center; text-transform: uppercase; transition: all .3s; }
.ks-btn svg { flex-shrink: 0; align-self: center; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: .3s all ease; }
/* Лайтбокс для фото */
.ks-lb { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .87); }
.ks-lb[hidden] { display: none; }
.ks-lb img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
.ks-lb__close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border: 0; background: none; color: #fff; font-size: 30px; line-height: 40px; cursor: pointer; }

/* =========================================================================
   Секция-документ: Правила оплаты, Реквизиты, Отправка посылки, Как найти нас
   (на сайте это одна и та же заготовка контейнера)
   ========================================================================= */
.ks-doc { --px: 0px; --pt: 60px; --pb: 140px; }
.ks-doc__body { --gap: 30px; margin-top: 10px; }
.ks-doc__card { background: #fff; border-radius: 30px; }
.ks-doc__h { font: 600 24px/28px var(--ks-font); color: #1A1A1A; }
.ks-doc__h--gap { margin-top: 50px; }
.ks-doc__txt { padding-right: 50px; font: 400 18px/26px var(--ks-font); color: #1A1A1A; }
@media (max-width: 1024px) { .ks-doc { --px: 20px; --pb: 100px; } }
@media (max-width: 767px) {
  .ks-doc { --pt: 30px; --pb: 70px; }
  .ks-doc__body { --gap: 20px; margin-top: 0; }
  .ks-doc__h { font-size: 18px; line-height: 22px; }
  .ks-doc__h--gap { margin-top: 30px; }
  .ks-doc__txt { margin-top: -4px; padding-right: 0; font-size: 14px; line-height: 20px; }
}

/* Правила оплаты */
.pay-note { padding: 30px; background: var(--ks-teal); border-radius: 30px; font-size: 21px; font-weight: 600; line-height: 40px; color: #fff; }
.pay-note span { font-weight: 400; }
@media (max-width: 767px) { .pay-note { font-size: 14px; line-height: 20px; } }

/* Отправка посылки */
.send-card { --gap: 40px; }
@media (max-width: 767px) { .send-card { --gap: 20px; } }

/* Как найти нас */
.where-top { flex-direction: row; flex-wrap: wrap; }
.where-top__row { display: flex; flex-direction: row; align-items: center; gap: 20px; width: 100%; }
.where-addr { width: 50%; max-width: 50%; }
.where-addr li { display: flex; align-items: center; }
.where-addr__icon { display: flex; padding-right: 5px; }
.where-addr__icon svg { width: 30px; height: 30px; margin: 0 3.75px; fill: var(--ks-teal); }
.where-addr__text { padding-left: 5px; font: 500 20px/24px var(--ks-font); color: #1D1D1B; }
.where-btn-wrap { width: 50%; max-width: 50%; }
.where-btn {
  padding: 15px; border: 2px solid var(--ks-teal); border-radius: 20px; background: var(--ks-teal);
  font: 600 16px/25px var(--ks-font); color: #fff;
}
.where-btn svg { width: 25px; height: 25px; }
.where-btn:hover { background: #1A1A1A; }
.where-btn:hover svg { transform: rotate(45deg); }
.where-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.where-photos a { display: block; line-height: 0; }
.where-photos img { display: block; width: 100%; height: 450px; object-fit: cover; border-radius: 20px; }
@media (max-width: 767px) {
  .where-top__row { flex-wrap: wrap; }
  .where-addr, .where-btn-wrap { width: 100%; max-width: 100%; }
  .where-addr li { align-items: flex-start; }
  .where-addr__icon { position: relative; top: 3px; }
  .where-addr__icon svg { width: 18px; height: 18px; margin: 0 2.25px; }
  .where-addr__text { font-size: 14px; line-height: 20px; }
  .where-btn { padding: 10px 0; border-radius: 15px; font-size: 14px; line-height: 14px; }
  .where-photos { grid-template-columns: 1fr; }
  .where-photos img { height: 300px; }
}

/* Юридические тексты (Политика, Оферта, Соглашение): типографика темы UiCore */
.ks-legal h2 {
  margin: .83em 0; font: 600 56px/1.2 var(--ks-font); letter-spacing: -.027em; text-transform: uppercase; color: #070707;
}
.ks-legal h2:first-child { margin-top: 0; }
.ks-legal ul, .ks-legal ol { margin: 1em 0; padding-left: 40px; list-style: disc; }
.ks-legal ol { list-style: decimal; }
.ks-legal hr { box-sizing: content-box; height: 0; margin: 0; overflow: visible; background-color: transparent; } /* как у темы: остальное — стандартное оформление браузера */
.ks-legal table { border-collapse: separate; border-spacing: 2px; }
.ks-legal td { padding: 1px; vertical-align: middle; }
@media (max-width: 1024px) { .ks-legal h2 { font-size: 38px; } }
@media (max-width: 767px) { .ks-legal h2 { font-size: 28px; } }

/* =========================================================================
   404 (/404-error/ — сюда сайт перенаправляет несуществующие адреса)
   ========================================================================= */
.e404 { --px: 0px; --pt: 100px; --pb: 180px; }
.e404__row { --gap: 50px; flex-direction: row; margin-top: 10px; }
.e404__card { flex: 1 1 auto; justify-content: space-between; background: #fff; border-radius: 30px; }
.e404__h { font: 700 63px/80px var(--ks-font); letter-spacing: -.027em; text-transform: uppercase; text-align: center; color: #000; }
.e404__txt { margin: 30px 0; font: 400 18px/26px var(--ks-font); text-align: center; color: #1A1A1A; }
.e404__btn-wrap { align-self: center; }
.e404__btn { padding: 20px 40px; border: 2px solid var(--ks-teal); border-radius: 20px; background: var(--ks-teal); font: 600 18px/25px var(--ks-font); color: #fff; }
.e404__btn svg { width: 25px; height: 25px; }
.e404__btn:hover { background: #1A1A1A; }
.e404__btn:hover svg { transform: rotate(45deg); }
@media (max-width: 1024px) {
  .e404 { --px: 20px; --pt: 90px; --pb: 130px; }
  .e404__row { flex-direction: column-reverse; }
  .e404__h { font-size: 40px; line-height: 40px; }
}
@media (max-width: 767px) {
  .e404 { --pt: 60px; --pb: 90px; }
  .e404__row { --gap: 20px; margin-top: 0; }
  .e404__h { font-size: 30px; line-height: 38px; }
  .e404__txt { margin: -10px 0 0; font-size: 14px; line-height: 20px; }
  .e404__btn { padding: 10px 20px; border-radius: 15px; font-size: 14px; line-height: 14px; }
}

/* =========================================================================
   Тёмные карточки с иконкой (Условия заказа, Образцы)
   ========================================================================= */
.ord-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ks-dcard {
  --gap: 0px; padding: 30px; background: #1A1A1A; border: 2px solid #fff; border-radius: 30px;
  transition: background .3s, border .3s, box-shadow .3s, transform .4s;
}
.ks-dcard:hover { background: var(--ks-teal); border-color: var(--ks-teal); }
.ks-dcard__icon { align-self: flex-start; padding: 20px; background: #fff; border-radius: 100px; line-height: 0; }
.ks-dcard__icon img { display: block; width: 40px; height: 40px; }
.ks-dcard__title { margin: 20px 0 10px; font: 600 24px/28px var(--ks-font); color: #fff; }
.ks-dcard__text { color: #fff; }
@media (max-width: 767px) {
  .ord-grid { grid-template-columns: 1fr; }
  .ks-dcard { padding: 25px; }
  .ks-dcard__icon { padding: 15px; }
  .ks-dcard__icon img { width: 30px; height: 30px; }
  .ks-dcard__title { font-size: 18px; line-height: 20px; }
}

/* =========================================================================
   Схема работы — те же строки этапов, что на главной, но на белом фоне
   ========================================================================= */
.howp { position: relative; padding: 60px 0 140px; background: #fff; }
.howp .ks-step { border-color: rgba(0, 0, 0, .31); }
.howp .ks-step__col--img img { border-radius: 100px; } /* на главной 25px, здесь «таблетки» */
@media (max-width: 1024px) { .howp .ks-step__col--img img { border-radius: 40px; } }
@media (max-width: 767px) { .howp .ks-step__col--img img { border-radius: 30px; } }
.howp .ks-step__title, .howp .ks-step__lead { color: #1A1A1A; transition: color .4s ease; }
.howp .ks-step:hover .ks-step__title, .howp .ks-step:hover .ks-step__lead { color: #fff; }
@media (max-width: 1024px) { .howp { padding: 60px 20px 100px; } }
@media (max-width: 767px) { .howp { padding: 30px 0 70px; } }

/* =========================================================================
   Образцы (/sample/) — карточка и «виды образцов» как на главной
   ========================================================================= */
.smp { --px: 0px; --pt: 60px; --pb: 120px; }
.smp-body { --gap: 30px; margin-top: 10px; }
.smp-card { background: #fff; border-radius: 30px; }
.smp-how { margin-top: 60px; }
.smp .ks-sample__btn { align-items: stretch; }
.smp .ks-sample__btn svg { align-self: center; width: 25px; height: 25px; } /* на главной 18px, здесь 25px; текст прижат к верху, как у кнопок Elementor */
.smp-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 1024px) {
  .smp { --px: 20px; --pb: 100px; }
  .smp-ways { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .smp { --pt: 30px; --pb: 70px; }
  .smp-body { margin-top: 0; }
  .smp-how { margin-top: 30px; line-height: 20px; }
  .smp-ways { grid-template-columns: 1fr; gap: 20px; }
}

/* =========================================================================
   О нас (/about/) — плашки, карточки и заголовки те же, что на главной
   ========================================================================= */
.ab-top { display: flex; flex-direction: column; gap: 20px; padding: 60px 0 0; background: #fff; }
.ab-card { background: #fff; border-radius: 30px; }
.ab-card__text { font: 400 18px/26px var(--ks-font); color: #1A1A1A; }
.ab-card__h { margin-top: 20px; font: 600 24px/28px var(--ks-font); color: #1A1A1A; }
.ab-card .ks-stats { grid-template-rows: repeat(2, 1fr); }
.ab-plain { --px: 0px; --pt: 0px; --pb: 0px; }
.ab-why { color: #333; }
.ab-why--center { text-align: center; }
.ab-adv { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; gap: 20px; }
.ks-title.ab-title { color: #333; }
.ab-path { --px: 0px; --pt: 0px; --pb: 0px; margin-top: 90px; }
.ab-path__text { font: 400 18px/26px var(--ks-font); color: #1A1A1A; }
.ab-team-sec { --px: 0px; --pt: 0px; --pb: 190px; margin-top: 90px; }
.ab-team { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 30px; }
.ab-member {
  display: flex; flex-direction: column; padding: 30px;
  background: rgba(26, 26, 26, .06); border: 2px solid #fff; border-radius: 30px;
  transition: background .3s, border .3s, box-shadow .3s, transform .4s;
}
.ab-member:hover { background: var(--ks-teal); border-color: var(--ks-teal); }
.ab-member__img { padding: 20px; background: #fff; border-radius: 20px; line-height: 0; }
.ab-member__img img { display: block; width: 100%; height: 330px; object-fit: cover; }
.ab-member__name { margin: 20px 0 10px; font: 600 24px/28px var(--ks-font); color: #333; }
.ab-member__text { font: 400 18px/26px var(--ks-font); color: #333; }
@media (max-width: 1024px) {
  .ab-top { padding: 60px 20px; }
  .ab-path { --px: 20px; }
  .ab-team-sec { --px: 20px; --pt: 30px; --pb: 0px; }
  .ab-team { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .ab-top { padding: 60px 20px 0; }
  .ab-intro { --px: 0px; --pt: 0px; --pb: 0px; }
  .ab-card { padding: 20px; }
  .ab-card__text { margin-top: -4px; font-size: 14px; line-height: 20px; }
  .ab-card__h { margin-top: 10px; font-size: 18px; line-height: 22px; }
  .ab-adv { grid-template-columns: 1fr; }
  .ab-path__text { margin-top: -4px; font-size: 14px; line-height: 20px; }
  .ab-team-sec { --pt: 0px; --pb: 120px; }
  .ab-team { grid-template-columns: 1fr; }
  .ab-member { padding: 20px; }
  .ab-member__img { padding: 15px; }
  .ab-member__img img { height: 300px; }
  .ab-member__name { font-size: 18px; line-height: 20px; }
  .ab-member__text { margin-top: -4px; font-size: 14px; line-height: 20px; }
}

/* =========================================================================
   Палитры пряжи (/custom/pryazha/)
   ========================================================================= */
.yarn-row { --gap: 50px; flex-direction: row; margin-top: 10px; }
.yarn-card { flex: 1 1 auto; justify-content: space-between; background: #fff; border-radius: 30px; }
.yarn-h { margin-top: 20px; font: 600 24px/28px var(--ks-font); color: #1A1A1A; }
.yarn-rt { font: 400 18px/26px var(--ks-font); color: #1A1A1A; }
.yarn-text { margin-top: -10px; color: #1A1A1A; }
.yarn-btn { padding: 20px 15px; border: 2px solid var(--ks-teal); border-radius: 20px; background: var(--ks-teal); font: 600 18px/25px var(--ks-font); color: #fff; }
.yarn-btn svg { width: 25px; height: 25px; }
.yarn-btn:hover { background: #1A1A1A; }
.yarn-btn:hover svg { transform: rotate(45deg); }
@media (max-width: 1024px) { .yarn-row { flex-direction: column-reverse; } }
@media (max-width: 767px) {
  .yarn-row { --gap: 20px; margin-top: 0; }
  .yarn-h { margin-top: 10px; font-size: 18px; line-height: 22px; }
  .yarn-rt { margin-top: -4px; font-size: 14px; line-height: 20px; }
  .yarn-btn { padding: 10px 0; border-radius: 15px; font-size: 14px; line-height: 14px; }
}

/* Стили плагина ks_yarn_viewer — без изменений (на сайте выводятся самим плагином) */
.ks-yarn-viewer { font-family: sans-serif; user-select: none; }
body.ks-no-scroll { overflow: hidden !important; }
.ks-yarn-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ks-yarn-tab {
padding: 9px 22px; border: 2px solid #e0e0e0; border-radius: 30px;
background: #fff; font-size: 14px; font-weight: 600; color: #555;
cursor: pointer; transition: all .2s;
}
.ks-yarn-tab:hover { border-color: #20B8AD; color: #20B8AD; }
.ks-yarn-tab.active { background: #20B8AD; border-color: #20B8AD; color: #fff; }
.ks-yarn-stage {
position: relative; width: 100%; height: 520px;
background: #f5f5f3; border-radius: 16px; overflow: hidden;
border: 1px solid #e8e8e8;
}
.ks-yarn-canvas-wrap { width: 100%; height: 100%; overflow: hidden; cursor: grab; }
.ks-yarn-canvas-wrap.dragging { cursor: grabbing; }
.ks-yarn-canvas { position: absolute; top: 0; left: 0; -webkit-user-drag: none; pointer-events: none; }
.ks-yarn-hint {
position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%);
background: rgba(0,0,0,.55); color: #fff; font-size: 12px;
padding: 6px 14px; border-radius: 20px; white-space: nowrap;
opacity: 0; transition: opacity .5s; pointer-events: none;
}
.ks-yarn-hint.visible { opacity: 1; }
.ks-yarn-hint.hidden { opacity: 0; }
.ks-yarn-controls { position: absolute; bottom: 14px; right: 14px; display: flex; gap: 6px; }
.ks-yarn-btn {
width: 34px; height: 34px; border-radius: 8px; border: none;
background: rgba(255,255,255,.9); color: #333; font-size: 18px;
cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15);
transition: background .15s; display: flex; align-items: center; justify-content: center;
}
.ks-yarn-btn:hover { background: #fff; }
.ks-yarn-loader {
position: absolute; inset: 0; display: flex; align-items: center;
justify-content: center; background: rgba(245,245,243,.95); transition: opacity .3s;
z-index: 5;
}
.ks-yarn-loader.hidden { opacity: 0; pointer-events: none; }
.ks-yarn-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ks-yarn-spinner {
width: 40px; height: 40px; border: 3px solid #e0e0e0;
border-top-color: #20B8AD; border-radius: 50%;
animation: ks-spin .7s linear infinite;
}
@keyframes ks-spin { to { transform: rotate(360deg); } }
.ks-yarn-progress-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ks-yarn-progress-bar { width: 180px; height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; }
.ks-yarn-progress-fill { height: 100%; width: 0%; background: #20B8AD; border-radius: 3px; transition: width .2s ease; }
.ks-yarn-progress-text { font-size: 12px; color: #888; font-weight: 500; }
@media (max-width: 600px) { .ks-yarn-stage { height: 340px; } }
.ks-yarn-viewer button { line-height: 1.15; } /* как у кнопок на сайте (normalize темы) */

/* =========================================================================
   Запись блога (шаблон записи; оформление текста — как у темы UiCore)
   ========================================================================= */
.post-sec { --px: 0px; --pt: 60px; --pb: 140px; --gap: 40px; }
.post-card { border-radius: 20px; }
.post-info { display: flex; flex-wrap: wrap; gap: 15px; }
.post-info li { display: flex; align-items: center; padding: 5px 15px; background: #333; border-radius: 12px; font: 500 16px/24px var(--ks-font); color: #fff; }
.post-img { line-height: 0; }
.post-img img { display: block; width: 100%; height: 500px; object-fit: cover; border-radius: 20px; }
.post-content { font: 400 16px/22px var(--ks-font); color: #333; }
.post-content p { margin: 0 0 1em; }
.post-content ul, .post-content ol { margin: 1em 0; padding-left: 40px; list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content a { color: var(--ks-teal); }
.post-content blockquote {
  margin: 20px auto; padding: 50px 70px; color: #070707;
  background: rgba(250, 250, 250, .9) url('../img/quote-mark.png') 30px 70% / 15% auto no-repeat;
}
.post-content blockquote p { margin-bottom: 0; font-size: 120%; line-height: 1.5; }
@media (max-width: 1024px) { .post-sec { --px: 20px; --pb: 100px; } }
@media (max-width: 767px) {
  .post-sec { --gap: 20px; --pt: 30px; --pb: 70px; }
  .post-info li { font-size: 14px; line-height: 14px; }
  .post-img img { height: 200px; }
}