/* ==========================================================================
   Царь-Кедр — возвращаем внешний вид старого шаблона (vina_orion)
   на Joomla 5 / Cassiopeia.
   Файл: /media/templates/site/cassiopeia/css/user.css
   (подключается после template.css, поэтому всё ниже перекрывает Cassiopeia)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=cyrillic,latin");

/* ---------- переменные ---------- */
body.site {
  --tk-red: #e74e51;          /* ссылки, иконки */
  --tk-red-active: #e45050;   /* активный пункт меню, кнопка «вверх» */
  --tk-red-hover: #c93a3d;
  --tk-text: #333;
  --tk-line: #ededed;
  --tk-bg: #f9f9f9;
  --tk-menu-bg: #f5f5f5;
  --tk-wrap: 94%;             /* ширина контейнера как в старом шаблоне */
}

/* ---------- база ---------- */
body.site {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tk-text);
  background: var(--tk-bg);
}
body.site a { color: var(--tk-red); text-decoration: none; }
body.site a:hover,
body.site a:focus { color: var(--tk-red-hover); text-decoration: none; }
body.site h1, body.site h2, body.site h3 {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  color: var(--tk-text);
}

/* ==========================================================================
   ШАПКА: логотип слева, баннер с телефоном справа, серая полоса меню
   ========================================================================== */
body.site .container-header {
  position: relative;
  display: block;
  padding: 0;
  background: #fff;
  background-image: none;
  box-shadow: none;
}
body.site .container-header .grid-child {
  display: block;
  max-width: none;
  padding: 0;
}

/* логотип */
body.site .container-header > .grid-child:first-child {
  width: var(--tk-wrap);
  margin: 0 auto;
  height: 257px;
  padding-top: 4px;
}
body.site .container-header .navbar-brand {
  display: block;
  margin: 0;
  padding: 0;
}
body.site .container-header .navbar-brand img {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
}

/* серая полоса с меню */
body.site .container-header .container-nav {
  display: block;
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0;
  background: var(--tk-menu-bg);
}
body.site .container-header .mod-menu {
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  width: var(--tk-wrap);
  height: 60px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
body.site .container-header .mod-menu > li {
  flex: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
body.site .container-header .mod-menu > li > a,
body.site .container-header .mod-menu > li > span {
  display: block;
  height: 60px;
  padding: 0 15px;
  font-size: 15px;
  font-weight: 700;
  line-height: 60px;
  text-transform: uppercase;
  color: #434343;
  background: transparent;
  border: 0;
}
body.site .container-header .mod-menu > li > a:hover,
body.site .container-header .mod-menu > li > a:focus {
  color: var(--tk-red-active);
}
body.site .container-header .mod-menu > li.active > a,
body.site .container-header .mod-menu > li.current > a {
  color: #fff;
  background: var(--tk-red-active);
}
body.site .container-header .mod-menu > li:after,
body.site .container-header .mod-menu > li.active:after,
body.site .container-header .mod-menu > li:hover:after {
  display: none;
}

/* баннер (top-bg.png) и телефон — поверх правой части шапки */
body.site .container-header .container-search {
  position: absolute;
  top: 0;
  right: 0;
  width: 1100px;
  max-width: 100%;
  height: 250px;
  margin: 0;
  padding: 0;
}
body.site .container-header .container-search p { margin: 0; }
/* картинка с лесом: images/top-bg-последний.jpg (имя в url закодировано).
   Старый <img class="slogan-head"> прячем, баннер рисуем фоном. */
body.site .container-header .container-search::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/top-bg-%D0%BF%D0%BE%D1%81%D0%BB%D0%B5%D0%B4%D0%BD%D0%B8%D0%B9.jpg") right top / 1100px 250px no-repeat;
  /* мягкий переход в белый слева (у jpg нет прозрачности, как была у старого png) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 120px);
          mask-image: linear-gradient(to right, transparent 0, #000 120px);
}
body.site .container-header .container-search .slogan-head { display: none !important; }
/* блок с телефоном — последний модуль в .container-search */
body.site .container-header .container-search .mod-custom:last-child {
  position: absolute;
  top: 203px;
  right: 3vw;
  margin: 0;
}
body.site .container-header .container-search .mod-custom:last-child > div {
  padding: 0 !important;
  text-align: right;
}
body.site .container-header .container-search .mod-custom:last-child span {
  font-size: 24px !important;
  font-weight: 700;
  line-height: 1.25;
}
body.site .container-header .container-search .mod-custom:last-child a {
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, .35);
}

/* ==========================================================================
   ТЕЛО: слева белая панель каталога, справа белая рамка с контентом
   ========================================================================== */
body.site .site-grid {
  display: grid;
  grid-gap: 0;
  grid-template-columns: [full-start] 3% [main-start] 24% minmax(0, 1fr) [main-end] 3% [full-end];
  grid-template-areas:
    ". banner banner ."
    ". top-a  top-a  ."
    ". top-b  top-b  ."
    ". side-l comp   ."
    ". bot-a  bot-a  ."
    ". bot-b  bot-b  .";
  margin-bottom: 0;
  background: var(--tk-bg);
}
body.site .site-grid > .container-sidebar-left { align-self: start; }

/* левый сайдбар */
body.site .container-sidebar-left > * { margin: 0; }
body.site .sidebar-left,
body.site .sidebar-left.card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--tk-line);
  border-bottom-width: 2px;
  border-radius: 0;
  box-shadow: none;
}
body.site .sidebar-left .card-header {
  display: none;               /* в старом сайдбаре заголовка не было */
}
body.site .sidebar-left .card-body { padding: 0; }
body.site .sidebar-left ul,
body.site .sidebar-left ul.mod-menu {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.site .sidebar-left li,
body.site .sidebar-left .nav-item {
  display: block;
  margin: 0;
  padding: 0;
  text-align: left;
  border-bottom: 1px solid var(--tk-line);
}
body.site .sidebar-left li:last-child { border-bottom: 0; }
body.site .sidebar-left li > a,
body.site .sidebar-left li > span {
  display: block;
  padding: 0 20px 0 45px;
  font-size: 15px;
  font-weight: 700;
  line-height: 51px;
  text-transform: uppercase;
  color: #666;
}
body.site .sidebar-left li > a:hover,
body.site .sidebar-left li.active > a,
body.site .sidebar-left li.current > a { color: var(--tk-red); }

/* вложенные пункты (ПРОЕКТЫ ДОМОВ / ПРОЕКТЫ БАНЬ) */
body.site .sidebar-left li > ul {
  margin: 0 0 0 10px;
  padding: 0;
  background: #fcfcfc;
  border-top: 2px solid var(--tk-line);
}
body.site .sidebar-left li > ul > li:last-child { border-bottom: 0; }
body.site .sidebar-left li > ul > li > a,
body.site .sidebar-left li > ul > li > span {
  position: relative;
  padding-left: 45px;
}
body.site .sidebar-left li > ul > li > a::before,
body.site .sidebar-left li > ul > li > span::before {
  content: "\f105";
  position: absolute;
  left: 22px;
  font-family: "Font Awesome 6 Free", "FontAwesome";
  font-weight: 900;
  font-size: 11px;
  color: #666;
}
/* у родителя после вложенного списка рамка снизу */
body.site .sidebar-left li.parent { border-bottom: 2px solid var(--tk-line); }
body.site .sidebar-left > .card-body > ul > li.parent:last-child { border-bottom: 0; }

/* контентная часть */
body.site .container-component {
  min-width: 0;
  padding: 0 15px 20px;
  background: #fff;
  border-left: 1px solid #efefef;
  border-right: 1px solid #efefef;
}
body.site .container-component > * { margin-top: 0; }
body.site .container-component main { display: block; }

/* заголовок «ООО «Царь-Кедр»» */
body.site .shophead {
  margin: 0;
  padding: 34px 0 14px;
  border-bottom: 1px solid var(--tk-line);
}
body.site .shophead h1 {
  margin: 0;
  font-size: 22.4px;
  font-weight: 700;
  line-height: 29px;
  text-transform: uppercase;
  color: var(--tk-text);
}

/* плитка категорий JoomShopping: 2 колонки, картинка по центру, ссылка под ней */
body.site .jshop { margin: 0; }
body.site .jshop_list_category {
  width: 97.5%;
  margin: 18px 0 0;
}
body.site .jshop_list_category .row-fluid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
body.site .jshop_list_category .jshop_categ,
body.site .jshop_list_category .sblock2 {
  float: none;
  width: auto;
  margin: 0 0 16px;
  padding: 0;
  text-align: center;
}
body.site .jshop_list_category .image { margin: 0; text-align: center; }
body.site .jshop_list_category .image a { display: block; }
body.site .jshop_list_category .image img,
body.site .jshop_list_category img.jshop_img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 0;
}
body.site .jshop_list_category .category_info,
body.site .jshop_list_category .name-category { margin: 6px 0 0; text-align: center; }
body.site .jshop_list_category .category_name { margin: 0; }
body.site .jshop_list_category .category_name a,
body.site .jshop_list_category a.product_link,
body.site .jshop_list_category a.product_link_im4 {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: var(--tk-red);
}
body.site .jshop_list_category .category_short_description { margin: 0; }
body.site #mxcpr { display: none; }   /* подпись JoomShopping в старом дизайне не показывалась */

/* блок «Лучшее — для Вас» (модуль в позиции main-bottom) */
body.site .tk-best {
  display: flex;
  align-items: flex-start;
  margin: 105px 5% 90px calc(5% + 54px);
}
body.site .tk-best__icon { flex: none; width: 150px; padding-left: 0; }
body.site .tk-best__icon img { display: block; margin: 12px 0 0 0; }
body.site .tk-best__title { margin: 0 0 8px; font-size: 24px; font-weight: 400; line-height: 1.3; }
body.site .tk-best__text { margin: 0; font-size: 18.4px; line-height: 1.5; }

/* ==========================================================================
   ПОДВАЛ (один модуль «Свой HTML» в позиции footer)
   ========================================================================== */
body.site .container-footer,
body.site .footer {
  margin: 0 0 55px;
  padding: 0;
  color: var(--tk-text);
  background: #fff;
  background-image: none;
  box-shadow: none;
}
body.site .footer .grid-child {
  display: block;
  max-width: none;
  width: var(--tk-wrap);
  margin: 0 auto;
  padding: 0;
}
body.site .footer a { color: var(--tk-red); }
body.site .footer a:hover { color: var(--tk-red-hover); }
body.site .footer .mod-footer,
body.site .footer .mod-custom { margin: 0; }

body.site .tk-footer__cols {
  display: grid;
  grid-template-columns: 42.7% minmax(0, 1fr);
  padding: 34px 0 40px;
}
body.site .tk-footer h3 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--tk-text);
}
body.site .tk-footer__contacts p {
  position: relative;
  margin: 0 0 6px;
  padding-left: 25px;
  line-height: 22px;
}
body.site .tk-footer__contacts p::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Font Awesome 6 Free", "FontAwesome";
  font-weight: 900;
  font-size: 20px;
  line-height: 22px;
  color: var(--tk-red);
}
body.site .tk-footer__contacts .phone::before { content: "\f3cd"; }
body.site .tk-footer__contacts .address::before { content: "\f3c5"; }
body.site .tk-footer__contacts .mail::before { content: "\f0e0"; font-size: 17px; }
body.site .tk-footer__contacts .mail a { color: #555; }
body.site .tk-footer__links { margin: 0; padding: 0; list-style: none; }
body.site .tk-footer__links li {
  position: relative;
  margin: 0;
  padding: 0 0 0 25px;
  line-height: 24px;
}
body.site .tk-footer__links li::before {
  content: "\f101";
  position: absolute;
  left: 0;
  font-family: "Font Awesome 6 Free", "FontAwesome";
  font-weight: 900;
  font-size: 14px;
  color: var(--tk-red);
}
body.site .tk-footer__links a { color: #777; }
body.site .tk-footer__links a:hover { color: var(--tk-red); }
body.site .tk-footer__copy {
  padding: 24px 0 26px;
  border-top: 1px solid var(--tk-line);
  font-size: 13.6px;
  color: var(--tk-text);
}

/* ==========================================================================
   КНОПКИ: «вверх» и «Бесплатный звонок»
   ========================================================================== */
body.site .back-to-top-link {
  right: 12px;
  bottom: 35px;
  width: 65px;
  height: 65px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tk-red-active);
  color: #fff;
  box-shadow: none;
}
body.site .back-to-top-link:hover { background: var(--tk-red-hover); }

body.site .tk-call {
  position: fixed;
  right: 168px;
  bottom: 106px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: rgba(148, 216, 51, .12);
  box-shadow: 0 0 0 1px rgba(148, 216, 51, .25);
}
body.site .tk-call a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  padding: 8px;
  border-radius: 50%;
  background: #94d833;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
}
body.site .tk-call a:hover { background: #82c224; color: #fff; }

/* ==========================================================================
   Адаптив (грубо, как в старом шаблоне: баннер на планшетах прячем)
   ========================================================================== */
@media (max-width: 991px) {
  body.site .container-header > .grid-child:first-child { height: auto; padding: 10px 0; }
  body.site .container-header .container-search { position: static; width: auto; height: auto; }
  body.site .container-header .container-search::before { display: none; }
  body.site .container-header .container-search .mod-custom:last-child {
    position: static;
    padding: 6px 3%;
    background: var(--tk-red-active);
  }
  body.site .container-header .container-nav { height: auto; }
  body.site .container-header .mod-menu { flex-wrap: wrap; height: auto; }
  body.site .site-grid {
    grid-template-columns: [full-start] 3% [main-start] minmax(0, 1fr) [main-end] 3% [full-end];
    grid-template-areas:
      ". banner ."
      ". top-a  ."
      ". top-b  ."
      ". comp   ."
      ". side-l ."
      ". bot-a  ."
      ". bot-b  .";
  }
  body.site .jshop_list_category { width: 100%; }
  body.site .jshop_list_category .row-fluid { grid-template-columns: 1fr; }
  body.site .tk-footer__cols { grid-template-columns: 1fr; gap: 20px; }
  body.site .tk-call { right: 20px; bottom: 80px; }
}