/* ═══ OPTION A · "ONE CLEAR START" (2026-10-16) — only under html.sx-a (?home=a). See showcase-simple.js. ═══ */

/* Home: one primary, at most two small extras; the rest lives under More */
html.sx-a #heroLayer .vh-door.sx-hide{display:none!important}
html.sx-a #heroLayer .vh-doors{display:flex!important;flex-wrap:wrap;align-items:center;gap:14px 16px;grid-template-columns:none!important;width:auto!important;max-width:none!important}
html.sx-a #heroLayer .vh-door.sx-primary,
html.sx-a #heroLayer .vh-door.sx-extra{flex:0 0 auto!important;width:auto!important;min-width:0!important;height:auto!important;border-radius:999px!important;display:inline-flex!important;align-items:center;gap:12px;box-shadow:none!important;transform:none!important}
html.sx-a #heroLayer .vh-door.sx-primary{min-height:60px;padding:0 30px!important;background:#EEF2F6!important;color:#16191D!important;border:0!important}
html.sx-a #heroLayer .vh-door.sx-primary strong{font:600 17px/1.2 var(--sans,-apple-system,sans-serif)!important;letter-spacing:0!important;text-transform:none!important;color:#16191D!important}
html.sx-a #heroLayer .vh-door.sx-primary .vh-arrow{width:20px;height:20px;color:#16191D!important;opacity:1!important}
html.sx-a #heroLayer .vh-door.sx-extra{min-height:48px;padding:0 20px!important;background:rgba(11,12,14,.5)!important;color:#EEF2F6!important;border:1px solid rgba(238,242,246,.3)!important}
html.sx-a #heroLayer .vh-door.sx-extra strong{font:500 15px/1.2 var(--sans,-apple-system,sans-serif)!important;letter-spacing:0!important;text-transform:none!important}
html.sx-a #heroLayer .vh-door.sx-extra .vh-arrow{width:16px;height:16px;opacity:.8}
html.sx-a #heroLayer .vh-door.sx-primary small,
html.sx-a #heroLayer .vh-door.sx-extra small{display:none!important}
html.sx-a #heroLayer .vh-door .vh-words{display:flex;flex-direction:column}
html.sx-a #heroLayer .sx-cap{margin:12px 0 0;font:400 14px/1.4 var(--sans,-apple-system,sans-serif);color:#CBD2D9}
html.sx-a .ch-content .sx-sample{display:inline-block;margin:0 0 16px;padding:9px 14px;border:1px solid rgba(238,242,246,.38);border-radius:999px;background:rgba(11,12,14,.55);color:#EEF2F6;font:500 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase}
html.sx-a #heroLayer .sx-sample{display:inline-block;margin:0 0 18px;padding:9px 14px;border:1px solid rgba(238,242,246,.38);border-radius:999px;background:rgba(11,12,14,.55);color:#EEF2F6;font:500 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase}

/* the header's Book/Reserve repeats a venue's primary on Home — keep one */
html.sx-a.sx-a-dup body.on-main #app #brandbar #hdrAct #salesPrimary{display:none!important}

/* the footer's contact and social row moves into More (the logo and the credit stay) */
html.sx-a #clientFoot .cf-methods{display:none!important}

/* More in the bar */
html.sx-a #navTabs .tab.sx-more-tab i svg{width:22px;height:22px}

/* the More sheet: a right-hand panel on desktop, a bottom sheet on phones */
.sx-more{position:fixed;inset:0;z-index:9000;background:rgba(5,6,8,.55);display:flex;justify-content:flex-end}
.sx-more[hidden]{display:none!important}
.sx-more .sx-sheet{width:min(400px,100%);height:100%;overflow-y:auto;box-sizing:border-box;padding:0 22px 28px;background:#101215;color:#EEF2F6;border-left:1px solid rgba(238,242,246,.12);font-family:var(--sans,-apple-system,sans-serif)}
.sx-more .sx-top{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:22px 0 14px;background:#101215;border-bottom:1px solid rgba(238,242,246,.1)}
.sx-more h2{margin:0;font:400 30px/1.1 "Bodoni 72",Didot,"Cormorant Garamond",serif}
.sx-more .sx-close{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(238,242,246,.22)}
.sx-more .sx-close svg{width:18px;height:18px}
.sx-more .sx-close:focus-visible,.sx-more .sx-row:focus-visible{outline:2px solid #EEF2F6;outline-offset:2px}
.sx-more .sx-h{margin:18px 0 4px;font:500 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.18em;text-transform:uppercase;color:#A9B2BC}
.sx-more .sx-row{all:unset;cursor:pointer;box-sizing:border-box;width:100%;min-height:56px;padding:8px 0;display:flex;align-items:center;gap:14px;border-bottom:1px solid rgba(238,242,246,.08);color:#EEF2F6;text-decoration:none}
.sx-more .sx-row i{flex:0 0 24px;width:24px;height:24px;display:grid;place-items:center;color:#EEF2F6}
.sx-more .sx-row i svg{width:22px;height:22px}
.sx-more .sx-w{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.sx-more .sx-w b{font-weight:400;font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.sx-more .sx-w small{font-size:13px;line-height:1.3;color:#A9B2BC}
.sx-more .sx-chev{flex:0 0 16px;width:16px;height:16px;color:#A9B2BC}
@media (max-width:400px){html.sx-a .sx-sample .sx-sample-more{display:none}}
@media (max-width:760px){
  .sx-more{align-items:flex-end}
  .sx-more .sx-sheet{width:100%;height:auto;max-height:88vh;border-left:0;border-top:1px solid rgba(238,242,246,.14);border-radius:22px 22px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  /* phones (Michael 10-17: "those buttons are HUGE on mobile"): sized to their words, stacked and centred — a 48px
     main button and a 44px second one (the tap minimum), no longer the full width of the screen */
  html.sx-a #heroLayer .vh-doors{gap:10px;flex-direction:column;align-items:center}
  html.sx-a #heroLayer .vh-door.sx-primary,
  html.sx-a #heroLayer .vh-door.sx-extra{flex:0 0 auto!important;width:auto!important;min-width:min(220px,100%)!important;justify-content:center;gap:10px}
  html.sx-a #heroLayer .vh-door.sx-primary{min-height:48px;padding:0 24px!important}
  html.sx-a #heroLayer .vh-door.sx-primary strong{font-size:16px!important}
  html.sx-a #heroLayer .vh-door.sx-primary .vh-arrow{width:17px;height:17px}
  html.sx-a #heroLayer .vh-door.sx-extra{min-height:44px;padding:0 20px!important}
  html.sx-a #heroLayer .vh-door.sx-extra strong{font-size:14px!important}
  html.sx-a #heroLayer .vh-door.sx-extra .vh-arrow{width:14px;height:14px}
  html.sx-a #heroLayer .sx-cap{font-size:13px}
  html.sx-a #heroLayer .sx-cap{text-align:center}
}