/*
 * DCG mobile navigation
 *
 * The unenhanced state is deliberately plain, linked, and in document flow.
 * JavaScript adds .dcg-menu-enhanced before it turns this into an overlay.
 */

.dcg-mobile-menu {
	display: none;
}

@media (max-width: 991px) {
	.dcg-mobile-menu {
		display: block;
		box-sizing: border-box;
		margin: 24px 0 0;
		padding: 24px 18px;
		background: #f7f6f2;
		color: #172235;
	}

	.dcg-mobile-menu *,
	.dcg-mobile-menu *::before,
	.dcg-mobile-menu *::after {
		box-sizing: border-box;
	}

	.dcg-mobile-menu a,
	.dcg-mobile-menu button,
	.dcg-mobile-menu input {
		font: inherit;
	}

	.dcg-mobile-menu a:focus,
	.dcg-mobile-menu button:focus,
	.dcg-mobile-menu input:focus {
		outline: 3px solid #b68b2d;
		outline-offset: 3px;
	}

	.dcg-mobile-menu__enhanced {
		display: none;
	}

	.dcg-mobile-menu__fallback-title {
		margin: 0 0 14px;
		color: #172235;
		font-size: 20px;
		line-height: 1.2;
	}

	.dcg-mobile-menu__fallback-list,
	.dcg-mobile-menu__fallback-list ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dcg-mobile-menu__fallback-list > li {
		border-top: 1px solid #d7d4ca;
	}

	.dcg-mobile-menu__fallback-list li:last-child {
		border-bottom: 1px solid #d7d4ca;
	}

	.dcg-mobile-menu__fallback-list a {
		display: block;
		padding: 13px 0;
		color: #172235;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.3;
		text-decoration: none;
	}

	.dcg-mobile-menu__fallback-list ul a {
		padding: 10px 0 10px 16px;
		font-size: 15px;
		font-weight: 400;
	}

	.dcg-mobile-menu__fallback-search,
	.dcg-mobile-menu__search-form {
		display: block;
		margin: 24px 0 0;
	}

	.dcg-mobile-menu__fallback-search label,
	.dcg-mobile-menu__search-form label {
		display: block;
		margin: 0 0 8px;
		color: #172235;
		font-size: 14px;
		font-weight: 600;
	}

	.dcg-mobile-menu__fallback-search input,
	.dcg-mobile-menu__search-form input {
		display: block;
		width: 100%;
		min-height: 46px;
		margin: 0 0 10px;
		padding: 10px 12px;
		border: 1px solid #8b9199;
		border-radius: 2px;
		background: #fff;
		color: #172235;
	}

	.dcg-mobile-menu__fallback-search button,
	.dcg-mobile-menu__search-form button {
		display: inline-block;
		min-height: 46px;
		padding: 10px 16px;
		border: 1px solid #172235;
		border-radius: 2px;
		background: #172235;
		color: #fff;
		font-weight: 600;
		line-height: 1.2;
		cursor: pointer;
	}

	.dcg-mobile-menu__showroom-card {
		margin: 24px 0 0;
		padding: 16px;
		border: 1px solid rgba(255, 255, 255, .14);
		border-radius: 8px;
		background: #2b2d32;
		color: rgba(255, 255, 255, .94);
		font-size: 13px;
		font-style: normal;
		line-height: 1.35;
	}

	.dcg-mobile-menu__showroom-region {
		min-width: 0;
		min-height: 0;
	}

	.dcg-mobile-menu__showroom-toggle {
		display: none;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		min-height: 48px;
		padding: 11px 14px;
		border: 1px solid #d7d4ca;
		border-radius: 6px;
		background: #fff;
		color: #172235;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.25;
		text-align: left;
		cursor: pointer;
	}

	.dcg-mobile-menu__showroom-toggle-icon {
		flex: 0 0 auto;
		font-size: 20px;
		font-weight: 400;
		line-height: 1;
	}

	.dcg-mobile-menu__showroom-card a {
		color: #fff;
		text-decoration: none;
	}

	.dcg-mobile-menu__showroom-card a:hover,
	.dcg-mobile-menu__showroom-card a:focus {
		text-decoration: underline;
	}

	.dcg-mobile-menu__showroom-card p,
	.dcg-mobile-menu__showroom-card address {
		margin: 0;
	}

	.dcg-mobile-menu__phone {
		margin-top: 12px !important;
		font-size: 15px;
		font-weight: 600;
	}

	.dcg-mobile-menu__statement,
	.dcg-mobile-menu__hours {
		margin-top: 12px !important;
	}

	/* Enhanced overlay: only activated after dcg-mobile-menu.js has loaded. */
	.dcg-menu-enhanced .dcg-mobile-menu:not(.is-open) {
		display: none;
	}

	.dcg-menu-enhanced .dcg-mobile-menu.is-open {
		display: block;
		display: grid;
		position: fixed;
		inset: 0;
		z-index: 2147483000;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		min-width: 0;
		min-height: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background: #f7f6f2;
	}

	.dcg-menu-enhanced .dcg-mobile-menu.is-open .dcg-mobile-menu__fallback {
		display: none;
	}

	.dcg-menu-enhanced .dcg-mobile-menu.is-open .dcg-mobile-menu__enhanced {
		display: block;
		display: grid;
		grid-template-rows: auto minmax(0, 1fr) auto;
		min-width: 0;
		min-height: 0;
		height: 100%;
		padding: 16px 18px 16px;
		padding: max(16px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
	}

	.dcg-mobile-menu__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-width: 0;
		padding: 0 0 12px;
		border-bottom: 1px solid #d7d4ca;
	}

	.dcg-mobile-menu__eyebrow {
		min-width: 0;
		margin: 0;
		color: #172235;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: .09em;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.dcg-mobile-menu__close,
	.dcg-mobile-menu__back {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		min-height: 42px;
		border: 0;
		border-radius: 3px;
		background: transparent;
		color: #172235;
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
		cursor: pointer;
	}

	.dcg-mobile-menu__close {
		min-width: 70px;
		padding: 8px;
	}

	.dcg-mobile-menu__close > span[aria-hidden="true"] {
		font-size: 25px;
		font-weight: 400;
		line-height: .8;
	}

	.dcg-mobile-menu__viewport {
		min-width: 0;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.dcg-mobile-menu__screen {
		min-width: 0;
		padding: 20px 0;
	}

	.dcg-mobile-menu__screen[hidden] {
		display: none !important;
	}

	.dcg-mobile-menu__screen-title {
		margin: 0 0 16px;
		color: #172235;
		font-size: 26px;
		font-weight: 600;
		letter-spacing: -.02em;
		line-height: 1.08;
	}

	.dcg-mobile-menu__screen-heading {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 16px;
	}

	.dcg-mobile-menu__screen-heading .dcg-mobile-menu__screen-title {
		margin: 0;
	}

	.dcg-mobile-menu__back {
		flex: 0 0 auto;
		padding: 8px 6px;
	}

	.dcg-mobile-menu__back > span[aria-hidden="true"] {
		font-size: 21px;
		line-height: .9;
	}

	.dcg-mobile-menu__root-tiles {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.dcg-mobile-menu__tile {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		min-width: 0;
		min-height: 112px;
		padding: 15px;
		border: 1px solid #d7d4ca;
		border-radius: 6px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(23, 34, 53, .06);
		color: #172235;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.2;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}

	.dcg-mobile-menu__tile:hover,
	.dcg-mobile-menu__tile:focus {
		border-color: #b68b2d;
		color: #172235;
	}

	.dcg-mobile-menu__tile--static {
		cursor: default;
		opacity: .75;
	}

	.dcg-mobile-menu__tile-icon {
		display: block;
		color: #a7802c;
		font-size: 23px;
		line-height: 1;
	}

	.dcg-mobile-menu__tile-label {
		display: block;
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.dcg-mobile-menu__screen--art.is-active {
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 0;
	}

	.dcg-mobile-menu__art-layout {
		display: grid;
		grid-template-rows: minmax(126px, .82fr) minmax(174px, 1.18fr);
		gap: 12px;
		flex: 1 1 auto;
		min-width: 0;
		min-height: 0;
	}

	.dcg-mobile-menu__art-browse {
		min-width: 0;
		min-height: 0;
		padding-right: 5px;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		scrollbar-color: #a9a69d transparent;
		scrollbar-width: thin;
	}

	.dcg-mobile-menu__art-browse:focus {
		outline: 3px solid #b68b2d;
		outline-offset: -3px;
	}

	.dcg-mobile-menu__art-browse::-webkit-scrollbar {
		width: 5px;
	}

	.dcg-mobile-menu__art-browse::-webkit-scrollbar-track {
		background: transparent;
	}

	.dcg-mobile-menu__art-browse::-webkit-scrollbar-thumb {
		border-radius: 99px;
		background: #a9a69d;
	}

	.dcg-mobile-menu__art-feature {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		min-width: 0;
		min-height: 0;
		padding: 12px 8px 2px;
		border-top: 1px solid #d7d4ca;
		color: #172235;
		text-align: center;
		text-decoration: none;
	}

	.dcg-mobile-menu__art-feature-media {
		display: block;
		min-width: 0;
		min-height: 72px;
		flex: 1 1 auto;
		margin: 0 auto 10px;
		width: min(100%, 620px);
		overflow: hidden;
		border-radius: 5px;
	}

	.dcg-mobile-menu__art-feature-image {
		display: block;
		width: 100%;
		height: 100%;
		min-height: 72px;
		max-height: 230px;
		object-fit: cover;
	}

	.dcg-mobile-menu__art-feature-copy,
	.dcg-mobile-menu__art-feature-eyebrow,
	.dcg-mobile-menu__art-feature-title,
	.dcg-mobile-menu__art-feature-cta {
		display: block;
	}

	.dcg-mobile-menu__art-feature-copy {
		flex: 0 0 auto;
		min-width: 0;
	}

	.dcg-mobile-menu__art-feature-eyebrow {
		margin: 0 0 5px;
		color: #8d691d;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: .14em;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.dcg-mobile-menu__art-feature-title {
		max-width: 28ch;
		margin: 0 auto;
		font-family: Georgia, "Times New Roman", serif;
		font-size: clamp(18px, 4.8vw, 25px);
		font-weight: 600;
		letter-spacing: -.015em;
		line-height: 1.08;
		overflow-wrap: anywhere;
	}

	.dcg-mobile-menu__art-feature-cta {
		margin: 7px 0 0;
		color: #8d691d;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.25;
	}

	.dcg-mobile-menu__art-feature:hover,
	.dcg-mobile-menu__art-feature:focus {
		color: #172235;
	}

	.dcg-mobile-menu__view-all {
		display: block;
		margin: 0 0 12px;
		padding: 13px 14px;
		border: 1px solid #b68b2d;
		border-radius: 3px;
		background: #fffaf0;
		color: #172235;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.25;
		text-decoration: none;
	}

	.dcg-mobile-menu__child-links {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dcg-mobile-menu__child-link {
		margin: 0;
		border-top: 1px solid #d7d4ca;
	}

	.dcg-mobile-menu__child-link:last-child {
		border-bottom: 1px solid #d7d4ca;
	}

	.dcg-mobile-menu__child-link a,
	.dcg-mobile-menu__child-link span {
		display: block;
		padding: 15px 4px;
		color: #172235;
		font-size: 17px;
		font-weight: 500;
		line-height: 1.25;
		text-decoration: none;
	}

	.dcg-mobile-menu__child-link a:hover,
	.dcg-mobile-menu__child-link a:focus {
		color: #8d691d;
	}

	.dcg-mobile-menu__child-link--depth-2 a,
	.dcg-mobile-menu__child-link--depth-2 span {
		padding-left: 20px;
		font-size: 15px;
	}

	.dcg-menu-open,
	.dcg-menu-open body {
		height: 100%;
		overflow: hidden;
	}

	/* Wide phones and tablets use three comfortable root columns. */
	@media (min-width: 700px) {
		.dcg-mobile-menu__root-tiles {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.dcg-mobile-menu__child-links {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			column-gap: 22px;
		}

		.dcg-mobile-menu__child-link:last-child {
			border-bottom: 0;
		}

		.dcg-mobile-menu__art-layout {
			grid-template-rows: minmax(150px, .72fr) minmax(230px, 1.28fr);
			gap: 18px;
		}

		.dcg-mobile-menu__art-feature {
			padding-right: clamp(24px, 8vw, 90px);
			padding-left: clamp(24px, 8vw, 90px);
		}

		.dcg-mobile-menu__art-feature-title {
			font-size: clamp(24px, 3.7vw, 36px);
		}
	}

	@media (max-height: 959px) {
		.dcg-mobile-menu.is-art-screen .dcg-mobile-menu__showroom-toggle {
			display: flex;
		}

		.dcg-mobile-menu.is-art-screen .dcg-mobile-menu__showroom-card[hidden] {
			display: none;
		}

		.dcg-mobile-menu.is-art-screen .dcg-mobile-menu__showroom-card {
			margin-top: 10px;
		}

		.dcg-menu-enhanced .dcg-mobile-menu.is-open.is-art-screen.is-showroom-expanded {
			display: block;
			overflow-y: auto;
		}

		.dcg-menu-enhanced .dcg-mobile-menu.is-open.is-art-screen.is-showroom-expanded .dcg-mobile-menu__enhanced {
			display: block;
			height: auto;
			min-height: 100%;
		}

		.dcg-mobile-menu.is-art-screen.is-showroom-expanded .dcg-mobile-menu__viewport {
			overflow: visible;
		}

		.dcg-mobile-menu.is-art-screen.is-showroom-expanded .dcg-mobile-menu__screen--art.is-active {
			height: auto;
			min-height: 520px;
		}
	}

	/* Short landscape prioritizes links and turns the card into a compact row. */
	@media (orientation: landscape) and (max-height: 560px) {
		.dcg-menu-enhanced .dcg-mobile-menu.is-open .dcg-mobile-menu__enhanced {
			padding-top: 10px;
			padding-bottom: 10px;
		}

		.dcg-mobile-menu__header {
			padding-bottom: 7px;
		}

		.dcg-mobile-menu__viewport {
			padding-right: 4px;
		}

		.dcg-mobile-menu__screen {
			padding: 11px 0;
		}

		.dcg-mobile-menu__screen-title {
			font-size: 22px;
		}

		.dcg-mobile-menu__root-tiles {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 8px;
		}

		.dcg-mobile-menu__tile {
			min-height: 72px;
			padding: 10px;
			font-size: 14px;
		}

		.dcg-mobile-menu__tile-icon {
			font-size: 17px;
		}

		.dcg-mobile-menu__showroom-card {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
			column-gap: 16px;
			margin-top: 10px;
			padding: 9px 12px;
			font-size: 11px;
			line-height: 1.2;
		}

		.dcg-mobile-menu__phone,
		.dcg-mobile-menu__statement,
		.dcg-mobile-menu__hours {
			margin-top: 0 !important;
		}

		.dcg-mobile-menu__statement {
			grid-column: 2;
			grid-row: 1;
		}

		.dcg-mobile-menu__hours {
			grid-column: 2;
			grid-row: 2;
		}

		.dcg-mobile-menu__art-feature-title {
			font-size: 17px;
		}
	}

	/* At deliberately constrained dimensions, use normal document order. */
	@media (max-width: 360px), (max-height: 430px) {
		.dcg-menu-enhanced .dcg-mobile-menu.is-open {
			display: block;
			overflow-y: auto;
		}

		.dcg-menu-enhanced .dcg-mobile-menu.is-open .dcg-mobile-menu__enhanced {
			display: block;
			height: auto;
			min-height: 100%;
		}

		.dcg-mobile-menu__viewport {
			overflow: visible;
		}

		.dcg-mobile-menu__root-tiles,
		.dcg-mobile-menu__child-links {
			display: block;
		}

		.dcg-mobile-menu__tile {
			min-height: 64px;
			margin: 0 0 9px;
			flex-direction: row;
			align-items: center;
			gap: 10px;
		}

		.dcg-mobile-menu__showroom-card {
			display: block;
		}

		.dcg-mobile-menu__phone,
		.dcg-mobile-menu__statement,
		.dcg-mobile-menu__hours {
			margin-top: 12px !important;
		}

		.dcg-mobile-menu__screen--art.is-active {
			display: block;
			height: auto;
		}

		.dcg-mobile-menu__art-layout {
			display: block;
		}

		.dcg-mobile-menu__art-browse {
			overflow: visible;
		}

		.dcg-mobile-menu__art-feature {
			margin-top: 12px;
			min-height: 190px;
		}
	}

	/* Narrow but normally tall phones can still preserve the two Art regions. */
	@media (max-width: 360px) and (min-height: 431px) {
		.dcg-menu-enhanced .dcg-mobile-menu.is-open.is-art-screen {
			display: grid;
			overflow: hidden;
		}

		.dcg-menu-enhanced .dcg-mobile-menu.is-open.is-art-screen .dcg-mobile-menu__enhanced {
			display: grid;
			height: 100%;
			min-height: 0;
		}

		.dcg-mobile-menu.is-art-screen .dcg-mobile-menu__viewport {
			overflow: hidden;
		}

		.dcg-mobile-menu__screen--art.is-active {
			display: flex;
			height: 100%;
		}

		.dcg-mobile-menu__art-layout {
			display: grid;
		}

		.dcg-mobile-menu__art-browse {
			overflow-y: auto;
		}

		.dcg-mobile-menu__art-feature {
			min-height: 0;
			margin-top: 0;
		}
	}

	/* Live root-tile safeguard: preserve equal grid tracks at every mobile size. */
	.dcg-menu-enhanced .dcg-mobile-menu.is-open .dcg-mobile-menu__root-tiles {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		width: 100% !important;
	}

	.dcg-menu-enhanced .dcg-mobile-menu.is-open .dcg-mobile-menu__tile {
		display: flex !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
	}

	@media (min-width: 700px) {
		.dcg-menu-enhanced .dcg-mobile-menu.is-open .dcg-mobile-menu__root-tiles {
			grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		}
	}

	@media (orientation: landscape) and (max-height: 560px) {
		.dcg-menu-enhanced .dcg-mobile-menu.is-open .dcg-mobile-menu__root-tiles {
			grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		}
	}

	@media (max-width: 360px) {
		.dcg-menu-enhanced .dcg-mobile-menu.is-open .dcg-mobile-menu__root-tiles {
			grid-template-columns: 1fr !important;
		}
	}
}

.dcg-mobile-menu .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}