.sbe-social-sharing {
  /* display: inline-grid, not flex (v1.4.8), and no grid-template-columns
     or grid-auto-flow: column (v1.4.10) - found by testing directly on a
     real site: flex (a block-level box that tries to fill the full width
     of its container) and any multi-column grid layout (whether via
     grid-template-columns or grid-auto-flow: column) both made that
     theme's own CSS visually displace this block, even though the DOM
     move itself succeeded every time. A plain single-column inline-grid -
     sized to its own content, like inline-block - avoids it. This means
     the label and the icon list stack as two grid rows instead of sitting
     side by side; a deliberate trade-off for reliable placement across
     themes. */
  display: inline-grid;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  max-width: 100%;
}
.sbe-social-sharing__label {
  /* No font-size/font-weight here on purpose: it's a <strong> tag, so it
     inherits the theme's font size at this spot and is bold by default -
     it will always match the surrounding theme text instead of a fixed
     pixel size. */
  color: currentColor;
}
.sbe-social-sharing__list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.sbe-social-sharing__item {
  margin: 0;
  padding: 0;
}
.sbe-social-sharing__button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(120, 120, 120, 0.35);
  color: #ffffff !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  border: 0;
  padding: 0;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.sbe-social-sharing__button:focus {
  outline: 2px solid rgba(120, 120, 120, 0.8);
  outline-offset: 2px;
}
.sbe-social-sharing__button svg {
  fill: #ffffff;
  pointer-events: none;
}
.sbe-social-sharing__button:hover {
  background-color: rgba(120, 120, 120, 0.6);
  transform: translateY(-1px);
}
.sbe-social-sharing__button--facebook:hover { background-color: #1877f2; }
.sbe-social-sharing__button--twitter:hover { background-color: #1da1f2; }
.sbe-social-sharing__button--pinterest:hover { background-color: #e60023; }
.sbe-social-sharing__button--email:hover { background-color: #6b7280; }
.sbe-social-sharing__button--native:hover { background-color: #16a34a; }

/* Copy link: swap icon to a checkmark briefly via the .is-copied class,
   toggled by JS - default styling keeps the checkmark hidden. */
.sbe-social-sharing__button--copylink .sbe-icon-copied {
  display: none;
}
.sbe-social-sharing__button--copylink.is-copied .sbe-icon-default {
  display: none;
}
.sbe-social-sharing__button--copylink.is-copied .sbe-icon-copied {
  display: block;
}

/* Native "Share" button: only makes sense on real mobile devices, where a
   native share sheet actually exists - hidden on desktop by default. */
.sbe-social-sharing__button--native {
  display: none !important;
}
@media (max-width: 767px) {
  .sbe-social-sharing__button--native {
    display: flex !important;
  }
}

/* -------------------------------------------------------------------- */
/* Light color scheme - for themes with a white / light product page    */
/* background. The default rules above (used when the "dark" scheme is  */
/* selected) assume a dark background: white icons on a semi-transparent*/
/* grey circle. This variant swaps that for a subtle light grey circle  */
/* with dark icons, so the buttons stay visible on white. The colored   */
/* hover states (Facebook blue, Twitter blue, etc.) are shared with the */
/* dark scheme and defined above, so they are not repeated here.        */
/*                                                                        */
/* IMPORTANT: this section must come BEFORE the icon-style section       */
/* below. Both use two-class selectors on this same element (equal CSS   */
/* specificity), so when both a color scheme AND an icon style are       */
/* active together, whichever section is declared LATER in this file     */
/* wins the tie. Icon style is the more specific merchant choice, so it  */
/* must load after (v1.5.1 fix - solid/mono used to silently lose to     */
/* "Light" scheme's neutral colors because this section used to come     */
/* after them).                                                          */
/* -------------------------------------------------------------------- */
.sbe-social-sharing--light .sbe-social-sharing__button {
  background-color: rgba(0, 0, 0, 0.06);
  color: #4b5563 !important;
}
.sbe-social-sharing--light .sbe-social-sharing__button svg {
  fill: #4b5563;
}
.sbe-social-sharing--light .sbe-social-sharing__button:focus {
  outline-color: rgba(0, 0, 0, 0.35);
}
.sbe-social-sharing--light .sbe-social-sharing__button:hover {
  background-color: rgba(0, 0, 0, 0.12);
}
/* On hover the button gets a solid brand color background (see the
   shared rules above), so the icon needs to switch back to white to stay
   readable - unlike the resting state, which is dark-on-light here. */
.sbe-social-sharing--light .sbe-social-sharing__button:hover svg {
  fill: #ffffff;
}
.sbe-social-sharing--light .sbe-social-sharing__button--facebook:hover,
.sbe-social-sharing--light .sbe-social-sharing__button--twitter:hover,
.sbe-social-sharing--light .sbe-social-sharing__button--pinterest:hover,
.sbe-social-sharing--light .sbe-social-sharing__button--email:hover,
.sbe-social-sharing--light .sbe-social-sharing__button--native:hover {
  color: #ffffff !important;
}

/* -------------------------------------------------------------------- */
/* Icon style: solid (v1.5.0)                                           */
/* Instead of a neutral grey circle that only turns brand-colored on     */
/* hover (the default "hover" style above), each icon's circle is its   */
/* brand color at rest - more colorful, more immediately recognizable   */
/* per network, no interaction needed to see which is which. Works the  */
/* same regardless of the dark/light background scheme: this section is */
/* deliberately declared AFTER the light-scheme section above, so it     */
/* wins the equal-specificity tie when both are active together.        */
/* -------------------------------------------------------------------- */
.sbe-social-sharing--icon-solid .sbe-social-sharing__button {
  color: #ffffff !important;
}
.sbe-social-sharing--icon-solid .sbe-social-sharing__button svg {
  fill: #ffffff !important;
}
.sbe-social-sharing--icon-solid .sbe-social-sharing__button--facebook { background-color: #1877f2; }
.sbe-social-sharing--icon-solid .sbe-social-sharing__button--facebook:hover { background-color: #145dc4; }
.sbe-social-sharing--icon-solid .sbe-social-sharing__button--twitter { background-color: #1da1f2; }
.sbe-social-sharing--icon-solid .sbe-social-sharing__button--twitter:hover { background-color: #0f85d1; }
.sbe-social-sharing--icon-solid .sbe-social-sharing__button--pinterest { background-color: #e60023; }
.sbe-social-sharing--icon-solid .sbe-social-sharing__button--pinterest:hover { background-color: #b8001c; }
.sbe-social-sharing--icon-solid .sbe-social-sharing__button--email { background-color: #6b7280; }
.sbe-social-sharing--icon-solid .sbe-social-sharing__button--email:hover { background-color: #52585f; }
.sbe-social-sharing--icon-solid .sbe-social-sharing__button--copylink { background-color: #6b7280; }
.sbe-social-sharing--icon-solid .sbe-social-sharing__button--copylink:hover { background-color: #52585f; }
.sbe-social-sharing--icon-solid .sbe-social-sharing__button--native { background-color: #16a34a; }
.sbe-social-sharing--icon-solid .sbe-social-sharing__button--native:hover { background-color: #128038; }

/* -------------------------------------------------------------------- */
/* Icon style: mono (v1.5.0)                                            */
/* The opposite direction: no brand colors at all, not even on hover -   */
/* every icon stays the same neutral grey/light circle throughout, for   */
/* themes that want the share row to blend into their own UI palette    */
/* rather than stand out with each network's own color. The light+mono   */
/* combo below uses a compound (no-space) selector specifically so it    */
/* always outranks the plain light-scheme hover rule above regardless    */
/* of file order, on top of also being declared later.                   */
/* -------------------------------------------------------------------- */
.sbe-social-sharing--icon-mono .sbe-social-sharing__button:hover {
  background-color: rgba(120, 120, 120, 0.6) !important;
  color: #ffffff !important;
}
.sbe-social-sharing--icon-mono .sbe-social-sharing__button:hover svg {
  fill: #ffffff !important;
}
.sbe-social-sharing--icon-mono.sbe-social-sharing--light .sbe-social-sharing__button:hover {
  background-color: rgba(0, 0, 0, 0.12) !important;
  color: #4b5563 !important;
}
.sbe-social-sharing--icon-mono.sbe-social-sharing--light .sbe-social-sharing__button:hover svg {
  fill: #4b5563 !important;
}

/* -------------------------------------------------------------------- */
/* Button size (v1.5.1)                                                 */
/* Same circle/icon shapes as the default "normal" size, just scaled up */
/* for themes with a roomier product-actions area, or merchants who     */
/* simply want the buttons more prominent.                              */
/* -------------------------------------------------------------------- */
.sbe-social-sharing--size-large .sbe-social-sharing__button {
  width: 44px;
  height: 44px;
}
.sbe-social-sharing--size-large .sbe-social-sharing__button svg {
  width: 22px;
  height: 22px;
}
.sbe-social-sharing--size-large .sbe-social-sharing__list {
  gap: 12px;
}

/* -------------------------------------------------------------------- */
/* Placement (v1.4.0, broadened in v1.4.3)                              */
/* The block can be relocated by JS on page load: next to a merchant-    */
/* configured anchor selector, or (v1.4.3, on by default) next to the    */
/* theme's own native share block once auto-detected. Either way it      */
/* stays invisible until that decision is made, to avoid a visible jump  */
/* from the raw hook position to the final one. The JS sets visibility   */
/* back to visible as its last step for every block it processes, and a  */
/* 2-second safety timeout (see the top of the placement script) reveals */
/* any block still hidden if that processing never ran for any reason.   */
/* -------------------------------------------------------------------- */
.sbe-social-sharing {
  visibility: hidden;
}
.sbe-social-sharing[data-sbe-placed="1"] {
  visibility: visible;
}

/* -------------------------------------------------------------------- */
/* Layout lock (v1.4.4) - second line of defence                        */
/* The JS (lockLayout(), see sbe_sharebuttons.js) applies these same     */
/* overrides as inline !important styles once the block is placed,      */
/* which reliably beats any theme rule. This CSS copy only matters for  */
/* the narrow gap before that JS runs (or on the off chance it throws   */
/* before reaching lockLayout) - some themes style any element that     */
/* lands in a particular structural position (e.g. "last child of this  */
/* container") as a fixed, vertically-stacked sidebar, regardless of    */
/* class name, and this stops that from ever being visible even for a   */
/* moment.                                                              */
/* -------------------------------------------------------------------- */
.sbe-social-sharing {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
  float: none !important;
}
.sbe-social-sharing .sbe-social-sharing__list {
  flex-direction: row !important;
  position: static !important;
}