/* "ככה זה נראה מבפנים" — My Kitchen as a story on a phone (inc/phone-demo.php). The phone keeps the site's light look. */
.pdemo { --pd-accent: #D9262E; --pd-ok: #1F6F5C; --pd-ink: #1C1B1F; --pd-muted: #5E5B57; --pd-chip: #F2EFEA; --pd-line: #EFECE7;
	padding-block: 32px; text-align: right; font-family: Heebo, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
.pdemo__title { margin: 0 0 6px; text-align: center; font-size: clamp(24px, 4.5vw, 32px); font-weight: 800; text-wrap: balance; }
.pdemo__sub { margin: 0 auto 22px; max-width: 560px; text-align: center; color: var(--pd-muted); }
.pdemo__device { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.pdemo__cta { display: flex; justify-content: center; margin: 22px 0 0; }
.pdemo__note { margin: 14px 0 0; text-align: center; color: var(--pd-muted); font-size: 12px; }
.pdemo--compact { padding-block: 12px; }
.pdemo--compact .pdemo__note { margin-top: 10px; }

.pd-phone { position: relative; width: min(300px, 84vw); height: 600px; padding: 12px; border-radius: 44px; background: #141316; box-shadow: 0 26px 50px rgb(217 38 46 / .15), 0 8px 20px rgb(0 0 0 / .22); cursor: pointer; flex: 0 0 auto; box-sizing: border-box; }
.pd-phone *, .pd-phone *::before, .pd-phone *::after { box-sizing: border-box; }
.pd-notch { position: absolute; top: 12px; left: 50%; width: 96px; height: 22px; margin-left: -48px; background: #141316; border-radius: 0 0 14px 14px; z-index: 3; }
.pd-bars { position: absolute; top: 40px; left: 26px; right: 26px; display: flex; gap: 4px; z-index: 3; }
.pd-bar { flex: 1; height: 14px; padding: 5px 0; border: 0; background: transparent; cursor: pointer; min-height: 0; }
.pd-bar span { display: block; height: 4px; border-radius: 4px; background: rgb(28 27 31 / .12) linear-gradient(var(--pd-accent), var(--pd-accent)) no-repeat right / 0 100%; }
.pd-bar.is-done span, .pd-bar.is-on span { background-size: 100% 100%; }
.pd-screens { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: #F7F6F3; }
.pd-screen { position: absolute; inset: 0; padding: 60px 14px 14px; opacity: 0; visibility: hidden; color: var(--pd-ink); font-size: 13px; line-height: 1.45; display: flex; flex-direction: column; gap: 9px; text-align: right; }
.pd-screen.is-on { opacity: 1; visibility: visible; }
.pd-screen small { display: block; color: var(--pd-muted); font-size: 11.5px; }
.pd-screen strong { display: block; font-weight: 700; }
.pd-hello { display: flex; justify-content: space-between; align-items: flex-end; }
.pd-hello b { font-size: 20px; font-weight: 800; }
.pd-bell { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 3px rgb(0 0 0 / .08); position: relative; font-size: 15px; }
.pd-bell::after { content: ""; position: absolute; top: 6px; left: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--pd-accent); }
.pd-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; border-radius: 999px; background: var(--pd-chip); }
.pd-tabs span { padding: 7px 2px; border-radius: 999px; text-align: center; font-weight: 800; font-size: 12px; color: var(--pd-muted); }
.pd-tabs span.is-sel { background: #fff; color: var(--pd-ink); box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
.pd-card { background: #fff; border-radius: 16px; padding: 10px 12px; box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.pd-kicker { font-size: 11px; font-weight: 800; color: var(--pd-accent); }
.pd-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.pd-tile { background: #fff; border-radius: 14px; padding: 9px 6px 8px; text-align: center; box-shadow: 0 1px 3px rgb(0 0 0 / .08); display: flex; flex-direction: column; gap: 2px; align-items: center; position: relative; }
.pd-tile i { font-style: normal; font-size: 19px; line-height: 1.2; }
.pd-tile b { font-size: 11.5px; font-weight: 800; }
.pd-tile small { font-size: 10px; line-height: 1.25; }
.pd-tile.is-locked { opacity: .55; }
.pd-tag { position: absolute; top: -6px; left: 6px; font-size: 9.5px; font-weight: 800; color: #fff; background: var(--pd-accent); border-radius: 99px; padding: 1px 6px; }
.pd-track { display: flex; gap: 12px; align-items: center; }
.pd-ring { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--pd-accent) calc(var(--p) * 1%), var(--pd-chip) 0); }
.pd-ring span { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.pd-lesson { padding: 0; overflow: hidden; }
.pd-img { height: 96px; background: #ddd center / cover no-repeat; }
.pd-body { padding: 9px 12px 11px; display: flex; flex-direction: column; gap: 7px; }
.pd-swap { position: relative; height: 38px; }
.pd-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--pd-accent); color: #fff; font-weight: 800; font-size: 13px; }
.pd-btn.pd-ok { background: var(--pd-ok); }
.pd-b { opacity: 0; }
.pd-live, .pd-mini { display: flex; gap: 10px; align-items: center; }
.pd-dot { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: #FBEAEB; display: grid; place-items: center; font-size: 16px; }
.pd-thumb { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; background: #ddd center / cover no-repeat; }
.pd-mini .pd-thumb { width: 52px; height: 40px; }
.pd-course { display: flex; flex-direction: column; gap: 5px; }
.pd-row { display: flex; justify-content: space-between; gap: 8px; }
.pd-row span { color: var(--pd-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pd-meter { height: 7px; border-radius: 99px; background: var(--pd-chip); overflow: hidden; }
.pd-meter i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: var(--pd-accent); }
.pd-meter.is-full i { background: var(--pd-ok); }
.pd-list { padding: 4px 12px; }
.pd-li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--pd-line); }
.pd-li:last-child { border-bottom: 0; }
.pd-li > span:not(.pd-thumb) { flex: 1; min-width: 0; font-size: 12px; line-height: 1.3; }
.pd-li em { font-style: normal; font-size: 11.5px; color: var(--pd-muted); white-space: nowrap; }
.pd-li em.is-ok { color: var(--pd-ok); font-weight: 700; }
.pd-li em.is-new { color: var(--pd-accent); font-weight: 700; }
.pd-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pd-rcard { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.pd-ph { height: 72px; position: relative; background: #ddd center / cover no-repeat; }
.pd-ph b { position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: 800; background: rgb(255 255 255 / .92); border-radius: 99px; padding: 2px 7px; }
.pd-rcard p { margin: 0; padding: 6px 8px 8px; font-weight: 700; font-size: 12px; }
.pd-paste { display: flex; flex-direction: column; gap: 7px; }
.pd-field { border: 1px solid #DDD9D3; border-radius: 10px; padding: 8px 10px; background: #fff; color: var(--pd-muted); direction: ltr; text-align: left; font-size: 12px; overflow: hidden; white-space: nowrap; }
.pd-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pd-badge { font-size: 11px; font-weight: 800; border-radius: 99px; padding: 2px 9px; background: #E3F1EC; color: var(--pd-ok); white-space: nowrap; }
.pd-facts { margin: 6px 0 0; }
.pd-facts div { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--pd-line); font-size: 12px; }
.pd-facts div:last-child { border-bottom: 0; }
.pd-facts dt { color: var(--pd-muted); }
.pd-facts dd { margin: 0; font-weight: 700; }
.pd-toggle { display: flex; justify-content: space-between; align-items: center; }
.pd-sw { width: 38px; height: 22px; border-radius: 99px; background: #DDD9D3; position: relative; flex: 0 0 auto; }
.pd-sw::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.pd-sw.is-on { background: var(--pd-ok); }
.pd-sw.is-on::after { right: auto; left: 3px; }

.pd-steps { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 4px; }
.pd-step { display: none; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; cursor: pointer; }
.pd-step.is-on { display: flex; background: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / .08); }
.pd-step h3 { margin: 0 0 3px; font-size: 17px; font-weight: 800; color: var(--pd-ink); }
.pd-step p { margin: 0; color: var(--pd-muted); font-size: 15px; line-height: 1.55; }
.pd-n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pd-chip); color: var(--pd-accent); font-weight: 800; }
.pd-step.is-on .pd-n { background: var(--pd-accent); color: #fff; }
.pd-step:focus-visible, .pd-bar:focus-visible { outline: 3px solid var(--pd-accent); outline-offset: 2px; }
@media (max-width: 859px) { .pd-steps { order: -1; } .pd-phone { height: 560px; } }
@media (min-width: 860px) {
	.pdemo__device { flex-direction: row; justify-content: center; gap: 56px; }
	.pd-step { display: flex; opacity: .55; transition: opacity .3s; }
	.pd-step.is-on { opacity: 1; }
	.pdemo--compact .pdemo__device { flex-direction: column; gap: 16px; } /* the checkout's side column is narrow */
	.pdemo--compact .pd-step { display: none; }
	.pdemo--compact .pd-step.is-on { display: flex; }
}
@media (prefers-reduced-motion: no-preference) {
	.pd-screen { transform: translateX(-24px); transition: opacity .45s ease, transform .45s ease, visibility .45s; }
	.pd-screen.is-on { transform: none; }
	.is-playing .pd-bar.is-on span { background-size: 0 100%; animation: pdFill 5.5s linear forwards; }
	.is-playing .pd-screen.is-on .pd-in { animation: pdRise .5s ease both; animation-delay: var(--d, 0ms); }
	.is-playing .pd-screen.is-on .pd-a { animation: pdTap 2s ease forwards; }
	.is-playing .pd-screen.is-on .pd-b { animation: pdShow .3s ease 2s forwards; }
	.is-playing .pd-screen.is-on .pd-late { animation: pdRise .4s ease 2.4s both; }
	.is-playing .pd-screen.is-on .pd-meter i { animation: pdGrow 1.1s ease both; animation-delay: var(--d, 0ms); }
	.is-playing .pd-screen.is-on .pd-flip { animation: pdFlipBg .3s ease 1.6s both; }
	.is-playing .pd-screen.is-on .pd-flip::after { animation: pdFlipKnob .3s ease 1.6s both; }
	.is-paused .pd-bar span, .is-paused .pd-screen * { animation-play-state: paused !important; }
}
@media (prefers-reduced-motion: reduce) { .pd-a { opacity: 0; } .pd-b { opacity: 1; } }
@keyframes pdFill { to { background-size: 100% 100%; } }
@keyframes pdRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pdTap { 0%, 60% { transform: none; } 70% { transform: scale(.94); } 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes pdShow { to { opacity: 1; } }
@keyframes pdGrow { from { width: 0; } }
@keyframes pdFlipBg { from { background: #DDD9D3; } to { background: #1F6F5C; } }
@keyframes pdFlipKnob { from { right: 3px; } to { right: 19px; } }