/*
 * Full-screen mobile navigation drawer — premium/editorial, AnnGhar's own
 * ivory/forest-green/antique-gold language rather than the blue "glass"
 * accent the rest of this plugin uses elsewhere. Applies ONLY at <=991px:
 * above that, Astra's own off-canvas drawer (see agm-header.css) is
 * completely untouched. This file intentionally does not reuse
 * `--agm-accent` — that token stays the Search/Account/Bottom-Nav "glass UI"
 * blue; the brand palette below is scoped to `.annghar-mobile-drawer` only.
 */

/* Defense in depth: even if JS ever left the drawer marked open on a wide
   viewport (e.g. rotating a tablet, or resizing a desktop browser), it can
   never render above the breakpoint the brief specifies. */
@media ( min-width: 992px ) {
	#annghar-mobile-drawer {
		display: none !important;
	}
}

@media ( max-width: 991px ) {

	.annghar-mobile-drawer {
		--agm-md-bg: #faf7f0;
		--agm-md-card: #ffffff;
		--agm-md-fg: #262622;
		--agm-md-muted: rgba( 38, 38, 34, .58 );
		--agm-md-border: rgba( 38, 38, 34, .09 );
		--agm-md-green: #3f5d49;
		--agm-md-green-soft: rgba( 63, 93, 73, .1 );
		--agm-md-gold: #ad8a52;
	}

	.annghar-mobile-drawer[hidden] {
		display: none;
	}

	.annghar-mobile-drawer {
		position: fixed;
		inset: 0;
		z-index: 100000;
		display: flex;
		flex-direction: column;
		height: 100vh;
		height: 100dvh;
		min-height: 100vh;
		background: var( --agm-md-bg );
		color: var( --agm-md-fg );
		font-family: var( --agm-font );
		opacity: 0;
		transform: translateX( 100% );
		transition: transform var( --agm-drawer-duration ) var( --agm-drawer-easing ), opacity var( --agm-drawer-duration ) ease;
		overflow: hidden;
	}

	.annghar-mobile-drawer.is-open {
		transform: translateX( 0 );
		opacity: 1;
	}

	/* Drawer Animation: "Fade" (Animations settings) — same convention as
	   Astra's own drawer (agm-header.css): neutralise the slide, cross-fade
	   instead. */
	body.agm-drawer-anim-fade .annghar-mobile-drawer {
		transform: none;
	}

	/* --- Decorative background: watermark + organic art, both inert --- */

	.annghar-mobile-drawer__decor,
	.annghar-mobile-drawer__watermark {
		position: absolute;
		z-index: 0;
		pointer-events: none;
	}

	.annghar-mobile-drawer__decor {
		inset: 0;
		opacity: var( --agm-decorative-opacity );
		background-image:
			radial-gradient( circle at 8% 12%, var( --agm-md-green ) 0, transparent 42% ),
			radial-gradient( circle at 92% 78%, var( --agm-md-gold ) 0, transparent 38% );
	}

	.annghar-mobile-drawer__watermark {
		width: var( --agm-watermark-size );
		height: var( --agm-watermark-size );
		opacity: var( --agm-watermark-opacity );
		bottom: -8%;
		right: -12%;
	}

	.annghar-mobile-drawer__watermark[data-position="lower-center"] {
		right: auto;
		left: 50%;
		transform: translateX( -50% );
	}

	.annghar-mobile-drawer__watermark[data-position="center"] {
		top: 50%;
		right: auto;
		left: 50%;
		bottom: auto;
		transform: translate( -50%, -50% );
	}

	.annghar-mobile-drawer__watermark img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* --- Header: logo + close, pinned above the scrolling content --- */

	.annghar-mobile-drawer__header {
		position: relative;
		z-index: 1;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: calc( var( --agm-safe-top ) + 14px ) 20px 14px;
	}

	.annghar-mobile-drawer__logo img {
		display: block;
		max-height: 30px;
		width: auto;
	}

	.annghar-mobile-drawer__wordmark {
		font-size: 17px;
		font-weight: 600;
		letter-spacing: .02em;
		color: var( --agm-md-fg );
		text-decoration: none;
	}

	.annghar-mobile-drawer__close {
		flex: 0 0 auto;
		min-width: var( --agm-tap-size );
		min-height: var( --agm-tap-size );
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: none;
		color: var( --agm-md-fg );
		border-radius: 999px;
		transition: background-color 150ms ease;
	}

	.annghar-mobile-drawer__close:hover,
	.annghar-mobile-drawer__close:focus-visible {
		background: var( --agm-md-border );
	}

	.annghar-mobile-drawer__close:focus-visible {
		outline: 2px solid var( --agm-md-green );
		outline-offset: 2px;
	}

	/* --- Scrolling body --- */

	.annghar-mobile-drawer__scroll {
		position: relative;
		z-index: 1;
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: 4px 20px calc( 28px + var( --agm-safe-bottom ) );
	}

	.annghar-mobile-drawer__section-title {
		margin: 0 0 14px;
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .09em;
		color: var( --agm-md-muted );
	}

	.annghar-mobile-categories,
	.annghar-mobile-shop,
	.annghar-mobile-help,
	.annghar-mobile-actions,
	.annghar-mobile-account {
		margin-top: 28px;
		padding-top: 24px;
		border-top: 1px solid var( --agm-md-border );
	}

	.annghar-mobile-categories {
		margin-top: 8px;
		padding-top: 0;
		border-top: none;
	}

	/* --- Shop by Category: horizontal, swipeable, scales to any count --- */

	.annghar-mobile-categories__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 14px;
	}

	.annghar-mobile-categories__head .annghar-mobile-drawer__section-title {
		margin-bottom: 0;
	}

	.annghar-mobile-categories__nav {
		display: flex;
		gap: 6px;
	}

	.annghar-mobile-categories__arrow {
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var( --agm-md-border );
		border-radius: 999px;
		background: var( --agm-md-card );
		color: var( --agm-md-fg );
		font-size: 16px;
		line-height: 1;
	}

	.annghar-mobile-categories__viewport {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		/* Hide the scrollbar itself; swipe/arrow affordance communicates
		   scrollability instead of a visible track. */
		scrollbar-width: none;
		margin: 0 -20px;
		padding: 0 20px;
	}

	.annghar-mobile-categories__viewport::-webkit-scrollbar {
		display: none;
	}

	.annghar-mobile-categories__track {
		display: flex;
		gap: 12px;
		width: max-content;
	}

	/*
	 * Card width is viewport-relative, not fixed, so exactly ~2.5 cards sit
	 * in view at every width in the brief (375–430px phones, up to 991px) —
	 * the partial 3rd card is the "swipe for more" affordance. Formula:
	 * (visible width − 2 gaps) ÷ 2.5, where visible width is the viewport
	 * minus the drawer's own 20px×2 horizontal padding.
	 */
	.annghar-mobile-category {
		scroll-snap-align: start;
		flex: 0 0 auto;
		width: calc( ( 100vw - 40px - 24px ) / 2.5 );
		max-width: 180px;
		display: flex;
		flex-direction: column;
		gap: 8px;
		text-decoration: none;
		color: inherit;
	}

	.annghar-mobile-category__image-wrap {
		display: block;
		width: 100%;
		aspect-ratio: 1 / 1;
		border-radius: 16px;
		overflow: hidden;
		background: var( --agm-md-green-soft );
	}

	.annghar-mobile-category__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.annghar-mobile-category__title {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		color: var( --agm-md-fg );
	}

	.annghar-mobile-category__arrow {
		color: var( --agm-md-green );
		font-size: 13px;
		transition: transform 150ms ease;
	}

	.annghar-mobile-category:active .annghar-mobile-category__arrow {
		transform: translateX( 2px );
	}

	/* --- Shop: dynamic WP menu, editorial links, native <details> for
	   child items so no additional JS is needed for expand/collapse. --- */

	.annghar-mobile-shop__list {
		display: flex;
		flex-direction: column;
	}

	.annghar-mobile-shop__item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: var( --agm-tap-size );
		padding: 13px 2px;
		font-size: 16px;
		font-weight: 500;
		color: var( --agm-md-fg );
		text-decoration: none;
		border-bottom: 1px solid var( --agm-md-border );
		list-style: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.annghar-mobile-shop__item::-webkit-details-marker {
		display: none;
	}

	.annghar-mobile-shop__group:last-child > .annghar-mobile-shop__item,
	.annghar-mobile-shop__list > a.annghar-mobile-shop__item:last-child {
		border-bottom: none;
	}

	.annghar-mobile-shop__item:active {
		background: var( --agm-md-green-soft );
	}

	.annghar-mobile-shop__arrow {
		color: var( --agm-md-muted );
		font-size: 15px;
		flex: 0 0 auto;
	}

	.annghar-mobile-shop__chevron {
		color: var( --agm-md-muted );
		font-size: 16px;
		transition: transform 200ms ease;
		flex: 0 0 auto;
	}

	.annghar-mobile-shop__group[open] > .annghar-mobile-shop__item .annghar-mobile-shop__chevron {
		transform: rotate( 90deg );
	}

	.annghar-mobile-shop__children {
		padding-left: 16px;
	}

	.annghar-mobile-shop__item--child {
		font-size: 14.5px;
		font-weight: 400;
		color: var( --agm-md-muted );
	}

	/* --- Need Help: compact icon row --- */

	.annghar-mobile-help__channels {
		display: flex;
		gap: 10px;
	}

	.annghar-mobile-help__channel {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		min-height: var( --agm-tap-size );
		padding: 14px 6px;
		border: 1px solid var( --agm-md-border );
		border-radius: 16px;
		background: var( --agm-md-card );
		color: var( --agm-md-fg );
		text-decoration: none;
		text-align: center;
	}

	.annghar-mobile-help__icon {
		display: flex;
		color: var( --agm-md-green );
	}

	.annghar-mobile-help__label {
		font-size: 12.5px;
		font-weight: 500;
		line-height: 1.25;
	}

	/* --- Track Order / Rewards --- */

	.annghar-mobile-actions {
		display: flex;
		gap: 12px;
	}

	.annghar-mobile-actions__button {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: var( --agm-tap-size );
		padding: 0 10px;
		border: 1px solid var( --agm-md-border );
		border-radius: 999px;
		background: var( --agm-md-card );
		color: var( --agm-md-fg );
		font-size: 13.5px;
		font-weight: 600;
		text-align: center;
		text-decoration: none;
		box-shadow: 0 1px 2px rgba( 0, 0, 0, .04 );
		transition: transform 150ms ease, box-shadow 150ms ease;
	}

	.annghar-mobile-actions__button:active {
		transform: scale( .97 );
	}

	/* --- Account CTA --- */

	.annghar-mobile-account__button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		min-height: var( --agm-tap-size );
		border: none;
		border-radius: 999px;
		background: var( --agm-md-green );
		color: #fff;
		font-size: 14.5px;
		font-weight: 600;
		text-decoration: none;
		transition: transform 150ms ease, opacity 150ms ease;
	}

	.annghar-mobile-account__button:active {
		transform: scale( .98 );
		opacity: .92;
	}

	.annghar-mobile-account__icon {
		display: flex;
	}

	/* --- Dark mode: same two-path convention as every other module --- */

	@media ( prefers-color-scheme: dark ) {
		body:not( .agm-theme-light ) .annghar-mobile-drawer {
			--agm-md-bg: #1d1f1b;
			--agm-md-card: #262924;
			--agm-md-fg: #f2efe6;
			--agm-md-muted: rgba( 242, 239, 230, .6 );
			--agm-md-border: rgba( 255, 255, 255, .1 );
			--agm-md-green: #7fa78d;
			--agm-md-gold: #cdae7b;
		}
	}

	body.agm-theme-dark .annghar-mobile-drawer {
		--agm-md-bg: #1d1f1b;
		--agm-md-card: #262924;
		--agm-md-fg: #f2efe6;
		--agm-md-muted: rgba( 242, 239, 230, .6 );
		--agm-md-border: rgba( 255, 255, 255, .1 );
		--agm-md-green: #7fa78d;
		--agm-md-gold: #cdae7b;
	}

	body.agm-theme-dark .annghar-mobile-account__button,
	body:not( .agm-theme-light ) .annghar-mobile-account__button {
		color: #14231a;
	}

	@media ( prefers-reduced-motion: reduce ) {
		body.agm-respect-reduced-motion .annghar-mobile-drawer {
			transition: none !important;
		}
	}

	.agm-anim-disabled .annghar-mobile-drawer {
		transition: none !important;
	}

}