/* =========================================================
   GLUCKSTADT PHARMACY — COMPLETE ADDITIONAL CSS
   Replace ALL existing Additional CSS with this file.
   Includes the mobile header alignment correction.
   ========================================================= */

.mobile-home-hero {
	display: none;
}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 900px) {

	.site-header {
		z-index: 1000 !important;
		background: #fcfaf5 !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}

	.header-inner {
		position: relative !important;
		align-items: center !important;
	}

	.brand,
	.menu-toggle {
		position: relative !important;
		z-index: 1002 !important;
	}

	.menu-toggle {
		display: block !important;
	}

	.primary-nav {
		position: fixed !important;
		z-index: 1001 !important;
		inset: 0 !important;

		display: flex !important;
		align-items: flex-start !important;
		justify-content: center !important;

		width: 100vw !important;
		height: 100dvh !important;
		padding: 118px 24px 90px !important;

		overflow-x: hidden !important;
		overflow-y: auto !important;

		background: #f5f0e6 !important;

		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transform: translateY(-14px) !important;

		transition:
			opacity 0.22s ease,
			visibility 0.22s ease,
			transform 0.22s ease !important;
	}

	.primary-nav.is-open {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: translateY(0) !important;
	}

	.primary-nav .primary-menu {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;

		width: 100% !important;
		max-width: 460px !important;
		margin: 0 !important;
		padding: 0 !important;

		gap: 4px !important;
		list-style: none !important;
	}

	.primary-nav .primary-menu > li {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
	}

	.primary-nav .primary-menu > li > a {
		display: block !important;
		width: 100% !important;
		padding: 14px 10px !important;

		text-align: center !important;
		font-family: var(--serif) !important;
		font-size: 1.48rem !important;
		font-weight: 400 !important;
		line-height: 1.2 !important;
	}

	.primary-nav.is-open ~ .header-actions {
		opacity: 0 !important;
		pointer-events: none !important;
	}
}


@media (max-width: 782px) {

	body.admin-bar .primary-nav {
		top: 46px !important;
		height: calc(100dvh - 46px) !important;
	}
}


/* =========================================================
   PHONE LAYOUT
   ========================================================= */

@media (max-width: 640px) {

	body {
		padding-bottom: 67px !important;
	}

	.utility-bar {
		display: none !important;
	}

	.header-inner {
		display: grid !important;
		grid-template-columns: minmax(118px, 1fr) auto 46px !important;
		align-items: center !important;

		min-height: 80px !important;
		gap: 10px !important;
	}

	.brand {
		grid-column: 1 !important;
		width: 145px !important;
		max-width: 100% !important;

		align-self: center !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.brand img,
	.brand .custom-logo {
		display: block !important;
		width: 100% !important;
		max-height: 58px !important;
		object-fit: contain !important;
		object-position: left center !important;
	}

	.header-actions {
		display: flex !important;
		grid-column: 2 !important;
		align-items: center !important;
		justify-content: center !important;

		align-self: center !important;
		height: 46px !important;
		padding: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.header-actions .button-primary {
		display: none !important;
	}

	.header-actions .button-ghost {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;

		min-height: 42px !important;
		padding: 0 16px !important;
		margin: 0 !important;

		border-color: transparent !important;
		color: #ffffff !important;
		background: var(--green-950) !important;
		box-shadow: none !important;

		font-size: 0.76rem !important;
		line-height: 1 !important;
		letter-spacing: 0.025em !important;
		white-space: nowrap !important;

		position: relative !important;
		top: auto !important;
		bottom: auto !important;
		transform: translateY(-3px) !important;
	}

	.menu-toggle {
		grid-column: 3 !important;
		width: 46px !important;
		height: 46px !important;
		margin: 0 !important;

		align-self: center !important;
		transform: none !important;
	}


	/* =====================================================
	   MOBILE HOMEPAGE HERO
	   ===================================================== */

	body.home {
		padding-bottom: 0 !important;
	}

	body.home .mobile-dock {
		display: none !important;
	}

	body.home .desktop-home-hero {
		display: none !important;
	}

	body.home .mobile-home-hero {
		display: block !important;
		padding: 16px 0 44px !important;
		background: #dceff0 !important;
	}

	.mobile-home-card {
		width: min(calc(100% - 22px), 620px) !important;
		margin: 0 auto !important;

		overflow: hidden !important;
		border-radius: 24px !important;

		background: var(--green-950) !important;
		box-shadow: 0 18px 44px rgba(23, 53, 45, 0.17) !important;
	}

	.mobile-home-photo {
		display: block !important;
		position: relative !important;

		width: 100% !important;
		height: clamp(205px, 55vw, 225px) !important;
		margin: 0 !important;
		padding: 0 !important;

		overflow: hidden !important;
		background: #e1e7e3 !important;
	}

	.mobile-home-photo img {
		display: block !important;
		position: relative !important;

		width: 100% !important;
		height: 100% !important;
		max-width: none !important;

		margin: 0 !important;
		padding: 0 !important;

		object-fit: cover !important;
		object-position: center 44% !important;

		opacity: 1 !important;
		visibility: visible !important;
		filter: none !important;
		transform: none !important;
		mix-blend-mode: normal !important;
	}

	.mobile-home-photo::before,
	.mobile-home-photo::after {
		display: none !important;
		content: none !important;
	}

	.mobile-home-copy {
		padding: 24px 22px 22px !important;
		color: #ffffff !important;
		background: var(--green-950) !important;
	}

	.mobile-home-copy .eyebrow {
		margin: 0 0 14px !important;
		color: #abd8cc !important;

		font-size: 0.67rem !important;
		line-height: 1.35 !important;
		letter-spacing: 0.145em !important;
	}

	.mobile-home-copy h1 {
		max-width: none !important;
		margin: 0 !important;

		color: #ffffff !important;

		font-family: var(--serif) !important;
		font-size: clamp(2.35rem, 10.5vw, 2.8rem) !important;
		font-weight: 400 !important;
		line-height: 0.98 !important;
		letter-spacing: -0.043em !important;
	}

	.mobile-home-lede {
		margin: 17px 0 0 !important;
		color: rgba(255, 255, 255, 0.82) !important;

		font-size: 0.95rem !important;
		line-height: 1.55 !important;
	}

	.mobile-home-actions {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 9px !important;

		width: 100% !important;
		margin-top: 21px !important;
	}

	.mobile-home-actions .button {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;

		width: 100% !important;
		min-height: 49px !important;
		margin: 0 !important;
	}

	.mobile-home-actions .button-primary {
		color: #ffffff !important;
		background: #2f918a !important;
		box-shadow: none !important;
	}

	.mobile-home-actions .button-light {
		color: var(--green-950) !important;
		background: #ffffff !important;
		border-color: transparent !important;
	}

	.mobile-home-actions svg {
		width: 19px !important;
		height: 19px !important;
		margin-left: 10px !important;
	}

	.mobile-home-help {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 5px !important;

		margin: 13px 0 0 !important;

		color: rgba(255, 255, 255, 0.67) !important;
		font-size: 0.79rem !important;
		line-height: 1.4 !important;
	}

	.mobile-home-help a {
		color: #ffffff !important;
		font-weight: 700 !important;
		text-decoration: underline !important;
		text-underline-offset: 3px !important;
	}

	.mobile-home-proof {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 8px !important;

		margin: 19px -22px -22px !important;
		padding: 17px 16px 18px !important;

		border-top: 1px solid rgba(255, 255, 255, 0.13) !important;
		background: rgba(255, 255, 255, 0.045) !important;
	}

	.mobile-home-proof div {
		min-width: 0 !important;
		text-align: center !important;
	}

	.mobile-home-proof strong {
		display: block !important;
		color: #ffffff !important;

		font-size: 0.69rem !important;
		line-height: 1.25 !important;
	}

	.mobile-home-proof span {
		display: block !important;
		margin-top: 4px !important;

		color: rgba(255, 255, 255, 0.58) !important;
		font-size: 0.6rem !important;
		line-height: 1.3 !important;
	}

	body.home .action-deck {
		margin-top: 0 !important;
		padding-top: 24px !important;
	}


	/* =====================================================
	   INTERIOR PAGE HERO TYPE
	   ===================================================== */

	.page-hero h1,
	.page-hero-copy h1 {
		font-size: clamp(2.65rem, 12vw, 3.25rem) !important;
		line-height: 0.98 !important;
		letter-spacing: -0.04em !important;
	}


	/* =====================================================
	   NEWSLETTER
	   ===================================================== */

	.newsletter-section {
		padding: 54px 0 !important;
	}

	.newsletter-inner {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 26px !important;
	}

	.newsletter-inner h2 {
		font-size: 2.05rem !important;
		line-height: 1.07 !important;
	}

	.newsletter-form {
		width: 100% !important;
	}


	/* =====================================================
	   MOBILE FOOTER
	   ===================================================== */

	.site-footer {
		padding: 54px 0 86px !important;
	}

	.footer-grid {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 0 !important;
	}

	.footer-brand,
	.footer-grid > div,
	.footer-grid > div:last-child {
		grid-column: auto !important;
		width: 100% !important;
	}

	.footer-brand {
		padding-bottom: 20px !important;
	}

	.footer-brand img {
		width: 200px !important;
		max-width: 75% !important;
	}

	.footer-brand p {
		max-width: 360px !important;
		margin-top: 15px !important;

		font-size: 0.86rem !important;
		line-height: 1.55 !important;
	}

	.footer-grid > div:not(.footer-brand) {
		display: block !important;
		padding: 18px 0 !important;
		border-top: 1px solid rgba(32, 39, 35, 0.12) !important;
	}

	.footer-title {
		margin: 0 0 8px !important;
		color: var(--green-950) !important;

		font-size: 0.75rem !important;
		font-weight: 700 !important;
		letter-spacing: 0.12em !important;
		text-transform: uppercase !important;
	}

	.footer-links,
	.footer-contact {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 0 !important;
	}

	.footer-grid a,
	.footer-grid > div > p {
		margin: 0 !important;
		padding: 4px 0 !important;

		font-size: 0.88rem !important;
		line-height: 1.45 !important;
	}

	.footer-contact a {
		overflow-wrap: anywhere !important;
	}

	.footer-bottom {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 10px !important;

		margin-top: 12px !important;
		padding-top: 18px !important;

		font-size: 0.75rem !important;
		line-height: 1.55 !important;
	}
}


/* =========================================================
   EXTRA-NARROW PHONES
   ========================================================= */

@media (max-width: 370px) {

	.header-inner {
		grid-template-columns: minmax(104px, 1fr) auto 42px !important;
		gap: 7px !important;
	}

	.brand {
		width: 126px !important;
	}

	.header-actions .button-ghost {
		min-height: 40px !important;
		padding: 0 11px !important;
		font-size: 0.69rem !important;
		transform: translateY(-3px) !important;
	}

	.mobile-home-copy {
		padding-right: 19px !important;
		padding-left: 19px !important;
	}

	.mobile-home-copy h1 {
		font-size: 2.25rem !important;
	}

	.mobile-home-proof {
		margin-right: -19px !important;
		margin-left: -19px !important;
	}
}