/*
 * TileMode mega menu.
 * Desktop only: Woodmart hides the header-bottom row on mobile and uses the
 * "mobile-menu" location in the slide-in drawer, which tilemode.css restyles.
 *
 * The panel anchors to the header row, so the row is made the positioning
 * context. Compact panels anchor to their own item instead.
 */

.whb-row:has(.tm-nav) {
	position: relative;
}

.tm-nav {
	--tm-nav-gap: clamp(22px, 2.4vw, 44px);
	display: block;
}

.tm-nav :is(ul, ol) {
	--list-mb: 0;
	--li-mb: 0;
	--li-pl: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tm-nav li {
	margin: 0;
}

.tm-nav__list {
	display: flex;
	align-items: stretch;
	gap: var(--tm-nav-gap);
}

.tm-nav__item {
	position: static;
	display: flex;
	align-items: center;
}

.tm-nav__item--compact {
	position: relative;
}

/* ---- Top-level triggers ------------------------------------------------ */

/* Woodmart styles every <button> (including :hover). Match its specificity
   so the triggers stay flat and text-only in every state. */
.tm-nav .tm-nav__link,
.tm-nav .tm-nav__toggle,
.tm-nav .tm-nav__link:is(:hover, :focus, :active),
.tm-nav .tm-nav__toggle:is(:hover, :focus, :active) {
	border: 0;
	background: none;
	box-shadow: none;
	text-transform: none;
}

.tm-nav .tm-nav__link:is(:hover, :focus, :active) {
	color: var(--tm-ink);
}

.tm-nav .tm-nav__toggle:is(:hover, :focus, :active) {
	color: var(--tm-ink);
}

.tm-nav .tm-nav__item--sale > .tm-nav__link,
.tm-nav .tm-nav__item--sale > .tm-nav__link:is(:hover, :focus, :active) {
	color: var(--tm-red);
}

.tm-nav__link,
.tm-nav__toggle {
	appearance: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}

.tm-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: var(--wd-header-bottom-h, 52px);
	padding: 0;
	color: var(--tm-ink);
	font-family: var(--tm-font);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
}

/* The underline is the only decoration, and it says where you are. */
.tm-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--tm-red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease;
}

.tm-nav__item:is(:hover, .is-open, .is-current) > .tm-nav__link::after {
	transform: scaleX(1);
}

.tm-nav__item.is-current > .tm-nav__link::after {
	background: var(--tm-ink);
}

.tm-nav__item.is-open > .tm-nav__link::after,
.tm-nav__item:hover > .tm-nav__link::after {
	background: var(--tm-red);
}

.tm-nav__link:hover,
.tm-nav__link:focus-visible {
	color: var(--tm-ink);
}

.tm-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	width: 22px;
	min-height: 0;
	margin-inline-start: -2px;
	padding: 0;
	color: var(--tm-muted);
}

.tm-nav__toggle:hover {
	color: var(--tm-ink);
	background: none;
}

.tm-nav__chev {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.tm-nav__item.is-open :is(.tm-nav__chev) {
	transform: rotate(180deg);
}

.tm-nav__link--button {
	gap: 7px;
}

.tm-nav__link--button .tm-nav__chev {
	color: var(--tm-muted);
}

.tm-nav__item--sale > .tm-nav__link {
	color: var(--tm-red);
	font-weight: 600;
}

.tm-nav :is(a, button):focus-visible {
	outline: 2px solid var(--tm-red);
	outline-offset: 3px;
}

/* ---- Panels ------------------------------------------------------------ */

.tm-panel {
	position: absolute;
	top: 100%;
	z-index: 390;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	background: #fff;
	border-top: 1px solid var(--tm-grout);
	box-shadow: var(--tm-shadow-panel);
	text-align: start;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.tm-panel--mega {
	inset-inline: 0;
	max-height: min(78vh, 680px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.tm-panel--compact {
	inset-inline-start: -24px;
	min-width: 280px;
	border: 1px solid var(--tm-grout);
	border-top-color: transparent;
}

.tm-nav__item.is-open > .tm-panel,
html:not(.tm-js) .tm-nav__item:is(:hover, :focus-within) > .tm-panel {
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition-delay: 0s;
}

.tm-panel__inner {
	display: flex;
	align-items: stretch;
	max-width: var(--wd-container-w, 1222px);
	margin-inline: auto;
	padding: 34px 15px 32px;
}

.tm-panel--compact .tm-panel__inner {
	padding: 24px 24px 22px;
}

/* ---- Columns ----------------------------------------------------------- */

.tm-col {
	flex: 1 1 0;
	min-width: 0;
	padding-inline: 28px;
	border-inline-start: 1px solid var(--tm-grout);
}

.tm-col:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.tm-col:last-child {
	padding-inline-end: 0;
}

.tm-col--feature {
	flex: 0 0 248px;
}

.tm-panel--compact .tm-col {
	padding-inline: 0;
	border: 0;
}

.tm-col__title {
	margin: 0 0 14px;
	color: var(--tm-ink);
	font-family: var(--tm-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.tm-list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
	color: var(--tm-ink);
	font-family: var(--tm-font);
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.15s ease;
}

.tm-list a:hover,
.tm-list a:focus-visible {
	color: var(--tm-red);
}

.tm-list__count {
	flex: 0 0 auto;
	color: var(--tm-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.tm-list--cols-2 {
	column-count: 2;
	column-gap: 28px;
}

.tm-list--cols-3 {
	column-count: 3;
	column-gap: 28px;
}

.tm-list--cols-4 {
	column-count: 4;
	column-gap: 36px;
}

.tm-list--cols-2 li,
.tm-list--cols-3 li,
.tm-list--cols-4 li {
	break-inside: avoid;
}

.tm-list--cols-2 a,
.tm-list--cols-3 a,
.tm-list--cols-4 a {
	justify-content: flex-start;
	gap: 10px;
}

.tm-col__all {
	display: inline-block;
	margin-top: 10px;
	color: var(--tm-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Color swatches ---------------------------------------------------- */

.tm-swatches {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
}

.tm-swatch {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--tm-ink);
	font-family: var(--tm-font);
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
}

.tm-swatch:hover,
.tm-swatch:focus-visible {
	color: var(--tm-red);
}

/* Square chips, because tile is square. */
.tm-swatch__chip {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background: var(--tm-swatch, var(--tm-porcelain));
	box-shadow: inset 0 0 0 1px rgba(31, 35, 38, 0.18);
	transition: transform 0.15s ease;
}

.tm-swatch:hover .tm-swatch__chip {
	transform: scale(1.12);
}

.tm-swatch__chip--multi {
	background: conic-gradient(#c62127, #d8c8a9, #5f86a8, #7d9373, #c62127);
}

/* ---- Photo tiles ------------------------------------------------------- */

.tm-panel .tm-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 128px));
	gap: 20px 18px;
}

.tm-panel .tm-tile {
	display: block;
	color: var(--tm-ink);
	text-decoration: none;
}

/* Small square thumbnails. The photo is zoomed in (--tm-zoom, set from the
   config) so a product shot shows only the tile surface, no white border. */
.tm-panel .tm-tile__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--tm-porcelain);
}

.tm-panel .tm-tile__media img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transform: scale(var(--tm-zoom, 1));
	transition: transform 0.35s ease;
}

.tm-panel .tm-tile:hover .tm-tile__media img,
.tm-panel .tm-tile:focus-visible .tm-tile__media img {
	transform: scale(calc(var(--tm-zoom, 1) * 1.06));
}

.tm-panel .tm-tile__name {
	display: block;
	margin-top: 8px;
	font-family: var(--tm-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

.tm-panel .tm-tile:hover .tm-tile__name {
	color: var(--tm-red);
}

/* ---- Feature card ------------------------------------------------------ */

.tm-feature {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--tm-ink);
	text-decoration: none;
}

.tm-feature__media {
	display: block;
	aspect-ratio: 1 / 1;
	margin-bottom: 8px;
	overflow: hidden;
	background: var(--tm-porcelain);
}

.tm-feature__media img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.tm-feature:hover .tm-feature__media img,
.tm-feature:focus-visible .tm-feature__media img {
	transform: scale(1.04);
}

.tm-feature__label {
	color: var(--tm-muted);
	font-size: 13px;
}

.tm-feature__name {
	font-family: var(--tm-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}

.tm-feature__cta {
	margin-top: 2px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tm-feature:hover .tm-feature__cta {
	color: var(--tm-red);
}

/* ---- Footer row -------------------------------------------------------- */

.tm-panel__foot {
	background: var(--tm-porcelain);
	border-top: 1px solid var(--tm-grout);
}

.tm-panel__foot-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	max-width: var(--wd-container-w, 1222px);
	margin-inline: auto;
	padding: 14px 15px;
}

.tm-panel__foot a {
	color: var(--tm-ink);
	font-family: var(--tm-font);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tm-panel__foot a:hover {
	color: var(--tm-red);
}

/* ---- Page scrim -------------------------------------------------------- */

.tm-scrim {
	position: fixed;
	inset: 0;
	z-index: 380;
	background: rgba(31, 35, 38, 0.3);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.tm-scrim.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

/* ---- Narrower desktops ------------------------------------------------- */

@media (max-width: 1199px) {
	.tm-col {
		padding-inline: 18px;
	}

	.tm-col--feature {
		flex-basis: 200px;
	}

	.tm-list--cols-4 {
		column-count: 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tm-panel,
	.tm-scrim,
	.tm-nav__link::after,
	.tm-nav__chev,
	.tm-panel .tm-tile__media img,
	.tm-feature__media img,
	.tm-swatch__chip {
		transition: none;
	}
}

@media (max-width: 1024px) {
	.tm-scrim {
		display: none;
	}
}