/* Bites of Boston home page: DateForward picker + standard home sections.
   Everything is scoped under .bx so nothing here can reach her theme. Colors,
   fonts and buttons are hers: #f29d23 orange, Lato, BetterTimes for the
   cursive headings, and the theme's own .homepage_cta / .yellow_cta buttons. */
.bx {
  --bx-orange: #f29d23;
  --bx-orange-dark: #d9841a;
  --bx-orange-soft: #fdf1df;
  --bx-ink: #111;
  --bx-text: #444;
  --bx-muted: #767676;
  --bx-dim: #b9b9b9;
  --bx-line: #ececec;
  --bx-cream: #fbf7f1;
  font-family: 'Lato', sans-serif;
  color: var(--bx-text);
  padding: 90px 5%;
  background: #fff;
}
.bx *, .bx *::before, .bx *::after { box-sizing: border-box; }
.bx p { color: var(--bx-text); }
.bx--cream { background: var(--bx-cream); }
.bx--dark { background: #141414; }
.bx__inner { max-width: 1140px; margin: 0 auto; }
.bx__head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.bx .bx__kicker { font-size: 44px; line-height: 1.1; color: var(--bx-orange); margin: 0 0 6px; }
.bx__title { font-size: 26px; line-height: 1.35; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bx-ink); margin: 0 0 14px; }
.bx__lede { font-size: 17px; line-height: 1.65; margin: 0; }
.bx--dark .bx__title, .bx--dark p:not(.bx__kicker) { color: #fff; }
@media (max-width: 640px) {
  .bx { padding: 64px 16px; }
  .bx .bx__kicker { font-size: 34px; }
  .bx__title { font-size: 19px; letter-spacing: 0.14em; }
  .bx__lede { font-size: 16px; }
}

/* Her theme buttons float and carry wide side margins; inside our sections they
   sit inline. */
.bx .homepage_cta { float: none; margin: 0; width: auto; display: inline-block; font-size: 14px; padding: 11px 22px; letter-spacing: 2px; line-height: 1.3; text-align: center; }
.bx .homepage_cta:hover { background: var(--bx-orange) !important; }
.bx .yellow_cta:hover { background: #000 !important; }

/* ---- Hero additions --------------------------------------------------- */
.main-banner .bx-hero-since { display: inline-block; font: 700 13px/1 'Lato', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.45); padding: 9px 16px; margin: 0 0 18px; }

/* ---- DateForward: "Choose your day" ----------------------------------- */
.dpx { max-width: 820px; margin: 0 auto 44px; }
.dpx-loading { text-align: center; color: var(--bx-muted); padding: 24px 0; }
.dpx-cal__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 6px; }
.dpx-cal__month { background: none; border: 1px solid transparent; cursor: pointer; font: 700 20px/1.2 'Lato', sans-serif; letter-spacing: 0.04em; color: var(--bx-ink); display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; transition: background .2s, color .2s; }
.dpx-cal__month:hover { background: var(--bx-orange-soft); color: var(--bx-orange-dark); }
.dpx-strip__arrow, .dpx-arrow { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; cursor: pointer; font-size: 28px; line-height: 1; color: var(--bx-ink); transition: background .2s; }
.dpx-strip__arrow:hover:not(:disabled), .dpx-arrow:hover:not(:disabled) { background: var(--bx-orange-soft); }
.dpx-strip__arrow:disabled, .dpx-arrow:disabled { color: var(--bx-dim); cursor: default; }
.dpx-strip__rail { position: relative; width: 100%; }
.dpx-strip__days { display: flex; justify-content: space-between; }
.dpx-strip__days.anim-right { animation: dpxInRight .3s ease; }
.dpx-strip__days.anim-left { animation: dpxInLeft .3s ease; }
@keyframes dpxInRight { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dpxInLeft { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
.dpx-strip__line { position: absolute; left: 5%; right: 5%; top: 38px; height: 1px; background: rgba(0,0,0,0.08); }
.dpx-d { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; padding: 6px 0 8px; cursor: pointer; font-family: 'Lato', sans-serif; color: var(--bx-ink); }
.dpx-d--off { cursor: default; }
.dpx-d__disc, .dpx-d__plain { width: 64px; height: 64px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.dpx-d__disc { position: relative; overflow: hidden; border: 2px solid transparent; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform .2s, box-shadow .2s; }
.dpx-d[data-date]:hover .dpx-d__disc { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(242,157,35,0.3); }
.dpx-d__dow { position: relative; z-index: 1; font-size: 12px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.dpx-d__date { position: relative; z-index: 1; font-size: 11px; font-weight: 700; }
.dpx-d__status { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
/* Bookable: her orange, with a faint fork and knife behind the date. */
.dpx-d--open .dpx-d__disc { border-color: var(--bx-orange); background: radial-gradient(circle at 50% 38%, #f8bd66 0%, var(--bx-orange) 70%, var(--bx-orange-dark) 100%); color: #fff; }
.dpx-d--open .dpx-d__disc::before { content: ""; position: absolute; inset: 14px; opacity: 0.22; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 2v7a2 2 0 0 1-1.5 1.94V22h-2V10.94A2 2 0 0 1 2 9V2h1.2v6h1V2h1.3v6h1V2H7zm11 0c-2.2 0-4 2.4-4 6.2 0 2.4 1 3.9 2.5 4.5V22h2V2h-.5z'/%3E%3C/svg%3E"); }
.dpx-d--limited .dpx-d__disc { background: var(--bx-orange-soft); box-shadow: inset 0 0 0 2px var(--bx-orange); color: var(--bx-orange-dark); }
.dpx-d--limited .dpx-d__status { color: var(--bx-orange-dark); }
.dpx-d--soldout .dpx-d__disc { background: #eee; color: var(--bx-muted); }
.dpx-d--soldout .dpx-d__status { color: var(--bx-muted); }
.dpx-d--off .dpx-d__plain { color: var(--bx-dim); }
.dpx-d.sel .dpx-d__disc { transform: translateY(-2px); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--bx-ink), 0 6px 16px rgba(0,0,0,0.18); }
@media (max-width: 480px) {
  .dpx-d__disc, .dpx-d__plain { width: 46px; height: 46px; }
  .dpx-strip__line { top: 29px; }
  .dpx-d__dow { font-size: 10px; }
  .dpx-d__date { font-size: 9px; }
  .dpx-d--open .dpx-d__disc::before { inset: 10px; }
}
.dpx-chooser__hint { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--bx-muted); margin: 2px 0 8px; }
.dpx-monthgrid, .dpx-dows { max-width: 360px; margin: 0 auto; }
.dpx-monthgrid { display: flex; flex-direction: column; gap: 2px; }
.dpx-wkrow, .dpx-dows { display: grid; grid-template-columns: repeat(7, 1fr); }
.dpx-wkrow { border-radius: 9px; cursor: pointer; transition: background .15s; }
.dpx-wkrow.past { cursor: default; }
.dpx-wkrow:not(.past):hover { background: var(--bx-orange-soft); }
.dpx-wkrow.sel { background: #fde3bd; }
.dpx-dows span { text-align: center; font-size: 12px; font-weight: 700; color: var(--bx-muted); padding: 6px 0; }
.dpx-gday { text-align: center; padding: 9px 0; font-size: 14px; font-weight: 700; color: var(--bx-ink); }
.dpx-gday.other, .dpx-gday.pastday, .dpx-wkrow.past .dpx-gday { color: var(--bx-dim); font-weight: 400; }
.dpx-res__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; }
.dpx-res__head { font-size: 14px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bx-ink) !important; margin: 0; }
.dpx-res__clear { background: none; border: none; padding: 8px 0; color: var(--bx-orange-dark); font: 700 15px 'Lato', sans-serif; cursor: pointer; }
.dpx-res__clear:hover { text-decoration: underline; }
.dpx-res__none { text-align: center; color: var(--bx-muted); margin: 0 0 24px; }

/* ---- Tour cards (picker results) -------------------------------------- */
/* Tours scroll sideways instead of stacking down the page. */
.bx-grid { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: 4px 2px 16px; }
.bx-grid > .bx-card { flex: 0 0 340px; scroll-snap-align: start; }
.bx-grid > .bx-card:first-child { margin-left: auto; }
.bx-grid > .bx-card:last-child { margin-right: auto; }
.bx-card { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--bx-orange); transition: box-shadow .2s, transform .2s; }
.bx-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.1); transform: translateY(-2px); }
.bx-card__img { display: block; aspect-ratio: 12 / 7; overflow: hidden; background: #eee; }
.bx-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.bx-card:hover .bx-card__img img { transform: scale(1.04); }
.bx-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.bx-card__sub { font-size: 12px !important; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bx-muted) !important; margin: 0 0 4px !important; }
.bx-card__title { font-size: 32px; line-height: 1.1; margin: 0 0 12px; }
.bx-card__title a { color: var(--bx-orange); }
.bx-card__title a:hover { color: var(--bx-orange-dark); }
.bx-card__desc { font-size: 16px !important; line-height: 1.6 !important; margin: 0 0 16px !important; flex: 1; }
.bx-card__meta { display: flex; justify-content: space-between; font-size: 15px !important; color: var(--bx-ink) !important; border-top: 1px solid var(--bx-line); padding-top: 14px; margin: 0 0 18px !important; }
.bx-card__meta b { font-size: 20px; font-weight: 900; color: var(--bx-orange-dark); }
.bx-card__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.bx-card__btns .homepage_cta { flex: 1 1 130px; }
.bx-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.bx-slot { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 900 15px/1 'Lato', sans-serif; letter-spacing: 0.04em; color: #fff !important; background: var(--bx-orange); padding: 0 18px; transition: background .2s; }
.bx-slot:hover { background: #000; }
.bx-slot__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.bx-slot--wait { background: #fff; color: var(--bx-ink) !important; box-shadow: inset 0 0 0 2px var(--bx-ink); }
.bx-slot--wait:hover { background: var(--bx-ink); color: #fff !important; }
.bx-slot--call { background: var(--bx-ink); }
.bx-slot--call:hover { background: var(--bx-orange); }
.bx-slot--out, .bx-slot--out:hover { background: #eee; color: var(--bx-muted) !important; cursor: default; }
/* Nothing bookable online that day: the whole card mutes. */
.bx-card--out { border-color: var(--bx-line); }
.bx-card--out .bx-card__img img { filter: grayscale(1); opacity: 0.6; }
.bx-card--out .bx-card__title a { color: var(--bx-muted); }
@media (max-width: 640px) {
  .bx-grid { gap: 16px; margin: 0 -16px; padding: 4px 16px 16px; scroll-padding: 0 16px; }
  .bx-grid > .bx-card { flex-basis: 82vw; }
  .bx-card__title { font-size: 28px; }
  .bx .bx-card__btns .homepage_cta { font-size: 13px; letter-spacing: 1px; padding: 12px 10px; }
}

/* ---- More ways to taste Boston ---------------------------------------- */
.bx-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.bx-way { display: block; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,0.06); transition: box-shadow .2s, transform .2s; }
.bx-way:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.12); transform: translateY(-2px); }
.bx-way__img { aspect-ratio: 3 / 2; overflow: hidden; background: #eee; }
.bx-way__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bx-way__body { padding: 20px 22px 24px; }
.bx-way__title { font-size: 30px; line-height: 1.1; color: var(--bx-orange); margin: 0 0 8px; }
.bx-way__body p { font-size: 16px !important; line-height: 1.6 !important; margin: 0 0 14px !important; }
.bx-way__link { font-size: 13px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bx-ink); border-bottom: 2px solid var(--bx-orange); padding-bottom: 3px; }
@media (max-width: 900px) { .bx-ways { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* ---- Founder ------------------------------------------------------------ */
.bx-founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
/* Her portrait file already carries its own polaroid frame and name banner. */
.bx-founder__photo { max-width: 420px; justify-self: center; }
.bx-founder__photo img { display: block; width: 100%; height: auto; }
.bx-founder .bx__kicker, .bx-founder .bx__title { text-align: left; }
.bx-founder__text p:not(.bx__kicker) { font-size: 17px; line-height: 1.7; margin: 0 0 18px; }
.bx-founder__sig { display: block; width: 190px; height: auto; margin: 6px 0 22px; filter: invert(1); }
@media (max-width: 800px) {
  .bx-founder { grid-template-columns: 1fr; gap: 36px; }
  .bx-founder__photo { max-width: 300px; }
}

/* ---- FAQ ---------------------------------------------------------------- */
.bx-faq { max-width: 820px; margin: 0 auto; }
.bx-faq details { background: #fff; border-left: 4px solid var(--bx-orange); margin: 0 0 12px; box-shadow: 0 1px 6px rgba(0,0,0,0.05); }
.bx-faq summary { cursor: pointer; list-style: none; position: relative; padding: 20px 56px 20px 22px; font-size: 17px; font-weight: 700; color: var(--bx-ink); }
.bx-faq summary::-webkit-details-marker { display: none; }
.bx-faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: var(--bx-orange); }
.bx-faq details[open] summary::after { content: "\2212"; }
.bx-faq details p { font-size: 16px; line-height: 1.7; margin: 0; padding: 0 22px 22px; }
.bx-faq__more { text-align: center; margin: 28px 0 0; }

/* ---- Closing CTA band --------------------------------------------------- */
.bx-cta { text-align: center; }
.bx.bx-cta .bx__kicker { font-size: 52px; }
.bx-cta .bx__title { color: #fff; }
.bx-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
@media (max-width: 640px) { .bx.bx-cta .bx__kicker { font-size: 38px; } }