/* Shared CMS block styles included by all themes */

/*
 * Derived tokens live on body, not :root, so they follow the per-site accent,
 * surface and ink chosen in the builder (those are set as inline body styles).
 */
body {
  --muted: color-mix(in srgb, var(--ink) 76%, transparent);
  --card: color-mix(in srgb, var(--surface) 92%, white);
  --soft: color-mix(in srgb, var(--surface) 88%, var(--ink));
  --line: color-mix(in srgb, var(--ink) 20%, transparent);
}

.cms-section { padding: clamp(2.5rem, 6vw, 5rem) 0; color: var(--ink); }

/* A freshly added block that never got content should not leave an empty band
   on the public page. Keep it visible while the builder is open so it can be
   selected and filled in. */
body:not(.builder-editing) .cms-section:has(> .container.cms-rich-intro):not(:has(h1, h2, h3, .rich-body)) { display: none; }
.cms-section.pad-sm { padding: 2rem 0; }
.cms-section.pad-lg { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.cms-section.align-center { text-align: center; }
.cms-section h1, .cms-section h2, .cms-section h3 { color: inherit; }
.cms-section .muted, .cms-section .rich-body, .cms-section figcaption { color: inherit; opacity: .78; }

/* Tones are theme-derived section backgrounds, so a page can alternate without
   anyone picking hex values in the builder. */
.cms-section.tone-default { background: transparent; }
.cms-section.tone-tinted { background: var(--soft); }
.cms-section.tone-dark { background: var(--ink); }
.cms-section.tone-image {
  position: relative;
  isolation: isolate;
  background-image: var(--tone-image);
  background-size: cover;
  background-position: center;
}
.cms-section.tone-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .58);
}

/* Sections with a dark tone or custom dark background get light text and borders. */
.cms-section.on-dark { color: #fff; --line: rgba(255, 255, 255, .28); }
.cms-section.on-dark .btn { background: #fff; color: #111; border-color: #fff; }
.cms-section.on-dark .text-link, .cms-section.on-dark a { color: inherit; }
.cms-section.on-dark .cms-highlights.cards article,
.cms-section.on-dark .cms-reviews blockquote { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); }

/* A dark tone paints with the theme ink, so its text has to be the theme
   surface — palettes like Midnight already ship a light ink. */
.cms-section.tone-dark.on-dark { color: var(--surface); }
.cms-section.tone-dark.on-dark .btn { background: var(--surface); color: var(--ink); border-color: var(--surface); }

.narrow-ish { width: min(820px, calc(100% - 40px)); margin: 0 auto; }
.rich-body { font-size: 1.05rem; line-height: 1.7; }
.rich-body p { margin: 0 0 1rem; }
.rich-body p:last-child { margin-bottom: 0; }

/* Rich text intro — split lead + body so pages feel composed, not empty */
.cms-section.cms-block-rich_text .cms-rich-intro {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: end;
}
.cms-section.cms-block-rich_text .cms-rich-intro.has-body {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}
.cms-section.cms-block-rich_text .cms-rich-intro-lead .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .85rem;
  color: var(--brand-primary, var(--accent, #e95c2c));
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.cms-section.cms-block-rich_text .cms-rich-intro-lead .eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: currentColor;
  flex: 0 0 auto;
}
.cms-section.cms-block-rich_text .cms-rich-intro-lead h2 {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: .94;
  letter-spacing: -.03em;
  max-width: 12ch;
}
.cms-section.cms-block-rich_text .cms-rich-intro-body {
  max-width: 36ch;
  justify-self: end;
  padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--brand-primary, var(--accent, #e95c2c));
  background: color-mix(in srgb, var(--surface, #f5f1e8) 82%, white);
  border-radius: 0 16px 16px 0;
  opacity: 1;
  color: color-mix(in srgb, var(--ink, #111) 78%, transparent);
  font-size: 1rem;
  line-height: 1.65;
}
.cms-section.align-center .cms-rich-intro.has-body {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.cms-section.align-center .cms-rich-intro-lead h2 { max-width: none; }
.cms-section.align-center .cms-rich-intro-body {
  justify-self: center;
  border-left: 0;
  border-top: 3px solid var(--brand-primary, var(--accent, #e95c2c));
  border-radius: 0 0 16px 16px;
}
.cms-section.on-dark .cms-rich-intro-body {
  background: rgba(255,255,255,.08);
  color: inherit;
}

@media (max-width: 860px) {
  .cms-section.cms-block-rich_text .cms-rich-intro.has-body {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .cms-section.cms-block-rich_text .cms-rich-intro-body {
    justify-self: stretch;
    max-width: none;
  }
}

.cms-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end; }
.cms-hero.hero-h-sm { min-height: 42vh; }
.cms-hero.hero-h-md { min-height: 58vh; }
.cms-hero.hero-h-lg { min-height: 78vh; }
.cms-hero-media { position: absolute; inset: 0; z-index: -1; background: var(--soft); }
.cms-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Flat tint for the whole image, plus a bottom scrim so copy stays readable
   even over bright photographs. */
.cms-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .18) 52%, rgba(0, 0, 0, 0) 78%),
    color-mix(in srgb, #000 calc(var(--overlay, .4) * 100%), transparent);
}
.cms-hero.has-image .cms-hero-copy { color: #fff; padding-bottom: 3rem; }
.cms-hero.has-image .cms-hero-copy h1,
.cms-hero.has-image .cms-hero-copy .lead,
.cms-hero.has-image .cms-hero-copy .eyebrow { color: #fff; opacity: 1; text-shadow: 0 1px 24px rgba(0, 0, 0, .45); }
.cms-hero.has-image .cms-hero-copy .lead { opacity: .94; }
.cms-hero.has-image .btn { background: #fff; color: #111; border-color: #fff; }
.cms-hero.has-image .text-link { color: #fff; }
.cms-hero-copy { padding: 3rem 0; }
.cms-hero-copy .lead { font-size: clamp(1.05rem, 2vw, 1.35rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 1.5rem; }

.cms-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.cms-split.image-left { grid-template-columns: .95fr 1.05fr; }
.cms-split.image-left .cms-split-media { order: -1; }
.cms-split-media img, .cms-image img { width: 100%; display: block; object-fit: cover; border-radius: var(--radius, 14px); background: var(--soft); }
.cms-image.rounded img { border-radius: calc(var(--radius, 14px) + 4px); }
.cms-image figcaption { margin-top: .75rem; font-size: .9rem; }

/* Responsive layout-builder rows. Desktop follows the selected 1–3 column
   count; mobile stacks by default without requiring a second layout. */
.cms-columns-grid {
  display: grid;
  grid-template-columns: repeat(var(--cms-columns, 2), minmax(0, 1fr));
}
.cms-columns-grid.gap-sm { gap: clamp(.75rem, 2vw, 1.25rem); }
.cms-columns-grid.gap-md { gap: clamp(1.25rem, 4vw, 3rem); }
.cms-columns-grid.gap-lg { gap: clamp(2rem, 6vw, 5rem); }
.cms-columns-grid.align-start { align-items: start; }
.cms-columns-grid.align-center { align-items: center; }
.cms-columns-grid.align-end { align-items: end; }
.cms-columns-grid.align-stretch { align-items: stretch; }
/* Three narrow columns get cramped before the mobile stack kicks in. */
@media (min-width: 861px) and (max-width: 1080px) {
  .cms-columns-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cms-column { min-width: 0; }
.cms-column-text .btn { margin-top: 1rem; }
.cms-column-image figure { margin: 0; }
.cms-column-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  border-radius: var(--radius, 14px);
  background: var(--soft);
}
.cms-column-image figcaption {
  margin-top: .65rem;
  color: inherit;
  opacity: .72;
  font-size: .85rem;
}
.cms-gallery { display: grid; gap: 12px; }
.cms-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cms-gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cms-gallery.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cms-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius, 12px); background: var(--soft); }
.cms-highlights.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.cms-highlights.cards article { background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--radius, 14px); padding: 1.1rem; }
.cms-highlights.strip { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; }
.cms-highlights.strip article { padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 999px; }
.cms-menu-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.cms-menu-head-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cms-menu.list {
  display: grid;
  gap: 10px;
}
.cms-menu.list .cms-menu-item,
.cms-menu.list article {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: var(--radius, 16px);
  background: var(--card, #fff);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cms-menu.list .cms-menu-item:hover,
.cms-menu.list article:hover {
  border-color: color-mix(in srgb, var(--brand-primary, #e95c2c) 35%, var(--line, #ddd));
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
}
.cms-menu.list img,
.cms-menu.list .cms-menu-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--soft, #f3f1ec);
}
.cms-menu.list .cms-menu-thumb {
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--brand-primary, #e95c2c);
  font-size: 1.15rem;
}
.cms-menu.list h3 {
  margin: 0 0 .25rem;
  font-size: 1.08rem;
  letter-spacing: -.01em;
}
.cms-menu-copy .muted {
  margin: 0;
  font-size: .9rem;
  line-height: 1.4;
}
.cms-menu-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 88px;
}
.cms-menu-price {
  font-size: 1rem;
  white-space: nowrap;
  color: var(--brand-primary, var(--ink, #111));
}
.cms-menu .cms-add-item {
  min-width: 72px;
}
.cms-menu .cms-add-item.just-added {
  opacity: .85;
}
.cms-menu.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.cms-menu.grid .cms-menu-item,
.cms-menu.grid article {
  display: flex;
  flex-direction: column;
  background: var(--card, #fff);
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: var(--radius, 16px);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cms-menu.grid .cms-menu-item:hover,
.cms-menu.grid article:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.06);
}
.cms-menu.grid img,
.cms-menu.grid .cms-menu-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--soft, #f3f1ec);
  border-radius: 0;
}
.cms-menu.grid .cms-menu-thumb {
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand-primary, #e95c2c);
}
.cms-menu.grid .cms-menu-copy {
  padding: .9rem 1rem .35rem;
  flex: 1;
}
.cms-menu.grid .cms-menu-meta {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: .65rem 1rem 1rem;
  min-width: 0;
}

/* Floating site cart dock */
.alphid-site-cart-dock {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 60;
  width: min(420px, calc(100vw - 24px));
}
.alphid-site-cart-dock.hidden { display: none !important; }
.alphid-site-cart-dock-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 999px;
  background: var(--ink, #111);
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.alphid-site-cart-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.alphid-site-cart-summary strong {
  font-size: .95rem;
}
.alphid-site-cart-summary span {
  font-size: .82rem;
  opacity: .78;
}
.alphid-site-cart-dock .btn {
  border-radius: 999px;
  background: var(--brand-primary, #e95c2c);
  border-color: var(--brand-primary, #e95c2c);
  color: #fff;
  white-space: nowrap;
}
.cms-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cms-reviews blockquote { margin: 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius, 14px); background: var(--card, #fff); }
.cms-visit { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.cms-cta { padding: 1rem 0; }
.cms-form { display: grid; gap: 12px; margin-top: 1.25rem; }
.cms-form label { display: grid; gap: 6px; font-size: .9rem; }
.cms-form input, .cms-form textarea, .cms-form select {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .85rem; background: #fff; color: #111;
}
.cms-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.cms-blog-grid img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius, 14px); background: var(--soft); }
.blog-article .lead { font-size: 1.2rem; opacity: .8; }

.section-head { margin-bottom: 1.75rem; }
.section-head h2 { margin: 0 0 .35rem; }

/* Reviews — Google listing summary, review cards, write-review CTA */
.cms-reviews-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
}
.cms-reviews-head .section-head { margin-bottom: 0; }
.cms-reviews-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: .4rem 0 0; font-size: .9rem; opacity: .9; }
.cms-reviews-summary strong { font-size: 1.55rem; line-height: 1; }
.cms-stars { color: #c8891a; letter-spacing: 1px; white-space: nowrap; }
.cms-reviews-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cms-reviews-link { font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.cms-review-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cms-review-avatar {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--soft, #eee); color: inherit;
}
.cms-review-avatar.is-initial { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.cms-review-who { display: grid; gap: 1px; flex: 1; min-width: 0; }
.cms-review-who strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-review-who span { font-size: .74rem; opacity: .65; }
.cms-reviews blockquote p { margin: .2rem 0 .8rem; line-height: 1.55; }
.cms-reviews blockquote cite { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .58; font-style: normal; }
.cms-reviews-empty { grid-column: 1 / -1; }

/* Gallery — captions and click-to-enlarge */
.cms-gallery figure { margin: 0; }
.cms-gallery figure a { display: block; overflow: hidden; border-radius: var(--radius, 12px); }
.cms-gallery figcaption { margin-top: 6px; font-size: .78rem; opacity: .72; }
.cms-gallery img { transition: transform .35s ease; }
.cms-gallery figure a:hover img { transform: scale(1.03); }

/* Visit — map iframe and actions */
.visit-map iframe { width: 100%; min-height: 360px; border: 0; border-radius: var(--radius, 14px); display: block; }
.visit-map img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; border-radius: var(--radius, 14px); }
.cms-visit-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.visit-address { font-weight: 600; }

@media (max-width: 860px) {
  .cms-split, .cms-split.image-left, .cms-visit { grid-template-columns: 1fr; }
  .cms-columns-grid.stack-mobile { grid-template-columns: 1fr; }
  .cms-split.image-left .cms-split-media { order: 0; }
  .cms-gallery.cols-3, .cms-gallery.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cms-menu.list .cms-menu-item,
  .cms-menu.list article { grid-template-columns: 56px 1fr auto; gap: 12px; padding: 12px; }
  .cms-menu.list img,
  .cms-menu.list .cms-menu-thumb { width: 56px; height: 56px; }
  .alphid-site-cart-dock { bottom: 78px; }
  .cms-hero.hero-h-lg { min-height: 66vh; }
}