/* =========================================================
   Dania Elixir — Header, Topbar, מגירות
   ========================================================= */

/* --- Topbar --- */
.de-topbar {
	background: var(--de-espresso);
	color: var(--de-cream);
	font-size: var(--de-fs-sm);
}
.de-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	text-align: center;
}
.de-topbar__msg { letter-spacing: .01em; }

/* --- Header --- */
.de-header {
	background: var(--de-bg);
	border-block-end: 1px solid var(--de-border);
	position: relative;
	z-index: var(--de-z-header);
}
.de-header--sticky { position: sticky; inset-block-start: 0; }
.de-header.is-stuck {
	background: rgba(246, 241, 232, .92);
	backdrop-filter: saturate(160%) blur(10px);
	box-shadow: var(--de-shadow-sm);
}
.de-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: var(--de-header-h);
	gap: var(--de-sp-3);
}
.de-header__side { display: flex; align-items: center; gap: 4px; }
.de-header__side--start { justify-content: flex-start; }
.de-header__side--end { justify-content: flex-end; }

/* --- לוגו --- */
.de-logo { display: flex; justify-content: center; }
.de-logo__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	color: var(--de-espresso);
}
.de-logo__mark {
	font-family: var(--de-font-latin);
	font-size: 1.9rem;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--de-gold);
}
.de-logo__name {
	font-family: var(--de-font-latin);
	font-size: .95rem;
	letter-spacing: .34em;
	margin-top: 3px;
	color: var(--de-espresso);
}
.de-logo__tag {
	font-size: .5rem;
	letter-spacing: .28em;
	color: var(--de-muted);
	margin-top: 4px;
	text-transform: uppercase;
}
.de-logo--image img { max-height: 60px; width: auto; }
.de-logo--footer .de-logo__link { align-items: flex-start; }

/* --- מונה סל --- */
.de-cart-count {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: var(--de-r-pill);
	background: var(--de-gold);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	opacity: 0;
	transform: scale(.6);
	transition: opacity var(--de-t-fast), transform var(--de-t-fast);
}
.de-cart-count.is-filled { opacity: 1; transform: scale(1); }

/* --- תפריט ניווט --- */
.de-nav {
	border-block-start: 1px solid var(--de-border);
}
.de-nav__list {
	display: flex;
	justify-content: center;
	gap: var(--de-sp-6);
	flex-wrap: wrap;
	padding-block: var(--de-sp-3);
}
.de-nav__list a {
	font-family: var(--de-font-head);
	font-size: var(--de-fs-base);
	font-weight: 500;
	color: var(--de-espresso);
	padding-block: 6px;
	position: relative;
	transition: color var(--de-t-fast);
}
.de-nav__list a::after {
	content: '';
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 2px;
	background: var(--de-gold);
	transform: scaleX(0);
	transition: transform var(--de-t);
}
.de-nav__list a:hover { color: var(--de-gold); }
.de-nav__list a:hover::after,
.de-nav__list .current-menu-item > a::after { transform: scaleX(1); }

/* --- Searchbar --- */
.de-searchbar {
	border-block-start: 1px solid var(--de-border);
	background: var(--de-surface);
	padding-block: var(--de-sp-4);
}
.de-searchbar .de-container { display: flex; align-items: center; gap: var(--de-sp-3); }

.de-search { display: flex; align-items: center; gap: 10px; flex: 1; position: relative; }
.de-search__icon { color: var(--de-muted); display: inline-flex; }
.de-search__input {
	flex: 1;
	border: 1px solid var(--de-border);
	border-radius: var(--de-r);
	padding: 12px 16px;
	background: var(--de-bg);
	font: inherit;
}
.de-search__submit {
	background: var(--de-espresso);
	color: #fff;
	border: none;
	border-radius: var(--de-r);
	padding: 12px 22px;
}

/* --- מגירות --- */
.de-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--de-z-drawer);
}
.de-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 12, 11, .5);
	opacity: 0;
	transition: opacity var(--de-t);
}
.de-drawer.is-open .de-drawer__backdrop { opacity: 1; }

.de-drawer__panel {
	position: absolute;
	inset-block: 0;
	width: min(380px, 88vw);
	background: var(--de-surface);
	display: flex;
	flex-direction: column;
	box-shadow: var(--de-shadow-lg);
	transition: transform var(--de-t) var(--de-ease-out);
}
.de-drawer--start .de-drawer__panel { inset-inline-start: 0; transform: translateX(-105%); }
.de-drawer--end .de-drawer__panel { inset-inline-end: 0; transform: translateX(105%); }
[dir="rtl"] .de-drawer--start .de-drawer__panel { transform: translateX(105%); }
[dir="rtl"] .de-drawer--end .de-drawer__panel { transform: translateX(-105%); }
.de-drawer.is-open .de-drawer__panel { transform: translateX(0); }

.de-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--de-sp-4) var(--de-sp-5);
	border-block-end: 1px solid var(--de-border);
}
.de-drawer__title {
	font-family: var(--de-font-head);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--de-espresso);
}
.de-drawer__search { padding: var(--de-sp-4) var(--de-sp-5); }
.de-drawer__nav { padding: var(--de-sp-3) var(--de-sp-5); overflow-y: auto; flex: 1; }
.de-drawer__list a {
	display: block;
	padding: 14px 0;
	border-block-end: 1px solid var(--de-border);
	font-family: var(--de-font-head);
	font-size: var(--de-fs-md);
	color: var(--de-espresso);
}
.de-drawer__foot {
	padding: var(--de-sp-5);
	border-block-start: 1px solid var(--de-border);
	display: flex;
	flex-direction: column;
	gap: var(--de-sp-3);
}
.de-drawer__link { display: inline-flex; align-items: center; gap: 10px; color: var(--de-espresso); }

.de-social { display: flex; gap: 10px; }
.de-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--de-border);
	border-radius: var(--de-r-pill);
	color: var(--de-espresso);
	transition: background var(--de-t-fast), color var(--de-t-fast);
}
.de-social a:hover { background: var(--de-gold); color: #fff; border-color: var(--de-gold); }
.de-social--footer a { border-color: rgba(255,255,255,.24); color: var(--de-cream); }
.de-social--footer a:hover { background: var(--de-gold-light); color: var(--de-espresso); }