/* Standalone shortcode page: keep only the stock manager UI visible. */
html.wcmsm-standalone-html {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100%;
}

body.wcmsm-standalone-page {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

body.wcmsm-standalone-page > .wcmsm-standalone-root {
  display: block !important;
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.wcmsm-standalone-page > *:not(.wcmsm-standalone-root):not(script):not(style):not(link) {
  display: none !important;
}

body.wcmsm-standalone-page #wpadminbar,
body.wcmsm-standalone-page header,
body.wcmsm-standalone-page footer,
body.wcmsm-standalone-page aside,
body.wcmsm-standalone-page nav,
body.wcmsm-standalone-page .site-header,
body.wcmsm-standalone-page .site-footer,
body.wcmsm-standalone-page .page-header,
body.wcmsm-standalone-page .entry-header,
body.wcmsm-standalone-page .sidebar,
body.wcmsm-standalone-page .widget-area {
  display: none !important;
}

body.wcmsm-standalone-page .wcmsm-app header {
  display: flex !important;
}

/* Never replace the website font. The active theme/Elementor/body typography
 * remains the source of truth for every visible element in this application. */
body.wcmsm-standalone-page,
body.wcmsm-standalone-page .wcmsm-standalone-root,
body.wcmsm-standalone-page .wcmsm-app,
body.wcmsm-standalone-page .wcmsm-app * {
  font-family: inherit !important;
}

:root {
  --wcmsm-bg: #071321;
  --wcmsm-card: rgba(255, 255, 255, 0.97);
  --wcmsm-ink: #102033;
  --wcmsm-muted: #6b7a8c;
  --wcmsm-line: #e8edf3;
  --wcmsm-primary: #0b3a75;
  --wcmsm-primary-dark: #061f46;
  --wcmsm-button: #082f63;
  --wcmsm-button-hover: #041b3c;
  --wcmsm-green: #16a36a;
  --wcmsm-red: #e54545;
  --wcmsm-orange: #f59e0b;
  --wcmsm-radius: 24px;
}

.wcmsm-app,
.wcmsm-app *,
.wcmsm-app *::before,
.wcmsm-app *::after {
  box-sizing: border-box;
  font-family: inherit !important;
}

.wcmsm-app button,
.wcmsm-app input,
.wcmsm-app select,
.wcmsm-app textarea,
.wcmsm-app option {
  font-family: inherit !important;
}



/* Unified button system: every button has its own semantic class, while all
 * buttons use the requested dark-blue background and white text. */
.wcmsm-app .wcmsm-btn,
.wcmsm-app button {
  appearance: none;
  -webkit-appearance: none;
  background: var(--wcmsm-button) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: var(--wcmsm-button) !important;
  text-shadow: none !important;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, opacity .18s ease;
}

.wcmsm-app .wcmsm-btn:hover,
.wcmsm-app .wcmsm-btn:focus-visible,
.wcmsm-app button:hover,
.wcmsm-app button:focus-visible {
  background: var(--wcmsm-button-hover) !important;
  color: #ffffff !important;
  border-color: var(--wcmsm-button-hover) !important;
}

.wcmsm-app .wcmsm-btn:active,
.wcmsm-app button:active {
  transform: scale(.97);
}

.wcmsm-app .wcmsm-btn:disabled,
.wcmsm-app button:disabled {
  background: var(--wcmsm-button) !important;
  color: #ffffff !important;
  opacity: .42;
  cursor: not-allowed;
}

/* Dedicated classes retained for direct customization of each control. */
.wcmsm-btn-login {}
.wcmsm-btn-password-toggle {}
.wcmsm-btn-logout {}
.wcmsm-btn-clear-search {}
.wcmsm-btn-refresh {}
.wcmsm-btn-load-more {}
.wcmsm-btn-stock-minus {}
.wcmsm-btn-stock-plus {}

.wcmsm-app {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  font-family: inherit !important;
  color: var(--wcmsm-ink);
}

.wcmsm-mobile-shell {
  display: none;
}

.wcmsm-desktop-notice {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px;
  text-align: center;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
}

.wcmsm-desktop-icon {
  font-size: 54px;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  body:has(.wcmsm-app) {
    margin: 0;
    background: var(--wcmsm-bg);
  }

  .wcmsm-desktop-notice {
    display: none;
  }

  .wcmsm-mobile-shell {
    display: block;
    min-height: 100vh;
    background:
      radial-gradient(circle at 15% 10%, rgba(23, 105, 255, 0.32), transparent 28%),
      radial-gradient(circle at 90% 25%, rgba(21, 163, 106, 0.18), transparent 24%),
      linear-gradient(160deg, #06111e 0%, #0a1d33 48%, #071321 100%);
    padding: max(18px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom));
  }

  .wcmsm-auth-card,
  .wcmsm-denied-card {
    width: 100%;
    min-height: calc(100vh - 42px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px 22px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
  }

  .wcmsm-auth-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 8px;
    background: linear-gradient(90deg, #1769ff, #5b8dff, #15a36a);
  }

  .wcmsm-brand-mark {
    display: flex;
    gap: 7px;
    align-items: flex-end;
    width: 58px;
    height: 58px;
    padding: 13px;
    border-radius: 18px;
    background: linear-gradient(145deg, #1769ff, #0d4ed2);
    box-shadow: 0 14px 30px rgba(23, 105, 255, 0.28);
    margin-bottom: 24px;
  }

  .wcmsm-brand-mark span {
    display: block;
    width: 8px;
    border-radius: 999px;
    background: #fff;
  }

  .wcmsm-brand-mark span:nth-child(1) { height: 16px; opacity: .75; }
  .wcmsm-brand-mark span:nth-child(2) { height: 28px; }
  .wcmsm-brand-mark span:nth-child(3) { height: 21px; opacity: .85; }

  .wcmsm-auth-head {
    margin-bottom: 28px;
  }

  .wcmsm-eyebrow {
    margin: 0 0 8px;
    color: var(--wcmsm-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
  }

  .wcmsm-auth-head h2,
  .wcmsm-denied-card h2 {
    margin: 0 0 9px;
    font-size: 27px;
    line-height: 1.35;
  }

  .wcmsm-auth-head p:not(.wcmsm-eyebrow),
  .wcmsm-denied-card p {
    margin: 0;
    color: var(--wcmsm-muted);
    font-size: 14px;
    line-height: 1.8;
  }

  .wcmsm-login-form {
    display: grid;
    gap: 17px;
  }

  .wcmsm-login-form > label:not(.wcmsm-remember) {
    display: grid;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
  }

  .wcmsm-input-wrap {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 14px;
    border: 1px solid #dfe7f0;
    border-radius: 18px;
    background: #f8fafc;
    transition: .2s ease;
  }

  .wcmsm-input-wrap:focus-within {
    border-color: var(--wcmsm-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(23, 105, 255, 0.11);
  }

  .wcmsm-input-icon {
    margin-left: 10px;
    font-size: 17px;
  }

  .wcmsm-input-wrap input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--wcmsm-ink);
    font: inherit;
    font-size: 15px;
  }

  .wcmsm-password-toggle {
    border: 0;
    padding: 8px;
    font-size: 16px;
  }

  .wcmsm-remember {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #59697b;
    font-size: 13px;
  }

  .wcmsm-remember input {
    width: 18px;
    height: 18px;
    accent-color: var(--wcmsm-primary);
  }

  .wcmsm-primary-button {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: 19px;
    padding: 0 19px;
    background: var(--wcmsm-button);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 15px 28px rgba(23, 105, 255, 0.28);
  }

  .wcmsm-primary-button:disabled,
  .wcmsm-logout:disabled,
  .wcmsm-refresh:disabled,
  .wcmsm-load-more:disabled {
    opacity: .58;
  }

  .wcmsm-form-message {
    min-height: 21px;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
  }

  .wcmsm-form-message.is-error { color: var(--wcmsm-red); }
  .wcmsm-form-message.is-success { color: var(--wcmsm-green); }

  .wcmsm-denied-card {
    align-items: center;
    text-align: center;
  }

  .wcmsm-denied-icon {
    font-size: 58px;
    margin-bottom: 18px;
  }

  .wcmsm-dashboard {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding-bottom: 28px;
  }

  .wcmsm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    color: #fff;
  }

  .wcmsm-topbar-kicker {
    display: block;
    color: rgba(255,255,255,.64);
    font-size: 11px;
    margin-bottom: 3px;
  }

  .wcmsm-topbar h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
  }

  .wcmsm-logout {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 15px;
    background: var(--wcmsm-button);
    color: #fff;
    font-size: 21px;
    backdrop-filter: blur(10px);
  }

  .wcmsm-hero {
    margin-bottom: 14px;
    padding: 16px 17px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, rgba(23,105,255,.72), rgba(13,78,210,.45));
    box-shadow: 0 16px 35px rgba(0,0,0,.18);
  }

  .wcmsm-hero > div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.78);
    font-size: 11px;
    margin-bottom: 7px;
  }

  .wcmsm-hero strong {
    font-size: 14px;
  }

  .wcmsm-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #62f0a8;
    box-shadow: 0 0 0 6px rgba(98,240,168,.12);
  }

  .wcmsm-toolbar {
    display: grid;
    gap: 10px;
    margin-bottom: 13px;
  }

  .wcmsm-search-box,
  .wcmsm-category-box {
    min-height: 55px;
    display: flex;
    align-items: center;
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 10px 26px rgba(0,0,0,.14);
  }

  .wcmsm-search-box {
    padding: 0 15px;
    gap: 10px;
  }

  .wcmsm-search-box > span {
    color: var(--wcmsm-primary);
    font-size: 24px;
    line-height: 1;
  }

  .wcmsm-search-box input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px;
  }

  .wcmsm-clear-search {
    width: 30px;
    height: 30px;
    display: none;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: var(--wcmsm-button);
    color: #fff;
    font-size: 20px;
  }

  .wcmsm-clear-search.is-visible { display: grid; }

  .wcmsm-category-box {
    padding: 0 15px;
    gap: 10px;
  }

  .wcmsm-category-box > span {
    color: var(--wcmsm-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }

  .wcmsm-category-box select {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--wcmsm-ink);
    font-size: 13px;
  }

  .wcmsm-results-meta {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    color: rgba(255,255,255,.75);
    font-size: 12px;
    margin-bottom: 8px;
  }

  .wcmsm-refresh {
    border: 1px solid var(--wcmsm-button);
    background: var(--wcmsm-button);
    color: #fff;
    font: inherit;
  }

  .wcmsm-product-list {
    display: grid;
    gap: 11px;
  }

  .wcmsm-product-card {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 23px;
    background: var(--wcmsm-card);
    box-shadow: 0 14px 30px rgba(0,0,0,.16);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    overflow: hidden;
  }

  .wcmsm-product-card.is-updating {
    opacity: .72;
    transform: scale(.99);
  }

  .wcmsm-product-card.is-saved {
    border-color: rgba(22,163,106,.6);
    box-shadow: 0 0 0 4px rgba(22,163,106,.11), 0 14px 30px rgba(0,0,0,.16);
  }

  .wcmsm-product-image {
    width: 94px;
    height: 94px;
    display: block;
    object-fit: cover;
    border-radius: 17px;
    background: #f1f5f9;
  }

  .wcmsm-product-main {
    min-width: 0;
  }

  .wcmsm-product-title-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 3px;
  }

  .wcmsm-product-title-row h3 {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--wcmsm-ink);
    font-size: 13px;
    line-height: 1.65;
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .wcmsm-variation-badge {
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 7px;
    background: #eaf1ff;
    color: var(--wcmsm-primary);
    font-size: 9px;
    font-weight: 800;
  }

  .wcmsm-attributes {
    color: #728197;
    font-size: 10px;
    line-height: 1.6;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .wcmsm-product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    margin-bottom: 10px;
  }

  .wcmsm-sku {
    min-width: 0;
    color: #8490a0;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .wcmsm-sku.is-empty { opacity: .75; }

  .wcmsm-price {
    color: var(--wcmsm-primary-dark);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }

  .wcmsm-price del { opacity: .5; }
  .wcmsm-price ins { text-decoration: none; }

  .wcmsm-stock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .wcmsm-stock-status {
    min-width: 62px;
    display: grid;
    gap: 1px;
  }

  .wcmsm-stock-status span {
    color: var(--wcmsm-muted);
    font-size: 9px;
  }

  .wcmsm-stock-status strong {
    font-size: 12px;
  }

  .wcmsm-stock-status.is-good strong { color: var(--wcmsm-green); }
  .wcmsm-stock-status.is-low strong { color: var(--wcmsm-orange); }
  .wcmsm-stock-status.is-out strong { color: var(--wcmsm-red); }
  .wcmsm-stock-status.is-open strong { color: #64748b; }

  .wcmsm-stepper {
    display: grid;
    grid-template-columns: 36px minmax(34px, auto) 36px;
    align-items: center;
    border: 1px solid var(--wcmsm-line);
    border-radius: 14px;
    overflow: hidden;
    background: #f8fafc;
  }

  .wcmsm-stock-button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    font-size: 22px;
    line-height: 1;
    font-weight: 500;
  }

  .wcmsm-stock-button.is-plus {
    background: var(--wcmsm-button);
    color: #fff;
  }

  .wcmsm-stock-button.is-minus {
    background: var(--wcmsm-button);
    color: #fff;
  }

  .wcmsm-stock-button:disabled {
    opacity: .38;
  }

  .wcmsm-stepper-value {
    min-width: 34px;
    padding: 0 4px;
    text-align: center;
    color: var(--wcmsm-ink);
    font-size: 12px;
    font-weight: 900;
  }

  .wcmsm-stock-note {
    margin-top: 7px;
    color: #b45309;
    font-size: 9px;
    line-height: 1.5;
  }

  .wcmsm-load-more {
    width: 100%;
    min-height: 52px;
    margin-top: 13px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 17px;
    background: var(--wcmsm-button);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    backdrop-filter: blur(8px);
  }

  .wcmsm-empty-state {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    border-radius: 23px;
    background: rgba(255,255,255,.96);
    color: #64748b;
    text-align: center;
    box-shadow: 0 14px 30px rgba(0,0,0,.14);
  }

  .wcmsm-empty-state span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #edf3ff;
    color: var(--wcmsm-primary);
    font-size: 27px;
  }

  .wcmsm-empty-state.is-error span {
    background: var(--wcmsm-button);
    color: #fff;
  }

  .wcmsm-toast {
    position: fixed;
    right: 16px;
    left: 16px;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 99999;
    max-width: 520px;
    margin: auto;
    padding: 13px 16px;
    border-radius: 15px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: .24s ease;
    box-shadow: 0 15px 40px rgba(0,0,0,.25);
  }

  .wcmsm-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .wcmsm-toast.is-success { background: #087a4c; }
  .wcmsm-toast.is-error { background: #bb2c2c; }

  .wcmsm-skeleton {
    background: linear-gradient(90deg, #edf1f5 25%, #f8fafc 50%, #edf1f5 75%);
    background-size: 200% 100%;
    animation: wcmsm-shimmer 1.2s infinite;
  }

  .wcmsm-skeleton-image {
    width: 94px;
    height: 94px;
    border-radius: 17px;
  }

  .wcmsm-skeleton-line {
    height: 11px;
    width: 70%;
    border-radius: 999px;
    margin: 8px 0;
  }

  .wcmsm-skeleton-line.wide { width: 94%; height: 15px; }
  .wcmsm-skeleton-line.small { width: 45%; }

  @keyframes wcmsm-shimmer {
    to { background-position: -200% 0; }
  }
}

/* Final button safeguards against active-theme overrides. */
.wcmsm-app .wcmsm-btn *,
.wcmsm-app button * {
  color: #ffffff !important;
}

.wcmsm-app .wcmsm-btn-refresh {
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 10px;
  font-weight: 700;
}

.wcmsm-app .wcmsm-btn-password-toggle,
.wcmsm-app .wcmsm-btn-clear-search,
.wcmsm-app .wcmsm-btn-logout,
.wcmsm-app .wcmsm-btn-stock-minus,
.wcmsm-app .wcmsm-btn-stock-plus {
  flex: 0 0 auto;
}