/**
 * GreenZen Enhancement - Responsive My Account dropdown.
 *
 * Both the default WoodMart/WooCommerce sidebar and this dropdown are
 * always rendered in the markup; only CSS decides which one is visible at
 * a given viewport width. This keeps the output identical for every
 * device and stays fully compatible with full-page caching.
 */

.greenzen-account-dropdown-nav {
	display: none;
	margin-block-end: 24px;
}

.greenzen-account-dropdown {
	inline-size: 100%;
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23666' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 4px center;
	background-size: 10px 6px;
	padding-block: 8px;
	padding-inline-start: 2px;
	padding-inline-end: 20px;
	font-size: 15px;
	line-height: 1.4;
	color: var( --wd-form-color, #333 );
	border: none;
	border-block-end: 1px solid var( --wd-form-brd-color, #ccc );
	border-radius: 0;
	cursor: pointer;
}

[dir='rtl'] .greenzen-account-dropdown {
	background-position: left 4px center;
	padding-inline-start: 20px;
	padding-inline-end: 2px;
}

.greenzen-account-dropdown:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

@media ( max-width: 1024px ) {
	.greenzen-account-dropdown-nav {
		display: block;
	}

	.woocommerce-MyAccount-navigation {
		display: none !important;
	}

	/*
	 * WoodMart's "My Account Navigation" widget (Elementor/WPBakery/Gutenberg)
	 * can render account links as a grid of icon boxes via its own
	 * `.wd-grid-g` utility class, with the column count set inline per
	 * instance through --wd-col-md/--wd-col-sm custom properties. Force 3
	 * columns at this same breakpoint regardless of that per-instance
	 * setting. Scoped to `.wd-nav-my-acc` so this never touches WoodMart's
	 * unrelated product/blog grids, which also use `.wd-grid-g`.
	 */
	.wd-nav-my-acc.wd-grid-g {
		--wd-col-md: 3 !important;
		--wd-col-sm: 3 !important;
	}
}