:root {
  --color-bg: #faf7f2;
  --color-primary: #0f766e;
  --color-secondary: #57534e;
  --color-text: #14213d;
  --color-accent: #f1ebe1;
  --color-grad-from: #fffdf9;
  --color-grad-to: #f3ede4;
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

html.dark {
  --color-bg: #0f172a;
  --color-text: #f1f5f9;
  --color-accent: #1e293b;
  --color-secondary: #94a3b8;
}

.wf-glass {
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

form[data-feature="contactForm"] input,
form[data-feature="contactForm"] textarea,
form[data-feature="contactForm"] select {
  background: #ffffff;
  color: #111827;
}
form[data-feature="contactForm"] input::placeholder,
form[data-feature="contactForm"] textarea::placeholder {
  color: #6b7280;
}

.wf-menu-wrap { max-width: 48rem; margin-inline: auto; padding-inline: 1.5rem; }
.wf-menu-wrap:has(#menu_list:is([data-cols="2"],[data-cols="3"],[data-cols="4"],[data-cols="6"])) { max-width: 72rem; }
#menu_list .wf-menu-item { position: relative; overflow: hidden; padding: 1.25rem 0; border-bottom: 1px solid rgba(0,0,0,.1); }
#menu_list:is([data-cols="2"],[data-cols="3"],[data-cols="4"],[data-cols="6"]) { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
#menu_list:is([data-cols="2"],[data-cols="3"],[data-cols="4"],[data-cols="6"]) .wf-menu-item { height: 100%; padding: 1.25rem; border: 1px solid rgba(0,0,0,.1); border-radius: .75rem; }
@media (min-width: 640px) { #menu_list:is([data-cols="2"],[data-cols="3"],[data-cols="4"],[data-cols="6"]) { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 768px) { #menu_list[data-cols="6"] { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width: 1024px) {
  #menu_list[data-cols="3"] { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #menu_list[data-cols="4"] { grid-template-columns: repeat(4,minmax(0,1fr)); }
  #menu_list[data-cols="6"] { grid-template-columns: repeat(6,minmax(0,1fr)); }
}
.wf-menu-row { position: relative; display: flex; gap: 1rem; align-items: baseline; }
.wf-has-img .wf-menu-row { align-items: center; }
.wf-menu-text { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; }
.wf-menu-desc { color: var(--color-secondary); }
.wf-menu-price { color: var(--color-primary); }
.wf-menu-img { display: block; width: 5rem; height: 5rem; border-radius: .5rem; object-fit: cover; flex-shrink: 0; margin-right: 1rem; }
#menu_list .wf-has-img { display: flex; align-items: center; }
#menu_list .wf-has-img .wf-menu-row { flex: 1; min-width: 0; }
@media (min-width: 768px) { .wf-menu-img { width: 6rem; height: 6rem; } }
#menu_list[data-img-pos="right"] .wf-has-img .wf-menu-img { order: 2; margin: 0 0 0 1rem; }
.wf-menu-overlay { display: none; }
#menu_list[data-img-pos="background"] .wf-has-img { display: block; min-height: 10rem; padding: 1.25rem; border-radius: .75rem; border-color: transparent; }
#menu_list:not(:is([data-cols="2"],[data-cols="3"],[data-cols="4"],[data-cols="6"]))[data-img-pos="background"] .wf-has-img { margin: .5rem 0; }
#menu_list[data-img-pos="background"] .wf-has-img .wf-menu-img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; }
#menu_list[data-img-pos="background"] .wf-has-img .wf-menu-overlay { display: block; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
#menu_list[data-img-pos="background"] .wf-has-img .wf-menu-title, #menu_list[data-img-pos="background"] .wf-has-img .wf-menu-price { color: #ffffff; }
#menu_list[data-img-pos="background"] .wf-has-img .wf-menu-desc { color: #f3f4f6; }
#menu_list[data-zoom="on"] .wf-has-img .wf-menu-img { position: relative; z-index: 20; cursor: zoom-in; }
#menu_list[data-zoom="on"][data-img-pos="background"] .wf-has-img { cursor: zoom-in; }
#menu_list[data-zoom="on"][data-img-pos="background"] .wf-has-img .wf-menu-img { position: absolute; z-index: 0; }

.wf-card-bg > img[data-field="bg"] { opacity: var(--wf-bg-op, 1); filter: var(--wf-bg-filter, none); transition: opacity .5s ease; pointer-events: none; }
.wf-card-bg > .wf-card-ov { position: absolute; inset: 0; pointer-events: none; transition: opacity .5s ease; }
.wf-card-bg[data-bg-overlay="none"] > .wf-card-ov { display: none; }
.wf-card-bg[data-bg-overlay="dark"] > .wf-card-ov { background: rgba(0,0,0,var(--wf-ov-op, .45)); }
.wf-card-bg[data-bg-overlay="light"] > .wf-card-ov { background: rgba(255,255,255,var(--wf-ov-op, .45)); }
.wf-card-bg[data-bg-overlay="primary"] > .wf-card-ov { background: color-mix(in srgb, var(--color-primary) var(--wf-ov-pct, 45%), transparent); }
.wf-card-bg [data-field] { transition: color .5s ease; }
.wf-card-bg:not([data-bg-mode="hover"]):is([data-bg-overlay="dark"],[data-bg-overlay="primary"]) { --wf-fg1: #ffffff; --wf-fg2: #f3f4f6; }
.wf-card-bg[data-bg-mode="watermark"] > img[data-field="bg"] { inset: auto; width: auto; height: var(--wf-bg-size, 120%); max-width: none; object-fit: contain; }
.wf-card-bg[data-bg-mode="watermark"][data-bg-pos="br"] > img[data-field="bg"] { right: 0; bottom: 0; transform: translate(var(--wf-bg-crop, 50%), var(--wf-bg-crop, 50%)); }
.wf-card-bg[data-bg-mode="watermark"][data-bg-pos="bl"] > img[data-field="bg"] { left: 0; bottom: 0; transform: translate(calc(-1 * var(--wf-bg-crop, 50%)), var(--wf-bg-crop, 50%)); }
.wf-card-bg[data-bg-mode="watermark"][data-bg-pos="tr"] > img[data-field="bg"] { right: 0; top: 0; transform: translate(var(--wf-bg-crop, 50%), calc(-1 * var(--wf-bg-crop, 50%))); }
.wf-card-bg[data-bg-mode="watermark"][data-bg-pos="tl"] > img[data-field="bg"] { left: 0; top: 0; transform: translate(calc(-1 * var(--wf-bg-crop, 50%)), calc(-1 * var(--wf-bg-crop, 50%))); }
.wf-card-bg[data-bg-mode="watermark"][data-bg-pos="r"] > img[data-field="bg"] { right: 0; top: 50%; transform: translate(var(--wf-bg-crop, 50%), -50%); }
.wf-card-bg[data-bg-mode="watermark"][data-bg-pos="l"] > img[data-field="bg"] { left: 0; top: 50%; transform: translate(calc(-1 * var(--wf-bg-crop, 50%)), -50%); }
.wf-card-bg[data-bg-mode="watermark"][data-bg-pos="c"] > img[data-field="bg"] { left: 50%; top: 50%; transform: translate(-50%, -50%); }
@media (hover: hover) {
  .wf-card-bg[data-bg-mode="hover"] > img[data-field="bg"], .wf-card-bg[data-bg-mode="hover"] > .wf-card-ov { opacity: 0; }
  .wf-card-bg[data-bg-mode="hover"]:is(:hover,:focus-within) > img[data-field="bg"] { opacity: var(--wf-bg-op, 1); }
  .wf-card-bg[data-bg-mode="hover"]:is(:hover,:focus-within) > .wf-card-ov { opacity: 1; }
  .wf-card-bg[data-bg-mode="hover"]:is([data-bg-overlay="dark"],[data-bg-overlay="primary"]):is(:hover,:focus-within) { --wf-fg1: #ffffff; --wf-fg2: #f3f4f6; }
}
@media (hover: none) {
  .wf-card-bg[data-bg-mode="hover"] > img[data-field="bg"] { inset: auto; width: auto; height: var(--wf-bg-size, 120%); max-width: none; object-fit: contain; }
  .wf-card-bg[data-bg-mode="hover"][data-bg-pos="br"] > img[data-field="bg"] { right: 0; bottom: 0; transform: translate(var(--wf-bg-crop, 50%), var(--wf-bg-crop, 50%)); }
  .wf-card-bg[data-bg-mode="hover"][data-bg-pos="bl"] > img[data-field="bg"] { left: 0; bottom: 0; transform: translate(calc(-1 * var(--wf-bg-crop, 50%)), var(--wf-bg-crop, 50%)); }
  .wf-card-bg[data-bg-mode="hover"][data-bg-pos="tr"] > img[data-field="bg"] { right: 0; top: 0; transform: translate(var(--wf-bg-crop, 50%), calc(-1 * var(--wf-bg-crop, 50%))); }
  .wf-card-bg[data-bg-mode="hover"][data-bg-pos="tl"] > img[data-field="bg"] { left: 0; top: 0; transform: translate(calc(-1 * var(--wf-bg-crop, 50%)), calc(-1 * var(--wf-bg-crop, 50%))); }
  .wf-card-bg[data-bg-mode="hover"][data-bg-pos="r"] > img[data-field="bg"] { right: 0; top: 50%; transform: translate(var(--wf-bg-crop, 50%), -50%); }
  .wf-card-bg[data-bg-mode="hover"][data-bg-pos="l"] > img[data-field="bg"] { left: 0; top: 50%; transform: translate(calc(-1 * var(--wf-bg-crop, 50%)), -50%); }
  .wf-card-bg[data-bg-mode="hover"][data-bg-pos="c"] > img[data-field="bg"] { left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .wf-card-bg[data-bg-mode="hover"] > img[data-field="bg"] { opacity: min(var(--wf-bg-op, 1), .2); }
  .wf-card-bg[data-bg-mode="hover"] > .wf-card-ov { display: none; }
}