/* SmoothieFRESH: strawberry-to-mango warmth, cream and the logo's fruit colors. Body text and the dark footer match bitesdmv.com. */
:root {
  --berry: #c8243f;       /* strawberry, top left of the hero */
  --mango: #f5772a;       /* mango, bottom right */
  --coral: #f26a4b;       /* flowers in the find-us section */
  --cream: #fff3d6;
  --ink: #151515;
  --muted: #5d5a55;
  --sun: #ffc845;
  --leaf: #2f6f1c;         /* the logo green, deep enough for text on white */
  --soft: #f6f3ef;
  --display: "Fraunces", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--leaf); }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.05; }
h1, h2 { font-family: var(--display); font-weight: 800; font-variation-settings: "SOFT" 100; letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 820px; }

/* BITES strip, like a shop's announcement bar */
.bites-strip { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--ink); color: #fff; text-decoration: none; font-size: .82rem; font-weight: 600; padding: 8px 16px; text-align: center; }
.bites-strip img { height: 14px; width: auto; display: inline; }
.bites-strip:hover { text-decoration: underline; }

/* hero */
.hero { position: relative; overflow: hidden; color: var(--cream); background: radial-gradient(120% 90% at 85% 100%, var(--mango) 0%, #e8483a 45%, var(--berry) 100%); }
.nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.logo img { height: 74px; width: auto; transform: rotate(-4deg); filter: drop-shadow(0 6px 10px rgba(70, 10, 10, .25)); }
.nav nav { display: flex; gap: 26px; align-items: center; }
.nav nav a { color: var(--cream); font-weight: 800; text-decoration: none; }
.nav nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav .nav-order { background: var(--cream); color: var(--ink); border-radius: 999px; padding: 9px 18px; }

.hero-in { position: relative; z-index: 4; padding-top: 28px; }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); max-width: 13ch; font-weight: 700; color: var(--cream); }
.hero-links { display: flex; gap: 28px; flex-wrap: wrap; margin: 26px 0 0; }
.big-link { color: var(--cream); font-family: var(--display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.9rem); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.big-link:hover { text-decoration-thickness: 5px; }

/* cloud badge */
.cloud { position: absolute; right: 16px; top: 40px; margin: 0; width: 180px; height: 120px; display: grid; place-items: center; background: var(--leaf); color: var(--cream); font-family: var(--display); font-variation-settings: "SOFT" 100; font-weight: 800; font-size: 1.15rem; line-height: 1.15; text-align: center;
  -webkit-mask: radial-gradient(circle at 25% 60%, #000 33%, transparent 34%), radial-gradient(circle at 50% 38%, #000 36%, transparent 37%), radial-gradient(circle at 76% 58%, #000 32%, transparent 33%), linear-gradient(#000, #000) 50% 85% / 70% 40% no-repeat;
  mask: radial-gradient(circle at 25% 60%, #000 33%, transparent 34%), radial-gradient(circle at 50% 38%, #000 36%, transparent 37%), radial-gradient(circle at 76% 58%, #000 32%, transparent 33%), linear-gradient(#000, #000) 50% 85% / 70% 40% no-repeat;
  transform: rotate(-6deg); }
.cloud span { margin-top: 18px; }

/* cups standing along the bottom, the wordmark in front of them */
.hero-cups { position: relative; z-index: 2; list-style: none; margin: 36px auto 0; padding: 0 16px; max-width: 1400px; display: flex; justify-content: center; align-items: flex-end; }
.hc { flex: 0 1 200px; margin: 0 -14px; animation: bob 6s ease-in-out infinite; }
.hc img { filter: drop-shadow(0 18px 18px rgba(70, 10, 10, .3)); }
.hc1, .hc7 { flex-basis: 165px; margin-bottom: 30px; }
.hc2, .hc6 { flex-basis: 185px; margin-bottom: 70px; animation-delay: -2s; }
.hc3, .hc5 { flex-basis: 200px; margin-bottom: 20px; animation-delay: -4s; }
.hc4 { flex-basis: 225px; margin-bottom: 60px; animation-delay: -1s; }
@keyframes bob { 50% { transform: translateY(-10px); } }
.wordmark { position: relative; z-index: 3; margin: -11vw 0 -4.2vw; text-align: center; font-family: var(--display); font-variation-settings: "SOFT" 100; font-weight: 900; font-size: 30vw; line-height: .8; letter-spacing: -.03em; color: var(--cream); pointer-events: none; user-select: none; }

/* little red flowers */
.flower { position: absolute; z-index: 1; color: var(--sun); width: 56px; height: 56px; animation: spin 24s linear infinite; }
.f1 { left: 3%; top: 46%; }
.f2 { right: 4%; top: 50%; width: 44px; height: 44px; animation-direction: reverse; }
.f3 { left: 44%; top: 8%; width: 34px; height: 34px; }
.f4 { right: 22%; top: 30%; width: 40px; height: 40px; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* menu */
.menu { padding: 56px 16px 40px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 0 0 24px; }
.chips a { text-decoration: none; color: var(--ink); background: var(--soft); border-radius: 999px; padding: 9px 18px; font-weight: 800; font-size: .95rem; }
.chips a:hover { background: var(--ink); color: #fff; }
.menu-sec { padding-top: 40px; scroll-margin-top: 10px; }
.menu-sec h2 a { color: inherit; text-decoration: none; }
.menu-sec h2 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.drinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 24px; }
.drink { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.tile { display: block; background: var(--tile); border-radius: 22px; aspect-ratio: 1 / 1.08; padding: 18px 18px 0; overflow: hidden; }
.tile img { width: 78%; margin: 0 auto; transition: transform .3s; }
.drink:hover .tile img { transform: translateY(-6px) rotate(-2deg); }
.drink h3 { margin: 12px 2px 4px; font-size: 1.04rem; font-weight: 800; line-height: 1.25; }
.drink p { margin: 0 2px 8px; font-size: .88rem; color: var(--muted); line-height: 1.45; }
.drink .price { margin: auto 2px 0; font-weight: 800; }
.own { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 22px; padding: 16px 20px; border-radius: 16px; background: var(--soft); text-decoration: none; color: var(--ink); }
.own strong { font-size: 1.05rem; }
.own span { color: var(--muted); }
.own .price { margin-left: auto; color: var(--ink); font-weight: 800; }
.own:hover strong { text-decoration: underline; }
.menu-note { margin-top: 40px; text-align: center; color: var(--muted); font-size: .92rem; }

/* find us */
.visit { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffd9bf, #fff0e2); padding: 64px 0; }
.visit .flower { color: var(--coral); }
.visit-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.visit h2 { color: #8a1f1a; }
.visit-addr { font-family: var(--display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 1.6rem; line-height: 1.2; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.btn { display: inline-flex; background: var(--ink); color: #fff; border-radius: 999px; padding: 12px 22px; font-weight: 800; text-decoration: none; }
.btn:hover { background: #333; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }
.hours-list { list-style: none; padding: 0; margin: 0; }
.hours-list li { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.hours-list.big { background: #fff; border-radius: 22px; padding: 22px 26px; font-size: 1.02rem; }
.hours-list.big li + li { border-top: 1px solid #ebe6df; }
.f5 { right: 6%; top: 14%; }
.f6 { left: 48%; bottom: 10%; width: 36px; height: 36px; animation-direction: reverse; }

/* category pages */
.hero-cat { padding-bottom: 0; }
.cat-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: end; position: relative; z-index: 3; padding-top: 18px; }
.cat-in > div { padding-bottom: 56px; }
.crumb { font-weight: 600; font-size: .9rem; margin: 0 0 10px; }
.crumb a { color: var(--cream); }
.lede { font-size: 1.15rem; max-width: 40ch; }
.cat-cups { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; justify-content: center; }
.cc { flex: 0 1 180px; margin: 0 -10px -24px; }
.cc img { filter: drop-shadow(0 18px 18px rgba(70, 10, 10, .3)); }
.cc2 { flex-basis: 210px; margin-bottom: -10px; }

/* faq */
.faq { padding: 56px 16px 72px; }
.faq details { background: var(--soft); border-radius: 16px; padding: 16px 22px; margin-bottom: 8px; }
.faq summary { font-weight: 800; cursor: pointer; }
.faq details p { margin: 10px 0 0; }

/* footer, same as bitesdmv.com */
.foot { background: var(--ink); color: #d9d4ce; padding: 56px 0 24px; font-size: .95rem; }
.foot a { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid img { height: 39px; width: auto; margin-bottom: 14px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { padding: 3px 0; }
.foot address { font-style: normal; }
.foot-h { color: #fff; font-weight: 800; margin: 0 0 8px; }
.foot-legal { margin-top: 36px; font-size: .82rem; color: #a49d95; }

@media (max-width: 860px) {
  .nav nav a:not(.nav-order) { display: none; }
  .drinks { grid-template-columns: repeat(3, 1fr); }
  .f1 { display: none; }
  .cloud { position: static; margin: 26px 0 0; width: 170px; height: 112px; font-size: 1.2rem; }
  .hero-cups { margin-top: 10px; padding: 0; }
  .hc { margin: 0 -8px; }
  .hc1, .hc7 { display: none; }
  .wordmark { margin: -13vw 0 -5vw; font-size: 33vw; }
  .visit-in, .cat-in { grid-template-columns: 1fr; }
  .cat-in > div { padding-bottom: 0; }
  .cat-cups { margin-top: 10px; }
  .cc { flex-basis: 130px; }
  .cc2 { flex-basis: 150px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .strip-more { display: none; }
  .logo img { height: 56px; }
  .hero h1 { font-size: 2.3rem; }
  .hc2, .hc6 { margin-bottom: 40px; }
  .hc4 { margin-bottom: 34px; }
  .drinks { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  .tile { border-radius: 18px; padding: 12px 12px 0; }
  .drink h3 { font-size: .95rem; }
  .drink p { display: none; }
  .own .price { margin-left: 0; }
  .f3, .f4 { display: none; }
  .flower { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .hc, .flower { animation: none; }
  .tile img { transition: none; }
}