/* fridge.css - 냉장고. Owner: slice S2. Every selector starts with .fr- (CONTRACT_shell.md 6.2, 6.3); tokens and u- parts live in app.css. */

/* The sheet keeps one height (D6): fridge and legend stay put, only the panels area scrolls
   once the sheet reaches its 92 % cap (audit b / 23). */
.fr-sheet.u-sheet{overflow:hidden}
.fr-sheet .pnl-topbar{padding:10px 18px 0}
.fr-sheet .pnl-head{margin-bottom:2px}
.fr-sheet .pnl-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:0 18px 22px}
.fr-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}

/* the drawing (D4 style A, D6 depth, D12 outline #1F2A24) - the door swings left, so the
   fridge sits right and the open door stays on the sheet */
.fr-stage{flex:none;display:grid;justify-items:end;padding:14px 6px 2px 0;perspective:760px;perspective-origin:30% 45%}
.fr-s1 .fr-stage{justify-items:center;padding-right:0}
.fr-fridge{position:relative;width:200px}
.fr-fridge.fr-sm{width:170px}
.fr-fridge::after{content:"";position:absolute;left:8%;right:8%;bottom:-6px;height:12px;border-radius:50%;
  background:rgba(31,42,36,.16);filter:blur(5px);z-index:-1}
.fr-body{position:relative;padding:8px;border:3px solid var(--ink);border-radius:40px 40px 26px 26px;
  background:linear-gradient(90deg,#E8F5ED 0%,var(--fr-body) 28%,#D3E8DB 100%);
  box-shadow:inset 6px 0 0 rgba(255,255,255,.45),inset -8px 0 0 rgba(63,125,91,.08),0 12px 20px -10px rgba(31,42,36,.30)}
.fr-comp{position:relative;display:block;width:100%;padding:0;border:0;background:none;text-align:left;
  transform-style:preserve-3d;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fr-comp:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fr-comp.fr-still{cursor:default}
.fr-top{height:168px;margin-bottom:7px;border-radius:32px 32px 12px 12px}
.fr-bot{height:108px;border-radius:12px 12px 20px 20px}
.fr-sm .fr-top{height:140px}
.fr-sm .fr-bot{height:92px}
.fr-inner{position:absolute;inset:0;border-radius:inherit;transform-style:preserve-3d}

/* inside: walls, bulb, glass shelves, cubes */
.fr-in{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;justify-content:space-evenly;
  padding:10px 12px;border-radius:inherit}
.fr-top .fr-in{background:radial-gradient(130% 90% at 50% 0%,#FFFFFF 0%,#F6FAF4 55%,#E7F0E9 100%);
  box-shadow:inset 0 0 0 2.5px #CFE3D7,inset 14px 0 14px -12px rgba(31,42,36,.20),inset -14px 0 14px -12px rgba(31,42,36,.20),inset 0 -12px 14px -12px rgba(31,42,36,.16)}
.fr-bot .fr-in{background:radial-gradient(130% 90% at 50% 0%,#F4FAFD 0%,var(--fr-cold) 60%,#D8E7F0 100%);
  box-shadow:inset 0 0 0 2.5px #C3D9E6,inset 14px 0 14px -12px rgba(31,42,36,.20),inset -14px 0 14px -12px rgba(31,42,36,.20)}
.fr-in::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(120% 70% at 50% 0%,rgba(255,246,214,.95),rgba(255,246,214,0) 70%)}
.fr-open .fr-in::before{opacity:1;transition:opacity .45s .15s}
.fr-in::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s .1s;
  background:linear-gradient(90deg,rgba(31,42,36,.20),rgba(31,42,36,0) 32%)}
.fr-open .fr-in::after{opacity:1}
.fr-bulb{position:absolute;top:7px;left:50%;width:24px;height:5px;margin-left:-12px;border-radius:3px;background:#EFE9D6;
  transition:box-shadow .3s .1s,background .3s .1s}
.fr-open .fr-bulb{background:#FFF7DA;box-shadow:0 0 14px 5px rgba(255,236,170,.85)}
.fr-shelf{position:relative;display:flex;gap:6px;align-items:flex-end;min-height:26px;padding:0 2px 4px}
.fr-shelf::after{content:"";position:absolute;left:-6px;right:-6px;bottom:-3px;height:5px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(196,222,208,.75));box-shadow:0 3px 4px rgba(31,42,36,.08)}
.fr-bot .fr-shelf::after{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(190,214,228,.8))}
.fr-ghost{--g:rgba(63,125,91,.55)}
.fr-in .fr-cube{transform:translateY(6px);opacity:0;transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .2s .35s}
.fr-in .fr-cube:not(.fr-ghost){box-shadow:inset 0 -4px 0 rgba(0,0,0,.09),0 2px 2px rgba(31,42,36,.16)}
.fr-open .fr-in .fr-cube{transform:none;opacity:1;transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .25s}
.fr-open .fr-in .fr-cube:nth-child(2){transition-delay:.05s}
.fr-open .fr-in .fr-cube:nth-child(3){transition-delay:.1s}
.fr-open .fr-in .fr-cube:nth-child(4){transition-delay:.15s}
.fr-open .fr-in .fr-cube:nth-child(5){transition-delay:.2s}
.fr-open .fr-thaw::before{content:"";position:absolute;left:50%;bottom:-5px;width:4px;height:4px;margin-left:-2px;
  border-radius:50% 50% 50% 0;background:#9CC6E0;animation:fr-drip 1.8s infinite .6s}
@keyframes fr-drip{0%{opacity:0;transform:translateY(-3px) rotate(-45deg)}30%{opacity:1}100%{opacity:0;transform:translateY(5px) rotate(-45deg)}}
.fr-tray{display:flex;gap:3px;padding:4px;border-radius:7px;background:rgba(255,255,255,.65);box-shadow:inset 0 0 0 1.5px rgba(120,160,190,.45)}
.fr-frost{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s .2s;
  background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.95) 0 2px,transparent 3px),
    radial-gradient(circle at 80% 12%,rgba(255,255,255,.9) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 88% 70%,rgba(255,255,255,.9) 0 2px,transparent 3px),
    radial-gradient(circle at 25% 85%,rgba(255,255,255,.85) 0 1.5px,transparent 2.5px),
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 30%)}
.fr-open .fr-frost{opacity:1}
.fr-mist{position:absolute;left:10%;right:10%;bottom:-10px;height:24px;border-radius:50%;background:rgba(220,236,246,.9);
  filter:blur(8px);opacity:0;pointer-events:none}
.fr-open .fr-mist{animation:fr-mist 1.6s ease-out .25s}
@keyframes fr-mist{0%{opacity:0;transform:translateY(0) scaleX(.6)}30%{opacity:.9}100%{opacity:0;transform:translateY(16px) scaleX(1.3)}}

/* the door: a 12 px slab, open to 128 deg with a small overshoot, shut in .52 s with none */
.fr-door{position:absolute;inset:0;border-radius:inherit;transform-origin:left center;transform-style:preserve-3d;
  transition:transform .52s cubic-bezier(.45,0,.2,1)}
.fr-open .fr-door{transform:rotateY(-128deg);transition:transform .62s cubic-bezier(.25,.95,.3,1.05)}
.fr-face-f,.fr-face-b{position:absolute;inset:0;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fr-face-f{transform:translateZ(6px);border:2.5px solid var(--ink);
  background:linear-gradient(90deg,#F4FAF6 0%,var(--fr-door) 45%,#E5F1E9 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.85),inset 0 -3px 0 rgba(63,125,91,.08)}
.fr-face-f::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:linear-gradient(90deg,rgba(31,42,36,0),rgba(31,42,36,.28))}
.fr-open .fr-face-f::after{opacity:1}
.fr-face-b{transform:rotateY(180deg) translateZ(6px);display:flex;flex-direction:column;justify-content:space-evenly;padding:14px 12px;
  border:2.5px solid var(--ink);border-left:7px solid #9CC4AE;
  background:linear-gradient(90deg,#F2F8F4 0%,var(--fr-back) 55%,#D6E8DD 100%);
  box-shadow:inset 0 0 0 5px #E9F3ED,inset 0 0 0 7px rgba(63,125,91,.22),inset 0 0 14px rgba(31,42,36,.10)}
.fr-pocket{position:relative;display:flex;align-items:flex-end;gap:4px;height:22px;padding:0 5px}
.fr-pocket::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;border-radius:2px 2px 7px 7px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.9));
  box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 rgba(63,125,91,.30),0 3px 4px rgba(31,42,36,.10)}
.fr-pocket i{position:relative;display:block;width:8px;border-radius:3px 3px 1px 1px;box-shadow:inset -2px 0 0 rgba(0,0,0,.08)}
.fr-pocket i::before{content:"";position:absolute;left:1px;right:1px;top:-3px;height:3px;border-radius:1px;background:rgba(31,42,36,.30)}
.fr-handle{position:absolute;right:12px;width:7px;border-radius:4px;
  background:linear-gradient(90deg,#3A463F,var(--ink) 60%,#141C17);box-shadow:1.5px 2px 0 rgba(31,42,36,.18)}
.fr-top .fr-handle{bottom:16px;height:40px}
.fr-bot .fr-handle{top:14px;height:30px}

/* the face on the 냉장실 door: smile, flat (S1), round (S2); blink every 4.5 s */
.fr-eyes{position:absolute;left:22px;top:30px;width:30px;height:8px}
.fr-eyes::before,.fr-eyes::after{content:"";position:absolute;top:0;width:7px;height:8px;border-radius:50%;background:var(--ink);
  animation:fr-blink 4.5s infinite}
.fr-eyes::before{left:0}
.fr-eyes::after{right:0}
@keyframes fr-blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.fr-mouth{position:absolute;left:31px;top:42px;width:12px;height:6px;border:2.2px solid var(--ink);border-top:0;border-radius:0 0 10px 10px}
.fr-mouth.fr-o{left:32px;width:9px;height:9px;border-top:2.2px solid var(--ink);border-radius:50%}
.fr-cheek{position:absolute;top:42px;left:15px;width:9px;height:5px;border-radius:50%;background:var(--fr-bowl)}
.fr-cheek.fr-cheek-r{left:52px}
.fr-sm .fr-eyes{top:24px}
.fr-sm .fr-mouth,.fr-sm .fr-cheek{top:36px}

/* door text, memo magnets */
.fr-txt{position:absolute;left:18px;right:26px;display:flex;flex-direction:column;gap:6px}
.fr-top .fr-txt{bottom:12px}
.fr-bot .fr-txt{top:20px;gap:2px}
.fr-lbl{font-size:var(--fs-base);font-weight:700;letter-spacing:-.2px;color:var(--accent-2);white-space:nowrap}
.fr-cnt{font-size:var(--fs-s);line-height:1.45;color:var(--ink)}
.fr-cnt b{font-size:var(--fs-body)}
.fr-cnt.fr-warn,.fr-cnt .fr-warn{color:var(--warn);font-weight:700}
.fr-note{position:absolute;right:28px;top:20px;padding:6px 7px 7px;background:var(--memo);color:var(--memo-ink);
  font-size:var(--fs-s);font-weight:700;line-height:1.25;white-space:nowrap;transform:rotate(-4deg);box-shadow:0 2px 4px rgba(31,42,36,.12)}
.fr-note::before{content:"";position:absolute;top:-5px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:var(--heart);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.fr-note.fr-red{right:32px;top:8px;background:var(--warn-soft);color:var(--warn)}
.fr-feet{display:flex;justify-content:space-between;padding:0 26px}
.fr-feet i{display:block;width:18px;height:9px;border-radius:0 0 6px 6px;background:var(--ink)}

/* the 상온 basket (#357 N5-N9, work\room_basket_20261015 MOCKUP.md): 84 x 124, 8 px left of the fridge at every width
   (work\fridge_shut_20261016 F2), bottom on the fridge's floor line; the fridge keeps its place at the stage's right and
   comes after it, so an open door passes in front (N7). Its drawing (img\basket\<id>.svg)
   is inlined; the bob carries the drawing and the tag and is squashed about its bottom centre, the floor shadow stays on
   the floor. Its own press replaces the app's M1 press, which would compound with it. */
.fr-stage.fr-has-room{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px}
.fr-room{position:relative;flex:none;display:block;width:84px;height:124px;padding:0;border:0;background:none;color:var(--ink);
  text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.fr-room:active:not(:disabled){scale:none}
.fr-room:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fr-rm-shadow{position:absolute;left:8%;right:8%;bottom:-6px;height:12px;border-radius:50%;background:rgba(31,42,36,.16);
  filter:blur(5px);z-index:-1}
.fr-rm-bob{position:absolute;inset:0;transform-origin:50% 100%}
.fr-rm-bob > svg{position:absolute;left:0;top:0;display:block;width:84px;height:124px}
/* the parts that move inside the drawing, each about its own point in the drawing's 84 x 124 units */
.fr-rm-bob .bk-potato,.fr-rm-bob .bk-sack,.fr-rm-bob .bk-cloth-l,.fr-rm-bob .bk-cloth-r{transform-box:view-box}
.fr-rm-bob .bk-potato{transform-origin:31px 38px}
.fr-rm-bob .bk-sack{transform-origin:54px 38px}
.fr-rm-bob .bk-cloth-l{transform-origin:14.5px 41.5px}
.fr-rm-bob .bk-cloth-r{transform-origin:69.5px 41.5px}
.fr-rm-tag{position:absolute;left:9px;right:9px;bottom:10px;display:flex;flex-direction:column;align-items:center;padding:3px 2px 4px;
  border:2.5px solid var(--ink);border-radius:9px;background:linear-gradient(90deg,#F4FAF6 0%,var(--fr-door) 45%,#E5F1E9 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.85)}
.fr-rm-tag .fr-cnt{white-space:nowrap}
.fr-room[data-basket="a"]:not(.fr-open) .fr-rm-tag{background:#FFF5E4}
.fr-room[data-basket="b"]:not(.fr-open) .fr-rm-tag{background:#FFF2EC}
.fr-room[data-basket="c"]:not(.fr-open) .fr-rm-tag{background:#FFF8DC}
.fr-room[data-basket="d"]:not(.fr-open) .fr-rm-tag{background:#FFFFFF}
.fr-room.fr-open .fr-rm-tag{background:var(--accent-soft);border-color:var(--accent)}

/* legend (D23) */
.fr-legend{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin:10px 0 2px;font-size:var(--fs-s);color:var(--sub)}
.fr-legend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}

/* panels share one grid cell, so the sheet keeps the tallest one's height (D6) */
/* the scroll box spans the body's side padding so the steppers' 44 px hit areas are not clipped */
.fr-panels{flex:0 1 auto;min-height:0;margin:0 -18px;padding:0 18px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:minmax(0,1fr)}
.fr-panel{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s,transform .2s,visibility 0s .2s}
.fr-panel.fr-show{opacity:1;visibility:visible;transform:none;transition:opacity .3s .22s,transform .3s .22s,visibility 0s}
.fr-hint{margin:0;padding:14px 0 2px;text-align:center;color:var(--sub);font-size:var(--fs-base)}
.fr-sum{display:flex;gap:8px;margin-top:12px}
.fr-sum > div{flex:1;min-width:0;padding:10px 12px;border-radius:14px;background:var(--well);font-size:var(--fs-s);line-height:1.5;color:var(--sub)}
.fr-sum span,.fr-sum b{display:block}
.fr-sum b{color:var(--ink);font-size:var(--fs-body)}
.fr-sum .fr-warn{color:var(--warn);font-weight:700}
.fr-ph{display:flex;align-items:baseline;gap:4px;margin:14px 2px 6px;font-size:var(--fs-s);font-weight:700;color:var(--sub)}
.fr-when{font-weight:600}
.fr-tot{margin-left:auto;color:var(--ink);white-space:nowrap}
.fr-todo .fr-tot{padding:1px 6px;border-radius:6px;background:var(--memo);color:var(--memo-ink)}
.fr-it{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:var(--fs-body);line-height:1.35}
.fr-stk{flex:none;display:flex;width:34px}
.fr-stk .fr-cube + .fr-cube{margin-left:-8px;box-shadow:-2px 0 0 #fff}
.fr-nm{display:flex;flex-direction:column;gap:1px;min-width:0}
.fr-n{font-weight:700;min-width:0}
.fr-mm{font-size:var(--fs-s);color:var(--sub)}
.fr-k{flex:none;margin-left:auto;min-width:34px;font-weight:700;text-align:right;white-space:nowrap}
.fr-k.fr-two{color:var(--accent)}
.fr-none{margin:14px 2px 0;font-size:var(--fs-base);color:var(--sub)}
.fr-foot{margin:8px 2px 0;font-size:var(--fs-s);line-height:1.5;color:var(--sub)}
.fr-rule{margin:12px 0 0;padding:10px 12px;border-radius:14px;background:var(--well);font-size:var(--fs-s);line-height:1.55}
.fr-src{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent-2);
  font-size:var(--fs-s);font-weight:700;white-space:nowrap}
.fr-leftg{margin:8px 0 4px;padding:2px 10px 8px;border-radius:14px;background:var(--amber-soft)}
.fr-leftg .fr-it{border-bottom-color:rgba(154,106,20,.15)}
.fr-leftnote{margin:6px 2px 0;font-size:var(--fs-s);line-height:1.5;color:var(--memo-ink)}

/* lot rows: name over its date line, the stepper on the right spanning both (never pushed out) */
.fr-lot{display:grid;grid-template-columns:20px minmax(0,1fr) auto;column-gap:10px;row-gap:1px}
.fr-lot > .fr-cube{grid-row:1/3}
.fr-lot .fr-n{grid-column:2;grid-row:1}
.fr-lot .fr-m{grid-column:2;grid-row:2;font-size:var(--fs-s);color:var(--sub)}
.fr-lot .fr-m.fr-warn{color:var(--warn);font-weight:700}
.fr-lot .fr-why{font-weight:700;color:var(--warn)}
.fr-lot .fr-why::before{content:" · ";font-weight:400;color:var(--sub)}
.fr-dead{background:#E9DCD6;border:1.5px solid var(--warn);box-shadow:none}
.fr-dead::after{display:none}
.fr-step{grid-column:3;grid-row:1/3;display:flex;align-items:center;gap:4px}
.fr-step b{min-width:18px;text-align:center}
.fr-sb{width:28px;height:28px;min-height:0;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--card);
  font-size:var(--fs-body);font-weight:700;line-height:1;color:var(--ink);cursor:pointer}
.fr-sb:disabled{opacity:.35;cursor:default}
.fr-drop{margin-top:14px}
/* the empty fridge's two buttons, side by side (BUILD 5, still today-fridge3) */
.fr-acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:18px}
.fr-acts .fr-act{padding:13px 8px;white-space:nowrap}
.fr-acts .fr-off{border-color:var(--line);background:var(--well);color:var(--sub);cursor:default}

/* 생재료 (#293 B, blueprint b_mock2 E10-E14): food pictures (app\img\ing), one tappable row per food, the section footnote,
   the row's sheet (#sh) */
.fi{flex:none;display:block;width:28px;height:28px}
.fi-l{width:40px;height:40px}
.fr-rw{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 2px;border:0;border-bottom:1px solid var(--line);
  background:none;color:var(--ink);font:inherit;text-align:left;font-size:var(--fs-body);line-height:1.35;cursor:pointer}
.fr-rt{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
.fr-d{font-size:var(--fs-m);color:var(--sub);font-variant-numeric:tabular-nums}
.fr-rw .fr-why{flex-basis:100%;font-size:var(--fs-s);font-weight:700;color:var(--warn)}
.fr-rw .fr-k{min-width:0}
.fr-chev{flex:none;width:14px;height:14px;color:var(--faint)}
.fr-rfoot{margin:8px 2px 0;font-size:var(--fs-s);color:var(--sub)}
.fr-rsh-h{display:flex;align-items:center;gap:12px}
.fr-rsh-r{margin:0 0 4px;font-size:var(--fs-title);font-weight:700;letter-spacing:var(--ls-title)}
.fr-rsh-s{margin:0 0 8px;font-size:var(--fs-base);color:var(--sub)}
/* #356: 남은 양 of the row - the label, the field and its unit (cook.css .st-in, as step 1 asks it), 저장 */
.fr-rsh-a{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.fr-rsh-l{flex:1;min-width:0;display:flex;align-items:center;gap:10px;margin:0;font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.fr-rsh-t{flex:1;min-width:0}
.fr-rsh-a input[type=text]:disabled{background:var(--well);color:var(--sub)}
.fr-rsh-a .fr-rsh-ok{flex:none;width:auto;min-height:44px;padding:0 20px}
.fr-rsh-lock{margin:8px 0 0;font-size:var(--fs-s);color:var(--sub)}

/* a short screen (under ~620 px): the drawing scrolls away with the rows instead of covering them */
@media (max-height:619px){
  .fr-sheet .pnl-body{overflow-y:auto;overscroll-behavior:contain}
  .fr-wrap,.fr-panels{flex:none}
  .fr-panels{overflow:visible}
}
/* 320: the open door keeps the sheet's side padding */
@media (max-width:340px){
  .fr-fridge:not(.fr-sm){width:184px}
}

/* reduced motion (D3): the door fades instead of swinging and stops taking taps; the app-wide
   rule already stops every other transition and the blink, drip and mist */
@media (prefers-reduced-motion:reduce){
  .fr-comp .fr-door{transition:opacity .25s !important}
  .fr-comp.fr-open .fr-door{transform:none;opacity:0;pointer-events:none}
}

/* ---- the plan-flow 장보기 page (shop.js planShopPaint, PLAN_FLOW only): section heads, the need-by word, the door row.
   This file loads before prep.css, so every rule here names .pf-shop / its own class and never restyles a prep.css rule. */
.pf-shop #cart .pf-sec { margin:20px 0 0; font-size:17px; font-weight:700; line-height:24px; color:var(--ink); }
.pf-shop #cart .pf-wk:first-child .pf-sec { margin-top:4px; }
.pf-shop #cart .pf-by { flex:none; margin-left:6px; font-size:12px; font-weight:600; line-height:16px; color:var(--accent); white-space:nowrap; }
.pf-shop #cart .nx-havehd + .cart-item { border-top:0; }
.pf-norows > .shop-list { display:none; }
.pf-door { display:flex; align-items:center; box-sizing:border-box; width:100%; min-height:56px; margin:12px 0 0; padding:0 16px;
  border:0; border-radius:16px; background:var(--card); color:var(--ink); font:inherit; font-size:15px; font-weight:600; text-align:left; cursor:pointer; }