/* Salesperson Order Creation — all classes start with sp- so nothing clashes with the site. */
:root {
  --sp-orange: #f58220;
  --sp-orange-ink: #a8500a;
  --sp-orange-soft: #fef1e6;
  --sp-orange-line: #f7b67c;
  --sp-ink: #2a2622;
  --sp-muted: #6b645c;
  --sp-line: #e8e2da;
  --sp-line-2: #d6cec4;
  --sp-panel: #faf8f5;
  --sp-bg: #fff;
  --sp-warn-bg: #fff4d6;
  --sp-warn-ink: #7a5000;
  --sp-danger-bg: #fdecea;
  --sp-danger: #b42318;
  --sp-ok-bg: #e7f5ee;
  --sp-ok: #1e7b4a;
}

.sp-hidden {
  display: none !important;
}

/* Hide wishlist / email icons on product cards in customer mode.
   Replace these selectors with the classes your cards use. */
body.sp-mode .wishlist-icon,
body.sp-mode .email-product-icon {
  display: none !important;
}

/* Hide the normal Add to cart button in customer mode (add class sp-normal-add to it). */
body.sp-mode .sp-normal-add {
  display: none !important;
}

/* Header button */
.sp-order-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--sp-orange);
  color: var(--sp-orange-ink);
  background: var(--sp-bg);
  border-radius: 20px;
  padding: 6px 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font: inherit;
}

.sp-order-btn:hover {
  background: var(--sp-orange-soft);
}

@media (max-width: 640px) {
  .sp-order-btn-text {
    display: none;
  }
}

/* Banner */
.sp-banner,
.sp-guard {
  position: sticky;
  top: 0;
  z-index: 900;
  border-bottom: 1px solid var(--sp-orange-line);
  background: var(--sp-orange-soft);
  color: var(--sp-ink);
}

.sp-guard {
  background: var(--sp-danger-bg);
  color: var(--sp-danger);
  border-color: var(--sp-danger);
}

.sp-banner-in {
  /* max-width: 1240px; */
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.sp-banner-meta {
  color: var(--sp-orange-ink);
  font-size: 14px;
}

.sp-banner-acts {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* Buttons and inputs */
.sp-btn {
  border: 1px solid var(--sp-line-2);
  background: var(--sp-bg);
  color: var(--sp-ink);
  border-radius: 8px;
  padding: 7px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.sp-btn:hover {
  border-color: var(--sp-ink);
}

.sp-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.sp-btn-sm {
  padding: 4px 10px;
  font-size: 13px;
}

.sp-btn-primary {
  background: var(--sp-orange);
  border-color: var(--sp-orange);
  color: #fff;
}

.sp-ghost {
  background: transparent;
  border-color: transparent;
}

.sp-danger {
  color: var(--sp-danger);
}

.sp-link {
  background: none;
  border: 0;
  color: var(--sp-orange-ink);
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.sp-link-danger {
  color: var(--sp-danger);
  margin-left: auto;
}

.sp-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--sp-line-2);
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  background: var(--sp-bg);
  color: var(--sp-ink);
}

.sp-input:focus {
  outline: none;
  border-color: var(--sp-orange);
  box-shadow: 0 0 0 3px var(--sp-orange-soft);
}

.sp-input.sp-bad {
  border-color: var(--sp-danger);
}

.sp-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-muted);
  margin: 10px 0 4px;
}

.sp-hint,
.sp-sub {
  font-size: 12px;
  color: var(--sp-muted);
  margin: 4px 0;
}

.sp-err,
.sp-ferr {
  color: var(--sp-danger);
  font-size: 13px;
  margin-top: 6px;
}

.sp-ferr {
  font-size: 12px;
  margin-top: 2px;
}

/* Modal */
.sp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 8, .45);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 70px 16px 16px;
  overflow: auto;
}

.sp-modal {
  background: var(--sp-bg);
  color: var(--sp-ink);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(40, 30, 20, .2);
  width: 100%;
  max-width: 480px;
  padding: 16px;
  box-sizing: border-box;
}

.sp-modal.sp-wide {
  max-width: 720px;
}

.sp-modal h2,
.sp-drawer h2 {
  font-size: 18px;
  margin: 0 0 2px;
}

.sp-mhead,
.sp-dhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.sp-x {
  background: none;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--sp-muted);
  cursor: pointer;
}

.sp-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.sp-foot-split {
  justify-content: space-between;
}

/* Picker rows */
.sp-sect {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-muted);
  margin: 14px 0 4px;
}

.sp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-bottom: 1px solid var(--sp-line);
  border-radius: 6px;
  cursor: pointer;
}

.sp-row:hover,
.sp-row.sp-kb {
  background: var(--sp-panel);
}

.sp-row-draft {
  background: var(--sp-orange-soft);
}

.sp-main {
  flex: 1;
  min-width: 0;
}

.sp-l1 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
}

.sp-l2 {
  font-size: 12px;
  color: var(--sp-muted);
}

.sp-l3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.sp-code {
  font-size: 12px;
  color: var(--sp-muted);
  font-weight: 500;
}

.sp-empty {
  color: var(--sp-muted);
  font-size: 14px;
  padding: 14px 4px;
}

.sp-trash {
  background: none;
  border: 0;
  color: var(--sp-muted);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
}

.sp-trash:hover {
  color: var(--sp-danger);
  background: var(--sp-danger-bg);
}

.sp-confirmdel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  background: var(--sp-danger-bg);
  color: var(--sp-danger);
  border-radius: 6px;
  font-size: 13px;
}

.sp-confirmdel span {
  flex: 1;
}

.sp-mhead-acts {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sp-plist {
  max-height: min(60vh, 560px);
  overflow-y: auto;
  margin-top: 6px;
}

.sp-more {
  text-align: center;
  padding: 10px 0;
}

.sp-addnew {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--sp-line);
  font-size: 13px;
  color: var(--sp-muted);
}

/* Badges and notes */
.sp-badge {
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  padding: 1px 8px;
  white-space: nowrap;
}

.sp-warn {
  background: var(--sp-warn-bg);
  color: var(--sp-warn-ink);
}

.sp-danger-b {
  background: var(--sp-danger-bg);
  color: var(--sp-danger);
}

.sp-draft-b {
  background: var(--sp-orange-soft);
  color: var(--sp-orange-ink);
  border: 1px solid var(--sp-orange-line);
}

.sp-nr {
  font-size: 10.5px;
  font-weight: 700;
  background: var(--sp-warn-bg);
  color: var(--sp-warn-ink);
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 5px;
  white-space: nowrap;
  vertical-align: middle;
}

.sp-note {
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin: 10px 0;
}

.sp-note ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.sp-note-warn {
  background: var(--sp-warn-bg);
  color: var(--sp-warn-ink);
}

.sp-note-danger {
  background: var(--sp-danger-bg);
  color: var(--sp-danger);
}

.sp-note-ok {
  background: var(--sp-ok-bg);
  color: var(--sp-ok);
}

.sp-kv {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 8px 0;
}

.sp-kv td {
  padding: 6px 0;
  border-bottom: 1px solid var(--sp-line);
}

.sp-kv td:last-child {
  text-align: right;
  font-weight: 600;
}

/* New customer form */
.sp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

.sp-full {
  grid-column: 1 / -1;
}

.sp-subhead {
  font-weight: 700;
  margin-top: 14px;
}

@media (max-width: 560px) {
  .sp-grid {
    grid-template-columns: 1fr;
  }
}

/* Drawer */
.sp-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--sp-bg);
  color: var(--sp-ink);
  box-shadow: 0 12px 32px rgba(40, 30, 20, .25);
  z-index: 2100;
  display: flex;
  flex-direction: column;
}

.sp-drawer .sp-dhead {
  padding: 16px;
  border-bottom: 1px solid var(--sp-line);
  margin: 0;
}

.sp-dbody {
  flex: 1;
  overflow: auto;
  padding: 8px 16px;
}

.sp-dfoot {
  border-top: 1px solid var(--sp-line);
  padding: 12px 16px;
}

.sp-line {
  padding: 10px 0;
  border-bottom: 1px solid var(--sp-line);
}

.sp-line.sp-sold .sp-l1 span:first-child {
  text-decoration: line-through;
}

.sp-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--sp-line-2);
  border-radius: 6px;
}

.sp-qty button {
  background: none;
  border: 0;
  width: 28px;
  height: 26px;
  cursor: pointer;
}

.sp-qty span {
  min-width: 22px;
  text-align: center;
  font-size: 13px;
}

.sp-total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 16px;
}

/* Toast */
.sp-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  background: var(--sp-ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 3000;
  font-weight: 600;
  font-size: 14px;
  max-width: 90vw;
  transition: opacity .2s, transform .2s;
}

.sp-toast.sp-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Customer My Account > Past orders label */
.sp-past-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  background: var(--sp-orange-soft);
  color: var(--sp-orange-ink);
  border: 1px solid var(--sp-orange-line);
  border-radius: 10px;
  padding: 1px 8px;
}

.sp-past-hold {
  background: var(--sp-warn-bg);
  color: var(--sp-warn-ink);
  border-color: transparent;
}

/* Product page buttons (diamond / jewelry detail) */
.sp-pdp-box {
  margin: 14px 0;
}

.sp-pdp-btn {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  letter-spacing: .3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sp-pdp-hint {
  font-size: 12px;
  color: var(--sp-muted);
  margin-top: 6px;
}

/* Jewelry page: Add to Order uses the page's own .sdx-cart-btn look, in a darker tone so it isn't mistaken for Add to Bag */
.sp-add-order-btn {
  background: #2a2622 !important;
  border-color: #2a2622 !important;
  color: #fff !important;
}

.sp-add-order-btn:hover {
  filter: brightness(1.15);
}

/* Add new customer: notice under the title */
.sp-newcust-note {
  margin: 0 0 12px;
  line-height: 1.45;
  font-size: 13px;
}

.sp-newcust-note-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.sp-modal .sp-sub {
  line-height: 1.45;
}

/* Item thumbnails (order sidebar + My orders) */
.sp-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.sp-line-main {
  flex: 1;
  min-width: 0;
}

.sp-thumb {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 6px;
  background: var(--sp-panel);
  border: 1px solid var(--sp-line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sp-muted);
}

.sp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* My orders */
.sp-myorders-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--sp-line-2);
  color: var(--sp-ink);
  background: var(--sp-bg);
  border-radius: 20px;
  padding: 6px 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 6px;
}

.sp-myorders-btn:hover {
  border-color: var(--sp-orange);
  color: var(--sp-orange-ink);
}

.sp-mo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--sp-line);
  border-radius: 6px;
}

.sp-mo-placed {
  cursor: pointer;
}

.sp-mo-placed:hover,
.sp-mo-placed:focus-visible {
  background: var(--sp-panel);
  outline: none;
}

.sp-mo-active {
  background: var(--sp-orange-soft);
}

.sp-mo-acts {
  display: flex;
  gap: 6px;
  flex: none;
}

.sp-mo-caret {
  color: var(--sp-muted);
  font-size: 11px;
  flex: none;
}

.sp-mo-detail {
  padding: 6px 8px 12px 18px;
  border-bottom: 1px solid var(--sp-line);
  background: var(--sp-panel);
  border-radius: 0 0 6px 6px;
}

.sp-ok-b {
  background: var(--sp-ok-bg);
  color: var(--sp-ok);
}

@media (max-width: 560px) {
  .sp-mo-row {
    flex-wrap: wrap;
  }

  .sp-mo-acts {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Space under the customer banner on diamond pages (their first row has no top margin).
   Matches /diamond, /diamond-details, /diamonds ... Add other pages here if needed. */
body.sp-mode[class*="sp-page-diamond"] #sp-banner {
  margin-bottom: 18px;
}

/* Ship-to block */
.sp-ship {
  margin: 10px 0 4px;
}

.sp-ship-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.sp-ship-head .sp-label {
  margin-bottom: 4px;
}

.sp-ship-acts {
  display: flex;
  gap: 14px;
  margin-bottom: 4px;
}

.sp-ship-select {
  text-overflow: ellipsis;
}

.sp-ship-full {
  font-size: 13px;
  line-height: 1.4;
  color: var(--sp-ink);
  background: var(--sp-panel);
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 6px;
}

.sp-ship-empty {
  margin: 4px 0 8px;
}

.sp-kv td:first-child {
  white-space: nowrap;
  padding-right: 16px;
}

/* Address form opens over the order sidebar */
.sp-overlay {
  z-index: 2200;
}

.sp-row .sp-trash {
  flex: none;
}

.sp-foot-split>span {
  display: flex;
  gap: 8px;
}

/* ================= Order sidebar in cart-page style ================= */
.sp-drawer {
  width: min(600px, 100%);
}

.sp-dbody {
  padding: 4px 18px 12px;
}

.sp-cart-sect {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 600;
  font-size: 13px;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--sp-line);
  color: var(--sp-ink);
}

.sp-ci {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--sp-line);
}

.sp-ci-img {
  width: 120px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sp-ci-img .sp-thumb {
  width: 120px;
  height: 120px;
  border-radius: 4px;
}

.sp-pill {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 12px;
  padding: 3px 4px;
  border: 1px solid;
}

.sp-pill-rts {
  color: #2e7d32;
  border-color: #2e7d32;
  background: #fff;
}

.sp-pill-mto {
  color: #e0701b;
  border-color: #e0701b;
  background: #fff;
}

.sp-ci-body {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
}

.sp-ci-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.sp-ci-name {
  font-size: 13px;
  line-height: 1.55;
  color: var(--sp-ink);
}

.sp-ci-price {
  font-size: 13px;
  white-space: nowrap;
}

.sp-ci-meta {
  line-height: 1.8;
  color: var(--sp-ink);
}

.sp-metal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 7.5px;
  font-weight: 700;
  margin: 4px 0;
  color: #333;
}

.sp-metal-w {
  background: #d9d9d9;
}

.sp-metal-y {
  background: #ecca6a;
}

.sp-metal-r {
  background: #ecb9a4;
}

.sp-metal-pt {
  background: #cfd6dc;
}

.sp-metal-tt {
  background: linear-gradient(135deg, #d9d9d9 50%, #ecca6a 50%);
}

.sp-ci-mto {
  color: #e0701b;
  line-height: 1.8;
}

.sp-ci-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.sp-ci-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.sp-ci-size select {
  border: 1px solid var(--sp-line-2);
  border-radius: 18px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  background: var(--sp-bg);
}

.sp-ci .sp-qty {
  border-radius: 18px;
}

.sp-ci-remove {
  text-decoration: underline;
  font-size: 12px;
  color: var(--sp-ink);
}

.sp-ci-lead {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  color: #e0701b;
  margin-top: 8px;
  line-height: 1.4;
}

.sp-ci-lead svg {
  flex: none;
  margin-top: 2px;
}

.sp-ci-ships {
  color: #2e7d32;
  margin-top: 6px;
}

.sp-ci-flag {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.sp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.sp-sum {
  border: 1px solid var(--sp-line);
  border-radius: 4px;
  padding: 14px 16px;
  margin: 16px 0 6px;
}

.sp-sum-title {
  font-size: 18px;
  margin-bottom: 8px;
}

.sp-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 14px;
}

.sp-sum-total {
  border-top: 1px solid var(--sp-line);
  margin-top: 8px;
  padding-top: 10px;
  font-weight: 700;
}

.sp-sum-ship select {
  border: 1px solid var(--sp-line-2);
  border-radius: 18px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  background: var(--sp-bg);
}

.sp-req {
  color: #d33;
}

.sp-sum-mto {
  color: #d33;
  font-size: 13px;
  line-height: 1.55;
  margin: 10px 0;
}

.sp-dfoot {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-order-now {
  width: 100%;
  background: var(--sp-orange);
  color: #fff;
  border: 0;
  border-radius: 20px;
  padding: 11px 16px;
  font: inherit;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
}

.sp-order-now:hover {
  filter: brightness(.96);
}

.sp-order-now:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.sp-discard-link {
  align-self: center;
  font-size: 12px;
}

@media (max-width: 520px) {

  .sp-ci-img,
  .sp-ci-img .sp-thumb {
    width: 88px;
  }

  .sp-ci-img .sp-thumb {
    height: 88px;
  }
}

/* Customer signature */
.sp-sig {
  margin-top: 14px;
}

.sp-sig-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.sp-sig-canvas {
  display: block;
  width: 100%;
  height: 160px;
  border: 1px dashed var(--sp-line-2);
  border-radius: 6px;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

.sp-sig-hint {
  font-size: 12px;
  color: var(--sp-muted);
  margin-top: 4px;
}

.sp-mo-sig {
  margin-top: 10px;
}

.sp-mo-sig img {
  display: block;
  max-width: 300px;
  width: 100%;
  border: 1px solid var(--sp-line);
  border-radius: 4px;
  background: #fff;
  margin-top: 4px;
}

/* Banner: below the header's dropdowns (search box), same width as the site's container */
.sp-banner,
.sp-guard {
  z-index: 20;
}

body.sp-mode header {
  z-index: 30;
}

.sp-banner-in.container {
  max-width: none;
  padding-top: 8px;
  padding-bottom: 8px;
}

@media (min-width: 576px) {
  .sp-banner-in.container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .sp-banner-in.container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .sp-banner-in.container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .sp-banner-in.container {
    max-width: 1140px;
  }
}

.sp-ci-deal {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
  background: #e0701b;
  border-radius: 10px;
  padding: 1px 8px;
  margin: 4px 0;
}