/* =====================================================================
   Nexly — self-contained UI mockups (browsers, phones, gauges, editors)
   Pure CSS/HTML so the "fast, no-bloat" theme ships zero heavy images.
   ===================================================================== */

/* ---- Browser window frame ---- */
.mock{--mb:#e7ebf1;font-family:var(--font-body);color:#334155;position:relative}
.mock-browser{background:#fff;border:1px solid var(--mb);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-md)}
.mock-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#f7f8fb;border-bottom:1px solid var(--mb)}
.mock-bar .tl{display:flex;gap:6px}
.mock-bar .tl i{width:10px;height:10px;border-radius:50%;background:#e2e6ee;display:block}
.mock-bar .tl i:nth-child(1){background:#ff5f57}
.mock-bar .tl i:nth-child(2){background:#febc2e}
.mock-bar .tl i:nth-child(3){background:#28c840}
.mock-url{flex:1;height:22px;border-radius:7px;background:#eceff4;display:flex;align-items:center;padding:0 10px;font-size:10px;color:#94a3b8}
.mock-body{padding:0}

/* ---- Mini storefront inside a browser ---- */
.store{background:#fff;font-size:11px}
.store-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #eef1f6}
.store-nav .logo{font-family:var(--font-serif);font-style:italic;font-weight:600;color:#171717;font-size:14px;letter-spacing:.02em}
.store-nav .links{display:flex;gap:14px;color:#64748b;font-weight:500;font-size:10px}
.store-nav .icons{display:flex;gap:8px}
.store-nav .icons i{width:13px;height:13px;border-radius:4px;background:#eef1f6;display:block}
.store-hero{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 16px;align-items:center;background:linear-gradient(120deg,#faf7f2,#f2eee7)}
.store-hero h5{font-family:var(--font-serif);font-style:italic;font-weight:600;color:#1f2937;font-size:17px;line-height:1.15;margin-bottom:8px}
.store-hero p{color:#78849a;font-size:9.5px;margin-bottom:10px;line-height:1.4}
.store-hero .cta{display:inline-block;background:#171717;color:#fff;font-size:9px;font-weight:600;padding:6px 12px;border-radius:6px}
.store-hero .img{aspect-ratio:1/.9;border-radius:10px;background:
  radial-gradient(circle at 65% 35%,#cdd7c9,transparent 55%),
  linear-gradient(150deg,#dfe6da,#c8d2c2)}
.store-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 16px}
.store-strip-title{padding:12px 16px 0;text-align:center;font-family:var(--font-display);font-weight:700;color:#1f2937;font-size:12px}
.prod{border:1px solid #f0f2f6;border-radius:8px;overflow:hidden;background:#fff}
.prod .ph{aspect-ratio:1/1;background:linear-gradient(150deg,#eef1f6,#e2e7f0)}
.prod .meta{padding:7px 8px}
.prod .nm{height:6px;width:80%;border-radius:3px;background:#e7ebf1;margin-bottom:5px}
.prod .pr{height:6px;width:40%;border-radius:3px;background:#171717;opacity:.7}
.store-badges{display:flex;justify-content:space-around;padding:11px 16px;border-top:1px solid #eef1f6;background:#fbfcfe}
.store-badges span{display:flex;align-items:center;gap:5px;color:#94a3b8;font-size:8.5px;font-weight:500}
.store-badges span::before{content:"";width:11px;height:11px;border-radius:50%;background:#eef1f6}

/* palette variants for the showcase strip */
.store.v-rose .store-hero{background:linear-gradient(120deg,#fdeef1,#fbe0e7)}
.store.v-rose .store-hero .img{background:radial-gradient(circle at 60% 40%,#f3c2cf,transparent 55%),linear-gradient(150deg,#f6d3dc,#eeb9c8)}
.store.v-rose .store-hero .cta{background:#c4415f}
.store.v-rose .store-hero h5{color:#b03a56}
.store.v-sand .store-hero{background:linear-gradient(120deg,#141210,#2a2723)}
.store.v-sand .store-hero h5{color:#f4d9a0;font-style:italic}
.store.v-sand .store-hero p{color:#c9bfae}
.store.v-sand .store-hero .cta{background:#caa15a}
.store.v-sand .store-hero .img{background:radial-gradient(circle at 60% 40%,#5c503c,transparent 60%),linear-gradient(150deg,#3a352c,#221f19)}
.store.v-blue .store-hero{background:linear-gradient(120deg,#eaf1fb,#dbe7f8)}
.store.v-blue .store-hero .img{background:radial-gradient(circle at 60% 40%,#b7cdec,transparent 55%),linear-gradient(150deg,#cbdaf1,#aec6e8)}
.store.v-blue .store-hero .cta{background:#2f5fd0}
.store.v-blue .store-hero h5{color:#2a52ad}

/* ---- Phone frame ---- */
.mock-phone{width:250px;max-width:100%;margin-inline:auto;background:#171717;border-radius:34px;padding:10px;box-shadow:var(--shadow-lg)}
.mock-phone .screen{background:#fff;border-radius:26px;overflow:hidden;position:relative}
.mock-phone .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:44%;height:16px;background:#171717;border-radius:0 0 12px 12px;z-index:2}
.pdp{font-size:11px}
.pdp .top{display:flex;align-items:center;justify-content:space-between;padding:20px 14px 8px;border-bottom:1px solid #f0f2f6}
.pdp .top .logo{font-family:var(--font-display);font-weight:800;letter-spacing:.05em;font-size:11px;color:#171717}
.pdp .top i{width:12px;height:12px;border-radius:4px;background:#eef1f6;display:inline-block;margin-left:6px}
.pdp .img{aspect-ratio:1/1;margin:12px 14px;border-radius:12px;background:radial-gradient(circle at 60% 42%,#e7ddd0,transparent 58%),linear-gradient(150deg,#f4efe7,#e7ded1)}
.pdp .info{padding:0 14px 12px}
.pdp .badge{display:inline-block;font-size:8px;font-weight:700;color:#171717;background:#eef1f6;padding:3px 7px;border-radius:5px;margin-bottom:7px}
.pdp .title{font-family:var(--font-display);font-weight:700;color:#1f2937;font-size:13px;margin-bottom:5px}
.pdp .stars{color:#f5b03e;font-size:9px;letter-spacing:1px;margin-bottom:6px}
.pdp .price{font-weight:700;color:#171717;font-size:13px;margin-bottom:10px}
.pdp .opts{display:flex;gap:6px;margin-bottom:12px}
.pdp .opts span{flex:1;height:22px;border-radius:6px;border:1px solid #e7ebf1}
.pdp .opts span:first-child{border-color:#171717;border-width:1.5px}
.pdp .atc{background:#166534;color:#fff;text-align:center;font-size:10px;font-weight:600;padding:9px;border-radius:8px;margin-bottom:6px}
.pdp .pay{background:#5a31f4;color:#fff;text-align:center;font-size:10px;font-weight:600;padding:9px;border-radius:8px}

/* ---- Performance gauge ---- */
.mock-perf{padding:22px}
.gauge{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;
  background:conic-gradient(#12b76a 0 96%, #e6f4ec 96% 100%);position:relative}
.gauge::before{content:"";position:absolute;inset:12px;border-radius:50%;background:#fff}
.gauge b{position:relative;font-family:var(--font-display);font-weight:800;font-size:32px;color:#12b76a}
.mock-perf .plabel{text-align:center;font-weight:600;color:#334155;font-size:13px;margin-bottom:18px}
.cwv{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.cwv .c{text-align:center}
.cwv .c .k{font-size:9px;color:#94a3b8;margin-bottom:6px}
.cwv .c .v{font-weight:700;color:#12b76a;font-size:15px}
.cwv .c .track{height:5px;border-radius:3px;background:#e6f4ec;margin-top:7px;position:relative;overflow:hidden}
.cwv .c .track::after{content:"";position:absolute;left:0;top:0;bottom:0;width:30%;background:#12b76a;border-radius:3px}
.audits{margin-top:18px;border-top:1px solid #eef1f6;padding-top:12px;display:flex;flex-direction:column;gap:9px}
.audits .a{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#64748b}
.audits .a b{color:#12b76a;font-weight:700}
.audits .a .g{width:9px;height:9px;border-radius:50%;background:#12b76a;margin-right:6px;display:inline-block}

/* ---- Code editor (Hydrogen) ---- */
.mock-code{background:#0b1120;border:1px solid #1e293b;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg)}
.mock-code .cbar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#111a2e;border-bottom:1px solid #1e293b}
.mock-code .cbar .tl i{width:10px;height:10px;border-radius:50%;display:block}
.mock-code .cbar .tl{display:flex;gap:6px}
.mock-code .cbar .tab{font-size:10px;color:#94a3b8;margin-left:10px;background:#1e293b;padding:4px 10px;border-radius:6px}
.mock-code .cwrap{display:grid;grid-template-columns:110px 1fr;min-height:230px}
.mock-code .tree{border-right:1px solid #1e293b;padding:12px 10px;font-size:9.5px;color:#64748b;display:flex;flex-direction:column;gap:8px}
.mock-code .tree .f{color:#94a3b8}
.mock-code .tree .f.act{color:#7fb0ff}
.mock-code .code{padding:14px 16px;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:10px;line-height:1.9}
.mock-code .code .l{color:#64748b}
.mock-code .code .kw{color:#c792ea}
.mock-code .code .fn{color:#82aaff}
.mock-code .code .st{color:#c3e88d}
.mock-code .code .tg{color:#f07178}

/* ---- Figma -> Shopify composite ---- */
.mock-figma{position:relative;width:100%;min-height:360px;background:linear-gradient(120deg,#eef2f8,#e4ebf5);border-radius:16px;padding:26px}
.mock-figma .win{position:absolute;border-radius:12px;box-shadow:var(--shadow-md);overflow:hidden;border:1px solid var(--mb);background:#fff;width:66%}
.mock-figma .win-a{top:26px;left:22px;z-index:1}
.mock-figma .win-b{bottom:26px;right:22px;z-index:2}
.mock-figma .win .mock-bar{padding:8px 10px}
.mock-figma .win .store-hero{padding:12px}
.mock-figma .fmark,.mock-figma .smark{position:absolute;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;box-shadow:var(--shadow-md);z-index:4;background:#fff;font-weight:800;font-size:1.1rem}
.mock-figma .fmark{top:14px;right:118px}
.mock-figma .fmark svg{width:24px;height:24px}
.mock-figma .smark{top:60px;right:24px;background:#96bf48;color:#fff}
.mock-figma .arrow{position:absolute;top:26px;right:64px;z-index:3;color:#171717}
.mock-figma .arrow svg{width:52px;height:38px}

/* ---- Theme editor (sidebars) ---- */
.mock-editor .ed-wrap{display:grid;grid-template-columns:120px 1fr 130px;min-height:250px;font-size:9px}
.mock-editor .ed-side{border-right:1px solid #eef1f6;padding:12px 10px;display:flex;flex-direction:column;gap:9px;color:#64748b}
.mock-editor .ed-side.r{border-right:0;border-left:1px solid #eef1f6}
.mock-editor .ed-side .lbl{font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:#aab3c5;font-weight:700;margin-bottom:2px}
.mock-editor .ed-side .row{display:flex;align-items:center;gap:6px}
.mock-editor .ed-side .row.act{color:#171717;font-weight:600;background:#eef2fb;margin:0 -6px;padding:4px 6px;border-radius:5px}
.mock-editor .ed-side .row i{width:9px;height:9px;border-radius:3px;background:#e7ebf1;display:block}
.mock-editor .ed-side .field{height:16px;border-radius:5px;background:#f3f5f9;border:1px solid #eef1f6}
.mock-editor .ed-canvas{background:#f7f8fb;padding:14px;overflow:hidden}
.mock-editor .ed-canvas .frame{background:#fff;border-radius:8px;border:1px solid #eef1f6;overflow:hidden}

/* ---- Accessibility composite ---- */
.mock-a11y{background:linear-gradient(135deg,#f4f7fb,#eaf0f8);border-radius:16px;padding:24px;position:relative}
.mock-a11y .chip{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--mb);border-radius:7px;padding:6px 9px;font-size:9px;color:#475569;font-weight:600;box-shadow:var(--shadow-xs)}
.mock-a11y .chip .k{width:8px;height:8px;border-radius:50%;background:#12b76a}
.a11y-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.a11y-top .brand{font-family:var(--font-display);font-weight:800;color:#171717;font-size:13px;display:flex;align-items:center;gap:7px}
.a11y-top .brand .s{width:20px;height:20px;border-radius:6px;background:#96bf48;display:grid;place-items:center;color:#fff;font-size:11px}
.a11y-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.a11y-chips{display:flex;flex-direction:column;gap:9px}
.a11y-tab{display:flex;flex-wrap:wrap;gap:6px}
.a11y-tab span{font-size:8px;background:#fff;border:1px solid var(--mb);border-radius:5px;padding:4px 7px;color:#64748b;font-weight:600}
.a11y-flow{display:flex;align-items:center;gap:5px;margin-top:12px;flex-wrap:wrap}
.a11y-flow .s{font-size:8px;background:#171717;color:#fff;border-radius:5px;padding:4px 7px}
.a11y-flow .ar{color:#94a3b8}

/* ---- Migration before/after ---- */
.mock-migrate .mg-head{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#f7f8fb;border-bottom:1px solid var(--mb);font-size:10px;color:#64748b}
.mock-migrate .mg-progress{flex:1;height:6px;border-radius:4px;background:#e6f4ec;position:relative;overflow:hidden}
.mock-migrate .mg-progress::after{content:"";position:absolute;inset:0;background:#12b76a;border-radius:4px}
.mock-migrate .mg-done{color:#12b76a;font-weight:700;white-space:nowrap}
.mock-migrate .mg-cols{display:grid;grid-template-columns:1fr 1fr}
.mock-migrate .mg-col{padding:12px}
.mock-migrate .mg-col:first-child{border-right:1px solid #eef1f6}
.mock-migrate .mg-tag{font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;margin-bottom:9px}
.mock-migrate .mg-frame{border:1px solid #eef1f6;border-radius:8px;overflow:hidden}
.mock-migrate .mg-frame.after{border-color:#17171733}

/* generic small store used in editor/migration canvases */
.tiny-store .th{padding:8px 10px;text-align:center;background:linear-gradient(120deg,#faf7f2,#f0ece4)}
.tiny-store .th .h{font-family:var(--font-serif);font-style:italic;font-size:11px;color:#1f2937;margin-bottom:4px}
.tiny-store .th .b{display:inline-block;font-size:7px;background:#171717;color:#fff;padding:3px 7px;border-radius:4px}
.tiny-store .tg{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:8px 10px}
.tiny-store .tg .p{aspect-ratio:1/1.2;border-radius:5px;background:#eef1f6}

@media (max-width:520px){
  .store-grid{grid-template-columns:repeat(2,1fr)}
  .mock-figma .win{width:74%}
}