/* =====================================================================
   ENOVATE PC — site chrome
   Header, footer, dialogs and checkout steps. Components the handoff CSS
   doesn't define, built from reference/component-recipes.js values.
   enovate-design-system.css stays exactly as delivered.
   ===================================================================== */

/* Dark UI: native controls, scrollbars and iOS Safari chrome match the ground. */
:root { color-scheme: dark; }

/* `.en a` colours every link Blue 300; chrome links set their own colour. */
.en a.en-icon-btn, .en a.en-lang { color: #D5D9E0; }
.en a.en-social { color: var(--en-text-2); }
.en a.en-logo, .en .en-announce a { color: #fff; }

/* ---------- Logo ---------- */
.en-logo { display: inline-flex; align-items: center; gap: 13px; justify-self: start; }
.en-logo__mark { width: 32px; height: 32px; display: block; flex: none; }
.en-logo__word { width: var(--en-word-w, 126px); height: auto; display: block; }

/* ---------- Announcement bar ---------- */
.en-announce { overflow: hidden; padding-inline: var(--en-gutter); }
.en-announce > span { white-space: nowrap; }
.en-announce > span > a { display: inline-flex; align-items: center; gap: 9px; }
.en-announce > span > a:hover { color: var(--en-blue-150); }
.en-announce > i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.5); }

/* ---------- Header ---------- */
.en-header { position: relative; z-index: 50; }
.en-header.is-stuck { top: var(--wp-admin--admin-bar--height, 0px); }
.en-nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.en-nav li { margin: 0; }
.en-nav a { display: block; transition: color var(--en-dur) var(--en-ease), background var(--en-dur) var(--en-ease); }
.en-nav .current-menu-item > a { color: #fff; }
.en-header__actions .en-btn--sm { margin-inline-start: 6px; }
.en-header__menu { display: none; }

.en-lang { height: 42px; padding: 0 14px; border-radius: var(--en-r-md); display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); font: 12px var(--en-font-mono); transition: background var(--en-dur) var(--en-ease); }
.en-lang:hover { background: rgba(255,255,255,.08); }
.en-lang .en-icon { width: 16px; height: 16px; }

.en-icon-btn .en-badge-count[hidden] { display: none; }

/* ---------- Minimal (checkout) header ---------- */
.en-header--minimal { background: none; }
.en-steps { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
.en-steps__item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--en-text-4); }
.en-steps__item + .en-steps__item::before { content: ""; width: 44px; height: 1px; margin-inline-end: 8px; background: rgba(255,255,255,.15); }
.en-steps__item.is-done + .en-steps__item::before { background: linear-gradient(90deg, var(--en-blue-450), rgba(90,123,247,.4)); }
[dir="rtl"] .en-steps__item.is-done + .en-steps__item::before { background: linear-gradient(270deg, var(--en-blue-450), rgba(90,123,247,.4)); }
.en-steps__item.is-done, .en-steps__item.is-current { color: #fff; }
.en .en-steps__item a { color: inherit; }
.en-steps__dot { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); font: 11px var(--en-font-mono); }
.en-steps__check { display: none; width: 14px; height: 14px; stroke-width: 2.2; }
.is-done .en-steps__dot { background: var(--en-grad-btn); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); color: #fff; }
.is-done .en-steps__check { display: block; }
.is-done .en-steps__num { display: none; }
.is-current .en-steps__dot { box-shadow: inset 0 0 0 1.5px var(--en-blue-300), 0 0 14px rgba(91,123,255,.5); color: #fff; }
.en-secure { justify-self: end; display: inline-flex; align-items: center; gap: 9px; font: 11px var(--en-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--en-text-3); }
.en-secure .en-icon { color: var(--en-success-text); }

/* ---------- Dialogs (search, mobile drawer) ---------- */
.en-dialog { border: 0; padding: 0; color: var(--en-text); background: var(--en-bg); box-shadow: inset 0 0 0 1px var(--en-line-2), 0 40px 80px -20px rgba(0,0,0,.8); }
.en-dialog::backdrop { background: rgba(4,5,7,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.en-search { width: min(720px, calc(100% - 2 * var(--en-gutter))); margin: 120px auto auto; border-radius: var(--en-r-xl); background: var(--en-grad-card); }
.en-search__form { display: flex; align-items: center; gap: 10px; padding: 12px; }
.en-search__field { flex: 1; color: var(--en-text-4); }
.en-search__field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: 16px var(--en-font-sans); color: #fff; }
.en-search__field input::placeholder { color: var(--en-text-5); }
/* The wrapper shows the focus halo (:focus-within); don't double it on the inner input. */
.en .en-search__field input:focus-visible, .en .en-newsletter__field input:focus-visible { outline: none; }

.en-drawer { width: min(400px, 100%); max-width: 100%; height: 100%; max-height: none; margin: 0; margin-inline-start: auto; display: none; flex-direction: column; gap: 32px; padding: 20px var(--en-gutter) 32px; box-sizing: border-box; overflow-y: auto; }
.en-drawer[open] { display: flex; }
.en-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.en-drawer__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.en-drawer__list a { display: block; padding: 14px 0; border-bottom: 1px solid var(--en-line); font: 34px/1.05 var(--en-font-serif); letter-spacing: -.015em; }
.en .en-drawer__list a { color: var(--en-text-2); }
.en .en-drawer__list .current-menu-item > a { color: #fff; }
.en-drawer__actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.en-drawer__row { display: flex; gap: 10px; }

/* ---------- Footer ---------- */
.en-cta-band--footer { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; padding: 64px; }
.en-cta-band__head, .en-cta-band__body { position: relative; display: flex; flex-direction: column; }
.en-cta-band__head { gap: 18px; align-items: flex-start; }
.en-cta-band__body { gap: 22px; }
.en-cta-band__text { color: var(--en-text-2); max-width: 420px; }
.en-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.en-footer__brand { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.en-footer__meta { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--en-text-3); }
.en-footer__meta li { display: flex; align-items: center; gap: 10px; }
.en-footer__meta .en-icon { color: var(--en-blue-300); }
.en-footer__social { display: flex; gap: 8px; }
.en-social { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: background var(--en-dur) var(--en-ease); }
.en-social:hover { background: rgba(255,255,255,.08); }
.en-social .en-icon { width: 17px; height: 17px; }
.en-footer__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; }
.en .en-footer__col a:hover { color: #fff; }
.en-footer__news { gap: 14px; }
.en-footer__news .en-small { margin: 0; }

.en-newsletter__field { display: flex; align-items: center; gap: 8px; padding-block: 6px; padding-inline: 16px 6px; border-radius: var(--en-r-lg); background: var(--en-bg-sunk); box-shadow: inset 0 0 0 1px rgba(255,255,255,.11); transition: box-shadow var(--en-dur) var(--en-ease); }
.en-newsletter__field:focus-within { box-shadow: inset 0 0 0 1px rgba(91,123,255,.7), 0 0 0 4px rgba(60,96,232,.14); }
.en-newsletter__field input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 14px var(--en-font-sans); color: #fff; }
.en-newsletter__field input::placeholder { color: var(--en-text-5); }
.en-newsletter__submit { width: 38px; height: 38px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--en-grad-btn); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); color: #fff; cursor: pointer; transition: filter var(--en-dur) var(--en-ease); }
.en-newsletter__submit:hover { filter: brightness(1.12); }
.en-newsletter__submit .en-icon { width: 16px; height: 16px; stroke-width: 2; }
.en-newsletter__notice { margin: 10px 0 0; font-size: 13px; }
.en-newsletter__notice.is-ok { color: var(--en-success-text); }
.en-newsletter__notice.is-error { color: #FCA5A5; }
.en-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }

.en-pay-pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* Tabby instalment line (product price card, cart summary, checkout). */
.en-tabby { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--en-text-3); }
.en-tabby__chip { font: 500 10px/1 var(--en-font-mono); letter-spacing: .08em; padding: 4px 7px; border-radius: var(--en-r-xs); background: var(--en-tabby); color: #062018; }
.en-tabby bdi { white-space: nowrap; }

.en-footer--minimal .en-footer__bar { padding-inline: var(--en-gutter); padding-block: 26px; font: 11px var(--en-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--en-text-4); }
.en .en-footer--minimal a { display: inline-flex; align-items: center; gap: 8px; color: var(--en-text-4); }
.en .en-footer--minimal a:hover { color: #fff; }
.en-footer--minimal .en-icon { color: var(--en-blue-300); }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
	/* Two promises fit on tablet; the WhatsApp one moves into the drawer. */
	.en-announce > span:nth-of-type(3), .en-announce > i:nth-of-type(2) { display: none; }
	.en-header__menu { display: inline-flex; }
	.en-hide-md { display: none !important; }
	.en-cta-band--footer { grid-template-columns: 1fr; padding: 48px 40px; gap: 32px; }
	.en-header--minimal { grid-template-columns: auto 1fr; }
	.en-header--minimal .en-steps { display: none; }
}
@media (max-width: 767px) {
	.en-header__cta { display: none; }
	.en-logo__word { width: min(var(--en-word-w, 126px), 104px); }
	.en-cta-band--footer { padding: 36px 24px; }
	.en-cta-band--footer .en-watermark { width: 240px; height: 240px; }
	.en-footer--minimal .en-footer__bar { flex-direction: column; align-items: flex-start; gap: 10px; }
}