/*Změna základní barvy pozadí stránky + cesta k backgroundu*/
body {
	color: #b2b2b2;
}

/*Změna pozadí po přejetí hlavního horního menu a všech záložkových menu*/
div#left h3,ul#zalozky li.act2 a,div.sortingView ul li.act2 a,ul#zalozky li a:hover,div.sortingView ul li a:hover
	{
	background-color: #666;
}

/*Změna barvy nadpisu, hover levého menu*/
div#finalOrderInfo h3,ul.leftMenu li a:hover,strong {
	color: #666 !important;
}

/*Změna spodního borderu pod horním menu(v každém vzhledu jedinečná barva)*/
div#underMenuLine {
	
}

/*Změna barvy 1*/
h1,p.price span.defaultPrice,span.ourPrice,div.zebrik span.step1active,div.zebrik span.step2active,div.zebrik span.step3active,span.tablePrice,span.sellPrice,div#zalozkyobsah h4,table.Summary tr td.value span
	{
	color: #b2b2b2;
}

/*Změna pozadí barva 1*/
table.halfTable tr th,table.fullTable tr th,table.tableCart tr th,ul.leftMenu li a.active,div.price
	{
	background: #666;
}

/*Změna borderu barva 1*/
div#discussionDescriptionTopBox,div.mainImage,table.halfTable,table.fullTable,table.tableCart tr td input.qtyCart,div#zalozkyobsah,div#mainGalleryImage,ul#langMenu li.active a,ul#zalozky,div.sortingView ul,div.productLineAdd input,div.sortingView,div.spl_calc
	{
	border-color: #666;
}

/*Změna barvy 2*/
h2,div#mainContent a,div.rightBoxIn a,div.info,span.discussionInfo,div.sortPaging a.active,div.sortPaging a:hover,div.bestSeller .bestSellerTitle a:hover
	{
	color: #666;
}

div.block h3 a:hover,div.blockLast h3 a:hover,div.blockactive h3 a,div.sortPaging a.active,div.sortPaging a:hover
	{
	color: #666 !important;
}
/*Změna borderu barva 2*/
div.sortPaging a.active,div.info {
	border-color: #666;
}

div.sortPaging a:hover,div.sortPaging a.active,div.block h3 a:hover,div.blockLast h3 a:hover,div.blockactive h3 a,div.blockactive .blockFooter,div.spl_calc
	{
	background: #666 !important;
}

/*Změna barvy 3 - hlavní nadpisy v pravém a levém menu*/
div#left h3,div#right h3,div#right h3 a,ul#mainMenu li a {
	color: #b2b2b2;
}

ul#loggedCurrentUser li a:hover,ul#loggedCurrentUser li a.active {
	background: #fff;
}

/*Změna barvy 4 - pozadí u položek eshopu*/
div.block h3 a:hover,div.blockLast h3 a:hover,div.blockactive h3 a,div.blockactive .blockFooter,div.sortPaging a.active,div.sortPaging a:hover
	{
	background: #fff;
}

ul#zalozky li.act2 a,ul.sortingView li.act2 a,ul.sortingFilters li.act2 a,ul#zalozky li a:hover,ul.sortingView li.popisactive,ul.sortingView li a:hover,ul.sortingFilters li a:hover
	{
	color: #fff !important;
	height: 25px;
	margin: 0px 0px 0px 0px;
	padding: 7px 10px 0px 10px;
	background: #666 !important;
}

/************************************************************************************************************/
/*Cesty k obrázkům - stačí změnit např s_oranzovy na s_modry atd*/

/*Hlavní obrázek na topu*/
div#topIn {
	background: url("../img/layout/bg-top.v5cfc2a7c.jpg") left bottom no-repeat #666;
}

/*Pozadí horního menu*/
div#underMenu {
	background: url("../img/layout/bg-menu.gif") left top no-repeat;
}

div#under {
	background: #fff;
}

/*Pozadí hlavního obrázku levého a pravého menu*/
div#right span.rightCatHeading,div#right h3 {
	background: #fff;
	color: #b2b2b2;
}

div#left span.rightCatHeading,div#left h3 {
	background: #fff;
	color: #b2b2b2;
	display: none;
}

/*Pozadí tlačítka na zobrazení detailu položky shopu */
div.actionShopButtons a.btnBuy {
	background: url("../img/layout/shop-buttuons-buy.gif") left top
		no-repeat #C7C7C7;
}

/*Pozadí tlačítka editace položky v pošíku*/
.edit a:hover {
	background: url("../img/layout/btn-small-edit-hov.gif") left top
		no-repeat #C7C7C7;
}

/*Pozadí tlačítka v pošíku - vymazat nebo objednat*/
div.cartFinishBtn a:hover {
	background: url("../img/layout/btn-hov.gif") left top no-repeat #C7C7C7;
}

ul#mainMenu {}

/*Položky menu*/
ul#mainMenu li a {
	color: #b2b2b2;
	padding-left: 30px !important;
	padding-right: 32px !important;
	font-size: 12px;
	text-transform: uppercase;
}

ul.leftMenu li {
	background: url("../img/side-menu/bg-link.gif") left top repeat #fff;
}

ul.leftMenu li a, ul.leftMenu li span  {
	display: block;
	text-transform: uppercase;
	padding: 3px 0px 3px 28px;
	text-decoration: none;
	color: #666;	
	font-size: 12px;
}

ul.leftMenu li  span  { color: #666;}

ul.leftMenu li a.active,ul.leftMenu li a:hover {
	color: black;
	text-decoration: underline !important;
}

ul.leftMenu li ul li a {
	font-size: 10px !important;
	padding: 2px 0px 2px 40px;
	min-height: 12px;
	color: #b2b2b2;	
	text-transform: none;
	background: url('../img/jd/dot-gray.gif') 30px 10px no-repeat;
}

ul.leftMenu li ul li a:hover{
	background: url('../img/jd/dot-black.gif') 30px 10px no-repeat;
}


ul.leftMenu li ul li a.active,ul.leftMenu li ul li a:hover {
	text-decoration: underline !important;
}

ul.leftMenu li ul li ul li a {
	padding: 3px 0px 3px 55px;
}

ul.leftMenu li ul li ul li a.active,ul.leftMenu li ul li ul li a:hover {
	
}

ul.leftMenu li ul li ul li  ul li a {
	padding: 3px 0px 3px 70px;
}

ul.leftMenu li ul li ul li  ul li a.active,ul.leftMenu li ul li ul li  ul li a:hover
{
	
}

ul.leftMenu li a:hover {
	color: black !important;
}

ul.leftMenu li a.active {
	color: #666 !important;
	text-decoration: none !important;
	background: #fff!important;
}

ul.leftMenu a.active:hover {
	color: #666 !important;
	text-decoration: underline !important;
}

/* nice buttons */

input.addToCartButton {
	background: url("../img/forms/add-to-cart.jpg") left top no-repeat;
}

/*tlačítko registrace*/
a#regMeIn {
	background: url("../img/layout/bg-registrace.gif") right bottom
		no-repeat #C7C7C7;
}

/*tlačítko hlasuj*/
div.Vote input {
	background: url("../img/layout/vote.gif") left top #C7C7C7;
}

div.slogan {
	color: #fff;
}

a.signMeIn {
	background: transparent !important;
	color: #666 !important;
}


ul.leftMenu li ul{
	margin-bottom: 15px;
}

.third{
	width: 246px;
	margin-bottom: 20px;
}

strong, h2, h3, h4{
	font-weight: normal !important;
}

.rightCatHeading{
	display: none !important;
}

div.regFline input.arrow, div.regFline  .odeslatButton {
	background: #D8D9DB !important;
}


.notFileLine input, 
.notFileLine textarea {
    	background: url('../img/jd/form-line.gif') left top repeat !important;
    	padding: 10px !important;
    	width: 300px !important;
}
/* --- 24.09 Страница контактов: кегль и мера набора.
   Правила здесь, т.к. default.css подключается ПОСЛЕ style.css. --- */
.contactIntro { max-width: 52em; }
.contactIntro p, .contactIntro p span, .contactIntro a { font-size: 14px !important; line-height: 1.65 !important; }
.contactIntro p { color: #4a4a4a !important; margin: 0 0 14px !important; }
.contactIntro a { color: #666 !important; border-bottom: 1px solid #cfc4b2; }
.contactIntro a:hover { color: #333 !important; border-bottom-color: #333; }
h2.pageTitle { font-size: 22px !important; color: #4a4a4a; margin: 0 0 18px; padding: 0 0 10px; border-bottom: 1px solid #ddd; font-weight: normal; }
@media (max-width: 700px) {
  .contactIntro { max-width: 100%; }
  .contactIntro p, .contactIntro p span, .contactIntro a { font-size: 16px !important; line-height: 1.7 !important; }
  h2.pageTitle { font-size: 20px !important; }
}

/* Фото реализованных интерьеров на странице контактов */
.contactPhotos { display: flex; gap: 12px; margin: 22px 0 0; max-width: 52em; }
.contactPhotos img { width: 50%; height: 190px; object-fit: cover; display: block; }
@media (max-width: 700px) {
  .contactPhotos { flex-direction: column; max-width: 100%; }
  .contactPhotos img { width: 100%; height: 170px; }
}

/* --- 24.09 Футер сайта.
   В оригинале #footer был пустой (содержимое закомментировано, внутри —
   ссылки на чужие сайты). Собран заново из реальных разделов сайта.
   Контраст ≥4.5:1, кегль 13/15px, тач-цели ≥44px (ui-ux-pro-max). --- */
/* Футер выравнен по сетке страницы: #playGround идёт 151..1129, а #main — 145..1135,
   поэтому без боковых 6px футер и его линейка свисали на 6px с каждой стороны.
   Колонки по 200px — это родной модуль макета (ширина #left), при gap 0 они встают
   на 151/351/551, то есть ровно на ту же вертикаль, где проходит граница
   бокового меню и контента. min-width без flex-grow давал 160px и 414px пустоты. */
/* Палитра серых сведена к шкале шаблона: #333 (акцент) / #4a4a4a (заголовки,
   родной цвет style.css) / #5a5a5a (текст ссылок) / #666 (мелкие подписи),
   линейки — #ddd. Было 8 оттенков, соседние различались на 1.06x и на глаз
   не отличались. Переменные намеренно НЕ вводим: в CSS сайта их нет ни одной. */
.siteFooter { margin: 46px 6px 0; padding: 26px 0 20px; border-top: 1px solid #ddd; clear: both; }
/* Колонки по 200px занимали 600px из 978 — справа зияло 39% ширины, и футер
   читался как прибитый к левому краю (нижняя строка при этом шла во всю ширину).
   Раздаём ширину поровну: три равные колонки на всю ширину футера. */
.siteFooterIn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 40px; }
.sfCol { width: auto; min-width: 0; }
/* ★ strong,h2,h3,h4{font-weight:normal!important} шаблона (стр. 247) перебивал
   bold без !important — заголовки колонок рендерились 400 и были ЛЕГЧЕ и МЕЛЬЧЕ
   собственных ссылок (12px/400 против 13px/400). Возвращаем вес тем же оружием. */
.sfCol h3 { margin: 0 0 15px; font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: .06em; text-transform: uppercase; color: #333 !important; }
.sfCol ul { list-style: none; margin: 0; padding: 0; }
.sfCol li { margin: 0; }
/* Было padding:14px → шаг 45px между ссылками при 10px под заголовком:
   самые большие пробелы приходились ВНУТРЬ группы, и четыре ссылки читались
   как четыре несвязанных пункта. 10px + line-height 1.6 = 44px цель и шаг 44px. */
.sfCol a { display: block; padding: 12px 0; font-size: 13px !important;
    color: #5a5a5a !important; line-height: 1.6 !important;
    transition: color .18s cubic-bezier(.22,1,.36,1); }
.sfCol a:hover { color: #222 !important; }
.sfCol a:focus-visible { outline: 2px solid #7a6a52; outline-offset: 2px; }
/* Вторая линейка шла в 22px от первой и делила блок без нужды — разделяем пробелом. */
.sfBottom { margin: 35px 0 0; padding: 0;
    font-size: 12px !important; color: #5a5a5a !important; }
/* На телефоне три колонки стопкой давали футер 784px — больше экрана ради 12 ссылок.
   Двумя колонками это ~400px, цель нажатия остаётся 44px+. */
/* На телефоне боковое меню (30 пунктов, 1122px) и футер шли подряд: 67% высоты
   страницы — навигация, 9 из 12 ссылок повторялись. Разделы услуг и дизайна
   на мобильной скрыты — они целиком есть в боковом меню выше. Остаётся
   колонка Studio: Proces, Reference, O nás, Kontakt. */
@media (max-width: 700px) {
  /* сетка из 3 дорожек оставляла видимой колонке треть ширины,
     хотя две скрыты — на телефоне одна дорожка во всю ширину */
  .siteFooterIn { display: block; }
  .sfCol--services, .sfCol--design { display: none; }
  .sfCol { width: auto; }
  .sfCol a { font-size: 15px !important; padding: 11px 0; }
  .sfBottom { font-size: 13px !important; margin-top: 30px; }
}
/* шаблон подчёркивает все ссылки — в футере это шум */
.siteFooter a { text-decoration: none !important; }
.siteFooter a:hover { text-decoration: underline !important; }

/* --- 24.09 Шапка: h1 дублировал логотип.
   В оригинале правило скрытия лежало в user_style.css.php (не сохранился
   в архиве — 503/нет снимка). Логотип рисует bg-top.jpg, а текстовый h1
   нужен поиску и скринридерам — прячем визуально, но НЕ display:none. --- */
#topShopInformation h1 {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* --- 24.09 ГЛАВНАЯ: перебалансировка колонок ---
   Было: #center 578px с фото, #right 200px — основной текст студии
   зажат в узкую колонку (~26 знаков в строке), под меню 311px пустоты,
   страница обрывается задолго до футера.
   Стало: контент во всю ширину (мера набора 65-75 знаков),
   правая колонка встраивается под фото. --- */
#main:has(.heroRestored) #center { width: 790px !important; }
#main:has(.heroRestored) #right {
    float: none !important; clear: left; width: auto !important;
    margin: 0; padding: 26px 0 0;
}
/* Мера набора — на абзацах, не на контейнере: секции реализаций и клиентов
   должны занимать всю ширину колонки (было 520 из 778, сетка шла по 2). */
#main:has(.heroRestored) #right .rightBoxIn { max-width: none; }
#main:has(.heroRestored) #right .rightBoxIn > p,
#main:has(.heroRestored) .aboutCol p { max-width: 38em; }
#main:has(.heroRestored) #right .rightBoxIn p {
    font-size: 14px !important; line-height: 1.7 !important; color: #4a4a4a !important;
}
#main:has(.heroRestored) .heroRestored img { height: 300px; }
/* заголовок раздела над текстом — иерархия h1→h2 (ui-ux-pro-max) */
#main:has(.heroRestored) #right .rightCatHeading { display: none; }
@media (max-width: 1000px) {
  #main:has(.heroRestored) #center { width: auto !important; }
  #main:has(.heroRestored) #right { margin-left: 0; }
  #main:has(.heroRestored) #right .rightBoxIn p { font-size: 16px !important; }
}

/* Разрыв между фото и текстом на главной был 80px — лишняя пустота */
#main:has(.heroRestored) #right { padding-top: 4px !important; }
#main:has(.heroRestored) .heroRestored { margin-bottom: 0 !important; }
#main:has(.heroRestored) #mainContent { min-height: 0 !important; }
/* подпись-заголовок перед ссылкой на контакты */
#main:has(.heroRestored) #right .contact {
    display: inline-block; padding: 12px 0; font-size: 14px !important;
}

/* Блок контактов на главной: телефон и почта удалены, остались пустые
   строки-иконки — убраны из разметки. Заголовок и ссылка оформлены. */
p.contactHeading {
    margin: 26px 0 10px !important; font-size: 13px !important; font-weight: bold;
    letter-spacing: .06em; text-transform: uppercase; color: #4a4a4a !important;
}
p.contactLink { margin: 0 !important; }
p.contactLink a.contact {
    transition: color .18s cubic-bezier(.22,1,.36,1);
    display: inline-block; padding: 12px 0; font-size: 14px !important;
    color: #5a5a5a !important; text-decoration: none !important;
    border-bottom: 1px solid #cfc4b2;
}
p.contactLink a.contact:hover { color: #222 !important; border-bottom-color: #222; }
p.contactLink a.contact:focus-visible { outline: 2px solid #7a6a52; outline-offset: 2px; }

/* Боковое меню: подпункты были 10px #b2b2b2 — контраст 2.12 при норме 4.5
   (ui-ux-pro-max: color-contrast CRITICAL, readable-font-size HIGH). */
#left a, #left li a, .leftMenu a, #leftMenu a {
    font-size: 12px !important; color: #5a5a5a !important;
}
#left a:hover, .leftMenu a:hover, #leftMenu a:hover { color: #222 !important; }
#left a:focus-visible { outline: 2px solid #7a6a52; outline-offset: 2px; }
#left h3, #left .catHeading { color: #4a4a4a !important; }
@media (max-width: 700px) {
  #left a, .leftMenu a, #leftMenu a { font-size: 15px !important; padding: 9px 0; display: block; }
}

/* Активный пункт верхнего меню был #b2b2b2 (контраст 2.12).
   Активное состояние отмечаем НЕ только цветом (ui-ux-pro-max:
   color-only — цвет не должен быть единственным индикатором). */
#menu a, #topMenu a, #underMenu a, div#menu li a { color: #5a5a5a !important; }
#menu a:hover, #topMenu a:hover, #underMenu a:hover { color: #222 !important; }
#menu li.active a, #menu a.active, #topMenu li.active a, #underMenu li.active a,
#menu li.selected a, #topMenu li.selected a {
    color: #222 !important; font-weight: bold;
    border-bottom: 2px solid #7a6a52; padding-bottom: 3px;
}

/* --- 24.09 Внутренние страницы: основной текст был 10px #b2b2b2
   (контраст 2.12 при норме 4.5) — нечитаемо.
   ui-ux-pro-max: color-contrast CRITICAL + readable-font-size HIGH. --- */
#mainContent p, .loopPage p, #mainContent li, .loopPage li,
#mainContent td, .loopPage td {
    font-size: 14px !important; line-height: 1.7 !important; color: #4a4a4a !important;
}
/* Мера набора 52em держит ТЕКСТ, но не блок целиком: на /fotogalerie она
   зажимала сетку в 520px из 778 — влезало 2 плитки вместо 4, справа пустота.
   Ограничиваем сами абзацы, а не контейнер. */
/* Мера набора на КОНТЕЙНЕРЕ (как было), но галерею исключаем: там сетка
   плиток, а не текст, и 52em зажимали её в 520px из 738. */
#mainContent .loopPage:not(:has(.galLoopBox)),
#mainContent .perex { max-width: 52em; }
#mainContent h2, .loopPage h2 {
    font-size: 20px !important; color: #4a4a4a !important; font-weight: normal;
    margin: 0 0 16px !important; padding: 0 0 10px; border-bottom: 1px solid #ddd;
}
/* хлебные крошки — служебная навигация, но читаемая */
#mainContent .breadcrumbs, .breadcrumbs, #path, .path {
    font-size: 12px !important; color: #666 !important;
}
.breadcrumbs a, #path a, .path a { color: #5a5a5a !important; }
@media (max-width: 700px) {
  #mainContent p, .loopPage p, #mainContent li, .loopPage li {
      font-size: 16px !important; line-height: 1.75 !important;
  }
  #mainContent .loopPage:not(:has(.galLoopBox)),
  #mainContent .perex { max-width: 100%; }
  #mainContent h2, .loopPage h2 { font-size: 19px !important; }
}

/* --- 24.09 Шапка на узких экранах: фон 988px обрезался по левому краю,
   логотип (он справа в картинке) уходил за экран. Показываем правую часть
   и уменьшаем высоту. Меню — в поток, а не справа. --- */
@media (max-width: 1000px) {
  #topIn {
      background-position: right bottom !important;
      background-size: auto 100% !important;
      height: 90px !important; min-height: 90px;
  }
  #top, #topIn { width: auto !important; }
  #menu, #topMenu, #underMenu { text-align: left !important; }
  #menu ul, #topMenu ul, #underMenu ul { padding-left: 0 !important; }
  #menu li, #topMenu li, #underMenu li { display: inline-block; margin: 0 14px 0 0; }
  #menu a, #topMenu a, #underMenu a { padding: 10px 0 !important; display: inline-block; }
}

/* Верхнее меню на узких экранах: #mainMenu был float:left шириной 174px
   внутри 354px — пункты прижимались вправо и шли столбиком. */
@media (max-width: 1000px) {
  #underMenu, #underMenuLine { width: auto !important; float: none !important; }
  #mainMenu {
      float: none !important; width: auto !important;
      display: flex; flex-wrap: wrap; gap: 2px 18px; padding: 0 !important; margin: 0;
  }
  #mainMenu li, #mainMenu li.mainPageMenu {
      float: none !important; width: auto !important; margin: 0; display: block;
  }
  #mainMenu li a {
      float: none !important; width: auto !important;
      display: block; padding: 11px 0 !important; font-size: 14px !important;
  }
}

/* menus.css задаёт ul#mainMenu{float:left} — специфичность выше нашей,
   поэтому повторяем с тем же весом (тег+id) и !important. */
@media (max-width: 1000px) {
  ul#mainMenu { float: none !important; width: auto !important; }
  ul#mainMenu li { float: none !important; }
  div#underMenuLine, div#underMenu { float: none !important; width: auto !important; }
}

/* #underMenuLine имеет padding-left:180px (отступ под логотип в макете 990px).
   На телефоне это сдвигает меню за край — обнуляем. */
@media (max-width: 1000px) {
  div#underMenuLine { padding-left: 0 !important; height: auto !important; }
  ul#mainMenu { display: flex !important; flex-wrap: wrap; gap: 0 18px; }
  ul#mainMenu li a { white-space: nowrap; }
}

/* Верхнее меню на телефоне перекрывало боковое: #underMenu имел
   фиксированную высоту 34px, а пункты переносились в 2-3 ряда. */
@media (max-width: 1000px) {
  div#underMenu {
      height: auto !important; min-height: 0 !important;
      overflow: visible !important; margin-bottom: 14px;
      border-bottom: 1px solid #e2e2e2; padding-bottom: 6px;
  }
  div#underMenuLine { position: static !important; }
  ul#mainMenu { position: static !important; }
  ul#mainMenu li a { padding: 9px 0 !important; }
  #left, div#left { clear: both !important; padding-top: 6px; }
}

/* --- 24.09 Мобильный порядок блоков.
   Боковое меню (28 пунктов, 1109px) шло ПЕРЕД контентом — посетитель
   листал полтора экрана до фото и текста. Flex-order ставит контент
   первым, меню уходит вниз как вспомогательная навигация. --- */
@media (max-width: 1000px) {
  div#content, #content {
      display: flex !important; flex-direction: column;
      width: auto !important; float: none !important;
  }
  div#center, #center  { order: 1; }
  div#right,  #right   { order: 2; }
  div#left,   #left    { order: 3; margin-top: 22px; padding-top: 16px;
                         border-top: 1px solid #e2e2e2; }
  /* текст шире: убираем поля-остатки десктопной сетки */
  #right .rightBoxIn { max-width: 100% !important; }
  .heroRestored { padding: 0 !important; }
}

/* Реальный контейнер колонок — #playGround (#left + #rightBlock),
   а не #content. Контент первым, меню вниз. */
@media (max-width: 1000px) {
  div#playGround, #playGround {
      display: flex !important; flex-direction: column;
      width: auto !important; float: none !important;
  }
  div#rightBlock, #rightBlock { order: 1; width: auto !important; float: none !important; }
  div#left, #left {
      order: 2; width: auto !important; float: none !important;
      margin: 26px 0 0 !important; padding-top: 18px;
      border-top: 1px solid #e2e2e2;
  }
  div#playGround > .clear { display: none !important; }
}

/* Вторая строка меню обрезалась: у #underMenu фиксированная высота
   из шаблона + overflow. Снимаем ограничение окончательно. */
@media (max-width: 1000px) {
  div#underMenu, div#underMenuLine {
      height: auto !important; max-height: none !important;
      overflow: visible !important; line-height: normal !important;
  }
  ul#mainMenu { padding-bottom: 4px !important; }
}

/* Меню в 2 строки: контейнеры держали 34-38px и пункты наезжали на контент.
   Высоту отдаём содержимому (тег+id — тот же вес, что у menus.css). */
@media (max-width: 1000px) {
  div#underMenu   { height: auto !important; min-height: 0 !important;
                    border-bottom-width: 1px !important; }
  div#underMenuLine { height: auto !important; min-height: 0 !important; }
  ul#mainMenu     { height: auto !important; min-height: 0 !important;
                    align-items: flex-start; }
  ul#mainMenu li  { height: auto !important; }
  ul#mainMenu li a{ height: auto !important; line-height: 1.35 !important; }
}

/* Блок контактов: после снятия реквизитов остались заголовок + слово «Kontakt».
   Даём строку с сутью предложения и внятную подпись у ссылки. */
p.contactIntro { margin: 0 0 12px !important; font-size: 14px !important;
                 line-height: 1.7 !important; color: #4a4a4a !important; max-width: 52em; }
@media (max-width: 1000px) { p.contactIntro { font-size: 16px !important; } }

/* --- 24.09 Семантика футера: div → footer + nav aria-label.
   Текущая страница помечена aria-current=page: цвет+вес, а не только цвет
   (не полагаемся на один канал — высокий контраст и дальтонизм). --- */
.siteFooter a[aria-current="page"] {
  color: #222 !important; font-weight: 700 !important;
  text-decoration: none !important;
}
/* Пропустить навигацию: первым в порядке табуляции, виден только при фокусе.
   До футера иначе 40 нажатий Tab. */
.skipLink {
  position: absolute; left: -9999px; top: 0;
  background: #fff; color: #222 !important; z-index: 100;
  padding: 12px 18px; border: 1px solid #7a6a52;
  font-size: 14px !important; text-decoration: none !important;
}
.skipLink:focus {
  left: 6px; top: 6px; width: auto; height: auto;
  outline: 2px solid #7a6a52; outline-offset: 2px;
}
/* Шаблон 2011 анимаций не имеет, но правило защищает будущие правки
   и подавляет плавную прокрутку у тех, кому она мешает. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* --- 24.09 Галерея /fotogalerie. Шаблон задал ячейке жёсткие 171x180px под
   единственное вертикальное фото (106x160); у остальных 30 снимков формат
   140x93, и под каждым висело ~87px пустоты. Отдаём высоту содержимому
   и выравниваем фото по центру ячейки. --- */
div.galLoopBox, div.galLoopBoxLast {
  width: auto !important; height: auto !important;
  min-width: 148px; min-height: 0 !important;
  display: flex; align-items: center; justify-content: center;
  padding: 8px !important; margin: 0 8px 8px 0 !important;
  background: #fff;
}
div.galLoopBox a, div.galLoopBoxLast a { display: block; line-height: 0; }
div.galLoopBox img, div.galLoopBoxLast img { display: block; height: auto; max-width: 100%; }
/* Ряды галереи: float оставляет рваные строки при разной высоте — flex-обёртка
   выравнивает плитки по базовой линии ряда. */
#mainContent .loopPage { display: flow-root; }
/* Шаблон вставляет служебные ячейки-распорки (только div.clear, без фото) —
   с рамкой они читались как «битое фото». Прячем те, что без картинки. */
div.galLoopBox:not(:has(img)), div.galLoopBoxLast:not(:has(img)) { display: none !important; }
/* Единственное вертикальное фото (106x160) выше остальных и рвало ряд —
   ограничиваем высоту плитки, пропорции сохраняются. */
div.galLoopBox img, div.galLoopBoxLast img { max-height: 93px; width: auto; }
@media (max-width: 700px) {
  /* шаблон считает ширину как content-box: padding 16 + border 2 прибавлялись
     к calc(50%), и две плитки не влезали в строку — переводим на border-box */
  div.galLoopBox, div.galLoopBoxLast {
    box-sizing: border-box !important;
    min-width: 0; width: calc(50% - 4px) !important;
    margin: 0 4px 8px 0 !important;
  }
  div.galLoopBox img, div.galLoopBoxLast img { max-height: none; max-width: 100%; }
}

/* --- 24.09 Главная: добавлены реальные материалы сайта — реализации,
   клиенты, блоки «Co děláme / Pro koho». Тексты и фото взяты со страниц
   Reference / Klienti / O nás, ничего не дописано. --- */
.homeLead { font-size: 15px !important; color: #333 !important; }
.homeRefs, .homeClients, .homeAbout { margin: 40px 0 0; }
.homeRefs h2, .homeClients h2, .homeAbout h2 {
  font-size: 20px !important; font-weight: normal; color: #4a4a4a !important;
  margin: 0 0 18px !important; padding: 0 0 10px; border-bottom: 1px solid #ddd;
}
/* Реализации: фото ведёт, подпись под ним. Не карточки с рамками —
   сетка снимков, как на странице Reference. */
.refGrid { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px 18px; }
.refCard a { display: block; text-decoration: none !important; color: inherit; }
.refCard img { display: block; width: 100%; height: auto; }
.refWho { display: block; margin: 8px 0 2px; font-size: 13px !important;
  color: #333 !important; line-height: 1.35 !important; }
.refWhat { display: block; font-size: 12px !important; color: #666 !important;
  line-height: 1.4 !important; }
.refCard a:hover .refWho { color: #7a6a52 !important; }
.refCard a:focus-visible { outline: 2px solid #7a6a52; outline-offset: 3px; }
.refMore { margin: 18px 0 0 !important; font-size: 13px !important; }
.refMore a { color: #5a5a5a !important; border-bottom: 1px solid #cfc4b2;
  text-decoration: none !important; }
.refMore a:hover { color: #222 !important; border-bottom-color: #222; }
/* Клиенты: имена в строку через разделитель — перечень, а не плитки логотипов
   (логотипов в архиве нет, рисовать их было бы выдумкой). */
.clientList { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 10px; max-width: 52em; }
.clientList li { font-size: 13px !important; color: #4a4a4a !important;
  line-height: 1.9 !important; }
.clientList li + li::before { content: 00B7; margin-right: 10px; color: #b2b2b2; }
/* Два блока «о нас» рядом */
.aboutCols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; }
.aboutCol h3 { margin: 0 0 8px !important; font-size: 13px !important;
  font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase;
  color: #333 !important; }
.aboutCol p { margin: 0 0 10px !important; }
.aboutLink { font-size: 13px !important; }
.aboutLink a { color: #5a5a5a !important; border-bottom: 1px solid #cfc4b2;
  text-decoration: none !important; }
.aboutLink a:hover { color: #222 !important; border-bottom-color: #222; }
@media (max-width: 700px) {
  .homeRefs, .homeClients, .homeAbout { margin-top: 32px; }
  .refGrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px 12px; }
  .aboutCols { grid-template-columns: 1fr; gap: 24px; }
  .clientList li { font-size: 15px !important; }
}

/* --- 24.09 Переключатель языка. В шаблоне он был, но menus.css прятал все
   четыре пункта (display:none) — серверный скрипт показывал нужную пару,
   на статике не показывалось ничего. Перестроен в две текстовые ссылки:
   флаг как единственный указатель языка — плохая практика (язык ≠ страна),
   плюс gif-флажки 16px не читаются. --- */
/* Логотип JAROŠ DESIGN нарисован в фоне #topIn справа — переключатель в правом
   верхнем углу наезжал на него. Сажаем под шапку, в одну строку с меню. */
ul#langMenu { position: absolute; top: 100%; right: 0; z-index: 20;
  list-style: none; margin: 0; padding: 0;
  display: flex !important; gap: 0 18px; width: auto !important; height: auto !important; }
ul#langMenu li { display: block !important; float: none !important;
  width: auto !important; height: auto !important; margin: 0; padding: 0;
  background: none !important; }
ul#langMenu li a, ul#langMenu li span {
  display: block; padding: 8px 2px; font-size: 12px !important;
  line-height: 1.2 !important; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none !important; background: none !important;
  text-indent: 0 !important; overflow: visible !important;
}
ul#langMenu li a { color: #666 !important; border-bottom: 1px solid transparent; }
ul#langMenu li a:hover { color: #222 !important; border-bottom-color: #7a6a52; }
ul#langMenu li a:focus-visible { outline: 2px solid #7a6a52; outline-offset: 2px; }
/* текущий язык — не ссылка, помечен весом и цветом */
ul#langMenu li.langCur span { color: #333 !important; font-weight: 700 !important;
  border-bottom: 1px solid #7a6a52; cursor: default; }
/* шапка должна быть системой отсчёта для абсолютного позиционирования */
div#topShopInformation { position: relative; }
@media (max-width: 1000px) {
  ul#langMenu { position: static; justify-content: flex-end; padding: 0 0 4px; }
}

/* --- 24.09 Страница Reference. Фото в каждом проекте — плавающие (float:left),
   а их <p> не обхватывал float и имел высоту 0: снимки наезжали на следующие
   проекты, заголовки выстраивались столбиком справа. Лечится обхватом float
   (display:flow-root на РОДИТЕЛЕ — clear на соседе не помогает). --- */
#reference p { display: flow-root; margin: 0 0 22px !important; }
#reference h3 { margin: 26px 0 10px !important; font-size: 14px !important;
  color: #333 !important; line-height: 1.45 !important; font-weight: 700 !important; }
#reference h3:first-child { margin-top: 0 !important; }
#reference p img { margin: 0 12px 12px 0 !important; height: auto; }
#reference .clr { clear: both; height: 0; }
/* мера набора не должна зажимать галерею проектов */
#mainContent .perex:has(#reference) { max-width: none; }
@media (max-width: 700px) {
  #reference p img { width: calc(50% - 8px) !important; margin: 0 8px 8px 0 !important; }
}

/* EN-шапка рендерит меню компактнее — фиксируем зазор и кегль переключателя */
ul#langMenu li a, ul#langMenu li span { white-space: nowrap; padding: 8px 4px; }

/* --- 24.09 Плавающие фото в тексте (11 страниц: pro-koho, co-delame, atypy,
   kuchynky, satny…). Шаблон 2011 ставил фото 350-408px с обтеканием в колонку
   520px — тексту оставалась полоска 112-170px, то есть 14-22 знака в строке
   при норме 45-75. Читалось «лесенкой» по 2-3 слова.
   Решение: на узкой колонке обтекание снимаем — фото становится блоком
   над текстом. Обтекание возвращается только там, где рядом остаётся
   не меньше ~34em текста. --- */
#mainContent .floatRight, #mainContent .floatLeft {
  float: none !important; width: auto !important;
  margin: 0 0 18px !important; text-align: left;
}
#mainContent .floatRight img, #mainContent .floatLeft img {
  display: block; max-width: 100%; height: auto;
}
/* Колонка достаточно широка (главная/страницы без бокового блока) —
   обтекание осмысленно и возвращается. */
@media (min-width: 1001px) {
  #mainContent:has(.perex) .perex { --colw: 1; }
}
@supports (width: 1cqi) {
  #mainContent .perex { container-type: inline-size; }
  @container (min-width: 700px) {
    #mainContent .floatRight { float: right !important; margin: 0 0 14px 22px !important; max-width: 46%; }
    #mainContent .floatLeft  { float: left  !important; margin: 0 22px 14px 0 !important; max-width: 46%; }
  }
}

/* --- 24.09 Верхнее меню: шаблон задал ссылкам height:24px — цель нажатия
   вдвое ниже нормы 44px (WCAG 2.5.8 / ui-ux-pro-max touch-target-size).
   Добавляем вертикальные поля: высота строки меню не меняется визуально,
   растёт только область попадания. --- */
ul#mainMenu li a {
  height: auto !important; min-height: 24px;
  /* боковые поля дают И зазор между пунктами, И площадь нажатия;
     без них пункты слипались в «NA ÚVODPROCESREFERENCE…» */
  padding: 11px 16px !important; line-height: 22px !important;
  box-sizing: content-box;
}
ul#mainMenu li:first-child a { padding-left: 0 !important; }
div#underMenu, div#underMenuLine { height: auto !important; }
@media (max-width: 1000px) {
  ul#mainMenu li a { padding: 12px 10px !important; }
}

/* --- 24.09 /proces: 14 этапов работы размечены <strong>, но правило шаблона
   strong,h2,h3,h4{font-weight:normal!important} (стр. 247) сбивало вес в 400,
   и цвет был СВЕТЛЕЕ описания (#666 против #4a4a4a). Названия этапов ничем
   не отличались от текста — страница читалась сплошным потоком.
   Возвращаем вес тем же оружием и отбиваем этапы по вертикали. --- */
#mainContent p > strong:only-child,
.loopPage p > strong:only-child {
  display: block;
  font-weight: 700 !important; color: #333 !important;
  font-size: 15px !important; line-height: 1.4 !important;
}
/* абзац-заголовок этапа: воздух сверху, плотно к своему описанию */
#mainContent p:has(> strong:only-child) {
  margin: 26px 0 6px !important;
}
#mainContent p:has(> strong:only-child):first-child { margin-top: 0 !important; }
/* Фото 429x72 растягивалось до 737px (в 1.72 раза) — мыло.
   Держим в натуральную величину. */
#mainContent .perex > p:first-child img,
#mainContent img[src*=dp-bubenska] {
  max-width: 429px; width: auto !important; height: auto !important;
}
@media (max-width: 700px) {
  #mainContent p > strong:only-child { font-size: 16px !important; }
  #mainContent p:has(> strong:only-child) { margin-top: 22px !important; }
  #mainContent img[src*=dp-bubenska] { max-width: 100%; }
}