/* ==========================================================================
   Компоненты: кнопки, карточки, плитки, формы, мобильное меню
   ========================================================================== */

@layer components {

	/* --- Кнопки --- */
	.al-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--al-s-2);
		min-height: 52px;
		padding: var(--al-s-3) var(--al-s-6);
		border: 1px solid var(--al-brand);
		border-radius: var(--al-r-pill);
		background: var(--al-brand);
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
		cursor: pointer;
		box-shadow: var(--al-shadow-sm);
		transition: background-color var(--al-t), border-color var(--al-t), box-shadow var(--al-t), transform var(--al-t);
	}
	.al-btn:hover { background: var(--al-brand-600); border-color: var(--al-brand-600); color: #fff; box-shadow: var(--al-shadow); transform: translateY(-1px); }
	.al-btn:active { background: var(--al-brand-700); transform: none; }
	.al-btn--ghost { background: transparent; color: var(--al-brand); }
	.al-btn--ghost:hover { background: var(--al-brand-050); color: var(--al-brand-700); }
	.al-btn--sm { min-height: 44px; padding-inline: var(--al-s-4); font-size: 15px; }

	/* --- Карточки --- */
	.al-card {
		background: var(--al-surface);
		border: 1px solid var(--al-line);
		border-radius: var(--al-r-lg);
		overflow: hidden;
		transition: box-shadow var(--al-t), transform var(--al-t);
	}
	.al-card:hover { box-shadow: var(--al-shadow-lg); transform: translateY(-3px); }
	.al-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
	.al-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--al-surface-alt); }
	.al-card__img { width: 100%; height: 100%; object-fit: cover; }
	.al-card__body { display: flex; flex-direction: column; gap: var(--al-s-2); padding: var(--al-s-4) var(--al-s-5) var(--al-s-5); }
	.al-card__title { font-size: var(--al-fs-h3); }
	.al-card__excerpt { color: var(--al-ink-500); font-size: var(--al-fs-sm); }
	.al-card__date, .al-card__more { color: var(--al-ink-500); font-size: 14px; margin-top: auto; }
	.al-card__more { color: var(--al-brand); font-weight: 600; }

	/* --- Плитки каталога --- */
	.al-tiles { list-style: none; }
	.al-tile {
		border-radius: var(--al-r-lg);
		overflow: hidden;
		background: var(--al-surface);
		border: 1px solid var(--al-line);
		transition: box-shadow var(--al-t), transform var(--al-t);
	}
	.al-tile:hover { box-shadow: var(--al-shadow-lg); transform: translateY(-3px); }
	.al-tile__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
	.al-tile__media { display: block; aspect-ratio: 4 / 3; background: var(--al-surface-alt); overflow: hidden; }
	.al-tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--al-t); }
	.al-tile:hover .al-tile__img { transform: scale(1.04); }
	.al-tile__title {
		display: flex;
		align-items: center;
		flex: 1;
		padding: var(--al-s-4) var(--al-s-5);
		font-size: var(--al-fs-h3);
		font-weight: 600;
		color: var(--al-ink);
	}
	.al-tile:hover .al-tile__title { color: var(--al-brand); }

	/* --- Акции --- */
	/* Шесть сплошных красных плашек с мелким текстом выглядели тяжело
	   и спорили с фотографиями. Теперь заголовок лежит поверх снимка
	   на затемнении — снимок работает, а красный остаётся акцентом
	   в виде метки со скидкой. */
	.al-promo {
		position: relative;
		border-radius: var(--al-r-lg);
		overflow: hidden;
		background: var(--al-ink);
		color: #fff;
		transition: box-shadow var(--al-t), transform var(--al-t);
	}
	.al-promo:hover { box-shadow: var(--al-shadow-lg); transform: translateY(-3px); }
	.al-promo__link {
		display: block;
		position: relative;
		height: 100%;
		min-height: 260px;
		text-decoration: none;
		color: inherit;
	}
	.al-promo__media {
		position: absolute; inset: 0;
		display: block;
		background: var(--al-surface-alt);
		overflow: hidden;
	}
	.al-promo__img {
		width: 100%; height: 100%;
		object-fit: cover;
		transition: transform 500ms var(--al-t);
	}
	.al-promo:hover .al-promo__img { transform: scale(1.05); }
	.al-promo__link::after {
		content: "";
		position: absolute; inset: 0;
		background: linear-gradient(0deg, rgba(20,21,26,.92) 0%, rgba(20,21,26,.62) 42%, rgba(20,21,26,.10) 78%, rgba(20,21,26,0) 100%);
	}
	.al-promo__body {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: flex-end;
		height: 100%;
		padding: var(--al-s-5);
	}
	.al-promo__title {
		font-size: 17px;
		font-weight: 600;
		line-height: 1.35;
		text-shadow: 0 1px 2px rgba(0,0,0,.35);
	}

	@media (max-width: 599px) {
		.al-promo__link { min-height: 200px; }
		.al-promo__body { padding: var(--al-s-4); }
		.al-promo__title { font-size: 15px; }
	}

	/* --- Полоса призывов ----------------------------------------------------
	   Раньше это был flex: два блока жались влево, соцсети улетали вправо,
	   а посередине оставалась пустота в треть экрана. Теперь три равные
	   колонки с разделителями. */
	.al-ctabar {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
		align-items: center;
		margin-top: var(--al-s-5);
		background: var(--al-surface-alt);
		border: 1px solid var(--al-line);
		border-radius: var(--al-r-lg);
		overflow: hidden;
	}
	.al-ctabar__item,
	.al-ctabar__socials {
		display: flex; align-items: center; gap: var(--al-s-4);
		padding: var(--al-s-5) var(--al-s-6);
		min-height: 104px;
	}
	.al-ctabar > * + * { box-shadow: inset 1px 0 0 var(--al-line); }
	/* Иконки шли тонким серым контуром и терялись на сером фоне */
	.al-ctabar__icon {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center; justify-content: center;
		width: 46px; height: 46px;
		border-radius: 50%;
		background: var(--al-brand-050);
		color: var(--al-brand);
	}
	.al-ctabar__item > img { flex: 0 0 auto; width: 44px; height: 44px; }
	.al-ctabar__label { font-size: var(--al-fs-sm); color: var(--al-ink-500); }
	/* Телефон — основная цель на полосе, но его высота была 24 px:
	   меньше нормы касания в 44 px. */
	.al-ctabar__phone {
		display: inline-flex; align-items: center; min-height: 44px;
		font-size: 22px; font-weight: 700; color: var(--al-brand); text-decoration: none;
	}
	.al-ctabar__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--al-ink); text-decoration: none; }
	.al-ctabar__link:hover { color: var(--al-brand); }
	/* --- Соцсети ------------------------------------------------------------
	   В ACF у всех строк пустое поле logo, поэтому раньше здесь печатался
	   список подчёркнутых слов. Теперь иконку рисует тема (al_social_icon), а
	   этот блок отвечает только за круглые кнопки. --- */
	.al-socials { display: flex; gap: var(--al-s-2); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
	.al-social {
		display: inline-flex; width: 42px; height: 42px;
		align-items: center; justify-content: center;
		border-radius: 50%;
		background: var(--al-surface);
		border: 1px solid var(--al-line);
		color: var(--al-ink-500);
		text-decoration: none;
		transition: border-color var(--al-t), color var(--al-t), background-color var(--al-t), transform var(--al-t);
	}
	.al-social:hover { border-color: var(--al-brand); color: var(--al-brand); transform: translateY(-2px); }
	.al-social__icon { width: 20px; height: 20px; display: block; }
	.al-social img { width: 20px; height: 20px; object-fit: contain; }

	.al-ctabar__socials { justify-content: flex-end; }

	/* В подвале фон тёмный — кнопки делаем прозрачными со светлой обводкой */
	.al-footer .al-socials { margin-top: var(--al-s-4); }
	.al-footer .al-social {
		background: rgba(255,255,255,.06);
		border-color: rgba(255,255,255,.18);
		color: rgba(255,255,255,.8);
	}
	.al-footer .al-social:hover { background: var(--al-brand); border-color: var(--al-brand); color: #fff; }

	/* Карточки акций одной высоты: сетка растягивает их, а красный блок
	   занимает остаток — иначе колонки выглядели рваными. */
	.al-grid > li, .al-grid > article { height: 100%; }

	/* На узком экране полоса переносится, и margin-left:auto у соцсетей
	   выталкивал их за пределы вьюпорта — страница получала горизонтальную
	   прокрутку. */
	@media (max-width: 767px) {
		.al-ctabar { grid-template-columns: 1fr; }
		.al-ctabar__item, .al-ctabar__socials { padding: var(--al-s-4); min-height: 0; }
		/* На узком экране разделители должны быть горизонтальными */
		.al-ctabar > * + * { box-shadow: inset 0 1px 0 var(--al-line); }
		.al-ctabar__socials { justify-content: center; flex-wrap: wrap; }
		.al-ctabar__phone { font-size: 20px; }
	}

	/* На телефоне карточки идут в две колонки, поэтому заголовок мельче
	   и обязан переноситься: русские «Горизонтальные жалюзи» иначе
	   вылезали за край плитки. */
	@media (max-width: 599px) {
		.al-tile__title {
			padding: var(--al-s-3);
			font-size: 15px;
			line-height: 1.3;
			overflow-wrap: anywhere;
			hyphens: auto;
		}
		.al-card__body { padding: var(--al-s-3); gap: var(--al-s-1); }
		.al-card__title { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
		.al-promo__body { padding: var(--al-s-3); }
		.al-promo__title { font-size: 14px; }
	}

	/* --- Первый экран --- */
	.al-hero { position: relative; }
	.al-hero__track {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.al-hero__track::-webkit-scrollbar { display: none; }
	.al-hero__slide {
		position: relative;
		flex: 0 0 100%;
		scroll-snap-align: start;
		min-height: clamp(360px, 46vw, 560px);
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: center;
	}
	.al-hero__slide::after {
		content: '';
		position: absolute; inset: 0;
		background:
			linear-gradient(90deg, rgba(20,21,26,.86) 0%, rgba(20,21,26,.70) 38%, rgba(20,21,26,.18) 68%, rgba(20,21,26,0) 88%),
			linear-gradient(0deg, rgba(20,21,26,.35) 0%, rgba(20,21,26,0) 45%);
	}
	/* У блока был max-width:640px ПРИ классе al-container с margin-inline:auto:
	   узкая колонка центрировалась в окне и начиналась с 432-го пикселя,
	   не совпадая с левым краем сетки остального сайта. Ограничиваем ширину
	   содержимого, а не самого контейнера. */
	.al-hero__content { position: relative; z-index: 1; color: #fff; }
	.al-hero__content > * { max-width: 660px; }
	.al-hero__eyebrow { font-size: var(--al-fs-sm); text-transform: uppercase; letter-spacing: .08em; opacity: .85; margin-bottom: var(--al-s-3); }
	.al-hero__title { color: #fff; font-size: var(--al-fs-h1); margin-bottom: var(--al-s-5); }
	.al-hero__points {
		list-style: none;
		display: flex; flex-wrap: wrap;
		gap: var(--al-s-2) var(--al-s-5);
		margin: 0 0 var(--al-s-6);
		padding: 0;
		color: rgba(255,255,255,.92);
		font-size: var(--al-fs-sm);
	}
	.al-hero__points li { display: flex; align-items: center; gap: var(--al-s-2); }
	.al-hero__points li::before {
		content: "";
		flex: 0 0 auto;
		width: 18px; height: 18px;
		border-radius: 50%;
		background: var(--al-brand) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
	}
	.al-hero__actions { display: flex; gap: var(--al-s-3); flex-wrap: wrap; }
	.al-hero__actions .al-btn--ghost { color: #fff; border-color: rgba(255,255,255,.65); }
	.al-hero__actions .al-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
	.al-hero__link { position: absolute; inset: 0; z-index: 1; }
	.al-hero__dots { display: flex; gap: var(--al-s-2); justify-content: center; padding: var(--al-s-4); }
	.al-hero__dot {
		width: 10px; height: 10px; padding: 0;
		border: 0; border-radius: 50%;
		background: var(--al-line-strong);
		cursor: pointer;
	}
	.al-hero__dot[aria-current="true"] { background: var(--al-brand); }

	/* Первый экран на телефоне: текст прижимался к краю и не совпадал
	   с отступами карточек ниже; кнопки занимали пол-экрана. */
	@media (max-width: 767px) {
		.al-hero__slide { min-height: clamp(300px, 62vw, 420px); align-items: flex-end; }
		.al-hero__slide::after { background: linear-gradient(0deg, rgba(34,36,44,.85) 0%, rgba(34,36,44,.45) 55%, rgba(34,36,44,.12) 100%); }
		.al-hero__content { padding-block: var(--al-s-6); }
		.al-hero__title { font-size: clamp(24px, 6.4vw, 32px); margin-bottom: var(--al-s-4); }
		.al-hero__eyebrow { font-size: 13px; margin-bottom: var(--al-s-2); }
		/* На телефоне три довода занимали три строки и выталкивали кнопки
		   за нижний край снимка — оставляем два самых весомых. */
		.al-hero__points { gap: var(--al-s-1) var(--al-s-4); margin-bottom: var(--al-s-4); font-size: 13px; }
		.al-hero__points li:last-child { display: none; }
		.al-hero__actions { gap: var(--al-s-2); }
		.al-hero__actions .al-btn { min-height: 48px; padding-inline: var(--al-s-5); font-size: 15px; flex: 1 1 auto; }
		.al-hero__dots { padding: var(--al-s-3); }
	}

	/* --- Товарная страница --- */
	.al-product-hero { padding-top: var(--al-s-6); }
	.al-product {
		display: grid;
		gap: var(--al-s-6);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
		margin-top: var(--al-s-7);
		align-items: start;
	}
	.al-product__note { margin-top: var(--al-s-5); color: var(--al-ink-500); font-size: var(--al-fs-sm); }

	/* Калькулятор — главная форма страницы, но стоял без всякой рамки:
	   поля висели прямо на белом фоне вперемешку с текстом раздела. */
	/* Фон белый, а не серый: плагин печатает внутри собственные белые
	   панели фиксированной ширины, и на сером они читались как заплатки. */
	.al-product__calc {
		padding: var(--al-s-6);
		background: var(--al-surface);
		border: 1px solid var(--al-line);
		border-radius: var(--al-r-lg);
		box-shadow: var(--al-shadow-sm);
	}
	.al-product__visual { position: sticky; top: 108px; }

	@media (max-width: 767px) {
		.al-product { gap: var(--al-s-5); margin-top: var(--al-s-6); }
		.al-product__calc { padding: var(--al-s-4); }
		.al-product__visual { position: static; }
	}

	.al-visual { position: relative; border-radius: var(--al-r-lg); overflow: hidden; margin: 0; }
	.al-visual__bg { width: 100%; height: auto; }
	.al-visual__overlay { position: absolute; inset: 0; }
	.al-visual__overlay img { width: 100%; height: 100%; object-fit: contain; }
	/* Проём окна на снимке комнаты. Сюда ложится ткань, выбранная
	   в калькуляторе: раньше выбор менял только квадратик в углу, и понять,
	   как ткань будет выглядеть на окне, было невозможно. */
	.al-visual__glass {
		position: absolute;
		overflow: hidden;
		border-radius: 2px;
		box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 1px 6px rgba(34,36,44,.18);
	}
	.al-visual__glass img {
		width: 100%; height: 100%;
		object-fit: cover;
		display: block;
		transition: opacity var(--al-t);
	}
	/* Пока ткань не выбрана, показываем «пустое» окно приглушённо,
	   чтобы снимок не выглядел зашторенным по умолчанию. */
	.al-visual__glass img { opacity: .72; }
	.al-visual.is-picked .al-visual__glass img { opacity: 1; }

	.al-visual__hint {
		position: absolute; left: var(--al-s-4); bottom: var(--al-s-4);
		max-width: 55%;
		padding: var(--al-s-2) var(--al-s-3);
		border-radius: var(--al-r-sm);
		background: rgba(255,255,255,.92);
		color: var(--al-ink-700);
		font-size: 13px; line-height: 1.35;
	}
	.al-visual.is-picked .al-visual__hint { display: none; }

	.al-visual__swatch { position: absolute; right: var(--al-s-4); bottom: var(--al-s-4); }
	.al-visual__zoom {
		display: block; width: 120px; height: 120px;
		border: 3px solid #fff; border-radius: var(--al-r);
		overflow: hidden; box-shadow: var(--al-shadow);
	}
	.al-visual__zoom img { width: 100%; height: 100%; object-fit: cover; }

	/* --- Ткани --- */
	.al-fabrics__grid {
		display: grid; gap: var(--al-s-4); list-style: none;
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}
	.al-fabrics__item { text-align: center; }
	.al-fabrics__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--al-r); }
	.al-fabrics__name { display: block; margin-top: var(--al-s-2); font-size: 14px; color: var(--al-ink-500); }

	/* --- Вопросы и ответы --- */
	.al-faq__list { display: grid; gap: var(--al-s-3); max-width: 820px; margin-inline: auto; }
	.al-faq__item {
		border: 1px solid var(--al-line);
		border-radius: var(--al-r);
		background: var(--al-surface);
		overflow: hidden;
	}
	.al-faq__q {
		padding: var(--al-s-4) var(--al-s-5);
		font-weight: 600;
		color: var(--al-ink);
		cursor: pointer;
		list-style: none;
	}
	.al-faq__q::-webkit-details-marker { display: none; }
	.al-faq__q::after { content: '+'; float: right; color: var(--al-brand); font-size: 22px; line-height: 1; }
	.al-faq__item[open] .al-faq__q::after { content: '−'; }
	.al-faq__a { padding: 0 var(--al-s-5) var(--al-s-5); }

	/* --- Форма заявки --- */
	.al-request { margin-top: var(--al-section); padding-block: var(--al-section); background: var(--al-surface-alt); }
	.al-request__title { text-align: center; font-size: var(--al-fs-h2); margin-bottom: var(--al-s-6); }
	.al-request__form { max-width: 720px; margin-inline: auto; }

	/* --- Поля ввода --- */
	input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
	input[type="search"], textarea, select {
		width: 100%;
		min-height: 52px;
		padding: var(--al-s-3) var(--al-s-4);
		border: 1px solid var(--al-line-strong);
		border-radius: var(--al-r-sm);
		background: var(--al-surface);
		font-size: 16px; /* меньше 16px — iOS зумит страницу при фокусе */
		line-height: 1.4;
		transition: border-color var(--al-t), box-shadow var(--al-t);
	}
	textarea { min-height: 128px; }
	input:hover:not([type="submit"]), textarea:hover, select:hover { border-color: var(--al-ink-300); }
	input:focus:not([type="submit"]), textarea:focus, select:focus {
		border-color: var(--al-brand);
		box-shadow: 0 0 0 3px var(--al-brand-100);
		outline: none;
	}

	/* --- Мобильное меню --- */
	.al-offcanvas { position: fixed; inset: 0; z-index: 200; background: rgba(34,36,44,.5); }
	.al-offcanvas[hidden] { display: none; }
	.al-offcanvas__panel {
		position: absolute; inset-block: 0; left: 0;
		width: min(88vw, 360px);
		padding: var(--al-s-5);
		background: var(--al-surface);
		border-radius: 0 var(--al-r-lg) var(--al-r-lg) 0;
		box-shadow: var(--al-shadow-lg);
		overflow-y: auto;
	}
	.al-offcanvas__close {
		position: absolute; top: var(--al-s-3); right: var(--al-s-3);
		width: 44px; height: 44px;
		border: 0; border-radius: var(--al-r-pill);
		background: var(--al-surface-alt);
		font-size: 24px; line-height: 1; cursor: pointer;
	}
	.al-offcanvas__cta { display: flex; align-items: center; gap: var(--al-s-3); flex-wrap: wrap; margin: var(--al-s-6) 0 var(--al-s-5); }
	.al-offcanvas__phone { display: inline-flex; align-items: center; gap: var(--al-s-2); min-height: 44px; font-weight: 700; color: var(--al-brand); text-decoration: none; }
	.al-offcanvas .al-menu { flex-direction: column; align-items: stretch; }
	.al-offcanvas .al-menu__link { justify-content: flex-start; }
	.al-offcanvas .al-menu__sub { position: static; display: none; box-shadow: none; border: 0; padding-left: var(--al-s-5); }
	.al-offcanvas .al-menu__item.is-open > .al-menu__sub { display: block; }

	/* --- Гамбургер --- */
	.al-burger {
		display: none;
		/* Без flex:0 0 кнопка сжималась до нуля: в строке шапки русского сайта
		   кнопка «Запросить расчёт» длиннее эстонской, и весь недостаток
		   ширины забирал именно гамбургер — вместо полосок были точки. */
		flex: 0 0 44px;
		width: 44px; height: 44px;
		padding: 10px 9px;
		border: 0; background: none; cursor: pointer;
		border-radius: var(--al-r-sm);
	}
	.al-burger span { display: block; height: 2px; background: var(--al-brand); border-radius: 2px; transition: transform var(--al-t), opacity var(--al-t); }
	.al-burger span + span { margin-top: 5px; }
	@media (max-width: 767px) { .al-burger { display: block; } }

	/* --- Липкая панель на телефоне --- */
	.al-sticky-bar { display: none; }
	@media (max-width: 767px) {
		.al-sticky-bar {
			position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
			display: grid; grid-template-columns: 1fr 1fr;
			gap: 1px;
			background: var(--al-line);
			box-shadow: 0 -2px 12px rgba(34,36,44,.12);
		}
		.al-sticky-bar__item {
			display: flex; align-items: center; justify-content: center; gap: var(--al-s-2);
			min-height: 56px;
			background: var(--al-surface);
			font-weight: 600; font-size: 15px;
			text-decoration: none; color: var(--al-ink);
		}
		.al-sticky-bar__item--primary { background: var(--al-brand); color: #fff; }
		body { padding-bottom: 56px; }
	}

	/* --- Хлебные крошки, пагинация, пусто --- */
	.al-breadcrumbs { padding-top: var(--al-s-5); font-size: 14px; color: var(--al-ink-500); }
	.al-breadcrumbs a { text-decoration: none; }
	.al-pagination { margin-top: var(--al-s-6); }
	.al-pagination .page-numbers {
		display: inline-flex; align-items: center; justify-content: center;
		min-width: 44px; min-height: 44px; padding: 0 var(--al-s-2);
		border-radius: var(--al-r-sm); text-decoration: none;
	}
	.al-pagination .current { background: var(--al-brand); color: #fff; }
	.al-empty { padding-block: var(--al-s-8); text-align: center; }
	.al-empty p + p { margin-top: var(--al-s-3); }
	.al-empty .al-btn { margin-top: var(--al-s-5); }
}