/* Template gallery (templates.html) and previewer (template-preview.html). */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* gallery */
.tpl-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-bottom:2rem}
.tpl-count{font:600 .8rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#4a4b4f}
.tpl-filters{display:flex;flex-wrap:wrap;gap:.5rem}
.tpl-filters button{font:600 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:.7rem 1rem;background:#fff;color:var(--black);border:1.5px solid var(--black);cursor:pointer}
.tpl-filters button[aria-pressed="true"]{background:var(--black);color:var(--white)}
.tpl-filters button:hover{border-color:var(--orange)}
.tpl-grid{list-style:none;padding:0;display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.tpl{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.tpl[hidden]{display:none}
@media (hover:hover){.tpl:hover{transform:translateY(-4px);border-color:rgba(255,90,0,.45);box-shadow:0 18px 40px -24px rgba(11,11,13,.45)}}
.tpl-shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--graphite);border-bottom:1px solid var(--line)}
.tpl-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.tpl:hover .tpl-shot img{transform:scale(1.03)}}
.tpl-tag{position:absolute;top:0;right:0;background:var(--black);color:var(--white);font:700 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:.5rem .9rem .5rem 1.2rem;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%)}
.tpl-tag.on{background:var(--orange);color:var(--black)}
.tpl-body{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.tpl-for{font:500 .74rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.tpl-body h3{font-size:2rem}
.tpl-body>p:not(.tpl-for){color:#4a4b4f;font-size:.98rem}
.tpl-sw{list-style:none;padding:0;display:flex;gap:.45rem;margin-top:.3rem}
.tpl-sw li{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--b,#ccc);box-shadow:inset 0 0 0 1px rgba(11,11,13,.2);position:relative}
.tpl-sw li::after{content:"";position:absolute;inset:.38rem;border-radius:50%;background:var(--c,#999)}
.tpl-act{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:auto;padding-top:1rem}
.tpl-act .btn{padding:.9rem 1.4rem}
.tpl-open{font:600 .78rem var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:.15rem}
.tpl-open:hover{color:var(--orange)}

/* previewer */
body.pv{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--black);color:var(--white)}
.pv-bar{display:flex;align-items:center;gap:.8rem 1.2rem;padding:.6rem var(--gutter);background:var(--black);border-bottom:1px solid var(--line-dark);flex-wrap:wrap;position:relative;z-index:2}
.pv-brand img{height:34px;width:auto}
.pv-back{color:#c6c4bf;font:600 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.pv-back:hover{color:var(--orange)}
.pv-field{display:flex;align-items:center;gap:.5rem;font:600 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#9a9893}
.pv select{font:600 .85rem var(--body);color:var(--white);background:var(--graphite);border:1px solid var(--line-dark);padding:.5rem 2rem .5rem .7rem;width:auto;border-radius:0}
.pv-seg{display:inline-flex;border:1px solid var(--line-dark)}
.pv-seg button{font:600 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:.6rem .8rem;background:transparent;color:#c6c4bf;border:0;cursor:pointer}
.pv-seg button+button{border-left:1px solid var(--line-dark)}
.pv-seg button[aria-pressed="true"]{background:var(--white);color:var(--black)}
.pv-seg button:hover:not([aria-pressed="true"]){color:var(--orange)}
.pv-sw{display:inline-flex;gap:.4rem}
.pv-sw button{width:1.9rem;height:1.9rem;border-radius:50%;border:2px solid transparent;background:var(--b);cursor:pointer;position:relative;padding:0}
.pv-sw button::after{content:"";position:absolute;inset:.45rem;border-radius:50%;background:var(--c)}
.pv-sw button[aria-pressed="true"]{border-color:var(--orange);box-shadow:0 0 0 2px var(--black) inset}
.pv-push{margin-left:auto;display:flex;align-items:center;gap:1rem}
.pv-bar .btn{padding:.8rem 1.2rem;font-size:.75rem;white-space:nowrap}
.pv-ext{color:#c6c4bf;font:600 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pv-ext:hover{color:var(--orange)}
.pv-more{display:none}
.pv-stage{flex:1;min-height:0;display:flex;justify-content:center;background:#2a2b2f;overflow:auto;padding:0}
.pv-stage iframe{border:0;width:100%;height:100%;background:#fff;display:block;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.pv-stage[data-device="tablet"],.pv-stage[data-device="phone"]{padding:1.2rem}
.pv-stage[data-device="tablet"] iframe{width:820px;border-radius:14px;box-shadow:0 0 0 10px #0b0b0d,0 30px 60px -20px #000}
.pv-stage[data-device="phone"] iframe{width:390px;max-height:844px;border-radius:28px;box-shadow:0 0 0 10px #0b0b0d,0 30px 60px -20px #000}
.pv-note{padding:.45rem var(--gutter);background:var(--graphite);color:#9a9893;font:500 .7rem var(--mono);letter-spacing:.06em;border-top:1px solid var(--line-dark)}
@media (prefers-reduced-motion:reduce){.pv-stage iframe{transition:none}}
@media (max-width:1180px){
  .pv-more{display:inline-block;margin-left:auto;background:none;border:1px solid var(--line-dark);color:var(--white);font:600 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:.6rem .8rem;cursor:pointer}
  .pv-opts{display:none;width:100%;flex-wrap:wrap;gap:.8rem 1.2rem;padding:.4rem 0 .3rem}
  .pv-bar[data-open] .pv-opts{display:flex}
  .pv-push{margin-left:0}
}
@media (min-width:1181px){.pv-opts{display:contents}}
@media (max-width:900px){.pv-device{display:none}.pv-stage{padding:0!important}.pv-stage iframe{width:100%!important;border-radius:0!important;box-shadow:none!important;max-height:none!important}}
@media (max-width:600px){
  .pv-bar{gap:.6rem .8rem}
  .pv-bar>.pv-field{flex:1 1 100%;min-width:0}
  .pv-bar>.pv-field:nth-of-type(2){flex:1 1 0}
  .pv-bar>.pv-field select{flex:1;min-width:0;max-width:100%}
  .pv-note{display:none}
}