/* WhatsApp. Three things share one number, so they are styled as one family:
   the contact-page gate, the per-product CTA, and the post-submit handoff.

   WhatsApp green is deliberately NOT used. It is a trademark, and a site that
   wears someone's brand colour as its own button is borrowing an identity it
   has not paid for. The house green with a hairline ring reads as "ours" and is
   still unmistakably the WhatsApp button because of the glyph. */

.btn--wa{
  display:inline-flex;align-items:center;gap:9px;
  background:#fff;color:var(--brand);border:1px solid var(--brand);
  border-radius:999px;padding:12px 20px;font-size:14px;font-weight:600;
  text-decoration:none;line-height:1.2;transition:background .15s,border-color .15s}
.btn--wa:hover{background:#F1F8F4;border-color:var(--brand-600)}
.btn--wa .btn__wa{display:grid;place-items:center;flex:none}
.btn--wa.btn--sm{padding:9px 15px;font-size:13px}

.wagate{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;
  background:#F4F7F5;border:1px solid var(--line);border-radius:16px;
  padding:24px 28px;margin-bottom:34px}
.wagate__t h3{margin:0 0 8px}
.wagate__t .prose{margin:0;max-width:62ch;font-size:14px}
.wagate__a{display:flex;flex:none}

@media (max-width:820px){
  .wagate{grid-template-columns:1fr;gap:18px;padding:20px}
  .wagate__a .btn--wa{width:100%;justify-content:center}
}

/* Header pill. The header is the one place a buyer sees on every page at every
   scroll position, which is why WhatsApp lives here rather than only in the
   footer — a footer link is present on the page and invisible on the screen. */
.pillbtn--wa{border-color:var(--brand);color:var(--brand);background:#fff}
.pillbtn--wa:hover{background:#F1F8F4;border-color:var(--brand-600)}
.pillbtn--wa svg{color:var(--brand)}

/* Below the pill breakpoint the label is dropped rather than the button, so the
   glyph stays reachable on a phone. */
@media (max-width:1120px){
  .hdr .pillbtn--wa span{display:none}
  .hdr .pillbtn--wa{padding-inline:11px}
}

/* Floating WhatsApp button.
   It lives INSIDE the .kb stack rather than in its own fixed container, so the
   two bottom-right buttons share one grid and one set of offsets. Two separate
   position:fixed elements would have to be kept in sync by eye, and would
   overlap the moment either grew.

   Order in the markup puts WhatsApp ABOVE the assistant: the assistant panel
   expands upward, and a button underneath it would sit under the open panel. */
.kb__btn--wa{color:var(--brand);border:1px solid var(--brand);background:#fff}
.kb__btn--wa:hover{background:#F1F8F4;border-color:var(--brand-600)}

/* Hidden while the assistant panel is open. The panel is already a tall block
   of content; a second floating button on top of it is noise, and the panel is
   the thing the visitor just chose. kb.js toggles data-open on the root. */
[data-kb-open="true"] .kb__btn--wa{opacity:0;pointer-events:none;transform:translateY(6px)}
[data-kb-open="true"] .kb__btn--soc{opacity:0;pointer-events:none;transform:translateY(6px)}
.kb__btn--wa{transition:opacity .18s,transform .18s,background .15s,border-color .15s}
.kb__btn--soc{color:var(--brand);border:1px solid var(--line);background:#fff}
.kb__btn--soc:hover{background:#F1F8F4;border-color:var(--brand-600)}
.kb__btn--soc{transition:opacity .18s,transform .18s,background .15s,border-color .15s}