/* ============================================================
   RTL — арабская версия
   Подключается только когда WordPress отдаёт dir="rtl".
   Сетка, отступы и рамки зеркалятся сами: в theme.css они
   записаны логическими свойствами. Здесь остаётся только то,
   что логическими свойствами не описывается — абсолютное
   позиционирование, трансформации, градиенты и маски.
   ============================================================ */

/* --- стрелки: разворачиваем сам знак, а не только сдвиг --- */
.ci-arr,
.ci-ar i{transform:scaleX(-1)}
.ci-btn:hover .ci-arr{transform:scaleX(-1) translateX(4px)}
.ci-catcard:hover .ci-ar,
.ci-post:hover .ci-ar{transform:scaleX(-1) translateX(6px)}
.ci-blocks .ci-list-item:hover .ci-more .ci-arr{transform:scaleX(-1) translateX(4px)}

/* --- подчёркивания растут от правого края --- */
.ci-nav a::after,
.ci-lang-btn::after,
.ci-tabs-nav button::after{transform-origin:right}

/* --- первый экран: в RTL первая колонка справа, поэтому текст
       уезжает вправо, а фото влево; правим то, что привязано
       к физическим сторонам --- */
.ci-hero-text{padding:120px 0 70px 80px}
.ci-hero-photo{
  background:
    linear-gradient(225deg, rgba(20,15,9,.45), rgba(14,10,6,.12) 42%, transparent 70%),
    image-set(url("../img/hero.webp") type("image/webp"), url("../img/hero.jpg") type("image/jpeg")) center/cover no-repeat;
}
.ci-hero-photo::after{background:linear-gradient(270deg,var(--bg) 0%,transparent 22%)}

/* --- блок культуры: кадр уходит к другому краю --- */
.ci-culture .ci-culture-img{
  right:auto;left:0;
  -webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 65%);
          mask-image:linear-gradient(270deg,transparent 0%,#000 65%);
}

/* --- шорткаты с четырьмя значениями логическими не сделать --- */
.ci-entry-body ul,.ci-entry-body ol{margin:0 22px 20px 0}
.ci-entry-body blockquote{padding:4px 26px 4px 0}
.ci-faq summary,
.ci-blocks .ci-faq summary{padding:22px 0 22px 40px}

/* --- карточка товара: бейдж и кнопки меняются краями --- */
.ci-badge{left:auto;right:14px}
.ci-card-acts{right:auto;left:12px;transform:translateX(-8px)}
.ci-card:hover .ci-card-acts,
.ci-card:focus-within .ci-card-acts{transform:none}

/* --- «плюс» в аккордеонах и стрелка селекта — к левому краю --- */
.ci-faq summary::after,
.ci-blocks .ci-faq summary::after{right:auto;left:6px}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{right:auto;left:14px}

/* --- служебные кнопки --- */
.ci-modal-x{right:auto;left:14px}
.ci-skip-link:focus{left:auto;right:12px}
.ci-variant-switch{right:auto;left:18px}

/* --- плавающие кнопки зеркалим целиком --- */
.ci-float-wa{left:auto;right:24px}
.ci-float-top{right:auto;left:24px}
.ci-float-ring{transform:rotate(-90deg) scaleX(-1)}

/* --- шторка фильтров выезжает справа --- */
@media(max-width:1024px){
  .ci-filters{left:auto;right:0;transform:translateX(102%)}
  .ci-filters.is-open{transform:none}
}
@media (min-width:901px) and (max-width:1024px){
  .ci-layout .ci-filters{right:auto;left:auto;transform:none}
}

@media(max-width:1024px){
  .ci-hero-text{padding:46px 24px 60px;margin:0}
  .ci-hero-photo::after{background:linear-gradient(0deg,var(--bg) 0%,transparent 32%)}
  .ci-culture .ci-culture-img{-webkit-mask-image:none;mask-image:none}
}

@media(max-width:600px){
  .ci-float-wa{left:auto;right:14px}
  .ci-float-top{right:auto;left:14px}
  .ci-badge{left:auto;right:10px}
  .ci-card-acts{right:auto;left:8px}
  .ci-variant-switch{right:auto;left:12px}
}