/* =========================================================
   A Break Coffee — Landing Page
   Brand tokens
   ========================================================= */
:root {
  --orange:   #CE4F01;
  --orange-2: #E15F0F;
  --brown:    #551401;
  --brown-2:  #3A0E00;
  --teal:     #04B7AF;
  --teal-2:   #03938C;
  --gray:     #96989A;
  --cream:    #FBF7F2;
  --cream-2:  #F4ECDF;
  --ink:      #1B0A02;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --shadow-sm: 0 1px 2px rgba(85,20,1,.06), 0 4px 14px rgba(85,20,1,.06);
  --shadow-md: 0 6px 24px -8px rgba(85,20,1,.18), 0 2px 6px rgba(85,20,1,.06);
  --shadow-lg: 0 24px 60px -20px rgba(85,20,1,.28), 0 8px 20px -10px rgba(85,20,1,.18);

  --display: "Antonio", "Bebas Neue", Impact, sans-serif;
  --serif:   "Cormorant Garamond", Georgia, serif;
  --body:    "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  color: var(--brown);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* ---- Type system ---- */
.eyebrow {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--orange);
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  vertical-align: middle;
  margin: 0 8px 2px;
}

h1, h2, h3 { margin: 0; color: var(--brown); }
.display {
  font-family: var(--display);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: none;
}
.serif-it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

.slogan { font-family: var(--serif); font-style: italic; color: var(--orange); font-weight: 600; }
.slogan .semi { color: var(--teal); font-weight: 600; margin-right: 2px; }

/* ===================== Layout shell ===================== */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 22px; }
@media (min-width: 768px) { .container { padding: 0 40px; } }

/* ===================== Header ===================== */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,247,242,.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(85,20,1,.06);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 34px; width: auto; }
.brand .word {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--brown);
  letter-spacing: -.01em;
  line-height: 1;
}
.nav-links { display: none; gap: 32px; align-items: center; }
.nav-links a { font-family: var(--body); font-weight: 600; font-size: 14px; color: var(--brown); }
.nav-links a:hover { color: var(--orange); }
@media (min-width: 768px) { .nav-links { display: flex; } }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(206,79,1,.6), inset 0 -2px 0 rgba(0,0,0,.08);
}
.btn-primary:hover { background: var(--orange-2); }
.btn-ghost {
  background: transparent;
  color: var(--brown);
  border: 1.5px solid rgba(85,20,1,.18);
}
.btn-ghost:hover { border-color: var(--brown); }
.btn-dark { background: var(--brown); color: var(--cream); }
.btn-dark:hover { background: var(--brown-2); }
.btn-teal {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(4,183,175,.55);
}
.btn-teal:hover { background: var(--teal-2); }
.btn .arrow { font-size: 18px; line-height: 1; transform: translateY(-1px); transition: transform .2s ease; }
.btn:hover .arrow { transform: translate(2px, -1px); }
.btn-sm { padding: 9px 14px; font-size: 13px; }
.btn-lg { padding: 16px 24px; font-size: 16px; }

/* ===================== HERO ===================== */
.hero { position: relative; padding: 28px 0 56px; overflow: hidden; }
@media (min-width: 900px) { .hero { padding: 56px 0 96px; } }

.hero-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 48px; }
}

.hero h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(44px, 11vw, 96px);
  line-height: .92;
  letter-spacing: -.015em;
  color: var(--brown);
  text-wrap: balance;
}
.hero h1 .it { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--orange); }
.hero h1 .teal { color: var(--teal); }

.hero p.lead {
  margin: 22px 0 0;
  font-size: clamp(15px, 1.2vw, 18px);
  color: rgba(85,20,1,.78);
  max-width: 46ch;
  text-wrap: pretty;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px dashed rgba(85,20,1,.18);
  font-size: 13px;
  color: rgba(85,20,1,.7);
}
.hero-meta .m { display: flex; align-items: center; gap: 8px; }
.hero-meta .m svg { color: var(--teal); }

/* Hero visual */
.hero-visual {
  position: relative;
  aspect-ratio: 4/4.6;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.hv-card {
  position: absolute;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #ddd;
}
.hv-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hv-label {
  position: absolute; bottom: 14px; left: 14px;
  z-index: 2;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.hv-1 {
  left: 0; top: 6%; width: 62%; height: 70%;
  transform: rotate(-3deg);
  background: linear-gradient(160deg, #6b3a1a 0%, #2c1206 65%, #1a0a02 100%);
}
.hv-1::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(circle at 70% 18%, rgba(255,220,180,.18), transparent 38%),
    repeating-linear-gradient(140deg, rgba(255,255,255,.04) 0 2px, transparent 2px 18px);
  pointer-events: none;
}
.hv-2 {
  right: 0; top: 0; width: 50%; height: 48%;
  transform: rotate(4deg);
  background: linear-gradient(160deg, #14a89f 0%, #04b7af 50%, #027b76 100%);
}
.hv-2::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(circle at 30% 80%, rgba(255,255,255,.18), transparent 40%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px);
  pointer-events: none;
}
.hv-3 {
  right: 4%; bottom: 0; width: 56%; height: 46%;
  transform: rotate(-2deg);
  background: linear-gradient(160deg, #ce4f01 0%, #b03f00 60%, #7a2a00 100%);
}
.hv-3::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,220,180,.22), transparent 45%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px);
  pointer-events: none;
}

.hv-badge {
  position: absolute;
  left: 50%; top: 44%;
  transform: translate(-58%, -50%) rotate(-8deg);
  background: var(--cream);
  color: var(--brown);
  padding: 12px 16px;
  border-radius: 999px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  box-shadow: var(--shadow-md);
  z-index: 5;
  white-space: nowrap;
}
.hv-badge .semi { color: var(--teal); }

.hero-mark {
  position: absolute;
  right: -60px; bottom: -60px;
  width: 360px;
  opacity: .06;
  pointer-events: none;
  transform: rotate(-12deg);
  z-index: 0;
}
@media (min-width: 900px) {
  .hero-mark { left: -90px; right: auto; bottom: auto; top: -40px; width: 420px; opacity: .05; }
}

/* ===================== Marquee strip ===================== */
.strip {
  background: var(--brown);
  color: var(--cream);
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.strip-track {
  display: flex; gap: 48px;
  white-space: nowrap;
  padding: 18px 0;
  animation: scroll 28s linear infinite;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 18px;
}
.strip-track span { display: inline-flex; align-items: center; gap: 14px; }
.strip-track .star { color: var(--orange); }
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===================== Specialties ===================== */
.specs { padding: 72px 0; }
.section-head { max-width: 720px; margin-bottom: 36px; }
.section-head h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(34px, 6vw, 56px);
  line-height: .96;
  letter-spacing: -.01em;
  margin-top: 8px;
}
.section-head h2 .it { font-family: var(--serif); font-style: italic; color: var(--orange); font-weight: 500; }
.section-head p {
  margin: 16px 0 0;
  color: rgba(85,20,1,.72);
  max-width: 56ch;
  text-wrap: pretty;
  font-size: 16px;
}

.specs-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px)  { .specs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .specs-grid { grid-template-columns: repeat(4, 1fr); } }

.spec-card {
  position: relative;
  border-radius: var(--r-lg);
  padding: 24px;
  min-height: 220px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.spec-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.spec-card .num {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--gray);
}
.spec-card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  margin: 14px 0 8px;
}
.spec-card p { font-size: 14px; color: rgba(85,20,1,.7); margin: 0; }
.spec-card .glyph {
  position: absolute; right: -10px; top: -10px;
  width: 110px; height: 110px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 56px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
}
.spec-card.s1 { background: linear-gradient(160deg, #fff, #fff); border: 1px solid rgba(85,20,1,.06); }
.spec-card.s1 .glyph { background: var(--teal); color: #fff; }
.spec-card.s2 { background: linear-gradient(160deg, var(--brown), var(--brown-2)); color: var(--cream); }
.spec-card.s2 h3, .spec-card.s2 .num { color: var(--cream); }
.spec-card.s2 p { color: rgba(255,255,255,.78); }
.spec-card.s2 .glyph { background: var(--orange); }
.spec-card.s3 { background: var(--cream-2); }
.spec-card.s3 .glyph { background: var(--brown); color: var(--cream); }
.spec-card.s4 { background: linear-gradient(160deg, var(--orange), #a13e00); color: #fff; }
.spec-card.s4 h3, .spec-card.s4 .num { color: #fff; }
.spec-card.s4 p { color: rgba(255,255,255,.85); }
.spec-card.s4 .glyph { background: var(--cream); color: var(--orange); }

/* ===================== Menu ===================== */
.menu-section {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.menu-section::before {
  content: "";
  position: absolute; left: -10%; top: -20%;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(4,183,175,.18), transparent);
  pointer-events: none;
}
.menu-section::after {
  content: "";
  position: absolute; right: -8%; bottom: -20%;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(206,79,1,.14), transparent);
  pointer-events: none;
}

.menu-head {
  display: flex; flex-direction: column; gap: 16px;
  align-items: flex-start;
  margin-bottom: 40px;
}
@media (min-width: 760px) {
  .menu-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

.menu-card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.menu-card .menu-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--brown);
  color: var(--cream);
  font-family: var(--display);
  letter-spacing: .14em;
  font-size: 12px;
  text-transform: uppercase;
}
.menu-card .menu-bar .dots { display: flex; gap: 6px; }
.menu-card .menu-bar .dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: block;
}
.menu-card .menu-bar .dots i:first-child  { background: var(--orange); }
.menu-card .menu-bar .dots i:nth-child(2) { background: var(--teal); }

.menu-typeset { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 36px 24px 40px; }
@media (min-width: 760px) {
  .menu-typeset { grid-template-columns: 1fr 1fr; padding: 48px 56px 56px; gap: 56px; }
}
.menu-col h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--brown);
  padding-bottom: 8px;
  margin-bottom: 18px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.menu-col h3 small {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  font-weight: 400;
  color: var(--orange);
  text-transform: none;
  letter-spacing: 0;
}
.menu-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 12px;
  padding: 10px 0;
  border-bottom: 1px dotted rgba(85,20,1,.18);
}
.menu-row:last-child { border-bottom: 0; }
.menu-row .name  { font-family: var(--body); font-weight: 700; font-size: 15px; color: var(--brown); }
.menu-row .desc  { grid-column: 1 / 2; font-size: 13px; color: rgba(85,20,1,.65); margin-top: 2px; }
.menu-row .price { font-family: var(--display); font-weight: 500; color: var(--orange); font-size: 18px; letter-spacing: .02em; white-space: nowrap; }
.menu-row .tag {
  display: inline-block;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .14em;
  background: var(--teal);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}
.menu-col h3 + h3,
.menu-col h3[style] {
  border-top: 1px dashed rgba(85,20,1,.14);
  padding-top: 20px;
}

.menu-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 24px;
  padding: 14px 24px;
  background: var(--cream-2);
  border-top: 1px dashed rgba(85,20,1,.14);
  font-size: 13px;
  color: rgba(85,20,1,.72);
}
@media (min-width: 760px) { .menu-extras { padding: 14px 56px; } }
.menu-extras-label {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gray);
  margin-right: 8px;
}
.menu-extras strong { color: var(--orange); font-family: var(--display); font-size: 15px; margin-left: 4px; }

.menu-foot {
  text-align: center;
  padding: 0 24px 32px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--brown);
  font-size: 16px;
}

/* ===================== Quote ===================== */
.quote { padding: 80px 0; text-align: center; }
.quote blockquote {
  margin: 0 auto;
  max-width: 18ch;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 8vw, 80px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--brown);
}
.quote .em { font-family: var(--serif); font-style: italic; color: var(--orange); font-weight: 500; }
.quote cite {
  display: block;
  margin-top: 28px;
  font-style: normal;
  font-family: var(--display);
  letter-spacing: .22em;
  font-size: 11px;
  color: var(--gray);
  text-transform: uppercase;
}

/* ===================== Visit ===================== */
.visit {
  background: var(--brown);
  color: var(--cream);
  padding: 80px 0 28px;
  position: relative;
  overflow: hidden;
}
.visit::before {
  content: "";
  position: absolute; right: -80px; top: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: var(--orange);
  opacity: .25;
  filter: blur(2px);
}
.visit-grid { display: grid; grid-template-columns: 1fr; gap: 36px; position: relative; }
@media (min-width: 880px) { .visit-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } }

.visit h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 76px);
  line-height: .94;
  color: var(--cream);
  letter-spacing: -.01em;
}
.visit h2 .it { font-family: var(--serif); font-style: italic; color: var(--orange); }
.visit p { color: rgba(255,255,255,.78); max-width: 50ch; }

.info-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 14px; }
.info-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start; gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}
.info-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.info-list li svg { color: var(--teal); margin-top: 3px; }
.info-list li strong { display: block; font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; font-size: 11px; color: rgba(255,255,255,.55); font-weight: 500; }
.info-list li span { font-size: 15px; }

.map-wrap {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  height: 260px;
}
.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.hours {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md);
  padding: 22px 24px;
}
.hours h3 {
  font-family: var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  margin-bottom: 16px;
}
.hours-row {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  font-size: 15px;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}
.hours-row:last-child { border-bottom: 0; }
.hours-row .day { color: rgba(255,255,255,.92); font-weight: 600; }
.hours-row .h   { font-family: var(--display); color: var(--cream); font-weight: 400; letter-spacing: .04em; }
.hours-tag {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--teal);
  font-size: 14px;
}
.hours-tag::before {
  content: ""; width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(4,183,175,.22);
  animation: pulse 1.6s ease-out infinite;
  transition: background .3s, box-shadow .3s;
}
.hours-tag.closed::before {
  background: rgba(255,255,255,.3);
  box-shadow: none;
  animation: none;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(4,183,175,.5); }
  100% { box-shadow: 0 0 0 12px rgba(4,183,175,0); }
}

/* ===================== Footer ===================== */
footer.foot {
  background: var(--brown-2);
  color: rgba(255,255,255,.7);
  padding: 28px 0;
  font-size: 13px;
  text-align: center;
}
footer .foot-row { display: flex; flex-direction: column; gap: 10px; align-items: center; }
@media (min-width: 720px) { footer .foot-row { flex-direction: row; justify-content: space-between; } }
footer .socials { display: flex; gap: 14px; }
footer .socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center;
  transition: background .2s, color .2s, border-color .2s;
}
footer .socials a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ===================== Floating actions ===================== */
.fab {
  position: fixed;
  bottom: 18px;
  z-index: 60;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 12px 24px -8px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease;
  color: #fff;
}
.fab:hover { transform: translateY(-2px); }
.fab.fab-order {
  left: 18px;
  background: linear-gradient(160deg, #2bb358, #138a39);
}
.fab.fab-chat {
  right: 18px;
  background: linear-gradient(160deg, #e15f0f, #ad3f00);
}
.fab .ping {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: .6;
  animation: ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping {
  0%        { transform: scale(.95); opacity: .5; }
  75%, 100% { transform: scale(1.5); opacity: 0; }
}
.fab .pill {
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
  background: var(--brown);
  color: var(--cream);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 600;
  pointer-events: none;
  opacity: 0; transition: opacity .2s, transform .2s;
}
.fab.fab-order .pill { left: calc(100% + 10px); }
.fab.fab-chat  .pill { right: calc(100% + 10px); }
.fab:hover .pill { opacity: 1; }

/* ===================== Chat widget ===================== */
.chat-window {
  position: fixed;
  z-index: 70;
  right: 16px;
  bottom: 92px;
  width: min(360px, calc(100vw - 32px));
  height: min(520px, calc(100vh - 120px));
  background: var(--cream);
  border-radius: 22px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(.92) translateY(8px);
  opacity: 0; pointer-events: none;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}
.chat-window.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }

.chat-head {
  background: var(--brown);
  color: var(--cream);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
  position: relative;
}
.chat-head .avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--orange);
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.chat-head .avatar img { width: 28px; height: 28px; object-fit: contain; }
.chat-head .who { flex: 1; min-width: 0; }
.chat-head .who h4 {
  font-family: var(--display);
  letter-spacing: .04em;
  font-weight: 500;
  font-size: 16px;
  color: var(--cream);
  margin: 0;
}
.chat-head .who p {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,.7);
  display: flex; align-items: center; gap: 6px;
}
.chat-head .who p::before {
  content: ""; width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(4,183,175,.25);
}
.chat-head .x {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(255,255,255,.7);
}
.chat-head .x:hover { background: rgba(255,255,255,.1); color: #fff; }

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  background:
    radial-gradient(circle at 20% 0%, rgba(4,183,175,.06), transparent 50%),
    radial-gradient(circle at 90% 100%, rgba(206,79,1,.06), transparent 50%),
    var(--cream);
  scroll-behavior: smooth;
}
.msg {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  max-width: 88%;
  animation: msgIn .22s ease both;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.msg.bot  { align-self: flex-start; margin-right: auto; }
.msg.me   { align-self: flex-end;   margin-left: auto; flex-direction: row-reverse; }
.msg .bubble { padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; word-wrap: break-word; }
.msg.bot .bubble { background: #fff; color: var(--brown); border-top-left-radius: 4px; box-shadow: 0 1px 2px rgba(85,20,1,.06); }
.msg.me  .bubble { background: var(--orange); color: #fff; border-top-right-radius: 4px; }
.msg .av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--orange);
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 13px;
}
.msg.bot .av { background: var(--brown); color: var(--cream); }
.msg.me  .av { background: var(--teal); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px 36px; }
.chip {
  background: #fff;
  color: var(--brown);
  border: 1px solid rgba(85,20,1,.14);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

.typing { display: none; align-items: center; gap: 8px; margin-left: 36px; margin-bottom: 8px; }
.typing.show { display: flex; }
.typing .dots {
  background: #fff;
  padding: 12px 14px;
  border-radius: 16px;
  border-top-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(85,20,1,.06);
  display: flex; gap: 4px;
}
.typing .dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gray);
  animation: blink 1.2s infinite ease-in-out;
}
.typing .dots i:nth-child(2) { animation-delay: .15s; }
.typing .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes blink {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-2px); }
}

.chat-foot { border-top: 1px solid rgba(85,20,1,.08); padding: 12px; background: #fff; }
.chat-form {
  display: flex; gap: 8px; align-items: center;
  background: var(--cream-2);
  border-radius: 999px;
  padding: 4px 4px 4px 16px;
}
.chat-form input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  font: inherit;
  color: var(--brown);
  padding: 10px 0;
  outline: none;
  font-size: 14px;
}
.chat-form input::placeholder { color: rgba(85,20,1,.45); }
.chat-form button {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background .15s, transform .15s;
}
.chat-form button:hover    { background: var(--orange-2); }
.chat-form button:disabled { background: var(--gray); cursor: not-allowed; }
.chat-foot .legal { margin: 8px 4px 0; font-size: 10px; color: rgba(85,20,1,.5); text-align: center; }

@media (max-width: 480px) {
  .chat-window { right: 8px; left: 8px; width: auto; bottom: 86px; height: min(560px, calc(100dvh - 110px)); }
}

/* ===================== Reveal on scroll ===================== */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }