/* =====================================================================
   JMS MEDIA • 03 — COMPONENTS
   The reusable pieces, consolidated from the old per-page <style> blocks
   and the Customizer "Additional CSS" into ONE place. Class names are
   unchanged (jpp-*, jms-*, tight-heading...) so this is a pixel-identical
   drop-in for the current pages. Values come from 01-tokens.css.

   Sections:
     1) Header menu pipes
     2) Page title highlight (tight-heading)
     3) Buttons — Gutenberg outline + CTA button system
     4) Dividers (jpp-rule / skinny)
     5) CTA panel (jpp-cta) + home CTA row (jms-home-cta)
     6) Service system (jpp-svc: lane, grid, cards, note)
     7) Home copy (jms-homecopy)
     8) WPForms — global + contact form #wpforms-2521
     9) Contact wrapper (jpp-contact)
    10) Stackable button-group mobile fixes
   ===================================================================== */


/* ============ 1) HEADER MENU PIPES =================================== */
.ct-header .menu > li:not(:last-child)::after{
  content:"|";
  margin:0 12px;
  color:rgba(255,255,255,.85);
  font-size:16px;
  opacity:1;
}


/* ============ 2) PAGE TITLE HIGHLIGHT (tight-heading) =============== */
.inline-heading{
  display:inline-block;
  padding:0 .9em;
  background-color:var(--jms-hl-soft);
  color:var(--jms-ink);
  border-radius:6px;
  line-height:1.2;
}
.tight-heading-wrapper{
  text-align:center;
  margin:2rem auto;
  padding:0;
}
h1.tight-heading{
  display:inline-block;
  background-color:var(--jms-hl);
  color:var(--jms-ink);
  font-weight:800;
  font-size:2rem;
  line-height:1;
  padding:6px .65em;
  border-radius:4px;
  box-shadow:0 10px 18px rgba(0,0,0,.14);
  margin:0;
  white-space:nowrap;
}
.tight-heading-wrapper.wp-block-group{
  padding:0;
  margin:2rem auto;
  text-align:center;
  max-width:fit-content;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  gap:0;
}
.wp-block-group.tight-heading-wrapper > h1.tight-heading{ margin:0; }
.tight-heading-wrapper > .wp-block-heading{ margin-block-start:0; margin-block-end:0; }
.wp-block-group.tight-heading-wrapper{ margin-top:-28px; }

@media (max-width:1024px){
  h1.tight-heading{ white-space:normal; font-size:1.75rem; line-height:1.1; padding:8px .9em; text-align:center; }
}
@media (min-width:600px) and (max-width:1023px){
  h1.tight-heading{ white-space:normal; font-size:1.8rem; padding:8px 1em; text-align:center; }
}
@media (max-width:768px){
  .tight-heading-wrapper,
  .wp-block-group.tight-heading-wrapper,
  .wp-block-group.tight-heading-wrapper.alignfull{ margin-top:-2.1rem; margin-bottom:1rem; }
}
@media (max-width:599px){
  h1.tight-heading{ white-space:normal; font-size:1.6rem; padding:10px 1.1em; text-align:center; }
}
@media (max-width:480px){
  h1.tight-heading{ font-size:1.35rem; line-height:1.3; padding:12px 1.25em; border-radius:8px; }
  .tight-heading-wrapper{ padding:1rem .75rem; }
}


/* ============ 3) BUTTONS =========================================== */
/* 3a — Gutenberg base button text layout */
.wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  max-width:100%;
  padding:1rem 2rem;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  font-size:1rem;
}
.wp-block-button__link span,
.wp-block-button__link strong{ line-height:1; vertical-align:middle; }

/* 3b — Gutenberg "Outline" style: dark ink, strong border, gold hover */
.wp-block-button__link.is-style-outline{
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  transform:scale(1);
  background-color:transparent;
  color:var(--jms-ink);
  border:2px solid rgba(11,12,15,.65);
  border-radius:85px;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.wp-block-button__link.is-style-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background-color:var(--jms-gold-wash);
  color:var(--jms-ink);
  border-color:rgba(11,12,15,.95);
  box-shadow:0 14px 26px rgba(0,0,0,.18);
  transform:scale(1.06);
  text-decoration:none;
}

/* 3c — CTA button system (jpp-cta__btn / jpp-svc__btn share this look) */
.jpp-cta__btn,
.jpp-svc__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--jms-btn-h);
  min-width:var(--jms-btn-min);
  padding:0 22px;
  border:2px solid var(--jms-line-ink);
  border-radius:var(--jms-radius-btn);
  background:var(--jms-btn-face);
  color:var(--jms-ink);
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
  box-sizing:border-box;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.jpp-cta__btn:link, .jpp-cta__btn:visited{ color:var(--jms-ink); }
@media (hover:hover){
  .jpp-cta__btn:hover,
  .jpp-svc__btn:hover{
    background:var(--jms-btn-hover);
    border-color:rgba(11,12,15,.95);
    box-shadow:0 12px 22px rgba(0,0,0,.14);
    transform:translateY(-1px);
    color:var(--jms-ink);
  }
}
.jpp-cta__btn:active{ background:var(--jms-panel); color:var(--jms-ink); }

@media (max-width:859px){
  .jpp-cta__btn,
  .jpp-svc__btn{ min-width:160px; width:calc(50% - 6px); }
}
@media (max-width:420px){
  .jpp-cta__btn,
  .jpp-svc__btn{ width:100%; min-width:0; }
}


/* ============ 4) DIVIDERS ========================================== */
.jpp-rule{
  height:1px;
  border:0;
  background:var(--jms-line);
  margin:22px auto;
  max-width:var(--jms-lane-wide);
  width:calc(100% - 28px);
  display:block;
  box-sizing:border-box;
}
@media (max-width:360px){ .jpp-rule{ width:calc(100% - 20px); } }
.jpp-svc__rule{ height:1px; background:var(--jms-line-strong); opacity:1; margin:28px 0; }


/* ============ 5) CTA PANEL + HOME CTA ROW ========================== */
.jpp-cta{
  width:100%;
  max-width:none;
  display:block;
  clear:both;
  box-sizing:border-box;
  padding:0 var(--jms-pad-x);
  margin:22px 0;
}
.jpp-cta, .jpp-cta *{ box-sizing:border-box; }
.jpp-cta__panel{
  width:100%;
  max-width:var(--jms-lane-wide);
  margin:0 auto;
  padding:16px 16px 18px;
  border:2px solid var(--jms-line);
  border-radius:18px;
  background:var(--jms-panel);
  display:grid;
  gap:10px;
  text-align:center;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
}
.jpp-cta__kicker{ font-weight:900; font-size:1.2rem; line-height:1.15; margin:0; color:var(--jms-ink-2); }
.jpp-cta__row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.jpp-cta__note{ margin-top:4px; font-size:.95rem; line-height:1.4; color:var(--jms-muted); }

/* Home CTA row — buttons only, no panel */
.jms-home-cta{ max-width:var(--jms-lane); margin:0 auto; padding:4px var(--jms-pad-x) 10px; text-align:center; }
.jms-home-cta__row{ display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; width:100%; margin:0 auto; }


/* ============ 6) SERVICE SYSTEM (jpp-svc) ========================== */
.jpp-svc{
  width:100%;
  max-width:none;
  display:block;
  clear:both;
  box-sizing:border-box;
  color:var(--jms-ink);
}
.jpp-svc, .jpp-svc *{ box-sizing:border-box; }

.jpp-svc .lane,
.jpp-svc__inner{ max-width:var(--jms-lane); margin:0 auto; padding:18px var(--jms-pad-x); }
@media (max-width:600px){ .jpp-svc .lane{ padding:16px var(--jms-pad-x-sm); } }

.jpp-svc__intro,
.jpp-svc__sub{
  max-width:860px;
  margin:0 auto;
  text-align:center;
  color:var(--jms-muted);
  line-height:1.7;
  display:grid;
  gap:12px;
}
.jpp-svc__intro p{ margin:0; }
.jpp-svc__kicker{ margin-top:14px; font-weight:800; color:var(--jms-ink-2); }

/* Grid */
.jpp-svc__grid{ display:grid; gap:18px; margin-top:18px; }
@media (min-width:860px){ .jpp-svc__grid{ grid-template-columns:1fr 1fr; gap:22px; } }

/* Card */
.jpp-svc__card{
  border:2px solid var(--jms-line);
  border-radius:var(--jms-radius);
  background:var(--jms-panel);
  padding:18px;
  display:grid;
  gap:12px;
  min-width:0;
  box-shadow:0 10px 18px rgba(0,0,0,.06);
}
/* Whole-card link (color stays put; only the box reacts) */
.jpp-svc__cardlink{
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.jpp-svc__cardlink:visited{ color:inherit; }
@media (hover:hover){
  .jpp-svc__cardlink:hover{
    background:var(--jms-panel-2);
    border-color:var(--jms-line-strong);
    box-shadow:0 14px 26px rgba(0,0,0,.08);
    transform:translateY(-1px);
  }
}
.jpp-svc__cardlink:focus-visible{
  outline:2px solid var(--jms-gold-2);
  outline-offset:4px;
  border-radius:var(--jms-radius);
  background:var(--jms-panel-2);
  border-color:var(--jms-line-strong);
}

.jpp-svc__head{ display:flex; gap:12px; align-items:flex-start; min-width:0; }

/* Icon chip — yellow fill, black keyline */
.jpp-svc__icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:12px;
  background:var(--jms-hl);
  border:2px solid var(--jms-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.10);
}
.jpp-svc__icon svg{
  width:22px;
  height:22px;
  display:block;
  fill:none;
  stroke:rgba(11,12,15,.86);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.jpp-svc__icon svg path{ fill:none; }

.jpp-svc__title{ margin:0; font-weight:900; font-size:1.15rem; line-height:1.15; color:var(--jms-ink-2); }
.jpp-svc__tag{ margin:4px 0 0; font-weight:800; color:var(--jms-muted); line-height:1.35; }
.jpp-svc__body{ color:var(--jms-muted); line-height:1.7; display:grid; gap:10px; }
.jpp-svc__body p{ margin:0; }

/* "Learn more" link */
.jpp-svc__more{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  color:rgba(11,12,15,.86);
  font-weight:900;
  text-decoration:none;
  margin-top:2px;
  border-bottom:2px solid rgba(11,12,15,.30);
  padding-bottom:2px;
  transition:color .16s ease, border-color .16s ease;
}
@media (hover:hover){
  .jpp-svc__cardlink:hover .jpp-svc__more{ color:rgba(11,12,15,.96); border-bottom-color:rgba(11,12,15,.55); }
}

/* Note box */
.jpp-svc__note{
  border:2px solid var(--jms-line);
  border-radius:var(--jms-radius);
  background:var(--jms-panel);
  padding:18px;
  display:grid;
  gap:12px;
  margin-top:18px;
  box-shadow:0 10px 18px rgba(0,0,0,.06);
}
.jpp-svc__notehead{ display:flex; gap:12px; align-items:flex-start; }
.jpp-svc__note h2{ margin:0; font-size:clamp(20px,2.2vw,28px); font-weight:900; line-height:1.15; color:var(--jms-ink-2); letter-spacing:-.01em; }
.jpp-svc__note p{ margin:0; line-height:1.65; color:var(--jms-ink); }


/* ============ 7) HOME COPY (jms-homecopy) ========================== */
.jms-homecopy{ color:var(--jms-muted); width:100%; box-sizing:border-box; }
.jms-homecopy, .jms-homecopy *{ box-sizing:border-box; }
.jms-homecopy .lane{ max-width:var(--jms-lane); margin:0 auto; padding:18px var(--jms-pad-x); }
@media (max-width:600px){ .jms-homecopy .lane{ padding:16px var(--jms-pad-x-sm); } }
.jms-homecopy h1,
.jms-homecopy h2{ margin:0; text-align:center; line-height:1.2; letter-spacing:-.01em; color:rgba(11,12,15,.96); }
.jms-homecopy h1{ font-size:var(--jms-h1); font-weight:900; }
.jms-homecopy h2{ font-size:var(--jms-h2); font-weight:900; margin-bottom:10px; }
.jms-homecopy p{ margin:0; }
.jms-homecopy .sub{ margin:10px auto 0; max-width:860px; text-align:center; line-height:1.7; color:var(--jms-muted); display:grid; gap:12px; }
.jms-homecopy .body{ margin:0 auto; max-width:860px; line-height:1.75; color:var(--jms-muted); display:grid; gap:12px; text-align:left; }
.jms-homecopy .card{
  border:2px solid var(--jms-line);
  border-radius:var(--jms-radius);
  background:var(--jms-panel);
  padding:18px;
  display:grid;
  gap:12px;
  box-shadow:0 10px 18px rgba(0,0,0,.08);
}
.jms-homecopy .card:hover{ border-color:var(--jms-line); background:var(--jms-panel); }   /* rollover intentionally OFF */
.jms-homecopy .center{ text-align:center; }
.jms-homecopy .strong{ font-weight:900; color:rgba(11,12,15,.92); }


/* ============ 7b) NATIVE-BLOCK NORMALIZERS (home intro) ============
   When prose is rebuilt as native Gutenberg group/heading/paragraph blocks,
   WordPress injects default block-gap margins. Neutralize them so spacing is
   driven by our .lane padding + .body/.sub grid gaps (matches the old look). */
/* Non-destructive: zero WordPress's block-gap variable inside our custom page
   wrappers, so core flow layout adds 0 between blocks while the components'
   OWN explicit margins (e.g. .jpp-thanks p{margin-top:14px}) still apply. */
.jms-homecopy,
.jpp-privacy,
.jpp-thanks,
.jpp-contact-lock,
.jpp-svc,
.jpp-cta,
.jpp-consulting,
.jpp-digital,
.jpp-studio,
.jpp-coaching,
.jpp-work,
.jpp-process,
.jpp-aboutdm{ --wp--style--block-gap: 0px; }
.jms-homecopy .wp-block-group,
.jpp-privacy .wp-block-group,
.jpp-thanks .wp-block-group,
.jpp-contact-lock .wp-block-group,
.jpp-consulting .wp-block-group,
.jpp-digital .wp-block-group,
.jpp-studio .wp-block-group,
.jpp-coaching .wp-block-group,
.jpp-work .wp-block-group,
.jpp-process .wp-block-group,
.jpp-aboutdm .wp-block-group{ margin:0; }

/* ---------------------------------------------------------------------
   VERTICAL RHYTHM — one consistent gap between every stacked block in a
   section, site-wide. Boxes never touch; spacing never drifts page to page.
   (The wrapper prefixes give this priority over the old per-section margins.)
   Tune the whole site's breathing room with --jms-rhythm.
   --------------------------------------------------------------------- */
:root{ --jms-rhythm: 34px; }
@media (min-width:860px){ :root{ --jms-rhythm: 46px; } }

.jms-homecopy .lane > * + *,
.jpp-svc .lane > * + *,
.jpp-consulting .lane > * + *,
.jpp-digital .lane > * + *,
.jpp-studio .lane > * + *,
.jpp-coaching .lane > * + *,
.jpp-work .lane > * + *,
.jpp-process .lane > * + *,
.jpp-aboutdm .wrap > * + *{
  margin-block-start: var(--jms-rhythm);
}

/* keep a heading and the line directly under it tight */
.jms-homecopy .lane > .wp-block-heading + :is(.sub,.lede),
.jpp-svc .lane > .wp-block-heading + :is(.sub,.lede),
.jpp-consulting .lane > .wp-block-heading + :is(.sub,.lede),
.jpp-digital .lane > .wp-block-heading + :is(.sub,.lede),
.jpp-studio .lane > .wp-block-heading + :is(.sub,.lede),
.jpp-coaching .lane > .wp-block-heading + :is(.sub,.lede),
.jpp-work .lane > .wp-block-heading + :is(.sub,.lede),
.jpp-process .lane > .wp-block-heading + :is(.sub,.lede),
.jpp-aboutdm .wrap > .wp-block-heading + :is(.sub,.lede){
  margin-block-start: 10px;
}
.jms-homecopy.wp-block-group{ margin:0; }
.jms-homecopy .wp-block-group > *{ margin-block-start:0; }   /* home: gap from .lane padding */
.jms-homecopy .lane > .wp-block-heading{ margin:0; }

/* Closing home note (was an inline-styled div; now an editable paragraph) */
.jms-home-note{
  max-width:920px;
  margin:22px auto;
  padding:0 var(--jms-pad-x);
  text-align:center;
  color:rgba(11,12,15,.78);
  line-height:1.75;
  font-weight:800;
}
.jms-home-note p{ margin:0; }
.jms-home-note strong{ color:rgba(11,12,15,.92); font-weight:900; }


/* ============ 8) WPFORMS =========================================== */
/* 8a — global light look */
.wpforms-form{ max-width:700px; margin:3rem auto; padding:0 1rem; text-align:left; }
.wpforms-form .wpforms-field{ margin-bottom:1.5rem; }
.wpforms-form label.wpforms-field-label,
.wpforms-form .wpforms-field label{ font-weight:700; font-size:1rem; margin-bottom:.5rem; display:block; color:var(--jms-ink); text-align:left; }
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="url"],
.wpforms-form input[type="number"],
.wpforms-form input[type="date"],
.wpforms-form textarea{
  width:100%; box-sizing:border-box; padding:.8rem .9rem; font-size:1rem;
  border:2px solid rgba(11,12,15,.40); border-radius:var(--jms-radius-sm);
  background-color:#fff; color:var(--jms-ink); box-shadow:none;
}
.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder{ color:rgba(11,12,15,.45); }
.wpforms-form input:focus,
.wpforms-form textarea:focus{ outline:none; border-color:rgba(11,12,15,.75); box-shadow:0 0 0 3px var(--jms-gold-wash); }
.wpforms-field-name-first,
.wpforms-field-name-last{ width:48%; display:inline-block; box-sizing:border-box; }
.wpforms-field-name-first{ margin-right:4%; }
.wpforms-form .wpforms-submit{
  background-color:var(--jms-gold); color:var(--jms-ink); border:2px solid rgba(11,12,15,.85);
  padding:.75rem 1.5rem; font-weight:800; border-radius:12px; cursor:pointer;
  transition:background .2s ease, transform .16s ease, box-shadow .2s ease;
  display:inline-block; margin-top:1.5rem; box-shadow:0 10px 18px rgba(0,0,0,.12);
}
.wpforms-form .wpforms-submit:hover{ background-color:var(--jms-gold-2); transform:translateY(-1px); box-shadow:0 14px 24px rgba(0,0,0,.16); }
.wpforms-submit-container{ text-align:center; }

/* 8b — contact form #wpforms-2521 (scoped) */
#wpforms-2521{ color:var(--jms-ink); }
.wpforms-container-full#wpforms-2521,
div#wpforms-2521-container{ max-width:var(--jms-lane-form); margin:0 auto; padding:0 var(--jms-pad-x); }
#wpforms-2521 form.wpforms-form{
  border:2px solid var(--jms-line); border-radius:var(--jms-radius);
  padding:clamp(16px,2.2vw,22px); background:#fff; box-shadow:0 12px 24px rgba(0,0,0,.08);
}
#wpforms-2521, #wpforms-2521 *{ font-family:inherit; letter-spacing:normal; }
#wpforms-2521 .wpforms-field-label{ color:var(--jms-ink); font-weight:900; font-size:1rem; line-height:1.2; margin-bottom:8px; }
#wpforms-2521 .wpforms-required-label{ color:var(--jms-gold); font-weight:900; }
#wpforms-2521 .wpforms-field-description{ color:var(--jms-muted); font-size:.95rem; line-height:1.45; margin-top:8px; }
#wpforms-2521 input[type="text"],
#wpforms-2521 input[type="email"],
#wpforms-2521 input[type="tel"],
#wpforms-2521 input[type="url"],
#wpforms-2521 input[type="number"],
#wpforms-2521 input[type="date"],
#wpforms-2521 select,
#wpforms-2521 textarea{
  width:100%; background:#fff; border:2px solid var(--jms-line-strong); border-radius:12px;
  color:var(--jms-ink); padding:12px 14px; font-size:1.05rem; line-height:1.35; box-shadow:none;
}
#wpforms-2521 input::placeholder,
#wpforms-2521 textarea::placeholder{ color:rgba(11,12,15,.45); }
#wpforms-2521 textarea{ min-height:160px; resize:vertical; }
#wpforms-2521 input:focus,
#wpforms-2521 select:focus,
#wpforms-2521 textarea:focus{ outline:none; border-color:rgba(11,12,15,.75); box-shadow:0 0 0 3px var(--jms-gold-wash); }
#wpforms-2521 select option{ background:#fff; color:#000; }
#wpforms-2521 .wpforms-field{ margin-bottom:18px; }
#wpforms-2521 .wpforms-submit-container{ margin-top:10px; display:flex; align-items:center; justify-content:flex-start; gap:14px; flex-wrap:wrap; }
#wpforms-2521 button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--jms-btn-h); padding:0 22px; min-width:140px;
  border:2px solid var(--jms-line-ink); border-radius:var(--jms-radius-btn);
  background:var(--jms-btn-face); color:var(--jms-ink);
  font-weight:900; font-size:1rem; line-height:1; cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}
@media (hover:hover){
  #wpforms-2521 button[type="submit"]:hover{ background:var(--jms-btn-hover); border-color:rgba(11,12,15,.95); box-shadow:0 12px 22px rgba(0,0,0,.14); transform:translateY(-1px); color:var(--jms-ink); }
}
#wpforms-2521 button[type="submit"]:active{ background:#fff; color:var(--jms-ink); transform:none; box-shadow:0 10px 18px rgba(0,0,0,.12); }
#wpforms-2521 button[type="submit"]:focus-visible{ outline:2px solid var(--jms-line-ink); outline-offset:3px; box-shadow:0 12px 22px rgba(0,0,0,.14); }
#wpforms-2521 .wpforms-confirmation-container-full{ border:2px solid var(--jms-line); border-radius:var(--jms-radius); padding:18px; background:#fff; color:var(--jms-ink); }


/* ============ 9) CONTACT WRAPPER =================================== */
.jpp-contact-wrap{ max-width:var(--jms-lane-form); margin:0 auto; padding:0 var(--jms-pad-x); }
.jpp-contact-note{ border:0; border-radius:0; padding:0; background:transparent; color:var(--jms-ink); margin:0 auto 16px; }
.jpp-contact-note__head,
.jpp-contact-note__icon{ display:none; }
.jpp-contact-note p{ margin:10px 0 0; color:var(--jms-muted); line-height:1.6; }
.jpp-contact-note p:first-of-type{ margin-top:0; }


/* ============ 10) STACKABLE BUTTON-GROUP MOBILE FIXES ============== */
@media (max-width:480px){
  .wp-block-stackable-button-group .stk-row.stk-inner-blocks.stk-button-group{
    display:flex; flex-wrap:nowrap; justify-content:center; gap:.5rem; padding:0 1rem; box-sizing:border-box;
  }
  .wp-block-stackable-button-group .stk-row.stk-inner-blocks.stk-button-group > .wp-block-stackable-button{
    flex:0 0 auto; width:auto; max-width:none; margin:0;
  }
}
@media (max-width:320px){
  .wp-block-stackable-button-group .stk-row.stk-inner-blocks.stk-button-group{ padding:0 .5rem; gap:.25rem; }
  .wp-block-stackable-button-group .stk-button-group__button{ padding:.5rem .75rem; }
}