:root {
	--green: #003d22;
	--green2: #006b3a;
	--gold: #dca313;
	--gold2: #f3b51b;
	--cream: #fff8e6;
	--warm: #fffdf5;
	--text: #151515;
	--muted: #5e665f;
	--shadow: 0 14px 36px rgba(0, 0, 0, .13);
	--radius: 24px
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	background: var(--warm);
	color: var(--text);
	padding-bottom: 86px
}

img,
video {
	max-width: 100%;
	display: block
}

a {
	text-decoration: none;
	color: inherit
}

.app-header {
	position: sticky;
	top: 0;
	z-index: 50;
	height: 104px;
	background: linear-gradient(135deg, #002b18, #00552f);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 24px;
	color: #fff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .22)
}

.brand-logo img {
	height: 86px;
	object-fit: contain
}

.menu-button {
	background: 0;
	border: 0;
	color: #fff;
	display: grid;
	gap: 5px;
	font-weight: 800
}

.menu-button span {
	width: 30px;
	height: 3px;
	background: #fff;
	border-radius: 4px
}

.menu-button small {
	font-size: 12px
}

.header-links {
	display: flex;
	gap: 20px;
	font-size: 13px;
	font-weight: 800
}

.cart b {
	background: var(--gold);
	border-radius: 999px;
	color: #002b18;
	padding: 2px 7px
}

.hero-carousel {
	position: relative;
	min-height: 530px;
	background: #000;
	overflow: hidden;
	border-radius: 0 0 28px 28px
}

.hero-slide>img:first-child {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .78
}

.hero-slide:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, .38), rgba(0, 0, 0, .08))
}

.hero-copy {
	position: relative;
	z-index: 2;
	max-width: 620px;
	padding: 70px 0 40px 76px;
	color: #fff
}

.eyebrow {
	text-transform: uppercase;
	letter-spacing: .13em;
	color: var(--gold);
	font-size: .78rem;
	font-weight: 900
}

.hero-copy h1 {
	font-size: 50px;
	line-height: 1.03;
	margin: 0 0 18px
}

.hero-copy p {
	font-size: 20px;
	line-height: 1.5;
	margin: 0 0 26px
}

.pack-overlay {
	position: absolute;
	z-index: 3;
	right: 72px;
	top: 70px;
	width: 280px;
	border-radius: 22px;
	filter: drop-shadow(0 25px 42px rgba(0, 0, 0, .45))
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	padding: 14px 24px;
	font-weight: 900
}

.gold {
	background: linear-gradient(135deg, var(--gold2), var(--gold));
	color: #fff
}

.green {
	background: var(--green);
	color: #fff
}

.outline {
	border: 1px solid var(--gold);
	color: #fff
}

.category-pills {
	width: min(1080px, 92vw);
	margin: -30px auto 26px;
	position: relative;
	z-index: 4;
	background: #fff;
	border-radius: 999px;
	padding: 13px;
	display: flex;
	gap: 12px;
	justify-content: space-around;
	overflow: auto;
	box-shadow: var(--shadow)
}

.category-pills a,
.recipe-tabs a {
	white-space: nowrap;
	color: var(--green);
	font-weight: 900;
	background: #f3fff7;
	border-radius: 999px;
	padding: 10px 15px
}

.trust-grid {
	width: min(1080px, 92vw);
	margin: 0 auto 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px
}

.trust-grid article {
	background: #fff;
	border-radius: 20px;
	padding: 16px;
	text-align: center;
	box-shadow: var(--shadow)
}

.trust-grid strong {
	display: block;
	color: var(--green)
}

.trust-grid span {
	font-size: .9rem;
	color: var(--muted)
}

.section {
	padding: 48px 44px
}

.section-head {
	text-align: center;
	max-width: 780px;
	margin: 0 auto 28px
}

.section h2 {
	font-size: 34px;
	line-height: 1.12;
	color: var(--green);
	margin: 0 0 12px
}

.section-head p:not(.eyebrow) {
	color: var(--muted)
}

.shop-grid,
.process-grid,
.video-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px
}

.shop-card,
.process-grid article,
.video-grid article {
	background: #fff;
	border-radius: 20px;
	box-shadow: var(--shadow);
	overflow: hidden
}

.shop-card img,
.process-grid img {
	height: 210px;
	width: 100%;
	object-fit: cover
}

.shop-card div,
.process-grid article,
.video-grid article {
	padding: 16px
}

.shop-card h3,
.process-grid h3,
.video-grid h3 {
	margin: 0 0 8px;
	color: var(--green)
}

.shop-card p {
	color: var(--muted);
	margin: 0 0 10px
}

.shop-card span {
	display: block;
	font-weight: 900;
	color: var(--gold);
	margin-bottom: 10px
}

.shop-card a {
	color: var(--green);
	font-weight: 900
}

.about-card,
.commercial {
	display: grid;
	grid-template-columns: 420px 1fr;
	gap: 28px;
	align-items: center;
	background: #fff;
	border-radius: 30px;
	margin: 20px 44px;
	box-shadow: var(--shadow)
}

.about-card img,
.commercial img {
	width: 100%;
	height: 360px;
	object-fit: cover;
	border-radius: 22px
}

.commercial.reverse {
	grid-template-columns: 1fr 1fr
}

.dark-panel {
	background: linear-gradient(135deg, #002b18, #00552f);
	border-radius: 30px;
	margin: 20px 44px;
	color: #fff
}

.dark-panel h2,
.dark-panel h3 {
	color: #fff
}

.dark-panel .process-grid article {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .14)
}

.dark-panel p {
	color: #edf9f0
}

.video-grid video {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	background: #000;
	border-radius: 16px
}

.products {
	background: #fff8e6
}

.products-tabs,
.poducts-tabs {
	display: flex;
	gap: 12px;
	overflow: auto;
	margin: 0 auto 24px;
	width: min(1080px, 100%);
	padding-bottom: 6px
}

.recipe-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px
}

.recipe-card {
	position: relative;
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--shadow);
	border: 1px solid #eadfca
}

.recipe-card img {
	width: 100%;
	height: 210px;
	object-fit: cover;
	filter: saturate(1.08) contrast(1.04)
}

.recipe-card .time {
	position: absolute;
	top: 180px;
	left: 12px;
	background: var(--green2);
	color: #fff;
	border-radius: 999px;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 900
}

.recipe-card h3 {
	font-size: 21px;
	line-height: 1.16;
	color: var(--green);
	margin: 18px 14px 8px
}

.recipe-card p {
	margin: 0 14px 16px;
	color: #444
}

.recipe-card footer {
	display: flex;
	justify-content: space-between;
	padding: 0 14px 16px;
	color: #555;
	font-size: 14px;
	font-weight: 700
}

.recipe-banner {
	margin-top: 28px;
	background: linear-gradient(135deg, #003d22, #006b3a);
	border-radius: 24px;
	color: #fff;
	display: grid;
	grid-template-columns: 260px 1fr 190px;
	gap: 22px;
	align-items: center;
	padding: 18px
}

.recipe-banner img {
	height: 155px;
	width: 100%;
	object-fit: cover;
	border-radius: 18px
}

.recipe-banner h3 {
	font-size: 26px;
	margin: 0
}

.recipe-banner p {
	margin: 8px 0 0;
	color: #effff5
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px
}

.gallery-grid img {
	height: 260px;
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: var(--shadow)
}

.faq details {
	background: #fff;
	border-radius: 16px;
	padding: 18px;
	margin: 12px auto;
	max-width: 840px;
	box-shadow: var(--shadow)
}

.faq summary {
	font-weight: 900;
	color: var(--green);
	cursor: pointer
}

.contact-card {
	text-align: center;
	background: #fff;
	border-radius: 30px;
	margin: 20px 44px;
	box-shadow: var(--shadow)
}

.contact-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	margin: 20px 0
}

.contact-card iframe {
	width: 100%;
	height: 340px;
	border: 0;
	border-radius: 24px;
	margin-top: 22px
}

.footer {
	background: #002b18;
	color: #fff;
	text-align: center;
	padding: 42px 20px 110px
}

.footer img {
	width: 260px;
	margin: 0 auto 14px;
	background: #fff;
	border-radius: 18px;
	padding: 10px
}

.bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 76px;
	background: linear-gradient(135deg, #002b18, #00552f);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: center;
	text-align: center;
	color: #fff;
	border-radius: 24px 24px 0 0;
	z-index: 60;
	box-shadow: 0 -12px 30px rgba(0, 0, 0, .25)
}

.bottom-nav a {
	font-size: 13px;
	font-weight: 900
}

.bottom-nav a:nth-child(3) {
	background: var(--gold);
	height: 76px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	transform: translateY(-16px)
}

@media(max-width:980px) {
	.app-header {
		height: 86px;
		padding: 10px 14px
	}

	.brand-logo img {
		height: 62px
	}

	.header-links {
		display: none
	}

	.hero-carousel {
		min-height: 640px
	}

	.hero-copy {
		padding: 34px 20px;
		max-width: none
	}

	.hero-copy h1 {
		font-size: 38px
	}

	.hero-copy p {
		font-size: 17px
	}

	.pack-overlay {
		right: 18px;
		bottom: 20px;
		top: auto;
		width: 170px
	}

	.category-pills {
		justify-content: flex-start
	}

	.trust-grid,
	.shop-grid,
	.process-grid,
	.video-grid,
	.recipe-grid,
	.gallery-grid {
		grid-template-columns: 1fr
	}

	.section {
		padding: 36px 16px
	}

	.section h2 {
		font-size: 28px
	}

	.shop-card {
		display: grid;
		grid-template-columns: 115px 1fr
	}

	.shop-card img {
		height: 100%;
		min-height: 150px
	}

	.about-card,
	.commercial,
	.commercial.reverse {
		grid-template-columns: 1fr;
		margin: 18px 14px;
		padding: 16px
	}

	.about-card img,
	.commercial img {
		height: 280px
	}

	.dark-panel,
	.contact-card {
		margin: 18px 14px
	}

	.recipe-card img {
		height: 230px
	}

	.recipe-card .time {
		top: 200px
	}

	.recipe-banner {
		grid-template-columns: 1fr;
		text-align: left
	}

	.recipe-banner img {
		height: 210px
	}

	.contact-actions {
		display: grid
	}

	.footer img {
		width: 210px
	}
}

@media(min-width:981px) and (max-width:1180px) {

	.recipe-grid,
	.shop-grid,
	.process-grid,
	.video-grid {
		grid-template-columns: repeat(3, 1fr)
	}
}


/* Final video poster fix */
.video-grid video {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: #003d22;
	border-radius: 16px;
}


.text-logo,
.footer-logo {
	display: flex;
	flex-direction: column;
	line-height: .9;
	text-decoration: none;
}

.text-logo .destina,
.footer-logo .destina {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: .04em;
	color: #f3b51b;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.text-logo .foods,
.footer-logo .foods {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: .35em;
	color: #f3b51b;
	align-self: center;
}

.footer-logo {
	align-items: center;
	margin-bottom: 10px
}

.brand-logo img,
.footer img {
	display: none !important
}

@media(max-width:980px) {
	.text-logo .destina {
		font-size: 2.2rem
	}

	.text-logo .foods {
		font-size: 1rem
	}
}


/* Fixed mobile menu */
.app-header {
	gap: 12px;
}

.menu-button {
	width: 58px;
	min-width: 58px;
	cursor: pointer;
	position: relative;
	z-index: 120;
}

.menu-button span {
	transition: transform .2s ease, opacity .2s ease;
}

.menu-open .menu-button span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.menu-open .menu-button span:nth-child(2) {
	opacity: 0;
}

.menu-open .menu-button span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.mobile-menu {
	position: fixed;
	top: 104px;
	left: 18px;
	right: 18px;
	z-index: 110;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	background: rgba(255, 255, 255, .98);
	border: 1px solid rgba(0, 61, 34, .12);
	border-radius: 24px;
	padding: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
	transform: translateY(-18px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease;
}

.mobile-menu a {
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: #f3fff7;
	color: #003d22;
	font-weight: 900;
}

.mobile-menu a:nth-child(2),
.mobile-menu a:last-child {
	background: #f3b51b;
	color: #fff;
}

.menu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(0, 0, 0, .35);
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s ease;
}

.menu-open .mobile-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.menu-open .menu-backdrop {
	opacity: 1;
	pointer-events: auto;
}


.text-logo .destina,
.footer-logo .destina{
    font-size:2rem;
    font-weight:900;
    color:var(--gold2);      /* accent highlight colour */
    letter-spacing:.02em;
    text-transform:none;
}

@media(max-width:980px) {
	.mobile-menu {
		top: 86px;
	}

	.app-header {
		justify-content: flex-start;
	}

	.brand-logo.text-logo {
		margin-inline: auto;
	}
}

@media(min-width:981px) {
	.mobile-menu {
		top: 104px;
		left: 50%;
		right: auto;
		width: 720px;
		transform: translate(-50%, -18px);
	}

	.menu-open .mobile-menu {
		transform: translate(-50%, 0);
	}
}


/* Recipes now match the rest of the app */
.simple-recipes {
	background: var(--warm);
}

.simple-recipes .section-head {
	text-align: center;
}

.simple-recipe-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.simple-recipe-card {
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--shadow);
	border: 1px solid rgba(0, 61, 34, .08);
	position: relative;
}

.simple-recipe-card img {
	width: 100%;
	height: 210px;
	object-fit: cover;
}

.simple-recipe-card .time {
	position: absolute;
	top: 12px;
	right: 12px;
	left: auto;
	background: #f3b51b;
	color: #fff;
	border-radius: 999px;
	padding: 7px 11px;
	font-size: 12px;
	font-weight: 900;
}

.simple-recipe-card h3 {
	color: var(--green);
	font-size: 21px;
	line-height: 1.15;
	margin: 16px 14px 8px;
}

.simple-recipe-card p {
	color: var(--muted);
	margin: 0 14px 14px;
	min-height: 44px;
}

.simple-recipe-card footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 14px 16px;
	font-size: 14px;
	font-weight: 800;
}

.simple-recipe-card footer span {
	color: #555;
}

.simple-recipe-card footer a {
	color: var(--green);
}

.recipe-tabs,
.recipe-banner {
	display: none !important;
}

/* ==========================================
   MOBILE / CROSS-BROWSER FINAL OVERRIDES
   Put this at the very end of style.css
========================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
}

img,
video {
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
.menu-button {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.app-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.mobile-menu,
.menu-backdrop,
.bottom-nav {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.bottom-nav {
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
}

.shop-card img,
.process-grid img,
.recipe-card img,
.simple-recipe-card img,
.gallery-grid img,
.about-card img,
.commercial img,
.video-grid video {
    object-fit: cover;
}

/* Tablet + large phone */
@media screen and (max-width: 980px) {
    .app-header {
        height: 86px;
        padding: 10px 14px;
        justify-content: flex-start;
    }

    .brand-logo.text-logo {
        margin-inline: auto;
    }

    .brand-logo img {
        height: 62px;
    }

    .header-links {
        display: none;
    }

    .text-logo .destina {
        font-size: 2.2rem;
        font-weight: 900;
        color: var(--gold2);
    }

    .text-logo .foods {
        font-size: 1rem;
        font-weight: 900;
        letter-spacing: .25em;
    }

    .mobile-menu {
        top: 86px;
        left: 14px;
        right: 14px;
        grid-template-columns: 1fr;
        max-height: calc(100svh - 100px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hero-carousel {
        min-height: 560px;
    }

    .hero-copy {
        padding: 34px 20px;
        max-width: none;
    }

    .hero-copy h1 {
        font-size: 38px;
    }

    .hero-copy p {
        font-size: 17px;
    }

    .pack-overlay {
        right: 18px;
        bottom: 20px;
        top: auto;
        width: 170px;
    }

    .category-pills {
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }

    .trust-grid,
    .shop-grid,
    .process-grid,
    .video-grid,
    .recipe-grid,
    .simple-recipe-grid,
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .section {
        padding: 36px 16px;
    }

    .section h2 {
        font-size: 28px;
    }

    .shop-card,
    .simple-recipe-card {
        display: grid;
        grid-template-columns: 115px 1fr;
    }

    .shop-card img,
    .simple-recipe-card img {
        height: 100%;
        min-height: 150px;
    }

    .about-card,
    .commercial,
    .commercial.reverse {
        grid-template-columns: 1fr;
        margin: 18px 14px;
        padding: 16px;
    }

    .about-card img,
    .commercial img {
        height: 280px;
    }

    .dark-panel,
    .contact-card {
        margin: 18px 14px;
    }

    .recipe-card img {
        height: 230px;
    }

    .recipe-card .time {
        top: 200px;
    }

    .recipe-banner {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .recipe-banner img {
        height: 210px;
    }

    .contact-actions {
        display: grid;
    }

    .footer img {
        width: 210px;
    }
}

/* Small phones */
@media screen and (max-width: 480px) {
    body {
        padding-bottom: calc(90px + env(safe-area-inset-bottom));
    }

    .app-header {
        height: 72px;
        padding: 8px 12px;
    }

    .text-logo .destina {
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--gold2);
    }

    .text-logo .foods {
        font-size: .9rem;
        font-weight: 900;
        letter-spacing: .25em;
    }

    .mobile-menu {
        top: 72px;
        left: 10px;
        right: 10px;
        grid-template-columns: 1fr;
        padding: 12px;
        max-height: calc(100svh - 86px);
    }

    .hero-carousel {
        min-height: 480px;
        border-radius: 0 0 20px 20px;
    }

    .hero-copy {
        padding: 24px 18px;
    }

    .hero-copy h1 {
        font-size: 2rem;
        line-height: 1.1;
    }

    .hero-copy p {
        font-size: 15px;
        line-height: 1.5;
    }

    .pack-overlay {
        width: 120px;
        right: 12px;
        bottom: 18px;
    }

    .btn {
        width: 100%;
        padding: 14px;
        font-size: 15px;
    }

    .section {
        padding: 30px 14px;
    }

    .section h2 {
        font-size: 1.8rem;
    }

    .section-head p {
        font-size: 15px;
    }

    .shop-card,
    .simple-recipe-card {
        display: block;
    }

    .shop-card img,
    .simple-recipe-card img {
        width: 100%;
        height: 220px;
        min-height: 0;
    }

    .about-card,
    .commercial,
    .commercial.reverse,
    .contact-card,
    .dark-panel {
        margin: 12px;
        padding: 12px;
    }

    .about-card img,
    .commercial img {
        height: 220px;
    }

    .contact-actions {
        grid-template-columns: 1fr;
    }

    .contact-card iframe {
        height: 250px;
    }

    .footer {
        padding-bottom: 110px;
    }

    .bottom-nav {
        height: calc(70px + env(safe-area-inset-bottom));
    }

    .bottom-nav a {
        font-size: 11px;
    }

    .bottom-nav a:nth-child(3) {
        height: 70px;
        transform: translateY(-12px);
    }
}

/* Desktop/tablet in-between */
@media screen and (min-width: 981px) and (max-width: 1180px) {
    .recipe-grid,
    .shop-grid,
    .process-grid,
    .video-grid,
    .simple-recipe-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Older iOS Safari fallback: svh may not exist */
@supports not (height: 100svh) {
    @media screen and (max-width: 980px) {
        .mobile-menu {
            max-height: calc(100vh - 100px);
        }
    }

    @media screen and (max-width: 480px) {
        .mobile-menu {
            max-height: calc(100vh - 86px);
        }
    }
}

/* Prevent iOS zooming form fields */
@media screen and (max-width: 980px) {
    input,
    textarea,
    select {
        font-size: 16px;
    }
}

/* ==========================================
   TRUE FIXED HEADER PATCH — FINAL
   Use at the END of style.css
========================================== */
:root{
  --df-header-desktop:104px;
  --df-header-tablet:86px;
  --df-header-phone:72px;
  --df-header-current:var(--df-header-desktop);
}

@media screen and (max-width:980px){
  :root{ --df-header-current:var(--df-header-tablet); }
}

@media screen and (max-width:480px){
  :root{ --df-header-current:var(--df-header-phone); }
}

html{
  scroll-padding-top:calc(var(--df-header-current) + env(safe-area-inset-top) + 16px) !important;
}

body{
  padding-top:calc(var(--df-header-current) + env(safe-area-inset-top)) !important;
  overflow-x:hidden !important;
}

.app-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:calc(var(--df-header-current) + env(safe-area-inset-top)) !important;
  min-height:calc(var(--df-header-current) + env(safe-area-inset-top)) !important;
  padding-top:calc(12px + env(safe-area-inset-top)) !important;
  z-index:99999 !important;
  transform:translate3d(0,0,0) !important;
  -webkit-transform:translate3d(0,0,0) !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
}

@media screen and (max-width:980px){
  .app-header{
    padding:calc(10px + env(safe-area-inset-top)) 14px 10px !important;
  }
}

@media screen and (max-width:480px){
  .app-header{
    padding:calc(8px + env(safe-area-inset-top)) 12px 8px !important;
  }
}

/* Dropdown must sit below the fixed header */
.dropdown-menu,
.mobile-menu{
  position:fixed !important;
  top:calc(var(--df-header-current) + env(safe-area-inset-top)) !important;
  z-index:99998 !important;
  max-height:calc(100dvh - var(--df-header-current) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px) !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

@media screen and (max-width:980px){
  .dropdown-menu,
  .mobile-menu{
    left:14px !important;
    right:14px !important;
  }
}

@media screen and (max-width:480px){
  .dropdown-menu,
  .mobile-menu{
    left:10px !important;
    right:10px !important;
  }
}

section,
[id]{
  scroll-margin-top:calc(var(--df-header-current) + env(safe-area-inset-top) + 16px) !important;
}

/* Older mobile Safari fallback */
@supports not (height:100dvh){
  .dropdown-menu,
  .mobile-menu{
    max-height:calc(100vh - var(--df-header-current) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px) !important;
  }
}