/* Tile Nav — horizontal-scroll row of category photo tiles (design.md §tile-nav).
   Tiles link to product_cat archives. */

.tt-tile-nav {
	padding-block: 0 0;
	background-color: var(--wp--preset--color--ink, #141412);
}

/* The 5th tile is cut in half at the right edge — that half-tile is the
   design's affordance that the row keeps going, so it has to hold at EVERY
   viewport width, not just the 1728px canvas. Fixed 380px tiles only produce it
   at 1728; wider screens fit all five and clip the 6th instead. So the tile
   width is solved from the viewport: 4 full tiles + 4 gaps + half a tile fill
   the row, i.e. 4w + 8 + w/2 = 100% → w = (100% - 8px) / 4.5. That resolves to
   382px at 1728 (Figma: 380, node 61:7) and keeps the half-tile everywhere else.
   Percent, not vw, so the vertical scrollbar isn't counted in the width. */
.tt-tile-nav__row {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	overscroll-behavior-x: contain;   /* don't trigger browser back-swipe */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.tt-tile-nav__row::-webkit-scrollbar {
	display: none;
}

/* Drag-to-pan (tile-nav.js). The class is added by JS, so the grab cursor
   never appears without the behaviour behind it. */
.tt-tile-nav__row--draggable {
	cursor: grab;
}

.tt-tile-nav__row.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/* Hover zoom would fight the pan and flicker as tiles pass the cursor. */
.tt-tile-nav__row.is-dragging .tt-tile-nav__photo {
	transition: none;
}

.tt-tile-nav__tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 calc((100% - 8px) / 4.5);
	height: 450px;    /* fixed, per design — only the width tracks the viewport */
	overflow: hidden;
	text-decoration: none !important;
}

.tt-tile-nav__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease-in-out;
}

.tt-tile-nav__tile:hover .tt-tile-nav__photo {
	transform: scale(1.05);
}

.tt-tile-nav__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.42);
	transition: background-color 0.2s ease;
}

.tt-tile-nav__tile:hover .tt-tile-nav__overlay {
	background: rgba(0, 0, 0, 0.28);
}

.tt-tile-nav__label {
	position: relative;
	z-index: 1;
	max-width: 320px;
	margin: 0;
	padding-inline: 16px;
	font-family: var(--wp--preset--font-family--oswald, "Oswald", sans-serif) !important;
	font-weight: 600 !important;
	font-size: 28px;
	line-height: 1.05;
	text-align: center;
	text-transform: uppercase;
	color: #fff !important;
}

.tt-tile-nav__label::after {
	content: "";
	display: block;
	width: 70px;
	height: 2px;
	margin: 16px auto 0;
	background: var(--wp--preset--color--red, #cf2026);
}

/* WP block-gap adds `margin-block-start: 24px` to the scroll row (it is a
   non-first child of the section group), which silently widened the space above
   the SCROLL label by 24px and made it lopsided against the space below. */
.tt-tile-nav > * {
	margin-block: 0 !important;
}

/* Scroll indicator. Desktop clearance is asymmetric in the design — the tile row
   ends at 2643, the graphic sits 2673..2690 and the section ends 2743, i.e.
   30 above / 53 below (node 52:67). Mobile is even: 20 / 21 (node 4:501). */
.tt-tile-nav__scroll {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding-block: 30px 53px;
	color: #fff;
}

.tt-tile-nav__scroll-label {
	font-family: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", sans-serif);
	font-size: 12px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.tt-tile-nav__scroll-arrow {
	width: 40px;
	height: 8px;
}

/* ---- Mobile (≤767px) ----------------------------------------------------- */
@media (max-width: 767px) {
	.tt-tile-nav__tile {
		flex-basis: 300px;
		width: 300px;
		height: 400px;
	}

	.tt-tile-nav__label {
		font-size: 24px;
	}

	.tt-tile-nav__scroll {
		padding-block: 20px 21px;
	}
}