/* Shared styles for business module components embedded in generated
   websites. Components read the website's theme tokens so the AI's design
   (colours, fonts, corner radius) flows into every module:
   --accent, --text, --quiet, --surface, --module-radius, --module-font. */
.business-module {
  --module-surface: var(--surface, #fff);
  --module-line: color-mix(in srgb, var(--text, #23273a) 14%, transparent);
  --module-radius: var(--radius, 14px);
  color: var(--text, inherit);
  font-family: var(--module-font, inherit);
  min-width: 0;
  max-width: 100%;
}
.business-module *,
.business-module *::before,
.business-module *::after {
  box-sizing: border-box;
}
/* Components toggle parts of themselves with the hidden attribute; never let
   a layout rule (display: grid/flex/block) or generated CSS show them. */
.business-module [hidden] {
  display: none !important;
}
/* Theme: text on the brand color stays readable (--on-accent is black or
   white, chosen for contrast) and buttons follow the chosen shape. */
.generated-business .business-button,
.generated-business .business-button:hover {
  color: var(--on-accent, #fff);
}
.generated-business .business-button {
  border-radius: var(--button-radius, 40px);
}
.business-module img {
  max-width: 100%;
  height: auto;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.module-empty,
.module-note {
  color: var(--quiet, #6b7080);
}
.module-note {
  display: block;
  margin-top: 10px;
  font-size: 0.85em;
}

/* Opening hours */
.hours-list {
  display: grid;
  gap: 2px;
  margin: 0;
}
.hours-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--module-line);
}
.hours-list dt {
  font-weight: 600;
}
.hours-list dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hours-list .is-today dt::after {
  content: " · Today";
  color: var(--accent, currentColor);
  font-weight: 500;
}
.hours-closures {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 6px;
}

/* Location */
.location-address {
  font-style: normal;
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}

/* Layout guards for every AI-generated page: media never overflows the
   viewport, long words wrap, and stray wide elements never cause sideways
   scrolling on phones. */
.generated-business {
  overflow-x: clip;
  overflow-wrap: break-word;
}
/* Zero specificity: any rule in the generated design still wins. */
:where(.generated-business) :where(img, video, svg, iframe) {
  max-width: 100%;
}
:where(.generated-business) :where(img) {
  height: auto;
}
:where(.generated-business) :where(h1, h2, h3) {
  overflow-wrap: anywhere;
}