:root {
  --hop-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hop-space-1: .25rem;
  --hop-space-2: .5rem;
  --hop-space-3: .75rem;
  --hop-space-4: 1rem;
  --hop-space-5: 1.25rem;
  --hop-space-6: 1.5rem;
  --hop-space-8: 2rem;
  --hop-space-10: 2.5rem;
  --hop-space-12: 3rem;
  --hop-radius-sm: .65rem;
  --hop-radius-md: .95rem;
  --hop-radius-lg: 1.35rem;
  --hop-radius-xl: 1.8rem;
  --hop-radius-pill: 999px;
  --hop-shadow-xs: 0 1px 2px rgba(31, 24, 18, .06);
  --hop-shadow-sm: 0 8px 22px rgba(31, 24, 18, .08);
  --hop-shadow-md: 0 18px 48px rgba(31, 24, 18, .12);
  --hop-shadow-focus: 0 0 0 4px rgba(187, 30, 40, .16);
  --hop-duration-fast: 140ms;
  --hop-duration-base: 220ms;
  --hop-ease: cubic-bezier(.2, .8, .2, 1);
  --hop-safe-top: env(safe-area-inset-top, 0px);
  --hop-safe-right: env(safe-area-inset-right, 0px);
  --hop-safe-bottom: env(safe-area-inset-bottom, 0px);
  --hop-safe-left: env(safe-area-inset-left, 0px);
  --hop-touch-min: 44px;
  /*
   * HOP responsive layout contract v178
   * Phone:            0-699px
   * iPad portrait:    700-900px + portrait
   * iPad landscape:   901-1366px + landscape
   * Desktop:          1367px+
   *
   * Split-screen widths below 700px intentionally use the phone layout.
   */
  --hop-layout-mode: phone;
  --hop-page-max: 1180px;
  --hop-content-readable: 720px;
  --hop-page-gutter: clamp(10px, 3.5vw, 18px);
  --hop-grid-gap: 12px;
  --hop-header-height: 66px;
  --hop-bottom-nav-height: 72px;
  --hop-side-nav-width: 0px;
  --hop-panel-width: min(92vw, 420px);
  --hop-modal-width: min(94vw, 560px);
  --hop-drawer-width: min(94vw, 440px);
  --hop-card-min: 250px;
  --hop-card-max: 390px;
  --hop-food-ratio: 4 / 3;
  --hop-viewport-height: 100vh;
  --hop-bg: #f7f3ec;
  --hop-surface: #fff;
  --hop-surface-soft: #fbf8f2;
  --hop-text: #211f1c;
  --hop-muted: #706b63;
  --hop-border: #e7e0d6;
  --hop-primary: #bb1e28;
  --hop-primary-strong: #941720;
  --hop-primary-soft: #fff0ee;
  --hop-success: #187447;
  --hop-success-soft: #eaf8f0;
  --hop-warning: #a55b08;
  --hop-warning-soft: #fff5df;
  --hop-error: #b4232d;
  --hop-error-soft: #ffeded;
  --hop-info: #2563a5;
  --hop-info-soft: #eaf3ff;
  --hop-gold: #b88921;
}

[data-hop-product="club"] {
  --hop-bg: #f8f1e6;
  --hop-surface: #fffdf9;
  --hop-surface-soft: #fbf5eb;
  --hop-text: #281b18;
  --hop-muted: #78675f;
  --hop-border: #eadbd0;
  --hop-primary: #c8202d;
  --hop-primary-strong: #9e1721;
  --hop-primary-soft: #ffefed;
  --hop-shadow-focus: 0 0 0 4px rgba(200, 32, 45, .17);
}

[data-hop-product="staff"] {
  --hop-bg: #eef4f3;
  --hop-surface: #fff;
  --hop-surface-soft: #f5f9f8;
  --hop-text: #17312d;
  --hop-muted: #61736f;
  --hop-border: #d7e3e0;
  --hop-primary: #126452;
  --hop-primary-strong: #0b4b3d;
  --hop-primary-soft: #e5f4ef;
  --hop-shadow-focus: 0 0 0 4px rgba(18, 100, 82, .16);
}

[data-hop-product="sellpoint"] {
  --hop-bg: #edf0f3;
  --hop-surface: #fff;
  --hop-surface-soft: #f4f6f8;
  --hop-text: #12202b;
  --hop-muted: #5c6974;
  --hop-border: #d7dee4;
  --hop-primary: #124c6b;
  --hop-primary-strong: #0b374f;
  --hop-primary-soft: #e5f3fa;
  --hop-success: #087746;
  --hop-warning: #a75a00;
  --hop-error: #b6202d;
  --hop-shadow-focus: 0 0 0 4px rgba(18, 76, 107, .2);
}

.hop-product {
  min-width: 0;
  min-height: var(--hop-viewport-height);
  background: var(--hop-bg);
  color: var(--hop-text);
  font-family: var(--hop-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.hop-product *,
.hop-product *::before,
.hop-product *::after {
  box-sizing: border-box;
}

.hop-product :where(button, input, select, textarea) {
  font: inherit;
}

.hop-product :where(button, a, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--hop-shadow-focus);
}

.hop-product :where(button, [role="button"], a) {
  -webkit-tap-highlight-color: transparent;
}

.hop-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: var(--hop-space-3);
}

.hop-brand img {
  display: block;
  width: auto;
  height: 42px;
  max-width: min(220px, 58vw);
}

.hop-control {
  width: 100%;
  min-height: var(--hop-touch-min);
  border: 1px solid var(--hop-border);
  border-radius: var(--hop-radius-md);
  background: var(--hop-surface);
  color: var(--hop-text);
  padding: .75rem .9rem;
  transition: border-color var(--hop-duration-fast), box-shadow var(--hop-duration-fast), background var(--hop-duration-fast);
}

.hop-control:hover {
  border-color: color-mix(in srgb, var(--hop-border), var(--hop-primary) 24%);
}

.hop-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hop-space-2);
  min-height: var(--hop-touch-min);
  border: 1px solid transparent;
  border-radius: var(--hop-radius-md);
  padding: .72rem 1rem;
  background: var(--hop-surface);
  color: var(--hop-text);
  font-weight: 760;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--hop-duration-fast) var(--hop-ease), background var(--hop-duration-fast), border-color var(--hop-duration-fast);
}

.hop-button:hover {
  border-color: var(--hop-border);
}

.hop-button:active {
  transform: translateY(1px) scale(.99);
}

.hop-button.primary {
  background: var(--hop-primary);
  color: #fff;
}

.hop-button.primary:hover {
  background: var(--hop-primary-strong);
}

.hop-button.ghost {
  background: transparent;
  border-color: var(--hop-border);
}

.hop-button.danger {
  background: var(--hop-error-soft);
  color: var(--hop-error);
}

.hop-card {
  border: 1px solid var(--hop-border);
  border-radius: var(--hop-radius-lg);
  background: var(--hop-surface);
  box-shadow: var(--hop-shadow-xs);
}

.hop-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .28rem .62rem;
  border-radius: var(--hop-radius-pill);
  background: var(--hop-surface-soft);
  color: var(--hop-muted);
  font-size: .76rem;
  font-weight: 760;
  letter-spacing: .01em;
}

.hop-badge.success { background: var(--hop-success-soft); color: var(--hop-success); }
.hop-badge.warning { background: var(--hop-warning-soft); color: var(--hop-warning); }
.hop-badge.error { background: var(--hop-error-soft); color: var(--hop-error); }
.hop-badge.info { background: var(--hop-info-soft); color: var(--hop-info); }

.hop-empty,
.hop-error-state {
  display: grid;
  justify-items: center;
  gap: var(--hop-space-3);
  padding: var(--hop-space-10) var(--hop-space-6);
  border: 1px dashed var(--hop-border);
  border-radius: var(--hop-radius-lg);
  background: var(--hop-surface-soft);
  color: var(--hop-muted);
  text-align: center;
}

.hop-empty strong,
.hop-error-state strong {
  color: var(--hop-text);
  font-size: 1rem;
}

.hop-error-state {
  background: var(--hop-error-soft);
  color: var(--hop-error);
}

.hop-skeleton {
  position: relative;
  overflow: hidden;
  min-height: 1rem;
  border-radius: var(--hop-radius-sm);
  background: color-mix(in srgb, var(--hop-border), transparent 24%);
}

.hop-skeleton::after {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  content: "";
  animation: hop-skeleton 1.25s infinite;
}

.hop-responsive-page {
  width: min(calc(100% - (2 * var(--hop-page-gutter))), var(--hop-page-max));
  margin-inline: auto;
}

.hop-responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hop-card-min)), 1fr));
  gap: var(--hop-grid-gap);
}

.hop-readable {
  max-width: var(--hop-content-readable);
}

@supports (height: 100dvh) {
  :root { --hop-viewport-height: 100dvh; }
}

@media (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {
  :root {
    --hop-layout-mode: ipad-portrait;
    --hop-page-max: 820px;
    --hop-content-readable: 680px;
    --hop-page-gutter: clamp(20px, 3.2vw, 30px);
    --hop-grid-gap: clamp(13px, 1.8vw, 18px);
    --hop-header-height: 70px;
    --hop-bottom-nav-height: 68px;
    --hop-side-nav-width: 0px;
    --hop-panel-width: min(86vw, 660px);
    --hop-modal-width: min(88vw, 700px);
    --hop-drawer-width: min(82vw, 620px);
    --hop-card-min: 300px;
    --hop-card-max: 390px;
  }
}

@media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape) {
  :root {
    --hop-layout-mode: ipad-landscape;
    --hop-page-max: 1366px;
    --hop-content-readable: 700px;
    --hop-page-gutter: clamp(16px, 2vw, 28px);
    --hop-grid-gap: clamp(12px, 1.45vw, 20px);
    --hop-header-height: 72px;
    --hop-bottom-nav-height: 0px;
    --hop-side-nav-width: 92px;
    --hop-panel-width: clamp(286px, 29vw, 360px);
    --hop-modal-width: min(86vw, 980px);
    --hop-drawer-width: clamp(340px, 36vw, 460px);
    --hop-card-min: 230px;
    --hop-card-max: 360px;
  }
}

@media (min-width: 1367px) {
  :root {
    --hop-layout-mode: desktop;
    --hop-page-max: 1560px;
    --hop-content-readable: 760px;
    --hop-page-gutter: clamp(20px, 2.2vw, 38px);
    --hop-grid-gap: clamp(14px, 1.25vw, 22px);
    --hop-header-height: 76px;
    --hop-bottom-nav-height: 0px;
    --hop-side-nav-width: 104px;
    --hop-panel-width: clamp(320px, 27vw, 420px);
    --hop-modal-width: min(82vw, 1080px);
    --hop-drawer-width: clamp(380px, 34vw, 520px);
    --hop-card-min: 250px;
    --hop-card-max: 380px;
  }
}

@keyframes hop-skeleton {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .hop-product *,
  .hop-product *::before,
  .hop-product *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}