#gw-social-checkout-bar,
#gw-social-checkout-bar * {
  box-sizing: border-box;
}

#gw-social-checkout-bar {
  position: fixed;
  top: var(--gw-bar-top, 50%);
  bottom: auto;
  z-index: var(--gw-z-index, 2147483000);
  transform: translateY(-50%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", Arial, sans-serif;
  line-height: 1;
  pointer-events: none;
}

#gw-social-checkout-bar.gw-vertical-bottom {
  top: auto;
  bottom: var(--gw-bar-bottom, 180px);
  transform: none;
}

#gw-social-checkout-bar.gw-position-right { right: var(--gw-side-offset, 14px); }
#gw-social-checkout-bar.gw-position-left { left: var(--gw-side-offset, 14px); }

#gw-social-checkout-bar .gw-bar-items,
#gw-social-checkout-bar .gw-social-items {
  display: flex;
  flex-direction: column;
  gap: var(--gw-icon-gap, 8px);
}

#gw-social-checkout-bar.gw-position-right .gw-bar-items { align-items: flex-end; }
#gw-social-checkout-bar.gw-position-left .gw-bar-items { align-items: flex-start; }

#gw-social-checkout-bar .gw-bar-item,
#gw-social-checkout-bar .gw-bar-toggle {
  border: 0;
  border-radius: var(--gw-corner-radius, 999px);
  box-shadow: var(--gw-shadow-x, 0) var(--gw-shadow-y, 4px) var(--gw-shadow-blur, 18px) rgba(0, 0, 0, var(--gw-shadow-opacity, .16));
  text-decoration: none !important;
  transition: transform var(--gw-hover-duration, 180ms) ease, opacity .2s ease, width .24s ease, background-color .2s ease;
}

#gw-social-checkout-bar .gw-social-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gw-icon-size, 48px);
  height: var(--gw-icon-size, 48px);
  color: var(--gw-icon-color, #333);
  background: var(--gw-icon-background, #fff);
  overflow: hidden;
  pointer-events: auto;
}

/* 內建品牌圖示與品牌色，不依賴網站主題或 Font Awesome。 */
#gw-social-checkout-bar .gw-type-facebook { color: #fff; background: #1877f2; }
#gw-social-checkout-bar .gw-type-line { color: #fff; background: #06c755; }
#gw-social-checkout-bar .gw-type-youtube { color: #fff; background: #ff0000; }
#gw-social-checkout-bar .gw-type-instagram {
  color: #fff;
  background: radial-gradient(circle at 30% 107%, #fdf497 0 5%, #fd5949 38%, #d6249f 62%, #285aeb 100%);
}
#gw-social-checkout-bar .gw-type-tiktok { color: #fff; background: #000; }
#gw-social-checkout-bar .gw-type-whatsapp { color: #fff; background: #25d366; }
#gw-social-checkout-bar .gw-type-email,
#gw-social-checkout-bar .gw-type-phone { color: #fff; background: #2563eb; }

#gw-social-checkout-bar .gw-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--gw-icon-size, 48px) * .52);
  height: calc(var(--gw-icon-size, 48px) * .52);
  flex: 0 0 auto;
}

#gw-social-checkout-bar .gw-icon-wrap svg,
#gw-social-checkout-bar .gw-icon-wrap img {
  display: block;
  width: 100%;
  height: 100%;
}

#gw-social-checkout-bar .gw-icon-wrap svg { fill: currentColor; }
#gw-social-checkout-bar .gw-icon-wrap img { object-fit: contain; }

#gw-social-checkout-bar .gw-has-custom-image .gw-icon-wrap {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

#gw-social-checkout-bar .gw-image-fit-contain .gw-icon-wrap img { object-fit: contain; }
#gw-social-checkout-bar .gw-image-fit-cover .gw-icon-wrap img { object-fit: cover; }

#gw-social-checkout-bar .gw-has-hover-image .gw-icon-wrap { position: relative; }
#gw-social-checkout-bar .gw-has-hover-image .gw-image-primary,
#gw-social-checkout-bar .gw-has-hover-image .gw-image-hover {
  transition: opacity var(--gw-hover-duration, 180ms) ease;
}
#gw-social-checkout-bar .gw-has-hover-image .gw-image-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  #gw-social-checkout-bar .gw-has-hover-image:hover .gw-image-primary { opacity: 0; }
  #gw-social-checkout-bar .gw-has-hover-image:hover .gw-image-hover { opacity: 1; }
}

#gw-social-checkout-bar .gw-checkout-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: var(--gw-icon-size, 48px);
  height: var(--gw-icon-size, 48px);
  padding: 0 18px 0 12px;
  gap: 8px;
  color: #fff !important;
  background: var(--gw-checkout-color, #e53935);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: auto;
}

#gw-social-checkout-bar .gw-checkout-item .gw-icon-wrap {
  width: calc(var(--gw-icon-size, 48px) * .46);
  height: calc(var(--gw-icon-size, 48px) * .46);
}

#gw-social-checkout-bar .gw-cart-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 23px;
  height: 23px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: #e60012;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .24);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

#gw-social-checkout-bar .gw-bar-toggle {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #fff;
  background: var(--gw-toggle-color, #333);
  cursor: pointer;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

#gw-social-checkout-bar .gw-bar-toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform .24s ease;
}

#gw-social-checkout-bar.gw-position-left .gw-bar-toggle svg { transform: rotate(180deg); }
#gw-social-checkout-bar.gw-collapsed.gw-position-right .gw-bar-toggle svg { transform: rotate(180deg); }
#gw-social-checkout-bar.gw-collapsed.gw-position-left .gw-bar-toggle svg { transform: rotate(0deg); }

#gw-social-checkout-bar .gw-bar-item:hover,
#gw-social-checkout-bar .gw-bar-item:focus,
#gw-social-checkout-bar .gw-bar-toggle:hover,
#gw-social-checkout-bar .gw-bar-toggle:focus {
  transform: scale(var(--gw-hover-scale, 1.1));
  outline: none;
}

#gw-social-checkout-bar .gw-social-items,
#gw-social-checkout-bar .gw-checkout-label {
  max-height: 720px;
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease, max-height .24s ease, visibility .18s ease;
}

#gw-social-checkout-bar.gw-collapsed .gw-social-items {
  display: none;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

#gw-social-checkout-bar .gw-social-items[aria-hidden="true"] {
  display: none !important;
}

#gw-social-checkout-bar.gw-collapsed .gw-checkout-item {
  width: var(--gw-icon-size, 48px);
  padding: 0;
  justify-content: center;
}

#gw-social-checkout-bar.gw-collapsed .gw-checkout-label {
  display: none;
}

#gw-social-checkout-bar.gw-cart-empty .gw-checkout-item { display: none; }
#gw-social-checkout-bar.gw-hide-desktop { display: none; }
#gw-social-checkout-bar.gw-preview-hidden { display: none !important; }

/* Journal 3 Magnific Popup 快速預覽的 CSS 保險層；即使外部 JS 延遲載入也不顯示工具列。 */
body:has(.mfp-wrap #button-cart) #gw-social-checkout-bar,
body:has(.mfp-wrap form[action*="checkout/cart/add"]) #gw-social-checkout-bar,
body:has(.mfp-wrap iframe[src*="quickview"]) #gw-social-checkout-bar {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #gw-social-checkout-bar .gw-bar-item,
  #gw-social-checkout-bar .gw-bar-toggle,
  #gw-social-checkout-bar .gw-bar-toggle svg,
  #gw-social-checkout-bar .gw-social-items { transition: none; }
}