/*
Theme Name: Bridge Child (brautundkleid)
Theme URI: https://brautundkleid.ch
Description: Дочерняя тема для brautundkleid.ch. Здесь живут все правки, которые не должны пропасть при обновлении Bridge. Родительскую тему не трогаем никогда.
Author: brautundkleid.ch
Template: bridge
Version: 1.0.0
*/

/* Свои стили дописывать сюда. Файл подключается ПОСЛЕ всех стилей родителя,
   поэтому правила отсюда перебивают тему без !important. */

/* ==========================================================================
   Карточка платья (23.09.2026). Код — inc/product-page.php.

   Оформление по образцу noni-mode.de: шрифт Lato, мягкий тёмно-серый вместо
   чёрного («чёрный выглядит слишком грубо» — владелица, 21.09), цена тем же
   цветом, что остальной текст, без розового.

   Эти правила заменяют то, что лежало в Qode Options → Custom CSS. Там оно
   было не видно в коде, не попадало в историю правок и пропало бы при сбросе
   настроек темы.
   ========================================================================== */

:root {
	--buk-ink: #4f4f4f;        /* основной текст — точный цвет noni-mode.de, снят 23.09.2026 */
	--buk-ink-soft: #7b7b7b;   /* подписи и второстепенное */
	--buk-line: #e3e0de;
}

.single-product .summary,
.single-product .summary p,
.single-product .summary li {
	font-family: 'Lato', sans-serif;
	color: var(--buk-ink);
}

.woocommerce .product h1.product_title {
	font-family: 'Lato', sans-serif;
	font-size: 32px;
	font-weight: 300;
	line-height: 1.25;
	color: var(--buk-ink);
	letter-spacing: .01em;
}

/* Цена: тот же цвет, что и текст. Раньше здесь стоял #EA1B82. */
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary p.price span.amount,
.woocommerce div.product .summary p.price .woocommerce-Price-amount {
	font-family: 'Lato', sans-serif;
	font-size: 22px;
	font-weight: 400;
	color: var(--buk-ink);
	margin-bottom: 22px;
}

/* Несколько цен вместо одной (inc/product-page.php, 11.10.2026): каждая на своей строке.
   Шрифт и цвет — от p.price выше, своих нет. */
.buk-price-row {
	display: block;
}

.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p,
.woocommerce-product-details__short-description div {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	line-height: 1.8;
	font-weight: 400;
	color: var(--buk-ink);
}

/* Три пункта с галочками (поля «Punkt 1–3» на вкладке «Kleid»).

   Значок — SVG в разметке (inc/product-page.php): кружок с белой галочкой,
   геометрия один в один с образца piqyourdress.com. Кружок залит currentColor,
   поэтому следует за цветом текста.

   Ни рамок, ни подложки: на общем фоне блок не выделяется ничем, кроме значка.
   Шрифт, размер и цвет — те же, что у описания. */
.buk-features {
	list-style: none;
	margin: 22px 0;
	padding: 0;
	border: 0;
	background: none;
}
.buk-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	background: none;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	font-weight: 400;
	color: var(--buk-ink);
}
.buk-features__icon {
	flex: 0 0 15px;
	line-height: 0;
	/* Выравниваем значок по середине первой строки, а не по её верху. */
	margin-top: .45em;
	color: var(--buk-ink);
}
.buk-features__icon svg {
	display: block;
}
.buk-feature__text {
	flex: 1 1 auto;
	min-width: 0;
}
/* Кнопка записи (выбор размера убран 25.09.2026, надпись про шоурум — 13.10.2026) */
.buk-termin {
	margin: 26px 0 10px;
}
.buk-termin__button {
	cursor: pointer;
}

/* «Zurück zur Kollektion» — под кнопкой записи */
.buk-back {
	margin: 16px 0 0;
}
.buk-back a {
	font-family: 'Lato', sans-serif;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--buk-ink-soft);
}
.buk-back a:hover {
	color: var(--buk-ink);
}

/* --------------------------------------------------------------------------
   Галерея: миниатюры слева от главного снимка.

   Работает стандартная галерея WooCommerce на flexslider: главный снимок
   в .woocommerce-product-gallery__wrapper, миниатюры — ol.flex-control-thumbs
   под ним. Раскладываем контейнер во flex и переставляем миниатюры вперёд
   через order — шаблоны темы при этом не трогаем совсем.
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 769px) {
	.single-product .woocommerce-product-gallery {
		display: flex;
		align-items: flex-start;
		gap: 16px;
	}
	.single-product .woocommerce-product-gallery .flex-viewport,
	.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		order: 2;
		flex: 1 1 auto;
		min-width: 0;
	}
	.single-product .woocommerce-product-gallery ol.flex-control-thumbs {
		order: 1;
		flex: 0 0 88px;
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 0;
		padding: 0;
	}
	.single-product .woocommerce-product-gallery ol.flex-control-thumbs li {
		width: 100% !important;
		margin: 0;
		padding: 0;
		float: none;
	}
	.single-product .woocommerce-product-gallery ol.flex-control-thumbs img {
		width: 100%;
		height: auto;
		opacity: .55;
		transition: opacity .2s;
	}
	.single-product .woocommerce-product-gallery ol.flex-control-thumbs img.flex-active,
	.single-product .woocommerce-product-gallery ol.flex-control-thumbs img:hover {
		opacity: 1;
	}
}

/* Перенесено из Qode Custom CSS: на узком экране заголовок прижимался к галерее. */
@media only screen and (max-width: 801px) {
	.woocommerce .product h1.product_title {
		margin-top: 20px;
	}
}

/* Иконка увеличения — поверх главного снимка, а не отдельной колонкой.
   Во flex-раскладке она стала обычным элементом строки и уехала левее миниатюр. */
.single-product .woocommerce-product-gallery {
	position: relative;
}
/* Селектор повторяет специфичность правила самого WooCommerce
   (`.woocommerce div.product div.images .…__trigger`) и добавляет к ней класс
   страницы — иначе наш вариант проигрывает и иконка встаёт первым элементом
   flex-строки, то есть левее миниатюр. Сам элемент вставляет скрипт,
   в отданном сервером HTML его нет. */
.single-product .woocommerce div.product div.images .woocommerce-product-gallery__trigger,
.single-product div.product div.images .woocommerce-product-gallery__trigger {
	/* !important вынужденно: тема ставит элементу position: relative правилом,
	   которое наш селектор не перебивает — проверено по вычисленным стилям,
	   top и right применялись, а position оставался relative, и иконка ехала
	   первым элементом flex-строки. */
	position: absolute !important;
	top: 10px;
	right: 10px;
	left: auto;
	z-index: 5;
	margin: 0;
}

/* На телефоне колонки рядом нет — миниатюры возвращаются под снимок. */
@media only screen and (max-width: 768px) {
	.single-product .woocommerce-product-gallery ol.flex-control-thumbs {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin: 10px 0 0;
		padding: 0;
	}
	.single-product .woocommerce-product-gallery ol.flex-control-thumbs li {
		width: calc(25% - 6px) !important;
		margin: 0;
	}
}

/*
 * Стили магазина убраны 22.09.2026 вместе с корзиной и кассой.
 *
 * Здесь лежали: возврат таблицы корзины из-под правила `.product_meta, .cart
 * { display: none; }` в Qode Custom CSS, иконка и выпадашка корзины в шапке,
 * поле количества с «−»/«+», блок «Wichtig», чекбоксы согласия и вся вёрстка
 * полей на /kasse/. Продажи онлайн нет — стилизовать нечего.
 *
 * Правило `.product_meta, .cart { display: none; }` в Qode Options → Custom CSS
 * так и стоит в базе и теперь работает ровно как задумано: прячет форму покупки
 * на карточке. Трогать его не нужно.
 */


/* ==========================================================================
   Юридические страницы (фаза 05). Класс .buk-legal стоит на обёртке контента.
   .buk-draft, .buk-ru и .buk-q — только на время черновика, в чистовике уходят.
   ========================================================================== */

.buk-legal {
	max-width: 900px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.7;
	color: #000;
}

.buk-legal h2 {
	margin: 44px 0 14px;
	font-size: 20px;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
}

.buk-legal h3 {
	margin: 26px 0 10px;
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
}

.buk-legal p,
.buk-legal li {
	margin: 0 0 12px;
}

.buk-legal ul,
.buk-legal ol {
	margin: 0 0 12px 22px;
}

.buk-legal dl {
	margin: 0 0 18px;
}

.buk-legal dt {
	float: left;
	clear: left;
	width: 210px;
	font-weight: 600;
}

.buk-legal dd {
	margin: 0 0 6px 220px;
}

@media (max-width: 600px) {
	.buk-legal dt {
		float: none;
		width: auto;
	}
	.buk-legal dd {
		margin-left: 0;
	}
}

/* Преамбула — что это за документ */
.buk-legal .buk-preamble {
	background: #f6f4f1;
	border-left: 4px solid #000;
	padding: 18px 22px;
	margin: 0 0 30px;
}

/* Русский перевод под немецким пунктом */
.buk-legal .buk-ru {
	display: block;
	border-left: 2px solid #d8d3cc;
	padding-left: 14px;
	margin: 0 0 20px;
	color: #6d6d6d;
	font-style: italic;
}

.buk-legal .buk-ru p,
.buk-legal .buk-ru li {
	margin: 0 0 8px;
}

.buk-legal .buk-ru ul,
.buk-legal .buk-ru ol {
	margin-bottom: 8px;
}

/* Вопрос, который решает только владелица салона */
.buk-legal .buk-q {
	background: #fff6dd;
	border: 1px solid #e3bf55;
	border-left-width: 5px;
	padding: 14px 18px;
	margin: 18px 0 24px;
	font-style: normal;
	color: #000;
}

.buk-legal .buk-q p {
	margin: 0 0 8px;
}

.buk-legal .buk-q p:last-child {
	margin-bottom: 0;
}

.buk-legal .buk-q b {
	display: block;
	margin-bottom: 6px;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
}

/* Место, куда нужно подставить данные */
.buk-legal .buk-todo {
	background: #ffd84d;
	padding: 1px 6px;
	font-weight: 700;
	white-space: nowrap;
}

/* Шапка черновика */
.buk-legal .buk-draft {
	background: #ffe6e6;
	border: 1px solid #d96a6a;
	padding: 16px 20px;
	margin: 0 0 26px;
	color: #000;
}

.buk-legal .buk-draft p {
	margin: 0 0 8px;
}

.buk-legal .buk-draft p:last-child {
	margin-bottom: 0;
}

/* Предложенное нами значение — ждёт подтверждения владелицы. В чистовике снять. */
.buk-legal .buk-prop {
	background: #d8ecff;
	padding: 1px 6px;
	font-weight: 700;
	white-space: nowrap;
}

/* Ссылки Impressum · Datenschutz в подвале (functions.php, dynamic_sidebar_after).
   Страница появляется, когда её убирают из buk_legal_drafts(). */
.footer_top .buk-legal-links {
	margin-top: 18px;
	font-size: 12px;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}

.footer_top .buk-legal-links a {
	color: #fff;
}

.footer_top .buk-legal-links a:hover {
	text-decoration: underline;
}

/* Карта Google под адресом в подвале (functions.php, dynamic_sidebar_after, 09.10.2026).
   Ширина — по колонке, но не шире 420px, чтобы на телефоне (колонка во весь экран)
   карта не превращалась в полотно; высота — от пропорции 4:3. */
.footer_top .buk-footer-map {
	max-width: 420px;
	margin: 18px auto 0;
}

.footer_top .buk-footer-map iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border: 0;
}

/* Расписание во второй колонке подвала (09.10.2026). Заголовок «Öffnungszeiten» —
   тёплым белым #f6f4f1: розовый из Qode Custom CSS (`.footer-schedule-title`,
   с !important) на сером фоне читался плохо. Заголовок и строки — по центру
   колонки, как «E-MAIL» над ними (в Qode Custom CSS стоит text-align: left). */
.footer_top .footer-schedule-title,
.footer_top .footer-schedule-title p {
	color: #f6f4f1 !important;
}

.footer_top .footer-schedule-title,
.footer_top .footer-schedule {
	text-align: center;
}

/* Телефон под адресом в левой колонке подвала (виджет «ANSCHRIFT», 02.10.2026) —
   тем же светлым, что e-mail во второй колонке (Qode Custom CSS: `.footer_col2 a`).
   Иначе ссылка темы #818181 на сером фоне почти не видна. */
.footer_col1 .widget_text a[href^="tel:"] {
	color: #d8d8d8;
}

/* Главная, текст владелицы поверх фото (25.09.2026).
   «Лесенку» задаёт Qode Custom CSS (#qode-home-slider-3, nth-child 2–8, шаг 18px).
   Новый текст на два абзаца длиннее — продолжаем ту же лесенку до 10-го элемента,
   чтобы подпись не выпадала обратно к левому краю.
   02.10.2026: абзацы «Mein beruflicher Werdegang…» и «Über 15 Jahre…» слиты в один
   (текст слайда, post 14141, qode_slide-text) — элементов снова 2–8, правила ниже
   сейчас не срабатывают, оставлены на случай, если текст опять удлинится. */
@media only screen and (min-width: 1201px) {
	#qode-home-slider-3 .text.all_at_once.no_subtitle.no_separator > :nth-child(9) { --child-index: 7; }
	#qode-home-slider-3 .text.all_at_once.no_subtitle.no_separator > :nth-child(10) { --child-index: 8; }
}

/* Главная на телефоне (29.09.2026): текст владелицы целиком не помещался на фото —
   мельче шрифт и межстрочный, меньше отступы между абзацами, подпись в одну строку
   (в тексте слайда «Herzliche Grüsse<br> Viktoria Stutz» — пробел после <br> для этого).
   line-height с !important: тема жёстко ставит `.carousel-inner p {line-height:1.4em!important}`. */
@media only screen and (max-width: 767px) {
	/* колонка текста была 300px — на всю ширину с полями по 16px */
	#qode-home-slider-3 .carousel-inner .slider_content_outer {
		width: calc(100% - 32px) !important;
	}
	#qode-home-slider-3 .slider_content.left {
		width: 100% !important;
	}
	/* по ширине в узкой колонке давало дыры между словами */
	#qode-home-slider-3 .home_about_paragraph {
		font-size: 13px;
		line-height: 1.4 !important;
		margin-top: 6px !important;
		text-align: left;
	}
	#qode-home-slider-3 .home_about_signature {
		font-size: 20px;
		line-height: 1.2 !important;
		margin-top: 8px !important;
		white-space: nowrap;
	}
	#qode-home-slider-3 .home_about_signature br {
		display: none;
	}
}
/* Параллакс слайда главной (skrollr: `.carousel-inner` data-1440 translateY(-500px)) на узких
   экранах уводит фон вверх быстрее страницы — снизу слайда открывается белая полоса.
   На телефонах тема его и так не включает (по user-agent), но на узком окне, в DevTools
   и на iPad (представляется десктопным Safari) он работает — выключаем. (29.09.2026) */
@media only screen and (max-width: 1024px) {
	#qode-home-slider-3 .carousel-inner {
		transform: none !important;
	}
}
/* невысокие телефоны (360×740 и т. п.) — ещё плотнее */
@media only screen and (max-width: 767px) and (max-height: 800px) {
	#qode-home-slider-3 .slider_content.left {
		top: 2% !important;
	}
	#qode-home-slider-3 .home_about_paragraph {
		font-size: 12px;
		line-height: 1.3 !important;
		margin-top: 4px !important;
	}
	#qode-home-slider-3 .home_about_signature {
		font-size: 18px;
		margin-top: 4px !important;
	}
}
@media only screen and (max-width: 767px) and (max-height: 700px) {
	#qode-home-slider-3 .home_about_paragraph {
		line-height: 1.22 !important;
	}
}

/* Названия платьев — как написаны: «Maggie», а не «MAGGIE» (просьба владельца 25.09.2026).
   Заглавные давала тема: `.woocommerce .product h1.product_title` (woocommerce.min.css Bridge)
   и заголовки h6 в блоке «Ähnliche Kleider». В каталоге названия и так обычные. */
.woocommerce .product h1.product_title,
.woocommerce .related.products h6,
.woocommerce .upsells.products h6 {
	text-transform: none;
}

/* Длинные названия в плитках (11.10.2026). У части платьев названием служит всё описание
   в два-три предложения. На самой карточке оно выводится целиком, а в плитках — каталог
   (подпись при наведении) и «Ähnliche Kleider» — обрезается многоточием, иначе плитки
   в ряду получаются разной высоты, а на узких экранах текст вылезает за фото. */
.qode-pli .qode-pli-title,
.woocommerce .related.products h6,
.woocommerce .upsells.products h6 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	overflow-wrap: break-word;
}

/* Галереи-слайдеры nivo (WPBakery) на /neuanfertigungen/ и /neuanfertigungen-und-anderungen/:
   nivoSlider выводит подписью атрибут title картинки, а там имя файла
   («41366211_…_n», «setka279belyy12»). Подписей по смыслу нет — скрываем. (29.09.2026) */
.wpb_slider_nivo .nivo-caption {
	display: none !important;
}

/* Страница-раздел «Neuanfertigungen und Änderungen»: три карточки-ссылки на подразделы
   (шорткод [buk_section_tiles], inc/section-tiles.php). 29.09.2026 */
.buk-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	max-width: 1100px;
	margin: 0 auto;
}
.buk-tile {
	display: block;
	text-align: center;
	color: #000;
	text-decoration: none;
}
.buk-tile:hover,
.buk-tile:focus {
	color: #000;
}
.buk-tile:focus-visible {
	outline: 1px solid #000;
	outline-offset: 6px;
}
.buk-tile__img {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: #e9e9e9;
}
.buk-tile__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease;
}
.buk-tile:hover .buk-tile__img img {
	transform: scale(1.05);
}
.buk-tile__title {
	display: block;
	margin-top: 26px;
	font-family: 'Raleway', sans-serif;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.buk-tile__more {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	font-size: 14px;
	font-style: italic;
	color: #555;
}
.buk-tile__more::before {
	content: "";
	width: 30px;
	height: 1px;
	background: currentColor;
	transition: width 0.3s ease;
}
.buk-tile:hover .buk-tile__more::before {
	width: 55px;
}
@media only screen and (max-width: 1000px) {
	.buk-tiles {
		gap: 24px;
	}
	.buk-tile__title {
		font-size: 15px;
		letter-spacing: 1.5px;
	}
}
@media only screen and (max-width: 700px) {
	.buk-tiles {
		grid-template-columns: 1fr;
		gap: 44px;
		max-width: 420px;
	}
	.buk-tile__img {
		aspect-ratio: 4 / 3;
	}
	.buk-tile__title {
		margin-top: 18px;
	}
}