/* TAWYLO · choice cards in the styles chosen in Brand & content → «Choice cards style» (assets/fork-cards.js).
   Loaded by the guest site and by the admin (style gallery, phone preview). Every rule is scoped to
   .fork-cards.fs-<style>, so the classic cards (assets/app.css) stay exactly as they were.
   Variables: the guest theme (--bg --surface --acc --acc-tx --tx --pri); [data-scheme=light] = a light theme. */

.fork-cards.fs-plate,.fork-cards.fs-illus,.fork-cards.fs-glass{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:720px;margin-inline:auto;align-items:stretch}
.fork-cards[class*="fs-"] .fork-card{font:inherit;text-align:center;-webkit-tap-highlight-color:transparent;cursor:pointer;min-width:0;margin:0;outline-offset:3px}
.fork-cards[class*="fs-"] .fork-card:focus-visible{outline:2px solid var(--acc)}
html .fork-cards[class*="fs-"] .fork-card .fk-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
html .fork-cards[class*="fs-"] .fork-card .fk-tx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-weight:800;letter-spacing:0;line-height:1.4;padding-bottom:.06em}
html .fork-cards[class*="fs-"] .fork-card .fk-tx small{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;line-height:1.45;font-size:12px;font-weight:500}
.fork-cards[class*="fs-"] .fc-ico,.fork-cards[class*="fs-"] .fc-chev{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
[dir=rtl] .fork-cards[class*="fs-"] .fc-chev{transform:scaleX(-1)}

/* the cards size themselves by the space they get (guest hero or the admin's 390 px stage), not by the window */
.fork:has(> .fork-cards[class*="fs-"]),.fcs-stage{container:fc/inline-size}

/* ---------- A · Plate: a warm ivory card; the dish photo floats out of the top as a round plate ---------- */
html .fork-cards.fs-plate{padding-top:46px;row-gap:56px}
html .fork-cards.fs-plate .fork-card{position:relative;overflow:visible;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:62px 12px 16px;border-radius:24px;border:0;
  background:linear-gradient(180deg,#fffdf9,#f7efe2);color:#2b2219;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 36px -22px rgba(20,12,4,.55),0 4px 10px -6px rgba(20,12,4,.25);transition:transform .18s ease,box-shadow .3s ease;transform:none}
html .fork-cards.fs-plate .fork-card::after{display:none}
.fs-plate .fp-ph{position:absolute;top:-46px;left:50%;width:98px;height:98px;margin-left:-49px;border-radius:50%;background:#fff;padding:4px;box-sizing:border-box;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 38%,transparent),0 14px 26px -12px rgba(20,12,4,.55),0 3px 8px -4px rgba(20,12,4,.3)}
.fs-plate .fp-ph img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.fs-plate .fp-ph::before{content:"";position:absolute;inset:4px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -10px 18px -10px rgba(0,0,0,.25);pointer-events:none;z-index:1}
.fs-plate .fp-ic{position:absolute;bottom:-2px;inset-inline-end:-4px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--fc-acc,color-mix(in srgb,var(--acc) 62%,#2b1d08));box-shadow:0 4px 12px -4px rgba(20,12,4,.45);z-index:2}
.fs-plate .fp-ic .fc-ico{width:17px;height:17px}
html .fork-cards.fs-plate .fork-card .fk-tx{align-items:center;text-align:center}
html .fork-cards.fs-plate .fork-card .fk-tx b{font-size:16px;color:#2b2219}
html .fork-cards.fs-plate .fork-card .fk-tx small{color:#7a6a58}
html .fork-cards.fs-plate .fork-card .fk-tx::after{content:"";display:block;width:26px;height:2px;border-radius:2px;margin:6px auto 0;background:color-mix(in srgb,var(--acc) 70%,#8a6a2a);opacity:.85;order:1}
[data-scheme=light] .fork-cards.fs-plate .fork-card{background:linear-gradient(180deg,#ffffff,color-mix(in srgb,var(--surface,#fff) 70%,#f6efe4));box-shadow:0 0 0 1px rgba(60,40,10,.06),0 18px 36px -24px rgba(40,25,5,.45)}

/* ---------- B · Illustrated: no photos — a calm editorial card with a fine duo-tone drawing in the theme colours ---------- */
html .fork-cards.fs-illus .fork-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px 16px;border-radius:24px;transform:none;
  --fc-ln:var(--acc);--fc-fl:color-mix(in srgb,var(--acc) 20%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 86%,var(--acc) 14%),color-mix(in srgb,var(--surface) 94%,var(--acc) 6%));
  border:1px solid color-mix(in srgb,var(--acc) 22%,transparent);color:var(--tx);box-shadow:0 18px 38px -26px rgba(0,0,0,.75);transition:transform .18s ease,border-color .3s ease;backdrop-filter:none}
html .fork-cards.fs-illus .fork-card::after{display:none}
[data-scheme=light] .fork-cards.fs-illus .fork-card{--fc-ln:color-mix(in srgb,var(--acc) 72%,#22180a);--fc-fl:color-mix(in srgb,var(--acc) 24%,#fff);background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 10%,#fff),#fff);box-shadow:0 0 0 1px rgba(60,40,10,.05),0 16px 32px -24px rgba(40,25,5,.4)}
.fs-illus .fi-art{display:block;width:100%;max-width:190px;aspect-ratio:160/100}
.fs-illus .fc-art{width:100%;height:100%;display:block;overflow:visible;fill:none;stroke:var(--fc-ln);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.fs-illus .fc-art .f{fill:var(--fc-fl);stroke:none}.fs-illus .fc-art .d{fill:var(--fc-ln);stroke:none}
.fs-illus .fc-art .g{fill:color-mix(in srgb,var(--acc) 16%,transparent);stroke:none;filter:blur(6px)}
.fs-illus .fc-art .s{stroke-width:1.6;opacity:.6;stroke-dasharray:none}
html .fork-cards.fs-illus .fork-card .fk-tx{align-items:center;text-align:center}html .fork-cards.fs-illus .fork-card .fk-tx b{font-size:16px}html .fork-cards.fs-illus .fork-card .fk-tx small{opacity:.78}
.fs-illus .fi-go{position:absolute;top:12px;inset-inline-end:12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--fc-ln);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.fs-illus .fi-go .fc-chev{width:14px;height:14px}

/* ---------- C · Glass: frosted panels over the hero photo, a small photo thumbnail, title, line and a chevron ---------- */
html .fork-cards.fs-glass .fork-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px 12px 12px;border-radius:22px;text-align:start;transform:none;
  background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.15);color:#fff;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 28px rgba(255,255,255,.05),0 20px 40px -26px rgba(0,0,0,.7);transition:transform .18s ease,background .3s ease}
html .fork-cards.fs-glass .fork-card::after{display:none}
[data-scheme=light] .fork-cards.fs-glass .fork-card{background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.56));border-color:rgba(255,255,255,.7);color:var(--tx);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 36px -24px rgba(30,20,5,.45)}
.fs-glass .fg-th{width:58px;height:58px;border-radius:16px;overflow:hidden;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 8px 18px -8px rgba(0,0,0,.6);background:rgba(255,255,255,.12)}
.fs-glass .fg-th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
html .fork-cards.fs-glass .fork-card .fk-tx b{font-size:15.5px}html .fork-cards.fs-glass .fork-card .fk-tx small{opacity:.8}
.fs-glass .fg-go{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18)}
[data-scheme=light] .fs-glass .fg-go{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.06)}
.fs-glass .fg-go .fc-chev{width:15px;height:15px}
@container fc (max-width:480px){html .fork-cards.fs-glass{grid-template-columns:minmax(0,1fr);gap:10px}}

/* ---------- motion: a gentle press for all; a slow photo zoom on hover / focus (pointer devices only) ---------- */
html .fork-cards[class*="fs-"] .fork-card:active{transform:scale(.98)}
@media(hover:hover){
  html .fork-cards.fs-plate .fork-card:hover,html .fork-cards.fs-illus .fork-card:hover,html .fork-cards.fs-glass .fork-card:hover{transform:translateY(-3px)}
  .fs-plate .fork-card:hover .fp-ph img,.fs-plate .fork-card:focus-visible .fp-ph img,.fs-glass .fork-card:hover .fg-th img,.fs-glass .fork-card:focus-visible .fg-th img{transform:scale(1.07)}
  .fs-illus .fork-card:hover{border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
}
@media(prefers-reduced-motion:reduce){.fork-cards[class*="fs-"] .fork-card,.fork-cards[class*="fs-"] img{transition:none!important;transform:none!important}}

/* ---------- small phones and desktop ---------- */
@container fc (max-width:340px){
  html .fork-cards.fs-plate,html .fork-cards.fs-illus{gap:10px}
  .fs-plate .fp-ph{width:86px;height:86px;margin-left:-43px;top:-40px}html .fork-cards.fs-plate{padding-top:40px}html .fork-cards.fs-plate .fork-card{padding-top:54px}
  html .fork-cards[class*="fs-"] .fork-card .fk-tx b{font-size:14.5px}
}
@container fc (min-width:600px){
  .fork-cards.fs-plate,.fork-cards.fs-illus,.fork-cards.fs-glass{gap:20px}
  .fs-plate .fp-ph{width:116px;height:116px;margin-left:-58px;top:-54px}html .fork-cards.fs-plate{padding-top:54px}html .fork-cards.fs-plate .fork-card{padding:72px 18px 20px}
  html .fork-cards[class*="fs-"] .fork-card .fk-tx b{font-size:18px}html .fork-cards[class*="fs-"] .fork-card .fk-tx small{font-size:13px}
  .fs-glass .fg-th{width:70px;height:70px;border-radius:18px}html .fork-cards.fs-glass .fork-card{padding:14px 18px 14px 14px}
}