/* Sliding panel drawer. Everything here is scoped below the theme breakpoint
   so the desktop mega panel is untouched. */

.main-navigation .zk-panel-head { display: none; }

@media (max-width: 992px) {

	/* The second selector outranks the theme's .main-navigation ul.menu ul
	   li.nolink, which otherwise keeps nested siblings on screen. */
	.main-navigation ul.zk-nav-open > li:not(.zk-open),
	.main-navigation ul.menu ul.zk-nav-open > li:not(.zk-open) { display: none; }
	.main-navigation .container.zk-has-open > .zk-panel-head { display: none; }
	.main-navigation ul.zk-nav-open > li.zk-open { border-bottom: 0; }
	.main-navigation li.zk-open > details.zk-pillar > summary { display: none; }

	.main-navigation li.zk-open > details.zk-pillar > .sub-menu-wrapper {
		animation: zk-panel-in 220ms ease-out both;
	}

	@keyframes zk-panel-in {
		from { transform: translateX(14%); opacity: 0; }
		to   { transform: none; opacity: 1; }
	}

	.main-navigation .zk-panel-head {
		display: flex;
		align-items: baseline;
		gap: 12px;
		min-height: 52px;
		padding: 8px 16px;
		border-bottom: 1px solid var(--zk-hairline);
		margin-bottom: 8px;
	}

	.main-navigation .zk-back {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		flex: none;
		margin: 0;
		padding: 6px 0;
		border: 0;
		background: none;
		font-family: Karla, sans-serif;
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
		color: var(--zk-accent);
		cursor: pointer;
	}

	.main-navigation .zk-back::before {
		content: "\2039";
		font-size: 20px;
		line-height: 1;
	}

	.main-navigation .zk-back:focus-visible {
		outline: 2px solid var(--zk-accent);
		outline-offset: 3px;
		border-radius: 4px;
	}

	.main-navigation .zk-panel-title {
		margin: 0;
		font-family: "EB Garamond", Georgia, serif;
		font-size: 17px;
		line-height: 1.2;
		color: var(--zk-ink);
	}

	.main-navigation .zk-pillar__summary:focus-visible {
		outline: 2px solid var(--zk-accent);
		outline-offset: -2px;
	}

	/* Panels are full width, so the accordion indents are dropped. */
	.main-navigation li.zk-open > details > .sub-menu-wrapper .sub-menu > li > a { padding-left: 16px; }
	.main-navigation li.zk-open .zk-pillar--sub > .zk-pillar__summary { padding-left: 16px; }

	.main-navigation li.zk-tiles.zk-open > details > .sub-menu-wrapper { padding: 0; }

	.main-navigation li.zk-tiles.zk-open > details > .sub-menu-wrapper > .container > ul.sub-menu {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px 8px;
		padding: 4px 8px 16px;
	}

	/* The theme sets width: calc(100% - 40px) on .sub-menu-wrapper a.cg-menu-link,
	   which outranks a shorter selector here. */
	.main-navigation ul.menu li.zk-tiles.zk-open .sub-menu-wrapper a.zk-tile__link {
		width: 100%;
		gap: 8px;
		min-height: 56px;
		padding: 2px 0;
	}

	.main-navigation ul.menu li.zk-tiles.zk-open .sub-menu-wrapper .zk-tile__image {
		width: 32px;
		height: 32px;
	}

	.main-navigation ul.menu li.zk-tiles.zk-open .sub-menu-wrapper .zk-tile__image--empty {
		width: 32px;
		height: 32px;
	}

	/* Full width rows closing the panel, below the grid. */
	.main-navigation li.zk-tiles.zk-open .zk-viewall {
		grid-column: 1 / -1;
		margin-top: 8px;
		padding-top: 8px;
		border-top: 1px solid var(--zk-hairline);
	}

	.main-navigation li.zk-tiles.zk-open .zk-viewall + .zk-viewall {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.main-navigation li.zk-open .zk-viewall > a { padding: 8px 16px; }

	.main-navigation ul.menu li.zk-tiles.zk-open .sub-menu-wrapper .zk-tile__label {
		/* 16px breaks Swedish stone names mid-word in a 111px tile; the two
		   column grid in a 300px drawer cannot carry more than this. */
		font-size: 13px;
		line-height: 1.25;
	}
}

/* Three columns on tablet would need a wider drawer. The theme pins
   .col-full-nav to 300px below 992px and resists an override, so the grid
   stays at two columns up to the desktop breakpoint. */