/**
 * ProfHairClub — Типы средств: photo tiles + switcher.
 *
 * Uses the theme's own tokens (style.css :root). Every rule is scoped
 * under `.phc-shop` or the component's own root class with one extra
 * level, because the theme's generic link rules have outranked
 * single-class component rules on this site many times before.
 */

/* ------------------------------------------------------------------ */
/* Photo tiles (shop entrance)                                         */
/* ------------------------------------------------------------------ */

.phc-shop .phc-types-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(10px, 1.4vw, 18px);
	margin-block: clamp(28px, 4vw, 48px) clamp(4px, 1.5vw, 14px);
}

.phc-shop .phc-types-tile {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 3;
	max-width: 100%;
	padding: clamp(12px, 1.5vw, 20px);
	border-radius: 16px;
	overflow: hidden;
	background: var(--phc-ink);
	color: var(--phc-paper);
	text-decoration: none;
}

.phc-shop .phc-types-tile__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.86;
	transition: transform 0.6s var(--phc-ease), opacity 0.3s ease;
}

.phc-shop .phc-types-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(10, 10, 8, 0.88) 0%, rgba(10, 10, 8, 0.25) 55%, rgba(10, 10, 8, 0) 100%);
}

.phc-shop .phc-types-tile:hover .phc-types-tile__img,
.phc-shop .phc-types-tile:focus-visible .phc-types-tile__img {
	transform: scale(1.04);
	opacity: 1;
}

.phc-shop .phc-types-tile:focus-visible {
	outline: 3px solid var(--phc-yellow);
	outline-offset: 3px;
}

.phc-shop .phc-types-tile__text {
	display: block;
}

.phc-shop .phc-types-tile__name {
	display: block;
	font-family: var(--phc-font-display);
	font-size: clamp(18px, 1.7vw, 25px);
	font-weight: 700;
	line-height: 1.1;
	text-wrap: balance;
}

.phc-shop .phc-types-tile__short {
	display: none;
}

.phc-shop .phc-types-tile__count {
	display: block;
	margin-top: 5px;
	color: var(--phc-yellow);
	font-size: 13px;
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Switcher                                                            */
/* ------------------------------------------------------------------ */

.phc-types-switch .phc-types-switch__track {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.phc-types-switch .phc-types-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border: 1px solid var(--phc-mist);
	border-radius: 999px;
	background: var(--phc-white);
	color: var(--phc-ink);
	font-family: var(--phc-font-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.phc-types-switch .phc-types-chip:hover {
	border-color: var(--phc-ink);
	color: var(--phc-ink);
}

.phc-types-switch .phc-types-chip:focus-visible {
	outline: 2px solid var(--phc-yellow-deep);
	outline-offset: 2px;
}

.phc-types-switch .phc-types-chip__count {
	color: var(--phc-stone);
	font-size: 12.5px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.phc-types-switch .phc-types-chip.is-active {
	border-color: var(--phc-ink);
	background: var(--phc-ink);
	color: var(--phc-paper);
}

.phc-types-switch .phc-types-chip.is-active .phc-types-chip__count {
	color: var(--phc-yellow);
}

/* In the products column: sticks under the fixed header. */
.phc-shop .phc-types-switch--inline {
	position: sticky;
	top: var(--phc-header-h);
	z-index: 40;
	margin: -10px 0 8px;
	padding-block: 10px;
	background: var(--phc-paper);
}

/* Shop entrance: slides in under the header once the tiles are gone. */
.phc-shop .phc-types-switch--floating {
	position: fixed;
	top: var(--phc-header-h);
	left: 0;
	right: 0;
	z-index: 55;
	padding: 10px var(--phc-gutter);
	border-bottom: 1px solid var(--phc-mist);
	background: var(--phc-paper);
	box-shadow: 0 10px 24px rgba(10, 10, 8, 0.07);
	opacity: 0;
	transform: translateY(-10px);
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s var(--phc-ease), visibility 0s linear 0.25s;
}

.phc-shop .phc-types-switch--floating .phc-types-switch__track {
	max-width: calc(var(--phc-container) - 2 * var(--phc-gutter));
	margin-inline: auto;
}

.phc-shop .phc-types-switch--floating.is-shown {
	opacity: 1;
	transform: none;
	visibility: visible;
	transition: opacity 0.25s ease, transform 0.25s var(--phc-ease), visibility 0s;
}

/* While the floating switcher is out, the sticky filter column has to
   start below it, not under it. */
body.phc-types-bar-shown .phc-shop .phc-shop__sidebar {
	top: calc(var(--phc-header-h) + 56px + 1.5rem);
}

.phc-shop .phc-shop__sidebar {
	transition: top 0.25s var(--phc-ease);
}

/* ------------------------------------------------------------------ */
/* Phones                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 720px) {
	.phc-shop .phc-types-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-block: 22px 4px;
	}

	/* Half the height of a desktop tile: products start on screen one. */
	.phc-shop .phc-types-tile {
		aspect-ratio: 2 / 1;
		padding: 10px 12px;
		border-radius: 12px;
	}

	.phc-shop .phc-types-tile__name {
		font-size: 16px;
	}

	.phc-shop .phc-types-tile__long {
		display: none;
	}

	.phc-shop .phc-types-tile__short {
		display: inline;
	}

	.phc-shop .phc-types-tile__count {
		margin-top: 2px;
		font-size: 12px;
	}

	/* One swipeable row instead of wrapping onto three lines. */
	.phc-types-switch .phc-types-switch__track {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
		margin-inline: calc(-1 * var(--phc-gutter));
		padding-inline: var(--phc-gutter);
		scroll-padding-inline: var(--phc-gutter);
	}

	.phc-types-switch .phc-types-switch__track::-webkit-scrollbar {
		display: none;
	}

	.phc-types-switch .phc-types-chip {
		padding: 7px 14px;
		font-size: 13.5px;
	}

	.phc-shop .phc-types-switch--floating {
		padding-inline: var(--phc-gutter);
	}

	.phc-shop .phc-types-switch--floating .phc-types-switch__track {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.phc-shop .phc-types-tile__img,
	.phc-shop .phc-types-switch--floating,
	.phc-types-switch .phc-types-chip {
		transition: none;
	}
}