/**
 * Home page bands, and long-form content.
 *
 * From Main.dc.html. The hero and the section head live in 60-hero.css; this
 * file carries the promise strip, the category circles, the hair-type tiles,
 * the brand strip and the club band, plus the prose defaults for ordinary
 * pages and posts.
 */

/* ---- promise strip ---- */

.hp-promises {
	border-block-end: 1px solid var(--hp-border);
}

.hp-promises__inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--hp-space-6);
	padding-block: var(--hp-space-7);
}

.hp-promise {
	display: flex;
	align-items: center;
	gap: var(--hp-space-3);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

.hp-promise__icon {
	flex: none;
	width: 1.625rem;
	height: 1.625rem;
	background: var(--hp-accent);
	mask: var(--hp-icon-shield) center / contain no-repeat;
	-webkit-mask: var(--hp-icon-shield) center / contain no-repeat;
}

.hp-promise__icon--truck {
	mask-image: var(--hp-icon-truck);
	-webkit-mask-image: var(--hp-icon-truck);
}

/* The club promise is the one in the row that carries the club colour. */
.hp-promise__icon--medal {
	background: var(--hp-club);
	mask-image: var(--hp-icon-medal);
	-webkit-mask-image: var(--hp-icon-medal);
}

.hp-promise__icon--pin {
	mask-image: var(--hp-icon-pin);
	-webkit-mask-image: var(--hp-icon-pin);
}

@media (max-width: 55rem) {
	.hp-promises__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--hp-space-4);
	}
}

/* ---- category circles ---- */

.hp-circles {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--hp-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-circle a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hp-space-3);
	color: var(--hp-text);
	text-align: center;
}

/**
 * The disc is capped, not sized by its column.
 *
 * At `width: 100%` in a six-column grid the disc came out 186px across, so
 * twelve categories made a 466px band that is mostly empty grey. This row is
 * navigation — a reader scans the names — so the disc is a mark beside the
 * name, not the subject of the band.
 */
.hp-circle__media {
	display: block;
	width: 100%;
	max-width: 7.5rem; /* 120px */
	margin-inline: auto;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--hp-radius-pill);
	background: var(--hp-surface-subtle);
}

.hp-circle__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--hp-duration) var(--hp-ease);
}

.hp-circle a:hover .hp-circle__media img {
	transform: scale(1.04);
}

.hp-circle__label {
	font-size: 0.9375rem;
	font-weight: 600;
}

@media (max-width: 60rem) {
	.hp-circles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	.hp-circles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---- hair-type tiles ----
 * A tall image with the label laid over a gradient at its foot.
 */

.hp-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--hp-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-tile a {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--hp-radius);
	background: var(--hp-surface-subtle);
	color: var(--hp-text-inverse);
}

.hp-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--hp-duration) var(--hp-ease);
}

.hp-tile a:hover img {
	transform: scale(1.04);
}

.hp-tile__label {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	padding: var(--hp-space-10) var(--hp-space-5) var(--hp-space-4);
	background: linear-gradient(0deg, rgb(13 13 13 / 0.65), transparent);
	color: var(--hp-text-inverse);
	font-family: var(--hp-font-display);
	font-size: var(--hp-text-md);
	font-weight: 700;
}

@media (max-width: 55rem) {
	.hp-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- brand strip ---- */

.hp-brands {
	border-block: 1px solid var(--hp-border);
}

.hp-brands__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--hp-space-8);
	padding-block: var(--hp-space-7);
}

.hp-brands__item {
	color: var(--hp-text-muted);
	font-size: var(--hp-text-md);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: color var(--hp-duration-fast) var(--hp-ease);
}

.hp-brands__item:hover {
	color: var(--hp-text);
}

/* ---- club band ---- */

.hp-club {
	background: var(--hp-surface-inverse);
	color: var(--hp-text-inverse);
}

.hp-club__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--hp-space-8);
	padding-block: var(--hp-space-12);
}

.hp-club__copy {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-2);
}

.hp-club__title {
	margin: 0;
	font-size: 1.875rem; /* 30px */
	color: var(--hp-text-inverse);
}

.hp-club__text {
	margin: 0;
	max-width: 40rem;
	font-size: var(--hp-text-md);
	color: var(--hp-accent-soft);
}

@media (max-width: 45rem) {
	.hp-club__inner {
		gap: var(--hp-space-6);
		padding-block: var(--hp-space-10);
	}

	.hp-club__title {
		font-size: 1.5rem;
	}
}

/* ---- prose ----
 * Ordinary pages and posts, and any editor content dropped into a term
 * description or a product tab.
 */

.entry-content > * + * {
	margin-block-start: var(--hp-space-5);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-block-start: var(--hp-space-10);
}

/**
 * Prose list styling, and only for prose lists.
 *
 * `.entry-content ul` is (0,1,1) and beat every theme component whose list is
 * named with a single class — so a grid the theme rendered inside a page picked
 * up 24px of list indent on its start edge and no longer met its own container.
 * On an RTL page that reads as the whole block having drifted off to the right,
 * which is exactly what the contact page's branch grid did.
 *
 * A list the theme builds always carries an `hp-` class; a list an editor wrote
 * carries none, or one of the block editor's. Excluding the first is precise,
 * fixes every component at once, and needs no specificity war.
 */
.entry-content ul:not([class*="hp-"]),
.entry-content ol:not([class*="hp-"]) {
	padding-inline-start: var(--hp-space-6);
}

.entry-content li + li:not([class*="hp-"]) {
	margin-block-start: var(--hp-space-2);
}

.entry-content img {
	border-radius: var(--hp-radius);
}

.entry-content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--hp-space-5);
	border-inline-start: 2px solid var(--hp-accent);
	color: var(--hp-text-muted);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content th,
.entry-content td {
	padding: var(--hp-space-3);
	border-block-end: 1px solid var(--hp-border);
	text-align: start;
}

/* A wide table scrolls inside its own box rather than pushing the page
 * sideways. */
.entry-content .hp-scroll,
.entry-content figure.wp-block-table {
	overflow-x: auto;
}

/* ---- post list ---- */

.hp-post-list {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-12);
	padding-block: var(--hp-section-space);
}

.hp-post__title {
	margin-block-end: var(--hp-space-3);
}

.hp-post__media {
	margin-block: var(--hp-space-5);
}

.hp-post__media img {
	width: 100%;
	border-radius: var(--hp-radius);
}

.hp-archive-header {
	padding-block: var(--hp-space-12) 0;
}

.hp-archive-description {
	margin-block-start: var(--hp-space-3);
	color: var(--hp-text-muted);
}

/* ---- news band ----
 * Not in the canvas: Main.dc.html stops at the club band. The live home page
 * carries a posts row built from Elementor's posts and loop-grid widgets, which
 * go when Elementor does, so the band is rebuilt here in the same vocabulary as
 * the product card — flush image, padded body, one hairline border.
 */

.hp-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hp-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-post-card {
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	overflow: hidden;
	transition: border-color var(--hp-duration-fast) var(--hp-ease);
}

.hp-post-card:hover {
	border-color: var(--hp-border-strong);
}

.hp-post-card > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--hp-text);
}

.hp-post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--hp-surface-subtle);
	overflow: hidden;
}

.hp-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--hp-duration) var(--hp-ease);
}

.hp-post-card:hover .hp-post-card__media img {
	transform: scale(1.04);
}

.hp-post-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-2);
	padding: var(--hp-space-4);
}

.hp-post-card__date {
	font-size: var(--hp-text-xs);
	color: var(--hp-text-muted);
}

.hp-post-card__title {
	font-family: var(--hp-font-display);
	font-size: var(--hp-text-md);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.015em;
}

@media (max-width: 55rem) {
	.hp-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 34rem) {
	.hp-posts {
		grid-template-columns: 1fr;
	}
}

/* ---- contact band ----
 * Also outside the canvas, matching the live page's closing "get in touch"
 * block. Built as the club band's quiet counterpart: same shape, warm ground
 * instead of the inverse one, so the two do not compete at the foot of the page.
 */

.hp-contact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--hp-space-8);
	padding: var(--hp-space-10) var(--hp-space-8);
	background: var(--hp-surface-warm);
	border-radius: var(--hp-radius);
}

.hp-contact__copy {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-2);
}

.hp-contact__title {
	margin: 0;
	font-size: var(--hp-text-h2);
}

.hp-contact__text {
	margin: 0;
	max-width: 34rem;
	color: var(--hp-text-muted);
	font-size: var(--hp-text-md);
	line-height: var(--hp-leading-body);
}

/* ---- placeholders ----
 * A band whose content does not exist yet still renders its structure, so the
 * page can be reviewed and filled as a whole. The frames are deliberately blank
 * rather than filled with sample text: on a live shop an empty frame reads as
 * "not filled in yet", while invented product names would read as real.
 */

.is-placeholder {
	background: var(--hp-surface-subtle);
	border: 1px dashed var(--hp-border);
	border-radius: var(--hp-radius);
	pointer-events: none;
}

li.hp-circle.is-placeholder {
	aspect-ratio: 1;
	border-radius: var(--hp-radius-pill);
}

li.hp-tile.is-placeholder {
	aspect-ratio: 3 / 4;
}

li.hp-post-card.is-placeholder {
	aspect-ratio: 4 / 3;
}

.woocommerce ul.products li.product.is-placeholder {
	aspect-ratio: 3 / 4;
	padding: 0;
	background: var(--hp-surface-subtle);
	border-style: dashed;
}

.hp-brands__item.is-placeholder {
	display: inline-block;
	width: 6.5rem;
	height: 1.25rem;
	border-radius: var(--hp-radius-sm);
}

.hp-hero__media.is-placeholder {
	border: 1px dashed var(--hp-border);
}

/* ---- ordinary pages ----
 * The shop pages skip this treatment entirely (page.php decides); what is left
 * here is genuine editorial content, so it gets a reading measure rather than
 * the full grid width.
 */

.hp-page {
	padding-block: var(--hp-space-12) var(--hp-space-16);
}

.hp-page__title {
	margin: 0 0 var(--hp-space-6);
	font-size: var(--hp-text-h1);
}

.hp-page__content,
.hp-post__content {
	max-width: var(--hp-container-narrow);
	font-size: var(--hp-text-md);
	line-height: var(--hp-leading-body);
}

.hp-page-links {
	display: flex;
	gap: var(--hp-space-2);
	margin-block-start: var(--hp-space-8);
	font-weight: 600;
}

/* ---- posts ---- */

.hp-post {
	padding-block-end: var(--hp-space-8);
	border-block-end: 1px solid var(--hp-border);
}

.hp-post:last-child {
	border-block-end: none;
}

.hp-archive-title {
	margin: 0;
	font-size: var(--hp-text-h1);
}

/* ---- empty states ---- */

.hp-empty {
	padding-block: var(--hp-space-16);
	text-align: center;
	color: var(--hp-text-muted);
	font-size: var(--hp-text-md);
}

/* ---- 404 ---- */

.hp-404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hp-space-5);
	max-width: 34rem;
	margin-inline: auto;
	padding-block: var(--hp-space-16);
	text-align: center;
}

.hp-404__title {
	margin: 0;
	font-size: var(--hp-text-h1);
}

.hp-404__text {
	margin: 0;
	color: var(--hp-text-muted);
	font-size: var(--hp-text-md);
	line-height: var(--hp-leading-body);
}

/* ---- footer widgets ----
 * register_sidebar wraps each widget in .hp-footer__widget; the column
 * treatment already exists, this gives the wrapper itself a place to stand.
 */

.hp-footer__widget + .hp-footer__widget {
	margin-block-start: var(--hp-space-6);
}

.hp-footer__signup {
	gap: var(--hp-space-4);
}

/* =========================================================================
 * Editorial: a single post, a post archive, search results.
 *
 * These three had no styles at all, because they had no templates — every post
 * and every archive fell through to index.php, which is a fallback. The
 * vocabulary here is deliberately the shop's: the same warm head band the
 * category archive uses, the same card the home news band uses, the same pill
 * as every other control.
 * ========================================================================= */

/* ---- the head band ---- */

.hp-single__head,
.hp-archive-head {
	padding-block: var(--hp-space-12) var(--hp-space-10);
	background: var(--hp-surface-warm);
}

.hp-single__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp-space-2);
	margin-block-end: var(--hp-space-4);
	color: var(--hp-text-muted);
	font-size: var(--hp-text-sm);
}

.hp-single__breadcrumb a {
	transition: color var(--hp-duration-fast) var(--hp-ease);
}

.hp-single__breadcrumb a:hover {
	color: var(--hp-link);
}

.hp-single__title {
	margin: 0;
	font-size: var(--hp-text-h1);
	line-height: var(--hp-leading-tight);
	/* A long Hebrew headline set to the narrow measure reads better with the
	 * lines balanced than with a short orphan on the last one. */
	text-wrap: balance;
}

.hp-single__meta {
	display: flex;
	align-items: center;
	gap: var(--hp-space-2);
	margin-block-start: var(--hp-space-4);
	color: var(--hp-text-muted);
	font-size: var(--hp-text-sm);
}

.hp-single__meta-sep {
	color: var(--hp-border-strong);
}

/* ---- cover ----
 * Wide (the grid measure) while the text below is narrow, so the image reads as
 * the post's opening rather than as an illustration inside a paragraph.
 */

.hp-single__cover {
	margin: 0;
	padding-block: var(--hp-space-10) 0;
}

.hp-single__cover img {
	width: 100%;
	max-height: 32rem;
	object-fit: cover;
	border-radius: var(--hp-radius);
	background: var(--hp-surface-subtle);
}

.hp-single__content {
	padding-block: var(--hp-space-10);
	font-size: var(--hp-text-md);
	line-height: var(--hp-leading-body);
}

/* ---- tags ---- */

.hp-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp-space-2);
	margin: 0 0 var(--hp-space-10);
	padding: 0;
	list-style: none;
}

.hp-tag {
	display: inline-flex;
	align-items: center;
	height: 2rem;
	padding-inline: var(--hp-space-4);
	background: var(--hp-surface-subtle);
	border: 1px solid transparent;
	border-radius: var(--hp-radius-pill);
	color: var(--hp-text-muted);
	font-size: var(--hp-text-sm);
	font-weight: 600;
	transition:
		background-color var(--hp-duration-fast) var(--hp-ease),
		border-color var(--hp-duration-fast) var(--hp-ease),
		color var(--hp-duration-fast) var(--hp-ease);
}

.hp-tag:hover,
.hp-tag:focus-visible {
	background: var(--hp-accent-tint);
	border-color: var(--hp-accent);
	color: var(--hp-link);
}

/* ---- previous / next ---- */

.hp-single__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hp-space-4);
	margin-block-end: var(--hp-space-12);
}

.hp-single__nav-link {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-1);
	padding: var(--hp-space-5);
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	transition:
		border-color var(--hp-duration-fast) var(--hp-ease),
		box-shadow var(--hp-duration) var(--hp-ease-out),
		transform var(--hp-duration) var(--hp-ease-out);
}

.hp-single__nav-link:hover,
.hp-single__nav-link:focus-visible {
	border-color: var(--hp-accent);
	transform: translateY(var(--hp-lift-card));
	box-shadow: var(--hp-shadow-lift);
}

/* The "next" card is the one further along the reading direction, so its text
 * sits against the far edge — the pair reads outward from the centre. */
.hp-single__nav-link--next {
	text-align: end;
}

.hp-single__nav-label {
	color: var(--hp-text-muted);
	font-size: var(--hp-text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hp-single__nav-title {
	font-weight: 600;
	line-height: 1.4;
}

/* A post with only one neighbour must not leave half the row empty. */
.hp-single__nav:has(> :only-child) {
	grid-template-columns: minmax(0, 1fr);
}

.hp-single__related {
	margin-block-start: var(--hp-space-4);
}

/* ---- archive ---- */

.hp-archive-body {
	padding-block: var(--hp-section-space) var(--hp-space-16);
}

/* ---- search results ---- */

.hp-results {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-result__link {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	align-items: center;
	gap: var(--hp-space-5);
	padding: var(--hp-space-4);
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	transition:
		border-color var(--hp-duration-fast) var(--hp-ease),
		box-shadow var(--hp-duration) var(--hp-ease-out),
		transform var(--hp-duration) var(--hp-ease-out);
}

.hp-result__link:hover,
.hp-result__link:focus-visible {
	border-color: var(--hp-accent);
	transform: translateY(var(--hp-lift));
	box-shadow: var(--hp-shadow-lift);
}

.hp-result__media {
	display: block;
	width: 5rem;
	height: 5rem;
	overflow: hidden;
	border-radius: var(--hp-radius);
	background: var(--hp-surface-subtle);
}

.hp-result__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hp-result__body {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-1);
}

.hp-result__kind {
	color: var(--hp-accent);
	font-size: var(--hp-text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hp-result__title {
	font-size: var(--hp-text-md);
	font-weight: 600;
}

.hp-result__excerpt {
	color: var(--hp-text-muted);
	font-size: var(--hp-text-sm);
	line-height: 1.5;
}

/* The standalone search form is the header pill without the header's auto
 * margin, which would otherwise push it off to one side of its container. */
.hp-search--standalone {
	max-width: 26rem;
	margin-inline: auto;
}

@media (max-width: 45rem) {
	.hp-single__title {
		font-size: var(--hp-text-h2);
	}

	.hp-single__nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.hp-single__nav-link--next {
		text-align: start;
	}

	.hp-result__link {
		grid-template-columns: 3.5rem minmax(0, 1fr);
		gap: var(--hp-space-4);
	}

	.hp-result__media {
		width: 3.5rem;
		height: 3.5rem;
	}
}

/* =========================================================================
 * The A–Z brand index — [hairport_brands_az].
 *
 * Replaces the child theme's version, which shipped its own inline <style> on
 * every render. The rail is sticky under the header, because the point of an
 * index of sixty brands is that the letters stay reachable while you scroll
 * past them.
 * ========================================================================= */

.hp-brand-index {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-8);
}

.hp-brand-index__rail {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--hp-z-sticky);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--hp-space-2);
	padding-block: var(--hp-space-4);
	background: var(--hp-surface);
}

/* The rail sits on the page background, so it needs an edge of its own once it
 * is stuck over content — otherwise the tiles slide underneath it invisibly. */
.hp-brand-index__rail::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 1px;
	background: var(--hp-border);
}

/* A letter chip is a single character, so it is square rather than a wide pill
 * with one glyph adrift in the middle. */
.hp-brand-index__rail .hp-chip {
	justify-content: center;
	min-width: 2.375rem;
	padding-inline: var(--hp-space-3);
}

.hp-brand-index__group {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-4);
	/* The sticky rail must not cover the heading a letter link jumps to. */
	scroll-margin-block-start: 5rem;
}

.hp-brand-index__letter {
	margin: 0;
	padding-block-end: var(--hp-space-2);
	border-block-end: 1px solid var(--hp-border);
	color: var(--hp-accent);
	font-family: var(--hp-font-display);
	font-size: var(--hp-text-h3);
	line-height: 1;
}

.hp-brand-index__grid {
	display: grid;
	grid-template-columns: repeat(var(--hp-brand-index-columns, 6), minmax(0, 1fr));
	gap: var(--hp-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-brand-index__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hp-space-2);
	height: 100%;
	padding: var(--hp-space-4);
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	text-align: center;
	transition:
		border-color var(--hp-duration-fast) var(--hp-ease),
		box-shadow var(--hp-duration) var(--hp-ease-out),
		transform var(--hp-duration) var(--hp-ease-out);
}

.hp-brand-index__link:hover,
.hp-brand-index__link:focus-visible {
	border-color: var(--hp-accent);
	transform: translateY(var(--hp-lift-card));
	box-shadow: var(--hp-shadow-lift);
}

.hp-brand-index__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--hp-radius-sm);
	background: var(--hp-surface-subtle);
}

/* A brand mark is a logo, so it is contained rather than cropped — a cover fit
 * would cut the ends off half the wordmarks on the page. */
.hp-brand-index__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var(--hp-duration-slow) var(--hp-ease-out);
}

.hp-brand-index__link:hover .hp-brand-index__thumb img {
	transform: scale(1.05);
}

.hp-brand-index__name {
	color: var(--hp-text);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	transition: color var(--hp-duration-fast) var(--hp-ease);
}

.hp-brand-index__link:hover .hp-brand-index__name {
	color: var(--hp-link);
}

.hp-brand-index__count {
	color: var(--hp-text-muted);
	font-size: var(--hp-text-xs);
	font-variant-numeric: tabular-nums;
}

.hp-brand-index__empty {
	padding-block: var(--hp-space-12);
	text-align: center;
	color: var(--hp-text-muted);
}

@media (max-width: 60rem) {
	.hp-brand-index__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 45rem) {
	.hp-brand-index__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--hp-space-3);
	}

	/* The rail scrolls sideways rather than growing to five wrapped rows and
	 * pushing the first brand off the screen. */
	.hp-brand-index__rail {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.hp-brand-index__rail::-webkit-scrollbar {
		display: none;
	}

	.hp-brand-index__rail .hp-chip {
		flex: none;
	}
}

@media (max-width: 34rem) {
	.hp-brand-index__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================================
 * The editorial news band.
 *
 * Four equal cards said nothing about which post to read. The newest one takes
 * the leading column with its image, date, opening lines and a read link; the
 * three behind it stack beside it as compact rows. The band reads "start here,
 * and there are three more", and it fills its own height instead of leaving a
 * short row floating under a heading.
 * ========================================================================= */

.hp-editorial {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--hp-space-8);
	/* Both columns run the full height of the band and the three rows spread
	 * across it, so the band closes level on both sides rather than leaving a
	 * third of the second column empty under the last row. */
	align-items: stretch;
}

/* ---- the lead ---- */

.hp-post-lead {
	height: 100%;
}

.hp-post-lead__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	transition:
		border-color var(--hp-duration-fast) var(--hp-ease),
		box-shadow var(--hp-duration) var(--hp-ease-out),
		transform var(--hp-duration) var(--hp-ease-out);
}

.hp-post-lead__link:hover,
.hp-post-lead__link:focus-visible {
	border-color: var(--hp-accent);
	transform: translateY(var(--hp-lift-card));
	box-shadow: var(--hp-shadow-lift);
}

.hp-post-lead__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--hp-surface-subtle);
}

.hp-post-lead__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--hp-duration-slow) var(--hp-ease-out);
}

.hp-post-lead__link:hover .hp-post-lead__media img {
	transform: scale(1.04);
}

.hp-post-lead__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--hp-space-3);
	padding: var(--hp-space-6);
}

.hp-post-lead__title {
	font-family: var(--hp-font-display);
	font-size: var(--hp-text-h3);
	font-weight: 700;
	line-height: var(--hp-leading-heading);
	color: var(--hp-text);
	text-wrap: balance;
}

.hp-post-lead__excerpt {
	color: var(--hp-text-muted);
	font-size: var(--hp-text-base);
	line-height: var(--hp-leading-body);
}

/* Pushed to the foot of the card, so the link sits on the same line whatever
 * the excerpt's length. */
.hp-post-lead__more {
	margin-block-start: auto;
	color: var(--hp-link);
	font-size: var(--hp-text-sm);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.3em;
	transition: text-decoration-color var(--hp-duration-fast) var(--hp-ease);
}

.hp-post-lead__link:hover .hp-post-lead__more {
	text-decoration-color: currentColor;
}

/* ---- the three beside it ---- */

.hp-editorial__list {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-3);
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The rows share the lead's height between them rather than being spread apart
 * by it: `space-between` left 150px of nothing between three cards. Growing
 * each row keeps the gap constant and the cards evenly sized. */
.hp-post-row {
	display: flex;
	flex: 1;
}

.hp-post-row__link {
	width: 100%;
}

.hp-post-row__link {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	/* Stretch, not centre: the thumbnail fills the row's height, which is what
	 * keeps the three rows reading as a column of pictures beside the lead
	 * rather than as three labels with a stamp next to each. */
	align-items: stretch;
	gap: var(--hp-space-4);
	padding: var(--hp-space-3);
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	transition:
		border-color var(--hp-duration-fast) var(--hp-ease),
		box-shadow var(--hp-duration) var(--hp-ease-out),
		transform var(--hp-duration) var(--hp-ease-out);
}

.hp-post-row__link:hover,
.hp-post-row__link:focus-visible {
	border-color: var(--hp-accent);
	transform: translateY(var(--hp-lift));
	box-shadow: var(--hp-shadow-lift);
}

.hp-post-row__media {
	display: block;
	width: 7rem;
	min-height: 4.5rem;
	overflow: hidden;
	border-radius: var(--hp-radius-sm);
	background: var(--hp-surface-subtle);
}

.hp-post-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hp-post-row__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--hp-space-1);
	padding-block: var(--hp-space-2);
}

.hp-post-row__title {
	color: var(--hp-text);
	font-size: var(--hp-text-base);
	font-weight: 600;
	line-height: 1.4;
	transition: color var(--hp-duration-fast) var(--hp-ease);
}

.hp-post-row__link:hover .hp-post-row__title {
	color: var(--hp-link);
}

/* ---- placeholders, while the band has no posts yet ---- */

.hp-post-lead.is-placeholder {
	min-height: 22rem;
	border: 1px dashed var(--hp-border-strong);
	border-radius: var(--hp-radius);
	background: var(--hp-surface-subtle);
}

li.hp-post-row.is-placeholder {
	min-height: 6.5rem;
	border: 1px dashed var(--hp-border-strong);
	border-radius: var(--hp-radius);
	background: var(--hp-surface-subtle);
}

/* Below this the lead and the rows are one column: side by side, the lead's
 * image would be too small to be worth the space it takes. */
@media (max-width: 60rem) {
	.hp-editorial {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hp-space-5);
	}

	.hp-post-lead__title {
		font-size: var(--hp-text-md);
	}
}

@media (max-width: 34rem) {
	.hp-post-row__link {
		grid-template-columns: 5rem minmax(0, 1fr);
	}

	.hp-post-row__media {
		width: 5rem;
	}
}

/* An editor-only explanation on a page that renders blank. Marked out clearly
 * so it is never mistaken for content — it is a message about the page, not on
 * it. Visitors never see this; they get .hp-empty. */
.hp-notice {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hp-space-4);
	margin-block: var(--hp-space-8);
	padding: var(--hp-space-6);
	background: var(--hp-club-tint);
	border: 1px dashed var(--hp-club);
	border-radius: var(--hp-radius);
	color: var(--hp-text);
	font-size: var(--hp-text-base);
	line-height: var(--hp-leading-body);
}

.hp-notice p {
	margin: 0;
}

.hp-empty a {
	color: var(--hp-link);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ---- the shop widget area ----
 * Empty by default; see sidebar.php. Styled so that a widget dropped into it
 * lands in a real band rather than loose under the pagination.
 */

.hp-shop-widgets {
	border-block-start: 1px solid var(--hp-border);
	margin-block-start: var(--hp-space-12);
}

.hp-shop-widgets__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--hp-space-8);
	padding-block: var(--hp-space-10);
}

.hp-shop-widget__title {
	margin: 0 0 var(--hp-space-3);
	font-family: var(--hp-font-ui);
	font-size: var(--hp-text-base);
	font-weight: 700;
}

.hp-shop-widget ul {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.hp-shop-widget a {
	color: var(--hp-text-muted);
	transition: color var(--hp-duration-fast) var(--hp-ease);
}

.hp-shop-widget a:hover {
	color: var(--hp-link);
}

/* ---- restored listing pages ----
 *
 * "מוצרים א-ת", "Popular", "Newest" and "On A Sale" — the four Elementor pages
 * the theme now renders itself. See inc/class-listing.php.
 *
 * There is almost nothing here, and that is the point: the body of each page is
 * WooCommerce's own product loop, so it arrives already styled by 80-commerce.css
 * and it is the same card the shop archive prints. Only the page's own furniture
 * needs describing.
 */

.hp-listing {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-6);
	padding-block-end: var(--hp-space-12);
}

.hp-listing__intro {
	max-width: 52ch;
	margin: 0;
	color: var(--hp-text-muted);
	font-size: var(--hp-text-md);
	line-height: var(--hp-leading-body);
}

.hp-listing__empty {
	margin: 0;
	padding-block: var(--hp-space-14);
	text-align: center;
	color: var(--hp-text-muted);
	font-size: var(--hp-text-md);
}

/* ---- the letter rail ----
 * Forty-odd single-character targets. They are square-ish rather than pill-wide
 * so the row reads as an index, and they are all the same width whatever the
 * letter, so the rail does not jitter between Hebrew and Latin.
 */

.hp-letter-rail {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp-space-2);
	padding-block-end: var(--hp-space-2);
}

.hp-letter-rail__letter {
	justify-content: center;
	min-width: 2.75rem;
	padding-inline: var(--hp-space-3);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 45rem) {
	/* Scrolls rather than wrapping to five rows and pushing the products off
	 * the first screen — the same treatment the brand index's rail gets. */
	.hp-letter-rail {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: calc(var(--hp-space-4) * -1);
		padding-inline: var(--hp-space-4);
		scrollbar-width: none;
	}

	.hp-letter-rail::-webkit-scrollbar {
		display: none;
	}

	.hp-letter-rail__letter {
		flex: none;
	}
}

/* ---- a page the theme fills with a catalogue ----
 *
 * The brand index and the four restored listing pages. They are pages, so they
 * arrive through page.php, but they are not prose: `.hp-page__content` sets a
 * 50rem reading measure with no centring, which laid a grid of product cards
 * 800px wide inside a 1248px container and pinned it to the reading edge —
 * narrow, and leaning, which is exactly how it looked.
 *
 * page.php adds this class only when a component has claimed the page, so an
 * ordinary page keeps its measure.
 */

.hp-page--catalogue .hp-page__content {
	max-width: none;
	font-size: var(--hp-text-base);
}

/* The head is centred over the grid rather than set at the reading edge: with
 * the full width in play, a title against one edge of a 1408px band reads as
 * misaligned rather than as a start. */
.hp-page--catalogue .hp-page__title {
	text-align: center;
}

.hp-page--catalogue .hp-listing__intro {
	margin-inline: auto;
	text-align: center;
}

.hp-page--catalogue .hp-letter-rail,
.hp-page--catalogue .hp-brand-index__rail {
	justify-content: center;
}

/* ---- the contact PAGE ----
 *
 * `.hp-contact-page`, not `.hp-contact`: the home page's closing band already
 * owns that name, and it sets `align-items: center` on a flex column. Reusing it
 * here shrank the layout grid to 702px and the branch grid to 326px inside a
 * 1376px container, centred — the same class collision that `.hp-brands` caused
 * against the home page's brand strip earlier in this rebuild.
 *
 *
 * Two bands: how to reach the shop beside the message form, then the branches.
 *
 * The old page put the phone and the email inside each of four branch blocks,
 * which meant a visitor read the same number four times and had to hunt for the
 * street — the one thing that actually differed. Here the number and the address
 * are said once, at the top, at a size that matches how often they are wanted,
 * and each branch card leads with its street.
 */

.hp-contact-page {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-10);
	padding-block-end: var(--hp-space-12);
}

.hp-contact-page__intro {
	max-width: 46ch;
	margin: 0;
	font-size: var(--hp-text-md);
	line-height: var(--hp-leading-body);
	color: var(--hp-text-muted);
}

.hp-contact-page__layout {
	display: grid;
	grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
	gap: var(--hp-space-10);
	align-items: start;
}

.hp-contact-page__heading {
	margin: 0 0 var(--hp-space-5);
	font-size: var(--hp-text-h2);
}

/* ---- how to reach us ---- */

.hp-contact-page__reach {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-3);
}

/* Each line is the whole target, not just the number inside it — a phone number
 * on a phone should be a thumb-sized thing to tap, not a 14px string. */
.hp-contact-page__line {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-1);
	padding: var(--hp-space-4) var(--hp-space-5);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	background: var(--hp-surface);
	color: var(--hp-text);
	transition:
		border-color var(--hp-duration-fast) var(--hp-ease),
		box-shadow var(--hp-duration) var(--hp-ease-out),
		transform var(--hp-duration) var(--hp-ease-out);
}

a.hp-contact-page__line:hover,
a.hp-contact-page__line:focus-visible {
	border-color: var(--hp-accent);
	transform: translateY(var(--hp-lift));
	box-shadow: var(--hp-shadow-lift);
}

.hp-contact-page__line--static {
	background: var(--hp-surface-warm);
}

.hp-contact-page__line-label {
	font-size: var(--hp-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hp-text-muted);
}

.hp-contact-page__line-value {
	font-size: var(--hp-text-lg);
	font-weight: 700;
	/* The number reads left-to-right even here, and tabular figures stop it
	 * shifting between the branch cards and this line. */
	font-variant-numeric: tabular-nums;
}

.hp-contact-page__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp-space-2);
	margin-block-start: var(--hp-space-2);
}

.hp-contact-page__social-link {
	padding: var(--hp-space-2) var(--hp-space-4);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-pill);
	font-size: var(--hp-text-sm);
	font-weight: 600;
	color: var(--hp-text);
	transition:
		border-color var(--hp-duration-fast) var(--hp-ease),
		background-color var(--hp-duration-fast) var(--hp-ease);
}

.hp-contact-page__social-link:hover {
	border-color: var(--hp-accent);
	background: var(--hp-accent-tint);
	color: var(--hp-link);
}

/* ---- the form ----
 * Contact Form 7's markup, styled by element rather than by a class this theme
 * does not own — the same approach the footer's newsletter block takes.
 */

.hp-contact-page__form {
	padding: var(--hp-space-8);
	background: var(--hp-surface-warm);
	border-radius: var(--hp-radius-lg);
}

.hp-contact-page__form p {
	margin: 0 0 var(--hp-space-4);
}

.hp-contact-page__form label {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-2);
	font-size: var(--hp-text-sm);
	font-weight: 600;
}

.hp-contact-page__form input[type="text"],
.hp-contact-page__form input[type="email"],
.hp-contact-page__form input[type="tel"],
.hp-contact-page__form textarea {
	width: 100%;
	padding: var(--hp-space-3) var(--hp-space-4);
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	font-family: inherit;
	font-size: var(--hp-text-base);
	color: var(--hp-text);
}

.hp-contact-page__form textarea {
	min-height: 9rem;
	resize: vertical;
}

.hp-contact-page__form input:focus,
.hp-contact-page__form textarea:focus {
	outline: none;
	border-color: var(--hp-accent);
	box-shadow: var(--hp-shadow-focus);
}

.hp-contact-page__form input[type="submit"] {
	height: var(--hp-control-height);
	padding-inline: var(--hp-space-8);
	background-color: var(--hp-brand);
	background-image: var(--hp-gloss);
	border: none;
	border-radius: var(--hp-radius-pill);
	color: var(--hp-text-inverse);
	font-family: var(--hp-font-ui);
	font-size: var(--hp-text-base);
	font-weight: 700;
	cursor: pointer;
	transition:
		background-color var(--hp-duration-fast) var(--hp-ease),
		box-shadow var(--hp-duration) var(--hp-ease-out),
		transform var(--hp-duration) var(--hp-ease-out);
}

.hp-contact-page__form input[type="submit"]:hover {
	background-color: var(--hp-brand-hover);
	transform: translateY(var(--hp-lift));
	box-shadow: var(--hp-shadow-lift);
}

/* ---- branches ---- */

.hp-contact-page__branches {
	display: grid;
	/* The count comes from the markup, which knows how many branches there are.
	 * Neither `auto-` keyword is right here: auto-fill keeps the empty tracks it
	 * creates, and auto-fit collapses them to zero but still charges their gap,
	 * so four branches in a container sized for five came up one gap short and
	 * the row no longer met its own edge. */
	grid-template-columns: repeat(var(--hp-branch-columns, 4), minmax(0, 1fr));
	gap: var(--hp-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-contact-page__branch {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-lg);
	transition:
		border-color var(--hp-duration-fast) var(--hp-ease),
		box-shadow var(--hp-duration) var(--hp-ease-out),
		transform var(--hp-duration) var(--hp-ease-out);
}

.hp-contact-page__branch:hover,
.hp-contact-page__branch:focus-within {
	border-color: var(--hp-border-strong);
	transform: translateY(var(--hp-lift-card));
	box-shadow: var(--hp-shadow-lift);
}

.hp-contact-page__map {
	aspect-ratio: 3 / 2;
	background: var(--hp-surface-subtle);
}

.hp-contact-page__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* A branch with no address yet keeps the frame so the row stays even, but
 * carries no map — there is nowhere to point at. */
.hp-contact-page__map--none {
	background:
		repeating-linear-gradient(
			45deg,
			var(--hp-surface-subtle) 0 10px,
			var(--hp-surface-warm) 10px 20px
		);
}

.hp-contact-page__branch-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hp-space-2);
	padding: var(--hp-space-5);
}

.hp-contact-page__branch-name {
	margin: 0;
	font-family: var(--hp-font-ui);
	font-size: var(--hp-text-md);
	font-weight: 700;
}

.hp-contact-page__branch-address {
	margin: 0;
	color: var(--hp-text-muted);
	font-size: var(--hp-text-sm);
	line-height: 1.5;
}

.hp-contact-page__branch-phone {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--hp-text);
}

.hp-contact-page__branch-phone:hover {
	color: var(--hp-link);
}

.hp-contact-page__branch-directions {
	margin-block-start: var(--hp-space-1);
	font-size: var(--hp-text-sm);
	font-weight: 600;
	color: var(--hp-link);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.3em;
	transition: text-decoration-color var(--hp-duration-fast) var(--hp-ease);
}

.hp-contact-page__branch-directions:hover {
	text-decoration-color: currentColor;
}

.hp-contact-page__branch--soon {
	background: var(--hp-surface-warm);
}

@media (max-width: 60rem) {
	.hp-contact-page__layout {
		grid-template-columns: 1fr;
	}

	.hp-contact-page__branches {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 34rem) {
	.hp-contact-page__branches {
		grid-template-columns: 1fr;
	}
}

/* ---- the category index ----
 *
 * A page listing every section of the shop with its own children under it —
 * inc/class-listing.php, mode "categories". It is the destination the home
 * page's category row points at, and the counterpart to the brand index.
 */

.hp-cat-index {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--hp-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-cat-index__group {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-3);
	padding: var(--hp-space-6);
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-lg);
	transition:
		border-color var(--hp-duration-fast) var(--hp-ease),
		box-shadow var(--hp-duration) var(--hp-ease-out),
		transform var(--hp-duration) var(--hp-ease-out);
}

.hp-cat-index__group:hover,
.hp-cat-index__group:focus-within {
	border-color: var(--hp-border-strong);
	transform: translateY(var(--hp-lift-card));
	box-shadow: var(--hp-shadow-lift);
}

.hp-cat-index__title {
	display: flex;
	align-items: baseline;
	gap: var(--hp-space-2);
	color: var(--hp-text);
	font-family: var(--hp-font-ui);
	font-size: var(--hp-text-md);
	font-weight: 700;
	line-height: 1.3;
}

.hp-cat-index__title:hover {
	color: var(--hp-link);
}

/* The count is information, not emphasis: it tells a shopper whether a section
 * is worth opening and should never compete with the name that labels it. */
.hp-cat-index__count {
	color: var(--hp-text-muted);
	font-size: var(--hp-text-xs);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.hp-cat-index__links {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-cat-index__links a {
	display: flex;
	align-items: baseline;
	gap: var(--hp-space-2);
	color: var(--hp-text-muted);
	font-size: var(--hp-text-sm);
	line-height: 1.45;
	transition:
		color var(--hp-duration-fast) var(--hp-ease),
		translate var(--hp-duration) var(--hp-ease-out);
}

.hp-cat-index__links a:hover,
.hp-cat-index__links a:focus-visible {
	color: var(--hp-link);
	translate: 3px 0;
}

[dir="rtl"] .hp-cat-index__links a:hover,
[dir="rtl"] .hp-cat-index__links a:focus-visible {
	translate: -3px 0;
}