/*!
 * SD Skin Picker styles (WO-2026-4510). Vendored byte-for-byte by the front office
 * with sd-skin-picker.js and skins.json; see tools/sd-brand-skin-parity.
 * Every class is .sdsp-* so nothing leaks into the host page. Skin colours come in
 * as CSS vars set by the JS from skins.json, never typed here.
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;600;700;800&family=Archivo:ital,wght@0,800;1,800&family=Playfair+Display:wght@600&display=swap');

.sdsp { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #14182b; }
.sdsp *, .sdsp *::before, .sdsp *::after { box-sizing: border-box; }

/* "Live on your page" */
.sdsp-live { display: flex; align-items: center; gap: 14px; padding: 10px; margin: 0 0 16px; background: #fff; border: 1px solid #e3ded2; border-radius: 14px; }
.sdsp-live-thumb { width: 92px; flex: none; }
.sdsp-live-thumb .sdsp-mini { font-size: 7px; }
.sdsp-live-title { font-weight: 700; font-size: 14px; }
.sdsp-live-sub { font-size: 13px; color: #5b6076; margin-top: 2px; }

/* Steps */
.sdsp-step { margin: 0 0 18px; }
.sdsp-step-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 9px; }
.sdsp-step-t { font-weight: 700; font-size: 14.5px; }
.sdsp-step-r { font-size: 13px; color: #8a90a4; }

/* 1. Looks */
.sdsp-looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .sdsp-looks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sdsp-look { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 2px; padding: 8px 8px 10px; background: #fff; border: 1.5px solid #e3ded2; border-radius: 14px; cursor: pointer; font: inherit; color: inherit; }
.sdsp-look:hover { border-color: #b9b3a5; }
.sdsp-look:focus-visible { outline: 3px solid #1d4e89; outline-offset: 2px; }
.sdsp-look[aria-checked="true"] { border-color: #14182b; box-shadow: 0 0 0 1.5px #14182b; }
.sdsp-look[aria-checked="true"]::after { content: "\2713"; position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: #14182b; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.sdsp-look .sdsp-mini { font-size: 8px; margin-bottom: 7px; }
.sdsp-look-label { font-weight: 700; font-size: 14px; }
.sdsp-look-blurb { font-size: 12px; color: #5b6076; line-height: 1.35; }

/* 2. Colours */
.sdsp-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sdsp-sw { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--sdsp-sw); box-shadow: inset 0 0 0 1px rgba(20,24,43,.18); }
.sdsp-sw:focus-visible { outline: 3px solid #1d4e89; outline-offset: 2px; }
.sdsp-sw[aria-checked="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #14182b; }
.sdsp-sw.is-legacy { outline: 2px dashed rgba(20,24,43,.55); outline-offset: 2px; }
.sdsp-sw.is-legacy[aria-checked="true"] { outline: 2px dashed #14182b; }
.sdsp-note { font-size: 12.5px; color: #5b6076; margin-top: 8px; }
.sdsp-err { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: #fdecea; color: #8a1c12; font-size: 13.5px; font-weight: 600; }

/* The mini storefront. Every colour is a var from skins.json. */
.sdsp-mini { background: var(--sdsp-g); color: var(--sdsp-ink); border-radius: 1em; overflow: hidden; border: 1px solid rgba(20,24,43,.10); }
.sdsp-mini-head { display: flex; align-items: center; gap: .7em; padding: .9em 1.1em; background: var(--sdsp-hb); color: var(--sdsp-hi); border-bottom: 1px solid var(--sdsp-hl); }
.sdsp-mini-mark { width: 2.2em; height: 2.2em; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: var(--sdsp-mr); background: var(--sdsp-a); color: var(--sdsp-on); font-weight: 800; font-size: 1.1em; }
.sdsp-mini-mark.is-logo { background: transparent; }
.sdsp-mini-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sdsp-mini[data-mark="outline"] .sdsp-mini-mark:not(.is-logo) { background: transparent; color: var(--sdsp-a); box-shadow: inset 0 0 0 .18em var(--sdsp-a); }
.sdsp-mini[data-mark="disc"] .sdsp-mini-mark:not(.is-logo) { background: var(--sdsp-on); color: var(--sdsp-a); }
.sdsp-mini[data-mark="frame"] .sdsp-mini-mark:not(.is-logo) { background: transparent; color: var(--sdsp-hi); box-shadow: inset 0 0 0 1px var(--sdsp-hi); font-family: var(--sdsp-disp); font-weight: 600; }
.sdsp-mini-name { font-weight: 700; font-size: 1.15em; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdsp-mini[data-header="black-band"] .sdsp-mini-head { justify-content: center; }
.sdsp-mini[data-header="black-band"] .sdsp-mini-name { font-family: var(--sdsp-disp); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; font-size: 1em; }
.sdsp-mini-body { padding: 1.1em; }
.sdsp-mini-eyebrow { font-size: 1em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sdsp-muted); margin-bottom: .3em; }
.sdsp-mini-h { font-family: var(--sdsp-disp); font-weight: var(--sdsp-dw); font-style: var(--sdsp-ds); letter-spacing: var(--sdsp-dt); font-size: 2em; line-height: 1.05; margin-bottom: .6em; }
.sdsp-mini-field { background: var(--sdsp-s); border: 1px solid var(--sdsp-line); border-radius: var(--sdsp-r); padding: .7em .9em; font-size: 1.1em; color: var(--sdsp-muted); margin-bottom: .5em; }
.sdsp-mini[data-skin="midnight"] .sdsp-mini-field { border-radius: 6px; }
.sdsp-mini-btn { min-height: 1.6em; border-radius: var(--sdsp-r); background: var(--sdsp-a); color: var(--sdsp-on); font-weight: 700; font-size: 1.15em; display: flex; align-items: center; justify-content: center; }
.sdsp-mini--big { font-size: 10px; max-width: 360px; }
.sdsp-mini--big .sdsp-mini-btn { min-height: 3.6em; font-size: 1.5em; margin-top: .5em; }