/* Ecommerce UI — follows each website’s theme tokens */
.commerce-shell {
  --c-surface: var(--bg, #f7fafc);
  --c-panel: color-mix(in srgb, var(--bg, #fff) 90%, var(--accent, #2f8cff) 10%);
  --c-ink: var(--text, #122033);
  --c-muted: var(--muted, #5b6b7c);
  --c-line: color-mix(in srgb, var(--text, #122033) 16%, transparent);
  --c-input: color-mix(in srgb, var(--bg, #fff) 92%, var(--text, #122033) 8%);
  --c-ok: #16a34a;
  --c-warn: #d97706;
  --c-danger: #dc2626;
  background: var(--c-surface);
  color: var(--c-ink);
  padding-top: 2.75rem;
  padding-bottom: 3.75rem;
}

.commerce-shell .container {
  color: var(--c-ink);
}

.commerce-shell h1,
.commerce-shell h2,
.commerce-shell h3,
.commerce-shell h4,
.commerce-shell .h3,
.commerce-shell .h4,
.commerce-shell .h5,
.commerce-shell .h6 {
  color: var(--c-ink);
  font-family: var(--font-display, inherit);
}

.commerce-shell .lead {
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0 0 1.25rem;
  max-width: 40rem;
}

.commerce-shell .panel {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: 1rem;
  padding: 1.25rem 1.35rem;
  color: var(--c-ink);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--bg-deep, #041428) 12%, transparent);
}

.commerce-shell .dash-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.1rem;
}
@media (max-width: 900px) {
  .commerce-shell .dash-layout { grid-template-columns: 1fr; }
}

.commerce-shell .side-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: fit-content;
  position: sticky;
  top: calc(var(--nav-h, 88px) + 0.75rem);
}

.commerce-shell .side-link {
  border: 0;
  background: transparent;
  color: var(--c-ink);
  text-align: left;
  padding: 0.75rem 0.9rem;
  border-radius: 0.7rem;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  display: block;
  width: 100%;
  font: inherit;
  transition: background 0.2s ease, color 0.2s ease;
}

.commerce-shell .side-link:hover {
  background: color-mix(in srgb, var(--accent, #2f8cff) 12%, transparent);
  color: var(--accent, #2f8cff);
}

.commerce-shell .side-link.active {
  background: color-mix(in srgb, var(--accent, #2f8cff) 18%, transparent);
  color: var(--accent, #2f8cff);
  box-shadow: inset 3px 0 0 var(--accent, #2f8cff);
}

.commerce-shell .section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.commerce-shell .files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.commerce-shell .files-grid input[type=file] {
  margin-top: 0.55rem;
  display: block;
  width: 100%;
  color: var(--c-ink);
}

.commerce-shell .grid-2 {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .commerce-shell .grid-2 { grid-template-columns: 1fr; }
}

.commerce-shell label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0.85rem 0 0.35rem;
  color: var(--c-ink);
}

.commerce-shell input:not([type=checkbox]):not([type=file]),
.commerce-shell select {
  width: 100%;
  border-radius: 0.7rem;
  border: 1px solid var(--c-line);
  background: var(--c-input);
  color: var(--c-ink);
  padding: 0.75rem 0.9rem;
  font: inherit;
}

.commerce-shell input::placeholder {
  color: var(--c-muted);
  opacity: 0.85;
}

.commerce-shell .btn,
.commerce-shell button.btn,
.commerce-shell a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 999px;
  padding: 0.75rem 1.15rem;
  background: var(--accent, #2f8cff);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  margin-top: 0.75rem;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent, #2f8cff) 30%, transparent);
}

.commerce-shell .btn.secondary {
  background: color-mix(in srgb, var(--accent, #2f8cff) 14%, var(--c-panel));
  color: var(--c-ink);
  box-shadow: none;
  border: 1px solid var(--c-line);
}
.commerce-shell .btn.danger {
  background: var(--c-danger);
  color: #fff;
  box-shadow: none;
}
.commerce-shell .btn.block { width: 100%; }

.commerce-shell .price {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 0.75rem;
  color: var(--accent, #2f8cff);
}

.commerce-shell .muted { color: var(--c-muted); }

.commerce-shell .alert {
  display: none;
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.7rem;
  font-size: 0.92rem;
}
.commerce-shell .alert.show { display: block; }
.commerce-shell .alert.error {
  background: color-mix(in srgb, var(--c-danger) 12%, var(--c-panel));
  border: 1px solid color-mix(in srgb, var(--c-danger) 40%, transparent);
  color: var(--c-ink);
}
.commerce-shell .alert.ok {
  background: color-mix(in srgb, var(--c-ok) 12%, var(--c-panel));
  border: 1px solid color-mix(in srgb, var(--c-ok) 40%, transparent);
  color: var(--c-ink);
}

.commerce-shell .table-wrap { overflow-x: auto; }
.commerce-shell table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  color: var(--c-ink);
}
.commerce-shell th,
.commerce-shell td {
  text-align: left;
  padding: 0.75rem 0.55rem;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.commerce-shell th {
  color: var(--c-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.commerce-shell .badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent, #2f8cff) 16%, transparent);
  color: var(--c-ink);
}
.commerce-shell .badge.paid,
.commerce-shell .badge.completed {
  background: color-mix(in srgb, var(--c-ok) 18%, transparent);
  color: var(--c-ok);
}
.commerce-shell .badge.new {
  background: color-mix(in srgb, var(--accent, #2f8cff) 18%, transparent);
  color: var(--accent, #2f8cff);
}
.commerce-shell .badge.in_progress {
  background: color-mix(in srgb, var(--c-warn) 18%, transparent);
  color: var(--c-warn);
}
.commerce-shell .badge.cancelled {
  background: color-mix(in srgb, var(--c-danger) 16%, transparent);
  color: var(--c-danger);
}

.commerce-shell .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 900px) {
  .commerce-shell .stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .commerce-shell .stats { grid-template-columns: 1fr; }
}

.commerce-shell .stat {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: 0.95rem;
  padding: 1.05rem 1.1rem;
  color: var(--c-ink);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--bg-deep, #041428) 10%, transparent);
}
.commerce-shell .stat .n {
  font-family: var(--font-display, inherit);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--accent, #2f8cff);
  line-height: 1.15;
  margin-bottom: 0.2rem;
}
.commerce-shell .stat .muted,
.commerce-shell .stat span {
  color: var(--c-muted);
  font-weight: 600;
  font-size: 0.9rem;
}

.commerce-shell .hidden { display: none !important; }
.commerce-shell .row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 700px) {
  .commerce-shell .row-2 { grid-template-columns: 1fr; }
}

.commerce-shell .hint {
  font-size: 0.82rem;
  color: var(--c-muted);
  margin-top: 0.65rem;
}

.commerce-shell .order-card + .order-card { margin-top: 0.85rem; }
.commerce-shell .commerce-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.commerce-shell .commerce-action-btns {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.commerce-shell .commerce-action-btns .btn { margin-top: 0; }
.commerce-shell .commerce-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--c-ink);
}
.commerce-shell .commerce-check input { width: auto; }

/* Strong brand-specific polish for dark Bio Blessing theme */
.theme-bb .commerce-shell {
  --c-surface: #121212;
  --c-panel: #1c1915;
  --c-ink: #f4efe4;
  --c-muted: #b7aea0;
  --c-line: rgba(197, 160, 89, 0.22);
  --c-input: #161412;
  background:
    radial-gradient(circle at 50% 0%, rgba(197, 160, 89, 0.1), transparent 42%),
    linear-gradient(180deg, #121212, #0b0b0c 55%, #141210);
}
.theme-bb .commerce-shell .panel,
.theme-bb .commerce-shell .stat {
  background: linear-gradient(165deg, #1c1915, #141210);
  border-color: rgba(197, 160, 89, 0.22);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.theme-bb .commerce-shell .side-link.active,
.theme-bb .commerce-shell .side-link:hover {
  background: rgba(197, 160, 89, 0.16);
  color: #c5a059;
}
.theme-bb .commerce-shell .btn {
  color: #111;
}
.theme-bb .commerce-shell .btn.secondary {
  color: #f4efe4;
  background: rgba(197, 160, 89, 0.14);
  border-color: rgba(197, 160, 89, 0.28);
}
.theme-bb .commerce-shell .stat .n,
.theme-bb .commerce-shell .price {
  color: #c5a059;
}

/* Light brand shells — soft tinted surface */
.theme-vertex .commerce-shell,
.theme-mm .commerce-shell,
.theme-rr .commerce-shell,
.theme-oo .commerce-shell {
  --c-panel: #ffffff;
  --c-input: #ffffff;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%),
    var(--bg, #f7fafc);
}
.theme-vertex .commerce-shell .panel,
.theme-mm .commerce-shell .panel,
.theme-rr .commerce-shell .panel,
.theme-oo .commerce-shell .panel,
.theme-vertex .commerce-shell .stat,
.theme-mm .commerce-shell .stat,
.theme-rr .commerce-shell .stat,
.theme-oo .commerce-shell .stat {
  background: #fff;
  box-shadow: 0 12px 30px rgba(10, 30, 60, 0.08);
}

.vg-cart-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 2000;
  background: var(--bg-deep, #1b3355);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  opacity: 0;
  transform: translateY(8px);
  transition: 0.25s ease;
  pointer-events: none;
}
.vg-cart-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.cart-badge,
.js-cart-count {
  display: inline-flex;
  min-width: 1.2rem;
  justify-content: center;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #2f8cff) 22%, transparent);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent, #2f8cff);
}