/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #EFE8DC; color: #1A1410; font-family: 'Geist', sans-serif; -webkit-font-smoothing: antialiased; }
.display { font-family: 'Fraunces', serif; font-optical-sizing: auto; font-variation-settings: 'SOFT' 30; letter-spacing: -0.02em; }
.num { font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.label { font-family: 'Geist Mono', monospace; text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; color: #A08F7E; }
.btn { background: #1A1410; color: #EFE8DC; border: none; padding: 12px 20px; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: all 160ms ease; }
.btn:hover { background: #4A1220; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-ghost { background: transparent; color: #1A1410; border: 1px solid #1A1410; }
.btn-ghost:hover { background: #1A1410; color: #EFE8DC; }
.btn-wine { background: #6B1D2C; }
.btn-wine:hover { background: #4A1220; }
.btn-sm { padding: 8px 14px; font-size: 10px; }
.input, .textarea { background: transparent; border: none; border-bottom: 1px solid #D8CBB6; padding: 10px 0; font-family: 'Geist', sans-serif; font-size: 14px; color: #1A1410; width: 100%; outline: none; transition: border-color 200ms ease; }
.input:focus, .textarea:focus { border-color: #6B1D2C; }
.input::-moz-placeholder, .textarea::-moz-placeholder { color: #A08F7E; }
.input::placeholder, .textarea::placeholder { color: #A08F7E; }
.textarea { resize: vertical; min-height: 88px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #D8CBB6; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: all 160ms ease; background: transparent; color: #1A1410; }
.chip:hover { border-color: #1A1410; }
.chip.on { background: #1A1410; color: #EFE8DC; border-color: #1A1410; }
.card { background: #F5EFE3; border: 1px solid #D8CBB6; padding: 28px; position: relative; }
.card-ink { background: #1A1410; color: #EFE8DC; border-color: #1A1410; }
.card-wine { background: #6B1D2C; color: #EFE8DC; border-color: #6B1D2C; }
.hair { height: 1px; background: #D8CBB6; width: 100%; }
.spinner { width: 14px; height: 14px; border: 1.5px solid #D8CBB6; border-top-color: #1A1410; border-radius: 50%; animation: spin 700ms linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.fade { animation: fade 500ms ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.stagger > * { animation: fade 500ms ease-out backwards; }
.stagger > *:nth-child(1) { animation-delay: 60ms; }
.stagger > *:nth-child(2) { animation-delay: 160ms; }
.stagger > *:nth-child(3) { animation-delay: 260ms; }
.stagger > *:nth-child(4) { animation-delay: 360ms; }
.stagger > *:nth-child(5) { animation-delay: 460ms; }
.stagger > *:nth-child(6) { animation-delay: 560ms; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(26,20,16,0.45); z-index: 100; animation: fade 200ms ease-out; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 640px; max-width: 94vw; background: #EFE8DC; border-left: 1px solid #1A1410; z-index: 101; overflow-y: auto; animation: slideIn 320ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border: 1px solid #D8CBB6; background: #EFE8DC; cursor: pointer; font-family: 'Geist Mono', monospace; font-size: 16px; transition: all 160ms ease; z-index: 10; }
.drawer-close:hover { background: #1A1410; color: #EFE8DC; }
.drop-cap { float: left; font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 30; font-size: 96px; line-height: 0.85; margin: 4px 12px -4px 0; color: #6B1D2C; font-weight: 300; }
.msg-in, .msg-out { padding: 14px 18px; margin-bottom: 10px; max-width: 78%; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.msg-in { background: #F5EFE3; border: 1px solid #D8CBB6; align-self: flex-start; border-radius: 0 12px 12px 12px; }
.msg-out { background: #1A1410; color: #EFE8DC; align-self: flex-end; border-radius: 12px 12px 0 12px; margin-left: auto; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(26,20,16,0.55); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 40px; animation: fade 200ms ease-out; }
.modal-box { background: #EFE8DC; border: 1px solid #1A1410; width: 620px; max-width: 100%; max-height: 92vh; overflow-y: auto; animation: fade 300ms ease-out; }
::-moz-selection { background: #6B1D2C; color: #EFE8DC; }
::selection { background: #6B1D2C; color: #EFE8DC; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
table { border-collapse: collapse; }

/* ---- Responsive breakpoints ---- */
/* Layout shifts at three widths: mobile (<640), tablet (640-1024), desktop (>1024) */
/* Most pages use inline styles with grid templates assuming desktop. These media */
/* queries provide a coarse fallback that prevents the worst mobile failure modes. */
/* Per-page polish — collapsing tables, reflowing dashboard widgets — is a P1 follow-up. */

@media (max-width: 640px) {
  /* Single-column override for any 2-3 column dashboard grids */
  body { font-size: 14px; }

  /* Force grids to single column on phone */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Cards stack with reduced padding on mobile */
  .card {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }

  /* Tables become horizontally scrollable rather than overflowing the viewport */
  table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100vw; }

  /* Reduce display heading sizes */
  .display { font-size: 22px !important; line-height: 1.15 !important; }

  /* Page padding tightens on mobile */
  .page-shell, [class*="shell"] { padding: 16px !important; }

  /* Forms become full-width */
  input, select, textarea { max-width: 100% !important; box-sizing: border-box; }

  /* Multi-column buttons stack */
  div[style*="display: flex"][style*="gap"] { flex-wrap: wrap; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  /* Tablet: 2-column max */
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns: repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Touch targets meet WCAG minimum 44x44 on small screens */
@media (max-width: 768px) and (pointer: coarse) {
  button, a.btn, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Honor reduced-motion user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Customer dashboard responsive grid ---- */
.dashboard-row {
  display: grid;
  gap: 16px;
}

.dashboard-row-1-1 {
  grid-template-columns: 1fr 1fr;
}

.dashboard-row-15-1 {
  grid-template-columns: 1.5fr 1fr;
}

@media (max-width: 768px) {
  .dashboard-row-1-1,
  .dashboard-row-15-1 {
    grid-template-columns: 1fr;
  }
}