/* Online Store view differentiation for online businesses */

:root{
  --sf-shop-online-card-bg: var(--surface, #ffffff);
  --sf-shop-online-card-bg-soft: var(--surface-2, #f3f4f6);
  --sf-shop-online-card-border: var(--border, rgba(15,23,42,.12));
  --sf-shop-online-card-border-strong: var(--border-strong, rgba(15,23,42,.18));
  --sf-shop-online-card-text: var(--text, #0f172a);
  --sf-shop-online-card-muted: var(--muted, #64748b);
  --sf-shop-online-card-shadow: var(--shadow-soft, 0 12px 34px rgba(15,23,42,.08));
  --sf-shop-online-simple-tint: rgba(37,99,235,.08);
  --sf-shop-online-advanced-tint: rgba(79,70,229,.10);
  --sf-shop-online-developer-tint: rgba(15,23,42,.06);
  --sf-shop-online-pill-bg: rgba(37,99,235,.08);
  --sf-shop-online-pill-border: rgba(37,99,235,.18);
  --sf-shop-online-pill-text: var(--accent, #2563eb);
  --sf-shop-online-advanced-pill-bg: rgba(79,70,229,.10);
  --sf-shop-online-advanced-pill-border: rgba(79,70,229,.18);
  --sf-shop-online-advanced-pill-text: #4f46e5;
  --sf-shop-online-developer-pill-bg: rgba(15,23,42,.08);
  --sf-shop-online-developer-pill-border: rgba(15,23,42,.18);
  --sf-shop-online-developer-pill-text: var(--text, #0f172a);
}

html[data-theme="dark"]{
  --sf-shop-online-card-bg: rgba(11,16,32,.92);
  --sf-shop-online-card-bg-soft: rgba(2,6,23,.48);
  --sf-shop-online-card-border: rgba(148,163,184,.16);
  --sf-shop-online-card-border-strong: rgba(148,163,184,.24);
  --sf-shop-online-card-text: var(--text, #e5e7eb);
  --sf-shop-online-card-muted: var(--muted, #9ca3af);
  --sf-shop-online-card-shadow: 0 18px 55px rgba(0,0,0,.38);
  --sf-shop-online-simple-tint: rgba(34,197,94,.12);
  --sf-shop-online-advanced-tint: rgba(14,165,233,.14);
  --sf-shop-online-developer-tint: rgba(148,163,184,.14);
  --sf-shop-online-pill-bg: rgba(34,197,94,.16);
  --sf-shop-online-pill-border: rgba(34,197,94,.24);
  --sf-shop-online-pill-text: var(--accent, #22c55e);
  --sf-shop-online-advanced-pill-bg: rgba(99,102,241,.18);
  --sf-shop-online-advanced-pill-border: rgba(165,180,252,.22);
  --sf-shop-online-advanced-pill-text: #a5b4fc;
  --sf-shop-online-developer-pill-bg: rgba(148,163,184,.14);
  --sf-shop-online-developer-pill-border: rgba(148,163,184,.22);
  --sf-shop-online-developer-pill-text: var(--text, #e5e7eb);
}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --sf-shop-online-card-bg: rgba(11,16,32,.92);
    --sf-shop-online-card-bg-soft: rgba(2,6,23,.48);
    --sf-shop-online-card-border: rgba(148,163,184,.16);
    --sf-shop-online-card-border-strong: rgba(148,163,184,.24);
    --sf-shop-online-card-text: var(--text, #e5e7eb);
    --sf-shop-online-card-muted: var(--muted, #9ca3af);
    --sf-shop-online-card-shadow: 0 18px 55px rgba(0,0,0,.38);
    --sf-shop-online-simple-tint: rgba(34,197,94,.12);
    --sf-shop-online-advanced-tint: rgba(14,165,233,.14);
    --sf-shop-online-developer-tint: rgba(148,163,184,.14);
    --sf-shop-online-pill-bg: rgba(34,197,94,.16);
    --sf-shop-online-pill-border: rgba(34,197,94,.24);
    --sf-shop-online-pill-text: var(--accent, #22c55e);
    --sf-shop-online-advanced-pill-bg: rgba(99,102,241,.18);
    --sf-shop-online-advanced-pill-border: rgba(165,180,252,.22);
    --sf-shop-online-advanced-pill-text: #a5b4fc;
    --sf-shop-online-developer-pill-bg: rgba(148,163,184,.14);
    --sf-shop-online-developer-pill-border: rgba(148,163,184,.22);
    --sf-shop-online-developer-pill-text: var(--text, #e5e7eb);
  }
}

#sf-shop-online-hero,
#sf-shop-online-panel-card,
#sf-shop-online-nav-note{
  border:1px solid var(--sf-shop-online-card-border);
  background:var(--sf-shop-online-card-bg);
  color:var(--sf-shop-online-card-text);
  border-radius:24px;
  box-shadow:var(--sf-shop-online-card-shadow);
}

#sf-shop-online-hero *,
#sf-shop-online-panel-card *,
#sf-shop-online-nav-note *{
  box-sizing:border-box;
}

#sf-shop-online-hero{
  margin:14px 0 14px;
  padding:18px 18px 16px;
  overflow:hidden;
}

#sf-shop-online-panel-card{
  margin:0 0 12px;
  padding:16px 16px 14px;
  overflow:hidden;
}

#sf-shop-online-nav-note{
  margin-top:14px;
  padding:12px 14px;
}

.sf-shop-online-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:16px;
  align-items:start;
}

@media (min-width: 1180px){
  .sf-shop-online-head{
    grid-template-columns:minmax(0, 1fr) minmax(320px, 420px);
  }
}

.sf-shop-online-head-main,
.sf-shop-online-head-actions,
.sf-shop-online-panel-grid > div{
  min-width:0;
}

.sf-shop-online-head-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
  justify-content:flex-start;
}

.sf-shop-online-kicker,
.sf-shop-online-panel-kicker,
.sf-shop-online-nav-kicker{
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--sf-shop-online-card-muted);
}

.sf-shop-online-title,
.sf-shop-online-panel-title{
  margin:8px 0 0;
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:900;
  color:var(--sf-shop-online-card-text);
}

.sf-shop-online-panel-title{
  font-size:19px;
}

.sf-shop-online-body,
.sf-shop-online-panel-body,
.sf-shop-online-nav-copy,
.sf-shop-online-switch-copy{
  margin-top:10px;
  font-size:14px;
  line-height:1.65;
  color:var(--sf-shop-online-card-text);
}

.sf-shop-online-nav-copy,
.sf-shop-online-switch-copy,
.sf-shop-online-status-note,
.sf-shop-online-status-label{
  color:var(--sf-shop-online-card-muted);
}

.sf-shop-online-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.sf-shop-online-pill,
.sf-shop-tier-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1.15;
  border:1px solid var(--sf-shop-online-pill-border);
  background:var(--sf-shop-online-pill-bg);
  color:var(--sf-shop-online-pill-text);
}

.sf-shop-tier-pill{
  margin-left:10px;
  margin-top:6px;
  vertical-align:middle;
}

.sf-shop-tier-pill--advanced{
  border-color:var(--sf-shop-online-advanced-pill-border);
  background:var(--sf-shop-online-advanced-pill-bg);
  color:var(--sf-shop-online-advanced-pill-text);
}

.sf-shop-tier-pill--developer{
  border-color:var(--sf-shop-online-developer-pill-border);
  background:var(--sf-shop-online-developer-pill-bg);
  color:var(--sf-shop-online-developer-pill-text);
}

.sf-shop-online-actions,
.sf-shop-online-switch-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.sf-shop-online-actions .btn,
.sf-shop-online-head-actions .btn,
.sf-shop-online-switch-actions .btn{
  white-space:normal;
  text-align:center;
}

.sf-shop-online-status-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  margin-top:16px;
}

.sf-shop-online-status{
  border:1px solid var(--sf-shop-online-card-border);
  background:var(--sf-shop-online-card-bg-soft);
  border-radius:18px;
  padding:14px;
  min-width:0;
}

.sf-shop-online-status-label{
  font-size:12px;
  font-weight:800;
}

.sf-shop-online-status-value{
  margin-top:8px;
  font-size:18px;
  font-weight:900;
  line-height:1.25;
  color:var(--sf-shop-online-card-text);
  word-break:break-word;
}

.sf-shop-online-status-note{
  margin-top:8px;
  font-size:12px;
  line-height:1.55;
}

.sf-shop-online-panel-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(280px, .8fr);
  gap:16px;
  align-items:start;
}

.sf-shop-online-panel-list{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.sf-shop-online-panel-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  line-height:1.6;
  color:var(--sf-shop-online-card-text);
}

.sf-shop-online-panel-list b{
  color:var(--sf-shop-online-card-text);
}

.sf-shop-online-panel-check{
  width:22px;
  height:22px;
  border-radius:999px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  background:var(--sf-shop-online-pill-bg);
  color:var(--sf-shop-online-pill-text);
  margin-top:1px;
}

.sf-shop-online-switch{
  border:1px dashed var(--sf-shop-online-card-border-strong);
  border-radius:18px;
  padding:14px;
  background:var(--sf-shop-online-card-bg-soft);
  margin-top:14px;
}

#shop-page[data-shop-online-workspace="true"] .sf-shop-nav-btn-hidden,
#shop-page[data-shop-online-workspace="true"] .sf-shop-nav-section-hidden{
  display:none !important;
}

/* simple view: hide design + advanced + developer tier elements */
#shop-page[data-shop-online-workspace="true"][data-shop-online-view="simple"] [data-shop-online-tier="design"],
#shop-page[data-shop-online-workspace="true"][data-shop-online-view="simple"] [data-shop-online-tier="advanced"],
#shop-page[data-shop-online-workspace="true"][data-shop-online-view="simple"] [data-shop-online-tier="developer"]{
  display:none !important;
}
/* design view: hide advanced + developer tier elements */
#shop-page[data-shop-online-workspace="true"][data-shop-online-view="design"] [data-shop-online-tier="advanced"],
#shop-page[data-shop-online-workspace="true"][data-shop-online-view="design"] [data-shop-online-tier="developer"]{
  display:none !important;
}
/* advanced view: hide developer-only tier elements */
#shop-page[data-shop-online-workspace="true"][data-shop-online-view="advanced"] [data-shop-online-tier="developer"]{
  display:none !important;
}

#shop-page:not([data-shop-online-workspace="true"]) .sf-shop-tier-pill,
#shop-page:not([data-shop-online-workspace="true"]) #sf-shop-online-hero,
#shop-page:not([data-shop-online-workspace="true"]) #sf-shop-online-nav-note,
#shop-page:not([data-shop-online-workspace="true"]) #sf-shop-online-panel-card{
  display:none !important;
}

#shop-page[data-shop-online-workspace="true"][data-shop-online-view="simple"] #sf-shop-online-hero,
#shop-page[data-shop-online-workspace="true"] #sf-shop-online-panel-card[data-mode="simple"]{
  background:linear-gradient(135deg, var(--sf-shop-online-simple-tint), var(--sf-shop-online-card-bg));
}

#shop-page[data-shop-online-workspace="true"][data-shop-online-view="advanced"] #sf-shop-online-hero,
#shop-page[data-shop-online-workspace="true"] #sf-shop-online-panel-card[data-mode="advanced"]{
  background:linear-gradient(135deg, var(--sf-shop-online-advanced-tint), var(--sf-shop-online-card-bg));
}

#shop-page[data-shop-online-workspace="true"][data-shop-online-view="developer"] #sf-shop-online-hero,
#shop-page[data-shop-online-workspace="true"] #sf-shop-online-panel-card[data-mode="developer"]{
  border-style:dashed;
  background:linear-gradient(135deg, var(--sf-shop-online-developer-tint), var(--sf-shop-online-card-bg));
}

@media (max-width: 1120px){
  .sf-shop-online-panel-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px){
  #sf-shop-online-hero,
  #sf-shop-online-panel-card,
  #sf-shop-online-nav-note{
    border-radius:20px;
  }

  .sf-shop-online-title{
    font-size:21px;
  }

  .sf-shop-online-head-actions,
  .sf-shop-online-actions,
  .sf-shop-online-switch-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .sf-shop-online-head-actions .btn,
  .sf-shop-online-actions .btn,
  .sf-shop-online-switch-actions .btn{
    width:100%;
  }
}

/* ------------------------------------------------------------------ */
/* Stability + theme-safe overrides                                   */
/* ------------------------------------------------------------------ */

.sf-mode-switch{
  border-color:var(--border, rgba(15,23,42,.12));
  background:var(--surface-2, #f7f8fc);
  box-shadow:var(--shadow-soft, 0 12px 34px rgba(15,23,42,.08));
}

.sf-mode-switch-title,
.sf-mode-switch-sub,
.sf-mode-switch-label{
  color:var(--muted, #64748b);
}

.sf-mode-switch button{
  color:var(--muted, #64748b);
}

.sf-mode-switch button:hover{
  background:var(--accent-soft, rgba(37,99,235,.10));
  color:var(--accent, #2563eb);
}

.sf-mode-switch button.is-active{
  background:var(--surface, #ffffff);
  color:var(--accent, #2563eb);
  box-shadow:var(--shadow-soft, 0 12px 34px rgba(15,23,42,.08));
}

html[data-theme="dark"] .sf-mode-switch button.is-active,
html[data-theme="dark"] .sf-mode-switch,
html[data-theme="dark"] .sf-mode-switch-title,
html[data-theme="dark"] .sf-mode-switch-sub,
html[data-theme="dark"] .sf-mode-switch-label,
html[data-theme="dark"] .sf-mode-switch button{
  color:var(--text, #e5e7eb);
}

html[data-theme="dark"] .sf-mode-switch{
  border-color:rgba(148,163,184,.18);
  background:rgba(2,6,23,.72);
}

html[data-theme="dark"] .sf-mode-switch button{
  color:var(--muted, #9ca3af);
}

html[data-theme="dark"] .sf-mode-switch button.is-active{
  background:rgba(148,163,184,.14);
  color:var(--accent, #22c55e);
}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .sf-mode-switch,
  html:not([data-theme="light"]) .sf-mode-switch button,
  html:not([data-theme="light"]) .sf-mode-switch-title,
  html:not([data-theme="light"]) .sf-mode-switch-sub,
  html:not([data-theme="light"]) .sf-mode-switch-label{
    color:var(--text, #e5e7eb);
  }

  html:not([data-theme="light"]) .sf-mode-switch{
    border-color:rgba(148,163,184,.18);
    background:rgba(2,6,23,.72);
  }

  html:not([data-theme="light"]) .sf-mode-switch button{
    color:var(--muted, #9ca3af);
  }

  html:not([data-theme="light"]) .sf-mode-switch button.is-active{
    background:rgba(148,163,184,.14);
    color:var(--accent, #22c55e);
  }
}

#shop-page .shop-ux-card,
#shop-page .shop-ux-row,
#shop-page .shop-ux-empty,
#shop-page .shop-ux-advanced,
#shop-page .shop-ux-metric,
#shop-page .shop-ux-step{
  background:var(--sf-shop-online-card-bg) !important;
  border-color:var(--sf-shop-online-card-border) !important;
  color:var(--sf-shop-online-card-text) !important;
}

#shop-page .shop-ux-card h4,
#shop-page .shop-ux-title,
#shop-page .shop-ux-row-title,
#shop-page .shop-ux-metric-num,
#shop-page .shop-ux-field > label,
#shop-page .shop-ux-label,
#shop-page .shop-ux-advanced summary{
  color:var(--sf-shop-online-card-text) !important;
}

#shop-page .shop-ux-copy,
#shop-page .shop-ux-row-meta,
#shop-page .shop-ux-empty,
#shop-page .shop-ux-note,
#shop-page .shop-ux-field-help,
#shop-page .shop-ux-advanced-content,
#shop-page .shop-ux-advanced summary svg,
#shop-page .shop-ux-advanced summary .muted{
  color:var(--sf-shop-online-card-muted) !important;
}

#shop-page .shop-ux-step.is-active{
  box-shadow:var(--sf-shop-online-card-shadow);
}

/* -------------------------------------------------------------------------- */
/* Helper chrome cleanup: keep only the global header view switch             */
/* -------------------------------------------------------------------------- */
#sf-shop-mode-switch,
#sf-shop-online-hero,
#sf-shop-online-nav-note,
#sf-shop-online-panel-card{
  display: none !important;
}