.menu-item > .pizza-photo-trigger { grid-column: 2; grid-row: 1; display: grid; width: 112px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #813c32; font: inherit; appearance: none; cursor: zoom-in; text-align: center; justify-self: end; }
.pizza-photo-trigger img { width: 112px; height: 112px; object-fit: cover; border-radius: 4px; }
.pizza-photo-trigger span { padding-top: 5px; font: 600 11px/1.3 sans-serif; text-decoration: underline; text-underline-offset: 2px; }
.pizza-photo-trigger:focus-visible { outline: 3px solid #8b3d31; outline-offset: 5px; }
@media(max-width:700px){.menu-item > .pizza-photo-trigger,.pizza-photo-trigger img{width:90px}.pizza-photo-trigger img{height:90px}.pizza-photo-trigger span{font-size:10px}}
.pizza-viewer { width: min(920px, calc(100vw - 24px)); max-width: 920px; max-height: min(94dvh, 1000px); padding: 16px; border: 1px solid #d6baa3; border-radius: 18px; background: #f8efe1; color: #452720; box-shadow: 0 28px 80px #1f0e0bab; }
.pizza-viewer::backdrop { background: #170f0dcc; backdrop-filter: blur(7px); }
.pizza-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
.pizza-viewer-top, .pizza-viewer-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pizza-viewer-top strong { font-size: clamp(19px, 3vw, 28px); text-transform: uppercase; line-height: 1.1; }
.pizza-viewer button { min-height: 44px; min-width: 44px; border: 1px solid #9d6d5f; border-radius: 999px; background: #fff9ee; color: #78382f; font: inherit; cursor: pointer; }
.pizza-viewer button:focus-visible { outline: 3px solid #963f31; outline-offset: 3px; }
.pizza-viewer-close { font-size: 24px !important; }
.pizza-viewer-image { display: block; width: 100%; max-height: calc(94dvh - 145px); min-height: 0; object-fit: contain; background: #eee0cc; border-radius: 10px; }
.pizza-viewer-controls button { padding: 8px 16px; }
.pizza-viewer-count { color: #715d53; font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .pizza-viewer { padding: 10px; max-height: 96dvh; } .pizza-viewer-image { max-height: calc(96dvh - 135px); } .pizza-viewer-controls button { padding: 8px 10px; } }
@media (prefers-reduced-motion: no-preference) { .pizza-viewer[open] { animation: viewer-in .18s ease-out; } @keyframes viewer-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } } }