/* Apple-style look for the template gallery. Visual only: colors, radius, shadows, glass on the filter bar.
   No size, spacing or font-size change, so the CLS reservation blocks stay valid. Scoped to .tg-shell. */
body:has(.tg-shell){background:#f5f5f7}
.tg-shell .tg-h1lead{color:#6e6e73;letter-spacing:-.01em}
.tg-shell .tg-head .tg-h1acc{color:#c04e06}
.tg-shell .tg-trust li{color:#6e6e73}
.tg-shell .tg-bar{position:sticky;top:56px;z-index:50;border-radius:18px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06)}
.tg-shell .tg-fbtn,.tg-shell .tg-search,.tg-shell .tg-sort{background:rgba(0,0,0,.04);border-color:transparent;box-shadow:none}
.tg-shell .tg-fbtn:hover{background:rgba(0,0,0,.08)}
.tg-shell .tg-search:focus,.tg-shell .tg-fbtn:focus-visible,.tg-shell .tg-sort:focus-visible{outline:2px solid #0071e3;outline-offset:2px;border-color:transparent}
.tg-shell .tg-ph{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 28px rgba(0,0,0,.08);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.tg-shell .tg-card:hover .tg-ph{transform:translateY(-6px) scale(1.012);box-shadow:0 2px 4px rgba(0,0,0,.06),0 26px 52px rgba(0,0,0,.16)}
.tg-shell .tg-card.tg-sel .tg-ph{box-shadow:0 0 0 3px #fff,0 0 0 5px #0071e3,0 10px 28px rgba(0,0,0,.1)}
.tg-shell .tg-card:focus-visible .tg-ph{outline:2px solid #0071e3;outline-offset:3px}
.tg-shell .tg-card:active .tg-ph{transform:scale(.985)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.tg-shell .tg-bar{background:#fff}}
@media(prefers-reduced-motion:reduce){.tg-shell .tg-ph{transition:none}.tg-shell .tg-card:hover .tg-ph{transform:none}}
/* v2: bigger cards and a hover that enlarges the sheet. Transform only on hover, so no layout shift. */
.tg-shell.tg-wrap{max-width:1300px!important}
@media(min-width:1025px){.tg-shell .tg-masonry{column-count:4!important}}
.tg-shell .tg-card{position:relative;z-index:1}
.tg-shell .tg-card:hover,.tg-shell .tg-card:focus-visible{z-index:20}
.tg-shell .tg-card:hover .tg-ph{transform:scale(1.14);box-shadow:0 4px 8px rgba(0,0,0,.08),0 32px 64px rgba(0,0,0,.22)}
@media(hover:none){.tg-shell .tg-card:hover .tg-ph{transform:none}}
/* Reserved gallery height for the larger cards (measured settled heights, template-studio). */
@media(min-width:1025px){html #root{min-height:20700px}}
@media(min-width:1201px){html #root{min-height:22450px}}
/* The gallery card uses paint containment, which would clip the enlarged sheet to the card box. */
.tg-shell .tg-card{contain:layout style}