/* Minimal, rounded, modern */
:root {
  --bw-sop-bg: #ffffff;
  --bw-sop-accent: #26246f; /* you can change to match brand */
  --bw-sop-text: #111;
  --bw-sop-muted: #8c8c8c;
  --bw-sop-shadow: 0 8px 24px rgba(0,0,0,.15);
  --bw-sop-radius: 14px;
  --bw-sop-hide-dur: .25s;

  /* Vertical tray sizing */
  --bw-sop-dock-w: 64px;        /* ~48px icon + padding/border */
  --bw-sop-gap-to-panel: 12px;  /* space between tray and panel */
}

.bw-sop {
  position: fixed;
  right: 16px;
  bottom: 20%;
  z-index: 9999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  transition: opacity var(--bw-sop-hide-dur) ease, transform var(--bw-sop-hide-dur) ease;
}
/* hide-while-scrolling (JS toggles this) */
.bw-sop--hidden { opacity: .15; transform: translateY(8px); pointer-events: none; }

/* VERTICAL tray with labels BELOW icons */
.bw-sop__dock {
  display: flex;
  flex-direction: column;      /* vertical stack */
  gap: 28px;                   /* extra room for labels under icons */
  background: var(--bw-sop-bg);
  padding: 8px;
  border-radius: calc(var(--bw-sop-radius) + 4px);
  box-shadow: var(--bw-sop-shadow);
  align-items: center;
  width: var(--bw-sop-dock-w);
}

.bw-sop__icon {
  position: relative;
  width: 40px;
  height: 40px;
	padding: 10px;
  background: #fff;
  color: var(--bw-sop-accent);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bw-sop__icon:hover { transform: translateY(-1px); box-shadow: var(--bw-sop-shadow); }

/* LABELS: centered UNDER each icon */
.bw-sop__label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -18px;               /* below the icon */
  font-size: 11px;
  color: var(--bw-sop-muted);
  white-space: nowrap;
}

.bw-sop__badge {
  position: absolute;
  top: -6px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bw-sop-accent);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.bw-sop__svg { width: 22px; height: 22px; fill: currentColor; }

/* Panel opens to the LEFT of the vertical tray */
.bw-sop__panel {
  position: fixed;
  right: calc(16px + var(--bw-sop-dock-w) + var(--bw-sop-gap-to-panel));
  bottom: 25%;
  width: min(420px, 95vw);
  max-height: 75vh;
  background: var(--bw-sop-bg);
  border-radius: var(--bw-sop-radius);
  box-shadow: var(--bw-sop-shadow);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: bw-sop-in .18s ease;
}
.bw-sop__panel[aria-hidden="false"] { display: flex; }

@keyframes bw-sop-in {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.bw-sop__panel-header,
.bw-sop__panel-footer {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: #fafafa;
}
.bw-sop__panel-footer { border-top: 1px solid rgba(0,0,0,.06); border-bottom: 0; }

.bw-sop__panel-body { padding: 12px; overflow: auto; }
.bw-sop__close { margin-left: auto; font-size: 24px; line-height: 1; border: 0; background: transparent; color: var(--bw-sop-muted); cursor: pointer; }

.bw-sop__btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: var(--bw-sop-accent);
  border: 1px solid rgba(0,0,0,.08);
  text-decoration: none;
  margin-right: 8px;
  font-weight: 600;
}
.bw-sop__btn--primary { background: var(--bw-sop-accent); color: #fff; border-color: var(--bw-sop-accent); }
.bw-sop__btn--ghost   { background: #f5f5f5; color: var(--bw-sop-text); }

/* Make shortcode outputs inside panel look neat */
.bw-sop__panel .wishlist_table,
.bw-sop__panel .shop_table { font-size: 14px; }
.bw-sop__panel .button,
.bw-sop__panel a.button { border-radius: 10px; }

/* Mobile tweaks */
@media (max-width: 480px) {
  .bw-sop__label { display: none; } /* keep mobile tidy */
  .bw-sop__panel { width: calc(100vw - 32px); max-height: 70vh; right: 16px; }
}

/* Off-canvas tray + sticky handle */
.bw-sop--off { transform: translateX(120%); opacity: 1; pointer-events: none; }

.bw-sop__collapse{
  width: 34px; height: 34px; margin: 2px 0 0 0;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff; color: var(--bw-sop-accent);
  border-radius: 999px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  padding: 0;
}

.bw-sop__handle{
  position: fixed;
  padding: 0;
  right: 0;
  bottom: 20%; /* aligns with tray */
  width: 40px; height: 60px;
  border: 1px solid rgba(0,0,0,.08);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  background: var(--bw-sop-bg);
  color: var(--bw-sop-accent);
  box-shadow: var(--bw-sop-shadow);
  display: none;
  align-items:center; justify-content:center;
  z-index: 10000;
  cursor: pointer;
}
.bw-sop__handle.is-visible{ display:flex; }

/* === Menu icon badges === */
.bw-sop-menu-icon {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.bw-sop-menu-icon .bw-sop__svg { 
	width: 18px; 
	height: 18px; 
	vertical-align: middle; 
}

/* small badge for nav items */
.bw-sop__badge--menu {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--bw-sop-accent);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  display: none; /* shown via JS when count > 0 */
}

/* Wishlist heart outline by default; fill when has items */
.bw-sop__icon[data-panel="wishlist"] .bw-sop__svg--heart,
.bw-sop-menu-icon.is-wishlist .bw-sop__svg--heart {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.8;
}
.bw-sop__icon[data-panel="wishlist"].is-filled .bw-sop__svg--heart,
.bw-sop-menu-icon.is-wishlist.is-filled .bw-sop__svg--heart {
  fill: currentColor !important;
  stroke: none !important;
}