/* Card designer and cards landing page. Uses the theme's fonts; colours are set here. */
.scd, [data-scd-landing] {
  --scd-ink: #1c2320;
  --scd-muted: #5d6762;
  --scd-rule: #d7dbd4;
  --scd-sheet: #fbfbf8;
  --scd-accent: #2e5a51;
  --scd-warn: #8a5a12;
  --scd-bad: #a0352a;
  color: var(--scd-ink);
}
.scd { display: grid; gap: 22px; margin: 18px 0; }
.scd *, [data-scd-landing] * { box-sizing: border-box; }
.scd-h { font-size: 1rem; line-height: 1.3; margin: 0 0 10px; letter-spacing: normal; text-transform: none; }
.scd-note { margin: 6px 0 0; font-size: .85rem; color: var(--scd-muted); }
.scd-step { display: grid; gap: 4px; }

.scd-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.scd-pick {
  display: grid; gap: 6px; padding: 8px; text-align: left; cursor: pointer;
  background: var(--scd-sheet); border: 1px solid var(--scd-rule); border-radius: 3px; color: inherit; font: inherit; font-size: .8rem; line-height: 1.3;
}
.scd-pick canvas, .scd-card canvas { width: 100%; height: auto; display: block; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.scd-pick[aria-pressed="true"] { border-color: var(--scd-accent); box-shadow: 0 0 0 1px var(--scd-accent); }

.scd-drop {
  display: grid; gap: 2px; justify-items: center; text-align: center; cursor: pointer; padding: 18px;
  border: 1.5px dashed var(--scd-rule); border-radius: 3px; background: var(--scd-sheet);
}
.scd-drop span { font-size: .8rem; color: var(--scd-muted); }
.scd--over .scd-drop { border-color: var(--scd-accent); }
.scd-progress { height: 6px; background: var(--scd-rule); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.scd-progress span { display: block; height: 100%; background: var(--scd-accent); transition: width .2s; }
.scd-quality { margin-top: 8px; padding: 10px 12px; border-radius: 3px; font-size: .85rem; border: 1px solid var(--scd-rule); }
.scd-quality p { margin: 0 0 4px; }
.scd-quality--great { border-color: #b9d3c8; background: #eef6f2; }
.scd-quality--ok, .scd-quality--soft { border-color: #e6cf9d; background: #fbf4e4; color: var(--scd-warn); }
.scd-quality--blocked { border-color: #e3b4ac; background: #fbeeec; color: var(--scd-bad); }
.scd-accept { display: flex; gap: 8px; align-items: center; margin-top: 6px; color: var(--scd-ink); }

/* Small preview on the product page */
.scd-summary { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--scd-rule); background: var(--scd-sheet); border-radius: 3px; }
.scd-summary canvas { width: 100%; height: auto; display: block; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.scd-summary-copy { display: grid; gap: 6px; justify-items: start; }
.scd-summary-copy p { margin: 0; }
.scd-note--ready { color: var(--scd-accent); font-weight: 600; }
.scd-open, .scd-done {
  font: inherit; font-weight: 600; font-size: .9rem; padding: 10px 18px; cursor: pointer; min-height: 0;
  background: var(--scd-accent); color: #fff; border: 1px solid var(--scd-accent); border-radius: 3px; letter-spacing: normal; text-transform: none;
}

/* The design popup */
html.scd-lock { overflow: hidden; }
.scd-modal {
  position: fixed; inset: 0; z-index: 2147483000; margin: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 24, 22, .55); padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
}
.scd-modal[hidden] { display: none; }
.scd-dialog {
  width: min(1120px, 100%); max-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
}
.scd-dialog-head, .scd-dialog-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; }
.scd-dialog-head { border-bottom: 1px solid var(--scd-rule); }
.scd-dialog-head .scd-h { margin: 0; }
.scd-dialog-foot { border-top: 1px solid var(--scd-rule); }
.scd-close { font-size: 1.7rem; line-height: 1; padding: 2px 8px; min-height: 0; background: none; border: 0; cursor: pointer; color: var(--scd-ink); }
.scd-dialog-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; padding: 18px; overflow: auto; }
.scd-dialog-preview { display: grid; gap: 8px; align-content: start; position: sticky; top: 0; }
.scd-dialog-preview canvas { width: 100%; height: auto; display: block; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 10px 24px -16px rgba(0,0,0,.45); touch-action: none; }
.scd-dialog-preview canvas[data-face="outside"] { cursor: grab; }
.scd-preview-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: .8rem; color: var(--scd-muted); }
.scd-mag { display: inline-flex; align-items: center; gap: 6px; }
.scd-mag button { min-height: 0; width: 28px; height: 28px; padding: 0; font: inherit; font-size: 1rem; line-height: 1; background: none; border: 1px solid var(--scd-rule); border-radius: 3px; cursor: pointer; color: var(--scd-ink); }
.scd-mag [data-mag-label] { min-width: 3.2em; text-align: center; }
.scd-canvas-wrap { display: grid; }
.scd-magnified .scd-canvas-wrap { overflow: auto; max-height: calc(100vh - 260px); }
.scd-crop-help { display: grid; gap: 6px; font-size: .8rem; color: var(--scd-muted); }
.scd-crop-help p { margin: 0; }
.scd-turn { min-height: 0; padding: 4px 10px; font: inherit; font-size: .8rem; background: none; border: 1px solid var(--scd-rule); border-radius: 3px; cursor: pointer; }
.scd-turn[aria-pressed="true"] { border-color: var(--scd-accent); }
.scd-turned canvas { transform: rotate(180deg); }
.scd-dialog-form { display: grid; gap: 18px; align-content: start; }
@media (max-width: 760px) {
  .scd-modal { padding: 0; }
  .scd-dialog { height: 100%; border-radius: 0; }
  .scd-dialog-body { grid-template-columns: 1fr; }
  .scd-dialog-preview { position: static; }
  .scd-summary { grid-template-columns: 1fr; }
}
.scd-face-label { margin: 6px 0 0; font-size: .8rem; color: var(--scd-muted); }
.scd-zoom { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: var(--scd-muted); }
.scd-zoom label { display: flex; gap: 8px; align-items: center; }

.scd-field { display: grid; gap: 6px; margin-bottom: 10px; }
.scd-field label { font-size: .85rem; font-weight: 600; }
.scd-field textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--scd-rule); border-radius: 3px; resize: vertical; }
.scd-field-opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.scd-field-opts select { font: inherit; font-size: .85rem; padding: 4px 6px; }
.scd-swatch { width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--scd-rule); cursor: pointer; }
.scd-swatch[aria-pressed="true"] { outline: 2px solid var(--scd-accent); outline-offset: 2px; }
.scd-field-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.scd-field-name { font-size: .85rem; font-weight: 600; }
.scd-thumb-note { margin: 6px 0 0; font-size: .8rem; color: var(--scd-muted); }
.scd-thumb-note--error { color: #b3261e; }
.scd-thumb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.scd-thumb-file, .scd-thumb-reset { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid currentColor; border-radius: 4px; background: none; font: inherit; font-size: .8rem; color: inherit; cursor: pointer; }
.scd-thumb-file:focus-within, .scd-thumb-reset:focus-visible { outline: 2px solid var(--scd-accent); outline-offset: 2px; }
.scd-field .scd-show { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 400; cursor: pointer; white-space: nowrap; }
.scd-field--off .scd-field-name { opacity: .55; }
.scd-dialog--proof { width: min(1300px, 100%); height: 100%; }
.scd-proof-body { display: grid; min-height: 0; padding: 12px 18px; background: #eef0ec; }
.scd-proof-frame { width: 100%; height: 100%; min-height: 50vh; border: 0; background: #fff; }
.scd-proof-wait { align-self: center; justify-self: center; }
.scd-proof-foot { display: grid; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--scd-rule); }
.scd-approve { align-items: flex-start; font-size: .85rem; line-height: 1.4; }
.scd-approve input { margin-top: 3px; flex: none; }
.scd-proof-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; font-size: .85rem; }
.scd-done[disabled] { opacity: .45; cursor: not-allowed; }
.scd-social { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 8px; align-items: center; }
.scd-social-on { display: inline-flex; gap: 6px; align-items: center; font-size: .85rem; cursor: pointer; }
.scd-social-on svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.scd-social input[type=text] { width: 100%; font: inherit; font-size: .85rem; padding: 6px 8px; border: 1px solid var(--scd-rule); border-radius: 3px; }
.scd-field .scd-colour-pick { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 400; cursor: pointer; }
.scd-colour-pick input { width: 26px; height: 26px; padding: 0; border: 1px solid var(--scd-rule); border-radius: 50%; background: none; cursor: pointer; }
.scd-colour-pick input::-webkit-color-swatch-wrapper { padding: 0; }
.scd-colour-pick input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.scd-colour-pick input::-moz-color-swatch { border: 0; border-radius: 50%; }
.scd-msg { margin: 0; font-size: .9rem; color: var(--scd-bad); min-height: 1em; }

.scd-later { display: grid; gap: 8px; }
.scd-later-btn, .scd-link button {
  justify-self: start; font: inherit; font-size: .9rem; padding: 8px 12px; cursor: pointer;
  background: transparent; color: var(--scd-accent); border: 1px solid var(--scd-accent); border-radius: 3px;
}
.scd-later p { margin: 0; font-size: .85rem; }
.scd-link { display: flex; gap: 6px; flex-wrap: wrap; }
.scd-link input { flex: 1 1 220px; font: inherit; font-size: .8rem; padding: 6px 8px; border: 1px solid var(--scd-rule); }

/* Landing page */
[data-scd-landing] { display: grid; gap: 20px; }
.scd-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--scd-rule); flex-wrap: wrap; }
.scd-tab {
  font: inherit; font-weight: 600; padding: 10px 16px; cursor: pointer; background: transparent; color: var(--scd-muted);
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; letter-spacing: normal; text-transform: none;
}
.scd-tab[aria-selected="true"] { color: var(--scd-ink); border-bottom-color: var(--scd-accent); }
.scd-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.scd-size {
  display: grid; font: inherit; font-size: .9rem; padding: 8px 12px; cursor: pointer; text-align: left;
  background: transparent; color: var(--scd-ink); border: 1px solid var(--scd-rule); border-radius: 3px;
}
.scd-size small { font-size: .72rem; color: var(--scd-muted); }
.scd-size[aria-pressed="true"] { background: var(--scd-accent); border-color: var(--scd-accent); color: #fff; }
.scd-size[aria-pressed="true"] small { color: rgba(255,255,255,.8); }
.scd-grid, .scd-saved-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.scd-card, .scd-saved-card {
  display: grid; gap: 8px; padding: 14px; text-decoration: none; color: inherit;
  background: var(--scd-sheet); border: 1px solid var(--scd-rule); border-radius: 3px;
}
.scd-card:hover, .scd-saved-card:hover { border-color: var(--scd-accent); }
.scd-saved-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.scd-card-name { font-weight: 600; font-size: .95rem; }
.scd-card-cta { font-size: .85rem; color: var(--scd-accent); font-weight: 600; }
.scd-saved { display: grid; gap: 8px; }
.scd-open:focus-visible, .scd-done:focus-visible, .scd-close:focus-visible, .scd-pick:focus-visible, .scd-tab:focus-visible, .scd-size:focus-visible, .scd-card:focus-visible, .scd-drop:focus-within { outline: 2px solid var(--scd-accent); outline-offset: 2px; }

/* Customize button and the design picker screen */
.scd-start { display: grid; gap: 6px; justify-items: start; }
.scd-start .scd-note { margin: 0; }
.scd-customize {
  font: inherit; font-weight: 700; font-size: 1rem; padding: 14px 28px; cursor: pointer; min-height: 0; width: 100%;
  background: var(--scd-ink); color: #fff; border: 1px solid var(--scd-ink); border-radius: 3px; letter-spacing: .04em; text-transform: uppercase;
}
.scd-customize:disabled { opacity: .5; cursor: not-allowed; }
.scd-head-copy { display: grid; gap: 2px; }
.scd-back { justify-self: start; font: inherit; font-size: .8rem; padding: 0; min-height: 0; background: none; border: 0; color: var(--scd-accent); cursor: pointer; text-decoration: underline; letter-spacing: normal; text-transform: none; }
.scd-dialog-body--pick { display: block; }
.scd-dialog-body--pick .scd-picker { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.scd-dialog-body--pick .scd-pick { font-size: .9rem; padding: 12px; }
.scd-customize:focus-visible, .scd-back:focus-visible { outline: 2px solid var(--scd-accent); outline-offset: 2px; }
.scd-fit { margin: 0; font-size: .8rem; color: var(--scd-warn); }

/* Products made with the card designer: hide Upload-Lift and Fancy Product Designer's own controls.
   Only FPD's named elements: it also puts "fpd-enabled" on <body>, which must never be hidden. */
html.scd-active [id*="upload_lift_app_block"],
html.scd-active [data-upload-lift],
html.scd-active #fpd-customize-button,
html.scd-active .fpd-modal-product-designer,
html.scd-active fpd-element-toolbar,
html.scd-active .fpd-thumbnail-preview,
html.scd-active .fpd-main-tooltip { display: none !important; }
/* Tall shapes (portrait magnets) stay inside the popup. */
.scd-dialog-preview canvas { max-height: calc(100vh - 240px); width: auto; max-width: 100%; justify-self: center; }
.scd-magnified canvas { max-height: none; max-width: none; width: var(--scd-mag); justify-self: start; }

/* My account: saved cards */
.scd-account { display: grid; gap: 10px; margin: 24px 0 32px; color: var(--scd-ink, #1c2320); }
.scd-account .scd-note { margin: 0; }
.scd-account .scd-saved-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.scd-account .scd-saved-card { display: grid; gap: 6px; padding: 12px; text-decoration: none; color: inherit; background: #fbfbf8; border: 1px solid #d7dbd4; border-radius: 3px; }
.scd-account .scd-saved-card:hover { border-color: #2e5a51; }
.scd-account .scd-saved-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.scd-account .scd-card-name { font-weight: 600; font-size: .95rem; }
.scd-account .scd-card-cta { font-size: .85rem; color: #2e5a51; font-weight: 600; }

/* My account: Orders & invoices | Saved cards tabs */
.scd-account-tabs { display: flex; gap: 4px; margin: 16px 0 24px; border-bottom: 1px solid #d7dbd4; overflow-x: auto; }
.scd-account-tabs [role=tab] { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 14px; font: inherit; color: inherit; opacity: .7; cursor: pointer; white-space: nowrap; }
.scd-account-tabs [role=tab][aria-selected=true] { opacity: 1; border-bottom-color: currentColor; font-weight: 600; }
.scd-account-tabs [role=tab]:focus-visible { outline: 2px solid #2e5a51; outline-offset: 2px; }
.scd-tab-count { display: inline-block; min-width: 1.4em; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: #e9ebe7; font-size: .8em; text-align: center; }
.scd-account[hidden] { display: none; }