/* ==========================================================================
   Laraib Organic — LAYOUT / SITE CHROME
   --------------------------------------------------------------------------
   Owns: announcement bar, utility bar, header, logo, primary nav + dropdowns,
   header actions, burger, search overlay, mobile drawer, assurance strip,
   footer, social, WhatsApp FAB, back-to-top, breadcrumbs, page hero.

   Consumes tokens.css only. No raw hex colours, no external requests.
   Every measurement that carries layout rhythm comes from --lo-s* / --lo-r*.

   CONTENTS
     01  Shell + local layer variables
     02  Announcement bar        .lo-announce
     03  Utility bar             .lo-utility
     04  Header shell            .lo-header
     05  Logo                    .lo-logo
     06  Primary navigation      .lo-nav
     07  Header actions          .lo-actions / .lo-action
     08  Burger                  .lo-burger
     09  Search overlay          .lo-searchbox
     10  Mobile drawer           .lo-drawer
     11  Assurance strip         .lo-assure
     12  Footer                  .lo-footer
     13  Footer bar              .lo-footer__bar
     14  Social links            .lo-social
     15  WhatsApp FAB            .lo-wa
     16  Back to top             .lo-top
     17  Breadcrumbs             .lo-crumbs
     18  Page hero               .lo-phero
     19  Body states / scroll lock
     20  Print
   ========================================================================== */


/* ==========================================================================
   01  Shell + local layer variables
   ========================================================================== */

.lo-site {
	/* Chrome-only measurements. Kept local so no other sheet inherits them. */
	--lo-header-h-stuck: 66px;
	--lo-announce-h: 42px;
	--lo-utility-h: 40px;
	--lo-drawer-w: 340px;
	--lo-z-header: 900;
	--lo-z-fab: 820;
	--lo-z-search: 1200;
	--lo-z-drawer: 1300;

	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: clip;
}

.lo-main {
	flex: 1 0 auto;
	display: block;
	min-height: 30vh;
}

/* Anything the theme hides with the `hidden` attribute must stay hidden even
   though these blocks declare their own display/position. */
.lo-searchbox[hidden],
.lo-drawer[hidden] {
	display: none !important;
}


/* ==========================================================================
   02  Announcement bar
   Deep green-950 field, gold text, one rotating line at a time.
   Items are absolutely stacked; only .is-active is visible.
   ========================================================================== */

.lo-announce {
	position: relative;
	z-index: 2;
	background: var(--lo-green-950);
	background-image: linear-gradient(
		100deg,
		var(--lo-green-950) 0%,
		var(--lo-green-900) 48%,
		var(--lo-green-950) 100%
	);
	color: var(--lo-gold-300);
	font-size: var(--lo-fs-xs);
	overflow: hidden;
}

/* Hairline of gold along the bottom edge — reads as a rule, not a border. */
.lo-announce::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(208, 160, 60, .45) 22%,
		rgba(208, 160, 60, .45) 78%,
		transparent
	);
	pointer-events: none;
}

.lo-announce__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--lo-s2);
	min-height: var(--lo-announce-h);
}

.lo-announce__track {
	position: relative;
	flex: 1 1 auto;
	max-width: 760px;
	min-height: var(--lo-announce-h);
}

.lo-announce__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--lo-s2);
	margin: 0;
	padding-block: 9px;
	text-align: center;
	line-height: 1.35;
	letter-spacing: .045em;
	font-weight: 600;
	color: var(--lo-gold-300);
	opacity: 0;
	visibility: hidden;
	transform: translateY(9px);
	pointer-events: none;
	transition:
		opacity .5s var(--lo-ease-out),
		transform .5s var(--lo-ease-out),
		visibility .5s linear;
}

.lo-announce__item.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

.lo-announce__item .lo-icon {
	color: var(--lo-gold-500);
	opacity: .95;
}

.lo-announce__item span {
	display: inline-block;
}

/* Tiny arrows — desktop reveals them on hover only, so the bar stays calm. */
.lo-announce__nav {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--lo-r-pill);
	background: transparent;
	color: var(--lo-gold-300);
	cursor: pointer;
	opacity: 0;
	transform: scale(.82);
	transition:
		opacity .28s var(--lo-ease),
		transform .28s var(--lo-ease-out),
		background-color .28s var(--lo-ease),
		border-color .28s var(--lo-ease),
		color .28s var(--lo-ease);
}

.lo-announce:hover .lo-announce__nav,
.lo-announce:focus-within .lo-announce__nav {
	opacity: .7;
	transform: none;
}

.lo-announce__nav:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .1);
	border-color: rgba(208, 160, 60, .55);
	color: var(--lo-gold-400);
}

.lo-announce__nav:focus-visible {
	opacity: 1;
	transform: none;
	outline-offset: 2px;
}


/* ==========================================================================
   03  Utility bar
   Thin cream strip: contact on the left, Urdu tagline + socials on the right.
   Desktop only — it disappears entirely below 1024px.
   ========================================================================== */

.lo-utility {
	position: relative;
	z-index: 2;
	background: var(--lo-cream);
	border-bottom: 1px solid var(--lo-line-soft);
	color: var(--lo-muted);
	font-size: var(--lo-fs-sm);
}

.lo-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lo-s5);
	min-height: var(--lo-utility-h);
}

.lo-utility__left,
.lo-utility__right {
	display: flex;
	align-items: center;
	gap: var(--lo-s4);
	min-width: 0;
}

.lo-utility__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--lo-body);
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
	transition: color .22s var(--lo-ease);
}

.lo-utility__link .lo-icon {
	color: var(--lo-green-600);
	transition: transform .32s var(--lo-ease-out), color .22s var(--lo-ease);
}

.lo-utility__link:hover {
	color: var(--lo-green-800);
}

.lo-utility__link:hover .lo-icon {
	color: var(--lo-gold-600);
	transform: translateY(-1px) scale(1.06);
}

.lo-utility__sep {
	display: block;
	flex: 0 0 auto;
	width: 1px;
	height: 15px;
	background: var(--lo-line);
}

/* Nastaliq needs room for its descenders — never crush the line-height. */
.lo-utility__tag {
	color: var(--lo-green-800);
	font-size: 0.9rem;
	line-height: 1.8;
	white-space: nowrap;
	opacity: .92;
}


/* ==========================================================================
   04  Header shell
   Grid: burger | brand | nav | actions.
   Sticky, white, and it condenses + blurs once the page has scrolled.
   ========================================================================== */

.lo-header {
	--lo-h: var(--lo-header-h);

	position: sticky;
	top: 0;
	z-index: var(--lo-z-header);
	background: var(--lo-paper);
	border-bottom: 1px solid var(--lo-line-soft);
	transition:
		box-shadow .4s var(--lo-ease),
		background-color .4s var(--lo-ease),
		border-color .4s var(--lo-ease);
}

.lo-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--lo-s3);
	min-height: var(--lo-h);
	transition: min-height .4s var(--lo-ease-out);
}

.lo-header.is-stuck {
	--lo-h: var(--lo-header-h-stuck);
	background: rgba(255, 255, 255, .9);
	border-bottom-color: var(--lo-line);
	box-shadow: 0 14px 34px -22px rgba(11, 59, 46, .5);
	-webkit-backdrop-filter: saturate(1.5) blur(14px);
	backdrop-filter: saturate(1.5) blur(14px);
}

/* Scrolling back up: nudge the elevation so the bar reads as "live". */
.lo-header.is-stuck.is-up {
	box-shadow: var(--lo-shadow);
}

.lo-brand {
	display: flex;
	align-items: center;
	min-width: 0;
}

/* WordPress custom logo (used instead of .lo-logo when one is uploaded). */
.lo-brand .custom-logo-link {
	display: block;
	line-height: 0;
}

.lo-brand .custom-logo {
	width: auto;
	max-height: calc(var(--lo-h) - 30px);
	transition: max-height .4s var(--lo-ease-out);
}

/* Keep the sticky header clear of the WordPress admin bar. */
.admin-bar .lo-header {
	top: 32px;
}


/* ==========================================================================
   05  Logo
   Fraunces wordmark over a wide-tracked gold sub-line.
   ========================================================================== */

.lo-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--lo-s3);
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.lo-logo__mark {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
	border-radius: 13px;
	transition: transform .5s var(--lo-ease-out), box-shadow .4s var(--lo-ease-out);
}

.lo-logo__mark svg {
	display: block;
	width: 44px;
	height: 44px;
	transition: width .4s var(--lo-ease-out), height .4s var(--lo-ease-out);
}

.lo-logo:hover .lo-logo__mark {
	transform: rotate(-5deg) scale(1.05);
	box-shadow: 0 12px 26px -14px rgba(11, 59, 46, .75);
}

.lo-logo__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	min-width: 0;
}

.lo-logo__text strong {
	display: block;
	font-family: var(--lo-font-display);
	font-weight: 700;
	font-size: 1.55rem;
	line-height: 1;
	letter-spacing: -.022em;
	color: var(--lo-green-900);
	transition: color .24s var(--lo-ease), font-size .4s var(--lo-ease-out);
}

.lo-logo__text em {
	display: block;
	font-family: var(--lo-font-body);
	font-style: normal;
	font-weight: 600;
	font-size: 9.5px;
	line-height: 1;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--lo-gold-600);
	transition: color .24s var(--lo-ease);
}

.lo-logo:hover .lo-logo__text strong {
	color: var(--lo-green-700);
}

.lo-logo:hover .lo-logo__text em {
	color: var(--lo-gold-500);
}

.lo-header.is-stuck .lo-logo__mark svg {
	width: 38px;
	height: 38px;
}

.lo-header.is-stuck .lo-logo__text strong {
	font-size: 1.38rem;
}

/* Small variant — drawer header. */
.lo-logo--sm .lo-logo__text strong { font-size: 1.32rem; }
.lo-logo--sm .lo-logo__text em { font-size: 9px; letter-spacing: .22em; }

/* Inverted variant — footer on green-950. */
.lo-logo--light .lo-logo__text strong { color: var(--lo-paper); }
.lo-logo--light .lo-logo__text em { color: var(--lo-gold-400); }
.lo-logo--light:hover .lo-logo__text strong { color: var(--lo-gold-300); }
.lo-logo--light:hover .lo-logo__text em { color: var(--lo-gold-300); }
.lo-logo--light:hover .lo-logo__mark { box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8); }


/* ==========================================================================
   06  Primary navigation
   Horizontal list with a gold underline that wipes in from the left,
   plus three levels of white dropdown cards.
   ========================================================================== */

.lo-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.lo-nav__list {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: clamp(2px, 1.1vw, 14px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lo-nav__list li {
	margin: 0;
	position: relative;
}

.lo-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 10px;
	font-family: var(--lo-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .005em;
	line-height: 1.2;
	color: var(--lo-ink);
	white-space: nowrap;
	transition: color .24s var(--lo-ease);
}

.lo-nav__list > li > a:hover,
.lo-nav__list > li:focus-within > a {
	color: var(--lo-green-800);
}

/* --- The animated gold underline ------------------------------------- */

.lo-nav__list > li > a > span {
	position: relative;
	display: inline-block;
}

.lo-nav__list > li > a > span::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--lo-gold-500), var(--lo-gold-600));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .42s var(--lo-ease-out);
}

.lo-nav__list > li:hover > a > span::after,
.lo-nav__list > li:focus-within > a > span::after,
.lo-nav__list > li.current-menu-item > a > span::after,
.lo-nav__list > li.current-menu-parent > a > span::after,
.lo-nav__list > li.current-menu-ancestor > a > span::after,
.lo-nav__list > li.current_page_item > a > span::after,
.lo-nav__list > li.current-product-ancestor > a > span::after {
	transform: scaleX(1);
}

.lo-nav__list > li.current-menu-item > a,
.lo-nav__list > li.current-menu-parent > a,
.lo-nav__list > li.current-menu-ancestor > a,
.lo-nav__list > li.current_page_item > a {
	color: var(--lo-green-900);
}

/* --- Parent indicator -------------------------------------------------- */

.lo-nav .menu-item-has-children > a::after {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 1.7px solid currentColor;
	border-bottom: 1.7px solid currentColor;
	border-radius: 1px;
	opacity: .5;
	transform: rotate(45deg);
	transition: transform .32s var(--lo-ease-out), opacity .24s var(--lo-ease);
}

.lo-nav__list > li.menu-item-has-children:hover > a::after,
.lo-nav__list > li.menu-item-has-children:focus-within > a::after {
	opacity: 1;
	transform: rotate(225deg) translate(-2px, -2px);
}

/* --- Dropdown cards ---------------------------------------------------- */

.lo-nav .sub-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: -14px;
	z-index: 30;
	min-width: 240px;
	max-width: 320px;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: var(--lo-paper);
	border: 1px solid var(--lo-line-soft);
	border-radius: var(--lo-r);
	box-shadow: var(--lo-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity .3s var(--lo-ease),
		transform .34s var(--lo-ease-out),
		visibility .34s linear;
}

/* Invisible bridge so the pointer can cross the 12px gap. */
.lo-nav__list > li > .sub-menu::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}

/* Little caret pointing back at the parent link. */
.lo-nav__list > li > .sub-menu::after {
	content: "";
	position: absolute;
	top: -6px;
	left: 26px;
	width: 11px;
	height: 11px;
	background: var(--lo-paper);
	border-left: 1px solid var(--lo-line-soft);
	border-top: 1px solid var(--lo-line-soft);
	transform: rotate(45deg);
	border-radius: 2px 0 0 0;
}

.lo-nav li:hover > .sub-menu,
.lo-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.lo-nav .sub-menu li {
	margin: 0;
	width: 100%;
}

.lo-nav .sub-menu a {
	display: flex;
	align-items: center;
	gap: var(--lo-s2);
	padding: 10px 13px;
	border-radius: var(--lo-r-sm);
	font-size: var(--lo-fs-base);
	font-weight: 600;
	line-height: 1.35;
	color: var(--lo-body);
	transition:
		background-color .24s var(--lo-ease),
		color .24s var(--lo-ease),
		padding-left .3s var(--lo-ease-out);
}

.lo-nav .sub-menu a > span {
	flex: 1 1 auto;
	min-width: 0;
}

.lo-nav .sub-menu a:hover,
.lo-nav .sub-menu a:focus-visible {
	background: var(--lo-green-50);
	color: var(--lo-green-900);
	padding-left: 18px;
}

.lo-nav .sub-menu .current-menu-item > a {
	background: var(--lo-green-50);
	color: var(--lo-green-900);
}

/* Level 3 flies out to the right of level 2. */
.lo-nav .sub-menu .sub-menu {
	top: -11px;
	left: calc(100% + 6px);
	transform: translate(10px, 0);
}

.lo-nav .sub-menu .sub-menu::before,
.lo-nav .sub-menu .sub-menu::after {
	content: none;
}

.lo-nav .sub-menu li:hover > .sub-menu,
.lo-nav .sub-menu li:focus-within > .sub-menu {
	transform: none;
}

/* Level 2 parents point sideways. */
.lo-nav .sub-menu .menu-item-has-children > a::after {
	margin: 0 0 0 auto;
	transform: rotate(-45deg);
}

.lo-nav .sub-menu .menu-item-has-children:hover > a::after,
.lo-nav .sub-menu .menu-item-has-children:focus-within > a::after {
	opacity: 1;
	transform: rotate(-45deg) translate(2px, -2px);
}

/* Keep the last few menus from spilling off the right edge. */
.lo-nav__list > li:nth-last-child(-n + 2) > .sub-menu {
	left: auto;
	right: -14px;
}

.lo-nav__list > li:nth-last-child(-n + 2) > .sub-menu::after {
	left: auto;
	right: 26px;
}

.lo-nav__list > li:nth-last-child(-n + 2) .sub-menu .sub-menu {
	left: auto;
	right: calc(100% + 6px);
	transform: translate(-10px, 0);
}


/* ==========================================================================
   07  Header actions
   ========================================================================== */

.lo-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--lo-s1);
}

.lo-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--lo-r-pill);
	background: transparent;
	color: var(--lo-green-900);
	cursor: pointer;
	text-decoration: none;
	transition:
		background-color .26s var(--lo-ease),
		border-color .26s var(--lo-ease),
		color .26s var(--lo-ease),
		transform .3s var(--lo-ease-out),
		box-shadow .3s var(--lo-ease-out);
}

.lo-action:hover,
.lo-action:focus-visible {
	background: var(--lo-green-50);
	border-color: var(--lo-line-soft);
	color: var(--lo-green-700);
	transform: translateY(-2px);
	box-shadow: var(--lo-shadow-xs);
}

.lo-action:active {
	transform: translateY(0);
}

.lo-action .lo-icon {
	transition: transform .34s var(--lo-ease-out);
}

.lo-action:hover .lo-icon {
	transform: scale(1.07);
}

/* --- Cart: icon + gold count badge + running subtotal ------------------ */

.lo-action--cart {
	width: auto;
	min-width: 44px;
	gap: 9px;
	padding: 0 15px 0 11px;
	border-radius: var(--lo-r-pill);
}

.lo-action--cart:hover {
	background: var(--lo-green-50);
}

.lo-action__count {
	position: absolute;
	top: 3px;
	left: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border: 2px solid var(--lo-paper);
	border-radius: var(--lo-r-pill);
	background: linear-gradient(135deg, var(--lo-gold-400), var(--lo-gold-600));
	color: var(--lo-green-950);
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 3px 8px -3px rgba(140, 99, 24, .8);
	transition: transform .3s var(--lo-ease-out), background-color .3s var(--lo-ease);
	pointer-events: none;
}

.lo-header.is-stuck .lo-action__count {
	border-color: rgba(255, 255, 255, .9);
}

.lo-action__total {
	display: inline-block;
	max-width: 118px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--lo-fs-sm);
	font-weight: 700;
	line-height: 1.2;
	color: var(--lo-green-900);
	letter-spacing: -.005em;
}

.lo-action__total .woocommerce-Price-amount,
.lo-action__total bdi {
	color: inherit;
	font: inherit;
}

/* The pop the JS triggers after an AJAX add-to-cart. */
.lo-action--cart.is-bump .lo-action__count {
	animation: lo-bump .68s var(--lo-ease-out);
}

.lo-action--cart.is-bump .lo-icon {
	animation: lo-nudge .68s var(--lo-ease-out);
}

@keyframes lo-bump {
	0%   { transform: scale(1); }
	28%  { transform: scale(1.45); background: var(--lo-gold-300); }
	55%  { transform: scale(.9); }
	78%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}

@keyframes lo-nudge {
	0%   { transform: translateY(0) scale(1); }
	35%  { transform: translateY(-4px) scale(1.1); }
	70%  { transform: translateY(1px) scale(.97); }
	100% { transform: translateY(0) scale(1); }
}


/* ==========================================================================
   08  Burger
   ========================================================================== */

.lo-burger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--lo-line);
	border-radius: var(--lo-r-sm);
	background: var(--lo-paper);
	cursor: pointer;
	transition:
		background-color .26s var(--lo-ease),
		border-color .26s var(--lo-ease),
		box-shadow .3s var(--lo-ease-out);
}

.lo-burger:hover {
	background: var(--lo-green-50);
	border-color: var(--lo-green-200);
	box-shadow: var(--lo-shadow-xs);
}

.lo-burger span {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--lo-green-900);
	transition:
		transform .38s var(--lo-ease-out),
		opacity .2s var(--lo-ease),
		width .34s var(--lo-ease-out);
}

.lo-burger span:nth-child(2) { width: 14px; margin-right: 6px; }

.lo-burger:hover span:nth-child(2) { width: 20px; margin-right: 0; }

body.lo-drawer-open .lo-burger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

body.lo-drawer-open .lo-burger span:nth-child(2) {
	opacity: 0;
	transform: scaleX(.2);
}

body.lo-drawer-open .lo-burger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}


/* ==========================================================================
   09  Search overlay
   Scrim fades, cream panel slides down from the top edge.
   Driven by body.lo-search-open.
   ========================================================================== */

.lo-searchbox {
	position: fixed;
	inset: 0;
	z-index: var(--lo-z-search);
}

.lo-searchbox__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(6, 37, 28, .58);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	opacity: 0;
	cursor: pointer;
	transition: opacity .42s var(--lo-ease);
}

.lo-searchbox__panel {
	position: relative;
	z-index: 2;
	max-height: 100vh;
	max-height: 100dvh;
	overflow-y: auto;
	padding-block: clamp(var(--lo-s6), 5vw, var(--lo-s9)) clamp(var(--lo-s7), 5vw, var(--lo-s8));
	background: var(--lo-cream);
	background-image:
		radial-gradient(120% 160% at 8% -30%, var(--lo-green-50) 0%, transparent 58%),
		radial-gradient(90% 150% at 96% -20%, var(--lo-gold-100) 0%, transparent 55%);
	border-radius: 0 0 var(--lo-r-xl) var(--lo-r-xl);
	box-shadow: 0 40px 80px -34px rgba(6, 37, 28, .6);
	opacity: 0;
	transform: translateY(-100%);
	transition:
		transform .55s var(--lo-ease-out),
		opacity .35s var(--lo-ease);
}

body.lo-search-open .lo-searchbox__scrim { opacity: 1; }
body.lo-search-open .lo-searchbox__panel { opacity: 1; transform: none; }

.lo-searchbox__panel .lo-container {
	position: relative;
}

.lo-searchbox__panel .lo-eyebrow {
	margin-bottom: var(--lo-s4);
}

.lo-searchbox__close {
	position: absolute;
	top: -6px;
	right: var(--lo-gutter);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--lo-line);
	border-radius: var(--lo-r-pill);
	background: var(--lo-paper);
	color: var(--lo-green-900);
	cursor: pointer;
	transition:
		background-color .26s var(--lo-ease),
		color .26s var(--lo-ease),
		transform .4s var(--lo-ease-out),
		box-shadow .3s var(--lo-ease-out);
}

.lo-searchbox__close:hover {
	background: var(--lo-green-900);
	color: var(--lo-paper);
	transform: rotate(90deg);
	box-shadow: var(--lo-shadow);
}

/* --- The big pill input ------------------------------------------------ */

.lo-searchbox__form {
	display: flex;
	align-items: center;
	gap: var(--lo-s3);
	padding: 8px 8px 8px 24px;
	background: var(--lo-paper);
	border: 1px solid var(--lo-line);
	border-radius: var(--lo-r-pill);
	box-shadow: var(--lo-shadow-sm);
	transition: border-color .28s var(--lo-ease), box-shadow .34s var(--lo-ease-out);
}

.lo-searchbox__form:focus-within {
	border-color: var(--lo-green-300);
	box-shadow: var(--lo-shadow);
}

.lo-searchbox__form > .lo-icon {
	flex: 0 0 auto;
	color: var(--lo-green-600);
}

.lo-searchbox__form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 15px 0;
	border: 0;
	outline: none;
	background: transparent;
	font-family: var(--lo-font-body);
	font-size: clamp(1rem, .78rem + 1.1vw, 1.4rem);
	font-weight: 500;
	color: var(--lo-ink);
	-webkit-appearance: none;
	appearance: none;
}

.lo-searchbox__form input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.lo-searchbox__form input[type="search"]::placeholder {
	color: var(--lo-muted);
	font-weight: 400;
	opacity: 1;
}

.lo-searchbox__form .lo-btn {
	flex: 0 0 auto;
	padding-inline: 34px;
}

/* --- Popular tags ------------------------------------------------------ */

.lo-searchbox__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lo-s2);
	margin-top: var(--lo-s5);
}

.lo-searchbox__tags > span {
	margin-right: var(--lo-s1);
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lo-muted);
}

.lo-searchbox__tags a {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border: 1px solid var(--lo-line);
	border-radius: var(--lo-r-pill);
	background: var(--lo-paper);
	font-size: var(--lo-fs-sm);
	font-weight: 600;
	color: var(--lo-body);
	transition:
		background-color .24s var(--lo-ease),
		border-color .24s var(--lo-ease),
		color .24s var(--lo-ease),
		transform .3s var(--lo-ease-out);
}

.lo-searchbox__tags a:hover {
	background: var(--lo-green-900);
	border-color: var(--lo-green-900);
	color: var(--lo-paper);
	transform: translateY(-2px);
}


/* ==========================================================================
   10  Mobile drawer
   Scrim + 340px panel sliding in from the LEFT. body.lo-drawer-open.
   ========================================================================== */

.lo-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--lo-z-drawer);
}

.lo-drawer__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(6, 37, 28, .52);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	cursor: pointer;
	transition: opacity .42s var(--lo-ease);
}

.lo-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: min(var(--lo-drawer-w), 88vw);
	background: var(--lo-paper);
	box-shadow: 24px 0 70px -30px rgba(6, 37, 28, .75);
	transform: translateX(-100%);
	transition: transform .48s var(--lo-ease-out);
}

body.lo-drawer-open .lo-drawer__scrim { opacity: 1; }
body.lo-drawer-open .lo-drawer__panel { transform: none; }

/* --- Head -------------------------------------------------------------- */

.lo-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lo-s3);
	flex: 0 0 auto;
	padding: var(--lo-s4) var(--lo-s5);
	background: var(--lo-cream);
	border-bottom: 1px solid var(--lo-line-soft);
}

.lo-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	padding: 0;
	border: 1px solid var(--lo-line);
	border-radius: var(--lo-r-pill);
	background: var(--lo-paper);
	color: var(--lo-green-900);
	cursor: pointer;
	transition:
		background-color .26s var(--lo-ease),
		color .26s var(--lo-ease),
		transform .4s var(--lo-ease-out);
}

.lo-drawer__close:hover {
	background: var(--lo-green-900);
	color: var(--lo-paper);
	transform: rotate(90deg);
}

/* --- Body / menu ------------------------------------------------------- */

.lo-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: var(--lo-s3) 0 var(--lo-s5);
}

.lo-drawer__menu,
.lo-drawer__menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lo-drawer__menu > li {
	margin: 0;
	border-bottom: 1px solid var(--lo-line-soft);
}

.lo-drawer__menu > li:last-child { border-bottom: 0; }

.lo-drawer__menu li { margin: 0; }

.lo-drawer__menu a {
	display: block;
	padding: 14px var(--lo-s5);
	font-family: var(--lo-font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lo-ink);
	transition: color .22s var(--lo-ease), background-color .22s var(--lo-ease), padding-left .3s var(--lo-ease-out);
}

.lo-drawer__menu a:hover,
.lo-drawer__menu a:focus-visible {
	color: var(--lo-green-700);
	background: var(--lo-green-50);
}

.lo-drawer__menu > li.current-menu-item > a,
.lo-drawer__menu > li.current-menu-ancestor > a,
.lo-drawer__menu > li.current_page_item > a {
	color: var(--lo-green-800);
	box-shadow: inset 3px 0 0 0 var(--lo-gold-500);
}

/* Parent rows become a 2x2 grid: link | toggle  /  submenu (spanning).
   Collapsing uses grid-template-rows 0fr -> 1fr, no JS height maths. */
.lo-drawer__menu .menu-item-has-children {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto 0fr;
	align-items: center;
	transition: grid-template-rows .42s var(--lo-ease-out);
}

.lo-drawer__menu .menu-item-has-children > a {
	grid-column: 1;
	grid-row: 1;
}

.lo-drawer__menu .menu-item-has-children > .sub-menu {
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: stretch;
	min-height: 0;
	overflow: hidden;
}

.lo-drawer__menu .menu-item-has-children.is-open {
	grid-template-rows: auto 1fr;
}

.lo-drawer__toggle {
	grid-column: 2;
	grid-row: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-right: var(--lo-s3);
	padding: 0;
	border: 1px solid var(--lo-line-soft);
	border-radius: var(--lo-r-pill);
	background: var(--lo-cream);
	color: var(--lo-green-800);
	cursor: pointer;
	transition: background-color .24s var(--lo-ease), color .24s var(--lo-ease), border-color .24s var(--lo-ease);
}

.lo-drawer__toggle svg {
	transition: transform .4s var(--lo-ease-out);
}

.lo-drawer__toggle:hover {
	background: var(--lo-green-100);
	border-color: var(--lo-green-200);
	color: var(--lo-green-900);
}

.menu-item-has-children.is-open > .lo-drawer__toggle {
	background: var(--lo-green-900);
	border-color: var(--lo-green-900);
	color: var(--lo-paper);
}

.menu-item-has-children.is-open > .lo-drawer__toggle svg {
	transform: rotate(180deg);
}

/* Nested levels */
.lo-drawer__menu .sub-menu {
	background: var(--lo-cream);
	box-shadow: inset 0 1px 0 0 var(--lo-line-soft);
}

.lo-drawer__menu .sub-menu a {
	padding-left: calc(var(--lo-s5) + var(--lo-s4));
	font-size: 16px;
	font-weight: 500;
	color: var(--lo-body);
}

.lo-drawer__menu .sub-menu .sub-menu a {
	padding-left: calc(var(--lo-s5) + var(--lo-s7));
	font-size: 15px;
}

.lo-drawer__menu .sub-menu .lo-drawer__toggle {
	width: 36px;
	height: 36px;
	background: var(--lo-paper);
}

/* --- Foot -------------------------------------------------------------- */

.lo-drawer__foot {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--lo-s3);
	padding: var(--lo-s5);
	background: var(--lo-cream);
	border-top: 1px solid var(--lo-line-soft);
}

.lo-drawer__call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lo-s2);
	padding: 12px 18px;
	border: 1px dashed var(--lo-green-200);
	border-radius: var(--lo-r);
	background: var(--lo-green-50);
	font-size: var(--lo-fs-base);
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--lo-green-800);
	transition: background-color .24s var(--lo-ease), border-color .24s var(--lo-ease), color .24s var(--lo-ease);
}

.lo-drawer__call:hover {
	background: var(--lo-green-100);
	border-color: var(--lo-green-300);
	color: var(--lo-green-900);
}

.lo-drawer__foot .lo-social {
	justify-content: center;
	padding-top: var(--lo-s1);
}


/* ==========================================================================
   11  Assurance strip
   Sits between the page and the dark footer, on sand.
   ========================================================================== */

.lo-assure {
	position: relative;
	background: var(--lo-sand);
	background-image: linear-gradient(180deg, var(--lo-cream) 0%, var(--lo-sand) 100%);
	border-top: 1px solid var(--lo-line-soft);
	padding-block: clamp(var(--lo-s6), 4vw, var(--lo-s8));
}

.lo-assure__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--lo-s5) var(--lo-s6);
}

.lo-assure__item {
	display: flex;
	align-items: flex-start;
	gap: var(--lo-s4);
	min-width: 0;
}

.lo-assure__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: var(--lo-r-pill);
	background: var(--lo-green-100);
	color: var(--lo-green-800);
	box-shadow: inset 0 0 0 1px rgba(11, 59, 46, .06);
	transition:
		background-color .3s var(--lo-ease),
		color .3s var(--lo-ease),
		transform .42s var(--lo-ease-out),
		box-shadow .34s var(--lo-ease-out);
}

.lo-assure__item:hover .lo-assure__icon {
	background: var(--lo-green-900);
	color: var(--lo-gold-400);
	transform: translateY(-4px) rotate(-6deg);
	box-shadow: var(--lo-shadow);
}

.lo-assure__item > div {
	min-width: 0;
	padding-top: 3px;
}

.lo-assure__item strong {
	display: block;
	font-family: var(--lo-font-body);
	font-size: var(--lo-fs-md);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.005em;
	color: var(--lo-ink);
	margin-bottom: 3px;
}

.lo-assure__item span {
	display: block;
	font-size: var(--lo-fs-base);
	line-height: 1.5;
	color: var(--lo-muted);
}


/* ==========================================================================
   12  Footer
   ========================================================================== */

.lo-footer {
	position: relative;
	background: var(--lo-green-950);
	color: rgba(255, 255, 255, .68);
	font-size: var(--lo-fs-base);
}

.lo-footer__main {
	position: relative;
	padding-block: clamp(var(--lo-s8), 6vw, var(--lo-s10));
	background-image:
		radial-gradient(80% 120% at 4% 0%, rgba(28, 123, 87, .32) 0%, transparent 58%),
		radial-gradient(70% 110% at 98% 8%, rgba(140, 99, 24, .22) 0%, transparent 60%);
}

.lo-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr;
	gap: clamp(var(--lo-s6), 3.4vw, var(--lo-s8)) clamp(var(--lo-s5), 2.6vw, var(--lo-s7));
	align-items: start;
}

.lo-footer__col {
	min-width: 0;
}

.lo-footer__col--brand {
	padding-right: var(--lo-s5);
}

.lo-footer__col--brand .lo-logo {
	margin-bottom: var(--lo-s5);
}

.lo-footer__blurb {
	max-width: 40ch;
	margin-bottom: var(--lo-s4);
	font-size: var(--lo-fs-base);
	line-height: 1.75;
	color: rgba(255, 255, 255, .62);
}

.lo-footer__urdu {
	margin-bottom: var(--lo-s5);
	color: var(--lo-gold-300);
	font-size: 1rem;
	opacity: .92;
}

/* --- Column titles ----------------------------------------------------- */

.lo-footer__title {
	position: relative;
	margin: 0 0 var(--lo-s6);
	padding-bottom: var(--lo-s3);
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-lg);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--lo-paper);
}

.lo-footer__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--lo-gold-500), rgba(208, 160, 60, 0));
}

/* --- Link columns ------------------------------------------------------ */

.lo-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lo-footer__menu li {
	margin: 0 0 var(--lo-s1);
}

.lo-footer__menu a {
	display: inline-flex;
	align-items: center;
	gap: var(--lo-s2);
	padding: 6px 0;
	font-size: var(--lo-fs-base);
	font-weight: 500;
	line-height: 1.45;
	color: rgba(255, 255, 255, .68);
	transition: color .24s var(--lo-ease), transform .32s var(--lo-ease-out);
}

.lo-footer__menu a::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-top: 1.6px solid currentColor;
	border-right: 1.6px solid currentColor;
	border-radius: 1px;
	opacity: .35;
	transform: rotate(45deg) translateX(-2px);
	transition: transform .32s var(--lo-ease-out), opacity .24s var(--lo-ease);
}

.lo-footer__menu a:hover,
.lo-footer__menu a:focus-visible {
	color: var(--lo-gold-400);
	transform: translateX(4px);
}

.lo-footer__menu a:hover::before,
.lo-footer__menu a:focus-visible::before {
	opacity: 1;
	transform: rotate(45deg) translateX(1px);
}

.lo-footer__menu .current-menu-item > a {
	color: var(--lo-gold-300);
}

/* --- Contact list ------------------------------------------------------ */

.lo-contactlist {
	margin: 0 0 var(--lo-s5);
	padding: 0;
	list-style: none;
}

.lo-contactlist li {
	display: flex;
	align-items: flex-start;
	gap: var(--lo-s3);
	margin: 0 0 var(--lo-s4);
	font-size: var(--lo-fs-base);
	line-height: 1.6;
	color: rgba(255, 255, 255, .68);
}

.lo-contactlist li:last-child { margin-bottom: 0; }

.lo-contactlist .lo-icon {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--lo-gold-500);
}

.lo-contactlist a {
	color: rgba(255, 255, 255, .78);
	font-weight: 600;
	transition: color .22s var(--lo-ease);
}

.lo-contactlist a:hover {
	color: var(--lo-gold-400);
}

/* --- DRAP badge -------------------------------------------------------- */

.lo-drap {
	display: flex;
	align-items: flex-start;
	gap: var(--lo-s3);
	padding: var(--lo-s4);
	border: 1px solid rgba(208, 160, 60, .34);
	border-radius: var(--lo-r);
	background: rgba(255, 255, 255, .04);
	font-size: var(--lo-fs-sm);
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--lo-gold-300);
	transition: border-color .3s var(--lo-ease), background-color .3s var(--lo-ease);
}

.lo-drap:hover {
	border-color: rgba(208, 160, 60, .6);
	background: rgba(255, 255, 255, .07);
}

.lo-drap .lo-icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--lo-gold-500);
}

.lo-drap small {
	display: block;
	margin-top: 5px;
	font-size: var(--lo-fs-xs);
	font-weight: 500;
	letter-spacing: .01em;
	line-height: 1.5;
	color: rgba(255, 255, 255, .5);
	text-transform: none;
}


/* ==========================================================================
   13  Footer bar
   ========================================================================== */

.lo-footer__bar {
	background: rgba(0, 0, 0, .3);
	border-top: 1px solid rgba(255, 255, 255, .07);
	padding-block: var(--lo-s5);
	font-size: var(--lo-fs-sm);
}

.lo-footer__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--lo-s4) var(--lo-s5);
}

.lo-copy {
	flex: 1 1 320px;
	margin: 0;
	max-width: 56ch;
	line-height: 1.6;
	color: rgba(255, 255, 255, .5);
}

.lo-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lo-s2) var(--lo-s4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lo-legal li {
	position: relative;
	margin: 0;
}

.lo-legal li + li::before {
	content: "";
	position: absolute;
	left: calc(var(--lo-s4) / -2);
	top: 50%;
	width: 1px;
	height: 12px;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .18);
}

.lo-legal a {
	font-size: var(--lo-fs-sm);
	font-weight: 600;
	color: rgba(255, 255, 255, .58);
	transition: color .22s var(--lo-ease);
}

.lo-legal a:hover {
	color: var(--lo-gold-400);
}

.lo-pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lo-s2);
}

.lo-pay__chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--lo-r-sm);
	background: rgba(255, 255, 255, .05);
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.3;
	white-space: nowrap;
	color: rgba(255, 255, 255, .68);
	transition: border-color .26s var(--lo-ease), color .26s var(--lo-ease), background-color .26s var(--lo-ease);
}

.lo-pay__chip:hover {
	border-color: rgba(208, 160, 60, .5);
	background: rgba(255, 255, 255, .09);
	color: var(--lo-gold-300);
}


/* ==========================================================================
   14  Social links
   Base = light surfaces (utility bar, drawer). Footer inverts.
   ========================================================================== */

.lo-social {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--lo-s2);
}

.lo-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--lo-line);
	border-radius: var(--lo-r-pill);
	color: var(--lo-green-800);
	transition:
		background-color .28s var(--lo-ease),
		border-color .28s var(--lo-ease),
		color .28s var(--lo-ease),
		transform .34s var(--lo-ease-out),
		box-shadow .34s var(--lo-ease-out);
}

.lo-social a:hover,
.lo-social a:focus-visible {
	background: linear-gradient(135deg, var(--lo-gold-400), var(--lo-gold-600));
	border-color: transparent;
	color: var(--lo-green-950);
	transform: translateY(-3px);
	box-shadow: var(--lo-shadow-gold);
}

.lo-social--sm a {
	width: 30px;
	height: 30px;
	border-color: var(--lo-line-soft);
	color: var(--lo-muted);
}

.lo-social--sm a:hover {
	color: var(--lo-green-950);
	transform: translateY(-2px);
}

/* Inverted context */
.lo-footer .lo-social a {
	border-color: rgba(255, 255, 255, .18);
	color: rgba(255, 255, 255, .78);
}

.lo-footer .lo-social a:hover,
.lo-footer .lo-social a:focus-visible {
	color: var(--lo-green-950);
	border-color: transparent;
}


/* ==========================================================================
   15  Floating WhatsApp
   Icon-only pill bottom-left; expands to reveal its label on hover.
   ========================================================================== */

.lo-wa {
	position: fixed;
	left: clamp(14px, 2.2vw, 26px);
	bottom: clamp(14px, 2.2vw, 26px);
	z-index: var(--lo-z-fab);
	display: inline-flex;
	align-items: center;
	gap: 11px;
	width: 58px;
	height: 58px;
	padding-left: 16px;
	border-radius: var(--lo-r-pill);
	background: var(--lo-green-500);
	color: var(--lo-paper);
	overflow: hidden;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 14px 32px -12px rgba(28, 123, 87, .7);
	transition:
		width .48s var(--lo-ease-out),
		background-color .3s var(--lo-ease),
		box-shadow .34s var(--lo-ease-out),
		transform .34s var(--lo-ease-out);
}

.lo-wa .lo-icon {
	flex: 0 0 auto;
}

.lo-wa span {
	flex: 0 0 auto;
	padding-right: 20px;
	font-size: var(--lo-fs-base);
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity .26s var(--lo-ease), transform .38s var(--lo-ease-out);
}

.lo-wa:hover,
.lo-wa:focus-visible {
	width: 196px;
	background: var(--lo-green-400);
	color: var(--lo-paper);
	transform: translateY(-2px);
	box-shadow: 0 20px 42px -14px rgba(28, 123, 87, .8);
}

.lo-wa:hover span,
.lo-wa:focus-visible span {
	opacity: 1;
	transform: none;
	transition-delay: .08s;
}

/* Faint inner ring for a little dimension (an outer ring would be clipped
   by the overflow:hidden the width transition depends on). */
.lo-wa::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--lo-r-pill);
	box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .28);
	pointer-events: none;
}


/* ==========================================================================
   16  Back to top
   ========================================================================== */

.lo-top {
	position: fixed;
	right: clamp(14px, 2.2vw, 26px);
	bottom: clamp(14px, 2.2vw, 26px);
	z-index: var(--lo-z-fab);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--lo-line);
	border-radius: var(--lo-r-pill);
	background: var(--lo-paper);
	color: var(--lo-green-900);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px) scale(.9);
	box-shadow: var(--lo-shadow);
	transition:
		opacity .38s var(--lo-ease),
		transform .44s var(--lo-ease-out),
		visibility .38s linear,
		background-color .26s var(--lo-ease),
		color .26s var(--lo-ease),
		border-color .26s var(--lo-ease);
}

.lo-top .lo-icon {
	transform: rotate(180deg);
	transition: transform .34s var(--lo-ease-out);
}

.lo-top.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.lo-top:hover {
	background: var(--lo-green-900);
	border-color: var(--lo-green-900);
	color: var(--lo-paper);
}

.lo-top:hover .lo-icon {
	transform: rotate(180deg) translateY(3px);
}


/* ==========================================================================
   17  Breadcrumbs
   ========================================================================== */

.lo-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	font-size: var(--lo-fs-sm);
	font-weight: 600;
	letter-spacing: .015em;
	color: var(--lo-muted);
}

.lo-crumbs a {
	color: var(--lo-body);
	transition: color .22s var(--lo-ease);
}

.lo-crumbs a:hover {
	color: var(--lo-gold-600);
}

.lo-crumbs > span:last-child {
	color: var(--lo-green-800);
}

.lo-crumbs__sep {
	display: inline-flex;
	align-items: center;
	color: var(--lo-muted);
	opacity: .5;
}

/* On the dark hero the crumbs go light. */
.lo-phero .lo-crumbs {
	justify-content: center;
	margin-bottom: var(--lo-s5);
	color: rgba(255, 255, 255, .6);
}

.lo-phero .lo-crumbs a { color: rgba(255, 255, 255, .78); }
.lo-phero .lo-crumbs a:hover { color: var(--lo-gold-400); }
.lo-phero .lo-crumbs > span:last-child { color: var(--lo-gold-300); }
.lo-phero .lo-crumbs__sep { color: rgba(255, 255, 255, .45); opacity: 1; }


/* ==========================================================================
   18  Page hero
   Tall banner, cover image, deep green veil, centred Fraunces title
   and an oversized leaf watermark bottom-right.
   ========================================================================== */

.lo-phero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	isolation: isolate;
	min-height: clamp(280px, 30vw, 420px);
	padding-block: clamp(var(--lo-s8), 6vw, var(--lo-s10));
	overflow: hidden;
	background-color: var(--lo-green-900);
	background-position: center 42%;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
	scroll-margin-top: var(--lo-header-h);
}

/* Without a photo it still reads as a designed field, not a flat block. */
.lo-phero:not(.has-img) {
	background-image:
		radial-gradient(90% 130% at 12% 0%, var(--lo-green-800) 0%, transparent 62%),
		radial-gradient(80% 120% at 92% 10%, rgba(140, 99, 24, .5) 0%, transparent 60%),
		linear-gradient(160deg, var(--lo-green-900) 0%, var(--lo-green-950) 100%);
}

.lo-phero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(6, 37, 28, .82) 0%, rgba(6, 37, 28, .58) 45%, rgba(6, 37, 28, .88) 100%),
		linear-gradient(105deg, rgba(11, 59, 46, .72) 0%, rgba(11, 59, 46, .18) 62%);
	pointer-events: none;
}

.lo-phero:not(.has-img) .lo-phero__veil {
	background: linear-gradient(180deg, rgba(6, 37, 28, .3) 0%, rgba(6, 37, 28, .55) 100%);
}

.lo-phero .lo-container {
	position: relative;
	z-index: 2;
}

.lo-phero__title {
	max-width: 18ch;
	margin: 0 auto;
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-4xl);
	font-weight: 600;
	line-height: var(--lo-lh-tight);
	letter-spacing: -.02em;
	color: var(--lo-paper);
	text-shadow: 0 12px 34px rgba(6, 37, 28, .5);
}

.lo-phero__title .lo-accent {
	color: var(--lo-gold-400);
}

.lo-phero__sub {
	max-width: 62ch;
	margin: var(--lo-s5) auto 0;
	font-size: var(--lo-fs-md);
	line-height: 1.7;
	color: rgba(255, 255, 255, .76);
}

/* Left-aligned variant */
.lo-phero--left { text-align: left; }
.lo-phero--left .lo-crumbs { justify-content: flex-start; }
.lo-phero--left .lo-phero__title { margin-inline: 0; max-width: 22ch; }
.lo-phero--left .lo-phero__sub { margin-inline: 0; }

/* Leaf watermark */
.lo-phero__leaf {
	position: absolute;
	right: clamp(-40px, -2vw, 0px);
	bottom: clamp(-56px, -3vw, -20px);
	z-index: 1;
	display: block;
	width: clamp(210px, 32vw, 420px);
	color: var(--lo-paper);
	opacity: .07;
	transform: rotate(-14deg);
	pointer-events: none;
}

.lo-phero__leaf svg {
	width: 100%;
	height: auto;
	stroke-width: .7;
}


/* ==========================================================================
   19  Body states / scroll lock
   ========================================================================== */

body.lo-drawer-open,
body.lo-search-open {
	overflow: hidden;
}

/* Overlays outrank the sticky header while they are open. */
body.lo-search-open .lo-header,
body.lo-drawer-open .lo-header {
	z-index: 700;
}

/* Keep the floating controls out of the way of an open overlay. */
body.lo-drawer-open .lo-wa,
body.lo-search-open .lo-wa,
body.lo-drawer-open .lo-top,
body.lo-search-open .lo-top {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}


/* ==========================================================================
   20  Responsive
   Breakpoints: 1200 / 1024 / 860 / 620 / 430
   ========================================================================== */

/* --- <= 1200px --------------------------------------------------------- */
@media (max-width: 1200px) {

	.lo-header {
		--lo-header-h: 78px;
	}

	.lo-nav__list > li > a {
		padding-inline: 8px;
		font-size: 14.5px;
	}

	.lo-action__total {
		max-width: 92px;
	}

	.lo-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1fr 1.25fr;
	}
}

/* --- <= 1024px : nav collapses into the drawer ------------------------- */
@media (max-width: 1024px) {

	.lo-utility {
		display: none;
	}

	.lo-nav {
		display: none;
	}

	.lo-burger {
		display: inline-flex;
	}

	.lo-header {
		--lo-header-h: 72px;
		--lo-header-h-stuck: 62px;
	}

	.lo-header__inner {
		gap: var(--lo-s3);
	}

	.lo-logo__mark svg,
	.lo-header.is-stuck .lo-logo__mark svg {
		width: 40px;
		height: 40px;
	}

	.lo-logo__text strong,
	.lo-header.is-stuck .lo-logo__text strong {
		font-size: 1.34rem;
	}

	.lo-searchbox__panel {
		border-radius: 0 0 var(--lo-r-lg) var(--lo-r-lg);
	}

	.lo-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lo-s7) var(--lo-s6);
	}

	.lo-footer__col--brand {
		grid-column: 1 / -1;
		padding-right: 0;
	}

	.lo-footer__blurb {
		max-width: 62ch;
	}

	.lo-footer__col--contact {
		grid-column: 1 / -1;
	}

	.lo-contactlist {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lo-s4) var(--lo-s6);
	}

	.lo-contactlist li {
		margin-bottom: 0;
	}
}

/* --- <= 860px ---------------------------------------------------------- */
@media (max-width: 860px) {

	.lo-action__total {
		display: none;
	}

	.lo-action--cart {
		width: 44px;
		min-width: 44px;
		padding: 0;
	}

	.lo-action--cart .lo-action__count {
		top: 1px;
		left: auto;
		right: 0;
	}

	.lo-assure__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lo-s5) var(--lo-s5);
	}

	.lo-assure__icon {
		width: 48px;
		height: 48px;
	}

	/* WhatsApp stays a compact icon button on touch devices. */
	.lo-wa {
		width: 54px;
		height: 54px;
		padding-left: 14px;
	}

	.lo-wa span {
		display: none;
	}

	.lo-wa:hover,
	.lo-wa:focus-visible {
		width: 54px;
	}

	.lo-top {
		width: 44px;
		height: 44px;
	}

	.lo-footer__bar-inner {
		justify-content: flex-start;
		gap: var(--lo-s4);
	}

	.lo-copy {
		flex: 1 1 100%;
	}
}

/* --- <= 620px ---------------------------------------------------------- */
@media (max-width: 620px) {

	.lo-announce {
		font-size: 11px;
	}

	.lo-announce__nav {
		display: none;
	}

	/* Two lines of copy have to fit without clipping at 375px. */
	.lo-announce__inner,
	.lo-announce__track {
		min-height: 48px;
	}

	.lo-announce__item {
		gap: 7px;
		padding-block: 7px;
		letter-spacing: .03em;
	}

	.lo-header {
		--lo-header-h: 66px;
		--lo-header-h-stuck: 60px;
	}

	.lo-header__inner {
		gap: var(--lo-s2);
	}

	.lo-action--hide-sm {
		display: none;
	}

	.lo-logo {
		gap: var(--lo-s2);
	}

	.lo-logo__mark svg,
	.lo-header.is-stuck .lo-logo__mark svg {
		width: 36px;
		height: 36px;
	}

	.lo-logo__text strong,
	.lo-header.is-stuck .lo-logo__text strong {
		font-size: 1.2rem;
	}

	.lo-logo__text em {
		font-size: 8.5px;
		letter-spacing: .2em;
	}

	/* Search: the gold button drops on to its own row. */
	.lo-searchbox__form {
		flex-wrap: wrap;
		padding: 6px var(--lo-s4) var(--lo-s4);
		border-radius: var(--lo-r-lg);
	}

	.lo-searchbox__form input[type="search"] {
		padding-block: 13px;
	}

	.lo-searchbox__form .lo-btn {
		flex: 1 0 100%;
		width: 100%;
		padding-inline: var(--lo-s5);
	}

	.lo-searchbox__close {
		top: -10px;
		width: 42px;
		height: 42px;
	}

	.lo-searchbox__tags {
		gap: 7px;
	}

	.lo-searchbox__tags a {
		padding: 6px 13px;
		font-size: var(--lo-fs-xs);
	}

	.lo-drawer__panel {
		width: min(320px, 90vw);
	}

	.lo-drawer__menu a {
		padding-inline: var(--lo-s4);
		font-size: 17px;
	}

	.lo-drawer__menu .sub-menu a {
		padding-left: calc(var(--lo-s4) + var(--lo-s5));
	}

	.lo-drawer__top,
	.lo-drawer__foot {
		padding: var(--lo-s4);
	}

	.lo-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lo-s7);
	}

	.lo-footer__title {
		margin-bottom: var(--lo-s5);
	}

	.lo-contactlist {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lo-s4);
	}

	.lo-legal {
		gap: var(--lo-s2) var(--lo-s4);
	}

	.lo-phero {
		min-height: 260px;
		padding-block: var(--lo-s8);
	}

	.lo-phero__leaf {
		width: 200px;
		opacity: .06;
	}
}

/* --- <= 480px : assurance strip goes single column --------------------- */
@media (max-width: 480px) {

	.lo-assure__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lo-s5);
	}

	.lo-assure__item {
		gap: var(--lo-s3);
	}
}

/* --- <= 430px ---------------------------------------------------------- */
@media (max-width: 430px) {

	.lo-burger,
	.lo-action {
		width: 40px;
		height: 40px;
	}

	.lo-action--cart {
		width: 40px;
		min-width: 40px;
	}

	.lo-logo__text strong,
	.lo-header.is-stuck .lo-logo__text strong {
		font-size: 1.1rem;
	}

	.lo-searchbox__panel {
		padding-block: var(--lo-s7) var(--lo-s6);
	}

	.lo-social a {
		width: 36px;
		height: 36px;
	}

	.lo-pay__chip {
		padding: 5px 10px;
		font-size: 11px;
	}

	.lo-phero__title {
		max-width: none;
	}
}

/* --- Coarse pointers: hover reveals are unreliable, so keep arrows out -- */
@media (hover: none) {

	.lo-announce__nav {
		opacity: .6;
		transform: none;
	}

	.lo-nav .sub-menu {
		transition: none;
	}
}


/* ==========================================================================
   21  Reduced motion + print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	/* Overlays still need to arrive instantly rather than slide. */
	.lo-searchbox__panel,
	.lo-drawer__panel {
		transition: none;
	}

	.lo-action--cart.is-bump .lo-action__count,
	.lo-action--cart.is-bump .lo-icon {
		animation: none;
	}
}

@media print {

	.lo-announce,
	.lo-utility,
	.lo-burger,
	.lo-actions,
	.lo-searchbox,
	.lo-drawer,
	.lo-wa,
	.lo-top,
	.lo-assure,
	.lo-footer__bar .lo-pay {
		display: none !important;
	}

	.lo-header {
		position: static;
		box-shadow: none;
	}

	.lo-footer,
	.lo-footer__main {
		background: none;
		color: var(--lo-ink);
	}

	.lo-phero {
		min-height: 0;
		padding-block: var(--lo-s5);
		background: none;
		color: var(--lo-ink);
	}

	.lo-phero__veil,
	.lo-phero__leaf {
		display: none;
	}

	.lo-phero__title {
		color: var(--lo-ink);
		text-shadow: none;
	}
}