/* Natural image proportions and captions, shared by desktop and H5. */
html body.workspace-readable #templateGallery .template-grid.template-waterfall {
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;grid-auto-rows:1px;gap:0 22px!important;align-items:start!important;height:auto!important;max-height:none!important;overflow:visible!important;
}
html body.workspace-readable #templateGallery .template-waterfall>.template-card.real-template {
  display:block!important;align-self:start!important;vertical-align:top!important;width:100%!important;height:auto!important;min-width:0!important;margin:0!important;padding:0!important;break-inside:avoid;page-break-inside:avoid;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-align:left!important;transform:none!important;
}
html body.workspace-readable #templateGallery .template-waterfall .template-thumb {
  display:block!important;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:var(--template-aspect,auto)!important;padding:0!important;overflow:hidden!important;border:0!important;border-radius:10px!important;background:#f1f4f8!important;box-shadow:none!important;
}
html body.workspace-readable #templateGallery .template-waterfall .template-thumb>img {
  display:block!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;background:transparent!important;
}
html body.workspace-readable #templateGallery .template-waterfall .template-caption,
.mobile-template-grid.template-waterfall .template-caption {
  position:static!important;display:block!important;width:auto!important;margin:0!important;padding:12px 2px 0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;text-align:left!important;white-space:normal!important;
}
html body.workspace-readable #templateGallery .template-waterfall .template-caption-title,
.mobile-template-grid.template-waterfall .template-caption-title {
  display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important;margin:0!important;color:#1e293b!important;font-size:15px!important;font-weight:600!important;line-height:1.55!important;white-space:normal!important;overflow-wrap:anywhere;text-shadow:none!important;
}
html body.workspace-readable #templateGallery .template-waterfall .template-caption-meta,
.mobile-template-grid.template-waterfall .template-caption-meta {
  display:block!important;margin:5px 0 0!important;color:#64748b!important;font-size:12px!important;font-weight:400!important;line-height:1.5!important;text-shadow:none!important;
}
html body.workspace-readable #templateGallery .template-waterfall .template-caption-size,
.mobile-template-grid.template-waterfall .template-caption-size {
  display:block!important;margin:2px 0 0!important;color:#8995a6!important;font-size:11px!important;font-weight:400!important;line-height:1.5!important;font-variant-numeric:tabular-nums;text-shadow:none!important;
}
html body.workspace-readable #templateGallery .template-waterfall>.template-card:focus-visible .template-thumb,
html body.workspace-readable #templateGallery .template-waterfall>.template-card.active .template-thumb {
  outline:2px solid #1677ff!important;outline-offset:3px!important;
}
html body.workspace-readable #templateGallery .template-waterfall>.template-card:hover .template-caption-title {color:#1263ca!important}
.mobile-template-grid.template-waterfall {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:1px;gap:0 14px!important;align-items:start!important}
.mobile-template-grid.template-waterfall .mobile-template-card {
  display:block!important;align-self:start!important;vertical-align:top;width:100%!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;break-inside:avoid;page-break-inside:avoid;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-align:left;
}
.mobile-template-grid.template-waterfall .mobile-template-card>img {
  display:block!important;width:100%!important;height:auto!important;aspect-ratio:var(--template-aspect,auto);object-fit:contain!important;border-radius:9px;background:#f1f4f8;
}
.mobile-template-grid.template-waterfall>.subpage-empty {grid-column:1/-1;grid-row:auto;min-height:80px}
@media(max-width:760px){
  html body.workspace-readable #templateGallery .template-grid.template-waterfall {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 14px!important}
  html body.workspace-readable #templateGallery .template-waterfall .template-caption-title,
  .mobile-template-grid.template-waterfall .template-caption-title {font-size:13px!important}
  .mobile-template-grid.template-waterfall .template-caption {padding-top:9px!important}
  .mobile-template-grid.template-waterfall .template-caption-meta {font-size:11px!important}
  .mobile-template-grid.template-waterfall .template-caption-size {font-size:10px!important}
}
@media(prefers-reduced-motion:no-preference){
  html body.workspace-readable #templateGallery .template-waterfall .template-thumb,
  .mobile-template-grid.template-waterfall .mobile-template-card>img {transition:filter .18s ease}
  html body.workspace-readable #templateGallery .template-waterfall>.template-card:hover .template-thumb {filter:brightness(.98)}
}

/* The moving pagination control must not become the browser scroll anchor. */
[data-template-load-more], [data-mobile-template-more] {overflow-anchor:none}

html body.workspace-readable #templateGallery .template-waterfall .template-thumb {position:relative!important}
.template-image-retry{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:16px;background:#f1f4f8;color:#64748b;font-size:13px;cursor:pointer;text-align:center}
.template-image-retry:focus-visible{outline:2px solid #1677ff;outline-offset:-3px}