/* wwh/home-shop — category tiles + product slider + "New in" strip (core 2.81.0).
   Section background, head and head link are shared with the theme
   (home-shop.css); this file owns the rail, the tiles, the arrows and the strip.

   The home page scrolls one section per step, so this section has to fit one
   viewport. Tile height therefore comes from the viewport (--wwh-hs-tile),
   split across the rows of a page: two on desktop, three on phones. */

.home2-section.home2-section--shop {
	--wwh-hs-gap: clamp(0.75rem, 1.6vw, 1.25rem);
	--wwh-hs-tile: clamp(110px, calc((100vh - var(--wp-admin--admin-bar--height, 0px) - 450px) / 2), 360px);
	/* The site header (~104px) floats over every home section. The taller head
	   (link + arrows) reached under it with the theme's symmetric padding, so
	   the top padding clears the header and the bottom gives the space back. */
	padding-top: 7rem;
	padding-bottom: clamp(2rem, 6vh, 4rem);
}

@media (max-width: 700px) {
	.home2-section.home2-section--shop {
		--wwh-hs-tile: clamp(100px, calc((100vh - var(--wp-admin--admin-bar--height, 0px) - 540px) / 3), 200px);
		padding-top: 5.75rem;
	}
}

/* ---------- Head: link and arrows on one row ---------- */
.wwh-hs__head {
	align-items: flex-end;
}

.wwh-hs__aside {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.25rem;
	flex-shrink: 0;
}

.wwh-hs__arrows {
	display: flex;
	gap: 0.5rem;
}

.wwh-hs__arrows[hidden] {
	display: none;
}

.wwh-hs__arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(26, 22, 19, 0.4);
	background: transparent;
	color: #1a1613;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0 0 2px;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.wwh-hs__arrow:hover:not(:disabled),
.wwh-hs__arrow:focus-visible {
	background: #1a1613;
	color: #f2efea;
}

.wwh-hs__arrow:focus-visible {
	outline: 2px solid #8f632f;
	outline-offset: 3px;
}

.wwh-hs__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

@media (max-width: 700px) {
	/* The theme stacks the split head on phones; the row spans the width there. */
	.wwh-hs__aside {
		justify-content: space-between;
		gap: 0.75rem;
		width: 100%;
	}
	/* "Browse the whole shop ›" at full tracking pushed the next arrow off a
	   390px screen. Tighter tracking, and let it wrap rather than clip. */
	.wwh-hs__aside .home2-section__head-link {
		letter-spacing: 0.08em;
		white-space: normal;
		min-width: 0;
	}
	.wwh-hs__arrows {
		flex-shrink: 0;
	}
}

/* ---------- Rail: one page (six tiles) per step ---------- */
.wwh-hs__rail {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
}

.wwh-hs__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: var(--wwh-hs-gap);
	list-style: none;
	/* Room for focus rings, which overflow-x would otherwise clip. */
	padding: 4px;
	margin: -4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 4px;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.wwh-hs__track::-webkit-scrollbar {
	display: none;
}

.wwh-hs__page {
	scroll-snap-align: start;
	min-width: 0;
	margin: 0;
}

.wwh-hs__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: var(--wwh-hs-tile);
	gap: var(--wwh-hs-gap);
}

@media (max-width: 700px) {
	.wwh-hs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.wwh-hs__track {
		scroll-behavior: auto;
	}
}

/* ---------- Tile (categories and products share it) ---------- */
.wwh-hs__tile {
	/* The body is in normal flow, pinned to the bottom by flex, so the title
	   link's ::after overlay resolves against the TILE and the whole panel is
	   clickable. (With the body absolutely positioned, the overlay was trapped
	   inside the scrim and only the bottom band took clicks.) isolation gives
	   the photo's z-index: -1 a floor, so it sits above the tile background
	   and below the text. */
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	margin: 0;
	background: #18140f;
	color: #fff;
	cursor: pointer;
}

.wwh-hs__img {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.wwh-hs__tile:hover .wwh-hs__img {
	transform: scale(1.04);
}

.wwh-hs__tile--sold-out .wwh-hs__img {
	filter: grayscale(0.6);
	opacity: 0.75;
}

/* The scrim sits behind the text only, so the photo reads clean above it. White
   text on the scrim's dark end is well over 4.5:1 whatever the photo holds. */
.wwh-hs__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 2.75rem 1rem 0.9rem;
	background: linear-gradient(to top, rgba(24, 20, 15, 0.9) 0%, rgba(24, 20, 15, 0.7) 45%, rgba(24, 20, 15, 0) 100%);
}

.wwh-hs__title {
	color: #fff;
	font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.2rem, 2.2vw, 1.8rem);
	line-height: 1.1;
	text-decoration: none;
}

.wwh-hs__tile--product .wwh-hs__title {
	font-size: clamp(1.05rem, 1.7vw, 1.4rem);
}

/* The whole tile is the link's hit area. */
.wwh-hs__title::after {
	content: '';
	position: absolute;
	inset: 0;
}

.wwh-hs__tile .wwh-hs__title,
.wwh-hs__tile .wwh-hs__title:hover,
.wwh-hs__tile .wwh-hs__title:focus-visible {
	/* Two classes on purpose: the theme's global link hover,
	   `:root :where(a:hover)`, has the same specificity as one class and loads
	   later, so it turned these titles #5a544d on the dark scrim. */
	color: #fff;
}

.wwh-hs__tile:hover .wwh-hs__title,
.wwh-hs__title:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wwh-hs__title:focus-visible {
	outline: none;
}

.wwh-hs__tile:focus-within {
	outline: 2px solid #8f632f;
	outline-offset: 3px;
}

.wwh-hs__sub {
	color: rgba(255, 255, 255, 0.88);
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: var(--wp--preset--font-size--cap);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wwh-hs__tile--product .wwh-hs__sub {
	letter-spacing: 0.04em;
	text-transform: none;
	font-size: 0.8rem;
}

.wwh-hs__flag {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.25rem 0.6rem;
	background: #f2efea;
	color: #1a1613;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

@media (max-width: 700px) {
	.wwh-hs__body {
		padding: 2rem 0.7rem 0.6rem;
	}
}

/* ---------- "New in" strip ---------- */
.wwh-hs__new {
	width: 100%;
	max-width: 1080px;
	margin: clamp(1.25rem, 3.5vh, 2.25rem) auto 0;
	padding-top: clamp(0.9rem, 2vh, 1.25rem);
	border-top: 1px solid rgba(26, 22, 19, 0.18);
	display: flex;
	align-items: center;
	gap: 1rem 2rem;
}

.wwh-hs__new-lead {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
}

.wwh-hs__new-toggle {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid rgba(26, 22, 19, 0.35);
	background: transparent;
	color: #1a1613;
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0;
}

.wwh-hs__new-toggle[hidden] {
	display: none;
}

/* Pause bars while playing; a play triangle once paused. */
.wwh-hs__new-toggle span {
	width: 8px;
	height: 10px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.wwh-hs__new-toggle[aria-pressed="true"] span {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 9px;
	border-color: transparent transparent transparent currentColor;
	margin-left: 2px;
}

.wwh-hs__new-toggle:hover,
.wwh-hs__new-toggle:focus-visible {
	background: #1a1613;
	color: #f2efea;
}

.wwh-hs__new-toggle:focus-visible {
	outline: 2px solid #8f632f;
	outline-offset: 3px;
}

.wwh-hs__new-h {
	margin: 0;
	flex-shrink: 0;
	color: #8f632f;
	font-style: normal;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: var(--wp--preset--font-size--cap);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
}

.wwh-hs__new-list {
	list-style: none;
	flex: 1;
	min-width: 0;
	/* Four at a time; the rest wait to the right for view.js (or a swipe). */
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--wwh-hs-gap)) / 4);
	gap: var(--wwh-hs-gap);
	/* Room for focus rings, which overflow-x would otherwise clip. */
	padding: 4px;
	margin: -4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 4px;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.wwh-hs__new-list::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.wwh-hs__new-list {
		scroll-behavior: auto;
	}
}

.wwh-hs__new-item {
	scroll-snap-align: start;
	position: relative;
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 0.75rem;
	align-items: center;
	margin: 0;
	min-width: 0;
}

.wwh-hs__new-img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	background: #e9e4db;
}

.wwh-hs__new-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wwh-hs__new-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wwh-hs__new-title {
	color: #1a1613;
	font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 1.1rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The whole row is the link's hit area. */
.wwh-hs__new-title::after {
	content: '';
	position: absolute;
	inset: 0;
}

.wwh-hs__new-item .wwh-hs__new-title:hover,
.wwh-hs__new-item .wwh-hs__new-title:focus-visible {
	color: #1a1613;
}

.wwh-hs__new-title:hover,
.wwh-hs__new-title:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wwh-hs__new-price {
	margin-top: 0.15rem;
	color: #5a544d;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}

@media (max-width: 900px) {
	/* Four columns get too narrow for the titles; swipe them instead. */
	.wwh-hs__new {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}
	.wwh-hs__new-list {
		grid-auto-columns: minmax(200px, 62%);
	}
}