:root {
  --cbsm-ink: #443746;
  --cbsm-muted: #8c7b8f;
  --cbsm-white: #ffffff;
  --cbsm-bg: #fff7fb;
  --cbsm-pink-50: #fff5f9;
  --cbsm-pink-100: #fbe8f1;
  --cbsm-pink-200: #f3cfe0;
  --cbsm-pink-500: #cf7ea4;
  --cbsm-purple-50: #fbf8ff;
  --cbsm-purple-100: #eee7fb;
  --cbsm-purple-200: #dfd1f5;
  --cbsm-purple-500: #9c79c8;
  --cbsm-green-100: #e8f8f0;
  --cbsm-green-600: #4b8f6b;
  --cbsm-peach-100: #fff1e2;
  --cbsm-red-100: #fde9ef;
  --cbsm-red-600: #b35d68;
  --cbsm-shadow: 0 18px 55px rgba(126, 92, 126, .11);
  --cbsm-gap: 16px;
  --cbsm-radius-xl: 30px;
  --cbsm-radius-lg: 24px;
}

html.cbsm-app-active,
body.cbsm-app-active { overflow: hidden !important; }

.cbsm-app, .cbsm-app * { box-sizing: border-box; }
.cbsm-app {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: 100vw;
  height: 100dvh;
  padding: 12px;
  overflow: hidden;
  color: var(--cbsm-ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(243,207,224,.42), transparent 29%),
    radial-gradient(circle at 88% 92%, rgba(223,209,245,.42), transparent 31%),
    #fff8fc;
  font-family: "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  line-height: 1.45;
}

.cbsm-shell {
  width: min(100%, 1180px);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(243,207,224,.88);
  border-radius: var(--cbsm-radius-xl);
  overflow: hidden;
  box-shadow: var(--cbsm-shadow);
}

.cbsm-topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:20px 24px 16px;
  background:linear-gradient(135deg, rgba(255,245,249,.96), rgba(251,248,255,.96));
  border-bottom:1px solid var(--cbsm-pink-100);
}
.cbsm-topbar h1,
.cbsm-hero h2,
.cbsm-section-head h2,
.cbsm-section-head h3,
.cbsm-modal-card h2 {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  letter-spacing: -.02em;
}
.cbsm-topbar h1 { margin:2px 0 0; font-size:clamp(25px, 4vw, 35px); line-height:1.05; color:var(--cbsm-ink); font-weight:650; }
.cbsm-eyebrow { color:var(--cbsm-purple-500); font-weight:800; font-size:11px; letter-spacing:.10em; text-transform:uppercase; }
.cbsm-icon-btn, .cbsm-modal-close { border:1px solid var(--cbsm-purple-200); background:#fff; width:42px; height:42px; border-radius:16px; cursor:pointer; font-size:22px; color:var(--cbsm-purple-500); box-shadow:0 5px 14px rgba(156,121,200,.08); }

.cbsm-main-nav { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding:9px 12px 10px; background:#fff; border-bottom:1px solid var(--cbsm-purple-100); z-index:10; }
.cbsm-main-nav button { border:0; background:transparent; padding:11px 8px; border-radius:16px; font:800 13px/1.2 "Nunito", sans-serif; color:var(--cbsm-muted); cursor:pointer; }
.cbsm-main-nav button.is-active { background:linear-gradient(135deg,var(--cbsm-pink-100),var(--cbsm-purple-100)); color:var(--cbsm-ink); box-shadow:inset 0 0 0 1px rgba(223,209,245,.55); }

/* The app itself never scrolls. Only this white workspace does. */
.cbsm-main {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--cbsm-gap);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(207,126,164,.28) transparent;
}
.cbsm-main::-webkit-scrollbar,
.cbsm-modal-card::-webkit-scrollbar,
.cbsm-main-nav::-webkit-scrollbar { width: 4px; height: 4px; }
.cbsm-main::-webkit-scrollbar-track,
.cbsm-modal-card::-webkit-scrollbar-track,
.cbsm-main-nav::-webkit-scrollbar-track { background: transparent; }
.cbsm-main::-webkit-scrollbar-thumb,
.cbsm-modal-card::-webkit-scrollbar-thumb,
.cbsm-main-nav::-webkit-scrollbar-thumb { background: linear-gradient(var(--cbsm-pink-200),var(--cbsm-purple-200)); border-radius:999px; }
.cbsm-main::-webkit-scrollbar-thumb:hover,
.cbsm-modal-card::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--cbsm-pink-500),var(--cbsm-purple-500)); }

.cbsm-loading { padding:70px 20px; text-align:center; color:var(--cbsm-muted); }
.cbsm-card { background:#fff; border:1px solid var(--cbsm-pink-100); border-radius:var(--cbsm-radius-lg); padding:18px; box-shadow:0 7px 20px rgba(126,92,126,.045); }
.cbsm-grid { display:grid; gap:var(--cbsm-gap); }
.cbsm-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cbsm-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }

/* Dashboard blocks all use the same vertical rhythm. */
.cbsm-hero,
.cbsm-stats,
.cbsm-stats + .cbsm-card { margin:0 0 var(--cbsm-gap); }
.cbsm-stats + .cbsm-card { margin-bottom:0; }
.cbsm-card + .cbsm-card { margin-top:var(--cbsm-gap); }

.cbsm-stats { align-items:stretch; }
.cbsm-stats .cbsm-card { padding:16px; min-height:96px; position:relative; display:flex; flex-direction:column; justify-content:center; }
.cbsm-stats .cbsm-stat-card.is-featured {
  min-height:116px;
  background:linear-gradient(145deg,var(--cbsm-pink-50),var(--cbsm-purple-50));
  border-color:var(--cbsm-pink-200);
  box-shadow:0 10px 26px rgba(207,126,164,.10);
}
.cbsm-stat-label { color:var(--cbsm-muted); font-size:12px; font-weight:800; }
.cbsm-stat-value { font-family:"Fredoka", "Trebuchet MS", sans-serif; font-size:25px; line-height:1.05; font-weight:650; margin-top:6px; }
.cbsm-stat-card.is-featured .cbsm-stat-label { font-size:13px; color:var(--cbsm-pink-500); }
.cbsm-stat-card.is-featured .cbsm-stat-value { font-size:36px; }
.cbsm-stat-sparkle { position:absolute; right:15px; top:12px; font-family:"Fredoka", sans-serif; font-size:23px; color:var(--cbsm-purple-200); transform:rotate(10deg); }

.cbsm-section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 12px; }
.cbsm-section-head h2, .cbsm-section-head h3 { margin:0; font-size:19px; font-weight:650; }
.cbsm-btn { border:0; border-radius:17px; padding:12px 16px; font:800 13px/1.2 "Nunito", sans-serif; cursor:pointer; background:linear-gradient(135deg,var(--cbsm-pink-200),var(--cbsm-purple-200)); color:var(--cbsm-ink); transition:transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.cbsm-btn:hover { filter:brightness(.99); transform:translateY(-1px); box-shadow:0 6px 16px rgba(156,121,200,.10); }
.cbsm-btn-secondary { background:#fff; border:1px solid var(--cbsm-purple-200); }
.cbsm-btn-danger { background:var(--cbsm-red-100); color:var(--cbsm-red-600); }
.cbsm-btn-success { background:var(--cbsm-green-100); color:var(--cbsm-green-600); }
.cbsm-btn-block { width:100%; }
.cbsm-actions { display:flex; gap:10px; flex-wrap:wrap; }
.cbsm-hero { background:linear-gradient(135deg,var(--cbsm-pink-50),var(--cbsm-purple-50)); border:1px solid var(--cbsm-purple-100); border-radius:26px; padding:20px; }
.cbsm-hero h2 { margin:0 0 6px; font-size:25px; font-weight:650; }
.cbsm-hero p { margin:0 0 16px; color:var(--cbsm-muted); }

.cbsm-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.cbsm-product { background:#fff; border:1px solid var(--cbsm-pink-100); border-radius:22px; overflow:hidden; position:relative; min-width:0; }
.cbsm-product.is-live { border-color:var(--cbsm-purple-200); box-shadow:0 8px 24px rgba(156,121,200,.10); }
.cbsm-product-img { aspect-ratio:1/1; width:100%; background:linear-gradient(135deg,var(--cbsm-pink-50),var(--cbsm-purple-50)); display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:34px; color:var(--cbsm-pink-500); }
.cbsm-product-img img { width:100%; height:100%; object-fit:cover; }
.cbsm-product-body { padding:12px; }
.cbsm-product-name { font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cbsm-price { color:var(--cbsm-purple-500); font-weight:900; margin-top:4px; }
.cbsm-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.cbsm-tag { display:inline-flex; border:1px solid var(--cbsm-purple-100); background:var(--cbsm-purple-50); border-radius:999px; padding:5px 9px; font-size:11px; font-weight:800; color:var(--cbsm-muted); }
.cbsm-tag.is-active { background:var(--cbsm-purple-100); color:var(--cbsm-ink); }
.cbsm-live-pill { position:absolute; top:9px; left:9px; background:rgba(255,255,255,.92); border:1px solid var(--cbsm-pink-100); border-radius:999px; padding:6px 9px; font-size:10px; font-weight:900; }
.cbsm-search { display:flex; gap:10px; margin-bottom:12px; }
.cbsm-search input { flex:1; }
/* Keep every app form control visually consistent, even when the HTML omits an explicit type="text" attribute.
   The Oberon/Edge theme applies its own defaults to bare inputs, so these app-scoped rules intentionally win. */
.cbsm-input,
.cbsm-app input:not([type]),
.cbsm-app input[type="text"],
.cbsm-app input[type="number"],
.cbsm-app input[type="tel"],
.cbsm-app input[type="email"],
.cbsm-app input[type="url"],
.cbsm-app input[type="search"],
.cbsm-app input[type="date"],
.cbsm-app input[type="time"],
.cbsm-app input[type="datetime-local"],
.cbsm-app input[type="password"],
.cbsm-app textarea,
.cbsm-app select {
  width:100% !important;
  min-height:46px;
  margin:0 !important;
  border:1px solid var(--cbsm-purple-100) !important;
  background:#fff !important;
  color:var(--cbsm-ink) !important;
  border-radius:16px !important;
  padding:12px 13px !important;
  outline:none !important;
  box-shadow:none;
  font:700 14px/1.3 "Nunito", sans-serif !important;
  appearance:none;
  -webkit-appearance:none;
}
.cbsm-app input:not([type]):focus,
.cbsm-app input[type="text"]:focus,
.cbsm-app input[type="number"]:focus,
.cbsm-app input[type="tel"]:focus,
.cbsm-app input[type="email"]:focus,
.cbsm-app input[type="url"]:focus,
.cbsm-app input[type="search"]:focus,
.cbsm-app input[type="date"]:focus,
.cbsm-app input[type="time"]:focus,
.cbsm-app input[type="datetime-local"]:focus,
.cbsm-app input[type="password"]:focus,
.cbsm-app textarea:focus,
.cbsm-app select:focus {
  border-color:var(--cbsm-purple-200) !important;
  box-shadow:0 0 0 3px rgba(221,206,245,.35) !important;
}
.cbsm-app textarea { min-height:88px; resize:vertical; }
.cbsm-field { margin-bottom:13px; }
.cbsm-field label { display:block; font-weight:900; font-size:12px; margin-bottom:6px; }
.cbsm-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.cbsm-photo-picker { display:flex; align-items:center; gap:12px; padding:12px; border:1px dashed var(--cbsm-purple-200); border-radius:20px; background:var(--cbsm-purple-50); }
.cbsm-photo-preview { width:76px; height:76px; border-radius:20px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; border:1px solid var(--cbsm-pink-100); }
.cbsm-photo-preview img { width:100%;height:100%;object-fit:cover; }
.cbsm-photo-picker input[type=file] { max-width:180px; font-size:12px; }
.cbsm-switch-line { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; }
.cbsm-list { display:grid; gap:10px; }
.cbsm-list-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px; border:1px solid var(--cbsm-pink-100); border-radius:18px; background:#fff; }
.cbsm-list-main { min-width:0; }
.cbsm-list-title { font-weight:900; overflow:hidden; text-overflow:ellipsis; }
.cbsm-list-sub { color:var(--cbsm-muted); font-size:12px; margin-top:3px; }
.cbsm-status { display:inline-flex; align-items:center; border-radius:999px; padding:6px 9px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.cbsm-status-paid { background:var(--cbsm-green-100); color:var(--cbsm-green-600); }
.cbsm-status-partial { background:var(--cbsm-peach-100); color:#aa7030; }
.cbsm-status-unpaid { background:var(--cbsm-red-100); color:var(--cbsm-red-600); }
.cbsm-status-sent { background:var(--cbsm-purple-100); color:var(--cbsm-purple-500); }
.cbsm-status-cancelled { background:#f0eef0; color:#7d747e; }
.cbsm-order-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,.7fr); gap:var(--cbsm-gap); }
.cbsm-sticky { position:sticky; top:0; align-self:start; }
.cbsm-cart-items { display:grid; gap:8px; margin:10px 0 14px; }
.cbsm-cart-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid var(--cbsm-pink-100); }
.cbsm-qty { display:flex; align-items:center; gap:6px; }
.cbsm-qty button { width:32px;height:32px;border:1px solid var(--cbsm-purple-100);background:#fff;border-radius:12px;font-weight:900;cursor:pointer; }
.cbsm-qty input { width:54px !important; text-align:center; padding:7px !important; }
.cbsm-total { display:flex; justify-content:space-between; align-items:center; font-family:"Fredoka", sans-serif; font-size:23px; font-weight:650; padding:14px 0; }
.cbsm-empty { text-align:center; padding:30px 16px; color:var(--cbsm-muted); border:1px dashed var(--cbsm-purple-200); border-radius:20px; background:var(--cbsm-purple-50); }
.cbsm-modal { display:none; position:fixed; inset:0; z-index:2147483640; }
.cbsm-modal.is-open { display:block; }
.cbsm-modal-backdrop { position:absolute; inset:0; background:rgba(62,49,65,.30); backdrop-filter:blur(3px); }
.cbsm-modal-card { position:relative; z-index:2; width:min(92vw,620px); max-height:88dvh; overflow:auto; margin:6dvh auto 0; background:#fff; border:1px solid var(--cbsm-pink-100); border-radius:28px; padding:22px; box-shadow:0 24px 70px rgba(62,49,65,.22); scrollbar-width:thin; scrollbar-color:rgba(207,126,164,.28) transparent; }
.cbsm-modal-close { position:absolute; right:14px; top:14px; }
.cbsm-modal-card h2 { margin:0 48px 16px 0; font-weight:650; }
.cbsm-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none; z-index:2147483646; background:var(--cbsm-ink); color:#fff; padding:11px 15px; border-radius:999px; transition:.2s ease; font-size:13px; }
.cbsm-toast.is-showing { opacity:1; transform:translateX(-50%) translateY(0); }
.cbsm-order-detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.cbsm-mini-stat { background:var(--cbsm-purple-50); border:1px solid var(--cbsm-purple-100); border-radius:17px; padding:11px; }
.cbsm-mini-stat small { color:var(--cbsm-muted); display:block; }
.cbsm-mini-stat strong { display:block; margin-top:3px; }
.cbsm-login-note { padding:18px; border:1px solid #eee; border-radius:18px; background:#fff; }

@media (max-width: 780px) {
  .cbsm-app { padding:8px; }
  .cbsm-shell { border-radius:24px; }
  .cbsm-topbar { padding:15px 16px 13px; }
  .cbsm-main { padding:12px; }
  .cbsm-main-nav { overflow-x:auto; grid-template-columns:repeat(5,minmax(84px,1fr)); padding:8px 10px; scrollbar-width:none; }
  .cbsm-main-nav::-webkit-scrollbar { display:none; }
  .cbsm-main-nav button { font-size:12px; padding:10px 7px; }
  .cbsm-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cbsm-stats .cbsm-stat-card.is-featured { grid-column:1 / -1; min-height:106px; }
  .cbsm-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cbsm-order-layout { grid-template-columns:1fr; }
  .cbsm-sticky { position:static; }
  .cbsm-form-grid { grid-template-columns:1fr; }
  .cbsm-order-detail-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 430px) {
  :root { --cbsm-gap: 12px; }
  .cbsm-app { padding:5px; }
  .cbsm-shell { border-radius:22px; }
  .cbsm-main { padding:10px; }
  .cbsm-card, .cbsm-hero { border-radius:20px; padding:14px; }
  .cbsm-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .cbsm-product-body { padding:9px; }
  .cbsm-product-name { font-size:13px; }
  .cbsm-price { font-size:13px; }
  .cbsm-actions .cbsm-btn { flex:1; }
  .cbsm-stat-card.is-featured .cbsm-stat-value { font-size:32px; }
}

/* -------------------------------------------------------
   Cute full-screen login
   ------------------------------------------------------- */
.cbsm-login-app {
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  padding:clamp(16px,4vw,36px);
}
.cbsm-login-wrap {
  width:100%;
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cbsm-login-card {
  position:relative;
  width:min(100%, 430px);
  overflow:hidden;
  padding:clamp(28px,6vw,44px);
  text-align:center;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(243,207,224,.92);
  border-radius:34px;
  box-shadow:0 24px 70px rgba(126,92,126,.14);
  backdrop-filter:blur(12px);
}
.cbsm-login-card::before {
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  left:-85px;
  top:-95px;
  border-radius:50%;
  background:rgba(243,207,224,.38);
  filter:blur(2px);
  pointer-events:none;
}
.cbsm-login-card::after {
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  right:-115px;
  bottom:-105px;
  border-radius:50%;
  background:rgba(223,209,245,.43);
  pointer-events:none;
}
.cbsm-login-decoration {
  position:absolute;
  z-index:1;
  color:var(--cbsm-purple-200);
  font-family:"Fredoka", sans-serif;
  pointer-events:none;
}
.cbsm-login-decoration-one { top:28px; right:34px; font-size:22px; transform:rotate(12deg); }
.cbsm-login-decoration-two { left:34px; bottom:34px; font-size:18px; color:var(--cbsm-pink-200); }
.cbsm-login-mark {
  position:relative;
  z-index:2;
  width:68px;
  height:68px;
  margin:0 auto 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:24px;
  background:linear-gradient(145deg,var(--cbsm-pink-100),var(--cbsm-purple-100));
  border:1px solid rgba(243,207,224,.9);
  box-shadow:0 10px 26px rgba(156,121,200,.12);
  font:650 31px/1 "Fredoka", sans-serif;
  color:var(--cbsm-pink-500);
}
.cbsm-login-eyebrow {
  position:relative;
  z-index:2;
  margin-bottom:7px;
  color:var(--cbsm-purple-500);
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.cbsm-login-card h1 {
  position:relative;
  z-index:2;
  margin:0;
  font:650 clamp(29px,7vw,38px)/1.05 "Fredoka", "Trebuchet MS", sans-serif;
  letter-spacing:-.035em;
  color:var(--cbsm-ink);
}
.cbsm-login-intro {
  position:relative;
  z-index:2;
  max-width:310px;
  margin:10px auto 24px;
  color:var(--cbsm-muted);
  font-size:14px;
  font-weight:700;
}
.cbsm-login-error {
  position:relative;
  z-index:2;
  margin:0 0 16px;
  padding:11px 13px;
  border:1px solid #f5cbd5;
  border-radius:15px;
  background:var(--cbsm-red-100);
  color:var(--cbsm-red-600);
  font-size:13px;
  font-weight:800;
}
.cbsm-login-form { position:relative; z-index:2; text-align:left; }
.cbsm-login-field { margin-bottom:14px; }
.cbsm-login-field label {
  display:block;
  margin:0 0 6px 3px;
  color:var(--cbsm-ink);
  font-size:12px;
  font-weight:900;
}
.cbsm-login-app .cbsm-login-field input[type=text],
.cbsm-login-app .cbsm-login-field input[type=password] {
  width:100%;
  height:50px;
  margin:0;
  padding:0 16px;
  border:1px solid var(--cbsm-purple-100);
  border-radius:17px;
  outline:none;
  background:#fff;
  color:var(--cbsm-ink);
  box-shadow:none;
  font:700 14px/1 "Nunito", sans-serif;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.cbsm-login-app .cbsm-login-field input::placeholder { color:#b7a9b9; opacity:1; }
.cbsm-login-app .cbsm-login-field input:focus {
  border-color:var(--cbsm-purple-200);
  background:var(--cbsm-purple-50);
  box-shadow:0 0 0 4px rgba(223,209,245,.28);
}
.cbsm-login-options {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:2px 2px 18px;
  font-size:12px;
  font-weight:800;
}
.cbsm-login-remember { display:flex; align-items:center; gap:7px; color:var(--cbsm-muted); cursor:pointer; }
.cbsm-login-remember input {
  appearance:none;
  width:18px;
  height:18px;
  margin:0;
  border:1px solid var(--cbsm-purple-200);
  border-radius:6px;
  background:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.cbsm-login-remember input:checked { background:linear-gradient(135deg,var(--cbsm-pink-200),var(--cbsm-purple-200)); }
.cbsm-login-remember input:checked::after { content:"✓"; color:#fff; font-size:12px; line-height:1; font-weight:900; }
.cbsm-login-options a { color:var(--cbsm-purple-500); text-decoration:none; }
.cbsm-login-options a:hover { text-decoration:underline; }
.cbsm-login-button {
  width:100%;
  min-height:52px;
  border:0;
  border-radius:18px;
  cursor:pointer;
  background:linear-gradient(135deg,#f2c6db,#d9c8f2);
  color:var(--cbsm-ink);
  box-shadow:0 10px 24px rgba(156,121,200,.14);
  font:900 14px/1.2 "Nunito", sans-serif;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.cbsm-login-button:hover { transform:translateY(-1px); box-shadow:0 13px 28px rgba(156,121,200,.18); filter:brightness(.995); }
.cbsm-login-button:active { transform:translateY(0); }
.cbsm-login-foot {
  position:relative;
  z-index:2;
  margin-top:20px;
  color:#aa9cad;
  font-size:11px;
  font-weight:700;
}

@media (max-width:430px) {
  .cbsm-login-app { padding:10px; }
  .cbsm-login-card { padding:30px 22px; border-radius:28px; }
  .cbsm-login-options { align-items:flex-start; }
}

/* -------------------------------------------------------
   V1.0.3 — soft app-like motion
   ------------------------------------------------------- */
@keyframes cbsmViewIn {
  from { opacity:0; transform:translateY(8px) scale(.995); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes cbsmModalBackdropIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes cbsmModalCardIn {
  0%   { opacity:0; transform:translateY(18px) scale(.97); }
  70%  { opacity:1; transform:translateY(-2px) scale(1.004); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes cbsmLoginIn {
  from { opacity:0; transform:translateY(14px) scale(.985); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes cbsmTinyPop {
  0% { transform:scale(1); }
  45% { transform:scale(.94); }
  100% { transform:scale(1); }
}
@keyframes cbsmHeartFloat {
  0%,100% { transform:translateY(0) rotate(10deg); }
  50% { transform:translateY(-4px) rotate(14deg); }
}

/* Any newly-rendered view gently arrives instead of snapping into place. */
.cbsm-main > * {
  animation:cbsmViewIn .24s cubic-bezier(.22,.8,.36,1) both;
}
.cbsm-main > *:nth-child(2) { animation-delay:.025s; }
.cbsm-main > *:nth-child(3) { animation-delay:.05s; }

.cbsm-btn,
.cbsm-icon-btn,
.cbsm-modal-close,
.cbsm-main-nav button,
.cbsm-qty button,
.cbsm-tag,
.cbsm-product {
  -webkit-tap-highlight-color:transparent;
}
.cbsm-btn,
.cbsm-icon-btn,
.cbsm-modal-close,
.cbsm-main-nav button,
.cbsm-qty button,
.cbsm-tag {
  transition:transform .15s cubic-bezier(.22,.8,.36,1),
             box-shadow .15s ease,
             background .2s ease,
             color .2s ease,
             border-color .2s ease,
             filter .15s ease;
}
.cbsm-btn:active,
.cbsm-icon-btn:active,
.cbsm-modal-close:active,
.cbsm-main-nav button:active,
.cbsm-qty button:active,
.cbsm-tag:active {
  transform:scale(.95);
}
.cbsm-main-nav button.is-active {
  transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px rgba(223,209,245,.55), 0 5px 14px rgba(156,121,200,.07);
}
.cbsm-product {
  transition:transform .18s cubic-bezier(.22,.8,.36,1), box-shadow .18s ease, border-color .18s ease;
}
.cbsm-product:active { transform:scale(.985); }
.cbsm-tap-pop { animation:cbsmTinyPop .22s cubic-bezier(.22,.8,.36,1); }

.cbsm-modal.is-open .cbsm-modal-backdrop {
  animation:cbsmModalBackdropIn .18s ease both;
}
.cbsm-modal.is-open .cbsm-modal-card {
  animation:cbsmModalCardIn .28s cubic-bezier(.22,.8,.36,1) both;
}
.cbsm-login-card {
  animation:cbsmLoginIn .38s cubic-bezier(.22,.8,.36,1) both;
}
.cbsm-login-decoration-one,
.cbsm-stat-sparkle {
  animation:cbsmHeartFloat 3.2s ease-in-out infinite;
}
.cbsm-login-button:active { transform:scale(.975); }

/* Respect accessibility settings and users who prefer a still interface. */
@media (prefers-reduced-motion: reduce) {
  .cbsm-app *, .cbsm-app *::before, .cbsm-app *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* v1.1 feature polish */
.cbsm-stock{font-size:12px;font-weight:800;color:#756b7e;margin-top:4px}.cbsm-stock.is-low{color:#c85b88}.cbsm-mini-stat.is-balance{background:linear-gradient(135deg,#fff0f7,#f5efff);border-color:#efd9f0}.cbsm-linklike{background:none;border:0;text-align:left;padding:0;cursor:pointer;color:inherit}.cbsm-invoice{background:linear-gradient(180deg,#fff,#fff9fc);border:1px solid #f1deec;border-radius:22px;padding:18px}.cbsm-invoice-brand{font-family:'Fredoka',sans-serif;font-weight:700;color:#b45b91;margin-bottom:5px}.cbsm-gcash-box{margin-top:16px;padding:14px;border-radius:18px;background:#faf4ff;text-align:center;border:1px solid #eadcf5}.cbsm-qr{display:block;width:130px;height:130px;object-fit:contain;margin:10px auto;border-radius:16px;background:#fff}.cbsm-view-enter{animation:cbsmViewIn .26s ease both}@keyframes cbsmViewIn{from{opacity:.3;transform:translateY(7px)}to{opacity:1;transform:none}}.cbsm-hero .cbsm-eyebrow{letter-spacing:.08em;font-size:11px}.cbsm-big-total{font-family:'Fredoka',sans-serif;color:#a44f8b;font-size:22px}

/* v1.1.2 reset area */
.cbsm-reset-zone{margin-top:18px;padding:16px;border:1px dashed #f0bfd5;border-radius:20px;background:#fff8fb;display:grid;gap:12px}.cbsm-reset-zone .cbsm-btn-danger{margin:0}
.cbsm-store-pill{position:absolute;top:10px;left:10px;background:#fff1f8;color:#9b6486;border:1px solid #efc8de;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:900}.cbsm-product.is-live .cbsm-store-pill{top:40px}.cbsm-web-review{margin-top:14px;padding:14px;border:1px solid #e4d0f1;background:#faf5ff;border-radius:18px}.cbsm-status-pending_review{background:#f4eaff!important;color:#75588c!important}


/* Shared record-row typography — used by Orders, Customers, and future record lists. */
.cbsm-record-row .cbsm-list-title {
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #5f4b68;
  letter-spacing: 0;
}
.cbsm-record-row .cbsm-list-sub {
  font-family: "Nunito", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #8d7d94;
  line-height: 1.45;
}
.cbsm-order-row .cbsm-status {
  font-family: "Nunito", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: none;
  padding: 7px 11px;
}

/* v1.2.2 — all backend app buttons show pointer cursor */
.cbsm-app button,
.cbsm-app [role="button"]{cursor:pointer}


/* =========================================================
   v1.3.0 — Multi-photo products + item variations
   ========================================================= */
.cbsm-photo-section,
.cbsm-variation-section{
  margin:0 0 16px;
  padding:14px;
  border:1px solid var(--cbsm-purple-200);
  border-radius:20px;
  background:linear-gradient(145deg,var(--cbsm-purple-50),#fff8fc);
}
.cbsm-section-mini{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.cbsm-section-mini strong{font-family:"Fredoka",sans-serif;color:#65506f;font-size:16px}
.cbsm-section-mini span{font-size:12px;color:#8c7d92;line-height:1.4}
.cbsm-product-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
.cbsm-product-photo{position:relative;aspect-ratio:1/1;border-radius:15px;overflow:hidden;background:#fff;border:1px solid var(--cbsm-pink-100)}
.cbsm-product-photo img{width:100%;height:100%;object-fit:cover;display:block}
.cbsm-product-photo>button{position:absolute;top:5px;right:5px;width:25px;height:25px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#a15e84;font-weight:900;box-shadow:0 3px 10px rgba(87,59,94,.12);cursor:pointer}
.cbsm-product-photo>span{position:absolute;left:6px;bottom:6px;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.94);font-size:9px;font-weight:900;color:#936c87}
.cbsm-photo-empty{grid-column:1/-1;padding:18px;text-align:center;border:1px dashed var(--cbsm-purple-200);border-radius:15px;color:#9b8aa3;background:rgba(255,255,255,.6)}
.cbsm-photo-actions{display:flex;gap:8px;flex-wrap:wrap}
.cbsm-photo-count{position:absolute;right:8px;bottom:8px;background:rgba(255,255,255,.92);border:1px solid rgba(235,205,225,.9);border-radius:999px;padding:4px 7px;font-size:10px;font-weight:900;color:#906b88}
.cbsm-variation-row{position:relative;display:grid;grid-template-columns:1.35fr 1fr .8fr auto;gap:8px;align-items:end;padding:10px;margin-bottom:8px;background:#fff;border:1px solid #eadff0;border-radius:16px}
.cbsm-variation-row .cbsm-field{margin:0}
.cbsm-variation-remove{width:34px;height:40px;border:0;border-radius:12px;background:#fff0f5;color:#a44f72;font-size:20px;font-weight:900;cursor:pointer}
.cbsm-variation-picker{display:grid;gap:8px}
.cbsm-variation-choice{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 14px;border:1px solid #e2d4ed;border-radius:15px;background:#fff;color:#65536e;text-align:left;cursor:pointer}
.cbsm-variation-choice strong{font-family:"Fredoka",sans-serif;font-size:16px}
.cbsm-variation-choice span{font-size:12px;color:#927f99}
@media(max-width:700px){
  .cbsm-product-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cbsm-variation-row{grid-template-columns:1fr 1fr}
  .cbsm-variation-row .cbsm-field:first-of-type{grid-column:1/-1}
  .cbsm-variation-remove{position:absolute;top:8px;right:8px}
  .cbsm-photo-actions .cbsm-btn{flex:1;justify-content:center}
}


/* =========================================================
   v1.3.2 — Variation row alignment polish
   ========================================================= */
/* Desktop: keep remove button centered with the input controls. */
.cbsm-variation-remove{
  align-self:end;
  margin-bottom:2px;
}

/* Give Add Variation a little breathing room below the last row. */
.cbsm-variation-section [data-add-variation-row]{
  margin-top:10px;
}

@media(max-width:700px){
  /* Mobile: let the fields own the full row; keep remove safely below them. */
  .cbsm-variation-row{
    grid-template-columns:1fr;
    padding:12px;
  }
  .cbsm-variation-row .cbsm-field:first-of-type{grid-column:auto}
  .cbsm-variation-remove{
    position:static;
    justify-self:end;
    align-self:auto;
    margin:2px 0 0;
    width:38px;
    height:38px;
  }
  .cbsm-variation-section [data-add-variation-row]{
    margin-top:12px;
  }
}


/* =========================================================
   v1.4.0 — optional color swatches
   ========================================================= */
.cbsm-variation-row{grid-template-columns:1.3fr .9fr 1fr .72fr auto}
.cbsm-swatch-input{display:grid;grid-template-columns:42px 1fr;gap:7px;align-items:center}
.cbsm-swatch-input input[type="color"]{width:42px!important;height:40px!important;padding:3px!important;border-radius:12px!important;cursor:pointer}
.cbsm-swatch-input input[type="text"]{min-width:0}
@media(max-width:900px){.cbsm-variation-row{grid-template-columns:1fr 1fr}.cbsm-variation-row .cbsm-field:first-of-type{grid-column:1/-1}}
@media(max-width:700px){.cbsm-variation-row{grid-template-columns:1fr}.cbsm-variation-row .cbsm-field:first-of-type{grid-column:auto}}


/* =========================================================
   v1.4.1 — roomier variations + compact catalog actions
   ========================================================= */
/* Give each variation real breathing room on desktop: two fields per row,
   with the remove control aligned to the second row's inputs. */
@media(min-width:701px){
  .cbsm-variation-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 46px;
    gap:10px 12px;
    align-items:end;
    padding:12px;
  }
  .cbsm-variation-row .cbsm-field:nth-of-type(1){grid-column:1;grid-row:1}
  .cbsm-variation-row .cbsm-field:nth-of-type(2){grid-column:2;grid-row:1}
  .cbsm-variation-row .cbsm-field:nth-of-type(3){grid-column:1;grid-row:2}
  .cbsm-variation-row .cbsm-field:nth-of-type(4){grid-column:2;grid-row:2}
  .cbsm-variation-remove{
    grid-column:3;
    grid-row:2;
    width:46px;
    height:46px;
    margin:0;
    align-self:end;
    justify-self:end;
  }
}

.cbsm-product-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}
.cbsm-product-actions .cbsm-btn{
  width:100%;
  min-width:0;
  padding:11px 8px;
  white-space:nowrap;
}
@media(max-width:700px){
  .cbsm-product-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cbsm-product-actions .cbsm-product-edit{grid-column:1/-1}
}


/* =========================================================
   v1.4.2 — variation/photo polish
   ========================================================= */
/* Empty swatch starts as a true “none” symbol instead of pink. */
.cbsm-color-picker-shell{position:relative;display:block;width:42px;height:40px;border-radius:12px;overflow:hidden}
.cbsm-color-picker-shell input[type="color"]{position:absolute;inset:0;width:100%!important;height:100%!important;margin:0!important;padding:3px!important;cursor:pointer}
.cbsm-color-picker-shell>i{display:none;position:absolute;inset:3px;border-radius:9px;background:#fff;pointer-events:none}
.cbsm-color-picker-shell.is-empty>i{display:block}
.cbsm-color-picker-shell.is-empty>i::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;background:#d94b61;transform:rotate(-42deg);transform-origin:center;border-radius:999px}

/* Photo count belongs with the photo, not near the action controls. */
.cbsm-photo-count{top:8px;right:8px;bottom:auto}

/* Desktop remove button: nudge it into the same visual baseline as the fields. */
@media(min-width:701px){.cbsm-variation-remove{margin-bottom:4px!important;transform:translateY(-1px)}}


/* =========================================================
   v1.4.3 — add-product spacing + cleaner photo/color controls
   ========================================================= */
.cbsm-topbar-actions{display:flex;align-items:center;gap:8px}
.cbsm-topbar-actions .cbsm-icon-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;line-height:1}
.cbsm-store-visit{font-size:18px}

/* Keep the Add/Edit Product form rhythm consistent. */
#cbsm-product-form>.cbsm-field{margin:0 0 14px}
#cbsm-product-form>.cbsm-form-grid{gap:14px;margin:0 0 14px}
#cbsm-product-form>.cbsm-form-grid>.cbsm-field{margin:0}
#cbsm-product-form>.cbsm-photo-section,
#cbsm-product-form>.cbsm-variation-section{margin-bottom:14px}
#cbsm-product-form>.cbsm-switch-line{margin:0;padding:12px 0;border-top:1px solid rgba(235,223,240,.62)}
#cbsm-product-form>.cbsm-switch-line:first-of-type{border-top:0}
#cbsm-product-form>button.cbsm-btn-block{margin-top:14px}

/* Color picker is a simple circular swatch — no chunky box around it. */
.cbsm-color-picker-shell{width:38px;height:38px;border-radius:50%;overflow:hidden;background:transparent}
.cbsm-color-picker-shell input[type="color"]{-webkit-appearance:none;appearance:none;border:0!important;border-radius:50%!important;padding:0!important;background:transparent!important;overflow:hidden}
.cbsm-color-picker-shell input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.cbsm-color-picker-shell input[type="color"]::-webkit-color-swatch{border:1px solid #dfd2e6;border-radius:50%}
.cbsm-color-picker-shell input[type="color"]::-moz-color-swatch{border:1px solid #dfd2e6;border-radius:50%}
.cbsm-color-picker-shell>i{inset:0;border-radius:50%;border:1px solid #dfd2e6}

@media(max-width:700px){
  .cbsm-photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cbsm-photo-actions .cbsm-btn{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;min-width:0}
  #cbsm-product-form>.cbsm-form-grid{gap:12px;margin-bottom:14px}
}
.cbsm-store-visit{border-radius:50%}


/* =========================================================
   v1.4.9 — Header refresh button matches round Visit Store button
   ========================================================= */
.cbsm-header [data-refresh],
.cbsm-header .cbsm-refresh,
.cbsm-header [data-action="refresh"],
.cbsm-topbar [data-refresh],
.cbsm-topbar .cbsm-refresh,
.cbsm-topbar [data-action="refresh"]{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}


/* =========================================================
   v1.4.11 — Backend typography + New Order quantity polish
   ========================================================= */

/* Prevent browser/theme button fonts from leaking into backend cards/rows. */
.cbsm-app button,
.cbsm-app [role="button"]{
  font-family:"Nunito","Avenir Next","Segoe UI",sans-serif;
}

/* New Order product cards match the storefront font hierarchy. */
.cbsm-order-products .cbsm-product{
  font-family:"Nunito","Avenir Next","Segoe UI",sans-serif;
  color:var(--cbsm-ink);
  text-align:left;
}
.cbsm-order-products .cbsm-product-name{
  font-family:"Fredoka","Trebuchet MS",sans-serif;
  font-size:16px;
  font-weight:650;
  letter-spacing:-.01em;
}
.cbsm-order-products .cbsm-price{
  font-family:"Nunito","Avenir Next","Segoe UI",sans-serif;
  font-size:14px;
  font-weight:900;
}


/* Current Order quantity controls mirror the public storefront: −  value  + */
.cbsm-backend-cart-controls{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:8px;
}
.cbsm-backend-cart-controls .cbsm-cart-qty-btn{
  width:38px;
  height:38px;
  min-width:38px;
  padding:0;
  border:1px solid var(--cbsm-purple-200);
  border-radius:12px;
  background:var(--cbsm-purple-50);
  color:#705d83;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:"Nunito",sans-serif;
  font-size:18px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  transition:transform .15s cubic-bezier(.22,.8,.36,1),box-shadow .15s ease,background .15s ease;
}
.cbsm-backend-cart-controls .cbsm-cart-qty-btn:hover{
  transform:scale(1.045);
  box-shadow:0 5px 13px rgba(156,121,200,.10);
}
.cbsm-backend-cart-controls .cbsm-cart-qty-btn:active{
  transform:scale(.94);
}
.cbsm-backend-cart-controls .cbsm-cart-qty-value{
  min-width:24px;
  text-align:center;
  font-family:"Nunito",sans-serif;
  font-size:14px;
  font-weight:900;
  color:var(--cbsm-ink);
}
.cbsm-backend-cart-controls .cbsm-price-input{
  width:92px !important;
  min-height:38px !important;
  padding:8px 10px !important;
  margin-left:5px !important;
  font-family:"Nunito",sans-serif !important;
  font-weight:800 !important;
}

@media(max-width:620px){
  .cbsm-backend-cart-controls{
    gap:6px;
  }
  .cbsm-backend-cart-controls .cbsm-price-input{
    width:86px !important;
  }
}



/* v1.4.15 — main menu hover polish */
@media (hover:hover) and (pointer:fine){
  .cbsm-main-nav button:hover{
    transform:translateY(-2px) scale(1.025);
    background:linear-gradient(135deg,rgba(255,234,243,.72),rgba(241,235,255,.78));
    color:var(--cbsm-ink);
    box-shadow:0 7px 16px rgba(156,121,200,.10);
  }
  .cbsm-main-nav button.is-active:hover{
    transform:translateY(-2px) scale(1.025);
    box-shadow:inset 0 0 0 1px rgba(223,209,245,.55),0 8px 18px rgba(156,121,200,.11);
  }
}


/* v1.4.16 — order customer correction polish */
.cbsm-order-customer-pencil {
  appearance:none;
  border:0 !important;
  background:transparent !important;
  padding:2px 4px !important;
  margin-left:3px;
  color:#b9a8c0 !important;
  font:700 13px/1 "Nunito",sans-serif !important;
  cursor:pointer;
  vertical-align:middle;
  box-shadow:none !important;
  transform:none !important;
  transition:color .18s ease,transform .18s ease !important;
}
.cbsm-order-customer-pencil:hover {
  color:#8f719c !important;
  transform:scale(1.08) !important;
}

.cbsm-correction-modal {
  font-family:"Nunito",sans-serif;
}
.cbsm-correction-modal > .cbsm-eyebrow {
  margin:1px 48px 4px 0;
}
.cbsm-correction-modal > h2 {
  margin:0 48px 16px 0;
}
.cbsm-correction-note {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 18px;
  padding:12px 13px;
  border:1px solid var(--cbsm-purple-100);
  border-radius:18px;
  background:linear-gradient(135deg,var(--cbsm-pink-50),var(--cbsm-purple-50));
}
.cbsm-correction-note-icon {
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--cbsm-pink-100);
  color:var(--cbsm-pink-500);
  font-family:"Fredoka",sans-serif;
  font-size:15px;
  font-weight:700;
}
.cbsm-correction-note strong {
  display:block;
  margin:1px 0 2px;
  font-family:"Fredoka",sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--cbsm-ink);
}
#cbsm-order-customer-correction-form {
  display:grid;
  gap:13px;
}
#cbsm-order-customer-correction-form .cbsm-field {
  margin:0;
}
#cbsm-order-customer-correction-form .cbsm-btn {
  margin-top:3px;
}


/* v1.4.18 — payment + fulfillment are separate permanent order statuses */
.cbsm-order-statuses{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex:0 0 auto;
  flex-wrap:wrap;
}
.cbsm-order-statuses .cbsm-status{
  justify-content:center;
  text-align:center;
  min-width:72px;
  white-space:nowrap;
}
.cbsm-order-statuses.is-pending .cbsm-status{
  min-width:112px;
}
.cbsm-fulfillment-new{
  background:#f3eff6;
  color:#786a80;
}
.cbsm-fulfillment-packing{
  background:#fff3df;
  color:#9a6b2f;
}
.cbsm-fulfillment-shipped{
  background:#eaf2ff;
  color:#5572a6;
}
.cbsm-fulfillment-complete{
  background:#e9f7ef;
  color:#4e8768;
}
.cbsm-invoice > .cbsm-order-statuses{
  justify-content:center;
  margin:12px 0 2px;
}

@media (max-width:700px){
  .cbsm-order-row{
    flex-direction:column;
    align-items:stretch;
  }
  .cbsm-order-row .cbsm-list-main{
    width:100%;
  }
  .cbsm-order-row .cbsm-order-statuses{
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .cbsm-order-row .cbsm-status{
    justify-content:center;
    text-align:center;
  }
}


/* v1.4.19 — mobile order status visibility/alignment */
@media (max-width:700px){
  .cbsm-order-row .cbsm-order-statuses:not(.is-pending){
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    flex-direction:row !important;
    flex-wrap:wrap;
    align-items:center !important;
    justify-content:center !important;
    gap:7px;
  }

  .cbsm-order-row .cbsm-order-statuses:not(.is-pending) .cbsm-status,
  .cbsm-order-row .cbsm-order-statuses:not(.is-pending) .cbsm-fulfillment{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .cbsm-order-row .cbsm-order-statuses.is-pending{
    display:flex !important;
    width:100%;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .cbsm-order-row .cbsm-order-statuses.is-pending .cbsm-status{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    margin-left:auto;
    margin-right:auto;
    line-height:1.2;
  }
}


/* v1.4.26 — popup shell IS the bubble; only its inner content scrolls.
   The circular close button is therefore permanently anchored to the bubble corner. */
.cbsm-modal-shell {
  position: relative;
  z-index: 2;
  width: min(92vw, 620px);
  max-height: 88dvh;
  margin: 6dvh auto 0;
  background: #fff;
  border: 1px solid var(--cbsm-pink-100);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(62,49,65,.22);
  overflow: visible;
}
.cbsm-modal-shell .cbsm-modal-card {
  position: relative;
  width: 100%;
  max-height: 88dvh;
  margin: 0;
  padding: 22px;
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent;
  border: 0;
  border-radius: 28px;
  box-shadow: none;
}
.cbsm-modal-shell > .cbsm-modal-close {
  position: absolute !important;
  top: -15px !important;
  right: -15px !important;
  z-index: 50;
  float: none !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  background: #fff;
  border: 1px solid var(--cbsm-purple-200);
  box-shadow: 0 7px 20px rgba(92,67,104,.18);
}
@media (max-width:680px) {
  .cbsm-modal-shell { width: calc(100vw - 34px); margin-top: 5dvh; }
  .cbsm-modal-shell > .cbsm-modal-close { top: -13px !important; right: -9px !important; }
}