/* WhatsApp quick-order entry points (brief 5.1, 5.2).

   Two of them: a pill in the header and a secondary action beside the hero's
   primary call to action. Both open wa.me carrying whatever is in the bag, so
   nobody has to complete the checkout form to reach us.

   Both start hidden and are revealed only once store-config supplies a
   number -- see refreshWhatsappEntryPoints. [hidden] has to be restated here
   because the display rules below would otherwise out-specify the UA default
   and leave a button that goes nowhere. */

.whatsapp-link[hidden],
.whatsapp-cta[hidden] {
  display: none;
}

/* Header pill, sized to sit level with the Instagram one beside it. */
.whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}

/* 19px, matching the Instagram glyph beside it: at 18px the two pills come
   out a pixel different in height and the mismatch is visible. */
.whatsapp-link svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.whatsapp-link:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  transform: translateY(-2px);
}

.whatsapp-link:focus-visible,
.whatsapp-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* The hero now carries two actions, so they need a row that can wrap. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Our green, not WhatsApp's #25D366: this is our button, and the brand green
   would both fight the cream ground and imply an endorsement we do not have.
   The 38px gap .button uses to push its arrow out is wrong here, and the
   brightness hover does nothing useful on a transparent fill. */
.whatsapp-cta {
  gap: 10px;
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  /* .button pads 15px against no border. The outline adds 2px, so the padding
     comes back by one on each side and the two hero actions stay level. */
  padding: 14px 21px;
}

.whatsapp-cta svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.whatsapp-cta:hover {
  background: var(--green);
  color: #fff;
  filter: none;
}

@media (max-width: 900px) {
  /* Same order as the Instagram pill, so flexbox falls back to source order
     and this lands between Instagram and the bag -- neither stylesheet has to
     restate the other's numbering. */
  .header-whatsapp {
    order: 3;
    padding: 9px;
  }

  .header-whatsapp strong {
    display: none;
  }
}

@media (max-width: 580px) {
  /* Side by side these two overflow a 390px hero, and a wrapped pair of
     different widths reads as an accident. Full width stacks them cleanly. */
  .hero-actions .button {
    flex: 1 1 100%;
  }
}