/* Seller admin > Online store: theme gallery, miniatures and the Customize screen.
   Linked from templates/admin/{themes,customize}.html.twig. Own prefix (.tpv-*, .thm-*, .cz-*)
   so it never collides with the shared admin.css. */

/* -- storefront miniature -------------------------------------------------- */
.tpv-wrap{container-type:inline-size;width:100%}
.tpv{
  --u:calc(100cqw / 42);
  font-size:var(--u);line-height:1.3;width:100%;
  background:var(--p-bg);color:var(--p-text);font-family:var(--p-font);
  border:1px solid rgba(16,24,40,.12);border-radius:.9em;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 18px rgba(16,24,40,.08);
  pointer-events:none;user-select:none;
  aspect-ratio:42/40;display:flex;flex-direction:column;position:relative;
}
.tpv *{box-sizing:border-box}
.tpv-announce{flex:none;background:var(--p-accent);color:var(--p-ink);font-size:.72em;text-align:center;padding:.5em .8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpv[data-announce="dark"] .tpv-announce{flex:none;background:var(--p-dark);color:var(--p-dark-ink)}
.tpv-header{
  flex:none;display:grid;align-items:center;gap:.5em 1em;padding:.75em 1.2em;background:var(--p-hbg);color:var(--p-hink);
  border-bottom:1px solid var(--p-hborder);position:relative;z-index:2;
  grid-template-columns:auto 1fr auto;grid-template-areas:"logo nav tools";
}
.tpv-aside{display:none;grid-area:aside}
.tpv-logo{grid-area:logo;font-family:var(--p-display);font-weight:var(--p-dweight);font-size:1.15em;white-space:nowrap;letter-spacing:-.01em}
.tpv[data-heading="upper"] .tpv-logo{text-transform:uppercase;letter-spacing:.04em;font-size:1em}
.tpv-search{display:none;grid-area:search;height:1.7em;border:1px solid var(--p-hborder);border-radius:var(--p-btn);align-items:center;padding:0 .6em;min-width:0}
.tpv-search i{display:block;width:40%;height:.4em;border-radius:.3em;background:var(--p-hink);opacity:.3}
.tpv-nav{grid-area:nav;display:flex;gap:1em}
.tpv-nav i{font-style:normal;font-size:.78em;font-weight:500}
.tpv[data-heading="upper"] .tpv-nav i{text-transform:uppercase;letter-spacing:.05em;font-size:.68em}
.tpv-tools{grid-area:tools;display:flex;gap:.6em;justify-self:end}
.tpv-tools i{width:.95em;height:.95em;border-radius:50%;border:.15em solid currentColor;opacity:.75}
.tpv-aside i{display:inline-block;width:2.6em;height:.4em;border-radius:.3em;background:var(--p-muted);opacity:.5;margin-right:.4em}
.tpv[data-header="center"] .tpv-header{grid-template-columns:1fr auto 1fr;grid-template-areas:"aside logo tools" "nav nav nav";justify-items:center}
.tpv[data-header="center"] .tpv-aside{display:block;justify-self:start}
.tpv[data-header="center"] .tpv-nav{border-top:1px solid var(--p-hborder);width:100%;justify-content:center;padding-top:.5em}
.tpv[data-header="center"] .tpv-logo{font-size:1.35em}
.tpv[data-header="split"] .tpv-header{grid-template-columns:1fr auto 1fr;grid-template-areas:"nav logo tools"}
.tpv[data-header="split"] .tpv-logo{font-size:1.3em}
.tpv[data-header="search"] .tpv-header{grid-template-columns:auto 1fr auto;grid-template-areas:"logo search tools" "nav nav nav"}
.tpv[data-header="search"] .tpv-search{display:flex}
.tpv[data-header="search"] .tpv-nav{border-top:1px solid var(--p-hborder);padding-top:.4em}
/* a transparent header floats over a dark banner */
.tpv[data-header-style="transparent"][data-hero="collage"] .tpv-header,.tpv[data-header-style="transparent"][data-hero="overlay"] .tpv-header{
  background:transparent;color:#fff;border-color:transparent;margin-bottom:-3.1em;
}
.tpv[data-header-style="transparent"][data-hero="collage"] .tpv-hero,.tpv[data-header-style="transparent"][data-hero="overlay"] .tpv-hero{padding-top:3.4em}

.tpv-hero{position:relative;display:grid;height:11em;flex:none;overflow:hidden}
.tpv[data-hero="overlay"] .tpv-hero{
  align-items:center;color:var(--p-ink);padding:1.6em 1.4em;
  background:radial-gradient(60% 90% at 90% 0%,color-mix(in srgb,var(--p-accent) 84%,var(--p-shade)),transparent 70%),linear-gradient(135deg,var(--p-accent),color-mix(in srgb,var(--p-accent) 58%,var(--p-shade)));
}
.tpv[data-hero="overlay"] .tpv-art,.tpv-seg,.tpv-benefits{display:none}
.tpv[data-hero="split"] .tpv-hero{grid-template-columns:1.1fr 1fr;gap:1.2em;align-items:center;background:var(--p-soft);padding:1.2em 1.4em}
.tpv-copy{display:flex;flex-direction:column;gap:.5em;align-items:flex-start;min-width:0}
.tpv-title{font-family:var(--p-display);font-weight:var(--p-dweight);font-size:1.9em;line-height:1.05;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tpv[data-heading="upper"] .tpv-title{text-transform:uppercase;font-size:2.1em}
.tpv-text{font-size:.8em;opacity:.9;max-width:26em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpv-cta{font-style:normal;font-size:.78em;font-weight:700;padding:.55em 1.3em;border-radius:var(--p-btn);background:var(--p-ink);color:var(--p-shade);margin-top:.3em}
.tpv[data-hero="split"] .tpv-cta,.tpv[data-hero="order"] .tpv-cta{background:var(--p-btn-bg);color:var(--p-btn-ink)}
.tpv-art{position:relative;aspect-ratio:5/4;border-radius:calc(var(--p-radius) * 1.4);background:linear-gradient(135deg,var(--p-accent),color-mix(in srgb,var(--p-accent) 50%,#000));display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:.4em;padding:.4em}
.tpv-art i{border-radius:calc(var(--p-radius) * .7);background:rgba(255,255,255,.55)}
.tpv-art i:first-child{grid-row:1/3;background:rgba(255,255,255,.7)}
.tpv-art i:nth-child(4){display:none}
.tpv[data-theme-key="kids"] .tpv-art{border-radius:48% 52% 46% 54%/55% 45% 55% 45%}
.tpv[data-theme-key="bloom"] .tpv-art{border-radius:999px 999px calc(var(--p-radius) * .5) calc(var(--p-radius) * .5);aspect-ratio:4/5;justify-self:center;height:100%;grid-template-columns:1fr;grid-template-rows:1fr}
.tpv[data-theme-key="bloom"] .tpv-art i:nth-child(n+2){display:none}
.tpv[data-theme-key="bloom"] .tpv-art i:first-child{grid-row:1;border-radius:999px 999px calc(var(--p-radius) * .4) calc(var(--p-radius) * .4)}
/* lookbook collage: three tiles under a dark scrim, title bottom-left */
.tpv[data-hero="collage"] .tpv-hero{align-items:end;color:#fff;padding:0;background:#15151a}
.tpv[data-hero="collage"] .tpv-art{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;padding:0;gap:.2em;grid-template-columns:1.3fr 1fr 1.1fr;background:none}
.tpv[data-hero="collage"] .tpv-art i{border-radius:0;background:linear-gradient(160deg,color-mix(in srgb,var(--p-accent) 55%,#000),color-mix(in srgb,var(--p-accent) 22%,#000))}
.tpv[data-hero="collage"] .tpv-art i:first-child{grid-row:1/3;background:linear-gradient(160deg,color-mix(in srgb,var(--p-accent) 38%,#444),color-mix(in srgb,var(--p-accent) 70%,#000))}
.tpv[data-hero="collage"] .tpv-art i:nth-child(3){background:linear-gradient(120deg,#6a6a72,#2a2a30)}
.tpv[data-hero="collage"] .tpv-art i:nth-child(4){display:block;grid-column:3;grid-row:1/3;background:linear-gradient(200deg,#8a8a92,#333338)}
.tpv[data-hero="collage"] .tpv-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(8,10,14,.78),rgba(8,10,14,.12) 70%)}
.tpv[data-hero="collage"] .tpv-copy{position:relative;z-index:2;padding:0 1.4em 1.2em}
.tpv[data-hero="collage"] .tpv-cta{background:#fff;color:#111}
/* "Order now": soft banner, Delivery / Pickup switch, round dishes */
.tpv[data-hero="order"] .tpv-hero{grid-template-columns:1.2fr 1fr;gap:1em;align-items:center;background:var(--p-soft);padding:1em 1.4em;color:var(--p-text)}
.tpv[data-hero="order"] .tpv-seg{display:inline-grid;grid-template-columns:1fr 1fr;gap:.2em;padding:.25em;border-radius:var(--p-btn);background:var(--p-surface);border:1px solid var(--p-border);width:100%;max-width:15em}
.tpv-seg i{font-style:normal;font-size:.7em;font-weight:700;text-align:center;padding:.4em 0;border-radius:var(--p-radius)}
.tpv-seg i.is-on{background:var(--p-btn-bg);color:var(--p-btn-ink)}
.tpv[data-hero="order"] .tpv-art{background:none;padding:0;aspect-ratio:auto;border-radius:0;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:.6em;align-self:center}
.tpv[data-hero="order"] .tpv-art i{border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--p-accent) 0 26%,#fff 27% 62%,color-mix(in srgb,var(--p-accent) 25%,#fff) 63%);box-shadow:0 .2em .5em rgba(0,0,0,.18);aspect-ratio:1;align-self:center;justify-self:center;width:100%;grid-row:1}
.tpv[data-hero="order"] .tpv-art i:first-child{grid-row:1}
.tpv[data-hero="order"] .tpv-art i:nth-child(n+3){display:none}
.tpv[data-hero="order"] .tpv-text{display:none}
.tpv[data-hero="order"] .tpv-title{font-size:1.6em}
.tpv-benefits{flex:none;display:none;grid-template-columns:repeat(4,1fr);gap:.8em;padding:.7em 1.2em;border-bottom:1px solid var(--p-border)}
.tpv[data-theme-key="bloom"] .tpv-benefits{display:grid;background:var(--p-soft)}
.tpv-benefits i{display:block;height:1.1em;border-radius:.6em;background:linear-gradient(90deg,var(--p-accent) 0 1.1em,transparent 1.1em);opacity:.9;position:relative}
.tpv-benefits i::after{content:"";position:absolute;left:1.5em;top:.3em;right:0;height:.45em;border-radius:.3em;background:var(--p-text);opacity:.35}

.tpv-grid{flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:repeat(var(--p-cols),minmax(0,1fr));gap:.9em;padding:1.1em 1.2em 1.1em}
.tpv-card{min-width:0}
.tpv-card[data-extra]{display:none}
.tpv-img{position:relative;display:block;aspect-ratio:var(--p-ratio);border-radius:var(--p-radius);background:linear-gradient(160deg,var(--p-soft),color-mix(in srgb,var(--p-accent) 45%,var(--p-soft)))}
.tpv-sale{position:absolute;left:.4em;top:.4em;font-style:normal;font-size:.6em;font-weight:700;padding:.15em .6em;border-radius:99px;background:var(--p-sale);color:var(--p-sale-ink)}
.tpv-body{display:block;padding-top:.5em}
.tpv-l{display:block;height:.45em;border-radius:.3em;background:var(--p-text);opacity:.75;width:80%;margin-bottom:.35em}
.tpv-l.s{width:40%;background:var(--p-accent);opacity:.9}
.tpv[data-card="bordered"] .tpv-card{background:var(--p-surface);border:1px solid var(--p-border);border-radius:var(--p-radius);overflow:hidden}
.tpv[data-card="bordered"] .tpv-img{border-radius:0}
.tpv[data-card="bordered"] .tpv-body{padding:.5em .6em .3em}
.tpv[data-card="shadow"] .tpv-card{background:var(--p-surface);border-radius:var(--p-radius);overflow:hidden;box-shadow:0 .1em .3em rgba(16,24,40,.12),0 .5em 1.2em rgba(16,24,40,.1)}
.tpv[data-card="shadow"] .tpv-img{border-radius:0}
.tpv[data-card="shadow"] .tpv-body{padding:.5em .6em .3em}
.tpv[data-card="bubble"] .tpv-card{background:var(--p-surface);border:.18em solid var(--p-border);border-radius:var(--p-radius);padding:.35em}
.tpv[data-card="bubble"] .tpv-img{border-radius:calc(var(--p-radius) * .7)}
.tpv[data-card="bubble"] .tpv-body{padding:.5em .25em .1em}
.tpv[data-card="editorial"] .tpv-img{border-radius:0}
.tpv[data-card="editorial"] .tpv-l{height:.32em;width:60%}
.tpv[data-card="wide"] .tpv-body{padding-top:.7em}
.tpv[data-card="compact"] .tpv-img{border-radius:.25em;box-shadow:0 .1em .25em rgba(0,0,0,.25),0 .4em .8em rgba(0,0,0,.12)}
.tpv[data-card="compact"] .tpv-img::before{content:"";position:absolute;inset:0 auto 0 0;width:.45em;background:linear-gradient(90deg,rgba(0,0,0,.3),transparent)}
.tpv[data-card="soft"] .tpv-card{background:var(--p-surface);border:1px solid var(--p-border);border-radius:var(--p-radius);padding:.35em .35em .2em}
.tpv[data-card="soft"] .tpv-img{border-radius:calc(var(--p-radius) * .55)}
.tpv[data-card="soft"] .tpv-body{text-align:center}
.tpv[data-card="soft"] .tpv-l{margin-inline:auto}
.tpv[data-card="menu"] .tpv-grid{gap:.5em .9em;grid-template-rows:repeat(2,min-content)}
.tpv[data-card="menu"] .tpv-card{display:grid;grid-template-columns:1fr 2.6em;gap:.5em;align-items:center;background:var(--p-surface);border:1px solid var(--p-border);border-radius:var(--p-radius);padding:.45em .5em}
.tpv[data-card="menu"] .tpv-img{grid-column:2;grid-row:1;width:2.6em;aspect-ratio:1;border-radius:50%}
.tpv[data-card="menu"] .tpv-body{grid-column:1;grid-row:1;padding:0}
.tpv[data-card="menu"] .tpv-sale{display:none}
.tpv[data-theme-key="plain"] .tpv-body{text-align:center}
.tpv[data-theme-key="plain"] .tpv-l{margin-inline:auto}
.tpv-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.7em 1.2em;background:var(--p-fbg);color:var(--p-fink);font-size:.8em;border-top:1px solid color-mix(in srgb,var(--p-fink) 14%,var(--p-fbg))}
.tpv-foot b{font-family:var(--p-display);font-weight:var(--p-dweight)}
.tpv-foot span{display:flex;gap:.6em}
.tpv-foot i{display:block;width:2.2em;height:.4em;border-radius:.3em;background:currentColor;opacity:.45}

/* -- theme gallery ------------------------------------------------------------ */
.thm-current{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);overflow:hidden;padding:0}
.thm-current__media{padding:24px;background:var(--surface-3);border-right:1px solid var(--line);display:flex;align-items:center}
.thm-current__info{padding:28px;display:flex;flex-direction:column;gap:14px;justify-content:center;align-items:flex-start}
.thm-name{margin:0;font-size:22px;font-weight:600;letter-spacing:-.01em}
.thm-desc{margin:0;font-size:14.5px;line-height:1.65;color:var(--text-2);max-width:52ch}
.thm-traits{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.thm-traits li{font-size:12.5px;color:var(--text-2);background:var(--surface-3);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.thm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
.thm-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.thm-card__media{padding:16px;background:var(--surface-3);border-bottom:1px solid var(--line)}
.thm-card__body{padding:16px 18px 6px;display:flex;flex-direction:column;gap:8px;flex:1}
.thm-card__body h3{margin:0;font-size:16.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.thm-card__best{font-size:13px;color:var(--muted);margin:0}
.thm-card__actions{display:flex;gap:10px;flex-wrap:wrap;padding:12px 18px 18px}
.thm-card__actions form{flex:1;min-width:140px;margin:0}
.thm-card__actions .btn{width:100%}
.thm-card.is-live{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.thm-note{font-size:13px;color:var(--muted);margin:10px 0 0}

/* -- customize ------------------------------------------------------------------- */
.cz-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;align-items:start}
.cz-preview{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px}
.cz-preview .card{padding:16px}
.cz-form fieldset{border:0;margin:0;padding:0;min-width:0}
.cz-form legend{padding:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px}
.cz-sub{margin:0 0 16px;font-size:13.5px;color:var(--muted)}
.cz-form .card{margin-bottom:18px}
.cz-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cz-row + .cz-row{margin-top:16px}
.cz-swatches{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.cz-swatch{position:relative;width:44px;height:44px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line-2);cursor:pointer;background:var(--c);padding:0}
.cz-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--brand)}
.cz-swatch:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.cz-color{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cz-color input[type=color]{width:64px;height:44px;padding:3px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);cursor:pointer}
.cz-color input[type=text]{width:130px;font-family:inherit}
.cz-range{display:flex;align-items:center;gap:14px}
.cz-range input[type=range]{flex:1;min-height:44px}
.cz-range output{min-width:48px;text-align:right;font-weight:600}
.cz-media{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cz-thumb{width:96px;height:64px;border-radius:8px;border:1px solid var(--line);background:var(--surface-3) center/cover no-repeat;flex:none;display:grid;place-items:center;font-size:11px;color:var(--muted);text-align:center}
.cz-media-controls{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.cz-field-error{color:var(--err);font-size:13px;font-weight:500;margin-top:6px}
.cz-form [aria-invalid="true"]{border-color:var(--err)}
.cz-default{font-size:12.5px;color:var(--muted);font-weight:400}
.cz-actions{position:sticky;bottom:0;background:var(--bg);padding:14px 0;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap;align-items:center;z-index:5}
.cz-actions .spacer{flex:1}
.cz-reset{display:none}

@media (max-width:1100px){.cz-layout{grid-template-columns:minmax(0,1fr)}.cz-preview{position:static;order:-1}}
@media (max-width:860px){.thm-current{grid-template-columns:1fr}.thm-current__media{border-right:0;border-bottom:1px solid var(--line);padding:16px}.thm-current__info{padding:20px}}
@media (max-width:640px){.cz-row{grid-template-columns:1fr}.thm-grid{grid-template-columns:minmax(0,1fr)}}

/* -- customize: colours, typography, benefits (themes-more) ---------------------------------------------------------- */
.cz-sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}
.cz-fast{display:inline-flex;align-items:center;min-height:20px;padding:0 8px;border-radius:99px;background:var(--ok-soft,#E9F7F0);color:var(--ok-ink,#0B5C3B);border:1px solid var(--ok-line,#B7E4CD);font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.cz-fast[hidden]{display:none}
.cz-tag{display:inline-flex;align-items:center;min-height:20px;padding:0 8px;border-radius:99px;background:var(--surface-3);color:var(--text-2);border:1px solid var(--line);font-size:11.5px;font-weight:600;white-space:nowrap}
.cz-palettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0 0 6px}
.cz-palette{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:44px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-md,10px);background:var(--surface);color:var(--text);cursor:pointer;text-align:left;font:inherit}
.cz-palette:hover{border-color:var(--brand-line,var(--brand))}
.cz-palette:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cz-palette.is-active,.cz-palette[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.cz-palette__sw{display:flex;border-radius:99px;overflow:hidden;border:1px solid var(--line-2);width:100%;max-width:120px;height:22px}
.cz-palette__sw i{flex:1}
.cz-palette__name{font-size:13.5px;font-weight:600}
.cz-palette-status{min-height:20px;margin:6px 0 14px;font-size:13px;color:var(--ok-ink,var(--muted))}
.cz-tokens{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}
.cz-token .cz-color{margin-bottom:2px}
.cz-token .hint{margin:4px 0 0}
.cz-contrast{margin:6px 0 0;font-size:12.5px;font-weight:600}
.cz-contrast.is-ok{color:var(--ok-ink,#0B5C3B)}
.cz-contrast.is-warn{color:var(--warn-ink,#7A4705)}
.cz-contrast.is-bad{color:var(--err-ink,#9B2222)}
.cz-check{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md,10px);background:var(--surface-2)}
.cz-check h4{margin:0 0 6px;font-size:14.5px}
.cz-check__sum{margin:0 0 10px;font-size:13.5px;font-weight:600}
.cz-check__sum.is-ok{color:var(--ok-ink,#0B5C3B)}
.cz-check__sum.is-bad{color:var(--err-ink,#9B2222)}
.cz-check__list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.cz-check__row{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto auto;gap:4px 12px;align-items:center;font-size:13px}
.cz-check__sample{display:grid;place-items:center;width:40px;height:28px;border-radius:6px;border:1px solid var(--line-2);font-weight:700;font-size:13px}
.cz-check__ratio{font-variant-numeric:tabular-nums;font-weight:700}
.cz-check__row.is-bad .cz-check__ratio,.cz-check__row.is-bad .cz-check__state{color:var(--err-ink,#9B2222)}
.cz-check__row.is-ok .cz-check__state{color:var(--ok-ink,#0B5C3B)}
.cz-color-actions{margin-top:14px}
@media (max-width:640px){
  .cz-tokens{grid-template-columns:1fr}
  .cz-check__row{grid-template-columns:40px minmax(0,1fr) auto}
  .cz-check__state{grid-column:2}
  .cz-check__row .btn{grid-column:3;grid-row:1 / span 2}
}
/* typography */
.cz-fontrow{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:0 16px;align-items:start;margin-bottom:6px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cz-fontrow:last-of-type{border-bottom:0}
.cz-fontsample{grid-column:1 / -1;margin:0;padding:12px 14px;border-radius:var(--r-md,10px);background:var(--surface-3);border:1px solid var(--line);font-size:20px;line-height:1.35}
.cz-fontrow[data-cz-role="body"] .cz-fontsample{font-size:15px}
.cz-fontpick,.cz-fp{position:relative;min-width:0}
.cz-fp__btn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r-md,10px);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;text-align:left}
.cz-fp__btn:hover{border-color:var(--brand-line,var(--brand))}
.cz-fp__btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cz-fp__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px}
.cz-fp__caret{color:var(--muted)}
.cz-fp__panel{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);display:flex;flex-direction:column;max-height:430px;border:1px solid var(--line-2);border-radius:var(--r-md,10px);background:var(--surface);box-shadow:var(--sh-lg,0 18px 44px rgba(17,24,39,.18));overflow:hidden}
.cz-fp__panel[hidden]{display:none}
.cz-fp__tools{padding:10px;border-bottom:1px solid var(--line);display:grid;gap:8px}
.cz-fp__search{width:100%;min-height:44px}
.cz-fp__filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.cz-fp__chip{flex:none;min-height:34px;padding:0 12px;border:1px solid var(--line-2);border-radius:99px;background:var(--surface);color:var(--text-2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.cz-fp__chip[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--surface)}
.cz-fp__chip:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.cz-fp__count{margin:0;font-size:12.5px;color:var(--muted)}
.cz-fp__list{list-style:none;margin:0;padding:4px;overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:120px}
.cz-fp__item{display:grid;gap:2px;padding:9px 10px;border-radius:8px;cursor:pointer;min-height:52px}
.cz-fp__item[hidden]{display:none}
.cz-fp__item:hover,.cz-fp__item.is-active{background:var(--brand-soft,var(--surface-3))}
.cz-fp__item[aria-selected="true"]{outline:2px solid var(--brand);outline-offset:-2px}
.cz-fp__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cz-fp__fname{font-size:19px;line-height:1.2}
.cz-fp__badges{display:inline-flex;gap:6px;flex-wrap:wrap}
.cz-fp__sample{font-size:14px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cz-fp__note{font-size:12px;color:var(--muted)}
@media (max-width:640px){
  .cz-fontrow{grid-template-columns:1fr}
  .cz-fp__panel{position:fixed;left:12px;right:12px;top:auto;bottom:12px;max-height:72vh}
}
/* benefits row */
.cz-benefits{display:grid;gap:4px;margin-top:12px}
.cz-benefit{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1.4fr);gap:0 14px;padding:10px 0;border-top:1px solid var(--line)}
@media (max-width:760px){.cz-benefit{grid-template-columns:1fr}}