html, body { margin: 0; padding: 0; background: #2A1C4A; }
#root { height: 100%; }
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { width: 0; height: 0; }
a { color: var(--text-brand); }
a:hover { color: var(--plum-600); }

@keyframes kioskRipple { 0% { transform: scale(.6); opacity: .55 } 100% { transform: scale(2.6); opacity: 0 } }
@keyframes kioskRise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes kioskFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes kioskSheet { from { transform: translateY(40px); opacity: 0 } to { transform: none; opacity: 1 } }

/* Orientation is LAYOUT, not state: driven by media queries, so rotating the
   kiosk never triggers a React re-render. Forced modes use .lay-rail / .lay-chips. */
.lay-rail.k-browse { flex-direction: row !important; }
.lay-rail .k-rail { flex-direction: column !important; flex: 0 0 clamp(160px,15vw,240px) !important; border-bottom: none !important; border-right: 1px solid var(--border-default) !important; }
.lay-rail .k-cat { flex: 1 1 0 !important; flex-direction: row !important; justify-content: flex-start !important; gap: 12px !important; text-align: left !important; }

.det-fullscreen.k-scrim { justify-content: stretch !important; }
.det-fullscreen .k-sheet { height: 100% !important; border-radius: 0 !important; }

/* Tall landscape (a real 32in kiosk turned sideways) gets the vertical rail.
   Short landscape windows keep the chip row, which always fits. */
@media (orientation: landscape) and (min-height: 700px) {
  .lay-auto.k-browse { flex-direction: row !important; }
  .lay-auto .k-rail { flex-direction: column !important; flex: 0 0 clamp(160px,15vw,240px) !important; border-bottom: none !important; border-right: 1px solid var(--border-default) !important; }
  .lay-auto .k-cat { flex: 1 1 0 !important; flex-direction: row !important; justify-content: flex-start !important; gap: 12px !important; text-align: left !important; }
}

@media (orientation: landscape) {
  .k-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
  .k-detailbody { flex-direction: row !important; }
  .k-media { flex: 1 !important; }
  .k-sheet { height: 100% !important; border-radius: 0 !important; }
  .k-opts { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }
}