/* perfumeprices - Handy-Tableiste unten (inc/tabbar.php im Theme, wp_footer).
   Feste App-artige Leiste nur bis 820px Breite, darueber ganz aus dem DOM
   ausgeblendet (kein Platzverbrauch). Farbe wie der Kopf (.top): Pflaume
   #2b1e2f. --pp-tabbar-h ist die volle belegte Hoehe inkl. iPhone-Wulst
   (env safe-area-inset-bottom) - wird unten auch genutzt, um die
   Kaufleiste auf der Duftseite (.handyleiste), den Cookie-Banner und das
   Laender-Popup ueber die Tableiste zu heben, statt sie zu verdecken. */

:root {
	--pp-tabbar-h-innen: 58px;
	--pp-tabbar-h: calc(var(--pp-tabbar-h-innen) + env(safe-area-inset-bottom, 0px));
}

.pp-tabbar {
	display: none;
}

@media (max-width: 820px) {
	/* Platz am Fussende der Seite lassen, sonst verdeckt die Leiste die
	   letzten Zeilen (z. B. Footer-Links). */
	body {
		padding-bottom: var(--pp-tabbar-h);
	}

	.pp-tabbar {
		display: flex;
		align-items: stretch;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 45;
		height: var(--pp-tabbar-h-innen);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: #2b1e2f;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		box-shadow: 0 -8px 22px -16px rgba(20, 12, 22, 0.6);
	}

	.pp-tab {
		appearance: none;
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		border: 0;
		background: none;
		font: inherit;
		color: #bcaebb;
		text-decoration: none;
		padding: 6px 2px 0;
		cursor: pointer;
	}

	.pp-tab svg {
		flex: none;
	}

	.pp-tab span {
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: -0.01em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	.pp-tab.an {
		color: #fff;
	}

	.pp-tab.an span {
		color: var(--gold, #c2913f);
	}

	.pp-tab.an svg {
		color: var(--gold, #c2913f);
	}

	/* Kaufleiste der Duftseite (page-templates/duft.php, .handyleiste aus
	   pp.css) muss ueber unserer Tableiste sitzen, nicht dahinter/darunter -
	   eigene bottom-/padding-Werte statt der iPhone-Wulst-Zugabe aus pp.css,
	   die jetzt unserer Leiste zusteht. */
	.handyleiste {
		bottom: var(--pp-tabbar-h) !important;
		padding-bottom: 10px !important;
	}

	body.pp-duft {
		padding-bottom: calc(76px + var(--pp-tabbar-h)) !important;
	}

	/* Cookie-Banner und Laender-Popup (footer.php, pp.css) ueber die
	   Tableiste heben, statt sie zu verdecken. */
	.pp-cookiebar {
		bottom: var(--pp-tabbar-h) !important;
	}

	.pp-popup {
		bottom: calc(var(--pp-tabbar-h) + 16px) !important;
	}
}

@media (max-width: 480px) {
	.pp-popup {
		bottom: calc(var(--pp-tabbar-h) + 14px) !important;
	}
}