/* FastSell Themes (fastsell-theme-ui.mjs). The page reuses the Photo and
   Discord Creator layout; this file adds the sample shop, the install code and
   the theme history. The sample shop reads only checked CSS variables and the
   data attributes the page sets from fixed lists. */
.fastsell-theme-page .fs-lead{margin:6px 0 0;max-width:720px;color:#a8a1ad;font-size:13px;line-height:1.55}
.fs-access{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;padding:12px 14px;border-radius:12px;background:rgba(240,68,145,.08);box-shadow:inset 0 0 0 1px rgba(240,68,145,.22);color:#f1dbe7;font-size:12.5px}
.fs-access .fs-access-switch{padding:0;border:0;color:#ff9bc4 !important;font:inherit;font-weight:750;text-decoration:underline;cursor:pointer}
.fastsell-theme-page.studio-locked .photo-creator-panel{opacity:.55;pointer-events:none}
/* Display rules here would otherwise override the hidden attribute: a stale
   install code must never stay on screen under another theme. */
.fs-access[hidden],.fs-preview[hidden],.fs-code[hidden],.fs-licensed[hidden]{display:none}

/* ---- the sample shop ---- */
.fs-preview{display:grid;gap:12px;width:100%}
.fs-shop{
  --fs-r:9px;--fs-r-lg:14px;--fs-btn-r:9px;--fs-cols:3;--fs-gap:12px;--fs-shadow:0 6px 18px rgba(0,0,0,.18);
  position:relative;overflow:hidden;display:grid;gap:12px;padding:14px;border-radius:18px;
  background:var(--fs-bg);color:var(--fs-text);font-family:var(--fs-body-font);
  box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 0 0 1px var(--fs-border);user-select:none
}
.fs-shop[data-radius="sharp"]{--fs-r:3px;--fs-r-lg:4px}
.fs-shop[data-radius="rounded"]{--fs-r:16px;--fs-r-lg:24px}
.fs-shop[data-buttons="square"]{--fs-btn-r:3px}
.fs-shop[data-buttons="pill"]{--fs-btn-r:999px}
.fs-shop[data-shadow="none"]{--fs-shadow:none}
.fs-shop[data-shadow="strong"]{--fs-shadow:0 12px 30px rgba(0,0,0,.38)}
.fs-shop[data-grid="2"]{--fs-cols:2}
.fs-shop[data-grid="4"]{--fs-cols:4}
.fs-shop[data-density="compact"]{--fs-gap:8px;gap:9px}
.fs-shop-watermark{position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:2;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:700 10px/1.3 Inter,system-ui,sans-serif;letter-spacing:.02em;pointer-events:none}
.fs-shop-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 2px;padding-inline-end:150px}
.fs-shop[data-header="centered"] .fs-shop-header{flex-direction:column;justify-content:center;padding-inline-end:0;padding-block-start:22px}
.fs-shop-brand{display:flex;align-items:center;gap:9px;min-width:0}
.fs-shop-logo{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--fs-r);background:var(--fs-primary);color:var(--fs-on-primary);font-family:var(--fs-heading-font);font-weight:var(--fs-heading-weight);font-size:14px}
.fs-shop-name{overflow:hidden;font-family:var(--fs-heading-font);font-weight:var(--fs-heading-weight);font-size:15px;white-space:nowrap;text-overflow:ellipsis}
.fs-shop-nav{display:flex;gap:8px}
.fs-shop-bar{display:block;width:34px;height:7px;border-radius:99px;background:var(--fs-muted);opacity:.45}
.fs-shop-bar.wide{width:72%}
.fs-shop-banner{display:grid;justify-items:start;gap:6px;padding:22px;border-radius:var(--fs-r-lg);background:var(--fs-banner);color:var(--fs-banner-text)}
.fs-shop[data-header="centered"] .fs-shop-banner{justify-items:center;text-align:center}
.fs-shop-banner h3{margin:0;font-family:var(--fs-heading-font);font-weight:var(--fs-heading-weight);font-size:22px;line-height:1.15;color:inherit}
.fs-shop[data-scale="compact"] .fs-shop-banner h3{font-size:19px}
.fs-shop[data-scale="large"] .fs-shop-banner h3{font-size:27px}
.fs-shop-banner p{margin:0;font-size:12.5px;line-height:1.45;color:inherit;opacity:.92}
.fs-shop[data-heading-case="uppercase"] .fs-shop-name,.fs-shop[data-heading-case="uppercase"] .fs-shop-banner h3{text-transform:uppercase;letter-spacing:.04em}
.fs-shop-button{margin-block-start:6px;padding:8px 15px;border-radius:var(--fs-btn-r);background:var(--fs-primary);color:var(--fs-on-primary);font-size:12px;font-weight:750}
.fs-shop[data-button-style="outline"] .fs-shop-button{background:transparent;color:var(--fs-banner-text);box-shadow:inset 0 0 0 2px currentColor}
.fs-shop[data-button-style="soft"] .fs-shop-button{background:color-mix(in srgb,var(--fs-banner-text) 16%,transparent);color:var(--fs-banner-text)}
.fs-shop[data-banner="none"] .fs-shop-button{display:none}
.fs-shop[data-uppercase="1"] .fs-shop-button{text-transform:uppercase;letter-spacing:.06em}
.fs-shop-grid{display:grid;grid-template-columns:repeat(var(--fs-cols),minmax(0,1fr));gap:var(--fs-gap)}
.fs-shop-card{display:grid;gap:7px;padding:8px;border-radius:var(--fs-r);background:var(--fs-surface)}
.fs-shop[data-card="minimal"] .fs-shop-card{padding:0;background:transparent}
.fs-shop[data-card="bordered"] .fs-shop-card{box-shadow:inset 0 0 0 1px var(--fs-border)}
.fs-shop[data-card="elevated"] .fs-shop-card{box-shadow:var(--fs-shadow)}
.fs-shop-media{aspect-ratio:1;border-radius:calc(var(--fs-r) - 2px);background:linear-gradient(var(--fs-tilt,135deg),color-mix(in srgb,var(--fs-accent) 55%,var(--fs-surface)),color-mix(in srgb,var(--fs-primary) 35%,var(--fs-bg)))}
.fs-shop-price-row{display:flex;align-items:center;gap:7px}
.fs-shop-price{color:var(--fs-text);font-size:13px;font-variant-numeric:tabular-nums}
.fs-shop-sale{color:var(--fs-sale);font-size:11px;font-weight:800}

.fs-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.fs-swatches{display:flex;flex-wrap:wrap;gap:6px}
.fs-swatch{width:24px;height:24px;border-radius:8px;background:var(--fs-swatch);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.fs-fonts{margin:0;color:#a8a1ad;font-size:12px}
.fs-fonts strong{color:#e9e2ee}

/* ---- install ---- */
.fs-panel .fs-code-button{margin-block-start:4px}
.fs-code{display:grid;gap:10px;margin-block-start:12px;padding:12px;border-radius:12px;background:#120f16;border:1px dashed rgba(255,126,184,.38)}
.fs-code code{display:block;color:#ffd1e6;font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all;user-select:all}
.fs-code-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.fs-code-actions .fs-copy{min-height:34px;padding:0 14px;border:0 !important;border-radius:10px;background:#f04491 !important;color:#fff !important;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.fs-code-actions .fs-copy:hover,.fs-code-actions .fs-copy:focus-visible{background:#ff5aa5 !important}
.fs-code-actions .fs-copy:focus-visible{outline:2px solid #fff !important;outline-offset:2px}
.fs-code-actions small{color:#a8a1ad;font-size:11.5px}
.fs-licensed{margin:10px 0 0;color:#9ed4ae;font-size:12px;font-weight:700}
.fs-license{margin:10px 0 0;color:#8f8895;font-size:11.5px;line-height:1.5}

/* ---- history ---- */
.fs-history{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.fs-history .fs-history-card{display:grid;gap:8px;padding:10px;border:0;border-radius:14px;background:#141118 !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06) !important;color:#ece6f0;font:inherit;text-align:start;cursor:pointer}
.fs-history .fs-history-card:hover,.fs-history .fs-history-card:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,126,184,.35) !important}
.fs-history .fs-history-card.active{box-shadow:inset 0 0 0 1px rgba(255,126,184,.7) !important}
.fs-history .fs-history-card:focus-visible{outline:2px solid #ff7eb6 !important;outline-offset:2px}
.fs-history-strip{display:flex;height:28px;overflow:hidden;border-radius:9px}
.fs-history-strip span{flex:1;background:var(--fs-swatch)}
.fs-history-card strong{overflow:hidden;font-size:12.5px;white-space:nowrap;text-overflow:ellipsis}
.fs-history-installed{color:#9ed4ae;font-size:11px;font-weight:750}
.fs-history-empty{margin:0;color:#8f8895;font-size:12.5px}

@media (max-width:720px){
  .fs-shop{padding:10px}
  .fs-shop-header{padding-inline-end:0;padding-block-start:22px}
  .fs-shop-nav{display:none}
  .fs-shop[data-grid="4"]{--fs-cols:2}
  .fs-shop[data-grid="3"]{--fs-cols:2}
}