/* ==========================================================================
   Sign designer (design.html) + "Your design" card on the quote page.
   Structure and a neutral default look. Every colour, radius and shadow is a
   custom property with a fallback, so a theme restyles it in its own main.css:
     :root { --d-accent: #e8650a; --d-surface: #fff; ... }
     [data-mode="dark"] { --d-surface: #16191f; ... }
   Public tokens: --d-surface, --d-surface-2, --d-text, --d-muted, --d-line,
   --d-accent, --d-accent-text, --d-focus, --d-stage, --d-stage-dark,
   --d-radius, --d-radius-sm, --d-shadow.
   ========================================================================== */
.ssd, .design-card, .section--designer-how {
  --_surface: var(--d-surface, #ffffff);
  --_surface-2: var(--d-surface-2, #f3f5f7);
  --_text: var(--d-text, #1b1f24);
  --_muted: var(--d-muted, #56616b);
  --_line: var(--d-line, #d3d9df);
  --_accent: var(--d-accent, #c2410c);
  --_accent-text: var(--d-accent-text, #ffffff);
  --_focus: var(--d-focus, #2563eb);
  --_stage: var(--d-stage, #e7eaee);
  --_stage-dark: var(--d-stage-dark, #0e1014);
  --_radius: var(--d-radius, 14px);
  --_radius-sm: var(--d-radius-sm, 9px);
  --_shadow: var(--d-shadow, 0 10px 30px rgba(15, 23, 42, .10));
  --_sel: var(--d-selection, #2d8cff);
  --_warn: var(--d-warn, #b45309);
  --_warn-bg: var(--d-warn-bg, #fef3c7);
}
[data-mode="dark"] .ssd, [data-mode="dark"] .design-card, [data-mode="dark"] .section--designer-how {
  --_surface: var(--d-surface, #15181d);
  --_surface-2: var(--d-surface-2, #1e222a);
  --_text: var(--d-text, #eef1f5);
  --_muted: var(--d-muted, #a9b2bd);
  --_line: var(--d-line, #363c47);
  --_accent: var(--d-accent, #ff8a3d);
  --_accent-text: var(--d-accent-text, #16181c);
  --_focus: var(--d-focus, #8ab8ff);
  --_stage: var(--d-stage, #0b0d10);
  --_shadow: var(--d-shadow, 0 12px 32px rgba(0, 0, 0, .5));
  --_sel: var(--d-selection, #5aa7ff);
  --_warn: var(--d-warn, #f59e0b);
  --_warn-bg: var(--d-warn-bg, #3a2a0c);
}

/* ---------- layout: phone = preview on top (sticky), desktop = preview left ---------- */
.section--designer { padding-top: clamp(1rem, 3vw, 2rem); }
.ssd { display: grid; gap: 1rem; align-items: start; }
.ssd > *, .ssd__controls > * { min-width: 0; }
.ssd fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ssd legend { padding: 0; }
.ssd legend:not(.visually-hidden) { width: 100%; text-align: start; } /* follows its own direction: Urdu legends sit right like the other labels */
.ssd__preview {
  position: sticky; top: var(--header-total, 60px); z-index: 6;
  margin: 0 calc(-1 * var(--gutter, 16px)); padding: .5rem var(--gutter, 16px) .45rem;
  background: var(--_surface); color: var(--_text); border-bottom: 1px solid var(--_line); box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
}
.page-head--designer { padding-top: clamp(1.25rem, 4vw, 2.5rem); padding-bottom: clamp(.5rem, 2vw, 1.25rem); }
.page-head--designer h1 { margin-bottom: .4em; }
.page-head--designer .lead { margin-bottom: 0; }
.ssd__stage { --_smax: clamp(170px, 31vh, 340px); position: relative; width: min(100%, calc(var(--_smax) * var(--ssd-ar, 1.5))); margin-inline: auto; aspect-ratio: var(--ssd-ar, 1.5); min-height: 150px; max-height: var(--_smax); border-radius: var(--_radius-sm); overflow: hidden; background: var(--_stage); }
.ssd__stage.is-dark { background: var(--_stage-dark); }
.ssd--compact .ssd__stage { --_smax: clamp(130px, 22vh, 220px); }
.ssd__svg { display: block; width: 100%; height: 100%; max-width: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ssd__controls { display: grid; gap: .75rem; }
@media (min-width: 900px) {
  .ssd { grid-template-columns: minmax(0, 1.45fr) minmax(330px, 1fr); gap: 1.5rem; }
  .ssd__preview { top: calc(var(--header-total, 68px) + 12px); margin: 0; padding: .7rem; border: 1px solid var(--_line); border-radius: var(--_radius); box-shadow: var(--_shadow); }
  .ssd__stage { --_smax: max(240px, calc(100vh - var(--header-total, 68px) - 190px)); min-height: 240px; }
}

/* ---------- the drawing ---------- */
.ssd-line { cursor: grab; touch-action: none; outline: none; }
.ssd-line:active { cursor: grabbing; }
.ssd-sel { stroke: var(--_sel); stroke-width: 1.5px; stroke-dasharray: 5 4; pointer-events: none; }
.ssd-sel--off { stroke: none; pointer-events: all; }
.ssd-line:focus-visible .ssd-sel { stroke-width: 3px; stroke-dasharray: none; }
.ssd-logo.is-sel .ssd-sel { stroke: var(--_sel); }
@media (prefers-reduced-motion: no-preference) {
  .ssd-flicker { animation: ssd-flicker 4.5s infinite; }
  @keyframes ssd-flicker { 0%, 18%, 22%, 24%, 53%, 57%, 100% { opacity: 1; } 20%, 23%, 55% { opacity: .45; } }
}
.ssd__busy { position: absolute; top: .5rem; left: .5rem; display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .3rem .7rem; border-radius: 999px; background: rgba(10, 12, 16, .72); color: #fff; font-size: .78rem; font-weight: 600; }
.ssd__spinner { width: 12px; height: 12px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: ssd-spin .8s linear infinite; }
@keyframes ssd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ssd__spinner { animation: none; } }

/* ---------- toolbar + size line under the preview ---------- */
.ssd__bar { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.ssd-tool { display: inline-flex; align-items: center; gap: .35rem; min-height: 38px; padding: .3rem .7rem; border: 1.5px solid var(--_line); border-radius: 999px; background: var(--_surface); color: var(--_text); font: inherit; font-size: .85rem; font-weight: 600; line-height: 1.1; cursor: pointer; }
.ssd-tool .icon { width: 17px; height: 17px; }
.ssd-tool:hover:not(:disabled) { border-color: var(--_text); }
.ssd-tool[aria-pressed="true"] { background: var(--_accent); border-color: var(--_accent); color: var(--_accent-text); }
.ssd-tool:disabled { opacity: .45; cursor: not-allowed; }
.ssd__dims { margin: .45rem 0 0; font-size: .84rem; line-height: 1.4; color: var(--_muted); }
.ssd__hint { margin: .3rem 0 0; font-size: .78rem; color: var(--_muted); }
.ssd__warn { margin: .4rem 0 0; padding: .35rem .6rem; border-inline-start: 3px solid var(--_warn); border-radius: 6px; background: var(--_warn-bg); color: var(--_text); font-size: .82rem; font-weight: 600; line-height: 1.4; }
.ssd__warn:empty { display: none; }
.ssd-note--warn { border-color: var(--_warn); background: var(--_warn-bg); }
@media (max-width: 899px) {
  .ssd__dims { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: .78rem; line-height: 1.35; margin-top: .35rem; }
  .ssd__warn { font-size: .78rem; padding: .25rem .5rem; margin-top: .3rem; }
  .ssd__hint { display: none; }
  .ssd-tool { min-height: 36px; padding: .25rem .6rem; font-size: .8rem; }
  .ssd__bar { flex-wrap: nowrap; }
  [data-undo] span, [data-redo] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  [data-undo], [data-redo] { padding: .25rem .55rem; }
}
@media (max-width: 359px) { .ssd-tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ssd-tool { padding: .25rem .55rem; } }

/* ---------- control groups ---------- */
.ssd-group, .ssd-send { background: var(--_surface); color: var(--_text); border: 1px solid var(--_line); border-radius: var(--_radius); }
.ssd-group__head { display: flex; align-items: center; gap: .6rem; min-height: 50px; padding: .7rem 1rem; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.02rem; line-height: 1.25; border-radius: var(--_radius); }
.ssd-group__head::-webkit-details-marker { display: none; }
.ssd-group__head::after { content: ''; flex: none; margin-inline-start: auto; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.ssd-group[open] > .ssd-group__head::after { transform: translateY(2px) rotate(-135deg); }
.ssd-group__head:focus-visible { outline: 3px solid var(--_focus); outline-offset: 2px; }
.ssd-group__num { display: inline-grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--_accent); color: var(--_accent-text); font-size: .8rem; font-weight: 700; }
.ssd-group__body { display: grid; gap: 1rem; padding: .1rem 1rem 1.1rem; }
.ssd-group__body > [data-show] { display: grid; gap: 1rem; }
.ssd-group__body > [hidden] { display: none; }
.ssd legend, .ssd-label { display: block; margin: 0 0 .45rem; font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.3; color: var(--_muted); }
.ssd-field { display: grid; gap: .1rem; margin: 0; min-width: 0; }
.ssd-help { margin: .25rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--_muted); }
.ssd-note { margin: 0; padding: .6rem .8rem; border-left: 3px solid var(--_accent); border-radius: 0 8px 8px 0; background: var(--_surface-2); color: var(--_text); font-size: .83rem; line-height: 1.45; }
.ssd-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.ssd-link { min-height: 36px; padding: .25rem 0; border: 0; background: none; color: inherit; font: inherit; font-size: .88rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.ssd-link:focus-visible, .ssd-step:focus-visible, .ssd-tpl:focus-visible, .ssd-tool:focus-visible, .ssd-icon-btn:focus-visible, .ssd-item__main:focus-visible { outline: 3px solid var(--_focus); outline-offset: 2px; }
.ssd-check { display: inline-flex; align-items: center; gap: .5rem; min-height: 38px; font-size: .9rem; font-weight: 600; cursor: pointer; }
.ssd-check input { flex: none; width: 19px; height: 19px; margin: 0; accent-color: var(--_accent); }
.ssd-check input:focus-visible { outline: 3px solid var(--_focus); outline-offset: 2px; }
.ssd-row--checks { gap: .25rem 1.25rem; }
.ssd-btn-sm { min-height: 42px; padding: .4rem .95rem; font-size: .92rem; }
.ssd-file { position: relative; overflow: hidden; }
.ssd-file input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ssd-file:focus-within { outline: 3px solid var(--_focus); outline-offset: 2px; }

/* sign type tabs */
.ssd-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 560px) { .ssd-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ssd-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-height: 74px; padding: .65rem .7rem; border: 1.5px solid var(--_line); border-radius: var(--_radius-sm); background: var(--_surface-2); font-size: .88rem; font-weight: 700; line-height: 1.2; cursor: pointer; }
.ssd-tab:hover { border-color: var(--_text); }
.ssd-tab__ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--_surface); color: var(--_accent); }
.ssd-tab__ic .icon { width: 18px; height: 18px; }
.ssd-tab.is-on { border-color: var(--_accent); box-shadow: inset 0 0 0 1.5px var(--_accent); background: var(--_surface); }
.ssd-tab.is-on .ssd-tab__ic { background: var(--_accent); color: var(--_accent-text); }
.ssd-tab input, .ssd-seg input, .ssd-font input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ssd-tab:focus-within, .ssd-font:focus-within { outline: 2px solid var(--_focus); outline-offset: 2px; }
@supports selector(:has(*)) {
  .ssd-tab:focus-within, .ssd-font:focus-within { outline: none; }
  .ssd-tab:has(input:focus-visible), .ssd-font:has(input:focus-visible) { outline: 3px solid var(--_focus); outline-offset: 2px; }
}

/* segmented choices (radio buttons that look like pills) */
.ssd-seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.ssd-seg label { position: relative; display: inline-flex; min-width: 0; }
.ssd-seg span { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .85rem; border: 1.5px solid var(--_line); border-radius: 999px; background: var(--_surface); color: var(--_text); font-size: .88rem; font-weight: 600; line-height: 1.2; }
.ssd-seg label:hover span { border-color: var(--_text); }
.ssd-seg input:checked + span { background: var(--_accent); border-color: var(--_accent); color: var(--_accent-text); }
.ssd-seg input:focus-visible + span { outline: 3px solid var(--_focus); outline-offset: 2px; }

/* colour swatches */
.ssd-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.ssd-swatch { position: relative; display: inline-block; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--sw, #888); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); cursor: pointer; }
.ssd-swatch[aria-pressed="true"], .ssd-swatch--custom.is-on { box-shadow: 0 0 0 2px var(--_surface), 0 0 0 4.5px var(--_accent), inset 0 0 0 1px rgba(0, 0, 0, .22); }
.ssd-swatch:focus-visible, .ssd-swatch--custom:focus-within { outline: 3px solid var(--_focus); outline-offset: 5px; }
.ssd-swatches--sm .ssd-swatch { width: 31px; height: 31px; }
.ssd-swatch--match { background: var(--_surface); color: var(--_muted); }
.ssd-swatch--match::after { content: '='; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); font-weight: 700; font-size: .95rem; }
.ssd-swatch--custom { overflow: hidden; background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); }
.ssd-swatch--custom.is-on { background: var(--sw, #888); }
.ssd-swatch--custom input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; opacity: 0; cursor: pointer; }
.ssd-swatches.is-off { opacity: .55; }

/* lines of lettering */
.ssd-lines { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.ssd-item { display: flex; align-items: center; gap: .15rem; border: 1.5px solid var(--_line); border-radius: var(--_radius-sm); background: var(--_surface-2); }
.ssd-item.is-sel { border-color: var(--_accent); box-shadow: inset 0 0 0 1px var(--_accent); background: var(--_surface); }
.ssd-item__main { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .55rem; align-items: center; padding: .4rem .55rem; border: 0; border-radius: var(--_radius-sm); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.ssd-item__n { grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; border: 1.5px solid var(--_line); border-radius: 50%; font-size: .74rem; font-weight: 700; font-family: inherit; }
.ssd-item.is-sel .ssd-item__n { border-color: var(--_accent); background: var(--_accent); color: var(--_accent-text); }
.ssd-item__text { overflow: hidden; font-size: 1.12rem; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.ssd-item__meta { overflow: hidden; font-size: .74rem; color: var(--_muted); white-space: nowrap; text-overflow: ellipsis; }
.ssd-item__tools { display: flex; flex: none; align-items: center; padding-right: .15rem; }
.ssd-icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.ssd-icon-btn .icon { width: 18px; height: 18px; }
.ssd-icon-btn:hover:not(:disabled) { background: var(--_line); }
.ssd-icon-btn:disabled { opacity: .28; cursor: default; }
@media (max-width: 420px) { .ssd-item { flex-wrap: wrap; } .ssd-item__main { flex-basis: 100%; } .ssd-item__tools { width: 100%; justify-content: flex-end; padding: 0 .2rem .15rem; } }

/* the selected line's settings */
.ssd-editor { display: grid; gap: 1rem; padding: .9rem; border: 1px solid var(--_line); border-radius: var(--_radius-sm); background: var(--_surface-2); }
.ssd-editor .input { background-color: var(--d-input, var(--_surface)); color: var(--_text); border-color: var(--_line); }
.ssd-script { margin: -.7rem 0 0; font-size: .78rem; color: var(--_muted); }
.ssd-height { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.ssd-num { flex: 0 0 auto; width: 6.2rem; text-align: center; }
.ssd-step { flex: none; width: 44px; height: 44px; border: 1.5px solid var(--_line); border-radius: 50%; background: var(--_surface); color: var(--_text); font: inherit; font-size: 1.35rem; font-weight: 700; line-height: 1; cursor: pointer; }
.ssd-step:hover { border-color: var(--_text); }
.ssd-unit { font-weight: 700; color: var(--_muted); }
.ssd-range { width: 100%; min-height: 32px; margin: 0; accent-color: var(--_accent); }
.ssd-range:disabled { opacity: .45; }
.ssd-range:focus-visible { outline: 3px solid var(--_focus); outline-offset: 2px; }
.ssd-range-labels { display: flex; justify-content: space-between; gap: .5rem; font-size: .72rem; color: var(--_muted); }

/* font picker */
.ssd-fonts { border: 1.5px solid var(--_line); border-radius: var(--_radius-sm); background: var(--_surface); }
.ssd-fonts__current { display: flex; align-items: center; gap: .6rem; min-height: 50px; padding: .45rem .85rem; list-style: none; cursor: pointer; font-size: 1.2rem; line-height: 1.2; }
.ssd-fonts__current::-webkit-details-marker { display: none; }
.ssd-fonts__current::after { content: ''; flex: none; margin-inline-start: auto; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.ssd-fonts[open] > .ssd-fonts__current::after { transform: translateY(2px) rotate(-135deg); }
.ssd-fonts__current:focus-visible { outline: 3px solid var(--_focus); outline-offset: 2px; }
.ssd-fonts__state { font: 600 .75rem/1 system-ui, sans-serif; color: var(--_muted); }
.ssd-fonts__list { display: grid; gap: .8rem; max-height: min(360px, 55vh); overflow-y: auto; padding: .7rem; border-top: 1px solid var(--_line); overscroll-behavior: contain; }
.ssd-fontgroup legend { margin-bottom: .35rem; }
.ssd-fontgroup__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 136px), 1fr)); gap: .4rem; }
.ssd-font { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: .35rem .6rem; border: 1.5px solid var(--_line); border-radius: 8px; background: var(--_surface-2); cursor: pointer; }
.ssd-font:hover { border-color: var(--_text); }
.ssd-font.is-on { border-color: var(--_accent); box-shadow: inset 0 0 0 1.5px var(--_accent); background: var(--_surface); }
.ssd-font__name { overflow: hidden; font-size: 1.22rem; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; }
.ssd-font__label { font-size: .7rem; color: var(--_muted); }
.ssd-font__state { position: absolute; top: 5px; right: 5px; }
.ssd-font.is-loading .ssd-font__state { width: 9px; height: 9px; border: 2px solid var(--_line); border-top-color: var(--_accent); border-radius: 50%; animation: ssd-spin .8s linear infinite; }
.ssd-font.is-failed .ssd-font__name { font-style: italic; }

/* templates */
.ssd-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: .5rem; }
.ssd-tpl { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; min-height: 66px; padding: .6rem .7rem; border: 1.5px solid var(--_line); border-radius: var(--_radius-sm); background: var(--_surface-2); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.ssd-tpl:hover { border-color: var(--_accent); }
.ssd-tpl strong { font-size: .9rem; line-height: 1.25; }
.ssd-tpl small { font-size: .75rem; line-height: 1.35; color: var(--_muted); }

/* size */
.ssd-wh__row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.ssd-wh__row label { display: inline-flex; }
.ssd-wh .input, .ssd-height .input { background-color: var(--d-input, var(--_surface)); color: var(--_text); border-color: var(--_line); }
.ssd-summary { padding: .7rem .8rem; border-radius: var(--_radius-sm); background: var(--_surface-2); }
.ssd-summary__list { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; font-size: .86rem; line-height: 1.4; }
.ssd-summary__text { font-weight: 700; overflow-wrap: anywhere; }
.ssd-summary .ssd-note { margin-top: .6rem; }

/* send */
.ssd-send { display: grid; gap: .65rem; padding: 1rem; border: 2px solid var(--_accent); }
.ssd-send__title { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.ssd-send .ssd-help { margin: 0; }
.ssd-send__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ssd-send__actions .btn { flex: 1 1 auto; }
.ssd-share .input { font-size: .8rem; background-color: var(--d-input, var(--_surface)); color: var(--_text); border-color: var(--_line); }
.ssd-status { margin: 0; min-height: 1.4em; font-size: .88rem; font-weight: 600; line-height: 1.45; }
.ssd-status:empty { display: none; }
.ssd-reset { justify-self: start; }

/* how it works */
.ssd-note--wide { max-width: 760px; margin-top: 1.5rem; }

/* ---------- quote page: "Your design" card ---------- */
.section--design-card { padding-top: clamp(1rem, 3vw, 1.75rem); padding-bottom: .5rem; scroll-margin-top: var(--header-total, 70px); }
.design-card { display: grid; gap: 1rem; padding: 1rem; border: 2px solid var(--_accent); border-radius: var(--_radius); background: var(--_surface); color: var(--_text); box-shadow: var(--_shadow); }
.design-card__img { width: 100%; height: auto; max-height: 420px; object-fit: contain; border-radius: var(--_radius-sm); background: var(--_stage); }
.design-card__body { display: grid; gap: .6rem; align-content: start; min-width: 0; }
.design-card__title { margin: 0; font-size: 1.3rem; line-height: 1.2; }
.design-card__spec { margin: 0; max-height: 260px; overflow: auto; padding: .7rem .8rem; border-radius: var(--_radius-sm); background: var(--_surface-2); font-family: inherit; font-size: .86rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; text-align: start; }
.design-card__note { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--_muted); }
.design-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.design-card__actions .ssd-link { color: var(--_text); }
@media (min-width: 800px) { .design-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; padding: 1.25rem; } }
/* touch (phones, tablets): every control is at least 40 px tall and wide. Last in the file so it wins over the sizes above. */
@media (max-width: 899px), (pointer: coarse) {
  .ssd-tool { min-height: 40px; min-width: 40px; justify-content: center; }
  .ssd-icon-btn { width: 40px; height: 40px; }
  .ssd-swatch, .ssd-swatches--sm .ssd-swatch { width: 40px; height: 40px; }
  .ssd-link, .ssd-check { min-height: 40px; }
  .ssd-range { min-height: 40px; }
  .ssd-seg span { min-height: 42px; }
}
@media print { .ssd__bar, .ssd__controls, .ssd__hint { display: none !important; } .ssd__preview { position: static; } }