@font-face {
    font-family: 'arial_stencilbold';
    src: url('fonts/arialstencilbold2024-webfont.woff2') format('woff2'),
         url('fonts/arialstencilbold2024-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



/* =========================================================================
   walker_bp-interview.css — styling for the Gifting Concierge (walker.html).
   Self-contained (wk- prefix); reuses walk.html's brand tokens (--cream,
   --ink, --gold, --serif, --sans, ...). Independent of bp-interview.css.
   ========================================================================= */

/* margin was `0 0 48px` inside a centred container, which left ~320px of dead
   column to the right of the card at desktop widths. `0 auto 48px` centres it.
   Background was --panel (#fbf8f1) on a --cream (#f6f1e6) page — a 5-value
   difference that made the card read as a hairline outline rather than a
   surface. White + a soft lift makes it the object it is. */
.wk-panel{position:relative;overflow:hidden;background:#fff;
  border:1px solid var(--hairline);border-radius:18px;
  padding:30px 28px 24px;max-width:760px;margin:0 auto 48px;
  box-shadow:0 18px 44px -28px rgba(22,33,44,.30);
  font-family:var(--sans);color:var(--ink);}
@media (max-width:560px){.wk-panel{padding:24px 16px 20px;border-radius:14px;}}

.wk-enter{animation:wk-fade .32s ease both;}
@keyframes wk-fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.wk-enter{animation:none;}}

/* ---- progress rail ----
   The old progress cluster (3 dots + "STEP 1 OF 3") sat in a space-between row
   opposite a Back button that is visibility:hidden on step 1. Hidden still
   occupies its box, so on step 1 the cluster was flung to the far right of a
   760px card with nothing between it and the eyebrow. It now reads as a rail
   across the card's top edge, and the step counter sits on the eyebrow's line
   where it belongs. (.wk-prog / .wk-dot retired.) */
.wk-progbar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--hairline);}
.wk-progfill{height:100%;background:var(--gold);transition:width .3s ease;}

/* ---- top bar: back only. Empty on step 1, so it collapses rather than
   reserving a phantom row. ---- */
.wk-top{display:flex;align-items:center;min-height:0;}
.wk-top:empty{display:none;}
.wk-top:not(:empty){margin-bottom:10px;}
.wk-back{background:none;border:0;color:var(--ink-soft);font-family:var(--sans);font-size:13px;
  cursor:pointer;padding:6px 2px;letter-spacing:.02em;min-height:32px;}
.wk-back:hover{color:var(--ink);}

/* ---- eyebrow row: label left, step counter right, one baseline ---- */
.wk-eyerow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.wk-eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--darkgold);font-weight:600;}
.wk-steplbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  white-space:nowrap;flex:none;}
.wk-h{font-family:var(--serif);font-weight:normal;font-size:clamp(23px,3.4vw,31px);margin:8px 0 4px;line-height:1.15;}
.wk-sub{font-size:16px;color:var(--ink-soft);margin:0 0 20px;line-height:1.5;}

/* ---- step 1 : recipient chips ----
   These were auto-width flex pills, which is right for a tag cloud and wrong
   for a closed choice set: 11 options ragged 6/4 on desktop and 2/3/3/1 on
   mobile, orphaning "Colleague" on its own row. An equal-width grid has no rag
   and gives every option the same weight — which is true, they are all equally
   valid answers to "who is this for". ---- */
.wk-chips.wk-whochips{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;}
.wk-whochips .wk-chip.wk-who{font-size:16px;padding:12px 16px;min-height:48px;
  justify-content:center;text-align:center;}
/* the crumb is a single collapsed chip — it must not stretch across the grid */
.wk-chips.wk-whochips .wk-crumb{justify-self:start;}
@media (max-width:560px){
  .wk-chips.wk-whochips{grid-template-columns:repeat(2,1fr);}
}


/* friend follow-up row (For her / For him / Doesn't matter) */
.wk-frow{margin-top:14px;padding:12px 15px;background:var(--accent-tint);border-left:3px solid var(--gold);
  border-radius:0 10px 10px 0;}
.wk-flbl{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:9px;}
.wk-frow .wk-chip{background:#fff;}

/* ---- chips (occasion + specifics) ---- */
.wk-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:4px;}
/* interest/occasion chips stay a flex cloud — that IS the right pattern for an
   open multi-select — but they were ~34px tall, under the 44px touch floor. */
.wk-chip{background:#fff;border:1px solid var(--hairline);border-radius:999px;padding:9px 15px;
  min-height:40px;font-family:var(--sans);font-size:15px;color:var(--ink);cursor:pointer;
  transition:all .13s;display:inline-flex;align-items:center;gap:7px;}
@media (max-width:560px){.wk-chip{min-height:44px;padding:10px 16px;}}
.wk-chip:hover{border-color:var(--gold);}
.wk-chip .wk-n{font-size:12px;color:var(--darkgold);}
.wk-chip.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.wk-chip.on .wk-n{color:var(--bright-gold);}
/* persona-matched chips: cream/gold, echoing the active persona card so the
   tie between a persona (e.g. The Beach Bum) and its auto-selected interest
   chips (Beach / Surfing / Swimming) is visible. User-added chips stay ink. */
.wk-chip.wk-from-persona.on{background:var(--accent-tint);color:var(--ink);border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold) inset;}
.wk-chip.wk-from-persona.on .wk-n{color:var(--darkgold);}

/* ---- step 3 : personas + specifics ---- */
.wk-pers{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px;margin-bottom:6px;}
.wk-pcard{background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:16px 12px;
  min-height:56px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;text-align:center;transition:all .15s;font-family:var(--serif);font-size:16px;color:var(--ink);}
.wk-pcard:hover{border-color:var(--gold);transform:translateY(-2px);}
.wk-pcard.on{border-color:var(--gold);background:var(--accent-tint);box-shadow:0 0 0 1px var(--gold) inset;}

/* Align the icon and the text */

/* Align the icon and the text */
.wk-pcard span {
  display: flex;
  flex-direction: column; /* This is the magic rule that stacks them vertically! */
  align-items: center;
  justify-content: center;
  gap: 6px; /* A slightly tighter gap for vertical stacking */
  text-align: center; /* Ensures the text stays perfectly centered under the icons */
}


/* Base styling for the icon */
.wk-pcard span::before {
  font-size: 2.0em; /* Tweak to match your font scale */
  line-height: 1;
  flex-shrink: 0;
}

/* Inject the specific icons */
.wk-pcard[data-persona="family"] span::before        { content: "👨‍👩‍👧‍👦"; }
.wk-pcard[data-persona="petparent"] span::before     { content: "🐾"; }
.wk-pcard[data-persona="girlstrip"] span::before     { content: "🥂"; }
.wk-pcard[data-persona="sportsgames"] span::before   { content: "⚽ ⛳"; }
.wk-pcard[data-persona="beachoutdoors"] span::before { content: "🏖️ 🎣"; }
.wk-pcard[data-persona="fooddrink"] span::before     { content: "🍔 🍺"; }
.wk-pcard[data-persona="chilltime"] span::before     { content: "📖 🧘"; }
.wk-pcard[data-persona="allaboutthem"] span::before  { content: "💰 👠"; }
.wk-pcard[data-persona="greeklife"] span::before     { content: "🏛️"; }


/* Keep the regular emoji styling for the others */
.wk-pcard[data-persona="faithpride"] span::before {
  content: ""; /* Clear the emoji text */
  display: inline-block;
  width: 1.2em; /* Adjust to match your other icons */
  height: 1.2em;
  background-image: url('/usflag.svg'); /* Update this path! */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}






.wk-more{background:none;border:0;color:var(--darkgold);font-family:var(--sans);font-size:14.5px;
  cursor:pointer;padding:14px 0 10px;min-height:44px;letter-spacing:.02em;text-align:left;}
.wk-more:hover{color:var(--ink);}
.wk-spec{margin-top:4px;padding-top:14px;border-top:1px solid var(--hairline);}
.wk-grp{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
  margin:14px 0 9px;}
.wk-spec .wk-grp:first-child{margin-top:0;}

/* ---- action bars ---- */
.wk-bar{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap;}
@media (max-width:560px){
  .wk-bar{gap:10px;}
  .wk-bar .wk-cta{flex:1 1 100%;justify-content:center;padding:15px 20px;}
  .wk-bar .wk-ghost{flex:1 1 auto;padding:13px 18px;}
}
.wk-ghost{background:none;border:1px solid var(--ink);color:var(--ink);border-radius:10px;
  padding:12px 26px;font-family:var(--sans);font-size:14px;cursor:pointer;transition:all .15s;}
.wk-ghost:hover{background:var(--ink);color:#fff;}
.wk-cta{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border:0;
  border-radius:11px;padding:14px 28px;font-family:var(--sans);font-size:15px;cursor:pointer;
  transition:opacity .15s,transform .1s;}
.wk-cta:hover{opacity:.92;}
.wk-cta:active{transform:scale(.99);}
.wk-cta:disabled{opacity:.4;cursor:not-allowed;}
/* --bright-gold is a dark-surface colour (8.47:1 on ink). On this white panel
   it was 1.92:1 — the price estimate was not low-contrast, it was invisible. */
.wk-est{font-size:13px;color:var(--darkgold);font-weight:500;}
.wk-gate{margin-top:14px;padding:13px 15px;border-left:3px solid var(--gold);
  background:var(--accent-tint);border-radius:0 10px 10px 0;font-size:14px;color:var(--ink);
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;}
.wk-gate .wk-link{font-weight:600;padding-left:2px;}
.wk-link{background:none;border:0;color:var(--darkgold);font-family:var(--sans);font-size:14.5px;
  cursor:pointer;padding:0 0 0 6px;}
.wk-link:hover{color:var(--ink);}

/* ---- curating loader ---- */
.wk-loadwrap{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;min-height:200px;text-align:center;}
.wk-spin{width:30px;height:30px;border:3px solid var(--hairline);border-top-color:var(--gold);
  border-radius:50%;animation:wk-spin .8s linear infinite;}
@keyframes wk-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.wk-spin{animation-duration:1.6s;}}
.wk-loadtxt{font-family:var(--serif);font-size:17px;color:var(--ink-soft);}

/* ---- results ---- */
.wk-rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.wk-rcount{font-size:13px;color:var(--ink-soft);}
.wk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
@media (max-width:430px){.wk-grid{grid-template-columns:1fr;}}
.wk-card{position:relative;display:flex;flex-direction:column;justify-content:center;gap:8px;
  background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:18px 14px;
  cursor:pointer;min-height:84px;transition:border-color .15s,box-shadow .15s;}
.wk-card:hover{border-color:var(--gold);}
.wk-card.wk-on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;}
.wk-cb{position:absolute;top:10px;right:10px;width:17px;height:17px;accent-color:var(--gold);cursor:pointer;}
@media (max-width:560px){.wk-cb{width:22px;height:22px;}}
.wk-pair,.wk-now,.wk-mprev{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}
/*
.wk-foot{font-family:'Saira Stencil One',var(--serif);letter-spacing:.04em;
  font-size:16px;color:var(--ink);white-space:pre;}
 */ 
 .wk-foot {
  font-family: 'arial_stencilbold', var(--serif);
  letter-spacing: .04em;
  font-size: 16px;
  color: var(--ink);
  white-space: pre;
} 
  
  
.wk-dash{opacity:.4;}
.wk-g{height:18px;width:auto;vertical-align:-3px;}
.wk-var{color:var(--darkgold);font-style:italic;font-family:var(--sans);font-size:.82em;letter-spacing:0;}
.wk-perso{font-size:11px;color:var(--darkgold);text-align:center;letter-spacing:.04em;}
.wk-empty{font-size:14px;color:var(--ink-soft);padding:18px 0;text-align:center;}
.wk-simnote{font-size:13px;color:var(--ink-soft);}

/* ---- simulate cycler ---- */
.wk-cyrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.wk-cyc{display:flex;align-items:center;gap:12px;}
.wk-cybtn{background:#fff;border:1px solid var(--hairline);border-radius:9px;padding:8px 16px;
  font-family:var(--sans);font-size:13px;color:var(--ink);cursor:pointer;}
.wk-cybtn:hover:not(:disabled){border-color:var(--gold);}
.wk-cybtn:disabled{opacity:.4;cursor:not-allowed;}
.wk-cypos{font-size:13px;color:var(--ink-soft);min-width:54px;text-align:center;}
.wk-now{background:var(--cream);border-radius:12px;padding:22px 16px;min-height:46px;}
.wk-now .wk-foot{font-size:22px;}
.wk-status{margin-top:12px;font-size:13px;color:var(--ink-soft);text-align:center;min-height:18px;}
.wk-status.wk-bad{color:#b3402e;}

/* ---- personalize modal ---- */
.wk-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(22,33,44,.55);z-index:9999;padding:18px;}
.wk-mbox{position:relative;background:#fff;border-radius:15px;max-width:430px;width:100%;
  /* same viewport guard as .wk-bag-mbox: with the on-screen keyboard up (or in
     landscape) the box can outgrow the visible area — scroll inside it instead
     of clipping the OK/Cancel row off-screen. dvh line wins where supported. */
  max-height:92vh;max-height:calc(100dvh - 36px);overflow-y:auto;
  padding:24px 24px 20px;box-shadow:0 22px 60px rgba(0,0,0,.32);font-family:var(--sans);}
.wk-mh{font-family:var(--serif);font-weight:normal;font-size:20px;margin:0 0 14px;}
.wk-mprev{background:var(--cream);border-radius:10px;padding:16px 10px;min-height:40px;margin-bottom:10px;}
.wk-mprev .wk-foot{font-size:18px;}
.wk-mcounts{display:flex;gap:10px;justify-content:center;align-items:center;margin-bottom:16px;font-size:12px;}
.wk-cdot{opacity:.4;}
.wk-c.wk-okc{color:#2e7d32;}.wk-c.wk-tight{color:#b26a00;}.wk-c.wk-over{color:#c62828;font-weight:600;}
.wk-mfield{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.wk-mlbl{font-size:12px;font-weight:600;color:var(--ink-soft);}
.wk-min{font:inherit;padding:10px 12px;border:1px solid var(--hairline);border-radius:9px;
  color:var(--ink);}
.wk-min:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 2px rgba(22,33,44,.14);}
.wk-mfoot{display:flex;gap:10px;margin-top:6px;}
.wk-mcancel{flex:0 0 auto;background:none;border:1px solid var(--hairline);border-radius:9px;
  padding:11px 18px;font:inherit;color:var(--ink-soft);cursor:pointer;}
.wk-mok{flex:1;background:var(--ink);color:#fff;border:0;border-radius:9px;padding:11px;font:inherit;cursor:pointer;}
.wk-mok:disabled{opacity:.45;cursor:not-allowed;}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* =========================================================================
   v2 results — sectioned rails + tone overlay. Appended for the gift-concierge
   curation rework: Occasion rail -> Interest rail -> More great gifts, with a
   tone chip bar (crude gated behind "Show edgy") sitting above them.
   ========================================================================= */

/* ---- tone overlay bar ---- */
/* `justify-content:space-between` flung "Adults Only" to the far edge of the
   card, ~300px from the five chips it belongs to. At that distance it stops
   reading as the gated end of the tone row and starts reading as an unrelated
   control. It is a member of this row — it just sits after a gap. */
.wk-tonebar{display:flex;align-items:center;justify-content:flex-start;gap:8px 12px;
  flex-wrap:wrap;margin:2px 0 18px;padding-bottom:16px;border-bottom:1px solid var(--hairline);}
.wk-tonechips{display:flex;flex-wrap:wrap;gap:8px;}
.wk-tone{background:#fff;border:1px solid var(--hairline);border-radius:999px;
  padding:7px 14px;font-family:var(--sans);font-size:13px;color:var(--ink-soft);
  cursor:pointer;transition:all .13s;}
.wk-tone:hover{border-color:var(--gold);color:var(--ink);}
.wk-tone.on{background:var(--ink);color:#fff;border-color:var(--ink);}
/* two-tone chip label: tone NAME inherits the chip color (black / white-on-active);
   the QUALIFIER is muted gray, and dims to translucent white when the chip is on. */
.wk-tone-q{color:var(--ink-soft);}
.wk-tone.on .wk-tone-q{color:rgba(255,255,255,.6);}
.wk-edgy{margin-left:6px;background:none;border:1px dashed var(--hairline);border-radius:999px;
  padding:7px 14px;font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);
  cursor:pointer;transition:all .13s;white-space:nowrap;letter-spacing:.02em;}
.wk-edgy:hover{border-color:var(--darkgold);color:var(--darkgold);}
.wk-edgy.on{background:#fbe7e4;border-color:#c46a56;border-style:solid;color:#a8452f;}
/* phones: the tone chips (~33px at 7px padding) sit under the 44px touch floor
   the rest of this file already enforces for .wk-chip — bring them up to it */
@media (max-width:560px){
  .wk-tone,.wk-edgy{min-height:44px;display:inline-flex;align-items:center;}
}
/* Adults Only is an EXCLUSIVE reveal: while it's on, the result set is adults-only
   and the tone chips have nothing to say. They lock out rather than vanish, so the
   row keeps its shape and the shopper can see exactly what returns when they switch
   it back off. `disabled` is set on the buttons themselves (walker_bp-interview.js
   syncClasses), so this is the one place the locked look is defined. */
.wk-tone:disabled{opacity:.34;cursor:default;pointer-events:none;
  background:#fff;color:var(--ink-soft);border-color:var(--hairline);}
.wk-tone:disabled .wk-tone-q{color:var(--ink-soft);}

/* ---- rails ---- */
.wk-rails{display:flex;flex-direction:column;gap:26px;}
.wk-section{display:flex;flex-direction:column;}
.wk-secthead{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;}
.wk-sectitle{font-family:var(--serif);font-size:19px;color:var(--ink);line-height:1.1;}
.wk-seccount{font-size:12px;color:var(--darkgold);font-weight:600;
  background:var(--accent-tint);border-radius:999px;padding:2px 9px;}
.wk-showmore{align-self:flex-start;margin-top:14px;background:none;border:0;
  color:var(--darkgold);font-family:var(--sans);font-size:13.5px;cursor:pointer;
  letter-spacing:.02em;padding:4px 2px;}
.wk-showmore:hover{color:var(--ink);text-decoration:underline;}

/* ---- per-card tone badge (classic is unbadged / neutral) ---- */
.wk-tbadge{position:absolute;top:9px;left:9px;z-index:2;font-family:var(--sans);
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;line-height:1;}
.wk-tone-heart{background:#fbe7ea;color:#b23a52;}
.wk-tone-fun{background:#fdf0d8;color:#855a10;}
.wk-tone-attitude{background:#e7edf3;color:#3f5a76;}
.wk-tone-adults{background:#fbe4de;color:#a8452f;}
/* keep the badge from colliding with the customizable header on var designs */
.wk-card-hdr{position:relative;}

/* =========================================================================
   Step 1 collapse — when a recipient GROUP is in play, the picker drops to a
   single left-margin crumb (the group) with its follow-up indented beneath,
   hiding every sibling chip. Tapping the crumb reverses to the full list.
   ========================================================================= */
.wk-crumb{padding-left:15px;}
.wk-crumb-x{display:inline-block;margin-right:7px;font-size:1.2em;line-height:1;
  transform:translateY(1px);opacity:.7;}
/* the "SHOPPING FOR YOUR:" follow-up sits indented under the crumb */
.wk-frow-indent{margin-left:26px;}
@media (max-width:560px){.wk-frow-indent{margin-left:16px;}}

/* =========================================================================
   Running context breadcrumb — answered dimensions (recipient, occasion)
   persist as left-margin crumbs as the shopper moves down the interview; the
   active question + its options indent beneath them. Tapping a crumb returns
   to that question and clears everything chosen after it.
   ========================================================================= */
.wk-trail{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:4px 0 2px;}
.wk-tcrumb{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:var(--accent-tint);border:1px solid var(--accent-line);
  border-radius:999px;padding:6px 15px;font-family:var(--sans);font-size:13px;
  color:var(--ink);transition:all .13s;}
.wk-tcrumb:hover{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;}
.wk-tcrumb-x{opacity:.55;font-size:1.15em;line-height:1;}
.wk-tcrumb-lbl{color:var(--ink-soft);}
.wk-tcrumb-val{font-weight:600;}
/* the active question + options indent one step deeper than the last crumb.
   wk-in1 = one step (occasion crumb, and the question on step 2);
   wk-in2 = two steps (the question on step 3, under recipient + occasion). */
.wk-in1{margin-left:24px;}
.wk-in2{margin-left:48px;}
@media (max-width:560px){.wk-in1{margin-left:15px;} .wk-in2{margin-left:30px;}}

/* =========================================================================
   Tier mode — themed occasions (wedding today, more via BPCurate.TIER_ORDER)
   render results as curator-ordered tier sections. The special "NO TIER
   ASSIGNED" section leads whenever a themed design ships without a `tier`
   field set; the styling below makes that section deliberately loud so any
   gap in tagging is impossible to overlook — both in curator review and to
   any customer who lands on live wedding results before tagging is complete.
   Reuses the file's existing warning palette (#a8452f + #fbe4de + #c46a56 —
   the wk-tone-adults / wk-edgy vein) so it reads as an intentional callout,
   not a broken page.
   ========================================================================= */
.wk-section-untiered .wk-sectitle{color:#a8452f;letter-spacing:.02em;}
.wk-section-untiered .wk-sectitle::before{content:"\26A0";  /* ⚠ */
  display:inline-block;margin-right:9px;color:#c46a56;font-size:.9em;
  transform:translateY(-1px);}
.wk-section-untiered .wk-seccount{background:#fbe4de;color:#a8452f;}
.wk-section-untiered .wk-secthead{padding-left:11px;border-left:3px solid #c46a56;}

/* ===================== shared symbol picker (sym-lib.js) =====================
   SymLib.grid() emits .sym-tile / .sym-tile-cap, and all three pickers — the
   walker chart, the EZOrder modal and the bp-review author modal — render
   through it. Styling it once is what stops the three drifting apart again. 
.sym-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
gap:8px;max-height:52vh;overflow-y:auto;padding:4px}
*/ 
.sym-grid {
 display: grid;
 width: 100%; /* Forces the grid to expand into the parent's 696px space */
 grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
 gap: 8px;
 max-height: 52vh;
 overflow-y: auto;
 padding: 4px;
} 
  
.sym-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:8px 4px;background:#fff;border:1px solid #d8d2c4;border-radius:8px;
  cursor:pointer;min-height:78px;transition:border-color .12s,box-shadow .12s}
.sym-tile:hover,.sym-tile:focus-visible{border-color:#b8963e;box-shadow:0 0 0 2px rgba(184,150,62,.18)}
.sym-tile img{width:38px;height:38px;object-fit:contain;pointer-events:none}
.sym-tile-cap{font:600 10px/1.2 system-ui,-apple-system,'Segoe UI',sans-serif;
  color:#5b5347;text-align:center;overflow-wrap:anywhere}
.sym-tile-missing{border-style:dashed;opacity:.55}
.sym-search{width:100%;box-sizing:border-box;padding:8px 10px;margin-bottom:8px;
  border:1px solid #d8d2c4;border-radius:8px;font:14px/1.3 system-ui,-apple-system,sans-serif}