/* diner: "sticker" look of the booking-only theme. Cream paper with a dot grid and a checker band on top, thick brown outlines,
   offset shadows, pill buttons, rounded Fredoka titles with a mustard drop. Colors come from look.js (--paper, --card, --ink,
   --muted, --accent, --accent-contrast, --line); teal, mustard and the error red are added here. Only CSS, no markup changes.
   Every rule is prefixed html[data-style="diner"] so it outranks the `.booking .x` base rules in booking-only.css.
   Contrast notes: --muted on --paper/--card >= 6:1; --accent on --paper is only 4.47:1, so error text uses --dn-err;
   muted text is never put on mustard (ink is). */

html[data-style="diner"] {
  --dn-teal: #17665f;
  --dn-mus: #f2b134;
  --dn-err: #a92a16;
  --dn-sh: 4px 4px 0 var(--ink);
  --dn-bw: 2.5px;
}

/* Paper: faint dot grid on the body, checker band on top of the booking section */
html[data-style="diner"] body {
  background: radial-gradient(circle, color-mix(in srgb, var(--ink) 7%, transparent) 1.3px, transparent 1.8px) 0 0 / 16px 16px, var(--paper);
}
html[data-style="diner"] .booking {
  position: relative;
  overflow-x: clip;
  padding-top: calc(3.25rem + env(safe-area-inset-top));
  background: none;
}
html[data-style="diner"] .booking::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  border-bottom: var(--dn-bw) solid var(--ink);
  background: conic-gradient(var(--accent) 25%, var(--card) 0 50%, var(--accent) 0 75%, var(--card) 0) 0 0 / 16px 16px;
}
@media (min-width: 64em) {
  html[data-style="diner"] .booking { padding-top: calc(4.5rem + env(safe-area-inset-top)); }
}

/* One visible focus ring for everything: teal (>= 3:1 on paper and card) */
html[data-style="diner"] :focus-visible { outline: 3px solid var(--dn-teal); outline-offset: 3px; }

/* Header */
html[data-style="diner"] .brand__name { font: 700 clamp(1rem, 0.9rem + 0.5vw, 1.15rem) / 1.1 var(--font-display); letter-spacing: 0.14em; text-indent: 0.14em; }
html[data-style="diner"] .brand__tag {
  display: inline-block;
  max-width: 100%;
  margin-top: 0.45rem;
  padding: 0.2rem 0.65rem;
  font: 700 0.5625rem / 1.2 var(--font-body);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  overflow-wrap: anywhere;
  color: var(--ink);
  background: var(--dn-mus);
  border: 2px solid var(--ink);
  border-radius: 999px;
  transform: rotate(-2deg);
}
html[data-style="diner"] .brand__tag:empty { display: none; }
html[data-style="diner"] .booking .app__btn {
  border: var(--dn-bw) solid var(--ink);
  background: var(--dn-mus);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s;
}
html[data-style="diner"] .booking .app__back { margin-left: 0; grid-column: 1; }
html[data-style="diner"] .booking .app__btn .icon { stroke-width: 2.5; }
html[data-style="diner"] .booking .app__btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
@media (hover: hover) {
  html[data-style="diner"] .booking .app__btn:hover { background: color-mix(in srgb, var(--dn-mus) 80%, var(--card)); box-shadow: 3px 3px 0 var(--ink); }
}

/* Step tracker: dashed track, sticker dots, teal for done steps */
html[data-style="diner"] .booking .steps { margin-top: 1.5rem; }
html[data-style="diner"] .booking .step + .step::before {
  top: 0.9rem;
  right: calc(50% + 1.25rem);
  left: calc(-50% + 1.25rem);
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 11px);
  opacity: 0.45;
}
html[data-style="diner"] .booking .step.is-done + .step::before,
html[data-style="diner"] .booking .step.is-done + .step.is-current::before { background: var(--dn-teal); opacity: 1; }
html[data-style="diner"] .booking .step__btn { gap: 0.5rem; }
html[data-style="diner"] .booking .step__num {
  width: 2rem;
  height: 2rem;
  border: var(--dn-bw) solid var(--ink);
  background: var(--card);
  color: var(--ink);
  font: 700 0.8rem / 1 var(--font-display);
  box-shadow: none;
}
html[data-style="diner"] .booking .step.is-current .step__num { border-color: var(--ink); background: var(--accent); color: var(--accent-contrast); box-shadow: 2px 2px 0 var(--ink); }
html[data-style="diner"] .booking .step.is-done .step__num { border-color: var(--ink); background: var(--dn-teal); color: #fff; }
/* the last step (and a finished booking) paints every done step with --accent in the base: teal here, with the same weight */
html[data-style="diner"] .booking .steps:has(.step:last-child:is(.is-current, .is-done)) .step.is-done .step__num { border-color: var(--ink); background: var(--dn-teal); color: #fff; }
html[data-style="diner"] .booking .step__check { stroke-width: 2.8; }
html[data-style="diner"] .booking .step__label { font-weight: 500; }

/* Titles: chunky rounded with a mustard drop */
html[data-style="diner"] .booking .panel__title {
  font: 700 clamp(2.25rem, 2rem + 1.6vw, 2.9rem) / 1.04 var(--font-display);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-shadow: 3px 3px 0 var(--dn-mus);
}
html[data-style="diner"] .booking .panel__titlebar { flex-wrap: wrap; gap: 0.6rem 1rem; }
html[data-style="diner"] .booking .panel__date {
  padding: 0.25rem 0.7rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  font-weight: 700;
  color: var(--ink);
}

/* Step 1: services as stickers */
html[data-style="diner"] .booking .service-list { gap: 1rem; }
html[data-style="diner"] .booking .service {
  grid-template-columns: 2.125rem minmax(0, 1fr) auto auto;
  gap: 0.7rem;
  padding: 0.95rem 0.9rem 0.95rem 0.85rem;
  border: var(--dn-bw) solid var(--ink);
  border-radius: 0.9rem;
  background: var(--card);
  box-shadow: var(--dn-sh);
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s;
}
html[data-style="diner"] .booking .service__icon {
  box-sizing: border-box;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0.4rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--dn-mus);
  color: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-style="diner"] .booking .service__name { font-weight: 700; overflow-wrap: anywhere; }
html[data-style="diner"] .booking .service__duration { color: var(--muted); }
html[data-style="diner"] .booking .service__price { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
html[data-style="diner"] .booking .service__arrow { width: 0.9rem; height: 0.9rem; color: var(--ink); stroke-width: 2.6; }
html[data-style="diner"] .booking .service.is-selected { background: var(--dn-mus); border-color: var(--ink); box-shadow: 4px 4px 0 var(--accent); transform: rotate(-1deg); }
html[data-style="diner"] .booking .service.is-selected .service__duration { color: var(--ink); }
html[data-style="diner"] .booking .service.is-selected .service__icon { background: var(--card); }
html[data-style="diner"] .booking .service:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
html[data-style="diner"] .booking .service.is-selected:active { box-shadow: 2px 2px 0 var(--accent); }
@media (hover: hover) {
  html[data-style="diner"] .booking .service:hover:not(.is-selected) { background: color-mix(in srgb, var(--dn-mus) 30%, var(--card)); border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
  html[data-style="diner"] .booking .service.is-selected:hover { background: var(--dn-mus); border-color: var(--ink); }
}
/* Loading: dashed ghost stickers that pulse */
html[data-style="diner"] .service--skeleton {
  height: 4.5rem;
  border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--dn-mus) 22%, var(--card));
  animation: bk-pulse 1.2s ease-in-out infinite alternate;
}
html[data-style="diner"] .service-list .service--skeleton + .service--skeleton { margin-top: 0; }

/* Model chip ("Model ales") and extras */
html[data-style="diner"] .booking .model-chip { border: 2px solid var(--ink); border-radius: 0.9rem; background: var(--card); box-shadow: 3px 3px 0 var(--ink); margin-bottom: 1.1rem; }
html[data-style="diner"] .booking .model-chip__text { color: var(--muted); }
html[data-style="diner"] .booking .model-chip__text strong { font-weight: 700; color: var(--ink); }
html[data-style="diner"] .booking .model-chip__clear { color: var(--ink); }
html[data-style="diner"] .booking .addons__title { font-weight: 700; color: var(--ink); }
html[data-style="diner"] .booking .addons__title span { opacity: 1; font-weight: 400; color: var(--muted); }
html[data-style="diner"] .booking .addon {
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s;
}
html[data-style="diner"] .booking .addon__meta { opacity: 1; color: var(--muted); }
html[data-style="diner"] .booking .addon[aria-pressed="true"] { background: var(--dn-mus); border-color: var(--ink); color: var(--ink); font-weight: 700; }
html[data-style="diner"] .booking .addon[aria-pressed="true"] .addon__meta { opacity: 1; color: var(--ink); }
html[data-style="diner"] .booking .addon:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
@media (hover: hover) {
  html[data-style="diner"] .booking .addon:hover { border-color: var(--ink); background: color-mix(in srgb, var(--dn-mus) 30%, var(--card)); }
  html[data-style="diner"] .booking .addon[aria-pressed="true"]:hover { background: var(--dn-mus); }
}

/* Step 2: month calendar. The cells are stickers of their own (there is no card around the calendar in the markup) */
html[data-style="diner"] .booking .cal__head { margin-bottom: 0.9rem; }
html[data-style="diner"] .booking .cal__month { font: 700 1.2rem / 1.1 var(--font-display); }
html[data-style="diner"] .booking .cal__step {
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--ink);
  background: var(--dn-mus);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s;
}
html[data-style="diner"] .booking .cal__step .icon { stroke-width: 2.6; }
html[data-style="diner"] .booking .cal__step:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
html[data-style="diner"] .booking .cal__step:disabled { opacity: 1; background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--ink) 40%, transparent); box-shadow: none; color: var(--muted); }
@media (hover: hover) {
  html[data-style="diner"] .booking .cal__step:hover:not(:disabled) { background: color-mix(in srgb, var(--dn-mus) 80%, var(--card)); box-shadow: 3px 3px 0 var(--ink); }
}
html[data-style="diner"] .booking .cal__dow { font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
html[data-style="diner"] .booking .cal__dow, html[data-style="diner"] .booking .cal__grid { gap: 0.35rem; }
html[data-style="diner"] .booking .day {
  border: 2px solid var(--line);
  border-radius: 0.75rem;
  background: var(--card);
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
html[data-style="diner"] .booking .day:disabled,
html[data-style="diner"] .booking .day[data-state="outside"] {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  text-decoration: line-through;
}
html[data-style="diner"] .booking .day[data-state="outside"]:not(:disabled) { text-decoration: none; }
html[data-style="diner"] .booking .day--today:not([aria-pressed="true"]) { border: 2px dashed var(--ink); box-shadow: none; }
html[data-style="diner"] .booking .day[aria-pressed="true"] {
  border: 2px solid var(--ink);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--ink);
}
@media (hover: hover) {
  html[data-style="diner"] .booking .day:hover:not(:disabled):not([aria-pressed="true"]) {
    border-color: var(--ink);
    background: color-mix(in srgb, var(--dn-mus) 30%, var(--card));
    box-shadow: 2px 2px 0 var(--ink);
  }
}
html[data-style="diner"] .booking .day--skeleton { border: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); background: color-mix(in srgb, var(--card) 60%, transparent); }
html[data-style="diner"] .booking .day--blank { visibility: hidden; }
/* Busy dots: green / mustard / red, each with an ink ring so they read on cream and on the red selected day */
html[data-style="diner"] [data-load="low"] { --load: var(--dn-teal); }
html[data-style="diner"] [data-load="mid"] { --load: var(--dn-mus); }
html[data-style="diner"] [data-load="high"] { --load: var(--accent); }
html[data-style="diner"] .booking .day[data-load]::after,
html[data-style="diner"] .booking .cal__legend span::before {
  box-sizing: border-box;
  width: 0.5rem;
  height: 0.5rem;
  border: 1.5px solid var(--ink);
}
html[data-style="diner"] .booking .day[data-load]::after { bottom: 0.2rem; margin-left: -0.25rem; }
html[data-style="diner"] .booking .day[aria-pressed="true"]::after { background: var(--card); }
html[data-style="diner"] .booking .cal__legend { gap: 0.4rem 1rem; font-size: 0.72rem; font-weight: 500; color: var(--muted); }

/* Step 3: times as pills */
html[data-style="diner"] .booking .time-grid { gap: 0.8rem 0.7rem; }
html[data-style="diner"] .booking .time:not(:disabled) {
  min-height: 3.2rem;
  border: var(--dn-bw) solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-weight: 500;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s;
}
html[data-style="diner"] .booking .time:disabled {
  border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  text-decoration: line-through;
}
html[data-style="diner"] .booking .time:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
html[data-style="diner"] .booking .time[aria-pressed="true"]:not(:disabled),
html[data-style="diner"] .booking .time[aria-selected="true"]:not(:disabled) {
  border-color: var(--ink);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
}
@media (hover: hover) {
  html[data-style="diner"] .booking .time:hover:not(:disabled):not([aria-pressed="true"]):not([aria-selected="true"]) {
    border-color: var(--ink);
    background: color-mix(in srgb, var(--dn-mus) 30%, var(--card));
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
  }
}

/* Status and errors (accent on paper is 4.47:1, so a deeper red for text) */
html[data-style="diner"] .panel__error,
html[data-style="diner"] .form-error {
  padding: 0.6rem 0.85rem;
  border: 2px solid var(--dn-err);
  border-radius: 0.75rem;
  background: var(--card);
  font-weight: 500;
  color: var(--dn-err);
}
html[data-style="diner"] .panel__error .link-btn,
html[data-style="diner"] .form-error .link-btn { color: var(--dn-err); }
html[data-style="diner"] .booking .link-btn { font-weight: 500; text-decoration-thickness: 2px; text-decoration-color: var(--dn-mus); }
@media (hover: hover) {
  html[data-style="diner"] .booking .link-btn:hover { color: var(--dn-teal); text-decoration-color: currentColor; }
}

/* Big pill under each step */
html[data-style="diner"] .booking .cta {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-contrast);
  margin-top: 1.9rem;
  padding-inline: 1.1rem;
  border: var(--dn-bw) solid var(--ink);
  box-shadow: var(--dn-sh);
  font: 700 0.9rem / 1.2 var(--font-body);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: normal;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s;
}
html[data-style="diner"] .booking .confirm .cta { margin-top: 0.9rem; }
html[data-style="diner"] .booking .cta .icon { stroke-width: 2.4; }
html[data-style="diner"] .booking .cta:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
html[data-style="diner"] .booking .cta:disabled {
  --btn-bg: transparent;
  --btn-fg: var(--muted);
  opacity: 1;
  border: 2px dashed color-mix(in srgb, var(--ink) 40%, transparent);
  box-shadow: none;
}
html[data-style="diner"] .booking .cta.is-busy { opacity: 0.8; }
@media (hover: hover) {
  html[data-style="diner"] .booking .cta:hover:not(:disabled) {
    --btn-bg: color-mix(in srgb, var(--accent) 88%, #000);
    filter: none;
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--ink);
  }
}

/* Step 4: the booking as a ticket with a teal header */
html[data-style="diner"] .booking .confirm__summary {
  gap: 0.9rem;
  padding: 0 1.1rem 1.2rem;
  overflow: hidden;
  border: var(--dn-bw) solid var(--ink);
  border-radius: 0.9rem;
  background: var(--card);
  box-shadow: var(--dn-sh);
}
html[data-style="diner"] .booking .confirm__summary::before {
  content: "Rezervarea ta";
  display: block;
  margin: 0 -1.1rem 0.1rem;
  padding: 0.5rem 1.1rem;
  border-bottom: var(--dn-bw) solid var(--ink);
  background: var(--dn-teal);
  font: 700 0.75rem / 1.2 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
html[data-style="diner"] .booking .confirm__row { gap: 0.9rem; }
html[data-style="diner"] .booking .confirm__row + .confirm__row { padding-top: 0.9rem; border-top: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
html[data-style="diner"] .booking .confirm__row > .icon {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0.4rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--dn-mus);
  color: var(--ink);
  stroke-width: 2;
}
html[data-style="diner"] .booking .confirm__value { font-weight: 500; overflow-wrap: anywhere; color: var(--ink); }
html[data-style="diner"] .booking .confirm__value small { color: var(--muted); }
html[data-style="diner"] .booking .confirm__price { font-weight: 700; color: var(--ink); }
html[data-style="diner"] .booking .confirm__avatar { border: 2px solid var(--ink); background: var(--dn-mus); font: 700 1.2rem / 1 var(--font-display); color: var(--ink); }

/* Form fields */
html[data-style="diner"] .booking .field { gap: 0.4rem; }
html[data-style="diner"] .booking .field label { font-weight: 700; color: var(--ink); }
html[data-style="diner"] .booking .field__optional { opacity: 1; font-weight: 400; color: var(--muted); }
html[data-style="diner"] .booking .field input,
html[data-style="diner"] .booking .field textarea {
  min-width: 0;
  border: var(--dn-bw) solid var(--ink);
  border-radius: 0.75rem;
  background: var(--card);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
html[data-style="diner"] .booking .field input::placeholder,
html[data-style="diner"] .booking .field textarea::placeholder { color: var(--muted); opacity: 1; }
html[data-style="diner"] .booking .field input:focus,
html[data-style="diner"] .booking .field textarea:focus {
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--dn-teal);
  outline: 2px solid var(--dn-teal);
  outline-offset: 2px;
}
html[data-style="diner"] .booking .field.is-invalid input,
html[data-style="diner"] .booking .field.is-invalid textarea { border-color: var(--dn-err); box-shadow: 3px 3px 0 var(--dn-err); }
html[data-style="diner"] .booking .field__error { font-weight: 500; color: var(--dn-err); }
html[data-style="diner"] .booking .remember { color: var(--muted); }
html[data-style="diner"] .booking .confirm__note { color: var(--muted); }
html[data-style="diner"] .booking .confirm__note a { font-weight: 500; text-decoration-color: var(--dn-mus); text-decoration-thickness: 2px; }

/* Salon card under the form */
html[data-style="diner"] .salon-card { margin: 0.25rem 0; padding: 0.75rem 1rem; border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 0.9rem; background: var(--card); color: var(--ink); }
html[data-style="diner"] .salon-card__name { font: 700 0.95rem / 1.2 var(--font-display); }
html[data-style="diner"] .salon-card__row { align-items: flex-start; }
html[data-style="diner"] .salon-card__row .icon { margin-top: 0.2rem; color: var(--dn-teal); stroke-width: 2.2; }
html[data-style="diner"] .salon-card__row a { overflow-wrap: anywhere; text-decoration-color: var(--dn-mus); text-decoration-thickness: 2px; }

/* Success screen */
html[data-style="diner"] .booking .confirm-done__icon {
  width: 4rem;
  height: 4rem;
  padding: 0.9rem;
  border: var(--dn-bw) solid var(--ink);
  border-radius: 50%;
  background: var(--dn-teal);
  box-shadow: var(--dn-sh);
  color: #fff;
  stroke-width: 3;
  transform: rotate(-4deg);
}
html[data-style="diner"] .confirm-done__title { font: 700 clamp(2rem, 1.7rem + 1.6vw, 2.5rem) / 1.1 var(--font-display); text-shadow: 3px 3px 0 var(--dn-mus); overflow-wrap: anywhere; }
html[data-style="diner"] .confirm-done__text { color: var(--muted); overflow-wrap: anywhere; }
html[data-style="diner"] .confirm-done__text [data-done-summary] { font-weight: 700; color: var(--ink); }
html[data-style="diner"] .confirm-done__actions { gap: 0.4rem 1.25rem; }
html[data-style="diner"] .confirm-done__actions .btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-contrast);
  padding-inline: 1.4rem;
  border: var(--dn-bw) solid var(--ink);
  box-shadow: var(--dn-sh);
  font: 700 0.9rem / 1.2 var(--font-body);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: normal;
}
html[data-style="diner"] .confirm-done__actions .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
@media (hover: hover) {
  html[data-style="diner"] .confirm-done__actions .btn:hover { --btn-bg: color-mix(in srgb, var(--accent) 88%, #000); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
}

/* Footer / #contact: a diner receipt under the page */
html[data-style="diner"] .footer.theme-dark { border-top: var(--dn-bw) solid var(--ink); }
html[data-style="diner"] .footer__heading {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--dn-mus);
  font: 700 0.65rem / 1.2 var(--font-body);
  letter-spacing: 0.18em;
  color: var(--ink);
  transform: rotate(-2deg);
}
html[data-style="diner"] .footer__hours dl { gap: 0; }
html[data-style="diner"] .footer__hours dl > div { padding-block: 0.3rem; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 20%, transparent); }
html[data-style="diner"] .footer__hours dl > div:last-child { border-bottom: 0; }
html[data-style="diner"] .footer__hours dt { color: var(--muted); }
html[data-style="diner"] .footer__hours dd { font-weight: 500; color: var(--ink); }
html[data-style="diner"] .footer__address { color: var(--ink); overflow-wrap: anywhere; }
html[data-style="diner"] .footer__links { gap: 0.6rem 0.7rem; }
html[data-style="diner"] .footer__links a {
  padding: 0 0.95rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-weight: 700;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s;
}
html[data-style="diner"] .footer__links .icon { color: var(--dn-teal); stroke-width: 2.2; }
html[data-style="diner"] .footer__links a:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
@media (hover: hover) {
  html[data-style="diner"] .footer__links a:hover { background: var(--dn-mus); text-decoration: none; box-shadow: 3px 3px 0 var(--ink); }
  html[data-style="diner"] .footer__links a:hover .icon { color: var(--ink); }
}
html[data-style="diner"] .footer__anpc { border-top: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
html[data-style="diner"] .footer__legal { color: var(--muted); }
html[data-style="diner"] .footer__legal a { font-weight: 500; color: var(--ink); text-decoration-color: var(--dn-mus); text-decoration-thickness: 2px; }

@media (prefers-reduced-motion: reduce) {
  html[data-style="diner"] .service--skeleton { animation: none; }
  html[data-style="diner"] .booking .service,
  html[data-style="diner"] .booking .time,
  html[data-style="diner"] .booking .cta,
  html[data-style="diner"] .booking .addon,
  html[data-style="diner"] .booking .app__btn,
  html[data-style="diner"] .booking .cal__step { transition: none; }
}