/*
 * Responsive header — replicates the prototype's mobile/tablet UX (src/header.jsx).
 *   tablet (≤1023): top + category bars hidden; search bar kept; wishlist/account
 *     hidden; hamburger + drawer.
 *   mobile (≤767): compact row (logo + search-icon + kcal-icon + cart + hamburger);
 *     full search bar hidden; right slide-in drawer.
 * Deterministic display order: hide by default, show inside the media queries.
 */

/* ---------- Mobile action buttons: hidden by default ---------- */
.sisa-mob { display: none; align-items: center; gap: 6px; margin-left: auto; }
.sisa-mob__btn {
	width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
	background: var(--sisa-panel); border: 1px solid var(--sisa-hairline); border-radius: 0; color: var(--sisa-ink); cursor: pointer;
}
.sisa-mob__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Notvorrat chip — the pill's Duo cells at chip scale: ⚡ kcal | 💧 L, each with
   its own tinted cart-fill; ✓ corner badge when the goal is reached. Cell/fill/
   badge pieces are shared with the desktop pill (header.css .sisa-kcalc__*). */
.sisa-mob__kcal {
	position: relative;
	display: inline-flex; align-items: center; gap: 0; height: 40px; padding: 0;
	background: var(--sisa-panel); border: 1px solid var(--sisa-hairline); border-radius: 0; color: var(--sisa-ink); cursor: pointer;
	font-family: var(--sisa-mono); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.sisa-mob__kcal:focus-visible { outline: 2px solid var(--sisa-ink); outline-offset: 2px; }
.sisa-mob__kcal .sisa-kcalc__bolt { width: 14px; height: 14px; fill: var(--sisa-yellow); }
.sisa-mob__kcal .sisa-kcalc__drop { width: 12px; height: 12px; }
.sisa-mob__kcal .sisa-kcalc__cell { padding-inline: 9px; gap: 5px; }
/* First-contact chip: short self-naming label («Bedarf berechnen») in the same
   silhouette; morph to numbers = the desktop pill's 140ms content crossfade. */
.sisa-mob__kcal .sisa-kcalc__cell--cta { padding-inline: 10px; gap: 7px; }
.sisa-mob__kcal > * { transition: opacity .14s ease; }
.sisa-mob__kcal.is-swap > * { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	.sisa-mob__kcal > * { transition: none; }
}
.sisa-mob__burger { display: none; }  /* overrides .sisa-mob__btn until shown */

/* ---------- Tablet & down ---------- */
@media (max-width: 1023px) {
	/* Reuse our (desktop) header + injections on mobile; hide Blocksy's bare mobile header. */
	#header [data-device="desktop"] { display: block !important; }
	#header [data-device="mobile"] { display: none !important; }
	#header [data-row="top"],
	#header [data-row="bottom"] { display: none; }
	#header [data-row="middle"] .sisa-actions { display: none; }   /* desktop kcal pill + wishlist + account */
	.sisa-mob { display: inline-flex; }
	.sisa-mob__burger { display: inline-flex; }
	#header [data-row="middle"] .site-logo-container img,
	#header [data-row="middle"] .ct-logo-container img { height: 52px; }
	/* full-width header container on mobile — Blocksy left a ~23px centering margin
	   on top of the 16px padding (logo sat ~39px in); kill it so padding is just 16px. */
	#header [data-row="middle"] > .ct-container { gap: 16px; padding-block: 16px; padding-inline: var(--sisa-pad); max-width: 100% !important; width: 100% !important; margin-inline: 0 !important; }
	/* Unify the main content container's gutter with the header's on mobile (header value
	   = var(--sisa-pad), which gives the content more room than Blocksy's wider gutter). */
	#main > .ct-container { max-width: 100% !important; width: 100% !important; padding-inline: var(--sisa-pad) !important; }
}

/* ---------- Mobile: compact icon row (no full search bar) ---------- */
@media (max-width: 767px) {
	#header [data-row="middle"] .sisa-search { display: none; }   /* search via icon → drawer */
	#header [data-row="middle"] .site-logo-container img,
	#header [data-row="middle"] .ct-logo-container img { height: 44px; }
	#header [data-row="middle"] > .ct-container { gap: 6px; padding-block: 10px; }
}

/* ---------- Drawer (controlled by [hidden] + .is-open) ---------- */
.sisa-drawer { position: fixed; inset: 0; z-index: 200; }
.sisa-drawer[hidden] { display: none; }
.sisa-drawer__veil { position: absolute; inset: 0; background: var(--sisa-veil); opacity: 0; transition: opacity .25s ease; }
.sisa-drawer.is-open .sisa-drawer__veil { opacity: 1; }
.sisa-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
	background: var(--sisa-panel); display: flex; flex-direction: column;
	box-shadow: -12px 0 32px rgba(0, 0, 0, .18); transform: translateX(100%); transition: transform .25s ease;
	font-family: var(--sisa-body); color: var(--sisa-ink);
}
.sisa-drawer.is-open .sisa-drawer__panel { transform: translateX(0); }
.sisa-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--sisa-hairline); }
.sisa-drawer__logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--sisa-ink); font-family: var(--sisa-display); font-weight: 700; }
.sisa-drawer__logo img { height: 40px; width: auto; display: block; }
.sisa-drawer__search { display: flex; align-items: center; gap: 10px; margin: 16px 20px 8px; height: 44px; padding: 0 14px; background: var(--sisa-bg-input); border: 1px solid var(--sisa-hairline); }
.sisa-drawer__scroll { overflow-y: auto; flex: 1; }
.sisa-drawer__lbl { font-family: var(--sisa-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--sisa-text-3); padding: 20px 20px 8px; }
.sisa-hero-row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; min-height: 60px; text-decoration: none; color: var(--sisa-ink); border-bottom: 1px solid var(--sisa-hairline-soft); }
.sisa-hero-row__ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; background: var(--sisa-emphasis); }
.sisa-hero-row__ico svg { width: 16px; height: 16px; fill: none; stroke: var(--sisa-yellow); stroke-width: 2; }
.sisa-hero-row__label { flex: 1; min-width: 0; font-weight: 600; font-size: 16px; }
.sisa-hero-row__hint { font-family: var(--sisa-mono); font-size: 11px; letter-spacing: .6px; color: var(--sisa-text-2); white-space: nowrap; }
.sisa-hero-row__badge { font-family: var(--sisa-mono); font-size: 11px; font-weight: 700; padding: 4px 8px; border: 1px solid var(--sisa-hairline); color: var(--sisa-text-3); }
.sisa-hero-row__badge.is-active { background: var(--sisa-yellow); border-color: var(--sisa-yellow); color: var(--sisa-yellow-ink); }
.sisa-drawer__link { display: block; padding: 14px 20px; font-size: 16px; color: var(--sisa-ink); text-decoration: none; border-bottom: 1px solid var(--sisa-hairline-soft); }
.sisa-drawer__link:hover { background: var(--sisa-bg); }
.sisa-drawer__locale { display: flex; gap: 12px; flex-wrap: wrap; padding: 8px 20px 12px; }
.sisa-drawer__chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--sisa-hairline); font-family: var(--sisa-mono); font-size: 11px; letter-spacing: .5px; color: var(--sisa-ink); text-decoration: none; }
.sisa-drawer__chip.is-active { background: var(--sisa-emphasis); color: var(--sisa-on-emphasis); border-color: var(--sisa-emphasis); }

/* Drawer theme segmented control (Auto / Hell / Dunkel) */
.sisa-drawer__theme { display: inline-flex; margin: 0 20px 24px; border: 1px solid var(--sisa-hairline); background: var(--sisa-panel); }
.sisa-drawer__theme button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 0; background: transparent; color: var(--sisa-ink); font-family: var(--sisa-mono); font-size: 11px; letter-spacing: .5px; cursor: pointer; }
.sisa-drawer__theme button + button { border-left: 1px solid var(--sisa-hairline); }
.sisa-drawer__theme button.is-active { background: var(--sisa-emphasis); color: var(--sisa-on-emphasis); }
.sisa-drawer__theme .sisa-theme__g { display: inline-flex; }
.sisa-drawer__theme .sisa-theme__g svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sisa-drawer__theme .sisa-theme__g svg [fill="currentColor"] { fill: currentColor; stroke: none; }

/* ---------- Mobile kcal calculator as a bottom sheet ----------
   The desktop .sisa-actions (which holds .sisa-kcalpop) is hidden ≤1023; when the
   popover is toggled open we let just it through as a fixed bottom sheet. */
@media (max-width: 1023px) {
	#header [data-row="middle"] .sisa-actions:has(.sisa-kcalpop:not([hidden])) { display: block !important; position: static; margin: 0; }
	#header [data-row="middle"] .sisa-actions:has(.sisa-kcalpop:not([hidden])) > :not(.sisa-kcalpop) { display: none !important; }
	.sisa-kcalpop {
		position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
		border-top: 1px solid var(--sisa-hairline); box-shadow: 0 -24px 48px rgba(0, 0, 0, .18); z-index: 210;
	}
}