/* Skatewarehouse custom deck designer */
@font-face { font-family: "SWD Anton"; src: url("fonts/Anton-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "SWD Bebas"; src: url("fonts/BebasNeue-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "SWD Slab"; src: url("fonts/RobotoSlab.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "SWD Josefin"; src: url("fonts/JosefinSans.ttf") format("truetype"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "SWD Marker"; src: url("fonts/PermanentMarker-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "SWD Pacifico"; src: url("fonts/Pacifico-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "SWD Bangers"; src: url("fonts/Bangers-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "SWD Courier"; src: url("fonts/CourierPrime-Bold.ttf") format("truetype"); font-display: swap; }

.swd {
  /* the board builder's look (Nathan, 2026-11-02): near-black, greys, pill buttons, Oswald headings */
  --swd-teal: #00a38c; --swd-buy: #00b298; --swd-buy-dark: #00967f; --swd-ink: #1f1f1f; --swd-muted: #6b6b6b; --swd-line: #e2e2e2; --swd-soft: #f1f1f1;
  --swd-panel: #ffffff; --swd-bg: #ffffff; --swd-danger: #c8102e; --swd-radius: 14px;
  --swd-head: Oswald, Impact, "Arial Narrow", sans-serif;
  font-family: inherit; color: var(--swd-ink); background: var(--swd-bg); border-radius: var(--swd-radius);
  padding: 12px; box-sizing: border-box; max-width: 1200px; margin: 0 auto;
}
.swd *, .swd *::before, .swd *::after { box-sizing: border-box; }
.swd h3, .swd .swd-lib-h { font-family: var(--swd-head); font-size: 20px; font-weight: 500; margin: 0 0 10px; letter-spacing: .4px; text-transform: uppercase; line-height: 1.15; }
.swd-ico { width: 20px; height: 20px; flex: none; }
.swd-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.swd-spacer { flex: 1; }
.swd-btn {
  font: inherit; font-size: 14px; line-height: 1.2; border: 1.5px solid var(--swd-line); background: #fff; color: var(--swd-ink);
  padding: 9px 16px; border-radius: 99px; cursor: pointer; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .15s, border-color .15s, color .15s;
}
.swd-btn:hover:not(:disabled) { border-color: var(--swd-ink); }
.swd-btn:focus-visible { outline: 2px solid var(--swd-teal); outline-offset: 2px; }
.swd-btn:disabled { opacity: .4; cursor: not-allowed; }
.swd-btn-primary { background: var(--swd-ink); color: #fff; border-color: var(--swd-ink); font-weight: 600; }
.swd-btn-primary:hover:not(:disabled) { background: #000; }
.swd-tool span { font-family: var(--swd-head); font-size: 15px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; }
.swd-btn-cta { width: 100%; background: var(--swd-buy); color: #fff; border-color: var(--swd-buy); font-family: var(--swd-head); font-weight: 500; font-size: 18px; letter-spacing: .6px; text-transform: uppercase; padding: 14px; min-height: 52px; }
.swd-btn-cta:hover:not(:disabled), .swd-btn.swd-bar-btn:hover:not(:disabled) { background: var(--swd-buy-dark); border-color: var(--swd-buy-dark); }
.swd-btn-sm { padding: 7px 14px; font-size: 13px; min-height: 36px; }
.swd-btn.is-on { background: var(--swd-ink); color: #fff; border-color: var(--swd-ink); }
.swd-icon { width: 42px; padding: 0; }
.swd-danger { color: var(--swd-danger); }

.swd-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
@media (max-width: 860px) { .swd-main { grid-template-columns: 1fr; } }

.swd-stage-wrap { width: 100%; display: flex; justify-content: center; align-items: center; gap: 16px; background: var(--swd-soft); border-radius: var(--swd-radius); padding: 14px; overflow: hidden; }
.swd-full { margin: 0; display: grid; gap: 8px; justify-items: center; flex: none; width: min-content; }
.swd-full-canvas { display: block; }
.swd-full-canvas[hidden] { display: none; }
.swd-full-3d { display: block; }
.swd-full figcaption { font-family: var(--swd-head); font-size: 12px; color: var(--swd-muted); letter-spacing: .6px; text-transform: uppercase; text-align: center; line-height: 1.3; }
.swd-3d-btn { background: #fff; border-color: var(--swd-ink); font-family: var(--swd-head); text-transform: uppercase; letter-spacing: .5px; font-size: 14px; padding: 6px 14px; }
.swd-3d-btn:hover:not(:disabled) { background: var(--swd-ink); color: #fff; }
.swd-stage { position: relative; flex: none; }
/* clean raw maple: no grain stripes; the rails shade a little so it reads as the deck's middle section */
.swd-deck {
  position: absolute; top: 0; bottom: 0; border-radius: 3px;
  background: linear-gradient(90deg, #d8b683, #ead0a4 30%, #e3c595 70%, #d3ad78);
  box-shadow: inset 6px 0 10px -6px rgba(90,55,20,.35), inset -6px 0 10px -6px rgba(90,55,20,.35), 0 6px 18px rgba(0,0,0,.12);
}
.swd-fabric { position: absolute !important; left: 0; top: 0; }
.swd-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.swd-side { display: grid; gap: 14px; }
.swd-panel { background: var(--swd-panel); border: 1px solid var(--swd-line); border-radius: var(--swd-radius); padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04); }
.swd-field { display: grid; gap: 6px; margin: 0 0 14px; font-size: 13px; color: var(--swd-muted); }
.swd-field > span { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.swd-field output { color: var(--swd-ink); font-variant-numeric: tabular-nums; text-transform: none; }
.swd-input { font: inherit; font-size: 15px; width: 100%; padding: 10px 12px; border: 1px solid #d6d6d6; border-radius: 10px; background: #fff; color: var(--swd-ink); margin-bottom: 12px; }
.swd textarea.swd-input { resize: vertical; }
.swd input[type=range] { width: 100%; accent-color: var(--swd-ink); }
.swd-row { display: flex; gap: 6px; }
.swd-wrap { flex-wrap: wrap; margin-top: 4px; }
.swd-scroll { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.swd-scroll::-webkit-scrollbar { display: none; }
.swd-scroll > * { flex: none; }
.swd-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; margin: 10px 0 12px; cursor: pointer; line-height: 1.4; }
.swd-check input { margin-top: 1px; width: 20px; height: 20px; accent-color: var(--swd-ink); flex: none; }
.swd-notice { display: grid; gap: 4px; background: var(--swd-soft); border: 0; border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: #333; }
.swd-notice strong { font-size: 13.5px; color: var(--swd-ink); }
.swd-upsell { display: flex; gap: 12px; align-items: center; border: 1.5px solid var(--swd-line); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; cursor: pointer; }
.swd-upsell:hover, .swd-upsell:has(input:checked) { border-color: var(--swd-ink); }
.swd-upsell input { width: 20px; height: 20px; accent-color: var(--swd-ink); flex: none; }
.swd-upsell img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; }
.swd-upsell-text { display: grid; gap: 2px; font-size: 13px; color: var(--swd-muted); min-width: 0; }
.swd-upsell-text strong { color: var(--swd-ink); font-size: 14px; }
.swd-small { font-size: 12.5px; color: var(--swd-muted); line-height: 1.5; margin: 10px 0 0; }
.swd-warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.swd-warnings li { font-size: 13px; background: #fff6e0; border: 1px solid #f0d58a; border-radius: 10px; padding: 8px 10px; line-height: 1.4; }
.swd-warnings li.is-block { background: var(--swd-soft); border-color: var(--swd-line); color: var(--swd-muted); }
.swd-status { font-size: 13px; margin: 10px 0 0; min-height: 1em; }
.swd-status.is-error { color: var(--swd-danger); }
.swd-status a { color: var(--swd-ink); }

/* the selected item's tools: icon tiles */
.swd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.swd-tile { flex-direction: column; gap: 4px; border-radius: 12px; min-height: 60px; padding: 8px 4px; font-size: 12px; font-weight: 600; border-width: 1px; }
.swd-tile .swd-ico { width: 22px; height: 22px; }
.swd-tile:hover:not(:disabled) { background: var(--swd-soft); border-color: var(--swd-ink); }
.swd-tile.swd-danger:hover:not(:disabled) { border-color: var(--swd-danger); background: #fdf0f2; }
.swd-arrange { margin-top: 4px; }

.swd-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 2147483002; padding: 16px; }
.swd-modal[hidden] { display: none; }
.swd-modal-box { background: #fff; border-radius: 16px; width: min(900px, 100%); max-height: 88vh; overflow: auto; padding: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.swd-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.swd-modal-head h3 { margin: 0; }

/* design picker */
.swd-lib-box { display: flex; flex-direction: column; overflow: hidden; height: min(780px, 88vh); }
.swd-lib-body { overflow-y: auto; flex: 1; margin: 0 -18px; padding: 0 18px 8px; }
.swd-lib-search { margin-bottom: 8px; }
.swd .swd-lib-h { font-size: 17px; margin: 14px 0 6px; }
.swd-lib-sub { margin: -2px 0 10px; }
.swd-lib-top { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.swd-lib-top .swd-lib-h { margin: 0; }
.swd-back { font: inherit; display: inline-flex; align-items: center; gap: 4px; border: 0; background: var(--swd-soft); border-radius: 99px; padding: 7px 12px 7px 8px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--swd-ink); }
.swd-back .swd-ico { width: 18px; height: 18px; }
.swd-chip { font: inherit; font-size: 13px; border: 1px solid #d6d6d6; background: #fff; color: var(--swd-ink); border-radius: 99px; padding: 7px 13px; cursor: pointer; white-space: nowrap; }
.swd-chip:hover { border-color: var(--swd-ink); }
.swd-chip.is-on { background: var(--swd-ink); color: #fff; border-color: var(--swd-ink); }
.swd-count { opacity: .6; font-variant-numeric: tabular-nums; font-size: .9em; }
.swd-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 10px 0 4px; }
.swd-tpl { font: inherit; border: 2px solid transparent; background: #fff; border-radius: 14px; padding: 8px; cursor: pointer; display: grid; gap: 6px; justify-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s, border-color .15s; }
.swd-tpl:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.1); border-color: var(--swd-ink); }
.swd-tpl-thumb { width: 100%; aspect-ratio: 160 / 300; background: #ead0a4; border-radius: 8px; overflow: hidden; display: block; }
.swd-tpl-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.swd-tpl-thumb img:not([src]) { visibility: hidden; }
.swd-tpl-name { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.25; }
.swd-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; }
.swd-cat { font: inherit; border: 1.5px solid var(--swd-line); background: #fff; border-radius: 14px; padding: 10px; cursor: pointer; display: grid; gap: 8px; text-align: left; color: var(--swd-ink); }
.swd-cat:hover { border-color: var(--swd-ink); }
.swd-cat-pics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; background: var(--swd-soft); border-radius: 10px; padding: 8px; }
.swd-cat-pics img { width: 100%; aspect-ratio: 1; object-fit: contain; opacity: .85; }
.swd-cat-name { font-family: var(--swd-head); font-size: 15px; text-transform: uppercase; letter-spacing: .4px; line-height: 1.2; }
.swd-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; align-content: start; }
.swd-lib-item { font: inherit; font-size: 12px; border: 1.5px solid var(--swd-line); border-radius: 12px; background: #fff; padding: 10px; cursor: pointer; display: grid; gap: 8px; justify-items: center; color: var(--swd-ink); }
.swd-lib-item:hover { border-color: var(--swd-ink); }
.swd-lib-item img { width: 100%; height: 84px; object-fit: contain; }
.swd-lib-item span { font-size: 12px; line-height: 1.25; text-align: center; }
.swd-quick { margin-top: 2px; }

/* 3D view */
.swd-3d-box { width: min(560px, 100%); }
.swd-3d-stage { position: relative; width: 100%; min-height: 320px; background: radial-gradient(ellipse at 50% 40%, #ffffff, #e9e9e9); border-radius: 12px; overflow: hidden; }
.swd-3d-stage canvas { display: block; cursor: grab; }
.swd-3d-stage canvas:active { cursor: grabbing; }
.swd-3d-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.swd-3d-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.swd-3d-note { margin-top: 8px; }

.swd-btn-ai { background: var(--swd-teal); color: #fff; border-color: var(--swd-teal); font-weight: 600; }
.swd-btn-ai:hover:not(:disabled) { filter: brightness(.95); border-color: var(--swd-teal); }
.swd-ai-box { display: grid; gap: 4px; }
.swd-ai-intro { margin: 0 0 8px; }
.swd-ai-box textarea.swd-input { min-height: 80px; }
.swd-ai-box .swd-field { margin-bottom: 6px; }
.swd-ai-ideas { margin: -4px 0 12px; }
.swd-ai-box .swd-btn-cta { width: auto; flex: 1; }
.swd-ai-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
@media (max-width: 560px) { .swd-ai-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.swd-ai-results:empty { display: none; }
.swd-ai-card { border: 1px solid var(--swd-line); border-radius: 12px; padding: 8px; display: grid; gap: 8px; align-content: start; background: #fff; }
.swd-ai-thumb { height: 220px; max-width: 100%; background: #ead0a4; border-radius: 8px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12.5px; color: var(--swd-ink); padding: 6px; overflow: hidden; }
.swd-ai-thumb img { width: 100%; height: 100%; object-fit: contain; }
.swd-ai-label { font-size: 12.5px; color: var(--swd-muted); }
.swd-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(31,31,31,.15); border-top-color: var(--swd-ink); animation: swd-spin 0.9s linear infinite; }
@keyframes swd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .swd-spinner { animation-duration: 3s; } }

.swd-hint { display: block; font-size: 12px; color: var(--swd-muted); margin-top: 2px; text-transform: none; font-weight: 400; letter-spacing: 0; }
.swd-art-tip { margin: -4px 0 12px; }

.swd-deck-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; margin: 0 0 14px; }
.swd-deck-line strong { font-family: var(--swd-head); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* intro video */
.swd { position: relative; }
.swd-intro { position: absolute; inset: 0; z-index: 50; background: rgba(18,22,21,.92); border-radius: var(--swd-radius); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; padding: 28px 16px; transition: opacity .45s; }
.swd-intro.is-closing { opacity: 0; pointer-events: none; }
.swd-intro-frame { position: relative; width: min(1000px, 100%); aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.swd-intro-video { width: 100%; height: 100%; display: block; object-fit: cover; }
.swd-intro-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.18); }
.swd-intro-fill { display: block; height: 100%; width: 0; background: var(--swd-teal); transition: width .25s linear; }
.swd-intro-skip { position: absolute; top: 12px; right: 12px; font: inherit; font-size: 13px; color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.swd-intro-skip:focus-visible { outline: 2px solid var(--swd-teal); outline-offset: 2px; }
.swd-intro-start { position: absolute; left: 50%; bottom: 7%; transform: translate(-50%, 12px); width: auto; padding: 16px 44px; font-size: 18px;
  opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.swd-intro.is-ended .swd-intro-start { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.swd-intro.is-ended .swd-intro-skip, .swd-intro.is-ended .swd-intro-bar { display: none; }
@media (max-width: 600px) { .swd-intro-start { padding: 10px 26px; font-size: 15px; bottom: 5%; } }
.swd-intro-video[hidden], .swd-intro [hidden] { display: none !important; }

/* phones and small tablets */
@media (max-width: 860px) {
  .swd-section > .swd-heading { font-size: 26px; line-height: 1.15; padding: 0 14px; }
  .swd-section > .swd-intro-text { padding: 0 14px; font-size: 14px; }
  .swd { padding: 8px; }
  .swd-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 42px 42px; gap: 6px; }
  .swd-tools:has(.swd-btn-ai) { grid-template-columns: repeat(4, minmax(0, 1fr)) 36px 36px; }
  .swd-tools:has(.swd-btn-ai) .swd-icon { width: 36px; }
  .swd-tools .swd-spacer { display: none; }
  .swd-tools .swd-btn-primary, .swd-tools .swd-btn-ai { padding: 8px 4px; flex-direction: column; gap: 2px; min-height: 54px; border-radius: 14px; }
  .swd-tools .swd-tool span { font-size: 13px; }
  .swd-stage-wrap { padding: 8px; gap: 10px; }
  .swd-btn-sm { min-height: 40px; font-size: 14px; padding: 8px 12px; }
  .swd-tile { min-height: 56px; }
  .swd input[type=range] { height: 32px; }
  .swd-check { font-size: 14px; }
  .swd-check input, .swd-upsell input { width: 22px; height: 22px; }

  /* editing sheet: the selected item's controls, pinned to the bottom of the screen */
  .swd.swd-editing { padding-bottom: calc(42vh + 12px); }
  .swd.swd-editing .swd-props {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483001; margin: 0;
    max-height: 42vh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: 0 -8px 30px rgba(0,0,0,.25);
    padding: 0 14px calc(14px + env(safe-area-inset-bottom));
  }
  .swd-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 1; background: var(--swd-panel); padding: 10px 0 8px; margin-bottom: 4px; }
  .swd-sheet-head h3 { margin: 0; }
}

/* message notice (phones: when the message spot by the basket button is off screen) */
.swd-toast { position: fixed; left: 50%; top: 72px; transform: translateX(-50%); z-index: 2147483002; width: max-content; max-width: calc(100vw - 32px);
  background: var(--swd-ink); color: #fff; font-size: 14px; line-height: 1.35; padding: 10px 14px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.swd-toast.is-error { background: var(--swd-danger); }
.swd-toast[hidden] { display: none; }
@media (max-width: 860px) {
  .swd-modal { padding: 8px; align-items: flex-start; }
  .swd-modal-box { max-height: calc(100vh - 16px); padding: 12px; }
  .swd-lib-box { height: calc(100vh - 16px); }
  .swd-lib-body { margin: 0 -12px; padding: 0 12px 8px; }
  .swd-lib-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .swd-tpl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .swd-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* "please wait" box while a design is saved and added to the basket */
.swd-wait { position: fixed; inset: 0; z-index: 2147483003; background: rgba(20,20,18,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.swd-wait[hidden] { display: none; }
.swd-wait-card { background: #fff; color: var(--swd-ink); border-radius: 14px; padding: 24px 22px; width: min(360px, 100%); text-align: center; display: grid; gap: 10px; justify-items: center; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.swd-wait-card h3 { margin: 4px 0 0; font-size: 18px; }
.swd-wait-step { margin: 0; font-size: 15px; font-weight: 600; min-height: 1.3em; }
.swd-wait-note { margin: 0; font-size: 13.5px; color: var(--swd-muted); line-height: 1.45; }
.swd-wait .swd-spinner { width: 34px; height: 34px; border-width: 4px; border-top-color: var(--swd-ink); }

/* empty deck: where to begin (no starter design) */
.swd-empty-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70%; max-width: 260px; pointer-events: none;
  display: grid; gap: 6px; text-align: center; color: rgba(59,36,20,.75); font-size: 13px; line-height: 1.35; }
.swd-empty-hint strong { font-family: var(--swd-head); font-weight: 500; font-size: 20px; text-transform: uppercase; letter-spacing: .5px; color: rgba(59,36,20,.85); }
.swd-empty-hint[hidden] { display: none; }

/* phones: price and basket button pinned to the bottom (like the board builder's total bar) */
.swd-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147482990; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border-top: 1px solid var(--swd-line); box-shadow: 0 -6px 20px rgba(0,0,0,.08); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
.swd-bar[hidden] { display: none; }
.swd-bar-price { display: grid; line-height: 1.15; }
.swd-bar-price span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--swd-muted); }
.swd-bar-price strong { font-family: var(--swd-head); font-size: 22px; font-weight: 500; }
.swd-btn.swd-bar-btn { background: var(--swd-buy); border-color: var(--swd-buy); color: #fff; }
.swd-bar-btn { font-family: var(--swd-head); font-weight: 500; text-transform: uppercase; letter-spacing: .5px; font-size: 16px; padding: 12px 22px; min-height: 48px; }
@media (max-width: 860px) { .swd { padding-bottom: 80px; } .swd.swd-editing { padding-bottom: calc(42vh + 12px); } }
.swd-cta-why { font-size: 13px; color: var(--swd-muted); text-align: center; margin: 8px 0 0; }
.swd-cta-why[hidden] { display: none; }
.swd-tap-tip { font-size: 13px; color: var(--swd-muted); text-align: center; margin: 8px 0 0; }
.swd-tap-tip[hidden] { display: none; }
@media (min-width: 861px) { .swd-tap-tip { display: none; } }
.swd-props[hidden] { display: none; }
.swd-check.swd-flash { animation: swd-flash 1.6s ease; border-radius: 8px; }
@keyframes swd-flash { 0%, 60% { background: #fff3c4; box-shadow: 0 0 0 6px #fff3c4; } 100% { background: transparent; box-shadow: none; } }
.swd-sheet-head .swd-row { align-items: center; }

/* top-side message add-on */
.swd-upsell-ico { width: 52px; height: 52px; flex: none; border-radius: 8px; background: #ead0a4; color: #3b2416; display: flex; align-items: center; justify-content: center; }
.swd-upsell-ico .swd-ico { width: 26px; height: 26px; }
.swd-upsell[hidden], .swd-msg-panel[hidden] { display: none; }
.swd-msg-panel { border: 1.5px solid var(--swd-ink); border-top: 0; border-radius: 0 0 12px 12px; margin: -14px 0 12px; padding: 14px 12px 10px; }
.swd-msg-panel .swd-input { margin-bottom: 8px; }
.swd-msg-preview { display: block; width: 100%; aspect-ratio: 160 / 60; border-radius: 8px; margin-top: 2px; }

/* basket box */
.swd-order-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.swd-order-head h3 { margin: 0; }
.swd-order-price { font-family: var(--swd-head); font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.swd-order-sub { margin: 2px 0 12px; font-size: 13px; color: var(--swd-muted); }
/* !important: the theme styles every h4 large */
.swd h4.swd-sub-h { font-family: var(--swd-head) !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: .5px; margin: 4px 0 8px !important; color: var(--swd-ink); }
.swd-sub-h[hidden], .swd-total[hidden] { display: none; }
.swd-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--swd-line); padding: 10px 2px 4px; margin: 2px 0 8px; font-size: 14px; }
.swd-total strong { font-family: var(--swd-head); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.swd-order .swd-notice { padding: 10px 12px; font-size: 12.5px; }
/* "Start here" */
.swd-start { font: inherit; width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; color: var(--swd-ink);
  border: 1.5px solid var(--swd-line); border-radius: 12px; padding: 12px; margin: 0 0 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.swd-start:hover { border-color: var(--swd-ink); background: var(--swd-soft); }
.swd-start .swd-ico { width: 26px; height: 26px; padding: 8px; box-sizing: content-box; background: var(--swd-soft); border-radius: 10px; }
.swd-start span { display: grid; gap: 2px; }
.swd-start strong { font-size: 14.5px; }
.swd-start small { font-size: 12.5px; color: var(--swd-muted); }
/* Design / Top switch under the whole-deck picture */
.swd-seg { display: inline-flex; background: #fff; border: 1px solid var(--swd-line); border-radius: 99px; padding: 2px; }
.swd-seg[hidden] { display: none; }
.swd-seg-btn { font: inherit; font-size: 11.5px; font-weight: 600; border: 0; background: none; color: var(--swd-muted); padding: 5px 9px; border-radius: 99px; cursor: pointer; }
.swd-seg-btn.is-on { background: var(--swd-ink); color: #fff; }
.swd-nowrap { white-space: nowrap; }
@media (max-width: 560px) { .swd-seg-btn { font-size: 10.5px; padding: 4px 7px; } }

/* two clear starts: a ready-made design, or design your own */
.swd-tool-ready { background: var(--swd-teal); border-color: var(--swd-teal); }
.swd-tool-ready:hover:not(:disabled) { background: #008f7a; border-color: #008f7a; }
.swd-tools-or { font-size: 13px; color: var(--swd-muted); margin: 0 2px 0 6px; white-space: nowrap; }
.swd-empty-hint { pointer-events: none; width: 82%; max-width: 280px; gap: 8px; }
.swd-empty-hint strong { margin-bottom: 4px; }
.swd-empty-hint small { font-size: 12px; color: rgba(59,36,20,.75); margin: -2px 0 6px; line-height: 1.3; }
.swd-empty-btn { pointer-events: auto; width: 100%; font-family: var(--swd-head); font-weight: 500; font-size: 15px; letter-spacing: .4px; text-transform: uppercase; }
.swd-empty-btn.swd-btn-primary { background: var(--swd-teal); border-color: var(--swd-teal); }
.swd-empty-own { background: #fff; border-color: var(--swd-ink); color: var(--swd-ink); }
.swd-empty-own:hover:not(:disabled) { background: var(--swd-ink); color: #fff; }
.swd-tips { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--swd-muted); line-height: 1.4; }
@media (max-width: 860px) {
  .swd-tools { grid-template-columns: repeat(3, minmax(0, 1fr)) 42px 42px; }
  .swd-tools .swd-tool-ready { grid-column: 1 / -1; flex-direction: row; gap: 8px; min-height: 48px; border-radius: 99px; }
  .swd-tools .swd-tool-ready span { font-size: 15px; }
  .swd-tools-or { grid-column: 1 / -1; text-align: center; margin: 2px 0 -2px; }
  .swd-empty-btn { font-size: 12px; padding: 7px 8px; min-height: 38px; gap: 5px; letter-spacing: .2px; }
  .swd-empty-btn .swd-ico { width: 16px; height: 16px; }
  .swd-empty-hint { width: 76%; gap: 5px; }
  .swd-empty-hint strong { font-size: 14px; line-height: 1.15; }
  .swd-empty-hint small { font-size: 10.5px; }
}

/* the basket bar on computers too: centred, with room left for it at the bottom of the designer */
.swd.swd-has-bar { padding-bottom: 84px; }
@media (min-width: 861px) {
  .swd-bar { justify-content: center; gap: 28px; padding: 12px 24px; }
  .swd-bar-price { text-align: right; }
}