/* Drawer (mobile) component
 *
 * Off-canvas panel sliding in from the left, with a dimmed overlay.
 * Only used under 1025px; fully hidden on desktop.
 */

.bollaert-drawer,
.bollaert-drawer-overlay {
	display: none;
}

@media (max-width: 1024.98px) {

	.bollaert-drawer-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1990;
		background: rgba(15, 23, 42, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.bollaert-drawer {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--4);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 2000;
		width: min(86vw, 360px);
		padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--6) var(--wp--preset--spacing--8);
		background: var(--wp--preset--color--white);
		box-shadow: 2px 0 24px rgba(15, 23, 42, 0.12);
		overflow-y: auto;
		transform: translateX(-105%);
		transition: transform 0.25s ease;
	}

	body.bollaert-drawer-open .bollaert-drawer {
		transform: translateX(0);
	}

	body.bollaert-drawer-open .bollaert-drawer-overlay {
		opacity: 1;
		visibility: visible;
	}

	/* lock body scroll behind the drawer */
	body.bollaert-drawer-open {
		overflow: hidden;
	}

	/* --- Head --- */

	.bollaert-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bollaert-drawer__brand {
		font-size: var(--wp--preset--font-size--lg);
		font-weight: 700;
		color: var(--wp--preset--color--text);
	}

	.bollaert-drawer__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border: none;
		border-radius: 999px;
		background: var(--wp--preset--color--brand-tint);
		color: var(--wp--preset--color--brand);
		cursor: pointer;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.bollaert-drawer__close:hover {
		background: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--white);
	}

	/* --- "Onze producten" toggle --- */

	/* Label = grid icon + text (same icon as the desktop mega button) */
	.bollaert-drawer__mega-label {
		display: inline-flex;
		align-items: center;
		gap: 0.55em;
	}
	.bollaert-drawer__mega-icon { flex-shrink: 0; }


	.bollaert-drawer__mega-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0.8em 1.2em;
		border: none;
		border-radius: 10px;
		background: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--white);
		font: inherit;
		font-weight: 600;
		cursor: pointer;
		transition: background-color 0.15s ease;
	}

	.bollaert-drawer__mega-toggle:hover {
		background: var(--wp--preset--color--brand-dark);
	}

	.bollaert-drawer__chev {
		transform: rotate(90deg);
		transition: transform 0.2s ease;
	}

	.bollaert-drawer__mega-toggle[aria-expanded="true"] .bollaert-drawer__chev,
	.bollaert-drawer__subtoggle[aria-expanded="true"] .bollaert-drawer__chev {
		transform: rotate(-90deg);
	}

	/* --- Categories --- */

	/* Hidden until "Onze producten" is tapped (drawer.js toggles [hidden]).
	   The :not([hidden]) guard lets the hidden attribute win. */
	.bollaert-drawer__mega:not([hidden]) {
		display: flex;
		flex-direction: column;
		margin-top: var(--wp--preset--spacing--2);
	}

	.bollaert-drawer__cat-top {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--2);
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.bollaert-drawer__cat-link {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--3);
		flex: 1 1 auto;
		min-width: 0;
		padding: 0.5em 0.4em;
		color: var(--wp--preset--color--text);
		font-weight: 500;
		text-decoration: none;
	}

	/* Category photo (from the category's best-selling product, see catalog.php) */
	.bollaert-drawer__cat-thumb {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border-radius: 8px;
		overflow: hidden;
		background: var(--wp--preset--color--brand-bg, #f3f8fc);
		color: var(--wp--preset--color--brand);
	}
	.bollaert-drawer__cat-thumb img { width: 100%; height: 100%; object-fit: contain; }
	.bollaert-drawer__cat-name { min-width: 0; }

	.bollaert-drawer__cat-link:hover { color: var(--wp--preset--color--brand); }
	.bollaert-drawer__cat-link:hover .bollaert-drawer__cat-name { text-decoration: underline; text-underline-offset: 2px; }

	.bollaert-drawer__subtoggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		flex-shrink: 0;
		border: none;
		background: transparent;
		color: var(--wp--preset--color--muted);
		cursor: pointer;
	}

	.bollaert-drawer__sub {
		list-style: none;
		margin: 0;
		padding: 0.3em 0 0.6em var(--wp--preset--spacing--4);
	}

	.bollaert-drawer__sub a {
		display: block;
		padding: 0.4em 0;
		font-size: var(--wp--preset--font-size--sm);
		color: var(--wp--preset--color--muted);
		text-decoration: none;
	}

	.bollaert-drawer__sub a:hover {
		color: var(--wp--preset--color--brand);
	}

	/* --- Main menu --- */

	.bollaert-drawer__menu {
		list-style: none;
		margin: 0;
		padding: var(--wp--preset--spacing--2) 0 0;
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.bollaert-drawer__menu a {
		display: flex;
		align-items: center;
		gap: 0.8em;
		padding: 0.7em 0.6em;
		border-radius: 8px;
		color: var(--wp--preset--color--text);
		font-weight: 500;
		text-decoration: none;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.bollaert-drawer__menu a:hover {
		background: var(--wp--preset--color--brand-tint);
		color: var(--wp--preset--color--brand);
	}

	.bollaert-drawer__ic {
		flex-shrink: 0;
		color: var(--wp--preset--color--brand);
	}

	/* --- Contact --- */

	.bollaert-drawer__contact {
		margin-top: auto;
		padding-top: var(--wp--preset--spacing--4);
		border-top: 1px solid var(--wp--preset--color--border);
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--2);
	}

	.bollaert-drawer__contact-row {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--2);
	}

	.bollaert-drawer__contact-link {
		display: inline-flex;
		align-items: center;
		gap: 0.6em;
		flex: 1 1 auto;
		color: var(--wp--preset--color--brand-dark);
		font-weight: 500;
		text-decoration: none;
	}

	.bollaert-drawer__contact-link:hover {
		color: var(--wp--preset--color--brand);
	}

	.bollaert-drawer__copy {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		flex-shrink: 0;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 8px;
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--muted);
		cursor: pointer;
		transition: color 0.15s ease, border-color 0.15s ease;
	}

	.bollaert-drawer__copy:hover {
		color: var(--wp--preset--color--brand);
		border-color: var(--wp--preset--color--brand);
	}

	.bollaert-drawer__copy-ok {
		display: none;
		color: var(--wp--preset--color--success);
	}

	.bollaert-drawer__copy.is-copied .bollaert-drawer__copy-ic {
		display: none;
	}

	.bollaert-drawer__copy.is-copied .bollaert-drawer__copy-ok {
		display: inline-block;
	}
}