/* ==========================================================================
   Public menu — shared UI layer (Phase 4/5)
   Loaded after public.css and before the template CSS. It owns the design
   tokens and every behaviour that is identical across the seven templates:
   typography/spacing tokens, price + badge + sold-out cards, skeleton images,
   search UI, edge-fade scrollers, focus ring, skip link and the customer cart.
   Templates only override the --ui-* variables and add their own structure.
   Rule of thumb: this file never sets backgrounds/borders of cards (templates
   do), it only reads variables, so template CSS always wins ties.
   ========================================================================== */
.pm{
  /* type scale */
  --ui-fs-xs:.72rem;--ui-fs-sm:.84rem;--ui-fs-md:1rem;--ui-fs-lg:1.125rem;--ui-fs-xl:1.375rem;--ui-fs-2xl:1.75rem;
  --ui-lh-tight:1.25;--ui-lh-snug:1.45;--ui-lh-body:1.7;
  /* spacing 4/8/12/16/24 */
  --ui-s1:4px;--ui-s2:8px;--ui-s3:12px;--ui-s4:16px;--ui-s6:24px;
  /* radius + elevation */
  --ui-r-sm:8px;--ui-r-md:14px;--ui-r-lg:22px;--ui-r-pill:999px;
  --ui-sh-1:0 1px 2px rgba(0,0,0,.08);--ui-sh-2:0 8px 20px -10px rgba(0,0,0,.3);--ui-sh-3:0 22px 44px -18px rgba(0,0,0,.4);
  /* interaction */
  --ui-tap:44px;--ui-focus:var(--accent);--ui-ease:cubic-bezier(.2,.8,.2,1);--ui-dur:.28s;
  /* card typography (templates override these) */
  --ui-name-fs:var(--ui-fs-lg);--ui-name-fw:800;--ui-desc-fs:var(--ui-fs-sm);--ui-price-fs:var(--ui-fs-lg);--ui-old-fs:var(--ui-fs-sm);--ui-badge-fs:.74rem;
  --ui-off-ink:var(--accent);--ui-off-bg:color-mix(in srgb,var(--accent) 16%,var(--bg));--ui-sold-bg:#5b6470;
  --ui-badge-bg:var(--soft);--ui-badge-ink:var(--ink);
  --ui-sk1:color-mix(in srgb,var(--ink) 7%,var(--bg));--ui-sk2:color-mix(in srgb,var(--ink) 15%,var(--bg));
  --ui-bottom:0px;
}
.ui-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- accessibility ---------- */
.pm :focus{outline:none}
.pm :focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px;border-radius:var(--ui-r-sm)}
.pm .pm-search input:focus-visible{outline-offset:1px;border-radius:var(--ui-r-pill)}
.pm .ui-skip{position:fixed;top:8px;inset-inline-start:8px;z-index:300;transform:translateY(-220%);background:var(--ink);color:var(--bg);padding:10px 18px;min-height:var(--ui-tap);display:inline-flex;align-items:center;border-radius:var(--ui-r-pill);font-weight:800;font-size:var(--ui-fs-sm);transition:transform var(--ui-dur) var(--ui-ease)}
.pm .ui-skip:focus{transform:none}
#pm-start:focus{outline:none}

/* ---------- card typography (hierarchy: name > description > price) ---------- */
.pm .pm-item h3{font-size:var(--ui-name-fs);font-weight:var(--ui-name-fw);line-height:var(--ui-lh-snug);margin:0}
.pm .pm-item p{font-size:var(--ui-desc-fs);line-height:var(--ui-lh-body);margin:var(--ui-s1) 0 0}
.pm .pm-price{font-variant-numeric:tabular-nums}
.pm .pm-price b{font-size:var(--ui-price-fs);font-weight:900;line-height:var(--ui-lh-tight)}
.pm .pm-price del{font-size:var(--ui-old-fs);opacity:.7;text-decoration-thickness:1.5px;font-weight:500}
.pm .pm-price small{font-size:var(--ui-fs-xs);font-weight:600;opacity:.8}
.pm .pm-price.has-off b{color:var(--ui-off-ink)}
.pm .ui-off{display:inline-block;font-size:var(--ui-fs-xs);font-weight:900;line-height:1.5;padding:0 var(--ui-s2);border-radius:var(--ui-r-pill);background:var(--ui-off-bg);color:var(--ui-off-ink);white-space:nowrap}
.pm .pm-badges{gap:var(--ui-s1) 6px;margin-top:var(--ui-s2)}
.pm .pm-badges span{font-size:var(--ui-badge-fs);font-weight:800;line-height:1.6;padding:1px 10px;border-radius:var(--ui-r-pill);background:var(--ui-badge-bg);color:var(--ui-badge-ink)}
.pm .pm-badges .ui-sold,.pm .ui-sold{background:var(--ui-sold-bg);color:#fff}
.pm .ui-sold{display:inline-block;font-size:var(--ui-badge-fs);font-weight:800;line-height:1.6;padding:1px 10px;border-radius:var(--ui-r-pill)}
.pm .pm-pic .ui-sold,.pm .en-pic .ui-sold,.pm .dv-pic .ui-sold,.pm .gd-pic .ui-sold{position:absolute;top:var(--ui-s3);inset-inline-end:var(--ui-s3);z-index:2;box-shadow:var(--ui-sh-2)}
/* sold-out card: dimmed, grey image, no price emphasis, no cart */
.pm .pm-item.is-sold h3,.pm .pm-item.is-sold p{opacity:.6}
.pm .pm-item.is-sold img{filter:grayscale(1) contrast(.9);opacity:.55}
.pm .pm-item.is-sold .pm-price b{color:var(--mut);font-weight:700}
.pm .pm-item.is-sold .pm-price del,.pm .pm-item.is-sold .ui-off{display:none}
.pm .pm-item.is-sold{cursor:default}

/* ---------- press + entrance + category swap (all respect reduced motion) ---------- */
.pm .pm-item,.pm button,.pm .pm-links a,.pm nav a,.pm .pm-story{transition-property:transform,opacity,background-color,color,border-color,box-shadow;transition-duration:var(--ui-dur);transition-timing-function:var(--ui-ease);-webkit-tap-highlight-color:transparent}
.pm .pm-item:not(.is-sold):active{transform:scale(.985)!important}
.pm button:not(:disabled):active,.pm .pm-links a:active,.pm nav a:active,.pm .pm-story:active{transform:scale(.95)}
@keyframes ui-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pm .ui-enter{animation:ui-enter .38s var(--ui-ease) both}

/* ---------- skeleton + soft image reveal ---------- */
@keyframes ui-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes ui-fadein{from{opacity:0}to{opacity:1}}
.pm img.ui-img{background:linear-gradient(100deg,var(--ui-sk1) 35%,var(--ui-sk2) 50%,var(--ui-sk1) 65%) 0 0/200% 100%;animation:ui-shimmer 1.4s linear infinite;color:transparent}
.pm img.ui-img.is-loaded{background:none;animation:ui-fadein .5s var(--ui-ease) both}
.pm img.ui-img.is-fallback{background:var(--ui-sk1);object-fit:cover}

/* ---------- search ---------- */
.pm .ui-field{position:relative;display:block}
.pm .ui-field input{padding-block:13px;padding-inline:46px;min-height:48px;font-size:var(--ui-fs-md)}
.pm .ui-field input::-webkit-search-cancel-button,.pm .ui-field input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.pm .ui-field-ic{position:absolute;top:50%;inset-inline-start:16px;transform:translateY(-50%);opacity:.55;pointer-events:none}
.pm .ui-clear{position:absolute;top:50%;inset-inline-end:2px;transform:translateY(-50%);width:var(--ui-tap);height:var(--ui-tap);border:0;background:none;color:var(--mut);font-size:1.6rem;line-height:1;cursor:pointer;border-radius:50%;display:grid;place-items:center}
.pm .ui-clear:active{transform:translateY(-50%) scale(.9)}
.pm .ui-count{margin:0;font-size:var(--ui-fs-sm);font-weight:700;color:var(--mut);min-height:1.4em}
.pm .ui-count:empty{display:none}
.pm mark.ui-hl{background:color-mix(in srgb,var(--accent) 26%,transparent);color:inherit;border-radius:4px;padding:0 2px;box-decoration-break:clone}
.pm .pm-tagbar button{min-height:var(--ui-tap);padding-inline:var(--ui-s4);display:inline-flex;align-items:center;font-size:var(--ui-fs-sm)}
.pm .ui-none,.pm .ui-empty{display:grid;justify-items:center;gap:var(--ui-s2);text-align:center;padding:48px var(--ui-s4);color:var(--mut)}
.pm .ui-none b,.pm .ui-empty b{color:var(--ink);font-size:var(--ui-fs-lg);line-height:var(--ui-lh-snug)}
.pm .ui-none p,.pm .ui-empty p{margin:0;max-width:34ch;font-size:var(--ui-fs-sm);line-height:var(--ui-lh-body)}
.pm .ui-none svg,.pm .ui-empty svg{opacity:.7;margin-bottom:var(--ui-s2)}
.pm .ui-reset{margin-top:var(--ui-s3);min-height:var(--ui-tap);padding:0 var(--ui-s6);border:0;border-radius:var(--ui-r-pill);background:var(--ink);color:var(--bg);font-weight:800;font-size:var(--ui-fs-sm);cursor:pointer}
.pm .ui-empty-cat{margin:var(--ui-s3) 0;padding:var(--ui-s6) var(--ui-s4);text-align:center;color:var(--mut);font-size:var(--ui-fs-sm);border:1.5px dashed var(--line);border-radius:var(--ui-r-md)}

/* ---------- sticky nav: soft edges + touch targets ---------- */
.pm .ui-edges{--fl:0px;--fr:0px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.pm .ui-edges-y{--ft:0px;--fb:0px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ft),#000 calc(100% - var(--fb)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ft),#000 calc(100% - var(--fb)),transparent 100%);scroll-behavior:smooth;overscroll-behavior:contain}
.pm .pm-nav a,.pm .mn-tabs button,.pm .lg-filter button,.pm .tr-rail a,.pm .lg-bar button,.pm .pm-links a{min-height:var(--ui-tap)}
.pm .pm-links a{display:inline-flex;align-items:center}
.pm .tr-rail a{align-items:center}
.pm .pm-lang{min-height:var(--ui-tap)}.pm .pm-lang span{display:grid;place-items:center;min-width:40px}
.pm .pm-top{min-width:var(--ui-tap);min-height:var(--ui-tap);display:grid;place-items:center;bottom:calc(22px + env(safe-area-inset-bottom) + var(--ui-bottom))}
.pm.ui-has-cart .pm-top{bottom:calc(92px + env(safe-area-inset-bottom) + var(--ui-bottom))}
.pm.ui-lock{overflow:hidden}

/* ---------- customer cart: + / counter ---------- */
.pm .ui-qty{display:inline-flex;align-items:center;flex:none;border-radius:var(--ui-r-pill)}
.pm .ui-qty[hidden]{display:none}
.pm .ui-qty button,.pm .ui-row-qty button{position:relative;width:36px;height:36px;border:0;border-radius:50%;background:var(--ui-add-bg,var(--accent));color:var(--ui-add-ink,var(--on));font-weight:800;font-size:1.35rem;line-height:1;font-family:inherit;display:grid;place-items:center;cursor:pointer;padding:0}
.pm .ui-qty button::after,.pm .ui-row-qty button::after{content:"";position:absolute;inset:-4px}
.pm .ui-qty .ui-minus,.pm .ui-row-qty .ui-minus{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px currentColor}
.pm .ui-qty.has{background:var(--soft);padding:2px;gap:2px}
.pm .ui-n{min-width:28px;text-align:center;font-weight:900;font-size:var(--ui-fs-md);font-variant-numeric:tabular-nums}
.pm .ui-n[hidden],.pm .ui-minus[hidden]{display:none}
@keyframes ui-bump{40%{transform:scale(1.25)}}
.pm .ui-n.bump{animation:ui-bump .3s var(--ui-ease)}

/* floating cart bar */
.pm .ui-cartbar{position:fixed;inset-inline:0;margin-inline:auto;width:min(560px,calc(100% - 24px));bottom:calc(12px + env(safe-area-inset-bottom) + var(--ui-bottom));z-index:75}
.pm .ui-cartbar[hidden]{display:none}
@keyframes ui-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.pm .ui-cartbar:not([hidden]){animation:ui-up .35s var(--ui-ease) both}
.pm .ui-cartbar-btn{width:100%;min-height:54px;border:0;border-radius:var(--ui-r-pill);background:var(--ui-cart-bg,var(--ink));color:var(--ui-cart-ink,var(--bg));display:flex;align-items:center;gap:var(--ui-s3);padding:6px var(--ui-s4) 6px 6px;padding-inline:6px var(--ui-s4);font-weight:800;font-size:var(--ui-fs-md);cursor:pointer;box-shadow:var(--ui-sh-3)}
.pm .ui-cartbar-count{display:grid;place-items:center;min-width:42px;height:42px;border-radius:50%;background:var(--ui-cart-chip,var(--accent));color:var(--ui-cart-chip-ink,var(--on));font-weight:900}
.pm .ui-cartbar-label{flex:1;text-align:start}
.pm .ui-cartbar-total{font-variant-numeric:tabular-nums;white-space:nowrap}

/* bottom sheet */
.pm .ui-sheet{position:fixed;inset:0;z-index:150}
.pm .ui-sheet[hidden],.pm .ui-waiter[hidden]{display:none}
.pm .ui-sheet-back{position:absolute;inset:0;background:rgba(5,8,20,.55);animation:ui-fadein .25s both}
.pm .ui-sheet-panel{position:absolute;inset-inline:0;margin-inline:auto;bottom:0;width:min(560px,100%);max-height:88dvh;overflow:auto;background:var(--ui-sheet-bg,var(--card));color:var(--ink);border-radius:var(--ui-r-lg) var(--ui-r-lg) 0 0;padding:var(--ui-s4) var(--ui-s6) calc(var(--ui-s6) + env(safe-area-inset-bottom));box-shadow:var(--ui-sh-3);animation:ui-up .32s var(--ui-ease) both}
.pm .ui-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ui-s2)}
.pm .ui-sheet-head h2{margin:0;font-size:var(--ui-fs-xl);font-weight:900;line-height:var(--ui-lh-tight)}
.pm .ui-sheet-x{width:var(--ui-tap);height:var(--ui-tap);border:0;border-radius:50%;background:var(--soft);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer}
.pm .ui-cart-list{list-style:none;margin:0;padding:0}
.pm .ui-cart-list li{display:grid;grid-template-columns:1fr auto;gap:var(--ui-s1) var(--ui-s3);align-items:center;padding:var(--ui-s3) 0;border-bottom:1px solid var(--line)}
.pm .ui-row-main b{display:block;font-size:var(--ui-fs-md);line-height:var(--ui-lh-snug)}
.pm .ui-row-main small{color:var(--mut);font-size:var(--ui-fs-sm);font-variant-numeric:tabular-nums}
.pm .ui-row-qty{display:inline-flex;align-items:center;gap:2px}
.pm .ui-cart-empty{padding:var(--ui-s6) 0;text-align:center;color:var(--mut)}
.pm .ui-cart-note{margin:var(--ui-s3) 0 0;padding:var(--ui-s3);border-radius:var(--ui-r-md);background:var(--soft);color:var(--mut);font-size:var(--ui-fs-sm);line-height:var(--ui-lh-snug)}
.pm .ui-cart-sum{display:flex;align-items:baseline;justify-content:space-between;margin:var(--ui-s4) 0;font-weight:800}
.pm .ui-cart-sum b{font-size:var(--ui-fs-2xl);font-weight:900;font-variant-numeric:tabular-nums}
.pm .ui-cart-act{display:grid;grid-template-columns:1fr auto;gap:var(--ui-s2)}
.pm .ui-btn{min-height:50px;padding:0 var(--ui-s6);border:0;border-radius:var(--ui-r-pill);font-weight:800;font-size:var(--ui-fs-md);cursor:pointer}
.pm .ui-btn-main{background:var(--ui-add-bg,var(--accent));color:var(--ui-add-ink,var(--on))}
.pm .ui-btn-main:disabled{opacity:.45;cursor:not-allowed}
.pm .ui-btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}

/* "show the waiter" full-screen view: large, high contrast, no payment */
.pm .ui-waiter{position:fixed;inset:0;z-index:200;overflow:auto;background:var(--bg);color:var(--ink);padding:max(var(--ui-s6),env(safe-area-inset-top)) var(--ui-s4) calc(var(--ui-s6) + env(safe-area-inset-bottom))}
.pm .ui-waiter-in{max-width:560px;margin:0 auto;display:grid;gap:var(--ui-s4)}
.pm .ui-waiter header small{display:block;color:var(--mut);font-weight:700;font-size:var(--ui-fs-sm)}
.pm .ui-waiter h2{margin:0;font-size:var(--ui-fs-2xl);font-weight:900;line-height:var(--ui-lh-tight)}
.pm .ui-waiter-list{list-style:none;margin:0;padding:0;counter-reset:w}
.pm .ui-waiter-list li{display:grid;grid-template-columns:auto 1fr auto;gap:var(--ui-s3);align-items:baseline;padding:var(--ui-s3) 0;border-bottom:2px solid var(--line);font-size:var(--ui-fs-xl);font-weight:800;line-height:var(--ui-lh-snug)}
.pm .ui-waiter-list .q{min-width:2.4ch;color:var(--accent);font-weight:900}
.pm .ui-waiter-list .s{font-size:var(--ui-fs-md);color:var(--mut);font-variant-numeric:tabular-nums;font-weight:700}
.pm .ui-waiter-sum{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--ui-fs-xl);font-weight:800}
.pm .ui-waiter-sum b{font-size:2.2rem;font-weight:900;font-variant-numeric:tabular-nums}
.pm .ui-waiter-note{margin:0;padding:var(--ui-s3) var(--ui-s4);border-radius:var(--ui-r-md);background:var(--soft);font-weight:700;font-size:var(--ui-fs-sm);line-height:var(--ui-lh-snug)}

/* ---------- reduced motion: keep layout + state, drop movement ---------- */
@media(prefers-reduced-motion:reduce){
  .pm *,.pm *::before,.pm *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .pm .rv,.pm .pm-item.rv{opacity:1!important;transform:none!important}
  .pm img.ui-img:not(.is-loaded){animation:none}
  .pm .pm-item:not(.is-sold):active,.pm button:active,.pm nav a:active{transform:none!important}
}
@media print{.ui-cartbar,.ui-sheet,.ui-waiter,.ui-skip{display:none!important}}
.pm .ui-waiter h2[data-t]::after{content:" · " attr(data-t);font-weight:600;font-size:var(--ui-fs-md);color:var(--mut)}