/* Native product cards stay native in cover grids and mixed product results. */
[data-zg-font-tryout] .zgft-catalog-notice{margin:6px 0 12px;color:#64748b;font-size:12px;line-height:1.6}
[data-zg-font-tryout] .zgft-toolbar[hidden],[data-zg-font-tryout] .zgft-views[hidden],[data-zg-font-tryout] .zgft-catalog-notice[hidden]{display:none}
.zgft-font-card,.zgft-native-card{min-width:0;box-sizing:border-box}
.zgft-font-card{border:0;border-radius:0;background:transparent;overflow:visible}
.zgft-native-card>.templates-col{width:100%;max-width:100%;height:100%;min-width:0}
.zgft-preview-pane{display:none;min-width:0}
.zgft-preview-pane[hidden],[data-zg-font-tryout][data-zg-current-view=grid] .zgft-preview-pane{display:none!important}

/* Only list mode changes the shared product grid. Cover grids inherit the same
   columns, spacing and card geometry as all-material results. */
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .products-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .products-grid>.products-col{display:contents}
[data-zg-font-tryout].zgft-all-fonts .zgft-grid-item{min-width:0;width:auto;max-width:none;margin:0}

/* One native card link: cover | flexible product information | capped specimen. */
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-font-card{border:1px solid #e2e8f0;border-radius:14px;background:#fff;overflow:hidden}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-native-card .template-card{display:grid;grid-template-columns:var(--zgft-list-cover) minmax(var(--zgft-list-info),1fr) minmax(0,min(calc(var(--zgft-list-sample-width) + var(--zgft-list-preview-pad) + 1px),calc(100% - var(--zgft-list-cover) - var(--zgft-list-info) - var(--zgft-list-gap) - var(--zgft-list-gap))));grid-template-rows:auto auto minmax(0,1fr);align-items:start;gap:8px 24px;height:auto;min-height:196px;margin:0;padding:20px;border:0;border-radius:0;box-shadow:none;transform:none;will-change:auto}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-thumb{grid-column:1;grid-row:1/4;align-self:start;width:156px;height:156px;aspect-ratio:1;margin:0;background-size:contain;background-color:#f8fafc;border-radius:8px;overflow:hidden}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-thumb::before{background-size:contain;transform:none;border-radius:inherit}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-thumb__overlay{border-radius:inherit}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-badges{top:6px;left:6px;right:6px;justify-content:flex-end;flex-wrap:nowrap;gap:4px}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-badges>.sd-shop-label,[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-badges>.vip-badge{padding:3px 6px;font-size:10px}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-name{grid-column:2;grid-row:1;display:-webkit-box;-webkit-box-orient:vertical;min-height:3.1em;height:3.1em;max-height:3.1em;overflow:hidden;white-space:normal;-webkit-line-clamp:2;margin:2px 0 0;font-size:16px;line-height:1.55}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-summary{grid-column:2;grid-row:2;align-self:start;align-items:center;gap:5px 12px;margin:0;font-size:12px;line-height:1.6}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-pricing{grid-column:2;grid-row:3;align-self:start;align-items:flex-start;min-width:0;min-height:0;margin:10px 0 0;text-align:left}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-pricing>strong{font-size:18px}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-pricing>small{max-width:100%;font-size:11px;line-height:1.5}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-preview-pane{display:block;grid-column:3;grid-row:1/4;align-self:center;margin:0;padding:8px 0 8px 24px;border:0;border-left:1px solid #edf1f7;background:transparent;text-align:left}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-license{display:none}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] [data-zg-specimen]{margin:0;padding:0;line-height:1.45;overflow-wrap:anywhere}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] [data-zg-font-status],[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] [data-zg-font-notice]{margin:2px 0 0;font-size:11px}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-card-cover__main{font-size:clamp(8px,min(28cqw,calc(80cqw / var(--zgft-name-chars,3))),44px)}
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-card-cover__minor{font-size:clamp(7px,7cqw,13px)}
/* Successful loads remain announced without adding a duplicate visible line. */
[data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-font-card[data-zg-font-state=ready] [data-zg-font-status]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

@media(max-width:1050px){
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-native-card .template-card{grid-template-columns:var(--zgft-list-cover) minmax(var(--zgft-list-info),1fr) minmax(0,min(calc(var(--zgft-list-sample-width) + var(--zgft-list-preview-pad) + 1px),calc(100% - var(--zgft-list-cover) - var(--zgft-list-info) - var(--zgft-list-gap) - var(--zgft-list-gap))));gap:8px 16px;padding:16px;min-height:160px}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-thumb{width:128px;height:128px}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-preview-pane{padding-left:16px}
}
@media(max-width:800px){
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-font-card{border-radius:12px}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-native-card .template-card{grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:8px 14px;padding:14px;min-height:0}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-thumb{width:112px;height:112px;border-radius:6px}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-name{font-size:14px}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-summary{gap:3px 8px;font-size:11px}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-pricing{flex-direction:column;gap:4px}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-pricing>strong{font-size:16px}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-pricing>small{font-size:10px;overflow-wrap:anywhere}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-preview-pane{grid-column:1/-1;grid-row:4;padding:12px 0 0;border-left:0;border-top:1px solid #edf1f7}
}
@media(max-width:600px){
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-native-card .template-card{grid-template-columns:96px minmax(0,1fr);gap:8px 12px;padding:12px}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-thumb{width:96px;height:96px}
}
@media(max-width:380px){
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-native-card .template-card{grid-template-columns:80px minmax(0,1fr)}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .template-thumb{width:80px;height:80px}
}

/* Keep desktop controls and specimen text on the same left guide. */
@media(min-width:801px){
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list]{--zgft-list-cover:156px;--zgft-list-info:260px;--zgft-list-gap:24px;--zgft-list-inset:20px;--zgft-list-preview-pad:24px;--zgft-list-sample-width:1000px}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-toolbar{justify-content:flex-start;flex-wrap:wrap;padding-left:max(calc(var(--zgft-list-inset) + var(--zgft-list-cover) + var(--zgft-list-info) + var(--zgft-list-gap) + var(--zgft-list-gap) + var(--zgft-list-preview-pad) + 1px),calc(100% - var(--zgft-list-sample-width) - var(--zgft-list-inset) - 2px));padding-right:20px}
  /* Limit the right-side tryout area on wide screens. */
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-preview-pane{box-sizing:border-box;width:100%;max-width:calc(var(--zgft-list-sample-width) + var(--zgft-list-preview-pad) + 1px);justify-self:end}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-text-label{flex:1 1 200px;min-width:200px;max-width:none}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-language{flex-basis:68px}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-preset{flex-basis:104px}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-size{gap:4px}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-size input{flex:0 0 64px;width:64px}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-size output{flex-basis:36px;min-width:36px}
}
@media(min-width:801px) and (max-width:1050px){
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list]{--zgft-list-cover:128px;--zgft-list-info:240px;--zgft-list-gap:16px;--zgft-list-inset:16px;--zgft-list-preview-pad:16px}
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-toolbar{padding-right:16px}
}

/* Narrow desktops keep the controls full-width instead of crowding them. */
@media(min-width:801px) and (max-width:1199px){
  [data-zg-font-tryout].zgft-all-fonts[data-zg-current-view=list] .zgft-toolbar{padding-left:10px;padding-right:10px}
}

/* Unloaded identity cards keep a neutral opaque cover without fallback specimen text. */
.template-thumb>.zgft-card-cover[data-zg-identity-cover]:not([data-zg-cover-font-state="loaded"]){visibility:visible}
.template-thumb>.zgft-card-cover[data-zg-identity-cover]:not([data-zg-cover-font-state="loaded"]) .zgft-card-cover__main,.template-thumb>.zgft-card-cover[data-zg-identity-cover]:not([data-zg-cover-font-state="loaded"]) .zgft-card-cover__minor{visibility:hidden}