/* ============================================================
   COBRAND - share control (styles)
   Small circular icon button plus the menu it opens on desktop.
   Neutral on purpose: it sits on product cards, book cards,
   article cards and COHIRE profiles, so it borrows the page's own
   colours through variables with plain fallbacks.
   ============================================================ */
.cb-share{
  position:relative;flex:none;display:inline-grid;place-items:center;
  width:38px;height:38px;min-width:38px;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid var(--line,#DDE4EE);
  color:var(--muted,#5B6B85);transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.cb-share svg{width:17px;height:17px}
.cb-share:hover{color:var(--royal,#1D4EBD);border-color:var(--royal,#1D4EBD);background:var(--royal-soft,#E8EEFB)}
.cb-share:focus-visible{outline:3px solid var(--royal,#1D4EBD);outline-offset:2px}

/* the menu shown where the device has no share sheet of its own */
.cb-share-pop{
  position:fixed;z-index:200;min-width:220px;          /* placed by cobrand-share.js */
  background:#fff;border:1px solid var(--line,#DDE4EE);border-radius:14px;
  box-shadow:0 22px 44px -18px rgba(1,18,70,.45);padding:6px;display:grid;gap:2px;
}
.cb-share-item{
  display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
  padding:8px 10px;border:0;border-radius:9px;background:none;cursor:pointer;
  font:600 .86rem var(--body,system-ui);color:var(--charcoal,#1F2937);text-align:left;
}
.cb-share-item:hover,.cb-share-item:focus-visible{background:var(--soft-white,#F5F7FA)}
.cb-share-item small{display:block;font-weight:400;font-size:.7rem;color:var(--muted,#5B6B85)}
.cb-share-ic{
  flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  font:700 .78rem var(--body,system-ui);color:#fff;
}
.cb-wa{background:#25D366}
.cb-fb{background:#1877F2}
.cb-x{background:#111}
.cb-link{background:var(--cobalt,#0B2C96)}

/* dark mode, on the pages that have it */
:root[data-theme="dark"] .cb-share-pop{background:#151B2B;border-color:#28324A}
:root[data-theme="dark"] .cb-share-item{color:#E6EBF5}
:root[data-theme="dark"] .cb-share-item:hover{background:#1B2236}
:root[data-theme="dark"] .cb-x{box-shadow:0 0 0 1px #4A5573}   /* black badge on a dark menu needs an edge */
/* Instagram's own gradient behind a white camera mark */
.cb-ig{background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}