/* ===========================================================================
   EmEx — Listing share: the hero action row ("Contact this supplier" +
   "Share this experience"), the share panel, and the repeat under the form.

   Scoped under .emex-sd-page so it uses the Something Different tokens
   (emex-sd-listing/assets/emex-sd-listing.css) and touches no other page.
   Printed after that sheet; emex-directory.css's `.emex-listing *{margin:0;
   padding:0}` reset still applies, so every margin here is deliberate.
   ========================================================================= */

/* Buttons ------------------------------------------------------------------ */
.emex-sd-page .emex-listing-share__cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sd-body);font-weight:600;font-size:17px;line-height:1.3;text-transform:none;letter-spacing:0;
  padding:12px 22px;border-radius:6px;border:2px solid transparent;cursor:pointer;text-decoration:none;min-height:48px}
.emex-sd-page .emex-listing-share__cta--contact{background:var(--sd-orange);border-color:var(--sd-orange);color:#fff}
.emex-sd-page .emex-listing-share__cta--contact:hover{background:#9A4506;border-color:#9A4506;color:#fff;text-decoration:none}
.emex-sd-page .emex-listing-share__toggle{background:var(--sd-navy);border-color:var(--sd-navy);color:#fff}
.emex-sd-page .emex-listing-share__toggle:hover{background:#2B3C69;border-color:#2B3C69;color:#fff}
.emex-sd-page .emex-listing-share__cta:focus-visible{outline:3px solid #E0782C;outline-offset:2px}
.emex-sd-page .emex-listing-share__icon{flex:none;display:block;width:20px;height:20px}

/* Hero row: the share wrapper steps aside so its panel wraps onto its own line
   under both buttons, as in the mock-up. */
.emex-sd-page .emex-listing-share__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin-top:6px}
.emex-sd-page .emex-listing-share__actions .emex-listing-share{display:contents}
.emex-sd-page .emex-listing-share__actions .emex-listing-share__panel{flex:1 0 100%;max-width:520px}

/* Under the form: a quieter outline button, full width of the card. */
.emex-sd-page .emex-sd-enq .emex-listing-share{display:grid;gap:12px}
.emex-sd-page .emex-sd-enq .emex-listing-share__toggle{width:100%;background:transparent;color:var(--sd-navy);border-color:var(--sd-navy)}
.emex-sd-page .emex-sd-enq .emex-listing-share__toggle:hover{background:var(--sd-navy);color:#fff}

/* Panel -------------------------------------------------------------------- */
.emex-sd-page .emex-listing-share__panel{background:#fff;border:1px solid var(--sd-line);border-radius:10px;
  padding:20px 24px;box-shadow:0 8px 24px rgba(29,42,77,.08)}
.emex-sd-page .emex-listing-share__panel[hidden]{display:none}
.emex-sd-page .emex-listing-share__panel .emex-sd-h3{font-family:var(--sd-display);font-weight:600;font-size:1.25rem;
  line-height:1.2;color:var(--sd-navy);margin:0 0 14px;text-transform:none;letter-spacing:0}
.emex-sd-page .emex-listing-share__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.emex-sd-page .emex-listing-share__list li{margin:0;padding:0}
.emex-sd-page .emex-listing-share__opt{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;height:100%;
  padding:16px 8px 14px;background:#fff;border:1px solid var(--sd-line);border-radius:8px;color:var(--sd-ink);
  font-family:var(--sd-body);font-weight:600;font-size:15px;line-height:1.3;text-align:center;text-decoration:none;cursor:pointer}
.emex-sd-page .emex-listing-share__opt:hover{border-color:var(--sd-navy);color:var(--sd-ink);text-decoration:none}
.emex-sd-page .emex-listing-share__opt:focus-visible{outline:3px solid #E0782C;outline-offset:2px;border-color:var(--sd-navy)}
.emex-sd-page .emex-listing-share__badge{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff}
.emex-sd-page .emex-listing-share__badge .emex-listing-share__icon{width:22px;height:22px}
.emex-sd-page .emex-listing-share__badge--linkedin{background:#0A66C2}
.emex-sd-page .emex-listing-share__badge--whatsapp{background:#1F9E50}
.emex-sd-page .emex-listing-share__badge--email{background:var(--sd-muted)}
.emex-sd-page .emex-listing-share__badge--copy{background:var(--sd-navy)}
.emex-sd-page .emex-listing-share__status{margin:12px 0 0;min-height:1.4em;color:var(--sd-teal);font-weight:600;line-height:1.4}
.emex-sd-page .emex-listing-share__status:empty{margin:0;min-height:0}

/* The side column is narrow: two by two there, as on a phone. */
.emex-sd-page .emex-sd-enq .emex-listing-share__panel{padding:16px;box-shadow:none}
.emex-sd-page .emex-sd-enq .emex-listing-share__list{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:640px){
  .emex-sd-page .emex-listing-share__actions .emex-listing-share__cta{flex:1 1 100%}
  .emex-sd-page .emex-listing-share__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{.emex-sd-page .emex-listing-share,.emex-sd-page .emex-listing-share__actions{display:none}}