/* YalaTap — tap-page core components. Shared by every business demo.
   A page supplies the theme via these variables and gets the review flow,
   trust bar, stars, skeletons and micro-interactions for free. Nothing here
   hardcodes a colour: it all resolves against the host page's palette. */

:root{
  /* theme hooks — a page overrides only what it needs */
  --tc-accent:      var(--accent, var(--gold, #2231DE));
  --tc-accent-soft: var(--accent-tint, var(--gold-tint, #E6E8FB));
  --tc-ink:         var(--text, #0E0F11);
  --tc-ink-2:       var(--ink-2, #54534E);
  --tc-muted:       var(--ink-2, #54534E);   /* label text must clear AA at 10–13px */
  --tc-card:        var(--card, #fff);
  --tc-line:        var(--line, #E4E2DC);
  --tc-paper:       var(--paper, #F6F5F1);
  --tc-star:        var(--star, #F4B400);
  --tc-r:           var(--r, 16px);
  --tc-r-lg:        var(--r-lg, 22px);
  --tc-r-pill:      var(--r-pill, 999px);
  --tc-ease:        var(--ease, cubic-bezier(.22,1,.36,1));
  --tc-spring:      var(--spring, cubic-bezier(.34,1.4,.5,1));
  --tc-shadow:      var(--shadow, 0 20px 44px -26px rgba(20,14,9,.4));
  --tc-ok:#1F9268;
}

/* ── animated stars ────────────────────────────────────────────────────────
   Each star settles in turn, once. A rating people can watch land reads as
   earned; a static row reads as decoration. */
.tc-stars{display:inline-flex;gap:2px;align-items:center}
.tc-stars svg{width:15px;height:15px;fill:var(--tc-star);transform-origin:center}
.tc-stars.tc-run svg{animation:tc-star .52s var(--tc-spring) both}
.tc-stars.tc-run svg:nth-child(1){animation-delay:.02s}
.tc-stars.tc-run svg:nth-child(2){animation-delay:.09s}
.tc-stars.tc-run svg:nth-child(3){animation-delay:.16s}
.tc-stars.tc-run svg:nth-child(4){animation-delay:.23s}
.tc-stars.tc-run svg:nth-child(5){animation-delay:.30s}
@keyframes tc-star{
  0%  {opacity:0;transform:scale(.4) rotate(-24deg)}
  70% {opacity:1;transform:scale(1.18) rotate(4deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}

/* ── skeleton ──────────────────────────────────────────────────────────────
   Shown only while the page waits on its config, so the layout never jumps. */
.tc-sk{position:relative;overflow:hidden;background:var(--tc-line);border-radius:8px;
  color:transparent !important}
.tc-sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:tc-shim 1.25s var(--tc-ease) infinite}
@keyframes tc-shim{to{transform:translateX(100%)}}
.tc-sk *{visibility:hidden}

/* ── trust bar ─────────────────────────────────────────────────────────────
   Three quiet proofs under the review card. Facts, not badges. */
.tc-trust{display:flex;align-items:stretch;gap:0;margin:12px 18px 0;
  background:var(--tc-card);border:1px solid var(--tc-line);border-radius:var(--tc-r);
  overflow:hidden}
.tc-trust > div{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:13px 6px;text-align:center;min-width:0}
.tc-trust > div + div{border-inline-start:1px solid var(--tc-line)}
.tc-trust svg{width:17px;height:17px;fill:none;stroke:var(--tc-accent);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.tc-trust b{font-size:13px;font-weight:700;line-height:1.2;color:var(--tc-ink)}
.tc-trust span{font-size:10.5px;color:var(--tc-muted);line-height:1.3}

/* ── review flow sheet ─────────────────────────────────────────────────────
   Both routes are offered together. Filtering who may reach Google breaches
   Google's review policy, so the choice stays with the customer. */
.tc-sheet{position:fixed;inset:0;z-index:120;display:none;align-items:flex-end;justify-content:center}
.tc-sheet.tc-on{display:flex}
.tc-sheet .tc-scrim{position:absolute;inset:0;background:rgba(20,14,9,.52);
  opacity:0;transition:opacity .34s var(--tc-ease);backdrop-filter:blur(3px)}
.tc-sheet.tc-in .tc-scrim{opacity:1}
.tc-panel{position:relative;width:100%;max-width:var(--maxw,520px);background:var(--tc-paper);
  border-radius:28px 28px 0 0;padding:10px 20px calc(26px + env(safe-area-inset-bottom));
  transform:translate3d(0,100%,0);transition:transform .44s var(--tc-ease);
  max-height:92svh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.tc-sheet.tc-in .tc-panel{transform:none}
.tc-grab{width:40px;height:4px;border-radius:2px;background:var(--tc-line);margin:0 auto 18px}
.tc-h{font-size:20px;font-weight:700;text-align:center;line-height:1.32;color:var(--tc-ink);
  margin-bottom:20px}
.tc-lead{font-size:13.5px;color:var(--tc-ink-2);text-align:center;margin:-12px 0 20px;line-height:1.6}

/* the two routes */
.tc-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:start;
  background:var(--tc-card);border:1px solid var(--tc-line);border-radius:var(--tc-r-lg);
  padding:16px;margin-bottom:11px;box-shadow:var(--tc-shadow);
  transition:transform .16s var(--tc-ease),border-color .24s var(--tc-ease)}
.tc-opt:active{transform:scale(.978)}
@media(hover:hover) and (pointer:fine){
  .tc-opt:hover{transform:translate3d(0,-2px,0);border-color:var(--tc-accent)}
}
.tc-opt .tc-em{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  flex:none;font-size:26px;line-height:1;background:var(--tc-accent-soft)}
.tc-opt .tc-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.tc-opt .tc-t1{display:block;font-size:17px;font-weight:700;line-height:1.35;color:var(--tc-ink)}
.tc-opt .tc-t2{display:block;font-size:12.5px;color:var(--tc-ink-2);margin-top:3px;line-height:1.5}
.tc-opt .tc-go{flex:none;color:var(--tc-muted)}
.tc-opt .tc-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
:root[dir="rtl"] .tc-opt .tc-go svg{transform:scaleX(-1)}
.tc-opt.tc-good .tc-em{background:#FFF6E2}

/* private note */
.tc-form{display:none}
.tc-form.tc-on{display:block}
/* ── the branch step ────────────────────────────────────────────────────────
   Only a business with more than one Google listing ever sees this. It reuses
   .tc-opt wholesale, so a branch row is the same object as "Great" and "Could
   be better" — same height, same press, same chevron, mirrored in RTL for
   free. Nothing here is new furniture. */
#tc-branch{display:none}
#tc-branch.tc-on{display:block}
#tc-branch .tc-branches{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
.tc-branch-opt .tc-t1{font-size:16px}
/* the select is the one control the form did not already have; it is dressed
   as the inputs beside it rather than left as the platform's own widget */
#tc-branch-row select{width:100%;background:var(--tc-card);color:var(--tc-ink);
  border:1px solid var(--tc-line);border-radius:14px;padding:13px 15px;font:inherit;font-size:15px;
  margin-bottom:13px;-webkit-appearance:none;appearance:none;
  transition:border-color .2s var(--tc-ease),box-shadow .2s var(--tc-ease)}
#tc-branch-row select:focus{outline:0;border-color:var(--tc-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tc-accent) 20%,transparent)}
#tc-branch-row[hidden]{display:none}
.tc-rate{display:flex;justify-content:center;gap:6px;margin:2px 0 18px}
.tc-rate button{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;
  transition:transform .18s var(--tc-spring),background .2s var(--tc-ease)}
.tc-rate button:active{transform:scale(.88)}
.tc-rate svg{width:30px;height:30px;fill:var(--tc-line);transition:fill .22s var(--tc-ease),transform .22s var(--tc-spring)}
.tc-rate button.tc-lit svg{fill:var(--tc-star);transform:scale(1.1)}
.tc-form label{display:block;font-size:12.5px;font-weight:600;color:var(--tc-ink-2);margin-bottom:7px}
.tc-form input,.tc-form textarea{width:100%;background:var(--tc-card);color:var(--tc-ink);
  border:1px solid var(--tc-line);border-radius:14px;padding:13px 15px;font:inherit;font-size:15px;
  margin-bottom:13px;transition:border-color .2s var(--tc-ease),box-shadow .2s var(--tc-ease)}
.tc-form textarea{min-height:104px;resize:vertical;line-height:1.6}
.tc-form input:focus,.tc-form textarea:focus{outline:0;border-color:var(--tc-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tc-accent) 20%,transparent)}
.tc-send{width:100%;min-height:54px;border-radius:var(--tc-r-pill);
  background:var(--tc-accent-strong, var(--gold-2, var(--tc-accent)));
  color:#fff;font-size:16px;font-weight:700;box-shadow:var(--tc-shadow);
  transition:transform .16s var(--tc-ease),opacity .2s var(--tc-ease)}
.tc-send:active{transform:scale(.978)}
.tc-send[disabled]{opacity:.55}
.tc-back{display:block;width:100%;text-align:center;font-size:13.5px;color:var(--tc-ink-2);padding:14px}

/* thank-you */
.tc-done{display:none;text-align:center;padding:20px 0 8px}
.tc-done.tc-on{display:block}
.tc-tick{width:70px;height:70px;margin:0 auto 16px;border-radius:50%;
  background:color-mix(in srgb,var(--tc-ok) 14%,transparent);color:var(--tc-ok);
  display:grid;place-items:center;animation:tc-pop .55s var(--tc-spring) both}
.tc-tick svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;animation:tc-draw .45s var(--tc-ease) .22s forwards}
@keyframes tc-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes tc-draw{to{stroke-dashoffset:0}}
.tc-done h3{font-size:19px;font-weight:700;margin-bottom:7px;color:var(--tc-ink)}
.tc-done p{font-size:14px;color:var(--tc-ink-2);line-height:1.6}

/* ── celebration: a single ripple of the brand mark, once ─────────────────── */
.tc-burst{position:fixed;inset:0;z-index:130;pointer-events:none;display:grid;place-items:center}
.tc-burst i{position:absolute;width:60px;height:60px;border-radius:50%;
  border:2px solid var(--tc-accent);opacity:0;animation:tc-ring 1.1s var(--tc-ease) forwards}
.tc-burst i:nth-child(2){animation-delay:.13s}
.tc-burst i:nth-child(3){animation-delay:.26s}
@keyframes tc-ring{0%{transform:scale(.3);opacity:.55}100%{transform:scale(9);opacity:0}}

/* ── shared micro-interactions ────────────────────────────────────────────── */
[data-tc-press]{transition:transform .14s var(--tc-ease);-webkit-tap-highlight-color:transparent;
  touch-action:manipulation}
[data-tc-press]:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){
  [data-tc-lift]{transition:transform .24s var(--tc-ease),box-shadow .24s var(--tc-ease)}
  [data-tc-lift]:hover{transform:translate3d(0,-3px,0)}
}

@media(prefers-reduced-motion:reduce){
  .tc-stars.tc-run svg,.tc-tick,.tc-tick svg,.tc-burst i{animation:none!important}
  .tc-tick svg{stroke-dashoffset:0}
  .tc-sk::after{animation:none}
  .tc-panel,.tc-scrim{transition:none}
  [data-tc-press]:active,[data-tc-lift]:hover{transform:none}
}

/* ══════════════════ CART ══════════════════
   Browse-only. It exists so a customer can hand the waiter an exact list —
   there is no checkout and no order is ever submitted. */
.tc-qty{display:inline-flex;align-items:center;gap:2px;flex:none}
.tc-qty button{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--tc-accent-soft);color:var(--tc-accent);
  transition:transform .16s var(--tc-spring),background .2s var(--tc-ease),opacity .2s var(--tc-ease)}
.tc-qty button:active{transform:scale(.88)}
.tc-qty button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.tc-qty .tc-n{min-width:22px;text-align:center;font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--tc-ink)}
.tc-qty[data-n="0"] .tc-minus,.tc-qty[data-n="0"] .tc-n{display:none}

/* floating button — appears only once something is in the list */
.tc-cart-fab{position:fixed;inset-inline:0;bottom:0;z-index:70;display:flex;justify-content:center;
  padding:0 18px calc(16px + env(safe-area-inset-bottom));pointer-events:none;
  opacity:0;transform:translate3d(0,120%,0);
  transition:opacity .32s var(--tc-ease),transform .42s var(--tc-ease)}
.tc-cart-fab.tc-on{opacity:1;transform:none;pointer-events:auto}
.tc-cart-fab button{width:100%;max-width:var(--maxw,520px);min-height:56px;border-radius:var(--tc-r-pill);
  display:inline-flex;align-items:center;justify-content:space-between;gap:12px;padding:0 10px 0 22px;
  background:var(--tc-ink);color:var(--tc-paper);font-size:15.5px;font-weight:700;
  box-shadow:0 2px 6px rgba(20,14,9,.2),0 18px 38px -16px rgba(20,14,9,.7);
  transition:transform .16s var(--tc-ease)}
:root[dir="rtl"] .tc-cart-fab button{padding:0 22px 0 10px}
.tc-cart-fab button:active{transform:scale(.985)}
.tc-cart-fab .tc-badge{min-width:34px;height:38px;padding:0 12px;border-radius:var(--tc-r-pill);
  background:var(--tc-accent);display:grid;place-items:center;font-size:14px;font-variant-numeric:tabular-nums}
.tc-cart-fab .tc-sum{font-variant-numeric:tabular-nums}

/* the list — each line is editable where it is read, so nobody has to go back
   into the menu to change their mind about something they already picked */
.tc-cart-rows{margin:2px 0 4px}
.tc-crow{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;
  column-gap:10px;row-gap:6px;padding:12px 2px;border-bottom:1px solid var(--tc-line)}
.tc-crow:last-child{border-bottom:0}
.tc-crow .tc-cn{min-width:0;font-size:14.5px;font-weight:600;color:var(--tc-ink);line-height:1.4}
.tc-crow .tc-cp{font-size:13.5px;color:var(--tc-ink-2);font-variant-numeric:tabular-nums;flex:none}
.tc-qty--row{gap:4px}
.tc-qty--row .tc-minus,.tc-qty--row .tc-n{display:inline-flex!important}
.tc-qty--row .tc-n{align-items:center;justify-content:center}
.tc-crm{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
  color:var(--tc-muted);transition:transform .16s var(--tc-ease),color .2s var(--tc-ease)}
.tc-crm svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.tc-crm:active{transform:scale(.88)}
@media(hover:hover) and (pointer:fine){.tc-crm:hover{color:var(--tc-ink)}}
.tc-cart-none{font-size:13.5px;color:var(--tc-muted);text-align:center;padding:22px 0 8px}
/* ── the option a line was bought at ────────────────────────────────────────
   Where a product is chosen by picture, the basket has to show the picture:
   eight packets that differ in nothing else are eight identical lines without
   it. The row grows a column only when there is one, so every list already
   running is drawn exactly as it was. */
.tc-cnw{display:flex;align-items:center;gap:10px;min-width:0}
.tc-cthumb{width:44px;height:44px;flex:none;border-radius:8px;object-fit:contain;
  background:var(--tc-card);border:1px solid var(--tc-line);display:block}
/* a long name must wrap rather than squeeze the controls off the row */
@media(max-width:359px){
  .tc-crow{grid-template-columns:1fr auto auto}
  .tc-crow .tc-cn{grid-column:1/-1}
  .tc-crow .tc-cnw{grid-column:1/-1}
}
.tc-total{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding:16px 18px;border-radius:var(--tc-r);background:var(--tc-card);
  border:1px solid var(--tc-line)}
.tc-total b{font-size:19px;font-weight:700;color:var(--tc-ink);font-variant-numeric:tabular-nums}
.tc-total span{font-size:13.5px;color:var(--tc-ink-2)}
.tc-note{font-size:12.5px;color:var(--tc-muted);text-align:center;margin-top:14px;line-height:1.6}
.tc-clear{display:block;width:100%;text-align:center;font-size:13.5px;color:var(--tc-ink-2);padding:14px}

/* ══════════════════ SOCIAL MODAL ══════════════════ */
.tc-modal{position:fixed;inset:0;z-index:140;display:none;align-items:center;justify-content:center;padding:20px}
.tc-modal.tc-on{display:flex}
.tc-modal .tc-scrim{position:absolute;inset:0;background:rgba(20,14,9,.5);
  opacity:0;transition:opacity .3s var(--tc-ease);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tc-modal.tc-in .tc-scrim{opacity:1}
/* A modal is as tall as what is in it, until what is in it is taller than the
   phone — four cart lines each carrying a unit price and three buttons under
   them is 973px on a 844px screen, and every pixel past the fold is a control
   nobody can reach. It caps at the viewport and scrolls inside itself instead.
   A dialog shorter than the screen is laid out exactly as it always was. */
.tc-box{position:relative;width:100%;max-width:400px;background:var(--tc-paper);
  /* The shell's own critical CSS sets a colour on <body> for the card it paints
     before anything else loads, and it outranks the layout's. Every element in
     here already names its own colour, so nothing is invisible today — this is
     so that the next one added does not have to remember. */
  color:var(--tc-ink);
  border-radius:26px;padding:24px 22px 20px;box-shadow:0 30px 70px -24px rgba(20,14,9,.6);
  max-height:calc(100svh - 40px - env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;
  opacity:0;transform:scale(.94) translate3d(0,10px,0);
  transition:opacity .3s var(--tc-ease),transform .38s var(--tc-ease)}
/* the heading and the close button stay put; the list under them is what moves */
.tc-box > .tc-body{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;margin-inline:-22px;padding-inline:22px}
.tc-modal.tc-in .tc-box{opacity:1;transform:none}
.tc-box h2{font-size:19px;font-weight:700;text-align:center;color:var(--tc-ink);margin-bottom:18px}
.tc-x{position:absolute;top:14px;inset-inline-end:14px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--tc-card);border:1px solid var(--tc-line);
  color:var(--tc-ink-2);transition:transform .18s var(--tc-ease)}
.tc-x:active{transform:scale(.9)}
.tc-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.tc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:420px){.tc-grid{grid-template-columns:repeat(4,1fr)}}
.tc-s{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 4px;
  border-radius:var(--tc-r);background:var(--tc-card);border:1px solid var(--tc-line);
  color:var(--tc-ink-2);font-size:11.5px;font-weight:600;
  transition:transform .2s var(--tc-ease),box-shadow .22s var(--tc-ease),
             color .22s var(--tc-ease),border-color .22s var(--tc-ease)}
.tc-s svg{width:22px;height:22px}
.tc-s:active{transform:scale(.94)}
@media(hover:hover) and (pointer:fine){.tc-s:hover{transform:translate3d(0,-3px,0)}}
.tc-s[hidden]{display:none !important}
/* a network the owner has not sent a link for: shown so they can see it is
   ready, never a link that goes nowhere */
.tc-s--off{opacity:.55;position:relative}
.tc-s--off:active{transform:none}

@media(prefers-reduced-motion:reduce){
  .tc-cart-fab,.tc-box,.tc-modal .tc-scrim{transition:none}
  .tc-qty button:active,.tc-s:active{transform:none}
}

/* ── toast ────────────────────────────────────────────────────────────────
   The one thing the share button says when there is no share sheet to open.
   Above the sheet and the cart, clear of the home indicator, and never wide
   enough on a phone to read as a banner. */
.tc-toast{
  position:fixed; z-index:60; inset-inline:0; margin-inline:auto; width:max-content;
  max-width:min(88vw,340px); bottom:calc(22px + env(safe-area-inset-bottom));
  padding:11px 18px; border-radius:999px;
  background:var(--tc-ink); color:var(--tc-paper);
  font-size:13.5px; font-weight:600; line-height:1.35; text-align:center;
  box-shadow:0 8px 28px rgba(14,15,17,.28);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1);
}
.tc-toast.tc-on{ opacity:1; transform:none }
@media(prefers-reduced-motion:reduce){ .tc-toast{transition:none} }

/* ── the order half of the cart ────────────────────────────────────────────
   Drawn only for a record carrying `cartOrder`; a café's list is untouched by
   every rule below. See the note beside ORDER in tap-core.js. */
/* ── how a line was asked to be made ────────────────────────────────────────
   One row per answer, under the thing it answers about. It spans the whole row
   for the same reason the unit price does: it belongs to the line, not to the
   column the name happens to sit in. A line that asked nothing has no element
   at all, so every basket already running is drawn exactly as it was. */
.tc-crow .tc-co{grid-column:1/-1;display:flex;flex-direction:column;gap:1px;
  font-size:11.5px;line-height:1.5;color:var(--tc-ink-2)}
.tc-crow .tc-cu{grid-column:1/-1;font-size:11.5px;color:var(--tc-muted);
  line-height:1.5;font-variant-numeric:tabular-nums}
.tc-body--order .tc-crow{padding-block:14px}
.tc-qty button[disabled]{opacity:.38;cursor:not-allowed}
.tc-order{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.tc-order > *{display:flex;align-items:center;justify-content:center;
  min-height:50px;padding:13px 18px;border-radius:14px;
  font-size:15px;font-weight:700;text-align:center;line-height:1.3;
  transition:transform .14s cubic-bezier(.4,0,.2,1),background .2s cubic-bezier(.4,0,.2,1)}
.tc-order > *:active{transform:scale(.982)}
/* WhatsApp's own green: this button is a promise about where it lands, and the
   page's accent would make it look like one more of the shop's own controls */
.tc-send{background:#25D366;color:#04220F;
  box-shadow:0 10px 24px -12px rgba(37,211,102,.7)}
.tc-call{background:var(--tc-accent,#2231DE);color:#fff}
.tc-keep{background:transparent;color:var(--tc-ink-2);
  border:1px solid var(--tc-line,#E4E2DC)}
@media(hover:hover) and (pointer:fine){
  .tc-send:hover{background:#1FBE5A}
  .tc-keep:hover{color:var(--tc-ink)}
}

/* ── who the order is from, and anything they want to say about it ──────────
   Both blocks sit between the total and the buttons, which is where somebody
   filling in an order looks for them. `.tc-note-f` has been drawn by the
   runtime since the first shop cart and had no rule of its own: a bare
   textarea, full-width by accident, with no label spacing and no focus ring.
   It is styled here with the fields that joined it rather than beside them. */
.tc-who{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.tc-who-h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tc-muted)}
.tc-who-f,.tc-note-f{display:flex;flex-direction:column;gap:6px}
.tc-note-f{margin-top:16px}
.tc-who-f > span,.tc-note-f > span{font-size:13px;color:var(--tc-ink-2)}
.tc-who-f input,.tc-note-f textarea{
  width:100%;min-height:46px;padding:12px 14px;border-radius:12px;
  background:var(--tc-card,#fff);border:1px solid var(--tc-line,#E4E2DC);
  color:var(--tc-ink);font:inherit;font-size:15px;line-height:1.45;
  outline:none;resize:vertical;
  transition:border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}
.tc-who-f input:focus-visible,.tc-note-f textarea:focus-visible{
  border-color:var(--tc-accent,#2231DE);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tc-accent,#2231DE) 22%,transparent)}