/* 3D kitchen: engine UI (views, tools, labels, hint) + the home hero (stage + dock). Mobile first. */

/* ---------- engine (kitchen3d.js) ---------- */
.hds-k3 { position: absolute; inset: 0; overflow: hidden; }
.hds-k3__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; cursor: grab; }
.hds-k3.is-dragging .hds-k3__gl { cursor: grabbing; }
.hds-k3__gl:focus-visible { box-shadow: inset 0 0 0 2px var(--red); }
.hds-k3__ui { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hds-k3__ui > * { pointer-events: auto; }
.hds-k3__views { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 2px; width: max-content; max-width: calc(100% - 20px); padding: 3px; overflow-x: auto; scrollbar-width: none; background: rgba(255, 255, 255, .9); border-radius: 999px; box-shadow: 0 4px 14px -6px rgba(28, 30, 29, .35); }
.hds-k3__views::-webkit-scrollbar { display: none; }
.hds-k3__view { flex: none; height: 32px; padding: 0 .8rem; border: 0; border-radius: 999px; background: transparent; color: var(--i1); font: 600 .8rem/1 var(--f-body); cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s; }
.hds-k3__view[aria-pressed="true"] { background: var(--h0); color: var(--g0); }
@media (hover: hover) { .hds-k3__view:hover:not([aria-pressed="true"]) { color: var(--i0); background: var(--g1); } }
.hds-k3__tools { position: absolute; top: 54px; right: 10px; display: flex; flex-direction: column; gap: 6px; }
.hds-k3__tool, .hds-k3__close { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--i0); font: 600 .8rem/1 var(--f-body); cursor: pointer; box-shadow: 0 4px 14px -6px rgba(28, 30, 29, .35); transition: background-color .2s, color .2s; }
.hds-k3__tool svg, .hds-k3__close svg { width: 18px; height: 18px; flex: none; }
.hds-k3__tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hds-k3__tool[aria-pressed="true"] { background: var(--h0); color: var(--g0); }
@media (min-width: 700px) {
	.hds-k3__tools { flex-direction: row; top: 10px; }
	.hds-k3__views { right: auto; max-width: calc(100% - 420px); }
	.hds-k3__tool { width: auto; padding: 0 .85rem 0 .7rem; height: 38px; }
	.hds-k3__tool span { position: static; width: auto; height: auto; clip: auto; }
}
@media (hover: hover) { .hds-k3__tool:hover:not([aria-pressed="true"]) { background: #fff; } }
.hds-k3__close { position: absolute; top: 10px; right: 10px; width: auto; padding: 0 .9rem 0 .7rem; background: var(--h0); color: var(--g0); z-index: 2; }
.hds-k3__close[hidden] { display: none; }
.is-k3-full .hds-k3__tool--expand { display: none; }
.is-k3-full .hds-k3__tools { top: 58px; }
@media (min-width: 700px) { .is-k3-full .hds-k3__tools { top: 10px; right: 120px; } }
.hds-k3__hint { position: absolute; left: 10px; bottom: 10px; margin: 0; display: inline-flex; align-items: center; gap: .45rem; max-width: calc(100% - 20px); padding: .45rem .7rem .45rem .55rem; background: rgba(28, 30, 29, .8); color: #fff; font-size: .78rem; line-height: 1.3; border-radius: 3px; pointer-events: none; transition: opacity .5s, translate .5s var(--ease-out); }
.hds-k3__hint svg { width: 18px; height: 18px; flex: none; }
.hds-k3__hint.is-gone { opacity: 0; translate: 0 6px; }
.hds-k3__tip { position: absolute; left: 50%; top: 50%; margin: 0; padding: .5rem .8rem; background: rgba(28, 30, 29, .86); color: #fff; font-size: .82rem; border-radius: 3px; translate: -50% -50%; opacity: 0; pointer-events: none; transition: opacity .3s; }
.hds-k3__tip.is-on { opacity: 1; }

/* part labels: a callout that points at the run it names */
.hds-k3__labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hds-k3__lab { position: absolute; left: 0; top: 0; translate: -50% calc(-100% - 9px); display: grid; gap: 1px; padding: .32rem .6rem .36rem; border: 0; border-radius: 3px; background: rgba(255, 255, 255, .95); color: var(--i0); text-align: left; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(28, 30, 29, .55); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s, background-color .2s, color .2s; pointer-events: none; will-change: transform; }
.hds-k3__lab::before { content: ""; position: absolute; left: 50%; bottom: -9px; width: 1px; height: 9px; background: rgba(255, 255, 255, .95); }
.hds-k3__lab::after { content: ""; position: absolute; left: 50%; bottom: -13px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--zc); box-shadow: 0 0 0 2px #fff; }
.hds-k3__labels.is-on .hds-k3__lab.is-vis { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s, visibility 0s, background-color .2s, color .2s; }
.hds-k3__lab-n { display: flex; align-items: center; gap: .35rem; font: 600 .76rem/1.15 var(--f-body); }
.hds-k3__lab-n::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--zc); }
.hds-k3__lab-f { font-size: .7rem; line-height: 1.2; color: var(--i2); max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
.hds-k3__lab.is-sel { background: var(--h0); color: var(--g0); }
.hds-k3__lab.is-sel .hds-k3__lab-f { color: var(--on-h-2); }
.hds-k3__lab.is-sel::before { background: var(--h0); }
@media (hover: hover) { .hds-k3__lab:hover:not(.is-sel) { background: #fff; color: var(--i0); } }
.hds-k3__lab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
html.hds-k3-lock, html.hds-k3-lock body { overflow: hidden; }

/* ---------- home hero ---------- */
.hds-kh { position: relative; display: flex; flex-direction: column; background: var(--g0); }
.hds-kh__copy { order: 1; padding: clamp(1.25rem, 1rem + 2vw, 2rem) var(--gut) 1.1rem; display: grid; gap: .7rem; }
.hds-kh__h { margin: 0; font-size: clamp(2.15rem, 1.5rem + 3vw, 3.4rem); }
.hds-kh__lede { margin: 0; font-size: 1rem; max-width: 52ch; color: var(--i1); }
.hds-kh__stage { order: 2; position: relative; aspect-ratio: 4 / 5; max-height: 72svh; width: 100%; overflow: hidden; background: #d9d6cf; isolation: isolate; }
@media (min-width: 560px) { .hds-kh__stage { aspect-ratio: 4 / 3; } }
@media (min-width: 800px) { .hds-kh__stage { aspect-ratio: 16 / 9; } }
.hds-kh__photo, .hds-kh__photo .hds-stage__view { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; height: 100%; }
.hds-kh__photo .hds-stage__still { object-position: 62% 50%; }
.hds-kh__3d { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .9s var(--ease-out); }
.hds-kh__stage.is-3d .hds-kh__3d { opacity: 1; }
.hds-kh__stage.is-3d .hds-kh__photo { visibility: hidden; transition: visibility 0s .9s; }
.hds-kh__bar { position: absolute; left: 0; top: 0; z-index: 4; width: 100%; height: 2px; background: var(--red); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .3s, opacity .4s .3s; }
.hds-kh__stage.is-3d .hds-kh__bar, .hds-kh__stage.is-photo .hds-kh__bar { opacity: 0; }

.hds-kh__dock { order: 3; position: relative; z-index: 4; background: #fff; border-top: 1px solid var(--ln); min-width: 0; }
.hds-kh__row { padding: .8rem var(--gut); min-width: 0; }
.hds-kh__row + .hds-kh__row { border-top: 1px solid var(--ln); }
.hds-kh__step { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .55rem; font-size: .82rem; font-weight: 600; color: var(--i1); white-space: nowrap; }
.hds-kh__n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--h0); color: var(--g0); font-size: .72rem; font-weight: 700; }
.hds-kh__step.is-nudge .hds-kh__n { animation: hds-kh-nudge .9s var(--ease-out); }
@keyframes hds-kh-nudge { 0% { box-shadow: 0 0 0 0 rgba(236, 35, 41, .55); background: var(--red); } 100% { box-shadow: 0 0 0 12px rgba(236, 35, 41, 0); } }
.hds-kh__parts { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 2px; }
.hds-kh__parts::-webkit-scrollbar { display: none; }
.hds-kh__part { flex: none; display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .85rem 0 .3rem; border-radius: 999px; border: 1px solid var(--ln-2); background: #fff; color: var(--i1); font: 600 .86rem/1 var(--f-body); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.hds-kh__pchip { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--g2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); overflow: hidden; }
.hds-kh__part[style] .hds-kh__pchip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--zc); }
.hds-kh__part[aria-checked="true"] { background: var(--h0); border-color: var(--h0); color: var(--g0); }
@media (hover: hover) { .hds-kh__part:hover:not([aria-checked="true"]) { border-color: var(--i0); color: var(--i0); } }

.hds-kh__bhead { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .75rem; margin-bottom: .6rem; }
.hds-kh__bhead .hds-kh__step { margin: 0; }
.hds-kh__ranges { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; order: 3; flex: 1 1 100%; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
.hds-kh__ranges::-webkit-scrollbar { display: none; }
.hds-kh__range { flex: none; height: 32px; padding: 0 .75rem; border-radius: 999px; border: 1px solid var(--ln-2); background: none; color: var(--i1); font: 600 .8rem/1 var(--f-body); cursor: pointer; white-space: nowrap; }
.hds-kh__range[aria-selected="true"] { background: var(--h0); border-color: var(--h0); color: var(--g0); }
.hds-kh__range[hidden] { display: none; }
.hds-kh__find { position: relative; display: flex; align-items: center; margin-left: auto; flex: 0 1 220px; min-width: 140px; }
.hds-kh__find svg { position: absolute; left: .6rem; width: 16px; height: 16px; color: var(--i2); pointer-events: none; }
.hds-kh__find input { width: 100%; height: 36px; padding: 0 .7rem 0 2rem; border: 1px solid var(--ln-2); border-radius: 999px; background: var(--g0); font: 400 1rem/1 var(--f-body); color: var(--i0); }
.hds-kh__find input:focus { outline: none; border-color: var(--i0); background: #fff; box-shadow: 0 0 0 3px rgba(28, 30, 29, .12); }
.hds-kh__railwrap { position: relative; margin: 0 calc(var(--gut) * -1); }
.hds-kh__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 72px; gap: .6rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 6px var(--gut) 4px; overscroll-behavior-x: contain; }
.hds-kh__rail::-webkit-scrollbar { display: none; }
/* soft edges where more boards scroll in */
.hds-kh__rail { --fl: 40px; --fr: 40px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.hds-kh__rail.at-start { --fl: 0px; }
.hds-kh__rail.at-end { --fr: 0px; }
.hds-kh__sw { scroll-snap-align: start; }
.hds-kh__swr { font-size: .66rem; color: var(--i2); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -2px; }
.hds-kh__none { margin: .5rem var(--gut); font-size: .9rem; color: var(--i1); }
.hds-kh__none .hds-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.hds-kh__nav { display: none; }
@media (hover: hover) and (pointer: fine) {
	.hds-kh__nav { display: grid; place-items: center; position: absolute; top: 26px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ln-2); background: #fff; color: var(--i0); cursor: pointer; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .35); transition: opacity .2s; }
	.hds-kh__nav svg { width: 16px; height: 16px; }
	.hds-kh__nav--prev { left: 6px; } .hds-kh__nav--next { right: 6px; }
	.hds-kh__nav:disabled { opacity: 0; pointer-events: none; }
	.hds-kh__dock:not(.is-scrollable) .hds-kh__nav { display: none; }
}

.hds-kh__row--out { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.25rem; }
.hds-kh__ro { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 .7rem; align-items: center; min-width: 0; flex: 1 1 260px; }
.hds-kh__rochip { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 3px; background: var(--g2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.hds-kh__rozone { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 600; color: var(--i2); }
.hds-kh__rozone::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--zc, var(--i0)); }
.hds-kh__roname { font: 600 1.08rem/1.15 var(--f-display); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hds-kh__rometa { font-size: .8rem; color: var(--i1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hds-kh__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.hds-kh__acts .hds-btn { white-space: nowrap; }
.hds-kh__acts .hds-link { font-size: .95rem; }
@media (max-width: 559px) {
	.hds-kh__acts { width: 100%; }
	.hds-kh__acts .hds-btn { order: -1; width: 100%; justify-content: center; }
}

/* desktop: the kitchen fills the first screen, the headline sits on its quiet left wall, the dock is a board on top */
@media (min-width: 1100px) {
	.hds-kh { display: block; height: calc(100svh - var(--header-h)); min-height: 720px; max-height: 1100px; overflow: hidden; }
	.hds-kh__stage { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; }
	.hds-kh__stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(243, 243, 240, .96) 0, rgba(243, 243, 240, .88) 22%, rgba(243, 243, 240, .45) 34%, rgba(243, 243, 240, 0) 44%); }
	.hds-kh__copy { position: absolute; z-index: 3; left: var(--gut); top: clamp(1.75rem, 5vh, 4rem); width: min(500px, 34vw); padding: 0; gap: 1.1rem; pointer-events: none; }
	.hds-kh__h { font-size: clamp(2.9rem, 1rem + 2.6vw, 4.3rem); }
	.hds-kh__lede { font-size: 1.06rem; }
	.hds-kh__dock { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(1rem, 2.4vh, 1.75rem); max-width: 1480px; margin: 0 auto; border: 1px solid var(--ln); border-radius: var(--r); box-shadow: 0 30px 60px -36px rgba(28, 30, 29, .55), 0 2px 0 rgba(0, 0, 0, .03); }
	.hds-kh__dock::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -13px; height: 12px; background: var(--core) var(--core-tex) center / auto 100%; border-radius: 0 0 3px 3px; z-index: -1; box-shadow: inset 0 3px 0 var(--band, #e8e7e1); }
	.hds-kh__row { padding: .75rem 1.1rem; }
	.hds-kh__row--parts { display: flex; align-items: center; gap: 1rem; }
	.hds-kh__row--parts .hds-kh__step { margin: 0; }
	.hds-kh__parts { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
	.hds-kh__ranges { order: 0; flex: 0 1 auto; margin: 0; padding: 0; }
	.hds-kh__railwrap { margin: 0 -1.1rem; }
	.hds-kh__rail { grid-auto-columns: 76px; padding: 6px 1.1rem 2px; }
	.hds-kh__row--out { padding-block: .65rem; }
	.hds-kh .hds-k3__views { left: auto; right: 10px; max-width: none; }
	.hds-kh .hds-k3__tools { top: 54px; }
	.hds-kh .hds-k3__hint { left: auto; right: 10px; top: 104px; bottom: auto; }
	.hds-kh .hds-k3__hint.is-gone { translate: 0 -6px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
	.hds-kh__lede { display: none; }
	.hds-kh__row--out { padding-block: .5rem; }
}

/* full screen: kitchen on top, the dock underneath */
.hds-kh.is-k3-full { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100dvh; max-height: none; min-height: 0; background: #111; }
.hds-kh.is-k3-full .hds-kh__copy, .hds-kh.is-k3-full .hds-kh__stage::after { display: none; }
.hds-kh.is-k3-full .hds-kh__stage { position: relative; inset: auto; aspect-ratio: auto; max-height: none; height: 100%; }
.hds-kh.is-k3-full .hds-kh__dock { position: relative; left: auto; right: auto; bottom: auto; max-width: none; border-radius: 0; box-shadow: none; max-height: 42dvh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); }
.hds-kh.is-k3-full .hds-kh__dock::after { display: none; }
.hds-kh.is-k3-full .hds-kh__row--out { display: none; }
@media (max-width: 1099px) { .hds-kh.is-k3-full .hds-kh__row { padding-block: .6rem; } .hds-kh.is-k3-full .hds-kh__ranges, .hds-kh.is-k3-full .hds-kh__find { display: none; } }

@media (max-width: 699px) { .is-k3-full .hds-k3__views { max-width: calc(100% - 120px); } }
/* the hero has its own WhatsApp button: the floating one steps aside while the dock is on screen */
html.hds-kh-inview .hds-wa-fab { transform: translateY(calc(100% + 30px)); }
html.hds-k3-lock .hds-wa-fab { display: none; }

@media (prefers-reduced-motion: reduce) {
	.hds-kh__3d, .hds-k3__lab, .hds-k3__hint { transition: none; }
}