:root {
  --ink: #1f2a25;
  --muted: #68736b;
  --paper: #f3f0e8;
  --panel: #fffdf7;
  --line: #d8ddd4;
  --green: #315b46;
  --green-soft: #dfeadf;
  --yellow: #f2c34f;
  --yellow-soft: #fff4c8;
  --blue: #4f79a9;
  --red: #b64d4d;
  --purple: #7960a8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
.shopping-product-icon.product-image > span { visibility: hidden; }
.shopping-product-icon.product-image.image-failed > span { visibility: visible; }
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 8px clamp(14px, 3vw, 36px);
  border-bottom: 1px solid #d9d5cb;
  background: rgba(255,255,255,.76);
}
.site-header h1 { margin: 0; font-size: clamp(1.3rem,2vw,1.75rem); }
.site-nav { display: flex; gap: 12px; }
.nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}
.nav-button[aria-current="page"] { border-color: #d6a72f; background: var(--yellow); color: var(--ink); }
.page-shell { width: min(1440px,100%); padding: 26px clamp(14px,3vw,38px) 60px; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.page-head h2 { margin: 0; font-size: clamp(1.8rem,4vw,3rem); }
.page-head p { max-width: 760px; margin: 6px 0 0; color: var(--muted); }
.version-badge { display: inline-flex; padding: 7px 11px; border-radius: 999px; background: var(--yellow-soft); font-weight: 800; white-space: nowrap; }
.mode-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.mode-button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #aeb7aa;
  border-radius: 9px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-weight: 750;
}
.mode-button.active { border-color: var(--green); background: var(--green); color: white; }
.screen-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.summary-chip { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.56); color: var(--muted); font-weight: 700; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 18px; align-items: start; }
.gallery-card { padding: 12px; border: 1px solid #c9cec5; border-radius: 14px; background: rgba(255,255,255,.72); box-shadow: 0 3px 12px rgba(31,42,37,.06); }
.gallery-card header { display: flex; align-items: start; gap: 9px; margin-bottom: 10px; }
.screen-index { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: .82rem; font-weight: 900; }
.gallery-card h3 { margin: 1px 0 2px; font-size: 1rem; }
.gallery-card small { color: var(--muted); }
.device-frame { position: relative; margin: 0 auto; overflow: hidden; border: 7px solid #222a27; background: #e9eee8; box-shadow: 0 8px 24px rgba(25,35,30,.18); }
.device-frame.board-frame { width: min(100%,238px); aspect-ratio: 9 / 16; border-radius: 10px; }
.device-frame.phone-frame { width: min(100%,190px); aspect-ratio: 9 / 19.5; border-width: 6px; border-radius: 26px; }
.device-frame.phone-frame::before { content: ""; position: absolute; z-index: 5; top: 5px; left: 50%; width: 34%; height: 8px; transform: translateX(-50%); border-radius: 999px; background: #222a27; }
.ui-screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #f8f6f0; color: var(--ink); touch-action: pan-y; }
.board-frame .ui-screen { font-size: 7px; }
.phone-frame .ui-screen { font-size: 7.8px; }
.ui-topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px 8px; background: #fbfaf5; border-bottom: 1px solid var(--line); }
.board-frame .ui-topbar { position: sticky; top: 0; z-index: 70; display: grid; grid-template-columns: minmax(220px,1fr) auto minmax(220px,1fr); }.board-frame .ui-topbar .brand { grid-column: 1; grid-row: 1; justify-self: start; }.board-frame .ui-topbar .date-pill { grid-column: 2; grid-row: 1; justify-self: center; }.face-topbar-result[hidden] { display: none; }.face-topbar-result { display: inline-flex; align-items: center; justify-self: end; max-width: 240px; min-height: 34px; padding: 0 12px 0 9px; border: 1px solid #aac5ae; border-radius: 999px; background: #e1efe1; color: #295d37; box-shadow: 0 2px 8px rgba(34,67,45,.1); }.board-frame .face-topbar-result { position: fixed; top: 14px; right: 16px; z-index: 80; }.board-frame .ui-topbar .face-topbar-result { position: static; grid-column: 3; grid-row: 1; }.board-frame .ui-topbar .ui-back-button { position: absolute; top: 50%; left: 11px; transform: translateY(-50%); }.board-frame .ui-topbar .ui-back-button + .brand { margin-left: 34px; }.face-topbar-result > span { width: 10px; height: 10px; flex: 0 0 auto; margin-right: 7px; border-radius: 50%; background: #58a45e; box-shadow: 0 0 0 4px rgba(88,164,94,.15); }.face-topbar-result strong { overflow: hidden; max-width: 12ch; font-size: .88em; text-overflow: ellipsis; white-space: nowrap; }.face-topbar-result[data-kind="unknown"] { border-color: #d8bd7c; background: #f8edcf; color: #795817; }.face-topbar-result[data-kind="unknown"] > span { background: #d19a28; box-shadow: 0 0 0 4px rgba(209,154,40,.16); }
.ui-back-button { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; padding: 0 0 2px; border: 1px solid #c7d0c5; border-radius: 8px; background: #eef3eb; color: var(--green); cursor: pointer; font: inherit; font-size: 1.7em; font-weight: 900; line-height: 1; }
.ui-back-button:hover { border-color: var(--green); background: var(--green-soft); }
.phone-frame .ui-topbar { padding-top: 17px; }
.phone-profile-button { display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.phone-profile-button:focus-visible { outline: 3px solid var(--green-soft); outline-offset: 2px; }
.spotify-phone-icon { color: #1db954; }
.brand { display: flex; align-items: center; gap: 6px; font-weight: 900; }
.brand-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--yellow); font-size: 11px; }
.date-pill { padding: 4px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-weight: 800; }
.avatars { display: flex; }
.avatar { display: grid; place-items: center; width: 20px; height: 20px; margin-left: -4px; border: 2px solid #fbfaf5; border-radius: 50%; color: white; font-size: 6px; font-weight: 900; }
.avatar.blue { background: var(--blue); }.avatar.rose { background: #b96b7a; }.avatar.green { background: #548762; }.avatar.orange { background: #c47b3c; }.avatar.purple { background: var(--purple); }
.ui-body { flex: 1; min-height: 0; overflow: hidden; padding: 10px; }
.phone-frame .ui-body { font-size: 1.5em; }
.ui-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ui-title-row h4 { margin: 0; font-size: 1.5em; }
.ui-subtitle { color: var(--muted); font-size: .9em; }
.touch-scroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.touch-scroll-y { touch-action: pan-y; overscroll-behavior-y: contain; }
.touch-scroll-x { touch-action: pan-x; overscroll-behavior-x: contain; }
[data-prikbord-scroll],.product-order-dialog,.product-lookup-body,.recipe-form-products,.bonus-choice-grid { touch-action: none; overscroll-behavior: contain; }
[data-prikbord-scroll].prikbord-scroll-active,.product-order-dialog.prikbord-scroll-active,.product-lookup-body.prikbord-scroll-active,.recipe-form-products.prikbord-scroll-active,.bonus-choice-grid.prikbord-scroll-active { cursor: grabbing; user-select: none; }
.ui-body[data-prikbord-scroll="y"] { overflow-y: auto; }
.board-nav { display: flex; gap: 3px; overflow-x: auto; padding: 6px 6px 8px; border-top: 1px solid var(--line); background: #fbfaf5; scrollbar-width: none; scroll-snap-type: x proximity; }
.board-nav::-webkit-scrollbar { display: none; }
.board-nav button,.phone-nav button { min-width: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-weight: 750; }
.board-nav button { flex: 0 0 calc((100% - 27px)/10); min-height: 42px; padding: 4px 1px; border-radius: 6px; font-size: .64em; line-height: 1.08; overflow-wrap: anywhere; scroll-snap-align: start; }
.fixed-weeklist-intro { margin: 0 0 8px; color: var(--muted); }.fixed-weeklist-actions { display: flex; gap: 7px; margin: 0 0 4px; }.fixed-weeklist-actions .ui-button { flex: 1; min-height: 34px; padding-inline: 8px; }.fixed-weeklist-action-status { min-height: 17px; margin: 0 0 5px; color: var(--muted); font-size: .82em; }.fixed-weeklist-screen .ui-body { display: flex; flex-direction: column; }.fixed-weeklist-screen .product-category-list { flex: 1 1 auto; min-height: 0; height: auto; }.fixed-weeklist-products .list-row { padding: 4px 6px; }.fixed-weeklist-products .shopping-product-link { cursor: pointer; }
.phone-frame .fixed-weeklist-intro { display: none; }.phone-frame .fixed-weeklist-actions { justify-content: flex-start; gap: 5px; margin-bottom: 3px; }.phone-frame .fixed-weeklist-actions .ui-button { flex: 0 1 auto; min-height: 26px; padding: 3px 7px; font-size: .72rem; line-height: 1.05; white-space: nowrap; }
.phone-frame .fixed-weeklist-screen .product-category-list { align-content: start; align-items: start; grid-auto-rows: max-content; }.phone-frame .fixed-weeklist-screen .shopping-flat-list { align-content: start; grid-auto-rows: max-content; }
.board-nav button.active,.phone-nav button.active { background: var(--green-soft); color: var(--green); }
.phone-nav { display: flex; gap: 2px; padding: 6px 5px 9px; overflow-x: auto; border-top: 1px solid var(--line); background: #fbfaf5; scrollbar-width: none; touch-action: pan-x; }
.phone-nav::-webkit-scrollbar { display: none; }
.phone-nav button { flex: 1 0 62px; padding: 5px 1px; border-radius: 7px; font-size: .76em; }
.icon-label { display: block; margin-bottom: 2px; font-size: 1.35em; }
.spotify-nav-icon { display: block; width: 1.35em; height: 1.35em; fill: #1ed760; }
.spotify-nav-icon path { fill: none; stroke: #101010; stroke-width: 1.45; stroke-linecap: round; }
.loxone-nav-icon { color: #7cbe32; font-size: 1.45em; line-height: 1; }
.loxone-grid { display: grid; gap: 14px; max-width: 760px; }
.loxone-light-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; min-height: 150px; border: 2px solid var(--line); transition: border-color .2s ease,background .2s ease; }
.loxone-light-card[data-state="on"] { border-color: #e1bd35; background: #fff9dc; }
.loxone-light-card[data-state="error"] { border-color: #c8b9b4; }
.loxone-device-icon { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #f0eee5; font-size: 2.35em; }
.loxone-light-card[data-state="on"] .loxone-device-icon { background: #ffe16f; box-shadow: 0 0 28px rgba(242,201,76,.42); }
.loxone-light-card h5 { margin: 0 0 6px; font-size: 1.2em; }
.loxone-light-card p { margin: 0; color: var(--muted); }
.loxone-power-button { display: grid; place-items: center; gap: 3px; min-width: 104px; min-height: 82px; border: 0; border-radius: 18px; background: var(--green); color: white; font: inherit; cursor: pointer; }
.loxone-power-button span { font-size: 1.7em; line-height: 1; }
.loxone-power-button:disabled { cursor: wait; opacity: .48; }
.loxone-local-note { margin: 14px 2px; color: var(--muted); font-size: .86em; }
.loxone-pool-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; min-height: 150px; border: 2px solid var(--line); }
.loxone-pool-card[data-state="open"] { border-color: #4ea7be; background: #eefaff; }
.loxone-pool-card[data-state="closed"] { border-color: #8ea99a; background: #f4f8f4; }
.loxone-pool-card[data-state="partial"] { border-color: #d6a23a; background: #fff8e5; }
.loxone-pool-card[data-state="error"] { border-color: #c8b9b4; }
.loxone-pool-card h5 { margin: 0 0 6px; font-size: 1.2em; }
.loxone-pool-card p { margin: 0; color: var(--muted); }
.loxone-pool-actions { display: flex; gap: 9px; }
.loxone-pool-actions button { min-width: 92px; min-height: 62px; border: 0; border-radius: 15px; background: var(--green); color: white; font: inherit; font-weight: 800; cursor: pointer; }
.loxone-pool-actions button:last-child { background: #526d60; }
.loxone-pool-actions button:disabled { cursor: wait; opacity: .48; }
.loxone-kitchen-card { display: grid; gap: 16px; border: 2px solid var(--line); transition: border-color .2s ease,background .2s ease; }
.loxone-kitchen-card[data-state="on"] { border-color: #e1bd35; background: #fff9dc; }
.loxone-kitchen-card[data-state="error"] { border-color: #c8b9b4; }
.loxone-kitchen-card > header { display: flex; align-items: center; gap: 16px; }
.loxone-kitchen-card h5 { margin: 0 0 4px; font-size: 1.25em; }
.loxone-kitchen-card header p { margin: 0; color: var(--muted); font-size: .82em; }
.loxone-kitchen-content { display: grid; gap: 14px; }
.loxone-kitchen-section { display: grid; gap: 9px; }
.loxone-kitchen-section h6 { margin: 0; color: var(--muted); font-size: .82em; text-transform: uppercase; letter-spacing: .05em; }
.loxone-mood-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(135px,1fr)); gap: 9px; }
.loxone-mood-button,.loxone-switch-button { min-height: 54px; border: 1px solid #9eb5a8; border-radius: 14px; background: #f7faf7; color: #284638; font: inherit; font-weight: 800; cursor: pointer; }
.loxone-mood-button.active,.loxone-switch-button.active { border-color: var(--green); background: var(--green); color: white; }
.loxone-circuit-list { display: grid; gap: 9px; }
.loxone-circuit-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.7); }
.loxone-circuit-row span { display: grid; gap: 2px; }
.loxone-circuit-row small { color: var(--muted); }
.loxone-switch-button { min-width: 112px; padding: 0 16px; }
.loxone-dimmer { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.7); }
.loxone-dimmer > span { display: flex; justify-content: space-between; gap: 12px; }
.loxone-dimmer output { color: var(--green-dark); font-weight: 900; }
.loxone-dimmer input { width: 100%; min-height: 34px; accent-color: var(--green); touch-action: pan-x; }
.loxone-dimmer.master { background: #edf5ee; }
.loxone-kitchen-card button:disabled,.loxone-kitchen-card input:disabled { opacity: .48; cursor: wait; }
.nav-icon-wrap { position: relative; width: max-content; margin-right: auto; margin-left: auto; }
.nav-count { position: absolute; top: -.55em; right: -1em; display: grid; place-items: center; min-width: 1.45em; height: 1.45em; padding: 0 .28em; border: 1px solid white; border-radius: 999px; background: #d65745; color: white; font-size: .62em; font-weight: 950; line-height: 1; box-shadow: 0 .12em .25em rgba(90,35,25,.25); }
.grid-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; }
.phone-frame .grid-2 { grid-template-columns: 1fr; }
.tile-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.ui-card { padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.ui-card h5 { margin: 0 0 5px; font-size: 1.05em; }
.ui-card p { margin: 3px 0; color: var(--muted); }
.hero-card { padding: 10px; border-radius: 11px; background: linear-gradient(135deg,#315b46,#4d765f); color: white; }
.hero-card p { margin: 3px 0 0; color: rgba(255,255,255,.8); }
.metric { font-size: 1.65em; font-weight: 900; }
.agenda-list,.list-stack { display: grid; gap: 5px; }
.shopping-scroll { height: calc(100% - 34px); overflow-y: auto; padding-right: 2px; scrollbar-width: thin; scrollbar-color: #aebba9 transparent; }
.shopping-scroll[data-prikbord-scroll="y"] { touch-action: none; }
.board-frame .shopping-screen .ui-body { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.board-frame .shopping-screen .shopping-scroll { height: auto; min-height: 0; }
.shopping-total-row { display: flex; align-items: stretch; justify-self: end; gap: 8px; margin-top: 7px; }
.shopping-total-row .shopping-ah-order-button { min-width: 164px; margin: 0; }
.shopping-ah-mode-actions { display: flex; align-items: stretch; gap: 7px; }
.shopping-ah-mode-actions .ui-button { min-width: 164px; margin: 0; }
.shopping-ah-mode-actions .shopping-ah-sync-button { min-width: 96px; width: 96px; padding: 8px; font-size: .72em; white-space: nowrap; }
.shopping-ah-sync-slot { display: grid; width: 96px; min-width: 96px; }
.shopping-ah-sync-slot .shopping-ah-sync-running { width: 96px; min-width: 96px; grid-template-rows: 36px auto; align-content: center; }
.shopping-ah-sync-running small { color: var(--green); font-size: .62em; font-weight: 900; line-height: 1; text-transform: uppercase; }
.shopping-ah-sync-slot [hidden] { display: none; }
.shopping-ah-sync-indicator { display: grid; width: 42px; min-width: 42px; place-items: center; align-self: center; }
.shopping-ah-sync-indicator[hidden] { display: none; }
.shopping-ah-sync-indicator .product-store-logo { width: 34px; height: 34px; flex-basis: 34px; border-radius: 50%; animation: ah-sync-logo-spin 1s linear infinite; will-change: transform; }
.shopping-ah-sync-indicator.attention { width: 42px; height: 42px; padding: 0; border: 2px solid #d78b17; border-radius: 50%; background: #fff6dd; color: #8a5200; font: 800 28px/1 system-ui,sans-serif; }
.shopping-ah-sync-indicator.attention .product-store-logo { display: none; }
.shopping-ah-sync-indicator.attention::after { content: "!"; }
.home-ah-attention { display: flex; align-items: center; gap: .7em; width: 100%; padding: .72em .8em; border: 2px solid #d78b17; border-radius: 1.1em; background: #fff6dd; color: #553500; text-align: left; }
.home-ah-attention[hidden] { display: none; }
.home-ah-attention-icon { display: grid; width: 1.7em; height: 1.7em; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #d78b17; color: #fff; font-weight: 900; }
.home-ah-attention strong,.home-ah-attention small { display: block; }
.ah-sync-attention-dialog { width: min(780px,calc(100% - 28px)); }
.ah-sync-attention-dialog > p { margin: 0 0 12px; color: var(--muted); }
.ah-sync-attention-list { display: grid; gap: 9px; max-height: min(65vh,900px); overflow-y: auto; }
.ah-sync-attention-item { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.ah-sync-attention-item strong,.ah-sync-attention-item small { display: block; }
.ah-sync-attention-item small { margin-top: 3px; color: var(--muted); }
.ah-sync-attention-item > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
@keyframes ah-sync-logo-spin { to { transform: rotate(360deg); } }
.shopping-ah-ordered-button { border: 1px solid #8da497; background: #e8eee8; color: var(--green); }
.shopping-total { display: flex; align-items: stretch; gap: 5px; min-width: 0; margin: 0; color: var(--green); }
.shopping-total-estimate { display: grid; grid-template-columns: minmax(0,1fr); align-content: center; min-width: 108px; padding: 5px 7px; border: 1px solid #9caf9e; border-radius: 11px; background: #fffdf8; box-shadow: 0 3px 9px rgba(38,56,43,.11); }
.shopping-total-estimate > span { color: var(--muted); font-size: .7em; font-weight: 800; line-height: 1.15; }
.shopping-total-estimate > strong { margin-top: 2px; font-size: 1.25em; line-height: 1; text-align: right; }
.shopping-total-estimate > small { grid-column: 1 / -1; color: #8a5200; font-size: .68em; font-weight: 750; text-align: right; }
.shopping-ah-comparison { position: relative; box-sizing: border-box; display: grid; grid-template-columns: 25px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; column-gap: 6px; width: 236px; max-width: 100%; min-width: 0; padding: 5px 7px; overflow: hidden; border: 1px solid #aeb8ad; border-radius: 11px; background: #f4f2eb; color: #4f5b52; box-shadow: 0 3px 9px rgba(38,56,43,.08); }
.shopping-ah-comparison > .product-store-logo { grid-row: 1 / 3; width: 25px; height: 25px; min-width: 25px; flex-basis: 25px; border-radius: 50%; }
.shopping-ah-comparison-counts { min-width: 0; display: grid; grid-template-columns: auto auto auto; align-items: baseline; justify-content: space-between; gap: 4px; white-space: nowrap; font-size: .58em; }
.shopping-ah-comparison-counts b { min-width: 0; font-weight: 750; }
.shopping-ah-comparison-counts b:last-child { text-align: right; }
.shopping-ah-comparison-counts strong { font-size: 1.38em; }
.shopping-ah-comparison-counts i { color: #7a817b; font-style: normal; }
.shopping-ah-comparison-meta { grid-column: 2; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 5px; overflow: hidden; white-space: nowrap; font-size: .54em; font-weight: 800; }
.shopping-ah-comparison-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.shopping-ah-comparison time { flex: 0 0 auto; color: #6d756e; }
.shopping-ah-comparison.is-match { border-color: #78a488; background: #eaf5ec; color: #24623c; }
.shopping-ah-comparison.is-mismatch { border-color: #d39a34; background: #fff4d8; color: #785000; }
.shopping-ah-comparison [data-ah-comparison-demo] { position: absolute; top: 1px; right: 5px; padding: 1px 4px; border-radius: 999px; background: #6d6251; color: #fff; font-size: .45em; line-height: 1.2; font-style: normal; font-weight: 900; letter-spacing: .05em; }
.shopping-ah-order-button { min-width: 158px; background: #087d64; color: white; }
.shopping-ah-order-button:disabled { opacity: .5; }
.shopping-ah-order-status { display: flex; align-items: center; gap: 8px; min-height: 35px; padding: 6px 10px; border: 1px solid #a9bba9; border-radius: 10px; background: #f4f8f1; color: var(--green); font-weight: 850; }
.shopping-ah-order-status[hidden] { display: none; }
.board-frame .shopping-screen [data-ah-order-status] { display: none !important; }
.shopping-ah-order-status small { color: var(--muted); font-weight: 700; }
.shopping-screen.ah-ordered-mode .ui-body { grid-template-rows: auto minmax(0,1fr) auto; }
.shopping-screen.ah-ordered-mode .shopping-total-row { grid-row: 3; align-self: start; align-items: flex-start; }
.shopping-screen.ah-ordered-mode .shopping-ah-mode-actions { align-items: flex-start; }
.shopping-screen.ah-ordered-mode .shopping-ah-mode-actions .ui-button { min-height: 44px; }
.shopping-screen.ah-ordered-mode .shopping-ah-sync-slot { align-self: start; }
.ah-orders-scroll { min-height: 0; overflow-y: auto; align-content: start; }
.ah-orders-scroll[hidden],.ah-history-products[hidden],[data-ah-order-history][hidden] { display: none; }
.ah-history-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 0 10px; color: var(--green); font-size: 1em; }
.ah-history-heading small { font-size: .76em; font-weight: 600; color: var(--muted); }
.ah-history-order { margin-bottom: 9px; }
.ah-history-order .shopping-ah-ordered-summary { min-height: 60px; background: #f0f2ec; box-shadow: none; }
.ah-history-order .shopping-ah-ordered-summary strong { font-size: 1em; line-height: 1.25; }
.ah-history-products { padding-top: 7px; }
.ah-orders-scroll .ah-ordered-list { min-height: 0; }
.ah-orders-scroll .shopping-ah-ordered-collapse:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.shopping-screen.ah-ordered-mode [data-shopping-current-view],
.shopping-screen.ah-ordered-mode [data-shopping-current-actions],
.shopping-screen.ah-ordered-mode .shopping-ah-order-button,
.shopping-screen.ah-ordered-mode [data-shopping-total] { display: none; }
.board-frame .shopping-screen [data-shopping-current-view] .direct-shopping-section { order: 1; min-height: 185px; height: max-content; }
.board-frame .shopping-screen [data-shopping-current-view] .weekly-shopping-section { order: 2; }
.board-frame .shopping-screen [data-shopping-current-view] { grid-template-rows: max-content max-content; }
.board-frame .shopping-screen [data-shopping-current-view] .list-row { display: grid; grid-template-columns: minmax(0,1fr) 112px 20px 26px 20px 20px; gap: 5px; width: 100%; min-width: 0; box-sizing: border-box; }
.board-frame .shopping-screen [data-shopping-current-view] .shopping-product-link { width: 100%; overflow: hidden; }
.shopping-screen.ah-ordered-mode [data-ah-order-status] { display: none; }
.shopping-screen.ah-ordered-mode .shopping-total-row { justify-self: start; }
.shopping-ah-ordered-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 9px 12px; border: 1px solid #aebcaf; border-radius: 12px; background: linear-gradient(145deg,#e5ebe5,#f6f7f3); color: var(--green); box-shadow: 0 3px 9px rgba(38,56,43,.08); }
.shopping-ah-ordered-collapse { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.shopping-ah-ordered-collapse i { flex: 0 0 auto; font-size: 1.55em; font-style: normal; font-weight: 900; transition: transform .2s ease; }
.shopping-ah-ordered-summary.collapsed .shopping-ah-ordered-collapse i { transform: rotate(-90deg); }
.shopping-ah-ordered-summary[hidden],.ah-ordered-overview[hidden] { display: none; }
.shopping-ah-ordered-summary strong,.shopping-ah-ordered-summary small { display: block; }
.shopping-ah-ordered-summary strong { font-size: 1.28em; line-height: 1.05; }
.shopping-ah-ordered-summary small { margin-top: 3px; color: var(--muted); font-size: .82em; font-weight: 750; }
.ah-ordered-overview { padding-top: 7px; }
.ah-ordered-list { min-height: 100%; background: linear-gradient(145deg,#edf0eb,#f8f7f2); }
.ah-ordered-list .shopping-section-head > span strong { display: block; color: var(--green); font-size: 1.18em; }
.ah-ordered-row { min-height: 58px; border-color: #cbd1ca; background: #eef0ed; color: #465149; box-shadow: none; }
.ah-ordered-row .shopping-product-link { cursor: default; }
.ah-ordered-row .shopping-product-link:hover strong { color: inherit; text-decoration: none; }
.ah-ordered-row .shopping-product-icon { filter: grayscale(.6); opacity: .72; }
.ah-ordered-row .shopping-product-copy small { color: #7a827b; }
.ah-ordered-row.needs-attention { border-color: #d2aaa3; background: #f5ece9; }
.ah-ordered-control-spacer { visibility: hidden; pointer-events: none; }
.ah-ordered-attention { flex: 0 0 auto; }
.shopping-overview { display: grid; align-content: start; gap: 9px; }
.shopping-list-section { padding: 8px; border: 1px solid #cbd8c9; border-radius: 12px; background: linear-gradient(145deg,#f4f8f0,#fffdf8); box-shadow: 0 3px 9px rgba(38,56,43,.07); }
.shopping-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }.shopping-section-head h5 { margin: 0; color: var(--green); font-size: 1.18em; }.shopping-section-kicker { display: block; margin-bottom: 1px; color: var(--muted); font-size: .7em; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }.shopping-section-actions { display: flex; align-items: center; gap: 6px; }.shopping-section-count { display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 7px; border-radius: 999px; background: var(--green); color: white; font-weight: 900; }
.shopping-section-collapse { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; flex: 1; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }.shopping-section-collapse strong { display: block; color: var(--green); font-size: 1.18em; }.shopping-section-collapse i { color: var(--green); font-size: 1.35em; font-style: normal; font-weight: 900; transition: transform .2s ease; }.shopping-list-section.collapsed .shopping-section-collapse i { transform: rotate(-90deg); }.shopping-list-section.collapsed .shopping-section-head { margin-bottom: 0; }
.weekly-shopping-head .shopping-section-collapse { flex: 0 1 auto; }.weekly-recipe-filters { display: flex; align-items: center; gap: 4px; margin-left: auto; }.weekly-recipe-filters[hidden] { display: none; }.weekly-source-filter { min-height: 25px; padding: 2px 8px; border: 1px solid #a9b7a8; border-radius: 999px; background: white; color: var(--green); cursor: pointer; font: inherit; font-size: .78em; font-weight: 900; }.weekly-source-filter.active { border-color: var(--green); background: var(--green); color: white; box-shadow: inset 0 -2px 0 rgba(0,0,0,.09); }.weekly-source-filter:focus-visible { outline: 2px solid #d2a839; outline-offset: 2px; }.weekly-recipe-source[hidden],.weekly-recipe-empty[hidden] { display: none; }[data-shopping-recipe-view] { display: grid; gap: 5px; }.weekly-recipe-source + .weekly-recipe-source { padding-top: 5px; border-top: 2px solid #d6ddd3; }.weekly-recipe-empty { padding: 8px; text-align: center; }
.direct-shopping-row { background: rgba(255,255,255,.88); }.direct-shopping-section.is-empty { border-style: dashed; background: rgba(255,255,255,.52); box-shadow: none; }.direct-shopping-section.is-empty .shopping-section-count { background: #718478; }.direct-shopping-empty { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; border: 1px dashed #b8c7b7; border-radius: 9px; color: var(--green); font-size: .86em; }.direct-shopping-empty > span { font-size: 1.35em; }
.shopping-page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }.shopping-view-switch { min-height: 27px; padding: 0 9px; border: 1px solid #9eaf9e; border-radius: 999px; background: white; color: var(--green); cursor: pointer; font: inherit; font-weight: 900; }.shopping-view-switch:hover { background: var(--green-soft); }.phone-frame .shopping-page-actions { flex-wrap: wrap; gap: 3px; }
.weekly-source-block { margin-bottom: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.58); }.weekly-source-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }.weekly-source-title strong,.weekly-source-title small { display: block; }.weekly-source-title strong { color: var(--green); }.weekly-source-title small { margin-top: 1px; color: var(--muted); font-size: .74em; }.weekly-source-title > span { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-weight: 900; }
.fixed-week-block,.extra-week-block { padding: 0; overflow: hidden; }.fixed-week-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 7px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }.fixed-week-toggle strong,.fixed-week-toggle small { display: block; }.fixed-week-toggle strong { color: var(--green); }.fixed-week-toggle small { margin-top: 1px; color: var(--muted); font-size: .74em; }.fixed-week-meta { display: flex; align-items: center; gap: 7px; }.fixed-week-meta b { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--green-soft); color: var(--green); }.fixed-week-meta i { color: var(--green); font-size: 1.25em; font-style: normal; font-weight: 900; transition: transform .2s; }.fixed-week-block.open .fixed-week-meta i,.extra-week-block.open .fixed-week-meta i { transform: rotate(180deg); }.fixed-week-products,.extra-week-products { display: grid; gap: 5px; padding: 0 7px 7px; }.fixed-week-products[hidden],.extra-week-products[hidden] { display: none; }
.loose-shopping-group { margin: 0 0 7px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.72); }.loose-shopping-group h5 { margin: 0 0 6px; color: var(--green); font-size: .88em; }.shopping-product-icon { font-size: 1.55em; }
[data-shopping-recipe-view][hidden],[data-shopping-product-view][hidden] { display: none; }
[data-shopping-product-view] { display: grid; grid-template-columns: 1fr; align-items: start; gap: 5px; }
.shopping-category-column { display: grid; align-content: start; gap: 7px; min-width: 0; }
.shopping-product-category { overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; }.shopping-product-category + .shopping-product-category { margin-top: 5px; padding-top: 5px; border-top: 4px solid #c3cec0; }.shopping-product-category.open { display: block; }
.shopping-category-toggle { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px; width: 100%; min-height: 34px; padding: 3px 5px 3px 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }.shopping-product-category.open .shopping-category-toggle { grid-template-columns: minmax(0,1fr) auto; align-content: center; padding: 3px 5px 3px 0; }.shopping-category-art { display: none; }
.shopping-category-copy strong,.shopping-category-copy small { display: block; }.shopping-category-copy strong { color: var(--green); font-size: .88em; line-height: 1.05; }.shopping-category-copy small { margin-top: 1px; color: var(--muted); font-size: .68em; }.shopping-category-chevron { color: #687a6c; font-size: 1.2em; font-weight: 900; transition: transform .28s cubic-bezier(.2,.8,.2,1); }.shopping-product-category.open .shopping-category-chevron { position: static; transform: rotate(180deg); }
.produce-category .shopping-category-toggle { min-height: 34px; }.produce-category .shopping-category-products { padding-left: 8px; }
.shopping-category-products { display: none; grid-template-columns: 1fr; gap: 3px; padding: 0 5px 5px; }.shopping-product-category.open .shopping-category-products { display: grid; animation: shopping-category-open .3s cubic-bezier(.2,.8,.2,1); }.shopping-category-products .list-row { min-width: 0; padding: 4px 5px; background: rgba(255,253,247,.95); }
.shopping-product-link { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }.shopping-product-link:hover strong { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }.shopping-product-copy { min-width: 0; flex: 1; }.shopping-product-copy strong,.shopping-product-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.shopping-product-copy small { color: var(--muted); }.shopping-product-link .shopping-product-icon { flex: 0 0 auto; }
.phone-frame .shopping-screen.product-list-layout .list-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto auto; grid-template-rows: auto auto; align-items: center; gap: 2px 4px; padding: 5px 6px; }.phone-frame .shopping-screen.product-list-layout .list-row:has(> .check) { grid-template-columns: 20px minmax(0,1fr) auto auto auto auto; }.phone-frame .shopping-screen.product-list-layout .list-row > .check { grid-column: 1; grid-row: 1 / 3; }.phone-frame .shopping-screen.product-list-layout .list-row > .shopping-product-link { grid-column: 1 / -1; grid-row: 1; width: 100%; gap: 5px; }.phone-frame .shopping-screen.product-list-layout .list-row:has(> .check) > .shopping-product-link { grid-column: 2 / -1; }.phone-frame .shopping-screen.product-list-layout .list-row > .shopping-product-meta { display: flex; grid-row: 2; min-width: 0; align-items: center; gap: 5px; padding-left: 35px; overflow: hidden; color: var(--muted); font-size: .78em; font-weight: 750; line-height: 1.05; white-space: nowrap; }.phone-frame .shopping-screen.product-list-layout .shopping-product-meta > .shopping-product-unit { overflow: hidden; text-overflow: ellipsis; }.phone-frame .shopping-screen.product-list-layout .shopping-product-meta > .shopping-product-price { flex: 0 0 auto; margin-left: auto; min-width: 0; padding: 0; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; }.phone-frame .shopping-screen.product-list-layout .list-row > .shopping-minus { grid-row: 2; }.phone-frame .shopping-screen.product-list-layout .list-row > .shopping-quantity-count { grid-row: 2; min-width: 1em; }.phone-frame .shopping-screen.product-list-layout .list-row > .shopping-plus { grid-row: 2; }.phone-frame .shopping-screen.product-list-layout .list-row > .shopping-remove { grid-row: 2; }.phone-frame .shopping-screen.product-list-layout .shopping-product-icon.product-image { width: 30px; height: 30px; }
.phone-frame .shopping-screen.product-list-layout .shopping-product-name { display: block; max-width: 100%; font-size: 1em; line-height: 1.08; white-space: nowrap; overflow-wrap: normal; word-break: normal; transform: none; }.phone-frame .shopping-screen.product-list-layout .recipe-product-unit { margin-top: 1px; font-size: .78em; line-height: 1.05; }.phone-frame .product-catalog-screen.product-list-layout .shopping-product-name { display: block; max-width: 100%; font-size: 1em; line-height: 1.08; white-space: normal; overflow-wrap: anywhere; transform: none; }
.phone-frame .shopping-screen.product-list-layout .shopping-product-icon.product-image { transform: translateY(16px); }
.product-catalog-list { display: grid; gap: 5px; margin-top: 8px; }.product-catalog-row { min-width: 0; padding: 7px 8px; }.product-catalog-row .shopping-product-icon,.recipe-product-row .shopping-product-icon { width: 29px; text-align: center; }.shopping-product-icon.product-image { position: relative; display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border-radius: 7px; background: #fff; }.shopping-product-icon.product-image img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; background: #fff; }.shopping-product-icon.product-image.image-failed img { display: none; }.shopping-product-icon.product-image > span { font-size: 1em; }.catalog-products-state { margin: 12px 4px; color: var(--muted); text-align: center; }.product-row-arrow { flex: 0 0 auto; color: var(--green); font-size: 1.35em; font-weight: 900; }.product-page-actions { display: flex; align-items: center; gap: 5px; }.product-category-list { height: calc(100% - 66px); overflow-y: auto; padding-right: 2px; }.product-order-button { min-height: 24px; padding: 2px 9px; border: 1px solid #315b46; border-radius: 999px; background: var(--green); color: white; cursor: pointer; font: inherit; font-weight: 900; }.product-order-button:hover { background: #244a37; }.product-order-panel { margin: 2px 4px 5px; padding: 7px; border: 1px solid #9eaf9e; border-radius: 9px; background: #f7fbf4; box-shadow: 0 4px 10px rgba(35,63,44,.12); }.product-order-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }.product-order-head > button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #e8eee5; color: var(--green); cursor: pointer; font: inherit; font-weight: 900; }.product-order-choices,.product-order-routes { display: flex; flex-wrap: wrap; gap: 5px; }.product-order-choices button,.product-order-routes button { min-height: 26px; padding: 3px 9px; border: 1px solid #a8b7a7; border-radius: 999px; background: white; color: var(--green); cursor: pointer; font: inherit; font-weight: 850; }.product-order-choices button.active { border-color: var(--green); background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green); }.product-order-routes { margin-top: 6px; }.product-order-routes button { flex: 1; border-color: #315b46; background: var(--green); color: white; }
.board-frame .product-catalog-screen.product-list-layout .product-category-list { padding-bottom: 18px; scroll-padding-bottom: 18px; }.board-frame .product-catalog-screen.product-list-layout .shopping-category-products { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 7px; padding: 2px 3px 9px 6px; }.board-frame .product-catalog-screen.product-list-layout .product-catalog-row { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: space-between; gap: 5px; overflow: hidden; padding: 0 0 7px; border: 1px solid #d2dbcf; border-radius: 11px; background: #fffdf8; box-shadow: 0 3px 8px rgba(35,63,44,.09); text-align: center; }.board-frame .product-catalog-screen.product-list-layout .product-catalog-row .shopping-product-link { flex: 1; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; width: 100%; text-align: center; }.board-frame .product-catalog-screen.product-list-layout .product-catalog-row .shopping-product-icon { width: auto; margin-top: 7px; font-size: 2.3em; line-height: 1; text-align: center; }.board-frame .product-catalog-screen.product-list-layout .product-catalog-row .shopping-product-icon.product-image { width: 100%; height: auto; margin-top: 0; aspect-ratio: 1.42 / 1; border-radius: 0; background: linear-gradient(145deg,#eef4ea,#fbf4dc); font-size: 1em; }.board-frame .product-catalog-screen.product-list-layout .product-catalog-row .shopping-product-icon.product-image img { mix-blend-mode: multiply; }.board-frame .product-catalog-screen.product-list-layout .product-catalog-row .shopping-product-copy { width: 100%; padding: 0 7px; text-align: center; }.board-frame .product-catalog-screen.product-list-layout .product-catalog-row .shopping-product-copy strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.12; text-align: center; }.board-frame .product-catalog-screen.product-list-layout .product-catalog-row .shopping-product-copy small { display: -webkit-box; overflow: hidden; margin-top: 2px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.15; text-align: center; }.board-frame .product-catalog-screen.product-list-layout .product-catalog-row .product-order-button { align-self: center; width: 82%; margin-top: auto; text-align: center; }.phone-frame .product-catalog-screen.product-list-layout .shopping-category-products { grid-template-columns: 1fr; }
.product-order-modal.product-order-panel { position: absolute; z-index: 100; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; border: 0; border-radius: 0; background: rgba(28,39,31,.46); box-shadow: none; animation: product-order-backdrop .2s ease-out both; }.product-order-dialog { width: min(88%,330px); max-height: 82%; overflow-y: auto; padding: 12px; border: 1px solid #93a893; border-radius: 13px; background: #fbfdf8; box-shadow: 0 14px 32px rgba(17,32,22,.3); animation: product-order-zoom .28s cubic-bezier(.2,.85,.25,1.15) both; }.product-order-dialog > p { margin: 0 0 8px; color: var(--muted); line-height: 1.35; }
.product-order-modal.closing-to-list { pointer-events: none; animation: product-order-backdrop-out .48s ease-in forwards; }.product-order-modal.closing-to-list .product-order-dialog { animation: product-order-zoom-out .34s cubic-bezier(.55,.05,.8,.2) forwards; }.product-order-fly { position: absolute; z-index: 112; display: flex; align-items: center; gap: 6px; max-width: 190px; padding: 7px 10px; border: 1px solid #91aa94; border-radius: 999px; background: #fffef8; color: var(--green); box-shadow: 0 10px 28px rgba(20,42,28,.3); opacity: 1; transform: translate(-50%,-50%) scale(1); transition: transform .68s cubic-bezier(.2,.75,.22,1),opacity .18s .5s ease-out,filter .4s ease; pointer-events: none; }.product-order-fly span { font-size: 1.65em; }.product-order-fly strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.product-order-fly.flying { opacity: 0; filter: blur(1px); transform: translate(calc(-50% + var(--fly-x)),calc(-50% + var(--fly-y))) scale(.16) rotate(8deg); }.board-nav button.cart-receiving,.phone-nav button.cart-receiving { animation: cart-receive-pulse .72s ease both; }
@keyframes product-order-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes product-order-zoom { from { opacity: 0; transform: scale(.72) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes product-order-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes product-order-zoom-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.68) translateY(10px); } }
@keyframes cart-receive-pulse { 0%,100% { transform: scale(1); } 55% { transform: scale(1.18); background: #dcebd9; box-shadow: 0 0 0 4px rgba(49,91,70,.14); } }
@media (prefers-reduced-motion: reduce) { .product-order-modal.product-order-panel,.product-order-dialog { animation: none; } }
.product-row-static { cursor: default; }.product-row-static:hover strong { color: inherit; text-decoration: none; }.product-detail-summary { min-width: 0; padding: 7px 8px; }.product-detail-summary .shopping-product-icon { width: 29px; text-align: center; }.product-detail-quantity { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }.product-detail-quantity button { display: grid; place-items: center; width: 23px; height: 23px; padding: 0 0 2px; border: 1px solid #abc2ad; border-radius: 50%; background: #f3f8f0; color: var(--green); cursor: pointer; font: inherit; font-size: 1.25em; font-weight: 900; line-height: 1; }.product-detail-quantity button:hover { border-color: var(--green); background: var(--green-soft); }.product-detail-quantity > span { min-width: 52px; text-align: center; }.product-detail-quantity strong,.product-detail-quantity small { display: block; white-space: nowrap; }.product-detail-quantity small { color: var(--muted); font-size: .72em; }
.product-standard-quantity { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 8px 8px; padding: 9px 10px; border-top: 1px solid var(--line); background: #f8faf6; }.product-standard-quantity > span strong,.product-standard-quantity > span small { display: block; }.product-standard-quantity > span small { margin-top: 2px; color: var(--muted); font-size: .76em; }
.product-mini-shopping { margin-top: 8px; padding: 8px; }.product-mini-shopping-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }.product-mini-shopping-head > span:first-child { font-size: 1.35em; }.product-mini-shopping-head > span:nth-child(2) { flex: 1; }.product-mini-shopping-head strong,.product-mini-shopping-head small { display: block; }.product-mini-shopping-head small { margin-top: 1px; color: var(--muted); font-size: .72em; }.product-mini-shopping-list { display: grid; grid-template-columns: 1fr; gap: 3px; }.product-mini-shopping-list .list-row { min-width: 0; }
.product-settings-card { margin-top: 8px; }.product-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.product-quantity-control { display: grid; grid-template-columns: 30px minmax(24px,auto) 1fr 30px; align-items: center; overflow: hidden; min-height: 32px; border: 1px solid #bfc6bc; border-radius: 8px; background: white; }.product-quantity-control button { align-self: stretch; border: 0; background: #edf3e9; color: var(--green); cursor: pointer; font: inherit; font-size: 1.35em; font-weight: 950; }.product-quantity-control button:hover { background: var(--green-soft); }.product-quantity-control strong { padding-left: 8px; font-size: 1.12em; }.product-quantity-control span { padding: 0 6px 0 3px; color: var(--muted); }.product-store-select { width: 100%; min-height: 32px; padding: 5px 30px 5px 8px; border: 1px solid #bfc6bc; border-radius: 8px; background: white; color: var(--ink); cursor: pointer; font: inherit; }.product-week-button,.product-recipe-setting { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 8px; padding: 9px; border: 1px solid #b8c2b6; border-radius: 10px; background: #f2f3ef; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }.product-week-button { box-shadow: inset 0 2px 4px rgba(32,47,37,.08); }.product-week-button.active { border-color: #315b46; background: #dcebd9; box-shadow: inset 0 3px 6px rgba(42,74,53,.18); }.product-week-button-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; background: #78867b; color: white; font-size: 1.35em; font-weight: 950; }.product-week-button.active .product-week-button-icon { background: var(--green); }.product-week-button strong,.product-week-button small,.product-recipe-setting strong,.product-recipe-setting small { display: block; }.product-week-button small,.product-recipe-setting small { margin-top: 2px; color: var(--muted); }.product-recipe-setting { justify-content: space-between; }.product-recipe-setting:not(.active) { opacity: .72; }.product-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }.product-card-actions .product-delete-button { margin-left: auto; }.product-delete-button.confirm-delete { background: #8f2f2a; }
.camera-settings { margin-top: 8px; padding: 0; overflow: hidden; }.camera-settings-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }.camera-settings-toggle strong,.camera-settings-toggle small { display: block; }.camera-settings-toggle strong { color: var(--green); font-size: 1.12em; }.camera-settings-toggle small { margin-top: 2px; color: var(--muted); font-size: .78em; }.camera-settings-toggle i { color: var(--green); font-size: 1.5em; font-style: normal; font-weight: 900; transition: transform .2s ease; }.camera-settings.collapsed .camera-settings-toggle i { transform: rotate(-90deg); }.camera-settings-body { padding: 0 10px 10px; }.camera-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.camera-tile { min-width: 0; overflow: hidden; border: 1px solid #c4d0c3; border-radius: 9px; background: #f8faf5; }.camera-preview { position: relative; display: flex; align-items: flex-end; justify-content: space-between; min-height: 100px; padding: 7px; color: white; overflow: hidden; }.camera-preview::before { content: ''; position: absolute; inset: 0; opacity: .76; }.camera-preview-one { background: linear-gradient(145deg,#7fa7ba 0 39%,#d9d4b6 40% 59%,#687b4d 60%); }.camera-preview-one::before { background: linear-gradient(90deg,transparent 0 26%,rgba(43,61,48,.38) 27% 31%,transparent 32% 68%,rgba(43,61,48,.4) 69% 73%,transparent 74%); }.camera-preview-two { background: linear-gradient(145deg,#bd9e7a 0 35%,#e5d6ae 36% 58%,#5f7862 59%); }.camera-preview-two::before { background: linear-gradient(90deg,rgba(33,49,38,.34) 0 18%,transparent 19% 73%,rgba(33,49,38,.34) 74% 79%,transparent 80%); }.camera-preview-label,.camera-live-dot { position: relative; z-index: 1; padding: 3px 5px; border-radius: 5px; background: rgba(22,35,27,.68); font-size: .76em; font-weight: 850; }.camera-live-dot { color: #dff5d9; }.camera-tile-copy { padding: 7px; }.camera-tile-copy strong,.camera-tile-copy small { display: block; }.camera-tile-copy strong { color: var(--green); font-size: .93em; }.camera-tile-copy small { margin-top: 2px; color: var(--muted); font-size: .75em; }
.phone-frame .product-settings-grid { grid-template-columns: 1fr; }
.product-store-connection { display: grid; gap: 7px; margin-top: 7px; }.product-store-link,.product-store-unlinked { display: flex; align-items: center; gap: 8px; min-height: 45px; padding: 6px 8px; border: 1px solid #cbd5ca; border-radius: 9px; background: #f7f8f4; color: var(--ink); text-decoration: none; }.product-store-link[hidden],.product-store-unlinked[hidden],.product-card-empty[hidden],[data-product-card-content][hidden] { display: none; }.product-store-link { border-color: #aac7b8; background: #eef6f1; cursor: pointer; }.product-store-link:hover { background: #e3f0e8; }.product-store-link.jumbo-link { border-color: #e1bd00; background: #fff9d9; }.product-store-link.jumbo-link:hover { background: #fff3ad; }.product-store-logo { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; border-radius: 9px; font-size: 1.05em; font-weight: 950; letter-spacing: -.08em; }.product-store-logo.ah { border: 2px solid #1595d3; background: white; color: #137fbd; }.product-store-logo.jumbo { border: 2px solid #e4bd00; background: #ffd800; color: #161616; font-size: .62em; letter-spacing: -.04em; }.product-store-logo.empty { background: #dfe4df; color: #718076; }.product-store-link strong,.product-store-link small,.product-store-unlinked strong,.product-store-unlinked small { display: block; }.product-store-link small,.product-store-unlinked small { margin-top: 1px; color: var(--muted); font-size: .78em; }.product-store-link-arrow { margin-left: auto; color: var(--green); font-size: 1.5em; font-weight: 900; }
.active-store-options { display: grid; gap: 8px; margin-top: 10px; }.active-store-options label { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 10px; border: 1px solid #cbd5ca; border-radius: 10px; background: #f7f8f4; cursor: pointer; }.active-store-options input { width: 24px; height: 24px; accent-color: var(--green); }.active-store-options label:has(input:checked) { border-color: #76a58d; background: #eef6f1; }.active-store-options strong,.active-store-options small { display: block; }.active-store-options small { margin-top: 2px; color: var(--muted); }.inactive-store-hidden { display: none !important; }
.trusted-store-row { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(280px,1.2fr); gap: 8px; }.active-store-options .trusted-store-domain { display: grid; grid-template-columns: auto 1fr; }.active-store-options .trusted-store-domain input { width: 100%; height: 42px; min-width: 0; padding: 7px 10px; border: 1px solid #aebcaf; border-radius: 8px; background: white; color: var(--ink); font: inherit; }.active-store-options .trusted-store-domain:has(input:focus) { border-color: #76a58d; }.active-store-options .trusted-store-domain:has(input:checked) { background: #f7f8f4; }
.trusted-store-card { margin: 0; border-color: #c4d0c2; box-shadow: 0 3px 8px rgba(35,63,44,.08); }.store-sync-settings { margin-top: 10px; border-top: 1px solid #d5ddd3; }.store-sync-settings summary { position: relative; padding: 10px 32px 9px 2px; color: var(--green); cursor: pointer; font-size: .95em; font-weight: 900; list-style: none; }.store-sync-settings summary::-webkit-details-marker { display: none; }.store-sync-settings summary::after { content: '⌄'; position: absolute; right: 6px; top: 5px; font-size: 1.45em; transition: transform .18s ease; }.store-sync-settings[open] summary::after { transform: rotate(180deg); }.store-sync-settings .ah-basket-sync-controls { display: grid; gap: 7px; padding: 0 2px 2px; }.store-sync-settings .ah-basket-sync-controls > p { margin: 0; }.store-sync-settings .ah-basket-sync-controls > .ui-button { width: 100%; }.store-sync-settings .ah-basket-apply[hidden] { display: none; }
.store-settings-accordion { display:grid; gap:12px; }
.store-settings-accordion .trusted-store-card { padding:0; overflow:clip; }
.store-settings-accordion .trusted-store-card > summary { display:grid; grid-template-columns:56px 1fr 32px; align-items:center; gap:14px; min-height:78px; padding:14px 18px; cursor:pointer; list-style:none; }
.store-settings-accordion .trusted-store-card > summary::-webkit-details-marker { display:none; }
.store-settings-accordion .trusted-store-card > summary strong { display:block; font-size:1.08rem; }
.store-settings-accordion .trusted-store-card > summary small { display:block; margin-top:3px; color:var(--muted); }
.store-card-chevron { font-size:1.45rem; text-align:center; transition:transform .18s ease; }
.store-settings-accordion details[open] .store-card-chevron { transform:rotate(180deg); }
.store-settings-body { display:grid; gap:12px; padding:0 16px 16px; border-top:1px solid var(--line); }
.store-settings-group { padding-top:14px; }
.store-settings-group + .store-settings-group { border-top:1px solid var(--line); }
.store-settings-group h6 { margin:0 0 8px; font-size:.95rem; color:var(--green-deep); }
.store-settings-group > p { margin:0 0 10px; color:var(--muted); }
.store-active-toggle { min-height:48px; }
.store-search-exclusions { display:grid; gap:8px; }
.active-store-options .store-search-exclusions label { display:grid; grid-template-columns:30px 48px 1fr; align-items:center; gap:10px; min-height:64px; padding:8px 12px; background:#fff; }
.store-search-exclusions label > span:last-child strong,.store-search-exclusions label > span:last-child small { display:block; }
.store-search-exclusions label > span:last-child small { margin-top:2px; color:var(--muted); }
.product-store-logo.pickup { background:#f1ead9; color:#493d2f; }
.pickup-store-message { margin-top:14px; padding:12px 14px; border-radius:14px; background:#f6efe0; }
.pickup-store-message p { margin:4px 0 0; }
.product-search-exclusions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; padding:10px 12px 12px; border:1px solid var(--line); border-radius:13px; }
.product-search-exclusions legend { padding:0 5px; font-weight:700; }
.product-search-exclusions label { display:flex; align-items:center; gap:8px; }
.product-detail-search-stores > p { margin:0 0 10px; color:var(--muted); }
.product-detail-search-store-options { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.product-detail-search-store-options label { display:flex; min-height:58px; align-items:center; gap:9px; padding:8px 10px; border:1px solid #cad5cc; border-radius:13px; background:#f8faf6; font-weight:800; }
.product-detail-search-store-options input { width:24px; height:24px; accent-color:var(--green); }
.ah-basket-sync-settings { display: grid; gap: 9px; margin: 0 2px 12px; padding: 10px; border-radius: 10px; background: #eef4ec; }
.ah-basket-sync-last span,.ah-basket-sync-last strong { display: block; }
.ah-basket-sync-last span,.ah-basket-sync-settings label > span { color: var(--muted); font-size: .78em; font-weight: 800; }
.ah-basket-sync-last strong { margin-top: 2px; color: var(--ink); }
.ah-basket-sync-settings label { display: grid; gap: 5px; }
.ah-basket-sync-settings select { min-height: 42px; padding: 7px 34px 7px 10px; border: 1px solid #9db19f; border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-weight: 800; }
.ah-basket-sync-settings .form-feedback { margin: 0; }
.phone-frame .trusted-store-row { grid-template-columns: 1fr; }
.product-category-field { grid-column: auto; }
.shopping-product-link.is-dragging { opacity: .35; }.shopping-list-section.drop-active { border-color: var(--green); background: #eaf3e7; box-shadow: inset 0 0 0 2px rgba(49,91,70,.24),0 5px 12px rgba(35,63,44,.13); }.shopping-drag-ghost { position: fixed; z-index: 10020; display: flex; align-items: center; gap: 7px; max-width: 220px; padding: 8px 11px; border: 1px solid #9eaf9e; border-radius: 10px; background: #fffdf7; color: var(--ink); box-shadow: 0 10px 24px rgba(24,45,32,.25); pointer-events: none; }.shopping-drag-ghost span { font-size: 1.45em; }.shopping-drag-ghost strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes shopping-category-open { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.product-source-icons { display: inline-flex; align-items: center; gap: 2px; margin-left: 5px; font-size: .88em; letter-spacing: 1px; vertical-align: middle; }
.product-active-offer { display: inline-flex; margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: var(--yellow); color: #5e4813; font-size: .72em; line-height: 1.1; vertical-align: middle; }
.recipe-card[type="button"] { width: 100%; padding: 0; color: inherit; font: inherit; text-align: left; }.recipe-choice-summary { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }.recipe-choice-summary .product-art { flex: 0 0 auto; }.recipe-choice-summary p { margin: 0; color: var(--muted); }.recipe-choice-actions { display: flex; align-items: flex-end; gap: 7px; }.recipe-choice-actions [data-recipe-choice-plan] { flex: 1; }.recipe-choice-actions [data-recipe-choice-card] { flex: .72; min-height: 22px; margin-top: 7px; padding: 3px 8px; border-color: #77827b; background: #7b857e; color: white; font-size: .78em; opacity: .94; }.recipe-choice-actions [data-recipe-choice-card]:hover { background: #68736c; }
.shopping-screen .shopping-product-copy,.product-mini-shopping .shopping-product-copy { transform: translateY(1px); }
.shopping-screen .shopping-product-name,.product-mini-shopping .shopping-product-name { display: inline-block; transform: translateY(2px); }
.shopping-screen.product-list-layout .shopping-category-copy::before { content: ''; height: 4px; flex: 1; border-radius: 99px; background: #c3cec0; }
.phone-frame .shopping-screen.product-list-layout .shopping-category-toggle { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.phone-frame .shopping-screen.product-list-layout .shopping-category-copy { min-width: 0; }
.phone-frame .shopping-screen .ui-body { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; }
.phone-frame .shopping-screen .shopping-scroll { height: auto; min-height: 0; }
.shopping-offline-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 5px; padding: 6px 8px; border: 1px solid #b9c9b8; border-radius: 9px; background: #edf5e9; color: var(--green); }
.shopping-offline-status.offline { border-color: #d7b55b; background: #fff4c9; color: #725500; }
.shopping-offline-status.pending { border-color: #d7b55b; background: #fff8df; }
.shopping-offline-status strong { font-size: .79em; }.shopping-offline-status small { color: inherit; font-size: .7em; text-align: right; }
.shopping-offline-status[hidden] { display: none; }
.shopping-clear-checked-action { flex: 0 0 auto; padding: 7px 9px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid #bdcbbc; background: rgba(251,250,245,.97); box-shadow: 0 -7px 18px rgba(35,63,44,.12); }
.shopping-clear-checked-action[hidden] { display: none; }
.shopping-clear-checked-button { width: 100%; min-height: 40px; }
.product-order-routes .product-order-page { flex: .72; align-self: flex-end; min-height: 22px; margin-top: 7px; padding: 2px 7px; border-color: #77827b; background: #7b857e; color: white; font-size: .76em; font-weight: 800; opacity: .94; }.product-order-routes .product-order-page:hover { background: #68736c; }
.recipe-shopping-groups { display: grid; gap: 6px; margin-bottom: 7px; }.recipe-shopping-groups[hidden] { display: none; }
.recipe-shopping-group { overflow: hidden; border: 1px solid #d6c47e; border-radius: 9px; background: #fff9e3; }
.recipe-shopping-head { display: flex; align-items: center; }.recipe-shopping-toggle { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; padding: 7px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }.recipe-shopping-toggle small { display: block; margin-top: 1px; color: var(--muted); }.recipe-shopping-icon { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border-radius: 8px; background: #f5dfa0; font-size: 1.45em; }.recipe-shopping-chevron { color: #80651d; font-size: 1.3em; font-weight: 900; transition: transform .15s; }.recipe-shopping-group.open .recipe-shopping-chevron { transform: rotate(180deg); }
.recipe-shopping-icon.recipe-shopping-image { overflow: hidden; background: #eef2ea; }.recipe-shopping-icon.recipe-shopping-image img { width: 100%; height: 100%; object-fit: cover; }
.shopping-screen .recipe-shopping-toggle .grow > strong { font-size: 1.3em; line-height: 1.15; }
.board-frame .shopping-screen .recipe-shopping-icon.recipe-shopping-image { width: 81.6px; height: 81.6px; flex-basis: 81.6px; }
.phone-frame .shopping-screen .recipe-shopping-icon.recipe-shopping-image { width: 40.8px; height: 40.8px; flex-basis: 40.8px; }
.recipe-product-unit { margin-left: .3em; color: var(--muted); font-size: .82em; font-weight: 700; white-space: nowrap; }
.recipe-product-row .shopping-product-copy strong { display: flex; min-width: 0; align-items: baseline; overflow: visible; }
.recipe-product-row .shopping-product-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-required-amount { flex: 0 0 auto; margin-left: .42em; color: var(--muted); font-size: .72em; font-weight: 700; white-space: nowrap; }
.recipe-shopping-products { display: none; gap: 5px; padding: 0 6px 6px; }.recipe-shopping-group.open .recipe-shopping-products { display: grid; }.recipe-shopping-products .list-row { background: rgba(255,255,255,.78); }.recipe-shopping-category { display: grid; gap: 3px; }.recipe-shopping-category + .recipe-shopping-category { padding-top: 3px; border-top: 1px solid rgba(102,112,99,.12); }.recipe-shopping-category h6 { margin: 0; padding: 0 3px; color: #879087; font-size: .62em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }.recipe-shopping-category > div { display: grid; gap: 4px; }.recipe-shopping-product-icon { font-size: 1.45em; }
.recipe-card-image { overflow: hidden; }.recipe-card-image img,.recipe-hero-image img { width: 100%; height: 100%; object-fit: cover; }.product-hero.recipe-hero { grid-template-columns: 150px minmax(0,1fr); gap: 12px; }.recipe-hero-image { width: 150px; height: 105px; overflow: hidden; border-radius: 10px; background: #eef2ea; }.recipe-hero > div:last-child { min-width: 0; }.recipe-hero h4 { margin: 0 0 4px; }.recipe-hero p { margin: 2px 0; }.recipe-inline-name { display: grid; gap: 3px; margin-bottom: 5px; color: var(--green); font-size: .72em; font-weight: 850; }.recipe-inline-name input { width: 100%; min-height: 44px; padding: 7px 10px; border: 2px solid var(--green); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 1.35rem; font-weight: 900; }.recipe-product-head,.recipe-product-option { display: grid; grid-template-columns: minmax(0,1fr) minmax(118px,.25fr) minmax(100px,.2fr) minmax(66px,.14fr) minmax(92px,.18fr); align-items: center; }.recipe-products-editing .recipe-product-head,.recipe-products-editing .recipe-product-option { grid-template-columns: minmax(0,1fr) minmax(118px,.25fr) minmax(100px,.2fr) minmax(66px,.14fr) minmax(92px,.18fr) 72px; }.recipe-product-head { gap: 8px; padding: 7px 9px; border-bottom: 1px solid #d9dfd5; color: var(--muted); font-size: .76em; }.recipe-product-option { gap: 8px; min-height: 54px; padding: 5px 7px; border-bottom: 1px solid #e1e5de; background: #fff; }.recipe-product-option:last-child { border-bottom: 0; }.recipe-product-quantity { display: grid; gap: 3px; white-space: nowrap; color: var(--ink); font-size: .9em; }.recipe-product-quantity small { color: var(--muted); font-size: .78em; }.recipe-product-stock { display: grid; color: var(--green); font-size: .82em; line-height: 1.18; }.recipe-product-stock small { color: var(--muted); }.recipe-product-stock.shortage { color: #9b3d32; }.recipe-product-stepper { display: grid; grid-template-columns: 36px minmax(32px,1fr) 36px; align-items: center; width: 112px; overflow: hidden; border: 1px solid #b7c4b3; border-radius: 9px; background: #fff; }.recipe-product-stepper button { min-width: 36px; min-height: 36px; padding: 0; border: 0; background: #edf3eb; color: var(--green); cursor: pointer; font: inherit; font-size: 1.2em; font-weight: 900; }.recipe-product-stepper button:disabled { color: #a9b2a6; cursor: default; }.recipe-product-stepper output { text-align: center; color: var(--ink); font-weight: 900; }.recipe-shopping-checkbox { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0; color: var(--green); font-size: .76em; font-weight: 800; cursor: pointer; }.recipe-shopping-checkbox input { width: 20px; height: 20px; accent-color: var(--green); }.recipe-product-remove { min-width: 46px; min-height: 38px; padding: 4px 6px; border: 1px solid #d6aaa2; border-radius: 9px; background: #fff; color: #9b3d32; cursor: pointer; font: inherit; font-size: .78em; font-weight: 850; }.recipe-product-remove:hover,.recipe-product-remove[data-confirmed="true"] { border-color: #9b3d32; background: #fff0ed; }.recipe-product-grid { display: grid; border: 1px solid #d9dfd5; border-radius: 9px; overflow: hidden; }.recipe-add-products { margin-top: 12px; }.recipe-preparation p { white-space: pre-line; line-height: 1.45; }.image-refresh-settings label { display: grid; gap: 2px; margin-bottom: 7px; }.image-refresh-settings label small { color: var(--muted); font-weight: 400; }.image-refresh-settings select { width: min(100%,280px); }
.detail-layout { display: grid; gap: 10px; }.detail-layout .product-settings-card,.detail-layout .product-mini-shopping { margin-top: 0; }.detail-hero-card { overflow: visible; padding: 0; border-color: #cbd7ca; border-radius: 18px; background: #f7faf4; box-shadow: 0 8px 22px rgba(35,63,44,.12); }
.product-detail-hero-card .product-detail-summary { display: block; overflow: visible; padding: 0; border: 0; background: transparent; }.product-detail-hero-card .product-row-static { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; }.product-detail-hero-card .shopping-product-icon { display: grid; place-items: center; width: 100%; height: clamp(300px,38vh,470px); overflow: hidden; border-radius: 18px 18px 0 0; background: linear-gradient(145deg,#eaf2e5,#fff8e5); font-size: 7rem; }.board-frame .product-detail-hero-card .shopping-product-icon.product-image,.phone-frame .product-detail-hero-card .shopping-product-icon.product-image { width: 100%; height: clamp(300px,38vh,470px); border-radius: 18px 18px 0 0; }.product-detail-hero-card .shopping-product-icon.product-image img { padding: 22px; object-fit: contain; background: linear-gradient(145deg,#eaf2e5,#fff8e5); }.product-detail-hero-card .shopping-product-copy { position: relative; z-index: 2; align-self: center; width: calc(100% - 36px); margin: -44px 18px 16px; padding: 18px 20px; border: 1px solid rgba(196,209,194,.82); border-radius: 17px; background: rgba(255,255,252,.94); box-shadow: 0 8px 24px rgba(35,63,44,.16); text-align: center; backdrop-filter: blur(8px); }.product-detail-hero-card .shopping-product-copy strong { display: block; font-size: clamp(1.35rem,2.4vw,1.85rem); line-height: 1.15; }.product-detail-hero-card .shopping-product-copy small { display: block; margin-top: 5px; color: var(--muted); font-size: .92em; }.product-detail-quantity-card { margin: 0; padding: 13px 15px; border-top: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(35,63,44,.08); }
.recipe-detail-hero-card { margin-bottom: 10px; }.product-hero.recipe-hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; }.recipe-hero-image,.recipe-detail-hero-card .product-art { width: 100%; height: clamp(320px,42vh,510px); border-radius: 18px 18px 0 0; }.recipe-detail-hero-card .product-art { aspect-ratio: auto; font-size: 7rem; }.recipe-hero-copy { position: relative; z-index: 2; width: calc(100% - 36px); margin: -52px auto 16px; padding: 18px 20px; border: 1px solid rgba(196,209,194,.82); border-radius: 17px; background: rgba(255,255,252,.95); box-shadow: 0 8px 24px rgba(35,63,44,.16); backdrop-filter: blur(8px); }.recipe-hero-copy h4 { font-size: clamp(2.7rem,4.8vw,3.7rem); line-height: 1.15; }.recipe-hero-copy .button-row { margin-top: 12px; }.recipe-hero-copy .ui-button:first-child { flex: 1; }
.phone-frame .product-detail-hero-card .shopping-product-icon,.phone-frame .product-detail-hero-card .shopping-product-icon.product-image,.phone-frame .recipe-hero-image,.phone-frame .recipe-detail-hero-card .product-art { height: 250px; }.phone-frame .product-detail-hero-card .shopping-product-copy,.phone-frame .recipe-hero-copy { width: calc(100% - 20px); margin-right: 10px; margin-left: 10px; padding: 14px; }
.recipe-detail-imported .recipe-hero { animation: recipe-import-reveal .38s ease-out both; }.recipe-detail-imported .recipe-product-option { animation: recipe-import-reveal .34s ease-out both; }.recipe-detail-imported .recipe-product-option:nth-child(1) { animation-delay: .12s; }.recipe-detail-imported .recipe-product-option:nth-child(2) { animation-delay: .2s; }.recipe-detail-imported .recipe-product-option:nth-child(3) { animation-delay: .28s; }.recipe-detail-imported .recipe-product-option:nth-child(4) { animation-delay: .36s; }.recipe-detail-imported .recipe-product-option:nth-child(n+5) { animation-delay: .44s; }@keyframes recipe-import-reveal { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.recipe-shopping-flat,.shopping-collection-flat { display: grid; gap: 4px; }.shopping-inline-category { display: grid; gap: 3px; }.shopping-inline-category + .shopping-inline-category { margin-top: 4px; }.shopping-inline-category h6 { display: flex; align-items: center; gap: 6px; margin: 0; color: #768178; font-size: .64em; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; }.shopping-inline-category h6::after { content: ''; height: 2px; flex: 1; border-radius: 99px; background: #d6ddd3; }.shopping-inline-category > div { display: grid; gap: 3px; }.direct-recipe-group + .direct-recipe-group { margin-top: 6px; }.direct-recipe-group > h5 { margin: 0 0 4px; color: var(--green); }.product-list-layout .shopping-flat-list { display: grid; gap: 2px; }.product-list-layout .shopping-flat-list > .list-row { padding: 3px 5px; background: rgba(255,253,247,.95); }
.board-frame .recipe-product-head,.board-frame .recipe-product-option { grid-template-columns: minmax(0,1fr) 140px 112px 120px 88px; }.board-frame .recipe-products-editing .recipe-product-head,.board-frame .recipe-products-editing .recipe-product-option { grid-template-columns: minmax(0,1fr) 140px 112px 120px 88px 72px; }.board-frame .recipe-product-head > span:nth-child(2),.board-frame .recipe-product-head > span:nth-child(3),.board-frame .recipe-product-quantity,.board-frame .recipe-product-stock { justify-items: center; text-align: center; }.board-frame .recipe-product-quantity { font-weight: 900; }
.recipe-product-required { color: var(--ink); font-size: .86em; font-weight: 850; text-align: center; }.recipe-product-head,.recipe-product-option { grid-template-columns: minmax(0,1fr) minmax(86px,.18fr) minmax(108px,.22fr) minmax(96px,.2fr) minmax(66px,.14fr) minmax(82px,.17fr); }.recipe-products-editing .recipe-product-head,.recipe-products-editing .recipe-product-option { grid-template-columns: minmax(0,1fr) minmax(86px,.18fr) minmax(118px,.24fr) minmax(96px,.2fr) minmax(66px,.14fr) minmax(82px,.17fr) 62px; }.board-frame .recipe-product-head,.board-frame .recipe-product-option { grid-template-columns: minmax(0,1fr) 116px 110px 106px 92px 82px; }.board-frame .recipe-products-editing .recipe-product-head,.board-frame .recipe-products-editing .recipe-product-option { grid-template-columns: minmax(0,1fr) 104px 118px 98px 84px 76px 62px; }.board-frame .recipe-product-head > span:nth-child(4),.board-frame .recipe-product-required { justify-items: center; text-align: center; }
.recipe-product-head,.recipe-product-option { grid-template-columns: minmax(0,1fr) minmax(96px,.2fr) minmax(96px,.2fr) minmax(66px,.14fr) minmax(82px,.17fr); }.recipe-products-editing .recipe-product-head,.recipe-products-editing .recipe-product-option { grid-template-columns: minmax(0,1fr) minmax(96px,.2fr) minmax(96px,.2fr) minmax(66px,.14fr) minmax(82px,.17fr) 62px; }.board-frame .recipe-product-head,.board-frame .recipe-product-option { grid-template-columns: minmax(0,1fr) 106px 106px 92px 82px; }.board-frame .recipe-products-editing .recipe-product-head,.board-frame .recipe-products-editing .recipe-product-option { grid-template-columns: minmax(0,1fr) 136px 98px 84px 76px 62px; }.recipe-product-main { position:relative; display:grid; min-width:0; }.recipe-product-needed-edit { display:flex; justify-content:center; width:100%; }.recipe-products-editing .recipe-product-main .shopping-product-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.recipe-product-order { display:grid; justify-items:center; color:var(--ink); font-size:.9em; }.recipe-product-row .shopping-product-copy small { display:block; margin-top:3px; color:var(--muted); font-size:.76em; font-weight:700; line-height:1.15; white-space:normal; }
.shopping-minus,.shopping-plus,.shopping-remove { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; padding: 0 0 2px; border-radius: 50%; cursor: pointer; font: inherit; font-size: 1.25em; font-weight: 800; line-height: 1; }.shopping-minus,.shopping-plus { border: 1px solid #abc2ad; background: #f3f8f0; color: var(--green); }.shopping-minus:hover,.shopping-plus:hover { border-color: var(--green); background: var(--green-soft); }.shopping-remove { border: 1px solid #d9beb9; background: #fff7f4; color: #a34e45; }.shopping-remove:hover { border-color: #a34e45; background: #f7ded9; }.recipe-shopping-head > .shopping-remove { margin-right: 7px; }
.shopping-quantity-count { min-width: 1.25em; flex: 0 0 auto; color: var(--ink); font-weight: 900; text-align: center; }
.shopping-screen.product-list-layout .shopping-minus,.shopping-screen.product-list-layout .shopping-plus,.shopping-screen.product-list-layout .shopping-remove { width: 26px; height: 26px; flex-basis: 26px; padding: 0; place-items: center; overflow: hidden; font-size: 0; line-height: 1; }
.shopping-screen.product-list-layout .shopping-minus::before,.shopping-screen.product-list-layout .shopping-plus::before,.shopping-screen.product-list-layout .shopping-remove::before { display: block; font: 800 20px/1 Arial,sans-serif; transform: translateY(-1px); }
.shopping-screen.product-list-layout .shopping-minus::before { content: '−'; }
.shopping-screen.product-list-layout .shopping-plus::before { content: '+'; }
.shopping-screen.product-list-layout .shopping-remove::before { content: '×'; }
.board-frame .shopping-screen.product-list-layout .list-row { display: grid; grid-template-columns: 17px minmax(0,1fr) minmax(3.7em,max-content) 26px minmax(1.25em,max-content) 26px 26px; align-items: center; column-gap: 7px; }
.board-frame .shopping-screen.product-list-layout .list-row > .check { grid-column: 1; }
.board-frame .shopping-screen.product-list-layout .list-row > .shopping-product-link { grid-column: 2; width: 100%; }
.board-frame .shopping-screen.product-list-layout .list-row > .shopping-product-meta { display: flex; grid-column: 3; min-width: 3.7em; justify-content: flex-end; }
.board-frame .shopping-screen.product-list-layout .shopping-product-meta > .shopping-product-price { min-width: 3.7em; padding: 0; justify-content: flex-end; text-align: right; }
.board-frame .shopping-screen.product-list-layout .list-row > .shopping-minus { grid-column: 4; }
.board-frame .shopping-screen.product-list-layout .list-row > .shopping-quantity-count { grid-column: 5; }
.board-frame .shopping-screen.product-list-layout .list-row > .shopping-plus { grid-column: 6; }
.board-frame .shopping-screen.product-list-layout .list-row > .shopping-remove { grid-column: 7; }
.board-frame .shopping-screen.product-list-layout .shopping-product-copy strong { display: flex; min-width: 0; align-items: baseline; gap: 5px; }
.board-frame .shopping-screen.product-list-layout .shopping-product-name { min-width: 0; overflow: hidden; flex: 0 1 auto; text-overflow: ellipsis; white-space: nowrap; }
.board-frame .shopping-screen.product-list-layout .recipe-product-unit { flex: 0 0 auto; }
.board-frame .shopping-screen.product-list-layout .product-source-icons { display: none; }
.shopping-row-collapsing { overflow: hidden; transition: max-height .5s cubic-bezier(.2,.72,.25,1),padding .42s ease,border-width .32s ease,opacity .2s ease,transform .42s ease; }.shopping-row-collapsing.shopping-row-leaving { max-height: 0 !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top-width: 0; border-bottom-width: 0; opacity: 0; transform: translateY(-3px); }.shopping-remove-fly { position: absolute; z-index: 95; display: flex; align-items: center; gap: 7px; padding: 3px 5px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fffdf7; box-shadow: 0 8px 22px rgba(32,46,36,.22); opacity: 1; transform: translate(0,0) scale(1) rotate(0); transition: transform .54s cubic-bezier(.42,0,.65,.3),opacity .2s .32s ease-out,filter .35s ease; pointer-events: none; }.shopping-remove-fly.leaving { opacity: 0; filter: blur(1.5px); transform: translate(var(--remove-x),var(--remove-y)) scale(.62) rotate(11deg); }
.shopping-empty { margin: 3px; color: var(--muted); }.shopping-undo-toast { display: flex; align-items: center; gap: 10px; }.shopping-undo-toast button { padding: 4px 7px; border: 1px solid rgba(255,255,255,.65); border-radius: 6px; background: white; color: var(--green); cursor: pointer; font: inherit; font-weight: 900; }
.shopping-screen .avatars,.shopping-screen .ui-title-row .ui-subtitle,.shopping-screen .shopping-section-count,.shopping-screen .weekly-source-title > span,.shopping-screen .fixed-week-meta b,.shopping-screen .nav-count { display: none; }
.shopping-screen .ui-body { padding-top: 7px; }.shopping-screen .ui-title-row { margin-bottom: 5px; }.shopping-screen .shopping-overview { gap: 5px; }.shopping-screen .shopping-list-section { padding: 6px; }.shopping-screen .shopping-section-head { margin-bottom: 4px; }.shopping-screen [data-shopping-product-view] { gap: 2px; }.product-list-layout .shopping-product-category + .shopping-product-category { margin-top: 1px; padding-top: 0; border-top: 0; }.product-list-layout .shopping-category-toggle,.product-list-layout .shopping-product-category.open .shopping-category-toggle,.product-list-layout .produce-category .shopping-category-toggle { min-height: 27px; padding-top: 1px; padding-bottom: 1px; }.product-list-layout .shopping-category-copy { display: flex; align-items: center; gap: 7px; }.product-list-layout .shopping-category-copy::after { content: ''; height: 4px; flex: 1; border-radius: 99px; background: #c3cec0; }.product-list-layout .shopping-category-copy strong { flex: 0 0 auto; }.product-list-layout .shopping-category-products,.product-list-layout .produce-category .shopping-category-products { gap: 2px; padding-top: 0; padding-right: 3px; padding-bottom: 2px; padding-left: 6px; }.product-list-layout .shopping-category-products .list-row { padding-top: 3px; padding-bottom: 3px; }.product-list-layout .shopping-product-link { gap: 5px; }
.board-frame .shopping-screen .shopping-product-icon.product-image,.board-frame .product-detail-summary .shopping-product-icon.product-image,.board-frame .recipe-product-row .shopping-product-icon.product-image { width: 68px; height: 68px; }
.board-frame .product-detail-hero-card .product-detail-summary .shopping-product-icon.product-image { width: 100%; height: clamp(300px,38vh,470px); }.phone-frame .product-detail-hero-card .product-detail-summary .shopping-product-icon.product-image { width: 100%; height: 250px; }
.board-frame .recipe-shopping-checkbox { padding-left: 0; }
.shopping-screen .shopping-list-section.collapsed .shopping-section-head { margin-bottom: 0; }
.shopping-screen .weekly-source-block { border: 0; border-radius: 0; background: transparent; box-shadow: none; }.shopping-screen .weekly-source-block > .fixed-week-toggle { border-bottom: 2px solid #c7d2c5; background: rgba(232,239,228,.48); }.shopping-screen .extra-week-products,.shopping-screen .fixed-week-products { padding-right: 0; padding-left: 0; }.shopping-screen .recipe-shopping-group { border: 0; border-radius: 0; background: transparent; }.shopping-screen .recipe-shopping-group + .recipe-shopping-group { margin-top: 2px; }.shopping-screen .recipe-shopping-products { padding-right: 0; padding-left: 0; }.shopping-screen .loose-shopping-group { padding-right: 0; padding-left: 0; border: 0; border-radius: 0; background: transparent; }.shopping-screen .loose-shopping-group > h5 { padding-right: 7px; padding-left: 7px; }.shopping-screen .recipe-shopping-icon { background: transparent; box-shadow: none; }
.phone-frame [data-shopping-product-view] { grid-template-columns: 1fr; }.phone-frame .shopping-product-category.open { grid-template-columns: 1fr; }.phone-frame .shopping-category-products { grid-template-columns: 1fr; padding: 0 5px 5px; }
.phone-frame .weekly-shopping-head { flex-wrap: wrap; }.phone-frame .weekly-recipe-filters { order: 3; width: 100%; margin-left: 0; }.phone-frame .weekly-source-filter { flex: 1; }
.agenda-item,.list-row { display: flex; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 7px; background: var(--panel); border: 1px solid var(--line); }
.agenda-time { width: 34px; color: var(--muted); font-weight: 800; }
.color-bar { width: 4px; align-self: stretch; border-radius: 99px; background: var(--blue); }
.grow { flex: 1; min-width: 0; }
.grow strong,.grow span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-tag { padding: 3px 6px; border-radius: 999px; background: var(--yellow-soft); color: #725500; font-size: .78em; font-weight: 850; white-space: nowrap; }
.status-tag.green { background: var(--green-soft); color: var(--green); }.status-tag.red { background: #f7dede; color: #8f3434; }.status-tag.gray { background: #eceeea; color: var(--muted); }
.check { display: grid; place-items: center; width: 17px; height: 17px; flex: 0 0 17px; border: 1px solid #9fa89f; border-radius: 5px; background: white; cursor: pointer; }
.check.done { background: var(--green); color: white; border-color: var(--green); }
.qty { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 6px; background: #edf0eb; font-weight: 850; }
.shopping-product-price,.recipe-product-price { flex: 0 0 auto; min-width: 3.7em; justify-content: flex-end; white-space: nowrap; color: var(--green); }
.ui-button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 26px; padding: 0 9px; border: 1px solid var(--green); border-radius: 7px; background: var(--green); color: white; cursor: pointer; font: inherit; font-weight: 850; }
.ui-button.secondary { background: white; color: var(--green); }.ui-button.yellow { border-color: #d6a72f; background: var(--yellow); color: var(--ink); }.ui-button.danger { border-color: var(--red); background: var(--red); }
.button-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.product-hero { display: grid; grid-template-columns: 74px 1fr; gap: 9px; align-items: center; }
.product-art { display: grid; place-items: center; aspect-ratio: 1; border-radius: 11px; background: #edf2ea; font-size: 34px; }
.phone-frame .product-hero { grid-template-columns: 56px 1fr; }
.scan-stage { display: grid; place-items: center; min-height: 74%; text-align: center; }
.product-lookup-overlay { position: absolute; z-index: 140; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(24,38,29,.54); animation: product-order-backdrop .2s ease-out both; }
.product-lookup-dialog { width: min(92%,680px); max-height: 88%; overflow: hidden; border: 1px solid #9aaf9d; border-radius: 20px; background: #fbfdf8; box-shadow: 0 16px 38px rgba(15,31,20,.32); animation: product-order-zoom .28s cubic-bezier(.2,.85,.25,1.15) both; }
.product-lookup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px 18px 13px; border-bottom: 1px solid #d9e2d8; }
.product-lookup-head h4 { margin: 7px 0 0; font-size: clamp(1.25rem,2.2vw,1.7rem); line-height: 1.15; }
.product-lookup-head h4.empty { min-height: 1.15em; }
.product-lookup-head > button { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #e8eee6; color: var(--ink); font-size: 1.6rem; cursor: pointer; }
.product-lookup-body { min-height: 260px; max-height: 62vh; overflow-y: auto; padding: 18px; }
.product-lookup-loading,.product-lookup-empty { display: grid; place-items: center; min-height: 230px; gap: 9px; text-align: center; }
.product-lookup-loading small { color: var(--muted); }
.product-lookup-spinner { width: 34px; height: 34px; border: 4px solid #dbe6dc; border-top-color: var(--green); border-radius: 50%; animation: product-lookup-spin .8s linear infinite; }
.product-lookup-spinner.small { display: inline-block; width: 17px; height: 17px; border-width: 2px; vertical-align: middle; }
.product-lookup-result { display: grid; grid-template-columns: minmax(190px,42%) 1fr; gap: 22px; align-items: center; }
.product-lookup-image { display: grid; place-items: center; min-height: 280px; overflow: hidden; border: 1px solid #dbe3d8; border-radius: 16px; background: #fff; }
.product-lookup-image img { display: block; width: 100%; height: 300px; object-fit: contain; }
.product-lookup-image small { width: 100%; padding: 7px 10px; border-top: 1px solid #e3e9e1; background: #f4f7f1; color: var(--muted); font-size: .75rem; font-weight: 700; text-align: center; }
.product-lookup-image.missing,.product-lookup-image.image-error { color: var(--muted); font-size: 4rem; }
.product-lookup-image.image-error img { display: none; }
.product-lookup-image.pending .product-lookup-image-fallback,.product-lookup-image:not(.pending) [data-product-order-image-spinner] { display: none; }
.product-lookup-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.product-lookup-meta span { padding: 4px 8px; border-radius: 999px; background: #eaf1e8; color: var(--green); font-size: .83rem; font-weight: 800; }
.product-lookup-price { display: inline-grid; min-width: 128px; margin: 0 0 14px; padding: 10px 14px; border-radius: 13px; background: var(--yellow); color: #3f3519; }
.product-lookup-price span { font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.product-lookup-price strong { font-size: 1.7rem; line-height: 1.05; }
.product-lookup-category { display: grid; gap: 5px; margin-top: 15px; }
.product-lookup-category > span { color: var(--ink); font-size: .8rem; font-weight: 900; text-transform: uppercase; }
.product-lookup-category select { width: 100%; min-height: 44px; padding: 8px 34px 8px 10px; border: 1px solid #9db19f; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-weight: 800; }
.product-lookup-category small { color: var(--muted); font-size: .76rem; }
.product-lookup-copy > p { margin: 0; color: var(--muted); line-height: 1.5; }
.product-lookup-live-status { display: flex; min-height: 2.9em; align-items: center; gap: 8px; }
.product-lookup-quantities button:disabled,.product-lookup-order-routes button:disabled,.product-order-page:disabled { cursor: wait; opacity: .42; }
.product-lookup-waiting { display: flex; align-items: center; gap: 8px; margin-top: 14px !important; color: var(--green) !important; font-size: .88rem; font-weight: 800; }
.product-lookup-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.product-lookup-store-link { text-decoration: none; }
@keyframes product-lookup-spin { to { transform: rotate(360deg); } }
@media (max-width:720px) { .product-lookup-result { grid-template-columns: 1fr; }.product-lookup-image { min-height: 190px; }.product-lookup-image img { height: 220px; } }
.product-lookup-image-fallback { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--muted); font-size: 4rem; text-align: center; }
.product-lookup-image-fallback small { padding: 0; border: 0; background: transparent; font-size: .9rem; }
.product-lookup-image.missing .product-lookup-image-fallback,.product-lookup-image.image-error .product-lookup-image-fallback { display: flex; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.product-lookup-queue { position: absolute; z-index: 140; inset: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; background: rgba(24,38,29,.58); }
.product-lookup-queue .product-lookup-overlay { position: relative; inset: auto; display: block; min-width: 0; min-height: 0; padding: 0; background: transparent; animation: none; }
.product-lookup-queue .product-lookup-overlay[hidden] { display: none; }
.product-lookup-queue .product-lookup-dialog { width: 100%; height: 100%; max-height: none; border-radius: 20px; }
.product-lookup-queue .product-lookup-head { gap: 10px; padding: 14px 15px 11px; }
.product-lookup-queue .product-lookup-head > div:first-child { min-width: 0; margin-right: auto; }
.product-lookup-queue .product-lookup-head h4 { overflow: hidden; margin-top: 5px; font-size: 1.35rem; text-overflow: ellipsis; white-space: nowrap; }
.product-lookup-queue .product-lookup-head > button { width: 44px; height: 44px; font-size: 1.8rem; }
.product-lookup-queue .product-lookup-body { min-height: 0; height: calc(100% - 75px); max-height: none; overflow-y: auto; padding: 14px; }
.product-lookup-queue .product-lookup-result { grid-template-columns: 1fr; gap: 12px; align-items: start; }
.product-lookup-queue .product-lookup-image { min-height: 190px; border-radius: 14px; }
.product-lookup-queue .product-lookup-image img { height: 230px; }
.product-lookup-queue .product-lookup-image-fallback { font-size: 4rem; }
.product-lookup-queue .product-lookup-meta { gap: 7px; margin-bottom: 9px; }
.product-lookup-queue .product-lookup-meta span { padding: 5px 9px; font-size: .9rem; }
.product-lookup-queue .product-lookup-price { min-width: 128px; margin-bottom: 10px; padding: 9px 13px; }
.product-lookup-queue .product-lookup-price span { font-size: .76rem; }
.product-lookup-queue .product-lookup-price strong { font-size: 1.65rem; }
.product-lookup-queue .product-lookup-quantities { gap: 7px; margin-top: 10px; }
.product-lookup-queue .product-lookup-quantities button { min-width: 64px; min-height: 48px; padding: 7px 12px; font-size: 1rem; }
.product-lookup-queue .product-lookup-order-routes { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 9px; }
.product-lookup-queue .product-lookup-order-routes button { min-height: 50px; padding: 8px 10px; font-size: .98rem; }
.product-lookup-queue .product-lookup-order-routes button:last-child { grid-column: 1 / -1; }
.product-lookup-queue .product-lookup-copy > .product-order-page { min-height: 46px; margin-top: 8px; font-size: .92rem; }
.product-lookup-queue.has-one { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; place-items: center; }
.product-lookup-queue.has-one .product-lookup-overlay { display: grid; width: 100%; height: 100%; place-items: center; padding: clamp(14px,2vw,32px); }
.product-lookup-queue.has-one .product-lookup-dialog { width: min(96%,1080px); height: auto; max-height: 94%; }
.product-lookup-queue.has-one .product-lookup-head { gap: 24px; padding: 28px 32px 22px; }
.product-lookup-queue.has-one .product-lookup-head h4 { margin-top: 10px; font-size: clamp(1.8rem,3vw,2.6rem); }
.product-lookup-queue.has-one .product-lookup-head > button { width: 64px; height: 64px; font-size: 2.5rem; }
.product-lookup-queue.has-one .product-lookup-body { min-height: 480px; height: auto; max-height: min(78vh,1240px); padding: 32px; }
.product-lookup-queue.has-one .product-lookup-result { grid-template-columns: minmax(340px,46%) minmax(0,1fr); gap: 38px; align-items: center; }
.product-lookup-queue.has-expanded .is-expanded .product-lookup-result { grid-template-columns: minmax(300px,46%) minmax(0,1fr); gap: 32px; align-items: center; }
.product-lookup-queue.has-one .product-lookup-image { min-height: 480px; }
.product-lookup-queue.has-one .product-lookup-image img { height: 520px; }
.product-lookup-queue.has-expanded { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: minmax(0,2fr) minmax(0,1fr); }
.product-lookup-queue.has-expanded .is-expanded { grid-column: 1 / -1; grid-row: 1; }
.product-lookup-queue.has-expanded .is-background { grid-row: 2; }
.product-lookup-queue.has-expanded .is-expanded .product-lookup-image { min-height: 320px; }
.product-lookup-queue.has-expanded .is-expanded .product-lookup-image img { height: 380px; }
.product-lookup-store-states { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.product-lookup-store-state { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: inherit; text-decoration: none; }
.product-lookup-store-state .product-store-logo { width: 40px; height: 40px; flex-basis: 40px; font-size: 1rem; }
.product-lookup-store-state .product-store-logo.jumbo { font-size: .58rem; }
.product-lookup-store-state::before { content: ''; position: absolute; inset: 0; border: 4px solid transparent; border-radius: 50%; }
.product-lookup-store-state[data-state="searching"]::before { border-color: #cbded2; border-top-color: var(--green); animation: product-lookup-spin .85s linear infinite; }
.product-lookup-store-state[data-state="linked"]::before { border-color: #2f7553; }
.product-lookup-store-state[data-state="unlinked"] { opacity: .62; cursor: default; }
.product-lookup-store-question { display: none; position: absolute; right: -2px; bottom: -2px; place-items: center; width: 22px; height: 22px; border: 2px solid white; border-radius: 50%; background: #e98c2f; color: white; font-size: 15px; font-weight: 950; }
.product-lookup-store-state[data-state="unlinked"] .product-lookup-store-question { display: grid; }
.product-lookup-queue-item.scan-again .product-lookup-dialog { animation: product-lookup-scan-again 1.1s ease-in-out; }
.product-lookup-store-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.product-lookup-store-actions .ui-button { flex: 1 1 140px; }
.product-lookup-queue [data-collapse-product-lookup][hidden],.product-lookup-queue .product-lookup-store-link[hidden],.product-lookup-queue .product-lookup-price[hidden] { display: none; }
@keyframes product-lookup-fly-in { from { opacity: 0; transform: translate(-46vw,46vh) scale(.22); } to { opacity: 1; transform: translate(0,0) scale(1); } }
@keyframes product-lookup-fly-out { from { opacity: 1; transform: translate(0,0) scale(1); } to { opacity: .08; transform: translate(var(--scan-fly-x),var(--scan-fly-y)) scale(.1); } }
@keyframes product-lookup-scan-again { 0%,100% { box-shadow: 0 16px 38px rgba(15,31,20,.32); transform: scale(1); } 35% { box-shadow: 0 0 0 10px #f3be3e,0 20px 45px rgba(15,31,20,.42); transform: scale(.975); } 65% { box-shadow: 0 0 0 6px #2f7553,0 20px 45px rgba(15,31,20,.42); transform: scale(1.012); } }
.product-lookup-queue .product-lookup-dialog { transform-origin: left bottom; animation: product-lookup-fly-in .46s cubic-bezier(.16,.82,.28,1.08) both; }
.product-lookup-overlay.scan-order-flying { pointer-events: none; }
.product-lookup-overlay.scan-order-flying .product-lookup-dialog { transform-origin: center; animation: product-lookup-fly-out .58s cubic-bezier(.55,.04,.8,.28) forwards; }

/* De productpopup is op het 43-inch Prikbord ongeveer tweemaal zo ruim en touchvriendelijk. */
.board-frame .product-lookup-overlay { padding: clamp(14px,2vw,32px); }
.board-frame .product-lookup-dialog { width: min(96%,1080px); max-height: 94%; border-radius: 28px; }
.board-frame .product-lookup-head { gap: 24px; padding: 28px 32px 22px; }
.board-frame .product-lookup-head h4 { margin-top: 10px; font-size: clamp(1.8rem,3vw,2.6rem); }
.board-frame .product-lookup-head > button { width: 64px; height: 64px; font-size: 2.5rem; }
.board-frame .product-lookup-body { min-height: 480px; max-height: min(78vh,1240px); padding: 32px; }
.board-frame .product-lookup-result { grid-template-columns: minmax(340px,46%) minmax(0,1fr); gap: 38px; align-items: center; }
.board-frame .product-lookup-image { min-height: 480px; border-radius: 24px; background: linear-gradient(145deg,#eef4ea,#fbf4dc); }
.board-frame .product-lookup-image img { width: 100%; height: 520px; object-fit: contain; mix-blend-mode: multiply; }
.board-frame .product-lookup-image-fallback { font-size: 6rem; }
.board-frame .product-lookup-image-fallback small { font-size: 1.15rem; }
.board-frame .product-lookup-meta { gap: 12px; margin-bottom: 18px; }
.board-frame .product-lookup-meta span { padding: 8px 14px; font-size: 1.1rem; }
.board-frame .product-lookup-price { min-width: 190px; margin-bottom: 22px; padding: 16px 22px; border-radius: 18px; }
.board-frame .product-lookup-price span { font-size: 1rem; }
.board-frame .product-lookup-price strong { font-size: 2.35rem; }
.product-lookup-price.active-bonus { background: var(--yellow); box-shadow: inset 0 0 0 2px #d6a72f; }
.product-lookup-price del { margin-top: 5px; color: #766a4b; font-size: 1rem; font-weight: 800; }
.product-active-price { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 4px; }
.product-active-price b { padding: 3px 7px; border-radius: 999px; background: var(--yellow); color: #5e4813; font-size: .92em; }
.product-active-price del { color: var(--muted); font-size: .76em; }
.board-frame .product-lookup-copy > p { font-size: 1.2rem; line-height: 1.5; }
.board-frame .product-lookup-quantities { gap: 12px; margin-top: 24px; }
.board-frame .product-lookup-quantities button { min-width: 86px; min-height: 64px; padding: 10px 22px; font-size: 1.25rem; }
.board-frame .product-lookup-order-routes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.board-frame .product-lookup-order-routes button { min-height: 68px; padding: 12px 18px; font-size: 1.18rem; }
.board-frame .product-lookup-order-routes button:last-child { grid-column: 1 / -1; }
.board-frame .product-lookup-copy > .product-order-page { width: 100%; min-height: 54px; margin-top: 14px; padding: 9px 16px; font-size: 1.05rem; }
.phone-frame .product-lookup-overlay { padding: 8px; }
.phone-frame .product-lookup-dialog { width: 96%; max-height: 94%; border-radius: 16px; }
.phone-frame .product-lookup-head { gap: 8px; padding: 12px; }
.phone-frame .product-lookup-head h4 { font-size: 1.25rem; }
.phone-frame .product-lookup-head > button { width: 42px; height: 42px; }
.phone-frame .product-lookup-body { min-height: 0; max-height: calc(94vh - 82px); padding: 12px; }
.phone-frame .product-lookup-result { grid-template-columns: 1fr; gap: 12px; }
.phone-frame .product-lookup-image { min-height: 150px; }
.phone-frame .product-lookup-image img { height: 200px; }
.phone-frame .product-lookup-order-routes { display: grid; grid-template-columns: 1fr; }
.phone-frame .product-lookup-order-routes button { min-height: 44px; }
.home-v2-person.walt-game { color: inherit; text-decoration: none; }

@media (max-width:720px) {
  .product-lookup-overlay { padding: 8px; }
  .product-lookup-dialog,.board-frame .product-lookup-dialog { width: min(96%,680px); max-height: 94%; border-radius: 16px; }
  .product-lookup-head,.board-frame .product-lookup-head { gap: 10px; padding: 14px 15px 11px; }
  .product-lookup-head h4,.board-frame .product-lookup-head h4 { margin-top: 6px; font-size: clamp(1.2rem,5vw,1.65rem); }
  .product-lookup-head > button,.board-frame .product-lookup-head > button { width: 44px; height: 44px; font-size: 1.8rem; }
  .product-lookup-body,.board-frame .product-lookup-body { min-height: 0; max-height: calc(94vh - 92px); padding: 14px; }
  .product-lookup-result,.board-frame .product-lookup-result { grid-template-columns: 1fr; gap: 15px; }
  .product-lookup-image,.board-frame .product-lookup-image { min-height: 180px; border-radius: 14px; }
  .product-lookup-image img,.board-frame .product-lookup-image img { height: min(260px,34vh); }
  .board-frame .product-lookup-meta { gap: 7px; margin-bottom: 10px; }
  .board-frame .product-lookup-meta span { padding: 5px 9px; font-size: .9rem; }
  .board-frame .product-lookup-price { min-width: 128px; margin-bottom: 13px; padding: 10px 14px; }
  .board-frame .product-lookup-price span { font-size: .76rem; }
  .board-frame .product-lookup-price strong { font-size: 1.7rem; }
  .board-frame .product-lookup-copy > p { font-size: 1rem; }
  .board-frame .product-lookup-quantities { gap: 7px; margin-top: 14px; }
  .board-frame .product-lookup-quantities button { min-width: 64px; min-height: 48px; padding: 7px 12px; font-size: 1rem; }
  .board-frame .product-lookup-order-routes { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
  .board-frame .product-lookup-order-routes button,.board-frame .product-lookup-order-routes button:last-child { grid-column: auto; min-height: 50px; padding: 8px 12px; font-size: 1rem; }
  .board-frame .product-lookup-copy > .product-order-page { min-height: 48px; margin-top: 9px; font-size: .95rem; }
}
.scan-ring { display: grid; place-items: center; width: 92px; height: 92px; border: 3px dashed #6f8d78; border-radius: 50%; background: #edf4ed; font-size: 34px; }
.product-scan-name-dialog { width: min(88%,680px); }
.product-scan-name-dialog > small { display: block; margin: -.15em 0 .8em; color: #657267; }
.product-scan-name-dialog label { display: grid; gap: .35em; margin: .9em 0 1.1em; font-weight: 800; }
.product-scan-name-dialog input { width: 100%; min-height: 2.7em; padding: .55em .7em; border: 2px solid #b9cbbd; border-radius: .65em; background: #fff; color: #15231a; font: inherit; }
.product-scan-name-dialog input:focus { border-color: #2f7553; outline: 3px solid rgba(47,117,83,.18); }
.phone-frame .scan-ring { width: 72px; height: 72px; }
.weekorder-order-actions { display: grid; gap: 7px; margin-top: 7px; }.weekorder-ordered-button,.weekorder-received-button { width: 100%; min-height: 40px; background: #2f7544; color: white; }.weekorder-received-button { background: #1f6237; }.weekorder-ordered-button[hidden],.weekorder-received-button[hidden] { display: none; }
.choice-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; margin-top: 8px; }
.choice-card { padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; text-align: left; }
.choice-card strong { display: block; }.choice-card span { color: var(--muted); font-size: .85em; }
.recipe-grid,.offer-grid,.product-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.recipe-card,.offer-card,.product-card { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: white; cursor: pointer; }
.page-layout-actions,.page-layout-switch { display: flex; align-items: center; gap: 5px; }
.page-layout-switch { padding: 3px; border: 1px solid #b8c8b5; border-radius: 999px; background: #edf3eb; }
.page-layout-switch button { min-height: 30px; padding: 3px 9px; border: 0; border-radius: 999px; background: transparent; color: var(--green); cursor: pointer; font: inherit; font-size: .75em; font-weight: 900; white-space: nowrap; }
.page-layout-switch button[aria-pressed="true"] { background: var(--green); color: #fff; box-shadow: 0 1px 4px rgba(28,65,41,.2); }
.board-frame .compact-five-layout.product-catalog-screen .shopping-category-products,
.board-frame .compact-five-layout.product-catalog-screen .shopping-flat-list { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.board-frame .compact-five-layout.product-catalog-screen .product-catalog-row { min-height: 148px; }
.board-frame .compact-five-layout.product-catalog-screen .product-catalog-row .shopping-product-icon.product-image { aspect-ratio: 1.2 / 1; }
.board-frame .compact-five-layout.product-catalog-screen .product-catalog-row .shopping-product-icon:not(.product-image) { margin-top: 10px; font-size: 1.85em; }
.board-frame .compact-five-layout.product-catalog-screen .product-catalog-row .shopping-product-copy { padding-inline: 5px; font-size: .82em; }
.board-frame .compact-five-layout.product-catalog-screen .product-catalog-row .shopping-product-copy small { -webkit-line-clamp: 1; }
.board-frame .compact-five-layout .recipe-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.board-frame .compact-five-layout .recipe-card .card-art { min-height: 118px; aspect-ratio: 1.28 / 1; }
.board-frame .compact-five-layout .recipe-card .card-copy { padding: 7px; font-size: .8em; }
.board-frame .compact-five-layout .recipe-card .card-copy strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.12; }
.board-frame .compact-five-layout .recipe-card .card-copy > span:last-child { display: block; overflow: hidden; margin-top: 3px; text-overflow: ellipsis; white-space: nowrap; }
.board-frame .compact-five-layout .bonus-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.board-frame .compact-five-layout .bonus-card-art { aspect-ratio: 1.2 / 1; }
.board-frame .compact-five-layout .bonus-card-copy { padding: 5px; font-size: .8em; }
.board-frame .compact-five-layout .bonus-card-copy small { -webkit-line-clamp: 1; }
.recipe-category-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 7px; }
.recipe-category-filters button { min-height: 32px; padding: 4px 9px; border: 1px solid #b8c8b5; border-radius: 999px; background: #fff; color: var(--green); cursor: pointer; font: inherit; font-size: .78em; font-weight: 900; }
.recipe-category-filters button.active { border-color: var(--green); background: var(--green); color: #fff; }
.recipe-card-kind { display: block; margin-bottom: 2px; color: #5e7868 !important; font-size: .72em; font-weight: 850; }
.recipe-detail-kind { color: #5e7868; font-size: .82em; font-weight: 850; }
.recipe-meta-edit { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin: 5px 0; }
.recipe-meta-edit label { display: grid; gap: 2px; color: var(--green); font-size: .72em; font-weight: 850; }
.recipe-meta-edit select { min-width: 0; min-height: 36px; padding: 4px 6px; border: 1px solid #b8c8b5; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; }
.bonus-screen .ui-body,.weekorder-screen .ui-body { overflow: hidden; }.weekorder-screen .ui-body { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }.bonus-scroll { height: calc(100% - 34px); touch-action: none; cursor: grab; }.bonus-scroll.bonus-scroll-dragging { cursor: grabbing; user-select: none; }.bonus-scroll,.weekorder-scroll { overflow-y: auto; padding-right: 2px; scrollbar-width: thin; scrollbar-color: #aebba9 transparent; }.bonus-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; padding: 7px 8px; border: 1px solid #cad7c7; border-radius: 10px; background: linear-gradient(135deg,#edf5e9,#fffdf7); }.bonus-toolbar strong,.bonus-toolbar small { display: block; }.bonus-toolbar strong { color: var(--green); font-size: 1.1em; }.bonus-toolbar small { margin-top: 1px; color: var(--muted); }.bonus-toolbar button:disabled,.weekorder-transfer-button:disabled { cursor: wait; opacity: .6; }.bonus-intro { margin: 0 2px 7px; color: var(--muted); font-size: .86em; }.bonus-state { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 96px; padding: 12px; border: 1px dashed #b8c7b7; border-radius: 10px; background: rgba(255,255,255,.62); color: var(--green); text-align: center; }.bonus-state[hidden],.bonus-grid[hidden] { display: none; }.bonus-state.is-error { border-color: #d9beb9; color: #93483f; }.bonus-spinner { width: 15px; height: 15px; flex: 0 0 15px; border: 2px solid #c8d5c6; border-top-color: var(--green); border-radius: 50%; animation: bonus-spin .75s linear infinite; }.bonus-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 7px; padding-bottom: 10px; }.bonus-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #d2dbcf; border-radius: 11px; background: #fffdf8; box-shadow: 0 3px 8px rgba(35,63,44,.09); }.bonus-card-order { display: flex; min-width: 0; flex: 1; flex-direction: column; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: inherit; text-align: center; }.bonus-card-order:hover .bonus-card-copy strong { color: var(--green); }.bonus-card-art { display: grid; width: 100%; aspect-ratio: 1.42 / 1; place-items: center; overflow: hidden; background: linear-gradient(145deg,#eef4ea,#fbf4dc); font-size: 2.3em; }.bonus-card-art img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }.bonus-card-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: center; padding: 6px 6px 5px; }.bonus-card-copy b { display: inline-block; max-width: 100%; margin-bottom: 3px; padding: 2px 5px; overflow: hidden; border-radius: 999px; background: var(--yellow); color: #5e4813; font-size: .72em; text-overflow: ellipsis; white-space: nowrap; }.bonus-card-copy strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.14; }.bonus-card-copy small { display: -webkit-box; overflow: hidden; margin-top: 3px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--muted); font-size: .72em; line-height: 1.16; }.bonus-ah-link { align-self: center; margin: 2px 6px 6px; padding: 3px 7px; border: 1px solid #aeb5af; border-radius: 999px; background: #7b857e; color: white; font-size: .7em; font-weight: 800; text-decoration: none; }.bonus-ah-link:hover { background: #68736c; }.bonus-ah-link.disabled { border-color: #d1d5d1; background: #b7bdb8; cursor: default; }.weekorder-scroll { display: grid; min-height: 0; align-content: start; gap: 8px; padding-bottom: 8px; }.weekorder-sticky-action { position: relative; z-index: 3; margin: 0 -9px -8px; padding: 9px 10px 8px; border-top: 1px solid #bdcbbc; background: rgba(251,250,245,.97); box-shadow: 0 -7px 18px rgba(35,63,44,.12); }.weekorder-review-card,.weekorder-ah-card { padding: 8px; }.weekorder-review-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }.weekorder-review-head > span { min-width: 0; flex: 1; }.weekorder-review-head strong,.weekorder-review-head small { display: block; }.weekorder-review-head > span > strong { color: var(--green); font-size: 1.1em; }.weekorder-review-head small { margin-top: 1px; color: var(--muted); font-size: .74em; }.weekorder-review-list { gap: 4px; }.weekorder-review-row { padding: 5px 7px; }.weekorder-review-row .grow span { color: var(--muted); font-size: .72em; }.weekorder-ah-card h5 { margin: 0 0 3px; color: var(--green); }.weekorder-ah-card > p { margin: 3px 0 7px; }.weekorder-transfer-button { width: 100%; min-height: 38px; }.weekorder-safety { padding: 6px 7px; border-radius: 7px; background: #f1f2ee; color: #657069 !important; font-size: .75em; line-height: 1.3; }.weekorder-transfer-feedback:empty { display: none; }.weekorder-transfer-feedback { margin-top: 7px; }.weekorder-transfer-summary { padding: 6px 7px; border: 1px solid #bcd0bc; border-radius: 8px; background: #edf6e9; color: var(--green); }.weekorder-transfer-summary.error { border-color: #dfc0bb; background: #fff3f0; color: #92483f; }.weekorder-transfer-summary strong,.weekorder-transfer-summary small { display: block; }.weekorder-transfer-summary small { margin-top: 2px; }.weekorder-transfer-results { display: grid; gap: 3px; margin: 5px 0 0; padding: 0; list-style: none; }.weekorder-transfer-results li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 7px; background: white; }.weekorder-transfer-results li > b { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; border-radius: 50%; background: #dcebd9; color: var(--green); }.weekorder-transfer-results li.warning > b { background: #fff0bc; color: #755b15; }.weekorder-transfer-results li.error > b { background: #f7deda; color: #99493f; }.weekorder-transfer-results li span { min-width: 0; }.weekorder-transfer-results li strong,.weekorder-transfer-results li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.weekorder-transfer-results li small { color: var(--muted); font-size: .72em; }.phone-frame .bonus-grid { grid-template-columns: 1fr; }.phone-frame .bonus-card-art { aspect-ratio: 1.8 / 1; }.phone-frame .weekorder-review-head { align-items: flex-start; }
@keyframes bonus-spin { to { transform: rotate(360deg); } }
.phone-nav[data-prikbord-scroll="x"] { touch-action: none; }
.phone-frame .bonus-card-order { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); align-items: stretch; text-align: left; }
.phone-frame .bonus-card-art { grid-row: 1 / span 2; width: 100%; height: 100%; min-height: 108px; aspect-ratio: auto; }
.phone-frame .bonus-card-copy { align-items: flex-start; justify-content: center; padding: 9px 10px 6px; text-align: left; }
.phone-frame .bonus-card-copy strong,.phone-frame .bonus-card-copy small { text-align: left; }
.phone-frame .bonus-choice-note { grid-column: 2; margin: 0; padding: 0 10px 8px; text-align: left; }
.card-art { display: grid; place-items: center; min-height: 48px; background: #edf2ea; font-size: 25px; }
.card-copy { padding: 6px; }.card-copy strong { display: block; }.card-copy span { color: var(--muted); }
.recipe-ingredients h5 { margin-bottom: 7px; }.recipe-product-row { width: 100%; min-width: 0; padding: 4px; color: var(--ink); font: inherit; text-align: left; }.board-frame .recipe-product-row .shopping-product-icon.product-image { width: 42px; height: 42px; }.recipe-product-row:hover { border-color: var(--green); box-shadow: 0 3px 8px rgba(40,74,52,.14); }
.week-strip { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; margin-bottom: 8px; }
.day-cell { min-width: 0; padding: 5px 2px; border-radius: 6px; background: #edf0eb; text-align: center; }
.day-cell.active { background: var(--yellow); }.day-cell strong,.day-cell span { display: block; }.day-cell span { color: var(--muted); }
.meal-row { display: grid; grid-template-columns: 38px 1fr; gap: 6px; margin-bottom: 5px; }
.meal-day { padding: 6px 2px; border-radius: 7px; background: var(--green-soft); color: var(--green); text-align: center; font-weight: 900; }
.meal-planner-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 8px; height: calc(100% - 34px); min-height: 0; }
.meal-timeline,.meal-library { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #aebba9 transparent; }
.meal-timeline { padding: 0 3px 16px 0; scroll-behavior: smooth; }
.meal-library { display: grid; grid-template-rows: minmax(0,.84fr) minmax(0,1.16fr); align-content: stretch; gap: 8px; overflow: hidden; padding: 0 2px 12px; }
.meal-library.drop-active { border-radius: 10px; background: rgba(231,241,230,.65); box-shadow: 0 0 0 2px #4f7c60; }
.meal-week-label { position: sticky; z-index: 2; top: 0; margin: 0 0 5px; padding: 5px 7px; border-radius: 7px; background: #315b46; color: white; font-size: .82em; font-weight: 900; box-shadow: 0 2px 5px rgba(34,58,43,.14); }
.meal-week-label.past { background: #73847a; }.meal-week-label.locked { background: #a2a8a2; }.meal-week-label.next { margin-top: 7px; background: #557661; }
.meal-day-card { display: grid; grid-template-columns: 42px 1fr; gap: 6px; min-height: 52px; margin-bottom: 5px; padding: 6px; border: 1px solid #cbd9c7; border-radius: 9px; background: #f1f7ee; transition: border-color .15s,background .15s,transform .15s; }
.meal-day-card.weekend { background: #edf4e9; }.meal-day-card.today { border: 2px solid #3f7353; background: #dfeeda; box-shadow: 0 2px 8px rgba(40,74,52,.16); }.meal-day-card.today .meal-date { background: #315b46; color: white; }.meal-day-card.past { opacity: .78; background: #eef0ec; }.meal-day-card.editable-past { border-style: dashed; border-color: #718377; opacity: 1; }.meal-day-card.locked { opacity: .48; }
.meal-day-card.drop-active { border-color: #2e6848; background: #e7f1e6; transform: scale(.99); }
.meal-date { display: grid; align-content: center; justify-items: center; padding: 3px 1px; border-radius: 7px; background: var(--green-soft); color: var(--green); text-align: center; }
.meal-date strong { font-size: .9em; }.meal-date span { font-size: .72em; }.meal-date em { margin-top: 2px; padding: 2px 3px; border-radius: 4px; background: var(--yellow); color: #604900; font-size: .55em; font-style: normal; font-weight: 900; }
.meal-dropzone { display: grid; align-items: center; min-width: 0; gap: 4px; }.meal-empty { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #8b958d; font-size: .82em; font-weight: 750; }
.meal-moment-row { display: grid; min-width: 0; gap: 2px; }
.meal-moment-label { color: #607266; font-size: .62em; font-weight: 900; letter-spacing: .025em; text-transform: uppercase; }
.planned-meal { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 6px; border-radius: 7px; background: #e7efe2; cursor: grab; }
.planned-meal.needs-shopping { border: 1px solid #b9cfb3; background: #e4f0df; }
.planned-meal.shopping-disabled { border-color: #d4b263; background: #fff7dc; }.meal-shopping-missing-status { display: block; max-width: 100%; overflow: hidden; padding: 0; border: 0; background: transparent; color: #805f16; cursor: pointer; font: inherit; font-size: .78em; font-weight: 900; line-height: 1.25; text-align: left; text-decoration: underline; text-overflow: ellipsis; white-space: nowrap; }.meal-shopping-missing-status:hover,.meal-shopping-missing-status:focus-visible { color: #4f390a; text-decoration-thickness: 2px; }.meal-shopping-dialog .recipe-product-choice-actions { margin-top: 10px; }
.planned-meal > span { flex: 0 0 auto; font-size: 1.5em; }.planned-meal div { min-width: 0; flex: 1; }.planned-meal strong,.planned-meal small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.planned-meal small { color: var(--muted); }.planned-meal.stock-covered { border: 1px solid #7bab74; background: #e4f3df; }.planned-meal.eaten { background: #e3e5e0; cursor: default; }.editable-past .planned-meal.eaten { cursor: grab; }.meal-eaten-button { flex: 0 0 auto; min-height: 30px; padding: 4px 7px; border: 1px solid #78a571; border-radius: 7px; background: #fff; color: var(--green); cursor: pointer; font: inherit; font-size: .72em; font-weight: 900; }.meal-eaten-button:disabled { opacity: .55; }.past-clear { display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 19px; padding: 0; border: 1px solid #b8c0b9; border-radius: 50%; background: rgba(255,255,255,.78); color: #6d776f; cursor: pointer; font: inherit; font-weight: 900; line-height: 1; }.past-clear:hover { border-color: #9c4f48; color: #9c4f48; }
.meal-library section { display: flex; min-height: 0; flex-direction: column; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.82); }
.meal-library .shopping-empty { margin: 0; padding: 8px; color: var(--muted); font-size: .76em; }
.meal-scroll-hint { align-self: center; }
.meal-mobile-tabs,.meal-mobile-weekbar,.meal-mobile-day-actions,.meal-mobile-choice { display: none; }
.meal-library-head { display: flex; align-items: start; justify-content: space-between; gap: 5px; margin-bottom: 6px; }.meal-library-head h5 { margin: 0; font-size: 1.12em; }.meal-library-head small { color: var(--muted); font-size: .72em; }
.meal-recipes-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 34px; padding: 2px 4px; border: 0; background: transparent; color: var(--green); cursor: pointer; font: inherit; font-size: 1.12em; text-align: left; }.meal-recipes-toggle span { transition: transform .15s; }.meal-recipes-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.meal-recipe-options { display: flex; flex-wrap: wrap; gap: 4px; margin: -2px 0 6px; }.meal-recipe-options button { min-height: 28px; padding: 3px 7px; border: 1px solid #b8c8b5; border-radius: 999px; background: #fff; color: var(--green); cursor: pointer; font: inherit; font-size: .68em; font-weight: 900; }.meal-recipe-options button.active { border-color: var(--green); background: var(--green); color: #fff; }
.meal-recipe-list { display: grid; min-height: 0; flex: 1; align-content: start; gap: 5px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; scrollbar-color: #aebba9 transparent; }.meal-recipe-card { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 5px; width: 100%; min-width: 0; padding: 6px; border: 1px solid #cfd8cc; border-radius: 8px; background: #eef5e9; color: var(--ink); cursor: grab; font: inherit; text-align: left; transition: box-shadow .15s,transform .15s,border-color .15s; }
.meal-recipe-card:hover,.meal-recipe-card.selected { border-color: var(--green); box-shadow: 0 3px 8px rgba(40,74,52,.16); transform: translateY(-1px); }.meal-recipe-card > span { font-size: 1.45em; }.meal-recipe-card div { min-width: 0; }.meal-recipe-card strong,.meal-recipe-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.meal-recipe-card small { color: var(--muted); font-size: .72em; }.meal-recipe-card em { padding: 2px 4px; border-radius: 5px; background: #dbe9d7; color: var(--green); font-size: .61em; font-style: normal; font-weight: 900; }
.meal-recipe-card.needs-shopping { background: #fff8df; border-color: #ead8a5; }.meal-recipe-card.needs-shopping em { background: #f7e19b; }
.meal-recipe-art { display: grid; width: 28px; height: 28px; place-items: center; overflow: hidden; flex: 0 0 28px; border-radius: 6px; }.meal-recipe-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.meal-recipe-card [data-open-recipe],.planned-meal [data-open-recipe] { cursor: pointer; }.meal-recipe-card [data-open-recipe] strong::after,.planned-meal [data-open-recipe] strong::after { content: "  ›"; color: var(--green); font-weight: 950; }
.meal-selection-hint { padding: 5px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: .8em; font-weight: 900; white-space: nowrap; }.recipe-arrival-selected { border-color: #315b46 !important; background: #e8f3e5 !important; box-shadow: 0 0 0 2px rgba(49,91,70,.3),0 5px 12px rgba(42,66,50,.18) !important; }.meal-library.selection-mode section { border-color: #e1e5df; background: rgba(247,248,245,.55); }.meal-library.selection-mode .meal-library-head,.meal-library.selection-mode .meal-recipe-card:not(.recipe-arrival-selected) { opacity: .28; filter: grayscale(.8); }.meal-library.selection-mode .recipe-arrival-selected,.meal-library.selection-mode .meal-recipe-card.selected { opacity: 1 !important; filter: none !important; }.arrival-pulse { animation: recipe-arrival-pulse .7s ease-out; }
.recipe-transition-page { z-index: 24; pointer-events: none; transform: translateY(0); opacity: 1; transition: transform .5s cubic-bezier(.45,0,.2,1),opacity .5s ease; }.recipe-transition-page.leave { transform: translateY(-104%); opacity: .92; }.recipe-flyer { position: fixed; z-index: 9999; display: flex; align-items: center; justify-content: center; gap: 7px; overflow: hidden; padding: 5px; border: 2px solid #577b65; border-radius: 14px; background: #eef5e9; color: var(--ink); box-shadow: 0 12px 28px rgba(36,53,42,.28); pointer-events: none; transition: left .5s cubic-bezier(.2,.8,.2,1),top .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1),height .5s cubic-bezier(.2,.8,.2,1),border-radius .5s ease; }.recipe-flyer.needs-shopping { border-color: #d0a52d; background: #fff4bd; }.recipe-flyer span { font-size: 1.7em; }.recipe-flyer img { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; }.recipe-flyer strong { overflow: hidden; font-size: .78em; text-overflow: ellipsis; white-space: nowrap; }.recipe-flyer.arrive { border-radius: 8px; }
@keyframes recipe-arrival-pulse { 0% { transform: scale(.94); } 55% { transform: scale(1.035); } 100% { transform: scale(1); } }
.phone-frame .meal-mobile-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 7px; padding: 3px; border-radius: 10px; background: #dfe8dc; }
.phone-frame .meal-mobile-tabs button { min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--green); font: inherit; font-weight: 900; cursor: pointer; }.phone-frame .meal-mobile-tabs button.active { background: white; box-shadow: 0 2px 6px rgba(40,74,52,.18); }.phone-frame .meal-mobile-tabs span { display: inline-grid; min-width: 20px; min-height: 20px; place-items: center; margin-left: 3px; border-radius: 999px; background: var(--green-soft); font-size: .78em; }
.phone-frame .meal-mobile-weekbar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px; margin-bottom: 7px; }.phone-frame .meal-mobile-weekbar[hidden] { display: none; }.phone-frame .meal-mobile-weekbar button { min-height: 42px; border: 1px solid #b9cab5; border-radius: 9px; background: white; color: var(--green); font: inherit; font-size: 1.65em; font-weight: 900; }.phone-frame .meal-mobile-weekbar button:disabled { opacity: .35; }.phone-frame .meal-mobile-weekbar strong { text-align: center; }
.phone-frame .meal-mobile-choice { display: block; margin: 0 0 7px; padding: 8px 10px; border-radius: 8px; background: var(--yellow); color: #5d4900; font-weight: 900; }.phone-frame .meal-mobile-choice[hidden] { display: none; }
.phone-frame .meal-mobile-day-actions { display: grid; gap: 7px; margin-bottom: 7px; padding: 10px; border: 1px solid #b9cab5; border-radius: 10px; background: #fffdf8; }.phone-frame .meal-mobile-day-actions[hidden] { display: none; }.phone-frame .meal-mobile-day-actions strong { color: var(--green); }.phone-frame .meal-mobile-day-actions > div { display: flex; flex-wrap: wrap; gap: 6px; }.phone-frame .meal-mobile-day-actions button { min-height: 38px; padding: 5px 9px; border: 1px solid #aab8a8; border-radius: 8px; background: white; color: var(--green); cursor: pointer; font: inherit; font-weight: 900; }.phone-frame .meal-mobile-day-actions .ui-button { border-color: var(--green); background: var(--green); color: white; }
.phone-frame .meal-planner-layout { display: block; height: auto; }.phone-frame .meal-timeline { overflow: visible; padding-right: 0; }.phone-frame .meal-library { display: grid; grid-template-rows: auto auto; overflow: visible; }.phone-frame .meal-library section { min-height: 110px; }.phone-frame .meal-recipe-list { overflow: visible; }
.phone-frame .recipe-meta-edit { grid-template-columns: 1fr; }
.phone-frame .meal-library.saving { opacity: .62; pointer-events: none; }
.phone-frame .meal-planner-layout[data-mobile-meal-active="planning"] .meal-library,.phone-frame .meal-planner-layout[data-mobile-meal-active="recipes"] .meal-timeline { display: none; }
.phone-frame [data-meal-week][hidden] { display: none; }
.form-grid { display: grid; gap: 6px; }
.field { display: grid; gap: 3px; }
.field label { color: var(--muted); font-size: .82em; font-weight: 800; }
.fake-input { min-height: 26px; padding: 6px 7px; border: 1px solid #bfc6bc; border-radius: 6px; background: white; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.switch { width: 27px; height: 15px; padding: 2px; border-radius: 999px; background: #b9c0b7; }
.switch.on { background: var(--green); }.switch::after { content: ""; display: block; width: 11px; height: 11px; border-radius: 50%; background: white; }.switch.on::after { margin-left: 12px; }
.empty-state { display: grid; place-items: center; min-height: 70%; text-align: center; color: var(--muted); }.empty-state .emoji { font-size: 38px; }
.hopjes-layout { display:grid; gap:12px; padding-bottom:12px; }
.hopjes-garden-card { display:grid; grid-template-columns:minmax(260px,.7fr) minmax(420px,1.3fr); min-height:260px; padding:0; overflow:hidden; border-color:#a9c998; background:linear-gradient(135deg,#fff9df,#f3faea); }
.hopjes-garden-copy { align-self:center; padding:24px; }.hopjes-kicker { color:#5f8b56; font-size:.8em; font-weight:950; letter-spacing:.06em; text-transform:uppercase; }.hopjes-garden-copy h4 { margin:7px 0 5px; font-size:1.8em; color:#284f3b; }.hopjes-garden-copy p { margin:0; color:var(--muted); }
.hopjes-garden-new { display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:7px 11px; border-radius:999px; background:#fff; color:#547847; box-shadow:0 3px 10px rgba(42,78,50,.1); }.hopjes-garden-new span { font-size:1.35em; }
.hopjes-garden { position:relative; min-height:260px; overflow:hidden; background:linear-gradient(#9ed8f0 0 56%,#9bd17d 57% 100%); }.hopjes-garden::after { content:''; position:absolute; left:-5%; right:-5%; bottom:-24px; height:86px; border-radius:50% 50% 0 0; background:#73b95b; }.hopjes-garden span { position:absolute; z-index:1; filter:drop-shadow(0 4px 2px rgba(38,68,43,.14)); }
.hopjes-sun { top:18px; right:24px; font-size:48px; }.hopjes-cloud { top:28px; left:35px; font-size:52px; }.hopjes-house { left:36%; bottom:39px; font-size:112px; }.hopjes-tree { right:9%; bottom:31px; font-size:92px; }.hopjes-flowers { left:9%; bottom:20px; font-size:35px; white-space:nowrap; }.hopjes-bird { left:18%; top:85px; font-size:27px; }
.hopjes-section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; }.hopjes-section-head h5,.hopjes-suggestions>h5 { margin:0 0 8px; color:var(--green-deep); }.hopjes-section-head small { margin-bottom:8px; color:var(--muted); }.hopjes-task-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.hopjes-task-card { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:7px 10px; min-height:96px; padding:10px; border:1px solid #c5d8ba; border-radius:15px; background:#fff; box-shadow:0 3px 9px rgba(45,74,48,.07); }.hopjes-task-icon { display:grid; grid-row:1 / span 2; place-items:center; width:48px; height:48px; border-radius:14px; background:#f1f7df; font-size:1.75em; }.hopjes-task-card strong,.hopjes-task-card small { display:block; }.hopjes-task-card small { margin-top:3px; color:var(--muted); }.hopjes-task-card button { grid-column:2; justify-self:start; min-height:36px; padding:5px 13px; border:0; border-radius:999px; background:#f4c847; color:#294835; font:inherit; font-weight:950; cursor:pointer; }
.hopjes-together { padding:12px; border-radius:16px; background:#f4f8f0; }.hopjes-timeline { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.hopjes-timeline article { display:flex; align-items:center; gap:9px; padding:10px; border-radius:12px; background:#fff; }.hopjes-timeline article>span { font-size:1.55em; }.hopjes-timeline p { margin:0; }.hopjes-timeline strong,.hopjes-timeline small { display:block; }.hopjes-timeline small { margin-top:2px; color:var(--muted); }
.hopjes-settings { margin-top:8px; padding:0; overflow:hidden; }.hopjes-settings>summary { display:grid; grid-template-columns:48px 1fr 28px; align-items:center; gap:12px; min-height:68px; padding:10px 14px; cursor:pointer; list-style:none; }.hopjes-settings>summary::-webkit-details-marker { display:none; }.hopjes-settings>summary strong,.hopjes-settings>summary small { display:block; }.hopjes-settings>summary small { margin-top:2px; color:var(--muted); }.hopjes-settings[open] .store-card-chevron { transform:rotate(180deg); }.hopjes-settings-body { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:14px; border-top:1px solid var(--line); background:#fafcf7; }.hopjes-settings-body section { min-width:0; }.hopjes-settings-body h6 { margin:0 0 8px; color:var(--green-deep); font-size:.95em; }.hopjes-settings-body label { display:flex; align-items:center; gap:9px; min-height:52px; padding:7px; border-bottom:1px solid #e1e8dc; }.hopjes-settings-body input { width:22px; height:22px; accent-color:var(--green); }.hopjes-settings-body label span { flex:1; }.hopjes-settings-body label strong,.hopjes-settings-body label small { display:block; }.hopjes-settings-body label small,.hopjes-settings-body p { margin-top:2px; color:var(--muted); }.hopjes-settings-body select { max-width:125px; padding:7px; border:1px solid #b9c8b4; border-radius:8px; background:#fff; }
.phone-frame .hopjes-layout { gap:9px; }.phone-frame .hopjes-garden-card { grid-template-columns:1fr; min-height:0; }.phone-frame .hopjes-garden-copy { padding:14px 14px 8px; }.phone-frame .hopjes-garden-copy h4 { font-size:1.25em; }.phone-frame .hopjes-garden { min-height:180px; }.phone-frame .hopjes-house { font-size:82px; }.phone-frame .hopjes-tree { font-size:66px; }.phone-frame .hopjes-flowers { font-size:25px; }.phone-frame .hopjes-suggestions { display:grid; gap:7px; }.phone-frame .hopjes-task-card { grid-template-columns:43px minmax(0,1fr) auto; min-height:68px; padding:8px; }.phone-frame .hopjes-task-icon { grid-row:auto; width:43px; height:43px; }.phone-frame .hopjes-task-card button { grid-column:auto; justify-self:auto; min-height:38px; padding:5px 10px; }.phone-frame .hopjes-timeline { grid-template-columns:1fr; }.phone-frame .hopjes-timeline article:nth-child(n+3) { display:none; }.phone-frame .hopjes-settings-body { grid-template-columns:1fr; }
.toast { position: absolute; z-index: 10; left: 50%; bottom: 48px; transform: translateX(-50%); width: max-content; max-width: 82%; padding: 7px 10px; border-radius: 8px; background: var(--ink); color: white; font-weight: 800; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.prototype-update-toast { position: fixed; top: 18px; bottom: auto; z-index: 10050; min-width: min(390px,calc(100vw - 28px)); max-width: calc(100vw - 28px); padding: 10px 14px; text-align: center; background: #315b46; box-shadow: 0 8px 22px rgba(25,50,34,.26); }.prototype-update-toast.success { background: #3d7655; }
.past-confirm-overlay { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(23,39,30,.46); backdrop-filter: blur(2px); }.past-confirm-dialog { width: min(100%,330px); padding: 16px; border: 1px solid #d3d7cf; border-radius: 14px; background: #fffdf7; box-shadow: 0 16px 36px rgba(20,35,27,.28); text-align: center; }.past-confirm-icon { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 8px; border-radius: 50%; background: var(--yellow-soft); color: #795d18; font-size: 1.7em; font-weight: 900; }.past-confirm-dialog h5 { margin: 0; font-size: 1.15em; }.past-confirm-dialog p { margin: 7px 0 10px; color: var(--muted); line-height: 1.4; }.past-confirm-dialog .button-row { justify-content: center; }
.prototype-layout { display: grid; grid-template-columns: minmax(220px,300px) 1fr; gap: 22px; align-items: start; }
.prototype-sidebar { position: sticky; top: 14px; padding: 14px; border: 1px solid #c9cec5; border-radius: 13px; background: rgba(255,255,255,.72); }
.prototype-sidebar h3 { margin: 0 0 10px; }.screen-menu { display: grid; gap: 4px; max-height: 68vh; overflow: auto; }
.screen-menu-group { display: grid; gap: 4px; }.screen-menu-group + .screen-menu-group { margin-top: 7px; padding-top: 7px; border-top: 1px solid #d6ddd3; }.screen-menu-heading { display: flex; align-items: center; gap: 6px; margin: 0; padding: 2px 7px; color: #5d6e62; font-size: .72rem; font-weight: 900; letter-spacing: .025em; text-transform: uppercase; }.screen-menu-heading span { font-size: 1rem; }
.screen-menu button { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; }
.screen-menu button.active { background: var(--green-soft); color: var(--green); font-weight: 850; }
.screen-complete { margin-left: auto; color: var(--green); font-size: 1.1rem; font-weight: 950; }
.prototype-stage { min-height: 760px; padding: 20px; border: 1px solid #c9cec5; border-radius: 14px; background: linear-gradient(135deg,#e7e3da,#f7f4ec); }
.prototype-stage .device-frame.board-frame { width: min(100%,430px); }
.prototype-stage .device-frame.phone-frame { width: min(100%,300px); }
.prototype-stage .board-frame .ui-screen { font-size: 12.5px; }
.prototype-stage .phone-frame .ui-screen { font-size: 12px; }
.prototype-caption { margin: 0 0 14px; text-align: center; }.prototype-caption strong { display: block; font-size: 1.12rem; }.prototype-caption span { color: var(--muted); }
.prototype-fullscreen-surface { position: relative; width: 100%; }
.fullscreen-mode-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px 0 14px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--ink); font-weight: 850; cursor: pointer; user-select: none; }
.fullscreen-mode-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fullscreen-switch-track { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #cbd3cd; box-shadow: inset 0 0 0 1px rgba(28,53,39,.14); transition: background .18s ease; }
.fullscreen-switch-track span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(24,42,32,.28); transition: transform .18s ease; }
.fullscreen-mode-switch input:checked + .fullscreen-switch-track { background: var(--green); }
.fullscreen-mode-switch input:checked + .fullscreen-switch-track span { transform: translateX(20px); }
.fullscreen-mode-switch:focus-within { outline: 3px solid color-mix(in srgb,var(--green) 28%,transparent); outline-offset: 2px; }
.prototype-fullscreen-exit { display: none; }
.prototype-fullscreen-surface.persistent-fullscreen { position: fixed; z-index: 9999; inset: 0; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; padding: 16px; background: radial-gradient(circle at 50% 45%,#34423a 0,#17231d 74%); }
.prototype-fullscreen-surface.persistent-fullscreen .prototype-caption { display: none; }
.prototype-fullscreen-surface.persistent-fullscreen .device-frame.board-frame { width: min(calc(100vw - 32px),calc((100vh - 32px) * .5625)); max-width: none; height: auto; }
.prototype-fullscreen-surface.persistent-fullscreen .device-frame.phone-frame { width: min(calc(100vw - 32px),calc((100vh - 32px) * .4615)); max-width: none; height: auto; }
.prototype-fullscreen-surface.persistent-fullscreen .board-frame .ui-screen { font-size: 1.6vh; }
.prototype-fullscreen-surface.persistent-fullscreen .phone-frame .ui-screen { font-size: 1.85vh; }
.prototype-fullscreen-surface.persistent-fullscreen .prototype-fullscreen-exit { position: fixed; z-index: 10000; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 13px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; background: rgba(20,31,25,.76); color: white; box-shadow: 0 5px 15px rgba(0,0,0,.25); cursor: pointer; font: inherit; font-weight: 850; backdrop-filter: blur(8px); }
body.prototype-fullscreen-active { overflow: hidden; }
/* De Pi draait Firefox al in kioskmodus. Toon daar rechtstreeks het bord, zonder prototype-rand of bediening. */
body.pi-kiosk-client { overflow: hidden; background: #f8f6f0; }
body.pi-kiosk-client .site-header,
body.pi-kiosk-client .page-head,
body.pi-kiosk-client .prototype-sidebar,
body.pi-kiosk-client .prototype-caption,
body.pi-kiosk-client .prototype-fullscreen-exit { display: none !important; }
body.pi-kiosk-client .page-shell,
body.pi-kiosk-client .prototype-layout,
body.pi-kiosk-client .prototype-stage,
body.pi-kiosk-client .prototype-fullscreen-surface { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; }
body.pi-kiosk-client #prototype-device.device-frame.board-frame { position: fixed; inset: 0; width: 100vw; height: 100vh; margin: 0; border: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
body.pi-kiosk-client .board-frame .ui-screen { font-size: 1.6vh; }
.prototype-fullscreen-surface:fullscreen,.prototype-fullscreen-surface:-webkit-full-screen { display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; padding: 16px; background: radial-gradient(circle at 50% 45%,#34423a 0,#17231d 74%); }
.prototype-fullscreen-surface:fullscreen .prototype-caption,.prototype-fullscreen-surface:-webkit-full-screen .prototype-caption { display: none; }
.prototype-fullscreen-surface:fullscreen .device-frame.board-frame,.prototype-fullscreen-surface:-webkit-full-screen .device-frame.board-frame { width: min(calc(100vw - 32px),calc((100vh - 32px) * .5625)); max-width: none; height: auto; }
.prototype-fullscreen-surface:fullscreen .device-frame.phone-frame,.prototype-fullscreen-surface:-webkit-full-screen .device-frame.phone-frame { width: min(calc(100vw - 32px),calc((100vh - 32px) * .4615)); max-width: none; height: auto; }
.prototype-fullscreen-surface:fullscreen .board-frame .ui-screen,.prototype-fullscreen-surface:-webkit-full-screen .board-frame .ui-screen { font-size: 1.6vh; }
.prototype-fullscreen-surface:fullscreen .phone-frame .ui-screen,.prototype-fullscreen-surface:-webkit-full-screen .phone-frame .ui-screen { font-size: 1.85vh; }
.prototype-fullscreen-surface:fullscreen .prototype-fullscreen-exit,.prototype-fullscreen-surface:-webkit-full-screen .prototype-fullscreen-exit { position: fixed; z-index: 10000; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 13px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; background: rgba(20,31,25,.76); color: white; box-shadow: 0 5px 15px rgba(0,0,0,.25); cursor: pointer; font: inherit; font-weight: 850; backdrop-filter: blur(8px); }

/* Scherm 1: warm familie-dashboard, met behoud van de vaste navigatie onderin. */
.home-v2 { background: radial-gradient(circle at 50% 20%,#fffdf8 0,#f8f3e9 62%,#eee7d8 100%); color: #123d2a; }
.home-v2 .ui-body { display: flex; flex-direction: column; gap: .72em; padding: 1.55em 1.35em 1em; }
.home-v2-head { display: flex; align-items: center; justify-content: space-between; }
.home-v2-head h4 { margin: 0; font-size: 2.05em; line-height: 1; letter-spacing: -.035em; }
.home-v2-head p { margin: .35em 0 0; color: #617563; font-size: 1.05em; }
.home-v2-time { display: block; margin-top: .08em; font-size: 3.15em; line-height: 1; letter-spacing: -.04em; }
.home-v2-weather { display: grid; justify-items: center; gap: .06em; padding-right: .3em; }
.home-v2-weather span { font-size: 3.1em; line-height: 1; filter: drop-shadow(0 .18em .18em rgba(94,75,38,.18)); }
.home-v2-weather strong { font-size: 1.85em; }
.home-v2-family { display: grid; grid-template-columns: repeat(5,1fr); gap: .55em; }
.home-v2-family-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
.home-v2-family-links .home-v2-person { grid-template-columns: auto 1fr; justify-items: start; align-items: center; padding: .52em .8em; text-align: left; }
.home-v2-person { display: grid; justify-items: center; gap: .22em; min-width: 0; padding: .62em .25em .48em; border: 0; border-radius: 1.25em; color: #123d2a; box-shadow: 0 .3em .55em rgba(48,59,43,.13); cursor: pointer; font: inherit; }
.home-v2-person.moniek { background: #cbd7b9; }.home-v2-person.chris { background: #b8d2cd; }.home-v2-person.walt { background: #b7cddd; }.home-v2-person.klaas { background: #f7c965; }.home-v2-person.jeep { background: #d99170; }
.home-v2-face { display: grid; place-items: center; width: 3.25em; height: 3.25em; border-radius: 50%; background: rgba(255,253,245,.72); font-size: 2em; box-shadow: inset 0 0 0 .14em rgba(255,255,255,.55); }
.home-v2-person strong { overflow: hidden; width: 100%; font-size: 1.02em; text-overflow: ellipsis; }
.home-v2-panels { display: grid; grid-template-columns: 1fr 1.05fr; gap: .78em; min-height: 0; }
.home-v2-card { padding: .8em .82em; border: 1px solid rgba(42,66,49,.12); border-radius: 1.25em; background: rgba(255,255,255,.68); box-shadow: 0 .28em .65em rgba(53,57,43,.1); }
.home-v2-cardhead { display: flex; align-items: center; justify-content: space-between; }
.home-v2-cardhead h5 { margin: 0; font-size: 1.4em; }.home-v2-cardhead button { width: 2em; height: 2em; border: 0; border-radius: .65em; background: #eee9dc; color: #17462f; cursor: pointer; }
.home-v2-count { display: grid; place-items: center; width: 2.05em; height: 2.05em; border-radius: 50%; background: #37664c; color: white; font-size: 1.08em; font-weight: 900; }
.home-v2-events { display: grid; gap: .45em; margin-top: .58em; }
.home-v2-events > div { display: flex; align-items: center; gap: .58em; }.home-v2-events p { margin: 0; font-size: .88em; }.home-v2-events p strong { display: block; font-size: 1.25em; }
.home-v2-meal { display: flex; align-items: center; gap: .7em; min-height: 5.8em; }.home-v2-meal > span { font-size: 3em; }.home-v2-meal p { margin: 0; }.home-v2-meal strong,.home-v2-meal small,.home-v2-order p span { display: block; }.home-v2-meal strong { font-size: 1.35em; }.home-v2-meal small { margin-top: .25em; color: #67816d; }
.event-icon { display: grid; place-items: center; width: 2.65em; height: 2.65em; flex: 0 0 2.65em; border-radius: .85em; font-size: 1.25em; }.event-icon.green { background:#d7e1ca; }.event-icon.yellow { background:#f6ddb0; }.event-icon.coral { background:#e7a080; }
.home-v2-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: .52em 0; overflow: hidden; border-radius: 999px; background: #e9eadc; }
.home-v2-tabs button { min-height: 2.15em; border: 0; background: transparent; color: #214934; cursor: pointer; font: inherit; font-size: .72em; font-weight: 900; }.home-v2-tabs button.active { background: #285b3e; color: white; }
.home-v2-list { display: grid; gap: .2em; }.home-v2-list p { display: flex; gap: .45em; margin: 0; color: #6c8b75; font-size: 1.18em; }.home-v2-list p span { color: #1b3929; font-size: .78em; }.home-v2-card small { color: #67816d; }
.home-v2-scan { display: flex; align-items: center; justify-content: center; gap: .48em; min-height: 2.35em; border: 0; border-radius: .75em; background: linear-gradient(110deg,#174f33,#2b6343); color: white; box-shadow: 0 .3em .7em rgba(25,67,45,.2); cursor: pointer; font: inherit; font-size: 1.65em; font-weight: 950; letter-spacing: .01em; }.home-v2-scan span { font-size: 1.5em; }
.home-v2-quick { display: grid; grid-template-columns: repeat(3,1fr); gap: .62em; }
.home-v2-quick button { display: flex; align-items: center; justify-content: center; gap: .45em; min-height: 3.25em; border: 1px solid rgba(39,74,53,.1); border-radius: 1em; background: #e2e6d3; color: #16462e; box-shadow: 0 .22em .45em rgba(62,58,43,.09); cursor: pointer; font: inherit; }.home-v2-quick button:nth-child(2) { background:#f1eadf; }.home-v2-quick button:nth-child(3) { background:#f8dfab; }
.home-v2-order { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65em; padding: .72em .85em; border: 1px solid rgba(42,66,49,.12); border-radius: 1.15em; background: rgba(255,255,255,.64); }
.home-v2-bag { display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%; background: #d8e0c9; font-size: 1.35em; font-weight: 900; }.home-v2-order p { margin: 0; font-size: .87em; }.home-v2-order p strong { display: block; font-size: 1.25em; }.home-v2-order button { min-height: 2.65em; padding: 0 1em; border: 0; border-radius: .85em; background:#285b3e; color:white; cursor:pointer; font:inherit; font-weight:900; }
.home-v2 .board-nav { background: rgba(255,253,247,.9); }

/* Portret-startscherm: live houten klok met vaste bediening onderin. */
.home-v2 { overflow: hidden; background: #000; color: #f6efe3; }
.home-v2 > .face-topbar-result { position: fixed; top: 14px; right: 16px; z-index: 80; }
.home-v2 .ui-body { position: relative; display: flex; align-items: center; flex-direction: column; gap: 1.5vh; overflow: hidden; padding: 3.2vh 2.6vw 0; background: #000; }
.home-clock-date { position: absolute; z-index: 7; top: 75%; left: 50%; width: 8em; opacity: 0; color: #52200c; font-size: clamp(1.2rem,2.85vh,2.5rem); font-weight: 800; line-height: 1.2; letter-spacing: .01em; text-align: left; text-shadow: 0 .16vh .15vh rgba(255,220,163,.35),.1vh .18vh .14vh rgba(49,13,3,.58),-.08vh -.08vh .08vh rgba(245,185,105,.3); transform: translateY(calc(-50% - 3em)); white-space: nowrap; }
.home-clock-date { z-index: 3; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .home-clock-date { background-color: #5b210d; background-image: repeating-linear-gradient(91deg,rgba(255,184,94,.2) 0 1px,rgba(35,7,2,.3) 1px 2px,transparent 2px 5px),linear-gradient(180deg,#7a3215,#421307 58%,#68280f); background-blend-mode: soft-light,multiply; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(.1vh .16vh .08vh rgba(44,12,3,.58)) drop-shadow(-.05vh -.06vh .04vh rgba(245,181,96,.3)); text-shadow: none; }
}
body.pi-kiosk-client .home-clock-date { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #54200d; color: #54200d; filter: none; text-shadow: 0 -.08vh .05vh rgba(255,224,166,.8),0 .16vh .08vh rgba(151,81,31,.72),.12vh .28vh .16vh rgba(46,12,3,.82); }
.home-v2.home-clock-date-typing .home-clock-date,
.home-v2.home-clock-shadows-showing .home-clock-date,
.home-v2.home-clock-ready .home-clock-date { opacity: 1; }
.home-clock { position: relative; width: min(92%,60vh); aspect-ratio: 1; flex: 0 0 auto; margin-top: 1vh; border: clamp(6px,1.1vh,15px) solid #c98c45; border-radius: 50%; background: repeating-linear-gradient(88deg,rgba(112,68,28,.08) 0,rgba(112,68,28,.08) 1px,transparent 1px,transparent 18px),radial-gradient(circle at 45% 38%,#efd4a5 0,#ddb77d 64%,#c69250 100%); box-shadow: inset 0 0 0 .35vh rgba(255,222,166,.55),inset 0 0 2.4vh rgba(83,45,16,.24),0 1.1vh 3.2vh rgba(0,0,0,.48); color: #4b1f0e; }
.home-clock::after { content: ''; position: absolute; inset: 2.2%; border-radius: 50%; box-shadow: inset 0 0 2vh rgba(78,39,12,.14); pointer-events: none; }
.home-clock.is-layered { width: min(96%,64vh); overflow: hidden; contain: layout; isolation: isolate; border: 0; background: transparent; box-shadow: none; opacity: 1; }
.home-clock.is-layered::after { display: none; }
.home-clock-face-high,
.home-clock-face-low { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; backface-visibility: hidden; }
.home-clock-face-high { visibility: hidden; opacity: 0; }
.home-clock-face-low { opacity: 0; }
.home-v2.home-clock-face-rolling .home-clock.is-layered { overflow: visible; }
.home-v2.home-clock-face-rolling .home-clock-face-low { opacity: 1; animation: home-clock-roll-in 3.3s cubic-bezier(.16,.82,.32,1) both; will-change: transform; }
.home-v2.home-clock-face-settled .home-clock-face-high,
.home-v2.home-clock-ready .home-clock-face-high { visibility: visible; opacity: 1; }
.home-v2.home-clock-face-settled .home-clock-face-low,
.home-v2.home-clock-ready .home-clock-face-low { visibility: hidden; opacity: 0; }
@keyframes home-clock-roll-in {
  0% { transform: translate3d(calc(-100vw - 100%),0,0) rotate(-360deg); }
  84% { transform: translate3d(.8vw,0,0) rotate(5deg); }
  100% { transform: translate3d(0,0,0) rotate(0); }
}
.home-clock-hand-drop { --clock-angle: 0deg; position: absolute; z-index: 4; inset: 0; overflow: hidden; opacity: 0; transform: translate3d(0,-22vh,0); }
.home-clock-hand-drop.minute { z-index: 5; }
.home-clock-hand-rotor { position: absolute; inset: 0; transform: rotate(var(--clock-angle)); transform-origin: 50% 50%; }
.home-clock-hand-body,
.home-clock-hand-shadow-shape { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.home-clock-hand-body { filter: drop-shadow(-.03vh -.04vh .03vh rgba(244,171,82,.2)); }
.home-clock-hand-shadow-offset { position: absolute; inset: 0; opacity: 0; transform: translate3d(.72vh,.95vh,0); }
.home-clock-hand-shadow-shape { filter: blur(.28vh); }
.home-v2.home-clock-hour-dropping .home-clock-hand-drop.hour { animation: home-clock-hour-drop .7s cubic-bezier(.18,.78,.28,1) both; will-change: transform,opacity; }
.home-v2.home-clock-hour-settled .home-clock-hand-drop.hour,
.home-v2.home-clock-minute-dropping .home-clock-hand-drop.hour,
.home-v2.home-clock-minute-settled .home-clock-hand-drop.hour,
.home-v2.home-clock-pin-showing .home-clock-hand-drop.hour,
.home-v2.home-clock-pin-settled .home-clock-hand-drop.hour,
.home-v2.home-clock-ready .home-clock-hand-drop.hour { opacity: 1; transform: translate3d(0,0,0); }
.home-v2.home-clock-minute-dropping .home-clock-hand-drop.minute { animation: home-clock-minute-drop .8s cubic-bezier(.18,.78,.28,1) both; will-change: transform,opacity; }
.home-v2.home-clock-minute-settled .home-clock-hand-drop.minute,
.home-v2.home-clock-pin-showing .home-clock-hand-drop.minute,
.home-v2.home-clock-pin-settled .home-clock-hand-drop.minute,
.home-v2.home-clock-ready .home-clock-hand-drop.minute { opacity: 1; transform: translate3d(0,0,0); }
@keyframes home-clock-hour-drop { from { opacity: 0; transform: translate3d(0,-22vh,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes home-clock-minute-drop { from { opacity: 0; transform: translate3d(0,-24vh,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
.home-clock-layer-pin { position: absolute; z-index: 6; top: 50%; left: 50%; width: 3.2%; aspect-ratio: 1; opacity: 0; border-radius: 50%; background: radial-gradient(circle at 38% 32%,#f4d795 0 18%,#c99345 48%,#8a5524 100%); box-shadow: none; transform: translate(-50%,-50%) scale(.2); }
.home-v2.home-clock-pin-showing .home-clock-layer-pin { animation: home-clock-pin-in .18s cubic-bezier(.2,.85,.28,1.25) both; }
.home-v2.home-clock-pin-settled .home-clock-layer-pin,
.home-v2.home-clock-ready .home-clock-layer-pin { opacity: 1; transform: translate(-50%,-50%) scale(1); }
@keyframes home-clock-pin-in { from { opacity: 0; transform: translate(-50%,-50%) scale(.2); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.home-v2.home-clock-shadows-showing .home-clock-hand-shadow-offset,
.home-v2.home-clock-shadows-settled .home-clock-hand-shadow-offset,
.home-v2.home-clock-ready .home-clock-hand-shadow-offset { opacity: 1; transition: opacity 5s linear; }
.home-v2.home-clock-shadows-showing .home-clock.is-layered,
.home-v2.home-clock-shadows-settled .home-clock.is-layered,
.home-v2.home-clock-ready .home-clock.is-layered { box-shadow: 0 1.1vh 3.2vh rgba(0,0,0,.55); }
.home-v2.home-clock-shadows-showing .home-clock-layer-pin,
.home-v2.home-clock-shadows-settled .home-clock-layer-pin,
.home-v2.home-clock-ready .home-clock-layer-pin { box-shadow: 0 .35vh .55vh rgba(55,28,9,.42); }
.pi-idle-clock-fade { position: fixed; z-index: 100000; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 3s cubic-bezier(.4,0,.2,1); }
.pi-idle-clock-fade.is-active { opacity: 1; pointer-events: auto; }
.pi-idle-clock-fade.is-handoff { opacity: 0; pointer-events: none; transition: none; }
.pi-idle-clock-fade.is-canceling { opacity: 0; pointer-events: none; transition-duration: .3s; }
.home-notification { opacity: 0; transform: translate3d(0,1.2vh,0); pointer-events: none; }
.home-notification.is-home-notification-visible { opacity: 1; transform: translate3d(0,0,0); pointer-events: auto; transition: opacity .34s ease,transform .42s cubic-bezier(.2,.75,.22,1); }
.home-notification-queue { position: absolute; z-index: 10; top: 55.5vh; right: 3.2vw; display: grid; width: 13.6em; gap: 1.1vh; padding-bottom: 8px; }
.home-today-card { display: flex; align-items: center; gap: .55em; width: 100%; padding: .58em .68em; border: 2px solid #d7a35e; border-radius: .9em; background: rgba(0,0,0,.92); color: #f3c55d; box-shadow: 0 .5em 1.15em rgba(0,0,0,.44); cursor: pointer; font: inherit; text-align: left; }
.home-today-meal-icon { flex: 0 0 auto; font-size: 2em; line-height: 1; }
.home-today-card small,.home-today-card strong,.home-today-card em { display: block; min-width: 0; }
.home-today-card small { color: #ddaa60; font-size: .68em; font-style: normal; font-weight: 900; line-height: 1.05; text-transform: uppercase; }
.home-today-card strong { margin-top: .12em; overflow: hidden; color: #fff3d2; font-size: .98em; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; }
.home-today-card em { margin-top: .15em; color: #decaa5; font-size: .68em; font-style: normal; font-weight: 750; }
.home-today-shopping { display: block; }
.home-today-shopping-head { display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.home-today-shopping-head b { display: grid; min-width: 2em; height: 2em; place-items: center; border-radius: 50%; background: #d7a35e; color: #211205; font-size: .82em; }
.home-today-shopping-list { display: grid; gap: .12em; margin-top: .35em; }
.home-today-shopping-list p { display: flex; gap: .35em; margin: 0; overflow: hidden; color: #ddcfb5; font-size: .68em; line-height: 1.15; white-space: nowrap; }
.home-today-shopping-list p span { overflow: hidden; text-overflow: ellipsis; }
.home-ah-status { display: flex; align-items: center; gap: .5em; width: 100%; padding: .48em .6em; border: 2px solid #1683bd; border-radius: .9em; background: rgba(0,0,0,.92); color: #55baf0; box-shadow: 0 .5em 1.15em rgba(0,0,0,.44); cursor: pointer; font: inherit; text-align: left; }
.home-ah-status[hidden] { display: none; }
.home-ah-checkout { cursor: pointer; }
.home-ah-logo { display: block; width: 2.4em; height: 2.4em; flex: 0 0 2.4em; overflow: visible; }
.home-ah-status-copy,.home-ah-status strong,.home-ah-status time,.home-ah-status small { display: block; min-width: 0; }
.home-ah-status-copy { flex: 1 1 auto; }
.home-ah-status strong { font-size: .78em; line-height: 1.05; text-transform: uppercase; }
.home-ah-status time { margin-top: .08em; color: #8fd5fa; font-size: 1.12em; font-weight: 950; line-height: 1.05; white-space: nowrap; }
.home-ah-status small { margin-top: .16em; color: #d7eefa; font-size: .68em; font-weight: 800; line-height: 1.15; }
.home-ah-checkout time { color: #f3c55d; font-size: .95em; white-space: normal; }
.home-ah-checkout small { color: #f0d99a; }
.home-bug-status { display: flex; align-items: center; gap: .55em; width: 100%; padding: .5em .62em; border: 2px solid #d25a4b; border-radius: .9em; background: rgba(0,0,0,.92); box-shadow: 0 .5em 1.15em rgba(0,0,0,.44); color: #ff9d8f; cursor: pointer; font: inherit; text-align: left; }
.home-bug-status[hidden] { display: none; }
.home-bug-icon { flex: 0 0 auto; font-size: 2em; line-height: 1; }
.home-bug-status strong { display: block; flex: 1 1 auto; min-width: 0; font-size: .78em; line-height: 1.05; text-transform: uppercase; }
.home-bug-status b { display: grid; min-width: 1.75em; height: 1.75em; place-items: center; border-radius: 999px; background: #d84d3f; color: #fff; font-size: .9em; }
.bug-list { display: grid; gap: 8px; }
.bug-list-loading { color: var(--muted); }
.bug-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid #e2a49b; border-radius: 14px; background: #fff8f6; }
.bug-card-icon { font-size: 2em; }
.bug-card strong,.bug-card small { display: block; }
.bug-card strong { color: #87382f; }
.bug-card small { margin-top: 3px; color: var(--muted); }
.bug-card-count { color: #a33f33; font-size: 1.05em; font-weight: 900; }
.bug-empty-state { min-height: 65%; }
.bug-empty-state[hidden] { display: none; }
.home-touch-shortcuts { position: absolute; z-index: 12; inset: 0; pointer-events: none; }
.home-touch-shortcut { --home-touch-x: 8vw; --home-touch-y: 72vh; position: absolute; top: var(--home-touch-y); left: var(--home-touch-x); display: grid; width: 5.2em; justify-items: center; gap: .08em; padding: 0; border: 0; background: transparent; box-shadow: none; color: #f3c55d; font: inherit; text-align: center; text-decoration: none; }
.home-touch-shortcut.walt { color: #55baf0; }
.home-touch-shortcut-icon { display: block; font-size: 3.15em; line-height: 1; filter: drop-shadow(0 .12em .12em rgba(0,0,0,.55)); }
.home-touch-shortcut strong { display: block; font-size: .92em; font-weight: 950; line-height: 1.05; text-shadow: 0 .12em .2em #000,0 0 .35em #000; }

/* Speelse live familieagenda onder de bestaande klok. */
.home-family-agenda { position: relative; z-index: 8; width: 50%; flex: 0 0 auto; align-self: flex-start; margin: .5vh 0 5vh; padding: 0 clamp(6px,1.2vw,16px); color: #fff3d2; }
.home-v2 .home-family-agenda { min-height: 0; flex: 1 1 auto; margin-top: .25vh; margin-bottom: 0; overflow-y: auto; font-size: .5em; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.home-v2 .home-family-agenda::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ui-screen.phone .home-family-agenda { width: 100%; }
.phone-home-agenda { background: #000; color: #f6efe3; }
.phone-home-agenda .ui-topbar { color: var(--ink); }
.phone-home-agenda .ui-body { display: flex; min-height: 0; padding: .8em .55em 0 .35em; overflow: hidden; background: #000; }
.phone-home-agenda .home-family-agenda { min-height: 0; flex: 1 1 auto; margin: 0; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.phone-home-agenda .home-family-agenda::-webkit-scrollbar { display: none; width: 0; height: 0; }
.phone-home-agenda .family-time-line { gap: .62em; }
.phone-home-agenda .family-time-line::before { left: 3.38em; }
.phone-home-agenda .family-day-marker { grid-template-columns: 2.8em minmax(0,1fr); gap: .9em; }
.phone-home-agenda .family-time-event,.phone-home-agenda .family-timeline-agenda-link { grid-template-columns: 2.8em .95em minmax(0,1fr); gap: .45em; }
.phone-home-agenda .family-time-dot { width: .9em; height: .9em; border-width: .18em; box-shadow: 0 0 0 .12em currentColor; }
.phone-home-agenda .family-time-card { min-height: 0; grid-template-columns: minmax(0,1fr); align-items: start; gap: .22em; overflow: hidden; }
.phone-home-agenda .family-time-card img,.phone-home-agenda .family-event-art { width: clamp(38px,10vw,46px); height: clamp(38px,10vw,46px); justify-self: start; font-size: clamp(1.2rem,6vw,1.8rem); }
.phone-home-agenda .family-time-card > span:not(.family-event-art) { width: 100%; min-width: 0; }
.phone-home-agenda .family-time-card > b { display: none; }
.phone-home-agenda .family-time-card small { font-size: .42em; }
.phone-home-agenda .family-time-card strong { font-size: .68em; overflow-wrap: anywhere; }
.phone-home-agenda .family-time-card em { font-size: .46em; }
.family-agenda-state { margin: 0 0 1.1em 6.8em; color: #cbbda7; font-size: .48em; font-weight: 800; }.family-agenda-state.is-error { color: #f0b08e; }.family-agenda-empty { margin: 2em 0 0 6.8em; color: #cbbda7; font-size: .67em; }
.family-time-line { position: relative; display: grid; gap: 1.12em; padding-bottom: 4em; }
.home-v2 .family-time-line { gap: .78em; padding-bottom: 2em; }
.family-time-line::before { content: ''; position: absolute; top: 1.3em; bottom: 1em; left: 5.68em; width: .32em; border-radius: 99px; background: linear-gradient(#f4bd65 0 26%,#53b8db 42% 62%,#a781d8 78%,#dc7e62); box-shadow: 0 0 1.2em rgba(244,189,101,.4); transform-origin: 50% 0; }
.home-v2 .family-time-line::before { left: 9.68em; }
.home-v2:not(.home-clock-ready) .family-time-line::before { opacity: 0; transform: scaleY(0); }
.home-v2:not(.home-clock-ready) .family-time-line > * { opacity: 0; transform: translate3d(0,-1.1em,0); }
.home-v2.home-clock-ready .family-time-line::before { animation: home-family-line-unroll 1.45s cubic-bezier(.2,.72,.28,1) both; }
.home-v2.home-clock-ready .family-time-line > * { animation: home-family-item-unroll .46s cubic-bezier(.18,.78,.28,1) both; animation-delay: calc(1.52s + (var(--family-timeline-order,0) * .16s)); }
@keyframes home-family-line-unroll { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes home-family-item-unroll { from { opacity: 0; transform: translate3d(0,-1.1em,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
.home-v2.home-clock-ready.home-timeline-live .family-time-line::before,
.home-v2.home-clock-ready.home-timeline-live .family-time-line > * { animation: none; }
.family-day-marker { position: relative; z-index: 1; display: grid; grid-template-columns: 5em 1fr; align-items: center; gap: 1.55em; min-height: 2.7em; }
.home-v2 .family-day-marker { grid-template-columns: 9em 1fr; }
.family-day-marker strong { color: #f4bd65; font-size: .75em; text-align: right; }
.family-day-marker span { width: max-content; padding: .38em .85em; border-radius: 999px; background: #352519; color: #ffe8c0; font-size: .52em; font-weight: 850; }
.family-day-marker.tomorrow { margin-top: .45em; }.family-day-marker.tomorrow strong { color: #75c8e5; }.family-day-marker.tomorrow span { background: #132d38; color: #cceefa; }
.family-day-marker.after-tomorrow strong { color: #bda0e6; }.family-day-marker.after-tomorrow span { background: #2a2039; color: #eadcfc; }.family-day-marker.next-day strong { color: #ed9a79; }.family-day-marker.next-day span { background: #382018; color: #ffdaca; }
.family-time-event { position: relative; z-index: 1; display: grid; grid-template-columns: 5em 1.3em minmax(0,1fr); align-items: center; gap: .9em; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.home-v2 .family-time-event { grid-template-columns: 9em 1.3em minmax(0,1fr); }
.family-timeline-agenda-link { position: relative; z-index: 1; display: grid; grid-template-columns: 5em 1.3em minmax(0,1fr); gap: .58em; align-items: center; width: 100%; min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.home-v2 .family-timeline-agenda-link { grid-template-columns: 9em 1.3em minmax(0,1fr); }
.family-timeline-agenda-copy { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .18em .7em; align-items: center; min-width: 0; padding: .78em .9em; border: 1px solid rgba(244,189,101,.34); border-radius: 1em; background: linear-gradient(135deg,rgba(244,189,101,.13),rgba(83,184,219,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.family-timeline-agenda-copy small { grid-column: 1; color: #d7a35e; font-size: .72em; font-weight: 900; line-height: 1.05; letter-spacing: .05em; text-transform: uppercase; }
.family-timeline-agenda-copy strong { grid-column: 1; color: #fff9eb; font-size: .94em; line-height: 1.08; }
.family-timeline-agenda-copy b { grid-column: 2; grid-row: 1 / span 2; color: #f4bd65; font-size: 1.8em; line-height: 1; }
.family-timeline-agenda-link:focus-visible .family-timeline-agenda-copy { outline: .18em solid #53b8db; outline-offset: .14em; }
.family-time-event[hidden] { display: none; }
.family-time-event > time { color: #efcf9b; font-size: .69em; font-weight: 950; text-align: right; }
.family-time-dot { width: 1.12em; height: 1.12em; border: .23em solid #12100e; border-radius: 50%; background: #f4bd65; box-shadow: 0 0 0 .16em #f4bd65; }
.family-time-card { position: relative; display: grid; min-height: 6.2em; grid-template-columns: clamp(62px,10vw,96px) minmax(0,1fr); align-items: center; gap: .8em; overflow: visible; padding: .15em .4em .15em 0; border: 0; background: transparent; }.family-time-card.no-art { grid-template-columns: minmax(0,1fr); }
.home-v2 .family-time-card { grid-template-columns: clamp(31px,5vw,48px) minmax(0,1fr); }.home-v2 .family-time-card.no-art { grid-template-columns: minmax(0,1fr); }
.family-time-card img,.family-event-art { display: grid; width: clamp(62px,10vw,96px); height: clamp(62px,10vw,96px); place-items: center; border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%; object-fit: cover; box-shadow: 0 .5em 1em rgba(0,0,0,.38); transform: rotate(-3deg); }
.home-v2 .family-time-card img,.home-v2 .family-event-art { width: clamp(31px,5vw,48px); height: clamp(31px,5vw,48px); font-size: clamp(1rem,2.5vw,1.4rem); }
.family-time-card img { object-position: 50% 32%; }.family-event-art { background: radial-gradient(circle at 35% 30%,rgba(255,255,255,.24),transparent 34%),linear-gradient(145deg,#694a2b,#2a1c12); font-size: clamp(2rem,5vw,2.8rem); }.family-time-event:nth-child(even) .family-event-art { transform: rotate(4deg); }
.family-time-card small,.family-time-card strong,.family-time-card em { display: block; min-width: 0; }
.family-time-card small { color: #d7a35e; font-size: .47em; font-weight: 900; text-transform: uppercase; }.family-time-card strong { margin-top: .16em; color: #fff9eb; font-size: .82em; line-height: 1.08; text-shadow: 0 .12em .35em #000; }.family-time-card em { margin-top: .3em; overflow: hidden; color: #cbbda7; font-size: .52em; font-style: normal; text-overflow: ellipsis; text-shadow: 0 .1em .25em #000; white-space: nowrap; }
.home-v2 .family-day-marker strong { font-size: 1.5em; }
.home-v2 .family-day-marker span { font-size: 1.04em; }
.home-v2 .family-time-event > time { font-size: 1.38em; }
.home-v2 .family-time-card small { font-size: .94em; }
.home-v2 .family-time-card strong { font-size: 25px; }
.home-v2 .family-time-card em { font-size: 1.04em; }
.family-time-event.event-ah .family-time-card em { white-space: normal; overflow: visible; line-height: 1.35; }
.family-time-event.event-ah .family-ah-progress { flex-wrap: wrap; }
.home-v2 .family-ah-progress { font-size: .8em; }
.event-klaas .family-time-dot { background: #f4c84e; box-shadow: 0 0 0 .16em #f4c84e; }.event-walt .family-time-dot { background: #53b8db; box-shadow: 0 0 0 .16em #53b8db; }.event-family .family-time-dot { background: #a781d8; box-shadow: 0 0 0 .16em #a781d8; }.event-moniek .family-time-dot { background: #e784a3; box-shadow: 0 0 0 .16em #e784a3; }.event-chris .family-time-dot { background: #68b5a7; box-shadow: 0 0 0 .16em #68b5a7; }.event-meal .family-time-dot { background: #e58257; box-shadow: 0 0 0 .16em #e58257; }.event-ah .family-time-dot { background: #32aee4; box-shadow: 0 0 0 .16em #32aee4; }
.family-event-art.family-ah-logo { position: relative; overflow: hidden; border: .22em solid #1595d3; border-radius: 29% 33% 31% 27%; background: #fff; box-shadow: 0 .5em 1em rgba(0,0,0,.38),inset 0 0 0 .12em rgba(21,149,211,.12); color: #1386c4; font-family: Arial,sans-serif; font-size: 1.85em; font-weight: 950; letter-spacing: -.13em; line-height: 1; text-transform: lowercase; }
.family-event-art.family-ah-logo::after { content: ''; position: absolute; right: 17%; bottom: 18%; width: .28em; height: .28em; border-radius: .06em; background: #f28c28; box-shadow: -.36em 0 #f28c28; transform: rotate(-9deg); }
.family-ah-progress { display: flex; align-items: center; gap: .34em; margin-top: .42em; color: #8e8374; font-size: .4em; font-weight: 900; line-height: 1; text-transform: uppercase; }
.family-ah-progress span { display: inline-flex; align-items: center; gap: .2em; white-space: nowrap; }.family-ah-progress span::before { content: ''; width: .56em; height: .56em; border: .12em solid #756c61; border-radius: 50%; background: #201c18; }
.family-ah-progress span.is-done { color: #a7d9ed; }.family-ah-progress span.is-done::before { border-color: #1595d3; background: #1595d3; }.family-ah-progress span.is-current { color: #fff; }.family-ah-progress span.is-current::before { border-color: #fff; background: #32aee4; box-shadow: 0 0 .55em #32aee4; }
@media (prefers-reduced-motion: reduce) { .home-v2.home-clock-ready .family-time-line::before,.home-v2.home-clock-ready .family-time-line > * { animation-duration: .01ms; animation-delay: 0s; } }

/* Volledige Outlook-achtige alleen-lezen agenda. */
.agenda-demo { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; border: 1px solid #d7ddd6; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(29,55,38,.09); }
.agenda-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid #dfe5df; background: #f8faf7; }.agenda-sync-state { margin-left: auto; color: #56705d; font-size: .72em; font-weight: 850; }
.agenda-period-controls,.agenda-view-controls { display: flex; align-items: center; gap: 5px; }.agenda-period-controls strong { margin-left: 8px; color: #294634; }
.agenda-toolbar button { min-width: 34px; min-height: 30px; padding: 0 10px; border: 1px solid #bdc9bf; border-radius: 8px; background: #fff; color: #264b35; cursor: pointer; font: inherit; font-weight: 850; }.agenda-view-controls button.active { border-color: #285b3e; background: #285b3e; color: #fff; }
.agenda-view { display: none; min-height: 0; flex: 1; overflow: auto; }.agenda-view.active { display: flex; flex-direction: column; }
.agenda-week-head { display: grid; grid-template-columns: 58px repeat(7,minmax(0,1fr)); border-bottom: 1px solid #dfe5df; }.agenda-week-head span { padding: 7px 3px; border-left: 1px solid #edf0ed; color: #53675a; font-size: .8em; font-weight: 900; text-align: center; }.agenda-week-head .today { background: #e8f2e9; color: #225b36; }
.agenda-all-day { display: grid; min-height: 40px; grid-template-columns: 58px repeat(7,minmax(0,1fr)); border-bottom: 1px solid #dfe5df; }.agenda-all-day > * { border-left: 1px solid #edf0ed; }.agenda-all-day > b { display: grid; place-items: center; border-left: 0; color: #77837a; font-size: .64em; }
.agenda-week-grid { display: grid; min-height: 610px; grid-template-columns: 58px minmax(0,1fr); }.agenda-times { display: grid; grid-template-rows: repeat(16,1fr); }.agenda-times time { padding: 0 6px; color: #849087; font-size: .65em; text-align: right; transform: translateY(-.5em); }
.agenda-days-grid { position: relative; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); background-image: linear-gradient(to right,transparent calc(100% - 1px),#e6ebe7 calc(100% - 1px)),linear-gradient(to bottom,transparent calc(100% - 1px),#edf0ed calc(100% - 1px)); background-size: calc(100% / 7) 100%,100% calc(100% / 16); }
.agenda-days-grid > span { min-height: 610px; border-right: 1px solid #e5eae6; }.agenda-block { overflow: hidden; padding: 5px 6px; border: 0; border-left: 4px solid currentColor; border-radius: 6px; cursor: pointer; font: inherit; font-size: .68em; font-weight: 850; line-height: 1.15; text-align: left; }.agenda-block small { display: block; margin-bottom: 2px; font-size: .82em; font-weight: 700; }
.agenda-days-grid .agenda-block { position: absolute; z-index: 2; width: calc(100% / 7 - 6px); }.agenda-days-grid .dentist { top: 8.3%; left: calc(100% / 7 * 1 + 3px); height: 8%; }.agenda-days-grid .dog { top: 16.6%; left: calc(100% / 7 * 5 + 3px); height: 24%; }.agenda-days-grid .football { top: 62.5%; left: calc(100% / 7 * 5 + 3px); height: 12%; }.agenda-days-grid .dinner { top: 83.3%; left: calc(100% / 7 * 5 + 3px); height: 11%; }
.agenda-block.dentist { background: #fde9ef; color: #a94262; }.agenda-block.dog,.agenda-block.birthday { background: #fff0cf; color: #9b6512; }.agenda-block.football { background: #e8f3d8; color: #4e7b1e; }.agenda-block.dinner { background: #ece4fa; color: #6b49a0; }.agenda-all-day .birthday { grid-column: 7; margin: 4px; }
.agenda-day-view { padding: 14px; }.agenda-day-column { width: min(760px,100%); margin: auto; }.agenda-day-column h4 { margin: 0 0 14px; }.agenda-day-hours { position: relative; }.agenda-day-hours > div { display: grid; height: 48px; grid-template-columns: 64px 1fr; }.agenda-day-hours time { color: #7f8b82; font-size: .72em; text-align: right; }.agenda-day-hours span { margin-left: 12px; border-top: 1px solid #e3e8e4; }.agenda-day-hours .agenda-block { position: absolute; left: 88px; width: 60%; }.agenda-day-hours .dog { top: 96px; height: 142px; }.agenda-day-hours .football { top: 360px; height: 70px; }
.agenda-month-grid { display: grid; min-height: 100%; grid-template-columns: repeat(7,1fr); grid-template-rows: auto repeat(6,minmax(85px,1fr)); }.agenda-month-grid > b { padding: 7px; color: #5d6d62; font-size: .76em; text-align: center; }.agenda-month-grid > button,.agenda-month-grid > div { display: grid; align-content: start; gap: 3px; padding: 7px; border: 0; border-top: 1px solid #e4e9e5; border-left: 1px solid #e4e9e5; background: #fff; color: #31483a; font: inherit; text-align: left; }.agenda-month-grid > button.today,.agenda-month-grid > div.today { background: #f5fbf4; box-shadow: inset 0 0 0 2px #6fa277; }.agenda-month-grid small { overflow: hidden; padding: 2px 4px; border-radius: 4px; background: #fff0cf; font-size: .65em; text-overflow: ellipsis; white-space: nowrap; }
.agenda-live-list { display: grid; gap: 10px; width: min(760px,100%); margin: auto; padding: 16px; }.agenda-live-list article { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 14px; padding: 12px; border-left: 5px solid #659773; border-radius: 8px; background: #f4f8f3; }.agenda-live-list time { color: #496552; font-weight: 900; }.agenda-live-list strong,.agenda-live-list small { display: block; }.agenda-live-list small { margin-top: 4px; color: #718078; }.agenda-block.family-live { background: #dcebdd; color: #28583a; cursor: default; }
.agenda-event-detail { display: grid; width: min(850px,100%); grid-template-columns: minmax(240px,42%) 1fr; gap: 24px; margin: auto; padding: 24px; border: 1px solid #d8dfd8; border-radius: 20px; background: linear-gradient(145deg,#fffaf0,#fff); box-shadow: 0 10px 32px rgba(36,57,40,.13); }.agenda-event-detail img { width: 100%; height: 360px; border-radius: 18px; object-fit: cover; object-position: 50% 32%; }.agenda-event-detail h5 { margin: 7px 0; font-size: 2em; }.agenda-event-detail p { color: #5b6a60; line-height: 1.5; }.agenda-event-detail .ui-button { display: block; margin-top: 24px; }.agenda-person-chip { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: #fff0cf; color: #80540e; font-weight: 900; }
.meal-shortage-dialog { width: min(620px,calc(100% - 42px)); }
.meal-shortage-dialog > p { margin: 12px 0 10px; color: var(--text); line-height: 1.45; }
.meal-shortage-dialog ul { display: grid; gap: 7px; max-height: 300px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.meal-shortage-dialog li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8faf5; }
.meal-shortage-dialog li span { color: var(--muted); text-align: right; }
.meal-shortage-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.meal-shortage-actions button:last-child { grid-column: 1 / -1; }
.home-clock-number { position: absolute; z-index: 1; display: grid; width: 13%; height: 13%; place-items: center; transform: translate(-50%,-50%); color: #52200c; font-size: clamp(1.3rem,4.5vh,4.2rem); font-weight: 700; line-height: 1; text-shadow: 0 .16vh .15vh rgba(255,220,163,.35),0 .12vh .2vh rgba(62,22,7,.28); }
.home-clock-number.n12{top:10%;left:50%}.home-clock-number.n1{top:15.5%;left:72%}.home-clock-number.n2{top:30%;left:87%}.home-clock-number.n3{top:50%;left:91%}.home-clock-number.n4{top:70%;left:86%}.home-clock-number.n5{top:85%;left:71%}.home-clock-number.n6{top:90%;left:50%}.home-clock-number.n7{top:85%;left:29%}.home-clock-number.n8{top:70%;left:14%}.home-clock-number.n9{top:50%;left:9%}.home-clock-number.n10{top:30%;left:14%}.home-clock-number.n11{top:15.5%;left:28%}
.home-clock-hand { --clock-angle: 0deg; position: absolute; z-index: 3; bottom: 50%; left: 50%; width: 1.5%; border-radius: 999px 999px 35% 35%; background: linear-gradient(90deg,#ba7d39,#f1cf8b 45%,#9e632a); box-shadow: 0 .2vh .45vh rgba(57,25,7,.34); transform: translateX(-50%) rotate(var(--clock-angle)); transform-origin: 50% 100%; }
.home-clock-hand.hour { height: 27%; width: 2.2%; }.home-clock-hand.minute { height: 38%; }
.home-clock-pin { position: absolute; z-index: 4; top: 50%; left: 50%; width: 4.4%; aspect-ratio: 1; border-radius: 50%; background: #d7a35e; box-shadow: inset 0 0 0 .35vh #f3d59f,0 .2vh .45vh rgba(48,20,5,.35); transform: translate(-50%,-50%); }
.home-v2 .home-clock-nav { position: fixed; z-index: 18; right: 0; bottom: 0; left: 0; visibility: hidden; overflow-y: hidden; border-top-color: #333; background: linear-gradient(180deg,#191919,#101010); box-shadow: 0 -1vh 3vh rgba(0,0,0,.38); pointer-events: none; transform: translateY(calc(100% + 2px)); transition: transform .28s ease; }
.home-v2 .home-clock-nav.is-visible { visibility: visible; pointer-events: auto; transform: translateY(0); }
.home-v2:not(.home-clock-ready) .home-clock-nav { pointer-events: none; transform: translateY(calc(100% + 2px)); }
.home-v2 .home-clock-nav button { color: #d7a35e; }
.home-v2 .home-clock-nav button.active { background: rgba(211,154,78,.17); color: #d7a35e; }
@media (max-width:1000px) {
  .site-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .site-nav { flex-wrap: wrap; gap: 7px; }
  .nav-button { padding: 0 12px; }
}
@media (max-width:760px) {
  .page-head { align-items: flex-start; flex-direction: column; }
  .prototype-layout { grid-template-columns: 1fr; }
  .prototype-sidebar { position: static; }
  .screen-menu { grid-template-columns: repeat(2,1fr); max-height: none; }
  .prototype-stage { min-height: 620px; padding: 12px; }
}
.board-frame .product-catalog-screen.product-list-layout .shopping-flat-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 2px 3px 18px 6px; }
.board-frame .product-catalog-screen.product-list-layout .shopping-flat-list > .product-catalog-row { padding: 7px; }
.board-frame .product-catalog-screen.product-list-layout .product-category-list { align-content: start; grid-auto-rows: max-content; }
.board-frame .product-catalog-screen.product-list-layout .shopping-category-products,
.board-frame .product-catalog-screen.product-list-layout .shopping-flat-list { align-content: start; align-items: start; grid-auto-rows: max-content; gap: 6px; }
.board-frame .compact-five-layout.product-catalog-screen.product-list-layout .shopping-flat-list { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.board-frame .product-catalog-screen.product-list-layout .product-catalog-row { min-height: 190px; aspect-ratio: auto; }

/* De scanwachtrij schaalt exact dezelfde volledige popup na alle algemene board-regels. */
.board-frame .product-lookup-queue .product-lookup-dialog { width: 100%; height: 100%; max-height: none; }
.board-frame .product-lookup-queue .product-lookup-head { gap: 10px; padding: 14px 15px 11px; }
.board-frame .product-lookup-queue .product-lookup-head h4 { margin-top: 5px; font-size: 1.35rem; }
.board-frame .product-lookup-queue .product-lookup-head > button { width: 44px; height: 44px; font-size: 1.8rem; }
.board-frame .product-lookup-queue .product-lookup-body { min-height: 0; height: calc(100% - 75px); max-height: none; padding: 14px; }
.board-frame .product-lookup-queue .product-lookup-result { grid-template-columns: 1fr; gap: 12px; align-items: start; }
.board-frame .product-lookup-queue .product-lookup-image { min-height: 170px; border-radius: 14px; }
.board-frame .product-lookup-queue .product-lookup-image img { height: 210px; }
.board-frame .product-lookup-queue .product-lookup-image-fallback { font-size: 4rem; }
.board-frame .product-lookup-queue .product-lookup-meta { gap: 7px; margin-bottom: 9px; }
.board-frame .product-lookup-queue .product-lookup-meta span { padding: 5px 9px; font-size: .9rem; }
.board-frame .product-lookup-queue .product-lookup-price { min-width: 128px; margin-bottom: 10px; padding: 9px 13px; }
.board-frame .product-lookup-queue .product-lookup-price span { font-size: .76rem; }
.board-frame .product-lookup-queue .product-lookup-price strong { font-size: 1.65rem; }
.board-frame .product-lookup-queue .product-lookup-quantities { gap: 7px; margin-top: 10px; }
.board-frame .product-lookup-queue .product-lookup-quantities button { min-width: 64px; min-height: 48px; padding: 7px 12px; font-size: 1rem; }
.board-frame .product-lookup-queue .product-lookup-order-routes { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 9px; }
.board-frame .product-lookup-queue .product-lookup-order-routes button { min-height: 50px; padding: 8px 10px; font-size: .98rem; }
.board-frame .product-lookup-queue .product-lookup-order-routes button:last-child { grid-column: 1 / -1; }
.board-frame .product-lookup-queue .product-lookup-copy > .product-order-page { min-height: 46px; margin-top: 8px; font-size: .92rem; }
.board-frame .product-lookup-queue.has-one .product-lookup-overlay { width: min(96%,1080px); height: 94%; }
.board-frame .product-lookup-queue.has-one .product-lookup-head { gap: 24px; padding: 28px 32px 22px; }
.board-frame .product-lookup-queue.has-one .product-lookup-head h4 { margin-top: 10px; font-size: clamp(1.8rem,3vw,2.6rem); }
.board-frame .product-lookup-queue.has-one .product-lookup-head > button { width: 64px; height: 64px; font-size: 2.5rem; }
.board-frame .product-lookup-queue.has-one .product-lookup-body { height: calc(100% - 119px); padding: 32px; }
.board-frame .product-lookup-queue.has-one .product-lookup-result,.board-frame .product-lookup-queue.has-expanded .is-expanded .product-lookup-result { grid-template-columns: minmax(300px,46%) minmax(0,1fr); gap: 32px; align-items: center; }
.board-frame .product-lookup-queue.has-one .product-lookup-image { min-height: 480px; }
.board-frame .product-lookup-queue.has-one .product-lookup-image img { height: 520px; }
.board-frame .product-lookup-queue.has-expanded .is-expanded .product-lookup-image { min-height: 320px; }
.board-frame .product-lookup-queue.has-expanded .is-expanded .product-lookup-image img { height: 380px; }
.product-order-remove-fixed { display: block; margin: 8px auto 0; padding: 4px 10px; border: 1px solid #9eaaa0; border-radius: 999px; background: #eef1ed; color: #4c5b50; cursor: pointer; font: inherit; font-size: .82em; font-weight: 800; }
.bonus-card-group { cursor: default; }
.bonus-choice-note { display: block; margin: 0 6px 6px; color: var(--muted); font-size: .72em; font-weight: 750; text-align: center; }
.catalog-search { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 9px; border: 1px solid #aebba9; border-radius: 8px; background: white; }
.catalog-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.catalog-search input::-webkit-search-cancel-button { display: none; }
.catalog-search-icon { flex: 0 0 auto; }
.voice-search { position: relative; }
.voice-mic-button { display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; margin: -5px 0 -5px -3px; border: 0; border-radius: 50%; background: #e4eee0; color: var(--green); cursor: pointer; font: inherit; font-size: 1.25em; touch-action: manipulation; }
.voice-mic-button:focus-visible { outline: 3px solid #e3a629; outline-offset: 2px; }
.voice-mic-button[data-state="connecting"] { opacity: .65; }
.voice-mic-button[data-state="listening"] { background: #a33737; color: #fff; box-shadow: 0 0 0 5px rgba(163,55,55,.18); animation: voice-pulse 1.4s ease-in-out infinite; }
.voice-mic-button[data-state="error"] { background: #f2d9d5; color: #8c2f2f; }
.catalog-search-clear { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; margin: -3px -5px -3px 0; border: 0; border-radius: 50%; background: #edf1eb; color: var(--green); cursor: pointer; font: inherit; font-size: 1.45em; font-weight: 800; line-height: 1; opacity: 0; visibility: hidden; touch-action: manipulation; }
.catalog-search input:not(:placeholder-shown) ~ .catalog-search-clear { opacity: 1; visibility: visible; }
.catalog-search-clear:focus-visible { outline: 3px solid #e3a629; outline-offset: 1px; }
.voice-inline-status { min-height: 1.2em; margin: 3px 2px 5px; color: var(--green); font-size: .78em; font-weight: 750; }
.voice-inline-status[data-state="error"] { color: #8c2f2f; }
.voice-command-help { position: relative; z-index: 8; margin: 6px 0 10px; padding: 12px 14px; border: 1px solid #abc0a6; border-radius: 13px; background: #f3f7ef; box-shadow: 0 8px 20px rgba(25,55,38,.1); }
.voice-command-help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--green); }
.voice-command-help-head button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #dfeadc; color: var(--green); font: inherit; font-size: 1.25em; cursor: pointer; }
.voice-command-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.voice-command-list span { padding: 7px 10px; border: 1px solid #c4d3c0; border-radius: 999px; background: #fff; color: var(--ink); font-size: .76em; font-weight: 750; }
.voice-learning-reset { margin-top: 10px; padding: 5px 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .68em; text-decoration: underline; cursor: pointer; }
.voice-search-choices { position: relative; z-index: 9; display: grid; gap: 9px; margin: 6px 0 10px; padding: 13px 14px; border: 2px solid #d3a33a; border-radius: 13px; background: #fff9e9; }
.voice-search-choice-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.voice-search-choice-list button { min-height: 48px; padding: 8px 10px; border: 1px solid #8ca787; border-radius: 10px; background: #fff; color: var(--green); font: inherit; font-weight: 800; cursor: pointer; }
.voice-learning-prompt { position: relative; z-index: 9; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 6px 0 10px; padding: 12px 14px; border: 2px solid #d3a33a; border-radius: 13px; background: #fff9e9; color: var(--ink); }
.voice-learning-prompt strong { min-width: 0; overflow-wrap: anywhere; }
.voice-learning-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.voice-learning-actions button { min-width: 76px; min-height: 48px; padding: 7px 14px; border: 1px solid #8ca787; border-radius: 10px; background: #fff; color: var(--green); cursor: pointer; font: inherit; font-weight: 850; touch-action: manipulation; }
.voice-learning-actions button[data-voice-learn="yes"] { background: var(--green); color: #fff; }
@keyframes voice-pulse { 50% { transform: scale(1.06); } }
@media (max-width: 720px) { .voice-search-choice-list { grid-template-columns: 1fr; } .voice-learning-prompt { align-items: stretch; flex-direction: column; } .voice-learning-actions button { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .voice-mic-button[data-state="listening"] { animation: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.entity-form { display: grid; gap: 9px; }
.entity-form > label { display: grid; gap: 3px; color: var(--green); font-weight: 800; }
.entity-form input,.entity-form select,.entity-form textarea { width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid #aebba9; border-radius: 7px; background: white; color: var(--ink); font: inherit; }
.entity-form textarea { min-height: 74px; resize: vertical; }
.entity-form fieldset { min-width: 0; margin: 0; padding: 7px; border: 1px solid var(--line); border-radius: 8px; }
.recipe-form { width: min(94%,620px); }
.recipe-source-dialog { width: min(92%,430px); }
.recipe-source-actions { display: grid; gap: 11px; }
.recipe-source-stores { display: grid; gap: 6px; padding-top: 9px; border-top: 1px solid var(--line); }
.recipe-source-stores > span { color: var(--muted); font-size: .8em; font-weight: 800; }
.recipe-source-option { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 62px; padding: 8px 10px; border: 1px solid #aac0ad; border-radius: 11px; background: #fffef9; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.recipe-source-option:hover,.recipe-source-option:focus-visible { border-color: var(--green); background: var(--green-soft); outline: 2px solid transparent; }
.recipe-source-option strong,.recipe-source-option small { display: block; }
.recipe-source-option small { margin-top: 2px; color: var(--muted); font-size: .78em; }
.recipe-source-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--green); color: white; font-size: 1.4em; font-weight: 900; }
.recipe-source-arrow { color: var(--green); font-size: 1.7em; font-weight: 900; }
.recipe-form-products { display: grid; gap: 5px; max-height: 220px; overflow-y: auto; }
.recipe-unmapped-ingredients > p { margin: 2px 0 8px; color: var(--muted); }
.recipe-unmapped-ingredients > div { display: grid; gap: 5px; }
.recipe-unmapped-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 42px; padding: 5px 8px; border: 1px solid #d8dfd7; border-radius: 8px; background: #fffdf7; }
.recipe-unmapped-row > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e4a72c; color: #fff; font-weight: 900; }
.recipe-unmapped-row > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-unmapped-row > small { color: #8b5c00; font-weight: 800; }
.recipe-product-choice { display: grid !important; grid-template-columns: auto minmax(120px,1fr) 70px 70px 58px; align-items: center; gap: 5px !important; color: var(--ink) !important; font-weight: 600 !important; }
.recipe-product-choice input { min-height: 30px; }
.recipe-product-choice input[type="checkbox"] { width: 20px; min-height: 20px; }
.recipe-edit-product-choice { display: flex !important; align-items: center; gap: 10px !important; min-height: 46px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink) !important; font-weight: 750 !important; }
.recipe-edit-product-choice input { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--green); }
.form-feedback { min-height: 1.2em; margin: 0; color: #8a2e2e; }
.product-card-empty { display: grid; justify-items: center; gap: 8px; padding: 22px; color: var(--muted); text-align: center; }
.board-frame .product-lookup-queue.has-one .product-lookup-overlay { width: min(88%,760px); height: auto; max-height: 86%; padding: 0; }
.board-frame .product-lookup-queue.has-one .product-lookup-dialog { width: 100%; height: auto; max-height: 86vh; }
.board-frame .product-lookup-queue.has-one .product-lookup-head { gap: 14px; padding: 18px 20px 14px; }
.board-frame .product-lookup-queue.has-one .product-lookup-head h4 { margin-top: 6px; font-size: clamp(1.4rem,2.2vw,2rem); }
.board-frame .product-lookup-queue.has-one .product-lookup-head > button { width: 48px; height: 48px; font-size: 2rem; }
.board-frame .product-lookup-queue.has-one .product-lookup-body { min-height: 0; height: auto; max-height: calc(86vh - 82px); padding: 20px; }
.board-frame .product-lookup-queue.has-one .product-lookup-result { grid-template-columns: minmax(220px,40%) minmax(0,1fr); gap: 22px; }
.board-frame .product-lookup-queue.has-one .product-lookup-image { min-height: 280px; }
.board-frame .product-lookup-queue.has-one .product-lookup-image img { height: 300px; }

.bonus-choice-overlay { position: absolute; z-index: 104; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(28,39,31,.46); }
.bonus-choice-dialog { display: flex; width: min(92%,720px); max-height: 86%; flex-direction: column; overflow: hidden; border: 1px solid #93a893; border-radius: 14px; background: #fbfdf8; box-shadow: 0 14px 32px rgba(17,32,22,.3); }
.bonus-choice-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bonus-choice-dialog h4,.bonus-choice-dialog small { display: block; margin: 0; }.bonus-choice-dialog small { color: var(--green); font-weight: 900; }.bonus-choice-dialog header button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #e7eee4; color: var(--green); font: inherit; font-size: 1.35em; font-weight: 900; }
.bonus-choice-state { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 120px; padding: 18px; color: var(--green); text-align: center; }.bonus-choice-state.is-error { color: #93483f; }
.bonus-choice-state[hidden] { display: none; }
.bonus-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; overflow-y: auto; padding: 10px; touch-action: pan-y; }
.bonus-choice-grid button { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 1px solid #d2dbcf; border-radius: 10px; background: #fffdf8; color: var(--ink); font: inherit; text-align: center; }.bonus-choice-grid img,.bonus-choice-grid button > span { width: 100%; height: 92px; object-fit: contain; }.bonus-choice-grid button > span { display: grid; place-items: center; font-size: 2em; }
.ah-basket-sync-card .button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 7px 0; }
.ah-basket-sync-card .button-row .ui-button { min-width: 0; }
.ah-basket-sync-card .ah-basket-apply { width: 100%; margin-top: 8px; }

/* Houd de centrale rAF-scroll op de Pi in een eigen paintlaag. */
[data-prikbord-scroll],.product-order-dialog,.product-lookup-body,.recipe-form-products,.bonus-choice-grid { contain: paint; will-change: scroll-position; }

/* Productdetail v2: huidige Prikbord-look met foto boven en gegroepeerde voorkeuren. */
.board-frame .product-lookup-queue.has-one .product-lookup-dialog.product-detail-v2 { width: min(94%,920px); height: auto; max-height: 94%; }
.board-frame .product-lookup-queue.has-one .product-detail-v2 .product-lookup-body { height: auto; max-height: calc(94vh - 92px); overflow-y: auto; padding: 20px; }
.board-frame .product-lookup-queue.has-one .product-detail-v2 .product-lookup-result { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.board-frame .product-lookup-queue.has-one .product-detail-v2 .product-lookup-image { min-height: 230px; border-radius: 18px; background: linear-gradient(145deg,#eef4ea,#fbf4dc); }
.board-frame .product-lookup-queue.has-one .product-detail-v2 .product-lookup-image img { width: 100%; height: 245px; object-fit: contain; mix-blend-mode: multiply; }
.product-detail-v2-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,1.15fr) auto; align-items: end; gap: 12px; margin-bottom: 13px; }
.product-detail-v2 .product-lookup-meta { align-self: center; margin: 0; }
.product-detail-category { display: grid; gap: 4px; color: var(--green); font-size: .8rem; font-weight: 900; }
.product-detail-category select { min-height: 45px; padding: 7px 34px 7px 11px; border: 1px solid #9db19f; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-weight: 800; }
.product-detail-v2 .product-lookup-price,.board-frame .product-lookup-queue.has-one .product-detail-v2 .product-lookup-price { min-width: 120px; margin: 0; padding: 10px 14px; border-radius: 15px; background: var(--yellow); text-align: center; }
.product-detail-v2 .product-lookup-price strong,.board-frame .product-lookup-queue.has-one .product-detail-v2 .product-lookup-price strong { font-size: 1.65rem; }
.product-detail-v2-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; align-items: start; }
.product-detail-v2-group,.product-detail-v2-columns > div { min-width: 0; }.product-detail-v2-group { margin: 0 0 12px; padding: 13px; border: 1px solid #d6ddd4; border-radius: 16px; background: #fffdf8; box-shadow: 0 3px 9px rgba(35,63,44,.07); }
.product-detail-v2-group h5 { margin: 0 0 8px; color: var(--green); font-size: 1rem; }
.product-detail-v2-group h5:not(:first-child) { margin-top: 16px; }.product-stock-summary { margin: 6px 0 0; color: var(--muted); font-size: .82em; }.product-stock-summary:has(+ h5) { margin-bottom: 12px; }.product-stock-row .product-detail-quantity > span { min-width: 76px; }
.product-detail-v2-row { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #e5eae3; }
.product-detail-v2-row:last-child { border-bottom: 0; }
.product-detail-v2-primary,.product-detail-v2-direct { min-height: 42px; padding: 7px 18px; border: 1px solid #315b46; border-radius: 999px; background: var(--green); color: #fff; cursor: pointer; font: inherit; font-weight: 900; }
.product-detail-v2-direct { width: 100%; margin-top: 9px; background: #fff; color: var(--green); }
.product-detail-v2 .product-lookup-quantities { display: flex; gap: 6px; margin: 0; }
.product-detail-v2 .product-lookup-quantities button,.board-frame .product-lookup-queue.has-one .product-detail-v2 .product-lookup-quantities button { min-width: 42px; min-height: 42px; padding: 5px; }
.product-detail-v2-switch { width: 48px; height: 28px; padding: 4px; border: 0; border-radius: 999px; background: #cbd3cc; cursor: pointer; }
.product-detail-v2-switch span { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s ease; }
.product-detail-v2-switch.active { background: var(--green); }
.product-detail-v2-switch.active span { transform: translateX(20px); }
.product-detail-v2 .product-lookup-store-states { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 0 0 9px; }
.product-detail-v2 .product-lookup-store-state { display: grid; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto auto; gap: 1px 8px; width: 100%; height: auto; min-height: 72px; padding: 8px; border: 1px solid #cad5cc; border-radius: 14px; background: #f8faf6; color: var(--green); text-align: left; }
.product-detail-v2 .product-lookup-store-state::before { inset: 4px auto 4px 4px; width: 42px; border-width: 3px; }
.product-detail-v2 .product-lookup-store-state.selected { border: 3px solid #2f7553; background: #edf5ec; }
.product-detail-v2 .product-lookup-store-state .product-store-logo { grid-row: 1 / 3; align-self: center; }
.product-detail-v2 .product-lookup-store-state > strong { align-self: end; font-size: 1rem; }
.product-detail-v2 .product-lookup-store-state > small { align-self: start; color: #768178; font-size: .7rem; font-weight: 700; }
.product-detail-v2 .product-lookup-store-state[data-state="unlinked"] > strong,.product-detail-v2 .product-lookup-store-state[data-state="unlinked"] > small { opacity: .62; }
.product-detail-v2 .product-lookup-store-state[data-state="linked"],.product-detail-v2 .product-lookup-store-state[data-state="choice"],.product-detail-v2 .product-lookup-store-state[data-state="manual-search"] { cursor: pointer; }
.product-detail-v2 .product-lookup-store-state[data-state="linked"] > small,.product-detail-v2 .product-lookup-store-state[data-state="choice"] > small,.product-detail-v2 .product-lookup-store-state[data-state="manual-search"] > small { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.product-detail-v2 .product-lookup-store-state[data-state="choice"] { border-color: #d8aa39; background: #fff8df; }
.product-detail-v2 .product-lookup-store-state[data-state="manual-search"] { border-color: #d8aa39; background: #fff8df; cursor: pointer; }
.product-detail-v2 .product-lookup-store-state[data-state="manual-search"] > strong { font-size: .88rem; }
.product-detail-order-status { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.product-detail-order-status > span { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 13px; background: #e8ebe7; color: #929b95; font-weight: 850; }
.product-detail-order-status > span.active { background: #e0efe3; color: #2b684b; }
.product-detail-order-status > span strong { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: currentColor; color: #fff; font-size: .78rem; }
.product-detail-v2-remove { min-height: 40px; padding: 7px 13px; border: 1px solid #b96c66; border-radius: 11px; background: transparent; color: #a33e37; cursor: pointer; font: inherit; font-weight: 850; }
.product-popup-page-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
.product-detail-v2-page { width: 100%; margin: 0; }
.product-popup-product-page { margin-top: 9px; }
.product-detail-v2-remove.confirm-delete { background: #a33e37; color: #fff; }
.product-detail-v2 button:disabled,.product-detail-v2 select:disabled { cursor: default; opacity: .58; }
.product-lookup-overlay.is-saving-preferences .product-detail-v2-group { opacity: .72; }
.product-detail-v2-page-view { height: calc(100% - 4px); overflow-x: hidden; overflow-y: auto; padding: 2px 4px 18px; }
.product-detail-v2-page-hero { display: grid; gap: 14px; padding: 16px; }
.shopping-product-icon.product-detail-v2-page-image { position: relative; display: grid; place-items: center; width: 100%; height: 235px; overflow: hidden; border-radius: 18px; background: linear-gradient(145deg,#eef4ea,#fbf4dc); font-size: 3rem; }
.shopping-product-icon.product-detail-v2-page-image.product-image img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; background: transparent; mix-blend-mode: multiply; }
.shopping-product-icon.product-detail-v2-page-image.product-image.image-failed img { display: none; }
.product-detail-v2-page-copy { min-width: 0; }
.product-detail-v2-page-view .product-card-actions { width: 100%; }
.product-detail-v2-page-view .product-detail-v2-primary { width: 100%; }
.product-detail-v2-page-view .product-detail-quantity { gap: 7px; }
.product-detail-v2-page-view .product-detail-quantity button { width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; }
.product-detail-v2-page-view .product-store-connection { display: none; }
.product-detail-v2-page-view .product-detail-v2-remove { width: 100%; margin-top: 2px; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout { width: min(100%,920px); margin-inline: auto; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-detail-v2-page-hero { gap: 12px; padding: 20px; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-detail-v2-page-image { height: 322.5px; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-detail-v2-intro { grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px 18px; margin: 0 2px 12px; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-detail-v2-page-summary { flex-direction: column; align-items: flex-start; gap: 4px; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-detail-v2-page-summary { grid-column: 1 / -1; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-detail-v2-page-summary > strong { width: 100%; overflow: visible; line-height: 1.2; text-overflow: clip; white-space: normal; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-detail-v2-page-summary .product-lookup-meta { color: var(--muted); font-size: 1rem; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-detail-v2-columns { gap: 12px; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-detail-v2-group { margin-bottom: 10px; padding: 12px; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-detail-v2-page-order > h5:not(:first-child) { margin-top: 14px; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-detail-v2-page-settings { margin-top: 2px; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-detail-v2-page-category { display: flex; color: var(--ink); font-size: 1rem; font-weight: 400; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-detail-v2-page-category select { width: min(62%,520px); }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-popup-order-actions button { margin: 0; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-popup-product-page { display: none; }
.board-frame .product-detail-v2-page-view.product-popup-approved-layout .product-detail-v2-remove { max-width: 280px; margin: 2px auto 0; }
.product-lookup-queue.has-one .product-popup-approved-layout .product-lookup-head h4 { display: none; }
.product-lookup-queue.has-one .product-popup-approved-layout .product-lookup-body { scrollbar-width: none; }
.product-lookup-queue.has-one .product-popup-approved-layout .product-lookup-body::-webkit-scrollbar { display: none; }
.product-popup-approved-layout .product-popup-summary { display: flex; min-width: 0; align-items: baseline; gap: 10px; }
.product-popup-approved-layout .product-popup-summary > strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: clamp(1.8rem,3vw,2.6rem); font-weight: 950; line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; }
.product-popup-approved-layout .product-popup-summary .product-lookup-meta { flex: 0 0 auto; }
.product-popup-approved-layout .product-popup-summary .product-lookup-meta span { padding: 0; background: transparent; color: var(--ink); font-size: 1.15rem; font-weight: 500; }
.product-popup-approved-layout .product-popup-summary .product-lookup-meta span::before { content: '·'; margin-right: 10px; }
.product-popup-approved-layout .product-popup-order-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.product-popup-approved-layout .product-popup-order-actions button { display: grid; min-width: 0; min-height: 76px; grid-template-rows: auto auto; place-items: center; gap: 3px; margin: 0; padding: 8px 6px; border-radius: 14px; font-size: .8rem; text-align: center; white-space: nowrap; }
.product-popup-approved-layout .product-popup-order-actions button::before { display: block; font-size: 1.55rem; line-height: 1; }
.product-popup-approved-layout .product-popup-order-weekly::before { content: '☷'; }
.product-popup-approved-layout .product-popup-order-direct::before { content: '🛒'; }
.product-popup-approved-layout .product-popup-order-weekly { border-color: #54a6df; background: #dff1fb; color: #135e90; }
.product-popup-approved-layout .product-popup-order-direct { border-color: #78ad68; background: #e3f0dc; color: #315f3f; }
.product-popup-approved-layout .product-popup-order-breakdown { display: block; margin: -2px 2px 4px; color: #4f6658; font-size: .82rem; font-weight: 700; line-height: 1.25; }
.product-popup-approved-layout .product-detail-order-status > span:first-child { border: 1px solid #8dc4e7; background: #fff; color: #28698f; }
.product-popup-approved-layout .product-detail-order-status > span:last-child { border: 1px solid #9bc68d; background: #fff; color: #376b46; }
.product-popup-approved-layout .product-detail-order-status > span { flex-direction: column; gap: 2px; }
.product-popup-approved-layout .product-detail-order-status > span b { display: none; }
.product-popup-approved-layout .product-detail-order-status > span strong { min-width: 0; height: auto; background: transparent; color: inherit; font-size: 1.25rem; line-height: 1; }
.product-popup-approved-layout .product-popup-product-page { width: 100%; min-height: 42px; margin-top: 10px; border: 1px solid #b8c4b9; border-radius: 11px; background: #fff; color: var(--ink); }
.product-popup-approved-layout .product-popup-stock-group { margin-bottom: 0; }
.board-frame .product-lookup-queue.has-one .product-popup-approved-layout .product-lookup-head { min-height: 68px; align-items: center; padding: 16px 20px 12px; }
.board-frame .product-lookup-queue.has-one .product-popup-approved-layout .product-lookup-head > button { width: 48px; height: 48px; }
.board-frame .product-lookup-queue.has-one .product-popup-approved-layout .product-lookup-body { max-height: calc(94vh - 74px); padding: 16px 20px 20px; }
.board-frame .product-lookup-queue.has-one .product-popup-approved-layout .product-lookup-result { gap: 12px; }
.board-frame .product-lookup-queue.has-one .product-popup-approved-layout .product-lookup-image { min-height: 205px; }
.board-frame .product-lookup-queue.has-one .product-popup-approved-layout .product-lookup-image img { height: 215px; }
.board-frame .product-lookup-queue.has-one .product-popup-approved-layout .product-detail-v2-intro { grid-template-columns: minmax(0,1.2fr) minmax(300px,1fr); align-items: end; gap: 18px; margin: 0 2px 12px; }
.board-frame .product-lookup-queue.has-one .product-popup-approved-layout .product-detail-v2-intro .product-lookup-price { display: none; }
.board-frame .product-lookup-queue.has-one .product-popup-approved-layout .product-detail-v2-columns { gap: 12px; }
.board-frame .product-lookup-queue.has-one .product-popup-approved-layout .product-detail-v2-group { margin-bottom: 10px; padding: 12px; }
.board-frame .product-lookup-queue.has-one .product-popup-approved-layout .product-detail-v2-columns > div:last-child > .product-detail-v2-group:first-child { margin-bottom: 3px; }
.board-frame .product-lookup-queue.has-one .product-popup-approved-layout .product-detail-v2-columns > div:last-child > .product-detail-v2-group:first-child .product-lookup-store-state { min-height: 62px; padding-block: 5px; }
.board-frame .product-lookup-queue.has-one .product-popup-approved-layout .product-detail-v2-group h5 { margin-bottom: 8px; }
.board-frame .product-lookup-queue.has-one .product-popup-approved-layout .product-detail-v2-group h5:not(:first-child) { margin-top: 12px; }
.board-frame .product-lookup-queue.has-one .product-popup-approved-layout .product-lookup-dialog.product-detail-v2 { max-height: none; }
.product-popup-approved-layout .product-lookup-live-status.visually-hidden { min-height: 1px; margin: -1px; padding: 0; border: 0; }
@media (max-width:700px) {
  .product-detail-v2-intro,.product-detail-v2-columns { grid-template-columns: 1fr; }
  .board-frame .product-lookup-queue.has-one .product-detail-v2 .product-lookup-image { min-height: 180px; }
  .board-frame .product-lookup-queue.has-one .product-detail-v2 .product-lookup-image img { height: 200px; }
  .product-popup-page-actions { grid-template-columns: 1fr; }
}
.board-nav.prikbord-scroll-active { scroll-snap-type: none; }
.bonus-card-art img,.board-frame .product-catalog-screen.product-list-layout .product-catalog-row .shopping-product-icon.product-image img { mix-blend-mode: normal; }

.display-settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.display-settings-head h5,.display-settings-head small { display: block; margin: 0; }
.display-settings-head small { margin-top: 3px; color: var(--muted); }
.display-settings-head output { min-width: 74px; color: var(--green); font-size: 1.65em; font-weight: 950; text-align: right; }
.display-settings > label { display: grid; gap: 3px; margin-top: 14px; }
.display-settings > label small { color: var(--muted); }
.display-settings input[type="range"] { width: 100%; height: 54px; margin: 5px 0 0; accent-color: var(--green); touch-action: pan-x; }
.settings-route-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; width: 100%; margin-top: 8px; border-color: #9fb49e; background: linear-gradient(120deg,#eef5e9,#fffdf7); color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.settings-route-card > span:nth-child(2) strong,.settings-route-card > span:nth-child(2) small { display: block; }.settings-route-card > span:nth-child(2) strong { color: var(--green); font-size: 1.14em; }.settings-route-card > span:nth-child(2) small { margin-top: 3px; color: var(--muted); }.settings-route-card > span:last-child { color: var(--green); font-size: 2em; font-weight: 900; }.settings-route-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--green-soft); font-size: 1.65em; }
.display-settings-page { display: grid; gap: 8px; padding-bottom: 8px; }.display-info-card { position: sticky; z-index: 2; top: -1px; }.display-info-grid { display: grid; grid-template-columns: 1.4fr 1.4fr .8fr .7fr; gap: 8px; }.display-info-grid span { min-width: 0; padding: 7px 8px; border-radius: 8px; background: #eef3eb; }.display-info-grid small,.display-info-grid strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.display-info-grid small { color: var(--muted); font-size: .72em; }.display-info-grid strong { margin-top: 2px; color: var(--green); }
.display-settings-group h5 { margin: 0 0 8px; color: var(--green); font-size: 1.15em; }.display-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 12px; }.display-control { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2px 8px; min-width: 0; padding: 7px 8px; border: 1px solid #d5ddd2; border-radius: 9px; background: rgba(255,255,255,.72); }.display-control > span strong,.display-control > span small { display: block; }.display-control > span small { margin-top: 2px; color: var(--muted); font-size: .7em; }.display-control output { color: var(--green); font-weight: 950; }.display-control input[type="range"] { grid-column: 1 / -1; width: 100%; height: 38px; margin: 0; accent-color: var(--green); touch-action: pan-x; }.display-select-control select { min-width: 150px; }.display-power-note { margin: 8px 0 0; color: var(--muted); font-size: .76em; }.display-info-card .form-feedback { margin: 7px 0 0; }
.display-auto-contrast { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:10px; min-height:58px; padding:8px 10px; border:1px solid #d5ddd2; border-radius:9px; background:rgba(255,255,255,.72); }.display-auto-contrast input { width:24px; height:24px; accent-color:var(--green); }.display-auto-contrast strong,.display-auto-contrast small { display:block; }.display-auto-contrast small { margin-top:3px; color:var(--muted); font-size:.76em; }
@media (max-width: 720px) { .display-settings-grid,.display-info-grid { grid-template-columns: 1fr; }.display-info-card { position: static; }.display-select-control { grid-template-columns: 1fr; }.display-select-control select { width: 100%; min-width: 0; } }
@media (max-width: 620px) { .recipe-product-head,.recipe-product-option { grid-template-columns: minmax(0,1fr) 86px 44px; }.recipe-products-editing .recipe-product-head,.recipe-products-editing .recipe-product-option { grid-template-columns: minmax(0,1fr) 112px 76px 44px 54px; }.recipe-product-head span:nth-child(2),.recipe-product-quantity,.recipe-product-head span:nth-child(4),.recipe-product-price { display: none; }.recipe-products-editing .recipe-product-head span:nth-child(2),.recipe-products-editing .recipe-product-quantity { display: grid; }.recipe-product-head span:nth-child(5) { font-size: 0; }.recipe-product-head span:nth-child(5)::after { content: 'Lijst'; font-size: .9rem; }.recipe-shopping-checkbox span { display: none; }.meal-eaten-button { padding-inline: 5px; }.product-stock-row { align-items: flex-start; flex-wrap: wrap; }.product-stock-row .product-detail-quantity { flex: 1 1 100%; justify-content: space-between; } }
.recipe-hero-image { position: relative; }
.recipe-image-refresh {
  position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.94); color: #214b39; font-size: 28px; line-height: 1; box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.recipe-image-searching {
  width: 100%; height: clamp(320px,42vh,510px); min-width: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; border-radius: 18px; background: #eef4ec; color: #476453; text-align: center; padding: 18px;
}
.phone-frame .recipe-image-searching { height: 250px; }
.recipe-image-spinner { width: 34px; height: 34px; border: 4px solid #cad9ce; border-top-color: #3f7657; border-radius: 50%; animation: recipe-image-spin 1s linear infinite; }
.recipe-product-choice-actions { display: grid; gap: 10px; margin-top: 12px; }
.recipe-product-choice-actions .ui-button { width: 100%; }
@keyframes recipe-image-spin { to { transform: rotate(360deg); } }
.recipe-shopping-checkbox { justify-content: flex-end; }

/* iPhone/PWA: de enkele productpopup moet de mobiele kolom afdwingen boven de algemene wachtrijregels. */
.phone-frame .product-lookup-queue.has-one { padding: 8px; }
.phone-frame .product-lookup-queue.has-one .product-lookup-overlay { width: 100%; height: 100%; padding: 0; }
.phone-frame .product-lookup-queue.has-one .product-lookup-dialog { display: grid; grid-template-rows: auto minmax(0,1fr); width: 100%; height: 100%; max-height: none; border-radius: 16px; }
.phone-frame .product-lookup-queue.has-one .product-lookup-head { gap: 8px; padding: 12px; }
.phone-frame .product-lookup-queue.has-one .product-lookup-head h4 { margin-top: 5px; font-size: 1.25rem; }
.phone-frame .product-lookup-queue.has-one .product-lookup-head > button { width: 44px; height: 44px; font-size: 1.8rem; }
.phone-frame .product-lookup-queue.has-one .product-lookup-body { min-height: 0; height: auto; max-height: none; overflow-x: hidden; overflow-y: auto; padding: 10px; }
.phone-frame .product-lookup-queue.has-one .product-lookup-result { grid-template-columns: minmax(0,1fr); gap: 10px; align-items: start; }
.phone-frame .product-lookup-queue.has-one .product-lookup-image { min-height: 140px; }
.phone-frame .product-lookup-queue.has-one .product-lookup-image img { height: 160px; }
.phone-frame .product-lookup-queue.has-one .product-detail-v2-intro,.phone-frame .product-lookup-queue.has-one .product-detail-v2-columns { grid-template-columns: minmax(0,1fr); }
.phone-frame .product-lookup-queue.has-one .product-detail-v2-row { align-items: flex-start; flex-wrap: wrap; }
.phone-frame .product-lookup-queue.has-one .product-detail-v2-row > span:first-child { min-width: 0; flex: 1 1 130px; }
.phone-frame .product-lookup-queue.has-one .product-detail-v2-group { padding: 11px; border-radius: 13px; }
.phone-frame .product-lookup-queue.has-one .product-detail-v2-page,.phone-frame .product-lookup-queue.has-one .product-detail-v2-remove { width: 100%; min-height: 44px; }
.phone-frame .product-detail-v2-page-view .product-detail-v2-intro,.phone-frame .product-detail-v2-page-view .product-detail-v2-columns { grid-template-columns: minmax(0,1fr); }
.phone-frame .product-detail-v2-page-view .product-detail-v2-intro > *,.phone-frame .product-detail-v2-page-view .product-detail-category select { width: 100%; min-width: 0; }
.phone-frame .product-detail-v2-page-view .product-detail-v2-row { align-items: flex-start; flex-wrap: wrap; }
.phone-frame .product-detail-v2-page-view .product-detail-v2-row > span:first-child { min-width: 0; flex: 1 1 110px; }
.phone-frame .product-detail-v2-page-view .product-detail-quantity { flex: 1 1 100%; justify-content: space-between; }
.phone-frame .product-detail-v2-page-view .product-lookup-store-states { grid-template-columns: minmax(0,1fr); }
.ah-order-dialog { width: min(92%,470px); padding: 18px; }
.ah-order-dialog > p { margin: 10px 0 16px; color: #26372c; font-size: 1.08em; }
.ah-order-choice-actions { display: grid; gap: 9px; }
.ah-order-choice-actions .ui-button { min-height: 48px; }
.ah-order-choice-actions .secondary { background: white; color: var(--green); }
.ah-order-dialog [data-ah-order-progress] { margin: 10px 0 0; color: var(--green); font-weight: 800; }
.ah-deadline-settings { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }.ah-order-deadline { grid-column: 1; display: grid; grid-template-columns: minmax(150px,1fr) minmax(132px,auto) minmax(120px,auto); align-items: end; gap: 8px 10px; }.ah-order-deadline + .ah-order-deadline { padding-top: 10px; border-top: 1px solid var(--line); }
.ah-order-deadline-copy strong,.ah-order-deadline-copy small { display: block; }
.ah-order-deadline-copy small { margin-top: 2px; color: var(--muted); }
.ah-order-deadline-field { display: grid; gap: 4px; color: var(--green); font-size: .88em; font-weight: 850; }
.ah-order-deadline select,.ah-order-deadline input { width: 100%; min-height: 42px; padding: 7px 10px; border: 2px solid #7e987f; border-radius: 9px; background: white; color: var(--green); font: inherit; font-weight: 800; }
.ah-order-deadline input[type="time"] { min-width: 120px; color-scheme: light; }
.ah-order-deadline-save { grid-column: 1; min-height: 42px; }
.ah-order-deadline-state { grid-column: 1; margin: 0; }

/* Een recept kan een tiende verpakking gebruiken; dit veld blijft compact in de bestaande stapper. */
.recipe-product-stepper input[data-recipe-product-package-quantity] { min-width: 0; width: 100%; box-sizing: border-box; padding: 0 1px; border: 0; outline: 0; text-align: center; color: var(--ink); background: #fff; appearance: textfield; -moz-appearance: textfield; font: inherit; font-size: .82em; font-weight: 900; }
.recipe-product-stepper input[data-recipe-product-package-quantity]::-webkit-inner-spin-button,.recipe-product-stepper input[data-recipe-product-package-quantity]::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.recipe-product-stepper:has(input[data-recipe-product-package-quantity]) { width: 132px; grid-template-columns: 36px minmax(48px,1fr) 36px; }

/* De bovenste lijst neemt alleen de benodigde ruimte, tot 42% van de kolom. */
.board-frame .meal-library { grid-template-rows: fit-content(42%) minmax(0,1fr); gap: 6px; }
.board-frame .meal-recipe-options[hidden] { display: none; }
.board-frame .meal-recipe-card {
  min-height: 44px;
  border-width: 2px;
  border-color: #a3b69b;
  box-shadow: 0 2px 0 rgba(49,91,70,.14);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.board-frame .meal-recipe-card.needs-shopping { border-color: #d8be74; }
.board-frame .meal-recipe-card:focus-visible { outline: 3px solid var(--green); outline-offset: 1px; }
.board-frame .meal-recipe-card.meal-recipe-picked-up {
  cursor: grabbing;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(49,91,70,.25),0 4px 10px rgba(49,91,70,.2);
  transform: scale(.98);
}
.meal-recipe-gesture-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 2px solid var(--green);
  border-radius: 8px;
  background: var(--green-soft);
  box-shadow: 0 8px 20px rgba(49,91,70,.25);
}
.meal-recipe-gesture-ghost strong,.meal-recipe-gesture-ghost small { display: block; }

.home-v2.has-home-photo .home-touch-shortcut {
  top: auto; bottom: var(--photo-shortcut-bottom); left: auto; right: 10px;
}
.home-v2.has-home-photo .home-touch-shortcut.klaas { right: min(18%, 195px); }

.pi-home-photo { position:absolute; right:10px; width:min(32.82353%,348.75px,25.64339vh); height:auto; aspect-ratio:3 / 4; object-fit:contain; object-position:right bottom; z-index:9; pointer-events:none; visibility:hidden; }
.home-v2.has-home-photo .pi-home-photo { visibility:visible; }