@media (max-width: 991px) {
	/* dg-popups styles every side panel, but its tokens omit the category panel
	   and the filter drawer. An invalid background shorthand otherwise becomes
	   transparent: the page showed through the lower half of the panel. */
	#dinaNav,
	#dinaSidebar {
		--dgp-box: #fff;
		--dgp-ink: #111418;
		--dgp-muted: #6b7280;
		--dgp-line: #e3e6ea;
		--dgp-wash: #f2f3f5;
		--dgp-teal: #0b6f7e;
		--dgp-r: 18px;
		background: var(--dgp-box) !important;
		color: var(--dgp-ink);
		height: 100vh;
		height: 100dvh;
		isolation: isolate;
		overscroll-behavior: contain;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	/* The filter drawer is dressed as a sheet by dg-mobile.php; keep its own palette. */
	#dinaSidebar { background: var(--dg-sheet-bg, #f1f3f4) !important; }
	.dina-dark #dinaNav,
	.dina-dark #dinaSidebar {
		--dgp-box: #141b24;
		--dgp-ink: #f1f4f8;
		--dgp-muted: #97a2b1;
		--dgp-line: #263140;
		--dgp-wash: #1b2430;
		--dgp-teal: #22c3e6;
	}
	/* Every side panel (category menu, filter drawer, cart, login) sits above the
	   shared canvas, the header, the buy bar and the phone dock. `body` in front
	   because the theme's own .dina-side-panel{z-index:99999} otherwise wins on
	   source order after the stylesheets are combined, which left the filter
	   drawer under its own backdrop. */
	body .dina-side-panel { z-index: 100001; }
	#dinaGlobalCanvas {
		z-index: 100000;
		background: rgb(0 0 0 / 55%);
	}

	/* Quick view: the phone dock (back / wishlist / home / compare / cart)
	   stays visible and tappable. It rises above Bootstrap's backdrop (1040)
	   and modal (1080); the modal ends where the dock begins. --dg-dock-h is
	   measured by mobile-chrome.js. The shop's filter/sort bar stays hidden. */
	body.modal-open .dina-mobile-footer { z-index: 1090; }
	body.modal-open #dinaPostModal { bottom: var(--dg-dock-h, 0px); }
	body.modal-open #dinaPostModal .modal-dialog { min-height: 100%; }

	/* Shop and category pages also carry the fixed filter/sort bar (dg-mobile.php,
	   z 9998, bottom 0), which sat on top of the phone dock and hid it. The bar
	   stacks above the dock instead, and the page ends above both. */
	body.dg-has-mbar .dg-mbar {
		bottom: var(--dg-dock-h, 0px);
		padding-bottom: 0;
	}
	body.dg-has-mbar {
		padding-bottom: calc(var(--dg-mbar-h, 60px) + var(--dg-dock-h, 0px) + env(safe-area-inset-bottom, 0px));
	}

	/* A collapsed vendor launcher must not cover modal purchase controls.
	   Expanded chat retains the vendor's placement and close control. */
	body.modal-open:not(.dg-chat-open) #goftino_w,
	body.dina-stop-scroll:not(.dg-chat-open) #goftino_w {
		visibility: hidden !important;
		pointer-events: none !important;
	}

	/* The containing block belongs to the trigger, rather than the logo row. */
	.dina-site-header .dina-user-drop,
	.dina-mobile-btns .dropdown {
		position: relative;
		width: fit-content;
		z-index: 1031;
	}
	.dina-site-header .dina-user-drop > .dropdown-menu,
	.dina-mobile-btns .dropdown > .dropdown-menu {
		position: absolute;
		top: calc(100% + 8px) !important;
		bottom: auto !important;
		right: auto !important;
		left: 0 !important;
		transform: none !important;
		max-width: calc(100vw - 24px);
		max-height: calc(100dvh - 100px);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: #fff !important;
		color: #202124;
		z-index: 1032 !important;
	}
	.dina-dark .dina-site-header .dina-user-drop > .dropdown-menu,
	.dina-dark .dina-mobile-btns .dropdown > .dropdown-menu {
		background: #272727 !important;
		color: #e8eaed;
	}
	.dina-dark-second-style.dina-dark .dina-site-header .dina-user-drop > .dropdown-menu,
	.dina-dark-second-style.dina-dark .dina-mobile-btns .dropdown > .dropdown-menu {
		background: #22303c !important;
	}

	/* These controls can inherit the desktop header's white foreground.
	   Keep badges and the bottom dock's colored center action untouched. */
	body:not(.dina-dark) .dina-header :is(.dina-wish-icon, .dina-compare-icon, .dina-shop-icon),
	body:not(.dina-dark) .dina-mobile-btns .btn,
	body:not(.dina-dark) .dina-mobile-footer li:not(.dina-mobile-footer-center) > a,
	body:not(.dina-dark) .dina-mobile-footer li:not(.dina-mobile-footer-center) .dina-mobile-footer-icon,
	body:not(.dina-dark) .dina-mobile-footer li:not(.dina-mobile-footer-center) .dina-mobile-footer-title {
		color: #202124 !important;
	}
	body:not(.dina-dark) .dina-header :is(.dina-wish-icon, .dina-compare-icon, .dina-shop-icon) > [aria-hidden],
	body:not(.dina-dark) .dina-mobile-btns .btn > [aria-hidden] {
		color: inherit !important;
	}

	/* Goftino owns expanded chat. Only its collapsed launcher clears the
	   product dock; a media query preserves the vendor's desktop placement. */
	body:not(.dg-chat-open) #goftino_w {
		bottom: var(--dg-chat-bottom, calc(172px + env(safe-area-inset-bottom, 0px))) !important;
	}
}

/* Gallery: a tap on the photo or the magnifier is an action, not a selection; no grey flash over the image. */
@media (pointer: coarse) {
	.woocommerce-product-gallery__image,
	.woocommerce-product-gallery__image img,
	.dg-gallery-action {
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}
}

/* No inline zoom on touch: a tap opens the lightbox, never a magnified copy inside the frame. */
@media (pointer: coarse), (hover: none) {
	.woocommerce-product-gallery .zoomImg { display: none !important; }
}

/* PhotoSwipe: an opaque stage on phones, so the header, buy bar and dock do not show through the photo.
   The theme sets `.pswp--open .pswp__bg { opacity: .7 !important }`; this selector must out-rank it. */
@media (max-width: 991px) {
	.pswp.pswp--open .pswp__bg { background: #0b0d10; opacity: 1 !important; }
}

/* No inline hover/tap zoom: the gallery opens as a lightbox only. */
.woocommerce-product-gallery .zoomImg { display: none !important; }
/* Lightbox zoom in/out button must stay visible. */
.pswp .pswp__button--zoom { display: block !important; opacity: 1; }

/* Reflect actual zoom (including pinch) and keep navigation available on touch. */
.pswp.dg-pswp-zoomed .pswp__button--zoom { background-position: -132px 0; }
.pswp:not(.dg-pswp-zoomed) .pswp__button--zoom { background-position: -88px 0; }
.pswp.pswp--touch .pswp__button--arrow--left,
.pswp.pswp--touch .pswp__button--arrow--right { visibility: visible; }
.pswp .pswp__button { touch-action: manipulation; }