/* digotech/template-gallery: filter bar, grid of drawn templates, preview dialog (drawn templates).
   Each drawing paints itself from its template's palette (--hm-templates-tb/-ti/-ta/-ts/-tr, set inline from the data). */
.hm-templates__gallery,.hm-templates__tm{
  --hm-templates-lift:0 20px 40px var(--shadow);
  --hm-templates-flash:0 0 0 3px var(--accent-fill),0 20px 40px var(--shadow);
  --hm-templates-shadow-btn:0 4px 12px var(--shadow);
  --hm-templates-shadow-xl:0 20px 50px var(--shadow);
  --hm-templates-shadow-seg:0 1px 3px var(--shadow);
  --hm-templates-ring:0 0 0 3px var(--accent-tint);
  --hm-templates-scroll-dur:2.8s;
  --hm-templates-scroll-ease:cubic-bezier(.45,0,.2,1);
  --hm-templates-tip-delay:300ms;
  --hm-templates-z-tip:5;
  --hm-templates-z-acts:4;
  --hm-templates-z-search:3;
  --hm-templates-ico:14px;
  --hm-templates-gap-xs:6px;
  --hm-templates-search-w:calc(var(--s-9) * 2);
  --hm-templates-search-w-open:calc(var(--s-9) * 2.7);
  --hm-templates-ls-h:-0.015em;
  --hm-templates-ls-mono:.1em;
  --hm-templates-ls-tight:-0.02em;
  --hm-templates-ls-serif:-0.01em;
  --hm-templates-ls-tighter:-0.03em;
  --hm-templates-ls-kick:.16em;
  --hm-templates-sw-ring:0 0 0 calc(var(--s-1) / 2) var(--card);
  --hm-templates-dlg-w:1040px;
  --hm-templates-device-w:880px;
  --hm-templates-phone-w:300px;
  --hm-templates-phone-edge:6px;
  --hm-templates-seg-pad:3px;
  --hm-templates-seg-r:6px;
  /* the drawing (a website at a small scale) */
  --hm-templates-tm-gap:10px;
  --hm-templates-tm-pad:10px 12px 14px;
  --hm-templates-tm-g5:5px;
  --hm-templates-tm-g7:7px;
  --hm-templates-tm-fs-h:17px;
  --hm-templates-tm-fs-h2:13px;
  --hm-templates-tm-fs-btn:8px;
  --hm-templates-tm-fs-band:9px;
  --hm-templates-tm-btn-pad:5px 8px;
  --hm-templates-tm-hero-pad:14px 10px;
  --hm-templates-tm-hero-pad-c:22px 10px;
  --hm-templates-tm-band-pad:12px 10px;
  --hm-templates-tm-full-h:120px;
  --hm-templates-tm-line:3px;
  --hm-templates-tm-line-w:16px;
  --hm-templates-tm-bar:4px;
  --hm-templates-tm-r:2px;
  --hm-templates-tm-stripe:10px;
  --hm-templates-tm-stripe-s:7px;
  --hm-templates-tm-pill-w:40px;
  --hm-templates-tm-pill-h:14px;
  --hm-templates-tm-phone-w:230px;
  --hm-templates-tm-pad-l:14px 18px 20px;
  --hm-templates-tm-gap-l:14px;
  --hm-templates-tm-fs-l:clamp(22px, 3vw, 34px);
  --hm-templates-tm-fs-lm:20px;
  min-width:0;
}

/* ---------- filter bar ---------- */
.hm-templates__bar{position:relative;display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-6)}
.hm-templates__hs{position:relative;flex:1;min-width:0}
.hm-templates__filters{display:flex;gap:var(--s-2);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-block:var(--s-1)}
.hm-templates__filters::-webkit-scrollbar{display:none}
.hm-templates__filters button{flex:none;display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--ctl-s);padding:0 var(--s-3);white-space:nowrap;border:1px solid var(--rule);border-radius:var(--wp--preset--border-radius--radius-full);background:transparent;font:500 var(--t-s)/1 var(--font-body);color:var(--ink-2);cursor:pointer;transition:border-color var(--dur) var(--ease-press),background-color var(--dur) var(--ease-press),color var(--dur) var(--ease-press)}
.hm-templates__filters button:hover{border-color:var(--ink-3);color:var(--ink)}
.hm-templates__filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.hm-templates__filters button span{font:500 var(--t-2xs)/1 var(--font-mono);opacity:.7}
.hm-templates__filters.is-fade-r{-webkit-mask-image:linear-gradient(to right, currentColor calc(100% - var(--s-7)), transparent);mask-image:linear-gradient(to right, currentColor calc(100% - var(--s-7)), transparent)}
.hm-templates__filters.is-fade-l{-webkit-mask-image:linear-gradient(to left, currentColor calc(100% - var(--s-7)), transparent);mask-image:linear-gradient(to left, currentColor calc(100% - var(--s-7)), transparent)}
.hm-templates__filters.is-fade-l.is-fade-r{-webkit-mask-image:linear-gradient(to right, transparent, currentColor var(--s-7), currentColor calc(100% - var(--s-7)), transparent);mask-image:linear-gradient(to right, transparent, currentColor var(--s-7), currentColor calc(100% - var(--s-7)), transparent)}
.hm-templates__hs-btn{position:absolute;top:50%;transform:translateY(-50%);background:var(--card);opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease-out),border-color var(--dur) var(--ease-press)}
.hm-templates__hs-btn.is-prev{left:0}
.hm-templates__hs-btn.is-next{right:0}
@media (hover: hover) and (pointer: fine){
  .hm-templates__filters.is-fade-l ~ .is-prev,.hm-templates__filters.is-fade-r ~ .is-next{opacity:1;pointer-events:auto}
}
.hm-templates__tools{flex:none;display:flex;align-items:center;gap:var(--s-2)}
.hm-templates__search{position:relative}
.hm-templates__search svg{position:absolute;left:var(--s-3);top:50%;width:var(--icon-s);height:var(--icon-s);transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.hm-templates__search input{box-sizing:border-box;width:var(--hm-templates-search-w);max-width:100%;height:var(--ctl-s);padding:0 var(--s-3) 0 calc(var(--s-6) + var(--s-1) / 2);border:1px solid var(--rule);border-radius:var(--r);background:var(--card);color:var(--ink);font:400 var(--t-s)/1 var(--font-body);transition:width var(--dur-m) var(--ease-out),border-color var(--dur) var(--ease-press)}
.hm-templates__search input:focus{outline:none;border-color:var(--accent-fill);box-shadow:var(--hm-templates-ring)}
.hm-templates__search input:focus,.hm-templates__search input:not(:placeholder-shown){width:var(--hm-templates-search-w-open)}

/* tooltips (data-tip) */
.hm-templates__gallery [data-tip]{position:relative}
.hm-templates__gallery [data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + var(--s-2));left:50%;z-index:var(--hm-templates-z-tip);padding:calc(var(--s-1) * 1.5) var(--s-2);border-radius:var(--r);background:var(--ink);color:var(--paper);font:500 var(--t-2xs)/1 var(--font-body);white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%, calc(var(--s-1) * -1));transition:opacity var(--dur) var(--ease-press) var(--hm-templates-tip-delay),transform var(--dur) var(--ease-press) var(--hm-templates-tip-delay)}
.hm-templates__gallery [data-tip]:is(:hover,:focus-visible)::after{opacity:1;transform:translate(-50%, 0)}
.hm-templates__tools [data-tip]::after{left:auto;right:0;transform:translateY(calc(var(--s-1) * -1))}
.hm-templates__tools [data-tip]:is(:hover,:focus-visible)::after{transform:none}

/* ---------- grid + cards ---------- */
/* 6 tracks, 3 cards a row; view.js widens the last cards (is-half) so the last row is never short */
.hm-templates__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-6) var(--gap-grid)}
.hm-templates__card{display:grid;grid-column:span 2;gap:var(--s-3);align-content:start;min-width:0}
.hm-templates__card.is-half{grid-column:span 3}
.hm-templates__card.is-half .hm-templates__frame{aspect-ratio:16 / 9} /* wider, so not taller than the row above */
.hm-templates__card.is-hidden{display:none}
.hm-templates__card.is-show{animation:hm-templates-pop var(--dur-morph) var(--ease-out)}
.hm-templates__card.is-flash .hm-templates__frame{box-shadow:var(--hm-templates-flash)}
/* size container: the drawing scrolls to its end on hover (100cqh = the frame's height) */
.hm-templates__frame{position:relative;aspect-ratio:4/3;max-width:100%;container-type:size;overflow:hidden;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper-2);cursor:zoom-in;transition:box-shadow var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease-out)}
.hm-templates__card:hover .hm-templates__frame{transform:translateY(calc(var(--s-1) * -1));box-shadow:var(--hm-templates-lift)}
.hm-templates__scroll{position:absolute;inset:0 0 auto;transition:transform var(--hm-templates-scroll-dur) var(--hm-templates-scroll-ease)}
.hm-templates__frame:hover .hm-templates__scroll{transform:translateY(calc(-100% + 100cqh))}
.hm-templates__actions{position:absolute;top:var(--s-3);right:var(--s-3);z-index:var(--hm-templates-z-acts);display:flex;align-items:center;gap:var(--hm-templates-gap-xs)}
.hm-templates__zoom{display:grid;place-items:center;width:var(--s-6);height:var(--s-6);padding:0;border:1px solid var(--rule);border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--hm-templates-shadow-btn);opacity:0;transform:scale(.8);transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease-out),background-color var(--dur) var(--ease-press),color var(--dur) var(--ease-press)}
.hm-templates__zoom svg,.hm-templates__pick svg{width:var(--hm-templates-ico);height:var(--hm-templates-ico)}
.hm-templates__frame:hover .hm-templates__zoom,.hm-templates__zoom:focus-visible{opacity:1;transform:none}
.hm-templates__zoom:hover{background:var(--accent-fill);color:var(--on-accent)}
.hm-templates__pick{display:inline-flex;text-decoration:none;align-items:center;gap:var(--hm-templates-gap-xs);min-height:var(--s-6);padding:0 var(--s-3);border:1px solid var(--rule);border-radius:var(--wp--preset--border-radius--radius-full);background:var(--card);color:var(--ink);font:600 var(--t-xs)/1 var(--font-body);cursor:pointer;box-shadow:var(--hm-templates-shadow-btn);transition:background-color var(--dur) var(--ease-press),color var(--dur) var(--ease-press),transform var(--dur) var(--ease-press)}
.hm-templates__pick:hover{transform:scale(1.05)}
.hm-templates__meta{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2)}
.hm-templates__meta h3{margin:0;font:700 var(--t-l)/1.1 var(--font-display);letter-spacing:var(--hm-templates-ls-h)}
.hm-templates__meta h3 a{color:inherit;text-decoration:none}
.hm-templates__meta h3 a:hover{color:var(--accent)}
.hm-templates__meta span{font:500 var(--t-2xs)/1 var(--font-mono);letter-spacing:var(--hm-templates-ls-mono);text-transform:uppercase;color:var(--ink-3)}
.hm-templates__tags{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.hm-templates__empty{grid-column:1 / -1;margin:0;padding:var(--s-7);border:1px dashed var(--rule);border-radius:var(--r-card);text-align:center;color:var(--ink-2)}
@keyframes hm-templates-pop{from{opacity:0;transform:translateY(var(--s-3)) scale(.96)}}

/* ---------- the drawing ---------- */
.hm-templates__tm{display:grid;gap:var(--hm-templates-tm-gap);padding:var(--hm-templates-tm-pad);background:var(--hm-templates-tb);color:var(--hm-templates-ti);font-family:var(--font-body);text-align:left}
.hm-templates__tm i{display:block}
.hm-templates__tm-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--hm-templates-gap-xs)}
.hm-templates__tm-logo{font:800 var(--t-2xs)/1 var(--font-display);letter-spacing:var(--hm-templates-ls-tight)}
.hm-templates__tm-links{display:flex;align-items:center;gap:var(--hm-templates-tm-g5)}
.hm-templates__tm-links i{width:var(--hm-templates-tm-line-w);height:var(--hm-templates-tm-line);border-radius:var(--hm-templates-tm-r);background:currentColor;opacity:.35}
.hm-templates__tm-btn{display:inline-block;padding:var(--hm-templates-tm-btn-pad);border-radius:var(--hm-templates-tr);background:var(--hm-templates-ta);color:var(--hm-templates-to);font:700 var(--hm-templates-tm-fs-btn)/1 var(--font-body)}
.hm-templates__tm-hero{display:grid;gap:var(--s-2);padding:var(--hm-templates-tm-hero-pad);border-radius:var(--hm-templates-tr);background:var(--hm-templates-ts)}
.hm-templates__tm-hero.is-center{justify-items:center;padding:var(--hm-templates-tm-hero-pad-c);text-align:center}
.hm-templates__tm-hero.is-split{grid-template-columns:1.1fr 1fr;align-items:center}
.hm-templates__tm-hero.is-full{min-height:var(--hm-templates-tm-full-h);align-content:end;background:linear-gradient(to top, var(--hm-templates-ts), transparent),repeating-linear-gradient(135deg, var(--hm-templates-ts) 0 var(--hm-templates-tm-stripe), color-mix(in oklch, var(--hm-templates-ta) 25%, var(--hm-templates-ts)) var(--hm-templates-tm-stripe) calc(var(--hm-templates-tm-stripe) * 2))}
.hm-templates__tm-tx{display:grid;gap:var(--hm-templates-tm-g7)}
.hm-templates__tm-hero.is-center .hm-templates__tm-tx{justify-items:center}
.hm-templates__tm-h{max-width:16ch;font:800 var(--hm-templates-tm-fs-h)/1.12 var(--font-display);letter-spacing:var(--hm-templates-ls-tight)}
.hm-templates__tm.is-serif :is(.hm-templates__tm-h,.hm-templates__tm-logo){font-family:var(--font-serif);font-weight:600;letter-spacing:var(--hm-templates-ls-serif);line-height:1.22}
.hm-templates__tm.is-mono :is(.hm-templates__tm-h,.hm-templates__tm-logo){font-family:var(--font-mono);letter-spacing:var(--hm-templates-ls-tight);line-height:1.2}
.hm-templates__tm-hero.is-why .hm-templates__tm-h{font-size:var(--hm-templates-tm-fs-h2)}
.hm-templates__tm-tx .hm-templates__tm-btn{justify-self:start}
.hm-templates__tm-hero.is-center .hm-templates__tm-btn{justify-self:center}
/* text lines: <i> bars at set widths */
.hm-templates__tm-tx > i,.hm-templates__tm-card > i{height:var(--hm-templates-tm-bar);border-radius:var(--hm-templates-tm-r);background:currentColor;opacity:.25}
.hm-templates__tm-tx > i:nth-of-type(1){width:80%}
.hm-templates__tm-tx > i:nth-of-type(2){width:60%}
.hm-templates__tm-hero.is-why .hm-templates__tm-tx > i:nth-of-type(1){width:85%}
.hm-templates__tm-hero.is-why .hm-templates__tm-tx > i:nth-of-type(2){width:70%}
.hm-templates__tm-hero.is-why .hm-templates__tm-tx > i:nth-of-type(3){width:75%}
.hm-templates__tm-card > i:nth-of-type(1){width:70%}
.hm-templates__tm-card > i:nth-of-type(2){width:35%;opacity:.6}
.hm-templates__tm-row.is-quote .hm-templates__tm-card > i:nth-of-type(1){width:90%}
.hm-templates__tm-row.is-quote .hm-templates__tm-card > i:nth-of-type(2){width:60%;opacity:.25}
.hm-templates__tm-img{display:block;aspect-ratio:1;border-radius:var(--hm-templates-tr);background:repeating-linear-gradient(135deg, color-mix(in oklch, var(--hm-templates-ta) 35%, var(--hm-templates-tb)) 0 var(--hm-templates-tm-stripe-s), color-mix(in oklch, var(--hm-templates-ta) 18%, var(--hm-templates-tb)) var(--hm-templates-tm-stripe-s) calc(var(--hm-templates-tm-stripe-s) * 2))}
.hm-templates__tm-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hm-templates-gap-xs)}
.hm-templates__tm-card{display:grid;gap:var(--hm-templates-tm-g5);padding:var(--hm-templates-gap-xs);border-radius:var(--hm-templates-tr);background:var(--hm-templates-ts)}
.hm-templates__tm-card .hm-templates__tm-img{aspect-ratio:4/3}
.hm-templates__tm-band{display:flex;justify-content:space-between;align-items:center;gap:var(--hm-templates-gap-xs);padding:var(--hm-templates-tm-band-pad);border-radius:var(--hm-templates-tr);background:var(--hm-templates-ta);color:var(--hm-templates-to);font:700 var(--hm-templates-tm-fs-band)/1.2 var(--font-body)}
.hm-templates__tm-band i{width:var(--hm-templates-tm-pill-w);height:var(--hm-templates-tm-pill-h);border-radius:var(--hm-templates-tr);background:var(--hm-templates-tb);opacity:.9}
.hm-templates__tm-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hm-templates-gap-xs);padding-top:var(--hm-templates-gap-xs);border-top:1px solid color-mix(in srgb, var(--hm-templates-ti) 15%, transparent)}
.hm-templates__tm-foot i{height:var(--hm-templates-tm-line);border-radius:var(--hm-templates-tm-r);background:currentColor;opacity:.25}
.hm-templates__tm.is-phone{width:var(--hm-templates-tm-phone-w);margin-inline:auto}
.hm-templates__tm.is-phone .hm-templates__tm-hero.is-split{grid-template-columns:minmax(0,1fr)}
.hm-templates__tm.is-phone .hm-templates__tm-row{grid-template-columns:1fr 1fr}

/* ---------- drawing "site": cards with a browser frame, palette, description and buttons ---------- */
/* a real sample site: its screenshots, the long desktop capture (the phone one shows in the preview on "Phone"); in a
   sample-site card the mouse's height over the frame scrolls it (--gd-y, set by view.js), as with the drawn sites */
.dg-tshot{--gd-y:0px;transform:translateY(calc(var(--gd-y) * -1));transition:transform var(--dur-morph) var(--ease-out)}
.dg-tshot img{display:block;width:100%;height:auto}
.dg-tshot .dg-tshot__p,.dg-tshot.is-m .dg-tshot__d{display:none}
.dg-tshot.is-m .dg-tshot__p{display:block}
.gd-frame{display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card);overflow:hidden}
.gd-frame__bar{display:flex;align-items:center;gap:var(--s-1);min-width:0;padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--rule);background:var(--paper-2)}
.gd-frame__bar i{flex:none;width:var(--s-2);height:var(--s-2);border-radius:50%;background:var(--rule)}
.gd-frame__t{min-width:0;margin-left:var(--s-2);font:500 var(--t-2xs)/1 var(--font-mono);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-view{position:relative;overflow:hidden;aspect-ratio:16 / 10;background:var(--paper-2)}
.hm-templates__sw{display:inline-flex;margin-left:auto;padding-left:var(--s-1)}
.hm-templates__sw i{width:var(--s-4);height:var(--s-4);border-radius:50%;background:var(--hm-templates-c);box-shadow:var(--hm-templates-sw-ring),inset 0 0 0 1px var(--rule)} /* inset edge: a white or very light colour still shows */
.hm-templates__sw i + i{margin-left:calc(var(--s-1) * -1)}


/* ---------- preview dialog ---------- */
.hm-templates__dlg{width:min(var(--hm-templates-dlg-w), calc(100vw - var(--s-6)));max-width:none;padding:0;border:0;background:transparent;color:var(--ink)}
.hm-templates__dlg::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(calc(var(--s-1) / 2));backdrop-filter:blur(calc(var(--s-1) / 2))}
.hm-templates__dlg-box{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:calc(100vh - var(--s-7));overflow:hidden;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper);animation:hm-templates-pop var(--dur-morph) var(--ease-out)}
.hm-templates__dlg-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--rule)}
.hm-templates__dlg-head h3{margin:0;font-size:var(--t-xl)}
.hm-templates__dlg-ctl{display:flex;align-items:center;gap:var(--s-2)}
.hm-templates__seg{display:inline-flex;gap:var(--hm-templates-seg-pad);padding:var(--hm-templates-seg-pad);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--paper-2)}
.hm-templates__seg button{min-height:var(--s-6);padding:0 var(--s-3);border:0;border-radius:var(--hm-templates-seg-r);background:transparent;color:var(--ink-2);font:600 var(--t-xs)/1 var(--font-body);cursor:pointer;transition:color var(--dur) var(--ease-press),background-color var(--dur-m) var(--ease-out),box-shadow var(--dur-m) var(--ease-out)}
.hm-templates__seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--hm-templates-shadow-seg)}
.hm-templates__dlg-stage{display:grid;justify-items:center;padding:var(--s-5);overflow:auto}
.hm-templates__dlg-device{width:100%;max-width:var(--hm-templates-device-w);overflow:hidden;border:1px solid var(--rule);border-radius:var(--r-pill);box-shadow:var(--hm-templates-shadow-xl);transition:max-width var(--dur-morph) var(--ease-out)}
.hm-templates__dlg-device.is-mobile{max-width:var(--hm-templates-phone-w);border-width:var(--hm-templates-phone-edge);border-color:var(--ink);border-radius:var(--s-5)}
.hm-templates__dlg-device .hm-templates__tm{gap:var(--hm-templates-tm-gap-l);padding:var(--hm-templates-tm-pad-l)}
.hm-templates__dlg-device .hm-templates__tm-h{font-size:var(--hm-templates-tm-fs-l)}
.hm-templates__dlg-device.is-mobile .hm-templates__tm-h{font-size:var(--hm-templates-tm-fs-lm)}
.hm-templates__dlg-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-top:1px solid var(--rule)}
.hm-templates__dlg-foot p{max-width:48ch;margin:0;font-size:var(--t-s);color:var(--ink-2)}
.hm-templates__dlg-acts{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.hm-templates__gallery .wp-block-button__link svg{width:var(--icon-s);height:var(--icon-s)}

/* ---------- responsive ---------- */
@media (max-width: 991px){
  .hm-templates__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-templates__card,.hm-templates__card.is-half{grid-column:auto}
  .hm-templates__card.is-wide{grid-column:1 / -1}
  .hm-templates__card.is-wide .hm-templates__frame{aspect-ratio:21 / 9}
  /* the search field folds into an icon button and opens over the pills */
  .hm-templates__search input{width:var(--ctl-s);padding:0;color:transparent;cursor:pointer}
  .hm-templates__search input::placeholder{color:transparent}
  .hm-templates__search input::-webkit-search-cancel-button{display:none}
  .hm-templates__search svg{left:50%;transform:translate(-50%,-50%)}
  .hm-templates__search:is(:focus-within,.is-filled){position:absolute;left:0;right:calc(var(--ctl-s) + var(--s-2));z-index:var(--hm-templates-z-search)}
  .hm-templates__search:is(:focus-within,.is-filled) input{width:100%;padding:0 var(--s-3) 0 calc(var(--s-6) + var(--s-1));color:var(--ink);cursor:text}
  .hm-templates__search:is(:focus-within,.is-filled) input::placeholder{color:var(--ink-3)}
  .hm-templates__search:is(:focus-within,.is-filled) input::-webkit-search-cancel-button{display:revert}
  .hm-templates__search:is(:focus-within,.is-filled) svg{left:var(--s-3);transform:translateY(-50%)}
}
@media (max-width: 767px){
  .hm-templates__grid{grid-template-columns:minmax(0,1fr)}
  .hm-templates__card.is-wide{grid-column:auto}
  .hm-templates__card.is-wide .hm-templates__frame{aspect-ratio:4 / 3}
  .hm-templates__dlg-acts,.hm-templates__dlg-acts .wp-block-button{flex:1}
  .hm-templates__dlg-acts .wp-block-button__link{width:100%}
}
@media (prefers-reduced-motion: reduce){
  .hm-templates__frame,.hm-templates__scroll,.hm-templates__zoom,.hm-templates__pick,.hm-templates__dlg-device,.hm-templates__search input{transition:none}
  .hm-templates__card:hover .hm-templates__frame,.hm-templates__frame:hover .hm-templates__scroll{transform:none}
  .hm-templates__card.is-show,.hm-templates__dlg-box{animation:none}
}