/**
 * Хлебные крошки на экранах до 767px: одна строка во всю ширину экрана,
 * листается пальцем и перетаскиванием мышью, у края затухание — видно,
 * что дальше есть ещё (25.09.2026, как ряды в SEODIT).
 *
 * Разметка: nav.woocommerce-breadcrumb > span.rd-bc-track (includes/breadcrumbs-scroll.php).
 * Классы fade-l, fade-r, is-scrollable, is-dragging ставит js/breadcrumbs.js.
 */

@media (max-width: 767.98px) {
	/*
	 * У темы здесь overflow: scroll: полосы прокрутки рисовались всегда и по
	 * обеим осям — в Chrome на Android и на компьютере вокруг крошек были
	 * пустые дорожки по 15px, похожие на рамки. Листается теперь дорожка.
	 *
	 * Серая полоса во всю ширину экрана, текст вровень с контентом: у темы
	 * полоса шириной колонки, и на 576–767px по бокам оставались белые поля.
	 * Лишнее за вертикальной полосой прокрутки обрезает .site (overflow: hidden).
	 */
	.woocommerce-breadcrumb {
		overflow: visible;

		/* Поля сверху и снизу у ссылок, а не у полосы: клик-зона 44px (аудит 7.14) */
		padding-top: 0;
		padding-bottom: 0;

		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
		padding-right: calc(50vw - 50%);
		padding-left: calc(50vw - 50%);
	}

	.woocommerce-breadcrumb .rd-bc-track {
		display: block;

		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;

		white-space: nowrap;
		line-height: 24px;

		scrollbar-width: none;
	}

	.woocommerce-breadcrumb .rd-bc-track::-webkit-scrollbar {
		display: none;
	}

	/*
	 * У темы средние крошки — «таблетки» с полями 13px по бокам и 6,5px сверху
	 * и снизу, без фона: на телефоне это только лишнее место — промежуток до
	 * стрелки вдвое больше, чем у «Главной», а полоса на карточках и в подразделах
	 * на 13px выше, чем в разделах. Вместо них у всех крошек поля 10px сверху
	 * и снизу: высота ссылки 44px — клик-зона по пункту аудита 7.14.
	 */
	.woocommerce-breadcrumb .rd-bc-track a,
	.woocommerce-breadcrumb .rd-bc-track span.delimiter + a {
		display: inline-block;

		padding: 10px 0;

		border-radius: 0;
	}

	/*
	 * Затухание маской, а не наложенным градиентом: маска гасит только текст,
	 * фон полосы у nav. Справа полоса шире — туда листают чаще.
	 */
	.woocommerce-breadcrumb .rd-bc-track.fade-r {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
		scroll-padding-inline-end: 44px;
	}

	.woocommerce-breadcrumb .rd-bc-track.fade-l {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 32px);
		mask-image: linear-gradient(to right, transparent, #000 32px);
		scroll-padding-inline-start: 32px;
	}

	.woocommerce-breadcrumb .rd-bc-track.fade-l.fade-r {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 44px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 44px), transparent);
	}
}

/* Мышью ряд тащится зажатой кнопкой: курсор-рука подсказывает это */
@media (max-width: 767.98px) and (hover: hover) and (pointer: fine) {
	.woocommerce-breadcrumb .rd-bc-track.is-scrollable {
		cursor: grab;
	}

	.woocommerce-breadcrumb .rd-bc-track.is-dragging,
	.woocommerce-breadcrumb .rd-bc-track.is-dragging a {
		cursor: grabbing;
		user-select: none;
	}
}