/* Provider switch (Empik / Smyk / …). Tabs are generated from the JS registry,
   so a new store appears here automatically — no markup edit needed.
   The active tab uses the live theme (--red); each tab's brand dot comes from an
   inline `--dot` set when the tab is built. */
.provider-bar { max-width: 1080px; margin: 20px auto 0; padding: 0 24px; display: flex; justify-content: center; }
.provider-tabs {
  display: inline-flex; background: var(--surface); border: 1px solid var(--border);
  border-radius: 13px; padding: 4px; gap: 3px; box-shadow: var(--shadow);
  max-width: 100%; overflow-x: auto;
}
.ptab {
  display: flex; align-items: center; gap: 8px; padding: 9px 26px; border: none; background: transparent;
  border-radius: 10px; font-size: 0.94rem; font-weight: 700; color: var(--text2); cursor: pointer;
  transition: background .16s, color .16s, box-shadow .16s;
}
.ptab:hover { background: var(--bg); }
.ptab .bdot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--text3)); transition: background .16s; }
.ptab.active { background: var(--red); color: var(--tab-text, #fff); box-shadow: 0 2px 8px rgba(var(--accent-rgb), .3); }
.ptab.active:hover { background: var(--red-dark); }
.ptab.active .bdot { background: #fff; }

@media (max-width: 640px) {
  .provider-bar { padding: 0 14px; margin-top: 16px; }
  .ptab { padding: 8px 12px; flex-shrink: 0; }
}