/* ==========================================================================
   Naturamia header widgets — Cart · User · My Account
   Professional pill/icon buttons with rich dropdown panels.
   Tokens inherited from .nat (green #2D6A4F · coral #FD4239 · Inter).
   ========================================================================== */
.nat-hdr {
	--accent: var(--green, #2D6A4F);
	--accent-d: var(--green-d, #1B4332);
	--pop: var(--coral, #FD4239);
	position: relative;
	display: inline-flex;
	align-items: center;
	font-family: Inter, system-ui, -apple-system, sans-serif;
	vertical-align: middle;
}
.nat-hdr *, .nat-hdr *::before, .nat-hdr *::after { box-sizing: border-box; }

/* Neutralise any theme/Elementor wrapper chrome around the widgets. */
.elementor-widget-naturamia_cart,
.elementor-widget-naturamia_user,
.elementor-widget-naturamia_my_account,
.elementor-widget-naturamia_cart > .elementor-widget-container,
.elementor-widget-naturamia_user > .elementor-widget-container,
.elementor-widget-naturamia_my_account > .elementor-widget-container {
	border: 0 !important; outline: 0 !important; background: transparent !important;
	box-shadow: none !important; padding: 0 !important; margin: 0 !important;
}
/* The site's button kit paints borders on every <button>/<a> with the brand
   colour; pin our triggers' borders explicitly so nothing leaks through. */
.nat .nat-hdr, .nat .nat-cart, .nat .nat-user, .nat .nat-myacct { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.nat .nat-hdr__btn { border: 1.5px solid transparent !important; background-color: transparent; }
.nat .nat-hdr--pill .nat-hdr__btn { border: 1.5px solid rgba(45,106,79,.22) !important; }
.nat .nat-hdr--solid .nat-hdr__btn { border: 1.5px solid transparent !important; background-color: var(--accent) !important; }
.nat .nat-hdr.is-open > .nat-hdr__btn { border-color: rgba(45,106,79,.18) !important; }
.nat .nat-hdr__btn:hover { background-color: rgba(45,106,79,.07); }
.nat .nat-hdr--solid .nat-hdr__btn:hover { background-color: var(--accent-d) !important; }

/* ---------- DARK scheme: trigger sits on a dark background ---------- */
.nat .nat-hdr--dark .nat-hdr__btn, .nat .nat-hdr--dark .nat-hdr__btn:visited { color: #fff !important; }
.nat .nat-hdr--dark .nat-hdr__btn:hover { color: #fff !important; background-color: rgba(255,255,255,.14); }
.nat-hdr--dark .nat-hdr__sub { color: rgba(255,255,255,.72); }
.nat .nat-hdr--dark .nat-hdr__caret { color: rgba(255,255,255,.72) !important; }
.nat .nat-hdr--dark.nat-hdr--pill .nat-hdr__btn { border: 1.5px solid rgba(255,255,255,.38) !important; }
.nat-hdr--dark .nat-hdr__avatar--guest { background: rgba(255,255,255,.18); color: #fff; }
.nat .nat-hdr--dark.nat-hdr.is-open > .nat-hdr__btn { background-color: rgba(255,255,255,.18); border-color: rgba(255,255,255,.34) !important; }
.nat-hdr--dark .nat-hdr__badge { border-color: transparent; }

/* ---------- trigger button ---------- */
.nat-hdr__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	background: transparent;
	border: 1.5px solid transparent;
	border-radius: 999px;
	padding: .5rem .55rem;
	color: var(--ink, #374151);
	font: inherit;
	font-weight: 600;
	font-size: .92rem;
	line-height: 1;
	cursor: pointer;
	text-decoration: none !important;
	transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
/* Win over aggressive theme link colours. */
.nat .nat-hdr__btn, .nat .nat-hdr__btn:visited { color: var(--ink, #374151) !important; }
.nat-hdr__btn:hover { background: rgba(45,106,79,.07); }
.nat .nat-hdr__btn:hover { color: var(--accent) !important; }
.nat-hdr--solid .nat-hdr__btn, .nat-hdr--solid .nat-hdr__btn:visited { color: #fff !important; }
.nat .nat-hdr__caret { color: var(--muted, #8a93a0) !important; }
.nat-hdr.is-open > .nat-hdr__btn { background: rgba(45,106,79,.10); border-color: rgba(45,106,79,.18); }
.nat-hdr__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nat-hdr--pill .nat-hdr__btn { padding: .5rem 1.05rem .5rem .8rem; border-color: rgba(45,106,79,.22); }
.nat-hdr--solid .nat-hdr__btn { background: var(--accent); color: #fff; padding: .6rem 1.15rem; }
.nat-hdr--solid .nat-hdr__btn:hover { background: var(--accent-d); color: #fff; }

.nat-hdr__icon { width: 22px; height: 22px; flex: 0 0 auto; display: inline-flex; }
/* Constrain EVERY icon svg with explicit px + !important — themes ship no
   default svg sizing (and some force it), so unsized inline svgs balloon. */
.nat-hdr .nat-hdr__icon, .nat-hdr .nat-hdr__caret, .nat-hdr .nat-hdr__licon { display: inline-flex !important; align-items: center; justify-content: center; }
.nat-hdr .nat-hdr__icon svg { width: 22px !important; height: 22px !important; display: block; }
.nat-hdr .nat-hdr__caret svg { width: 14px !important; height: 14px !important; display: block; }
.nat-hdr .nat-hdr__licon svg { width: 18px !important; height: 18px !important; display: block; }
.nat-hdr .nat-hdr__avatar svg { width: 20px !important; height: 20px !important; display: block; }
.nat-hdr .nat-hdr__perk svg { width: 15px !important; height: 15px !important; flex: 0 0 auto; display: block; }
.nat-hdr .nat-cart__empty svg { width: 46px !important; height: 46px !important; }
.nat-hdr__label { white-space: nowrap; }
.nat-hdr__sub { display: block; font-size: .68rem; font-weight: 600; color: var(--muted, #8a93a0); letter-spacing: .02em; margin-top: 2px; }
.nat-hdr__caret { width: 14px; height: 14px; opacity: .55; transition: transform .2s; }
.nat-hdr.is-open .nat-hdr__caret { transform: rotate(180deg); }

/* ---------- count badge (cart) ---------- */
.nat-hdr__badge {
	position: absolute;
	top: -2px; right: -2px;
	min-width: 19px; height: 19px;
	padding: 0 5px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pop); color: #fff;
	font-size: .68rem; font-weight: 800; line-height: 1;
	border-radius: 999px;
	border: 2px solid #fff;
	transition: transform .2s;
}
.nat-hdr__badge--zero { display: none; }
.nat-hdr__btn.is-bump .nat-hdr__badge { animation: nat-bump .4s ease; }
@keyframes nat-bump { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* ---------- avatar (user) ---------- */
.nat-hdr__avatar {
	width: 34px; height: 34px; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--accent-d));
	color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: .02em;
	text-transform: uppercase;
}
.nat-hdr__avatar--guest { background: #eef1ef; color: var(--accent); }

/* ---------- dropdown panel ---------- */
.nat-hdr__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	width: 320px;
	max-width: 92vw;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(16,40,28,.18), 0 2px 8px rgba(16,40,28,.06);
	border: 1px solid var(--line, #e7eae8);
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(.98);
	transform-origin: top right;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 99990;
	overflow: hidden;
}
.nat-hdr.is-open > .nat-hdr__panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.nat-hdr__panel::before { /* arrow */
	content: ""; position: absolute; top: -7px; right: 22px;
	width: 14px; height: 14px; background: #fff;
	border-left: 1px solid var(--line, #e7eae8); border-top: 1px solid var(--line, #e7eae8);
	transform: rotate(45deg);
}
.nat-hdr--left .nat-hdr__panel { right: auto; left: 0; transform-origin: top left; }
.nat-hdr--left .nat-hdr__panel::before { right: auto; left: 22px; }

/* panel header band */
.nat-hdr__phead {
	display: flex; align-items: center; gap: .8rem;
	padding: 1rem 1.15rem;
	background: linear-gradient(135deg, rgba(45,106,79,.06), rgba(216,243,220,.5));
	border-bottom: 1px solid var(--line, #e7eae8);
}
.nat-hdr__phead .nat-hdr__avatar { width: 42px; height: 42px; font-size: 1rem; }
.nat-hdr__pname { font-weight: 800; color: var(--ink, #374151); font-size: 1rem; line-height: 1.2; }
.nat-hdr__pmeta { font-size: .78rem; color: var(--muted, #8a93a0); margin-top: 2px; }

/* perk ribbon */
.nat-hdr__perk {
	display: flex; align-items: center; gap: .5rem;
	margin: .8rem 1.15rem 0;
	padding: .6rem .8rem;
	background: #FFF1F0; color: #b21f16;
	border: 1px dashed rgba(253,66,57,.4);
	border-radius: 12px;
	font-size: .8rem; font-weight: 700;
}

/* stats row */
.nat-hdr__stats { display: flex; gap: .6rem; padding: .9rem 1.15rem; }
.nat-hdr__stat {
	flex: 1; text-align: center;
	background: var(--card, #F3F6F4); border-radius: 12px;
	padding: .7rem .4rem; text-decoration: none; color: var(--ink, #374151);
	transition: background .15s;
}
.nat-hdr__stat:hover { background: var(--tint, #D8F3DC); }
.nat-hdr__stat b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--accent); line-height: 1; }
.nat-hdr__stat span { display: block; font-size: .7rem; font-weight: 600; color: var(--muted, #8a93a0); margin-top: 4px; letter-spacing: .02em; }

/* link list */
.nat-hdr__links { padding: .4rem .55rem .55rem; display: flex; flex-direction: column; }
.nat-hdr__link {
	display: flex; align-items: center; gap: .7rem;
	padding: .62rem .7rem; border-radius: 10px;
	color: var(--ink, #374151); text-decoration: none;
	font-size: .9rem; font-weight: 600;
	transition: background .12s, color .12s;
}
.nat-hdr__link:hover { background: rgba(45,106,79,.08); color: var(--accent); }
.nat-hdr__link .nat-hdr__licon { width: 18px; height: 18px; opacity: .65; flex: 0 0 auto; }
.nat-hdr__link:hover .nat-hdr__licon { opacity: 1; }
.nat-hdr__link--danger { color: #b21f16; }
.nat-hdr__link--danger:hover { background: #FFF1F0; color: #b21f16; }
.nat-hdr__sep { height: 1px; background: var(--line, #e7eae8); margin: .35rem .7rem; }

.nat-hdr__cta { padding: 1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; }
.nat-hdr__act {
	display: flex; align-items: center; justify-content: center; gap: .4rem;
	width: 100%; padding: .8rem 1rem; border-radius: 999px;
	font-weight: 700; font-size: .92rem; text-decoration: none; cursor: pointer; border: 0;
}
.nat-hdr__act--primary { background: var(--accent); color: #fff; }
/* Keep the label white on hover (a theme/Elementor link-hover was turning it dark). */
.nat-hdr__act--primary:hover, .nat-hdr__act--primary:focus { background: var(--accent-d); color: #fff !important; }
.nat-hdr__act--ghost { background: #fff; color: var(--accent); border: 1.5px solid var(--accent); }
.nat-hdr__act--ghost:hover { background: var(--tint, #D8F3DC); }
.nat-hdr__note { text-align: center; font-size: .78rem; color: var(--muted, #8a93a0); margin: 0; }

/* ---------- mini-cart ---------- */
.nat-cart__panel { padding: 0; }
.nat-cart__head { display: flex; align-items: baseline; justify-content: space-between; padding: 1rem 1.15rem .4rem; }
.nat-cart__head h4 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--ink, #374151); }
.nat-cart__head span { font-size: .8rem; color: var(--muted, #8a93a0); font-weight: 600; }
.nat-cart__list { list-style: none; margin: 0; padding: .3rem .55rem; max-height: 300px; overflow-y: auto; }
.nat-mini-item { display: flex; gap: .7rem; align-items: center; padding: .6rem .6rem; border-radius: 12px; }
.nat-mini-item:hover { background: var(--card, #F3F6F4); }
.nat-mini-item__thumb { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 10px; background: var(--card, #F3F6F4) center/cover no-repeat; }
.nat-mini-item__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.nat-mini-item__body { flex: 1; min-width: 0; }
.nat-mini-item__name { font-size: .88rem; font-weight: 700; color: var(--ink, #374151); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nat-mini-item__meta { font-size: .74rem; color: var(--muted, #8a93a0); margin: 2px 0 0; }
.nat-mini-item__price { font-size: .88rem; font-weight: 800; color: var(--accent); white-space: nowrap; }
/* Remove (×) button: solid green square, no border. Forced so no theme/Elementor
   style can bring back the pink. Hover = same green at 70%. */
.nat-mini-item__rm { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; background: #2D6A4F !important; border: 0 !important; border-radius: 10px; color: #fff !important; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0; transition: background .15s; }
.nat-mini-item__rm:hover, .nat-mini-item__rm:focus { background: rgba(45, 106, 79, .7) !important; color: #fff !important; }
.nat-cart__foot { padding: .7rem 1.15rem 1.15rem; border-top: 1px solid var(--line, #e7eae8); }
.nat-cart__totals { display: flex; justify-content: space-between; align-items: baseline; margin: .5rem 0 .8rem; }
.nat-cart__totals span { color: var(--muted, #8a93a0); font-weight: 600; font-size: .85rem; }
.nat-cart__totals b { font-size: 1.3rem; font-weight: 800; color: var(--ink, #374151); }
.nat-cart__progress { font-size: .75rem; color: var(--muted, #8a93a0); margin: 0 0 .7rem; }
.nat-cart__bar { height: 6px; border-radius: 999px; background: var(--line, #e7eae8); overflow: hidden; margin-top: 5px; }
.nat-cart__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #40916C); border-radius: 999px; transition: width .4s; }
.nat-cart__empty { text-align: center; padding: 1.8rem 1.2rem 1.6rem; }
.nat-cart__empty svg { width: 46px; height: 46px; opacity: .35; }
.nat-cart__empty p { margin: .6rem 0 1rem; color: var(--muted, #8a93a0); font-size: .9rem; }

@media (max-width: 480px) {
	.nat-hdr__panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; border-radius: 18px 18px 0 0; transform: translateY(100%); }
	.nat-hdr.is-open > .nat-hdr__panel { transform: translateY(0); }
	.nat-hdr__panel::before { display: none; }
}

/* ==========================================================================
   "Added to basket" toast
   ========================================================================== */
.nat-toast-wrap { position: fixed; top: 22px; right: 22px; z-index: 100000; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.nat-toast {
	pointer-events: auto;
	display: flex; align-items: center; gap: .8rem;
	width: 360px; max-width: calc(100vw - 32px);
	background: #fff; color: var(--ink, #374151);
	border-radius: 16px; padding: .9rem 1rem;
	box-shadow: 0 18px 50px rgba(16,40,28,.20), 0 2px 8px rgba(16,40,28,.08);
	border: 1px solid var(--line, #e7eae8);
	font-family: Inter, system-ui, sans-serif;
	opacity: 0; transform: translateX(24px) scale(.98);
	transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.3,1);
}
.nat-toast.is-in { opacity: 1; transform: translateX(0) scale(1); }
.nat-toast__ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--green, #2D6A4F); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.nat-toast__ic svg { width: 20px; height: 20px; display: block; }
.nat-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.nat-toast__body strong { font-size: .92rem; font-weight: 800; }
.nat-toast__body span { font-size: .82rem; color: var(--muted, #8a93a0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nat-toast__cta { flex: 0 0 auto; background: var(--tint, #D8F3DC); color: var(--green, #2D6A4F) !important; font-weight: 700; font-size: .82rem; text-decoration: none !important; padding: .5rem .8rem; border-radius: 999px; white-space: nowrap; }
.nat-toast__cta:hover { background: #c5ecca; }
.nat-toast__x { flex: 0 0 auto; background: none; border: 0; color: var(--muted, #8a93a0); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .1rem; }
.nat-toast__x:hover { color: var(--ink, #374151); }
@media (max-width: 480px) {
	.nat-toast-wrap { top: auto; bottom: 14px; left: 14px; right: 14px; }
	.nat-toast { width: 100%; }
}

/* ==========================================================================
   ZIP soft-gate modal
   ========================================================================== */
.nat-zip-modal { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 20px; }
.nat-zip-modal[hidden] { display: none; }
.nat-zip-modal__overlay { position: absolute; inset: 0; background: rgba(16,40,28,.55); opacity: 0; transition: opacity .25s; }
.nat-zip-modal.is-open .nat-zip-modal__overlay { opacity: 1; }
.nat-zip-modal__box { position: relative; z-index: 1; width: 420px; max-width: 100%; background: #fff; border-radius: 22px; padding: 2rem 1.8rem 1.8rem; text-align: center; box-shadow: 0 30px 80px rgba(16,40,28,.3); font-family: Inter, system-ui, sans-serif; color: var(--ink, #374151); transform: translateY(16px) scale(.97); opacity: 0; transition: transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s; }
.nat-zip-modal.is-open .nat-zip-modal__box { transform: translateY(0) scale(1); opacity: 1; }
.nat-zip-modal__x { position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--muted, #8a93a0); cursor: pointer; }
.nat-zip-modal__x:hover { color: var(--ink, #374151); }
.nat-zip-modal__ic { width: 56px; height: 56px; margin: 0 auto .8rem; border-radius: 50%; background: var(--tint, #D8F3DC); color: var(--green, #2D6A4F); display: flex; align-items: center; justify-content: center; }
.nat-zip-modal__ic svg { width: 28px !important; height: 28px !important; display: block; }
.nat-zip-modal__title { font-size: 1.4rem; font-weight: 800; margin: 0 0 .35rem; color: var(--ink, #374151); }
.nat-zip-modal__sub { color: var(--muted, #8a93a0); font-size: .92rem; margin: 0 0 1.2rem; }
.nat-zip-form { display: flex; gap: .55rem; }
.nat-zip-form input { flex: 1; border: 1.5px solid var(--line, #e7eae8); border-radius: 999px; padding: .8rem 1.1rem; font-size: 1rem; font-weight: 600; }
.nat-zip-form input:focus { outline: none; border-color: var(--green, #2D6A4F); }
.nat-zip-form .nat-btn { white-space: nowrap; }
.nat-zip-result { margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; font-size: .9rem; font-weight: 600; }
.nat-zip-result[hidden] { display: none; }
.nat-zip-result.is-ok { background: var(--tint, #D8F3DC); color: var(--green, #2D6A4F); }
.nat-zip-result.is-warn { background: #FFF1F0; color: #b21f16; }
.nat-zip-result .nat-zip-keep { display: inline-block; margin-top: .7rem; }
.nat-zip-result .nat-btn--sm { padding: .45rem 1rem !important; font-size: .82rem !important; }

/* ==========================================================================
   Scoped nav dropdown — add the CSS class "nat-menu" to the menu widget
   (Elementor: Advanced → CSS Classes). Only affects that widget.
   Desktop: a clean dropdown directly below the parent. Mobile: it opens
   straight down (accordion) instead of flying off to the side.
   ========================================================================== */
.nat-menu li { position: relative; }
.nat-menu .sub-menu, .nat-menu ul ul {
	position: absolute !important; top: 100% !important; left: 0 !important; right: auto !important;
	min-width: 210px; margin: 0; padding: .4rem; list-style: none; background: #fff;
	border-radius: 12px; box-shadow: 0 14px 34px rgba(16, 40, 28, .14); z-index: 200;
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.nat-menu li:hover > .sub-menu, .nat-menu li:focus-within > .sub-menu, .nat-menu li.is-open > .sub-menu,
.nat-menu li:hover > ul, .nat-menu li:focus-within > ul, .nat-menu li.is-open > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.nat-menu .sub-menu li, .nat-menu ul ul li { list-style: none; margin: 0; }
.nat-menu .sub-menu a, .nat-menu ul ul a { display: block; padding: .55rem .8rem; border-radius: 8px; white-space: nowrap; text-decoration: none; }
.nat-menu .sub-menu a:hover, .nat-menu ul ul a:hover { background: #f3f6f4; }

/* Mobile: open straight down (accordion), never off to the side. */
@media (max-width: 768px) {
	.nat-menu li { position: static; }
	.nat-menu .sub-menu, .nat-menu ul ul {
		position: static !important; top: auto !important; left: auto !important; min-width: 0;
		padding: 0 0 0 1rem; background: transparent; box-shadow: none;
		transform: none !important; transition: none; display: none;
	}
	.nat-menu li.is-open > .sub-menu, .nat-menu li.is-open > ul { display: block !important; padding: .2rem 0 .4rem 1rem; }
}