/* --- assets/css/aydinpms-tokens.css  sha256:45b78643f4004d6e --- */

/*
 * AydinPMS public QR menu -- vendored design foundation.
 *
 * DO NOT EDIT BY HAND. Generated by tools/vendor_tokens.py.
 *
 * Source of truth (read-only; never modified by this project):
 *   C:\AydinPMS2\Documentation\Design\design-system\aydinpms.css
 *   sha256 = 7ef7891884cc55631079638734187d73c31756e0d7addf59be0623fe08d75d07
 *
 * Approved by AYDINPMS_WEB_DESIGN_SYSTEM_BRIEF.md sections 2, 6 and 7.
 *
 * Contains the token, reset, touch-target and preference/print layers
 * only. The staff app shell is intentionally NOT vendored: a guest
 * phone must not download sidebar, grid or toast CSS it can never use.
 */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* --- brand (AYDINPMS_WEB_DESIGN_SYSTEM_BRIEF.md §2) --- */
  --brand-navy:      #15233B;
  --brand-orange:    #F05A28;
  --brand-blue:      #3F5F93;
  --surface-dark:    #11141A;

  /* The brief sets --brand-orange as the primary CTA and requires the final
     colours to be checked against WCAG (§2, §7). White on #F05A28 measures
     3.39:1 — it fails AA for normal text. So the brand orange is kept for
     NON-TEXT accents (active rail, tab underline), where 3:1 against the
     adjacent surface is the applicable bar, and text-bearing surfaces use
     this darkened tone instead: white on #C2410C measures 4.93:1. Same hue
     family, same brand read, accessible. */
  --brand-orange-strong: #C2410C;

  /* --- surfaces --- */
  --surface:         #FFFFFF;
  --canvas:          #F4F6F9;
  --surface-sunken:  #EDF1F6;

  /* --- text --- */
  --text:            #172033;
  --text-muted:      #5A6577;
  --text-on-dark:    #F7F9FC;
  --text-on-brand:   #FFFFFF;

  /* --- status. Never used alone: always paired with an icon and a word
         (brief §4, "never rely on color alone"). --- */
  --success:         #0F6B41;
  --warning:         #B36F00;
  --danger:          #A82D2D;
  --success-soft:    #E6F4EC;
  --warning-soft:    #FDF4E3;
  --danger-soft:     #FBEAEA;
  --info-soft:       #E8EEF7;

  /* --- lines --- */
  --line:            #DFE5EC;
  --line-strong:     #C3CDD9;

  /* --- spacing: 4px base, named by step so screens never invent values --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;

  /* --- radius --- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* --- elevation --- */
  --shadow-1: 0 1px 2px rgba(23,32,51,.06), 0 1px 3px rgba(23,32,51,.08);
  --shadow-2: 0 4px 12px rgba(23,32,51,.10);
  --shadow-3: 0 12px 32px rgba(23,32,51,.18);

  /* --- typography ---
     Segoe UI and Roboto both carry complete Azerbaijani coverage. The stack
     ends in a generic so a missing glyph never falls back to a box. */
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px;
  --fs-xl: 20px; --fs-2xl: 26px;

  /* Azerbaijani stacks diacritics above capitals (Ə, Ğ, İ, Ö, Ş, Ü). 1.5 is
     the minimum that clears them at every size we ship. */
  --lh-tight: 1.35;
  --lh:       1.5;

  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Kill-switch: set to `none` to disable every uppercase transform. */
  --micro-transform: uppercase;

  /* --- layout --- */
  --sidebar-w: 264px;
  --topbar-h: 56px;
  --content-max: 1440px;

  /* --- focus. 3:1 against both canvas and navy. --- */
  --focus: #0A66C2;
  --focus-ring: 0 0 0 3px rgba(10,102,194,.35);

  --tap-min: 44px;   /* brief §3: touch targets */
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh);
  color: var(--text);
  background: var(--canvas);
  /* Azerbaijani text must never be auto-hyphenated: it breaks compound
     operational terms mid-word. */
  hyphens: none;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: var(--fw-semibold); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--s3); }

a { color: var(--brand-blue); }
a:hover { color: var(--brand-navy); }

/* Visible focus everywhere, on every focusable thing, keyboard or not.
   :focus-visible alone hides focus from some AT and from Windows high
   contrast; we keep both and merely soften the mouse case. */
:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline-color: transparent; box-shadow: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: var(--focus-ring); }

/* Screen-reader-only, but focusable (skip links). */
.aps-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.aps-skip {
  position: absolute; left: var(--s3); top: -100px; z-index: 100;
  background: var(--surface); color: var(--brand-navy);
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); font-weight: var(--fw-semibold);
  transition: top .12s ease;
}
.aps-skip:focus { top: var(--s3); }


/* --- pointer-based target sizing ---------------------------------
   The brief requires 44x44 touch targets (§3). Compact variants (.aps-btn--sm,
   the script-generated history buttons, inline breadcrumb links) are fine at
   desktop density with a mouse, but must grow on a touch device. Keying this
   off the POINTER rather than the viewport is what actually matters: a 1280px
   tablet needs big targets, a 700px desktop window does not.
   Inline text links keep a 24px minimum everywhere (WCAG 2.2 target size). */
.aps-breadcrumb a { display: inline-block; min-height: 24px; padding-block: 2px; }

@media (pointer: coarse) {
  .aps-btn, .aps-btn--sm, button.secondary,
  .aps-tab, .aps-breadcrumb a, .aps-nav__link {
    min-height: var(--tap-min);
  }
  .aps-btn--sm, button.secondary { padding-inline: var(--s4); }
}


/* ============================================================
   10. PREFERENCES / PRINT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (prefers-contrast: more) {
  :root { --line: #8A94A2; --line-strong: #5A6472; --text-muted: #4A5462; }
}

/* Windows high-contrast: keep focus and active state visible when the OS
   replaces our colors with system ones. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
  .aps-nav__link[aria-current="page"] { border-left-color: Highlight; }
  .aps-badge, .aps-alert { border: 1px solid CanvasText; }
}

@media print {
  .aps-topbar, .aps-sidebar, .aps-toolbar, .aps-scrim, .aps-toasts, .no-print { display: none !important; }
  body { background: #fff; }
  .aps-main { padding: 0; max-width: none; }
  .aps-card { box-shadow: none; border-color: #999; break-inside: avoid; }
  .aps-table th { position: static; }
}

/* --- assets/css/menu.css  sha256:561e72f6afbf3c6c --- */

/*
 * AydinPMS public QR menu -- component layer.
 *
 * Loads AFTER aydinpms-tokens.css and uses only tokens from it, so the
 * public menu and the staff applications stay one visual system.
 *
 * Phone first. Every rule below is written for a 360px viewport and then
 * relaxed upward; there is no desktop-first block anywhere in this file.
 *
 * Prefix: .pm- (public menu), so it can never collide with the staff .aps-
 * shell if the two are ever loaded together.
 */

/* ============================================================
   1. PAGE FRAME
   ============================================================ */
/* The hidden attribute must win over every component's own display value.
   Author rules beat the UA's [hidden] rule regardless of specificity, so
   without this any styled element that sets `display` ignores `hidden`
   entirely -- which is how the table-number slot first shipped visible with
   no table id present. JS toggles visibility with el.hidden and nothing
   else, so this one rule is the whole contract. */
[hidden] { display: none !important; }

body {
  background: var(--canvas);
  /* Room for the sticky filter bar's shadow, and for iOS home indicators. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.pm-page {
  max-width: 760px;
  margin: 0 auto;
  background: var(--canvas);
}

.pm-section-pad { padding: 0 var(--s4); }

@media (min-width: 600px) {
  .pm-section-pad { padding: 0 var(--s6); }
}



/* ============================================================
   3. HERO
   ============================================================ */
.pm-hero {
  position: relative;
  background: var(--brand-navy);
  color: var(--text-on-dark);
  padding: var(--s6) var(--s4) var(--s7);
  text-align: center;
  overflow: hidden;
}

/* A quiet, geometric warmth rather than a stock photograph: the brief
   requires hotel-owned or licensed imagery, which this project does not
   have, so the hero must look intentional with no photo at all. */
.pm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(240, 90, 40, .22), transparent 60%),
    linear-gradient(180deg, #1B2C49 0%, var(--brand-navy) 100%);
}
.pm-hero > * { position: relative; }

.pm-hero__mark {
  width: 44px; height: 44px;
  margin: 0 auto var(--s3);
  border-radius: var(--r-pill);
  border: 2px solid var(--brand-orange);
  display: grid; place-items: center;
  font-size: var(--fs-lg);
}

.pm-hero__name {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: .2px;
}

.pm-hero__tagline {
  margin: var(--s2) 0 0;
  color: rgba(247, 249, 252, .82);
  font-size: var(--fs-lg);
}

.pm-hero__updated {
  margin: var(--s4) 0 0;
  font-size: var(--fs-xs);
  color: rgba(247, 249, 252, .68);
}

/* ============================================================
   4. LANGUAGE SWITCH
   Real links to real pages, so the menu still switches language with
   JavaScript disabled and each language is separately indexable.
   ============================================================ */
.pm-langbar {
  display: flex;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s5);
}

.pm-lang {
  min-width: 56px;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s3);
  border-radius: var(--r-pill);
  border: 1px solid rgba(247, 249, 252, .42);
  background: transparent;
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.pm-lang:hover { background: rgba(255, 255, 255, .12); color: var(--text-on-dark); }
.pm-lang[aria-current="true"] {
  background: var(--surface);
  border-color: var(--surface);
  color: var(--brand-navy);
  font-weight: var(--fw-bold);
}

/* ============================================================
   5. SERVICE NOTICE
   The permanent "view only, order through your waiter" message. It is a
   structural part of the page, never a dismissible toast.
   ============================================================ */
.pm-notice {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  margin: calc(var(--s5) * -1) var(--s4) 0;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--brand-orange);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-md);
  color: var(--text);
}
.pm-notice__ico { flex: 0 0 auto; font-size: var(--fs-xl); line-height: 1.1; }
.pm-notice p { margin: 0; }
.pm-notice__table {
  display: block;
  margin-top: var(--s2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.pm-notice__table b { color: var(--text); font-weight: var(--fw-semibold); }

/* ============================================================
   6. STICKY CONTROL BAR -- search + categories
   Only this bar sticks. The hero scrolls away so a 360x800 phone keeps
   as much of the menu on screen as possible.
   ============================================================ */
.pm-controls {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  padding-top: var(--s4);
  margin-top: var(--s5);
}
.pm-controls--stuck { box-shadow: var(--shadow-2); }

.pm-search { position: relative; margin: 0 var(--s4) var(--s3); }

.pm-search__input {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--s2) 44px var(--s2) 40px;
  font-family: inherit;
  font-size: var(--fs-lg);   /* >=16px stops iOS zooming the page on focus */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
}
.pm-search__input::placeholder { color: var(--text-muted); }
.pm-search__ico {
  position: absolute;
  inset-inline-start: var(--s3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: var(--fs-lg);
}
.pm-search__clear {
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xl);
  cursor: pointer;
}
.pm-search__clear:hover { background: var(--surface-sunken); color: var(--text); }
.pm-search--filled .pm-search__clear { display: flex; }

/* Horizontal category rail. Scroll snapping keeps a chip from being cut in
   half, which is the usual failure of this pattern on a narrow phone. */
.pm-cats {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding: 0 var(--s4) var(--s3);
  -webkit-overflow-scrolling: touch;
}
.pm-cats::-webkit-scrollbar { height: 4px; }
.pm-cats::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }

.pm-cat {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s4);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.pm-cat:hover { border-color: var(--brand-blue); color: var(--brand-navy); }
.pm-cat[aria-current="true"] {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: var(--text-on-brand);
  font-weight: var(--fw-semibold);
}

/* ============================================================
   7. RESULT STATUS
   ============================================================ */
.pm-status {
  margin: var(--s4) var(--s4) 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.pm-empty {
  margin: var(--s6) var(--s4);
  padding: var(--s7) var(--s5);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--text-muted);
}
.pm-empty strong { display: block; color: var(--text); margin-bottom: var(--s2); }

/* ============================================================
   8. CATEGORY SECTIONS
   ============================================================ */
.pm-cat-section { padding-top: var(--s6); }

/* Anchor targets sit under the sticky bar unless we push them down.
   136px is the bar at its tallest: search row plus category rail. */
.pm-cat-section { scroll-margin-top: 136px; }

.pm-cat-head { padding: 0 var(--s4) var(--s3); }
.pm-cat-title {
  font-size: var(--fs-xl);
  color: var(--brand-navy);
  font-weight: var(--fw-bold);
}
.pm-cat-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: var(--s2);
  border-radius: 2px;
  background: var(--brand-orange);
}
.pm-cat-desc {
  margin: var(--s3) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.pm-items {
  list-style: none;
  margin: 0;
  padding: 0 var(--s4);
  display: grid;
  gap: var(--s3);
}

@media (min-width: 700px) {
  .pm-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .pm-cat-head { padding-inline: var(--s6); }
  .pm-items { padding-inline: var(--s6); }
}

/* ============================================================
   9. ITEM CARD

   Text first. A picture is optional and always has been: most items carry
   none, and the first public release carries none at all. A card without one
   is the normal case, not a degraded case, so it gets the full width and no
   placeholder, no empty frame and no "photo coming soon".

   The image column is opted INTO by .pm-item--media. It used to be declared
   on every card as `minmax(0, 1fr) auto`, which meant a text-only card
   computed to `278px 0px` -- with the 16px column gap still sitting between
   the tracks, because a gap is placed between tracks whether or not the
   second one holds anything. Every text-only card was quietly giving up 16px
   of a 360px screen to a column that was not there.
   ============================================================ */
.pm-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

/* Only when the item actually has a picture: text left, thumbnail right, so
   a slow image never pushes the name and price around. */
.pm-item--media { grid-template-columns: minmax(0, 1fr) auto; }

.pm-item__body { min-width: 0; }

.pm-item__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text);
  /* Azerbaijani compounds must not be hyphenated apart (tokens set
     hyphens:none globally); allow a long word to break rather than
     overflow the card on a 360px screen. */
  overflow-wrap: anywhere;
}

.pm-item__desc {
  margin: var(--s2) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh);
}

.pm-item__prices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s3);
}
.pm-price { display: flex; align-items: baseline; gap: var(--s2); }
.pm-price__label { font-size: var(--fs-xs); color: var(--text-muted); }
.pm-price__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--brand-navy);
  white-space: nowrap;
}

.pm-item__media {
  width: 96px;
  height: 96px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
}
.pm-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 480px) {
  .pm-item__media { width: 116px; height: 116px; }
}

/* ---- tags: allergens, diet, heat, availability -------------------
   Every tag carries a word. The symbol is decoration; remove it and the
   card still reads correctly, which is what "never colour or icon alone"
   actually requires. */
.pm-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s3) 0 0;
  padding: 0;
}
.pm-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--s2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  line-height: 1.4;
  background: var(--surface-sunken);
  color: var(--text-muted);
  border: 1px solid var(--line);
}
.pm-tag__sym { font-size: var(--fs-xs); }
.pm-tag--allergen { background: var(--warning-soft); border-color: #E4CFA0; color: #6B4400; }
.pm-tag--diet     { background: var(--success-soft); border-color: #B9DCC8; color: #0B5533; }
.pm-tag--heat     { background: var(--danger-soft);  border-color: #E8C2C2; color: #8A2B2B; }

.pm-item__unavailable {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* An unavailable item stays fully legible: only the picture and the price
   are muted, never the text a guest needs to read. */
.pm-item--out .pm-item__media { opacity: .45; }
.pm-item--out .pm-price__value { color: var(--text-muted); text-decoration: line-through; }

/* ============================================================
   9b. NOT-FOUND PAGE
   One document in all three languages: a guest who mistypes should not
   have to guess which language the error is in. No inline styles here --
   the CSP has no 'unsafe-inline' and would block them.
   ============================================================ */
.pm-404 { padding: var(--s6) var(--s4) var(--s8); }
.pm-404__block { margin-bottom: var(--s7); }
.pm-404__block:last-child { margin-bottom: 0; }
.pm-404__block p { margin-bottom: var(--s4); }

/* ============================================================
   10. FOOTER
   ============================================================ */
.pm-foot {
  margin-top: var(--s8);
  padding: var(--s6) var(--s4) var(--s7);
  background: var(--brand-navy);
  color: rgba(247, 249, 252, .84);
  font-size: var(--fs-sm);
  line-height: var(--lh);
}
.pm-foot__name {
  color: var(--text-on-dark);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--s3);
}
.pm-foot p { margin: 0 0 var(--s3); }
.pm-foot p:last-child { margin-bottom: 0; }

.pm-legend {
  margin: var(--s5) 0 0;
  padding: var(--s4) 0 0;
  border-top: 1px solid rgba(247, 249, 252, .22);
}
.pm-legend h2 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-on-dark);
  margin-bottom: var(--s3);
}
.pm-legend ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-size: var(--fs-xs);
}
.pm-legend li { display: flex; align-items: center; gap: 6px; }

.pm-version {
  margin-top: var(--s5);
  font-size: var(--fs-xs);
  color: rgba(247, 249, 252, .62);
  font-family: var(--font-mono);
}

/* ============================================================
   11. NO-SCRIPT AND FALLBACKS
   The menu is fully server-rendered, so the only thing JavaScript adds is
   live search. When it is unavailable the search box is hidden rather than
   left there pretending to work.
   ============================================================ */

/* ============================================================
   12. PRINT
   Staff print this to check a new menu version on paper before the QR
   codes go out on the tables.
   ============================================================ */
@media print {
  .pm-controls, .pm-langbar, .pm-hero::before { display: none !important; }
  body, .pm-page { background: #fff; }
  .pm-hero, .pm-foot { background: #fff; color: #000; }
  .pm-hero__name, .pm-foot__name { color: #000; }
  .pm-hero__tagline, .pm-hero__updated, .pm-foot, .pm-legend h2 { color: #333; }
  .pm-item { break-inside: avoid; box-shadow: none; border-color: #999; }
  .pm-cat-section { break-before: auto; }
  .pm-item__media { display: none; }
}