/* Stockpresets design demo: the Envato-style store try (Oct 30, 2026). Same tokens as styles.css:
   dark, gold only on Subscribe, blue for state and the search button. */
.ev-body{--sw:292px;--th:0px;background:var(--bg)}
html.ev-mini .ev-body{--sw:76px}
.ev-vh,.ev-mini .ev-side .ev-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the menu ---------- */
.ev-side{position:fixed;left:0;top:var(--th);bottom:0;z-index:40;width:var(--sw);background:var(--head);border-right:1px solid var(--line);display:flex;flex-direction:column;transition:width .28s cubic-bezier(.22,1,.36,1)}
.ev-brand{height:76px;display:flex;align-items:center;gap:8px;padding:0 14px 0 22px;flex:none}
.ev-logo{flex:1;min-width:0}
.ev-logo img{height:28px;width:auto}
.ev-collapse,.ev-close,.ev-tw{background:none;border:0;color:var(--muted);cursor:pointer;display:grid;place-items:center;border-radius:10px}
.ev-collapse,.ev-close{width:40px;height:40px;flex:none}
.ev-collapse:hover,.ev-close:hover,.ev-tw:hover{background:var(--surface2);color:#fff}
.ev-close{display:none}
.ev-nav{flex:1;overflow-y:auto;padding:4px 12px 12px;scrollbar-width:thin}
.ev-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ev-sec{margin:22px 12px 8px;font-size:13px;font-weight:700;color:var(--dim)}
.ev-it{display:flex;align-items:center;gap:14px;min-height:44px;padding:0 12px;border-radius:12px;color:#d2d2d7;font-weight:700;font-size:15px;position:relative;flex:1;min-width:0}
.ev-it svg{flex:none;color:var(--muted);transition:color .15s}
.ev-it:hover{background:var(--surface2);color:#fff}
.ev-it:hover svg{color:#fff}
.ev-it[aria-current]{background:rgba(67,159,232,.14);color:#fff}
.ev-it[aria-current] svg{color:var(--blue-l)}
.ev-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ev-n{font-size:12px;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums}
.ev-it .ev-n{margin-left:auto}
.ev-row{display:flex;align-items:center;gap:2px}
.ev-tw{width:32px;height:32px;flex:none}
.ev-tw svg{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.ev-par.is-open .ev-tw svg{transform:rotate(180deg)}
.ev-fly{display:none}
.ev-par.is-open .ev-fly{display:block}
.ev-fly-h{display:none}
.ev-fly ul{padding:2px 0 8px 36px}
.ev-kid{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 12px;border-radius:10px;color:var(--muted);font-size:14px;font-weight:700}
.ev-kid span:first-child{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-kid:hover{background:var(--surface2);color:#fff}
.ev-kid[aria-current]{color:#fff;background:rgba(67,159,232,.10)}
.ev-kid[aria-current]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);margin-left:-4px}
.ev-foot{padding:12px;border-top:1px solid var(--line);display:grid;gap:6px;flex:none}
.ev-sub{display:flex;align-items:center;gap:12px;background:var(--accent);color:var(--on-accent);border-radius:14px;padding:12px 14px;transition:background .15s}
.ev-sub:hover{background:var(--accent2)}
.ev-sub svg{flex:none}
.ev-sub .ev-l{display:grid;line-height:1.25}
.ev-sub b{font-size:15px;font-weight:900}
.ev-sub .ev-l span{font-size:13px;font-weight:700;opacity:.78}
.ev-plan{display:grid;padding:10px 12px;border-radius:14px;background:rgba(67,159,232,.10);line-height:1.3}
.ev-plan b{font-size:14px}.ev-plan span{font-size:13px;color:var(--muted)}
.ev-me{flex:none}

/* collapsed: icons only, a label tip on plain items, a flyout beside items that hold a list */
.ev-mini .ev-side .ev-brand{padding:0;justify-content:center}
.ev-mini .ev-logo,.ev-mini .ev-n,.ev-mini .ev-tw,.ev-mini .ev-plan{display:none}
.ev-mini .ev-sec{font-size:0;height:1px;background:var(--line);margin:14px 10px}
.ev-mini .ev-nav{overflow:visible;padding:4px 14px}
.ev-mini .ev-it{justify-content:center;padding:0;width:48px;flex:none}
.ev-mini .ev-par .ev-fly,.ev-mini .ev-par.is-open .ev-fly{display:none}
.ev-mini .ev-par.is-fly .ev-fly{display:block;position:fixed;left:calc(var(--sw) + 8px);z-index:70;width:270px;background:#1b1b1e;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.55);animation:ev-fly .18s cubic-bezier(.22,1,.36,1)}
.ev-mini .ev-par.is-fly .ev-fly::before{content:"";position:absolute;right:100%;top:0;bottom:0;width:12px}
.ev-mini .ev-fly-h{display:block;margin:4px 10px 8px;font-weight:900;font-size:15px}
.ev-mini .ev-fly ul{padding:0}
.ev-mini .ev-fly .ev-n{display:inline}
.ev-mini .ev-par.is-fly > .ev-row .ev-it{background:var(--surface2);color:#fff}
@keyframes ev-fly{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.ev-mini .ev-it[data-tip]:hover::after,.ev-mini .ev-it[data-tip]:focus-visible::after,.ev-mini .ev-sub:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);background:#f5f5f7;color:#111;font-size:13px;font-weight:700;padding:6px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;z-index:70}
.ev-mini .ev-sub{justify-content:center;padding:0;width:48px;height:48px;margin:0 auto;position:relative}
.ev-mini .ev-foot{justify-items:center}

/* ---------- main column ---------- */
.ev-main{margin-left:var(--sw);padding:var(--th) 32px 0;min-height:100vh;transition:margin-left .28s cubic-bezier(.22,1,.36,1)}
.ev-searchwrap{position:sticky;top:var(--th);z-index:30;background:var(--bg);padding:20px 0 12px;margin:0 -32px;padding-left:32px;padding-right:32px}
.ev-search{max-width:820px;margin:0 auto;height:58px;display:flex;align-items:center;gap:4px;background:var(--surface2);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:0 7px 0 6px;transition:border-color .15s,box-shadow .15s}
.ev-search:focus-within{border-color:rgba(67,159,232,.55);box-shadow:0 0 0 4px rgba(67,159,232,.12)}
.ev-type{position:relative;flex:none}
.ev-type-btn{height:44px;display:flex;align-items:center;gap:6px;padding:0 12px 0 16px;border:0;border-radius:999px;background:none;color:#fff;font-weight:900;font-size:15px;cursor:pointer}
.ev-type-btn:hover,.ev-type-btn[aria-expanded=true]{background:rgba(255,255,255,.06)}
.ev-type::after{content:"";position:absolute;right:-3px;top:13px;bottom:13px;width:1px;background:rgba(255,255,255,.12)}
.ev-type-menu{position:absolute;left:0;top:calc(100% + 10px);z-index:60;list-style:none;margin:0;padding:6px;min-width:190px;background:#1b1b1e;border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.ev-type-menu button{width:100%;text-align:left;background:none;border:0;color:#d2d2d7;font-weight:700;font-size:15px;padding:10px 12px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.ev-type-menu button:hover,.ev-type-menu button:focus-visible{background:var(--surface2);color:#fff;outline:none}
.ev-type-menu button[aria-selected=true]{color:#fff}
.ev-type-menu button[aria-selected=true]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue)}
#ev-q{flex:1;min-width:0;height:44px;background:none;border:0;outline:none;color:#fff;font:400 16px Lato,system-ui,sans-serif;padding:0 10px 0 14px}
#ev-q::placeholder{color:#8e8e93}
#ev-q::-webkit-search-cancel-button{display:none}
.ev-clear,.ev-ftog{width:40px;height:40px;flex:none;border:0;border-radius:50%;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.ev-clear:hover,.ev-ftog:hover{background:rgba(255,255,255,.06);color:#fff}
.ev-ftog[aria-pressed=true]{color:var(--blue-l)}
.ev-go{width:46px;height:46px;flex:none;border:0;border-radius:50%;background:var(--blue);color:#0b0b0c;display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .15s}
.ev-go:hover{background:var(--blue-l)}
.ev-go:active{transform:scale(.96)}
.ev-search button:focus-visible,.ev-pill:focus-visible,.ev-it:focus-visible,.ev-kid:focus-visible,.ev-collapse:focus-visible,.ev-tw:focus-visible,.ev-card a:focus-visible,.ev-sub:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ev-sugs{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% - 4px);width:min(820px,calc(100% - 64px));background:#1b1b1e;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px 16px 16px;box-shadow:0 24px 60px rgba(0,0,0,.55);display:flex;flex-wrap:wrap;gap:8px}
.ev-sugs[hidden]{display:none}
.ev-sugs p{width:100%;margin:0 0 2px;font-size:13px;font-weight:700;color:var(--dim)}
.ev-sug{background:var(--surface2);border:0;color:#e5e5ea;font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;cursor:pointer}
.ev-sug:hover{background:#f5f5f7;color:#111}

.ev-bar{display:flex;align-items:center;gap:12px;padding:6px 0 4px}
.ev-pills{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.ev-nopills .ev-pills{visibility:hidden}
.ev-right{margin-left:auto;flex:none}
.ev-pill{height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:none;color:#e5e5ea;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.ev-pill:hover,.ev-pill[aria-expanded=true]{background:var(--surface2);border-color:rgba(255,255,255,.2)}
.ev-pill svg{color:var(--muted)}
.ev-pill.is-on{background:rgba(67,159,232,.16);border-color:rgba(67,159,232,.6);color:#fff}
.ev-pill.is-on svg{color:var(--blue-l)}
.ev-clearf{background:none;border:0;color:var(--blue-l);font-weight:700;font-size:14px;cursor:pointer;padding:0 6px}
.ev-clearf:hover{color:#fff}
.ev-sort .ev-pill{border-color:transparent}

.ev-head{padding:14px 0 16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.ev-h1{margin:0;font-size:15px;line-height:1.4;font-weight:700;color:#d2d2d7;letter-spacing:0}
.ev-note{margin:0;color:var(--muted);font-size:13px}

/* ---------- masonry ---------- */
.ev-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:16px;align-items:start}
.ev-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.ev-card{position:relative;border-radius:14px;overflow:hidden;background:var(--surface);isolation:isolate}
.ev-media{display:block;background:#111}
.ev-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.ev-card:hover .ev-media img{transform:scale(1.025)}
.ev-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:12px;padding:46px 14px 12px;background:linear-gradient(to top,rgba(6,6,8,.92),rgba(6,6,8,.55) 55%,transparent);opacity:0;transform:translateY(6px);transition:opacity .22s,transform .3s cubic-bezier(.22,1,.36,1);pointer-events:none}
.ev-cap a{pointer-events:auto;grid-column:1;line-height:1.25}
.ev-cap b{font-weight:900;font-size:15px}
.ev-desc{grid-column:1;font-size:13px;color:#c7c7cc;line-height:1.35;display:block}
.ev-price{grid-column:2;grid-row:1 / span 2;align-self:end;font-weight:900;font-size:15px}
.ev-incl{color:var(--blue-l);font-size:13px}
.ev-soon{font:500 12px "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--blue-l)}
.ev-card:hover .ev-cap,.ev-card:focus-within .ev-cap{opacity:1;transform:none}
.ev-badge{position:absolute;right:10px;top:10px;z-index:2;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#e5e5ea;background:rgba(10,10,12,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:6px 9px;border-radius:999px;opacity:0;transition:opacity .2s}
.ev-grid.is-all .ev-badge,.ev-card:hover .ev-badge{opacity:1}
.ev-card .sp-dl{z-index:3}
.ev-none{color:var(--muted);text-align:center;padding:60px 0}
.ev-tm{padding:56px 0 110px;color:var(--dim);font-size:12px;line-height:1.6;max-width:900px}
.ev-tm p{margin:0 0 8px}
.ev-tm .ev-fl a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.ev-tm .ev-fl a:hover{color:var(--text)}

/* ---------- popovers ---------- */
.ev-pop{position:fixed;z-index:80;background:#1b1b1e;border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.55);overflow:auto;padding:12px;animation:ev-pop .16s cubic-bezier(.22,1,.36,1)}
.ev-pop[hidden]{display:none}
@keyframes ev-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ev-fs{border:0;margin:0;padding:0 0 6px;min-width:0}
.ev-fs legend{padding:4px 8px 6px;font-size:13px;font-weight:700;color:var(--dim)}
.ev-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 12px}
.ev-opt{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;font-weight:700;font-size:14px;color:#e5e5ea}
.ev-opt:hover{background:var(--surface2)}
.ev-opt input{width:18px;height:18px;margin:0;accent-color:var(--blue);flex:none}
.ev-opt span{flex:1}
.ev-opt i{font-style:normal;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.ev-opt.is-zero{opacity:.45}
.ev-pop-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);margin:6px -12px -12px;padding:12px}
.ev-done{background:#f5f5f7;color:#111;border:0;border-radius:999px;font-weight:900;font-size:14px;padding:10px 18px;cursor:pointer}
.ev-menu{display:grid;min-width:150px}
.ev-menu button{background:none;border:0;color:#d2d2d7;text-align:left;font-weight:700;font-size:14px;padding:10px 12px;border-radius:10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.ev-menu button:hover{background:var(--surface2);color:#fff}
.ev-menu button[aria-checked=true]{color:#fff}
.ev-menu button[aria-checked=true]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue)}

/* ---------- tablets and phones: the menu becomes a drawer ---------- */
@media (max-width:820px){
  .ev-body,html.ev-mini .ev-body{--sw:0px}
  .ev-side{width:300px;transform:translateX(-104%);transition:transform .32s cubic-bezier(.22,1,.36,1);z-index:90;box-shadow:24px 0 60px rgba(0,0,0,.5)}
  html.ev-open .ev-side{transform:none}
  .ev-scrim{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.6)}
  .ev-collapse{display:none}
  .ev-close{display:grid}
  .ev-mini .ev-side .ev-l{position:static;width:auto;height:auto;overflow:hidden;clip:auto}
  .ev-mini .ev-logo,.ev-mini .ev-n,.ev-mini .ev-tw{display:initial}
  .ev-mini .ev-tw{display:grid}
  .ev-mini .ev-side .ev-brand{padding:0 14px 0 22px;justify-content:flex-start}
  .ev-mini .ev-sec{font-size:13px;height:auto;background:none;margin:22px 12px 8px}
  .ev-mini .ev-it{justify-content:flex-start;padding:0 12px;width:auto;flex:1}
  .ev-mini .ev-par.is-open .ev-fly{display:block}
  .ev-mini .ev-fly-h{display:none}
  .ev-mini .ev-fly ul{padding:2px 0 8px 36px}
  .ev-mini .ev-sub{justify-content:flex-start;padding:12px 14px;width:100%;height:auto;margin:0}
  .ev-mini .ev-foot{justify-items:stretch}
  .ev-mini .ev-plan{display:grid}
  .ev-mini .ev-it[data-tip]:hover::after,.ev-mini .ev-sub:hover::after{display:none}
  .ev-main{padding:var(--th) 16px 0}
  .ev-phone{display:flex;align-items:center;gap:10px;height:60px;position:sticky;top:0;z-index:31;background:var(--head);margin:0 -16px;padding:0 12px 0 6px;border-bottom:1px solid var(--line)}
  .ev-burger{width:44px;height:44px;border:0;background:none;color:#fff;display:grid;place-items:center;border-radius:12px;cursor:pointer}
  .ev-plogo img{height:24px;width:auto}
  .ev-psub{margin-left:auto;background:var(--accent);color:var(--on-accent);font-weight:900;font-size:14px;padding:8px 16px;border-radius:999px}
  .ev-searchwrap{top:60px;margin:0 -16px;padding:12px 16px 8px}
  .ev-search{height:52px;padding:0 5px 0 2px}
  .ev-type-btn{padding:0 8px 0 12px;font-size:14px}
  #ev-q{padding:0 6px 0 10px;font-size:16px}
  .ev-ftog{display:none}
  .ev-go{width:42px;height:42px}
  .ev-sugs{width:calc(100% - 32px)}
  .ev-bar{align-items:flex-start}
  .ev-pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-4px;padding-right:4px;mask-image:linear-gradient(to right,#000 88%,transparent)}
  .ev-pills::-webkit-scrollbar{display:none}
  .ev-pill{height:38px;padding:0 12px}
  .ev-sort .ev-pill span{display:none}
  .ev-sort .ev-pill{padding:0 10px;border-color:rgba(255,255,255,.12)}
  .ev-head{padding:10px 0 12px}
  .ev-grid,.ev-col{gap:10px}
  .ev-card{border-radius:12px}
}
/* touch: captions sit under the picture, always readable */
@media (hover:none){
  .ev-cap{position:static;opacity:1;transform:none;background:none;padding:10px 12px 12px;pointer-events:auto}
  .ev-badge{opacity:1}
  .ev-grid:not(.is-all) .ev-badge{display:none}
}
@media (max-width:480px){
  .ev-cap{grid-template-columns:1fr}
  .ev-price{grid-column:1;grid-row:auto;margin-top:4px;font-size:14px}
  .ev-desc{display:none}
  .ev-cap b{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .ev-side,.ev-main,.ev-cap,.ev-media img,.ev-tw svg{transition:none}
  .ev-pop,.ev-mini .ev-par.is-fly .ev-fly{animation:none}
  .ev-card:hover .ev-media img{transform:none}
}
.ev-clear[hidden]{display:none}
.ev-sort-ico{display:none}
@media (max-width:820px){.ev-sort-ico{display:block;color:#e5e5ea!important}.ev-sort .ev-pill > svg:last-child{display:none}}
@media (max-width:480px){.ev-grid.is-all .ev-badge,.ev-badge{display:none}}


/* ---------- no top bar (Oct 30, later): everything in the side menu ---------- */
.ev-phone{display:none}
/* logo: full when the menu is open, the flash mark when collapsed */
.ev-logo{display:flex;align-items:center}
.ev-logo-mark{display:none;width:30px;height:30px}
.ev-mini .ev-side .ev-logo{display:flex;flex:none}
.ev-mini .ev-logo-full{display:none}
.ev-mini .ev-logo-mark{display:block}
.ev-mini .ev-side .ev-brand{height:auto;flex-direction:column;gap:10px;padding:22px 0 6px}
/* search: neutral grays, no blue */
.ev-search{background:rgba(255,255,255,.07)}
.ev-search:focus-within{border-color:rgba(255,255,255,.28);box-shadow:none;background:rgba(255,255,255,.09)}
.ev-ftog[aria-pressed=true]{color:#fff}
.ev-go{background:rgba(255,255,255,.12);color:#fff}
.ev-go:hover{background:rgba(255,255,255,.2)}
.ev-type-menu button[aria-selected=true]::after{background:#fff}
.ev-search button:focus-visible{outline-color:#fff}
@media (max-width:820px){
  .ev-phone{display:flex}
  .ev-mini .ev-logo-full{display:block}
  .ev-mini .ev-logo-mark{display:none}
}

/* more room under the logo and the menu toggle */
.ev-brand{height:92px;padding-top:6px}
.ev-nav{padding-top:10px}
.ev-mini .ev-side .ev-brand{padding:24px 0 16px}

/* ---------- Home: one shelf per category ---------- */
.ev-grid.is-home{display:block}
.ev-shelf-sec{padding:0 0 44px}
.ev-shelf-sec + .ev-shelf-sec{padding-top:32px;border-top:1px solid var(--line)}
.ev-shead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 16px}
.ev-shead h2{margin:0;font-size:22px;line-height:1.2;font-weight:900;letter-spacing:-.01em;display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;text-wrap:balance}
.ev-shead p{margin:5px 0 0;color:var(--muted);font-size:14px}
.ev-tag{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#d2d2d7;border:1px solid rgba(255,255,255,.18);padding:5px 9px;border-radius:999px}
.ev-seeall{flex:none;display:inline-flex;align-items:center;gap:8px;color:#e5e5ea;font-weight:700;font-size:14px;padding:9px 14px 9px 16px;border-radius:999px;background:rgba(255,255,255,.06);transition:background .15s,color .15s}
.ev-seeall svg{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.ev-seeall:hover{background:rgba(255,255,255,.12);color:#fff}
.ev-seeall:hover svg{transform:translateX(3px)}
.ev-seeall:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ev-shelf{display:grid;grid-template-columns:repeat(var(--per),minmax(0,1fr));gap:16px}
.ev-shelf-ps .ev-cap b{font-size:14px}
@media (max-width:820px){
  .ev-shelf{gap:10px}
  .ev-shelf-sec{padding-bottom:32px}
  .ev-shelf-sec + .ev-shelf-sec{padding-top:24px}
  .ev-shead{margin-bottom:12px}
  .ev-shead h2{font-size:19px}
  .ev-shead p{font-size:13px}
  .ev-seeall{padding:8px 12px;font-size:13px}
}
@media (hover:none){.ev-shelf .ev-badge{display:none}}
.ev-shelf .ev-badge{display:none}
@media (prefers-reduced-motion:reduce){.ev-seeall svg{transition:none}.ev-seeall:hover svg{transform:none}}

/* the logo is Home */
.ev-sec1{margin-top:6px}
.ev-mini .ev-sec1{display:none}
.ev-home{border-radius:10px}
.ev-home:focus-visible{outline:2px solid #fff;outline-offset:4px}
.ev-logo-mark{transition:transform .2s cubic-bezier(.22,1,.36,1)}
.ev-mini .ev-logo:hover .ev-logo-mark{transform:scale(1.08)}
.ev-mini .ev-logo{position:relative}
.ev-mini .ev-logo:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 20px);top:50%;transform:translateY(-50%);background:#f5f5f7;color:#111;font-size:13px;font-weight:700;padding:6px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;z-index:70}
@media (max-width:820px){.ev-mini .ev-logo:hover::after{display:none}}

/* wordmark like MotionVFX: the mark, then the name large and widely spaced, Stock and Presets apart */
.ev-logo{gap:12px;min-width:0}
.ev-logo-mark,.ev-mini .ev-logo-mark{display:block;width:34px;height:34px;flex:none}
.ev-wordmark{font:700 13px/1 Lato,system-ui,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:#fff;white-space:nowrap;word-spacing:.18em}
.ev-mini .ev-wordmark{display:none}
.ev-brand{padding-left:20px}
/* collapsed: the menu toggle sits well below the mark */
.ev-mini .ev-side .ev-brand{gap:30px;padding:26px 0 18px}
@media (max-width:820px){
  .ev-mini .ev-wordmark{display:inline}
  .ev-mini .ev-side .ev-brand{gap:12px}
}

/* a category still to come: listed, not clickable */
.ev-kid.is-soon{color:var(--dim);cursor:default}
.ev-kid.is-soon:hover{background:none;color:var(--dim)}
.ev-kid.is-soon .ev-n{color:var(--dim)}

/* ---------- sign in (demo): email a one-time link and code, or Continue with Google; no password ---------- */
.au{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:40px 36px 30px;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:#141416;color:var(--text);box-shadow:0 40px 120px rgba(0,0,0,.6);overflow:auto}
.au::backdrop{background:rgba(0,0,0,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.au[open]{animation:au-in .28s cubic-bezier(.22,1,.36,1)}
.au[open]::backdrop{animation:au-fade .28s ease-out}
@keyframes au-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes au-fade{from{opacity:0}to{opacity:1}}
.au-step{text-align:center}
.au-step[hidden]{display:none}
.au-step:not([hidden]){animation:au-step .26s cubic-bezier(.22,1,.36,1)}
@keyframes au-step{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.au-x{position:absolute;right:14px;top:14px;width:38px;height:38px;border:0;border-radius:50%;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.au-x:hover{background:var(--surface2);color:#fff}
.au-mark{display:block;margin:0 auto 18px;width:44px;height:44px}
.au h2{margin:0;font-size:24px;line-height:1.2;font-weight:900;letter-spacing:-.01em;outline:none}
.au-lede{margin:10px auto 26px;color:var(--muted);font-size:15px;line-height:1.5;max-width:32ch}
.au-lede b{color:#fff;font-weight:700;word-break:break-all}
.au-google,.au-btn{width:100%;height:50px;border-radius:999px;font:700 15px Lato,system-ui,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s,opacity .15s,transform .15s}
.au-google{background:#fff;color:#1f1f1f;border:0}
.au-google:hover{background:#ececee}
.au-google.is-busy,.au-btn.is-busy{opacity:.7;pointer-events:none}
.au-or{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--dim);font-size:13px;font-weight:700}
.au-or::before,.au-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
.au-form{text-align:left}
.au-lab{display:block;font-size:13px;font-weight:700;color:#d2d2d7;margin:0 0 8px 4px}
.au-in{width:100%;height:50px;box-sizing:border-box;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:#fff;font:400 16px Lato,system-ui,sans-serif;padding:0 16px;outline:none;transition:border-color .15s,background .15s}
.au-in::placeholder{color:#8e8e93}
.au-in:focus{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.08)}
.au-in[aria-invalid=true]{border-color:#ff7b72}
.au-err{margin:8px 4px 0;color:#ff9b94;font-size:13px;font-weight:700;text-align:left}
.au-btn{margin-top:14px;border:0;background:#f5f5f7;color:#111}
.au-btn:hover:not(:disabled){background:#fff}
.au-btn:active:not(:disabled){transform:scale(.985)}
.au-btn:disabled{opacity:.35;cursor:default}
.au-ghost{background:rgba(255,255,255,.08);color:#fff}
.au-ghost:hover:not(:disabled){background:rgba(255,255,255,.14)}
.au-fine{margin:18px 4px 0;color:var(--muted);font-size:13px;line-height:1.5}
.au-alt{margin:14px 0 0;color:var(--muted);font-size:14px}
.au-alt a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.au-icon{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);color:#fff}
.au-ok{background:rgba(242,193,78,.16);color:var(--accent)}
.au-code fieldset{border:0;margin:0;padding:0;min-width:0}
.au-code legend{padding:0;margin:0 auto 10px;font-size:13px;font-weight:700;color:#d2d2d7}
.au-boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.au-d{width:100%;min-width:0;height:58px;box-sizing:border-box;text-align:center;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:#fff;font:700 24px "IBM Plex Mono",ui-monospace,monospace;outline:none;caret-color:#fff;transition:border-color .15s,background .15s}
.au-d:focus{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.09)}
.au-d:nth-child(3){margin-right:6px}
.au-row{display:flex;justify-content:space-between;gap:12px;margin:18px 2px 0}
.au-link{background:none;border:0;padding:4px 0;color:#d2d2d7;font:700 14px Lato,system-ui,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}
.au-link:hover:not(:disabled){color:#fff;text-decoration-color:#fff}
.au-link:disabled{color:var(--dim);text-decoration:none;cursor:default}
.au-demo{margin:22px 0 0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);color:var(--muted);font-size:13px;line-height:1.5}
.au-demo .au-link{font-size:13px;padding:0}
.au button:focus-visible,.au a:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* the email itself, as a light email client would show it */
.au-mail-h{margin:0 0 14px;font-weight:900;font-size:18px;outline:none}
.au-mail{border-radius:14px;overflow:hidden;background:#f5f5f7;color:#1d1d1f;text-align:left}
.au-mail-top{display:grid;gap:2px;padding:12px 16px;background:#e8e8ed;font-size:12px;color:#424245}
.au-mail-body{padding:22px 22px 20px;text-align:center;background:#fff}
.au-mail-body img{display:block;margin:0 auto;height:26px;width:auto;filter:invert(1)}
.au-mail-body h3{margin:16px 0 6px;font-size:20px;font-weight:900}
.au-mail-body p{margin:0 0 14px;font-size:14px;line-height:1.5;color:#424245}
.au-mail-btn{display:inline-block;margin:4px 0 18px;padding:12px 22px;border-radius:999px;background:#111;color:#fff;font-weight:700;font-size:14px}
.au-mail-code{font:700 26px/1 "IBM Plex Mono",ui-monospace,monospace!important;letter-spacing:.12em;color:#111!important}
.au-mail-small{font-size:12px!important;color:#6e6e73!important;margin:0!important}
.au-unpeek{margin-top:16px}
@media (max-width:480px){
  .au{padding:34px 20px 22px;border-radius:20px}
  .au-d{height:52px;font-size:21px}
  .au-boxes{gap:6px}
  .au-row{flex-direction:column;align-items:center;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .au[open],.au[open]::backdrop,.au-step:not([hidden]){animation:none}
}

/* film edge-print text (Tim: "can we weave in this type of color text"): the look line in amber typewriter caps */
.ev-lk{grid-column:1;display:block;margin:3px 0 1px;font:500 11.5px/1.45 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(232,178,92,.9)}
@media (hover:none){.ev-lk{color:var(--edge-print)}}

/* 0.1.4: the site's own logo (the theme header's, 180 x 42) when the menu is open, the mark alone when it is
   collapsed. img in the selectors: base.css .ev-body img{display:block} outranks a plain class. */
/* 0.1.5: logo.png is trimmed to its artwork (933 x 239), so at 45 px its round mark is 34 px, the size of the collapsed
   mark; the margins put that mark on the menu icons' center (x 34) and at the collapsed mark's top (26) */
.ev-logo img.ev-logo-full{display:block;height:45px;width:auto;max-width:none;margin:-4.5px 0 1.5px -3px}
.ev-logo img.ev-logo-mark{display:none}
.ev-mini .ev-logo img.ev-logo-full{display:none}
.ev-mini .ev-logo img.ev-logo-mark{display:block}
@media (max-width:820px){.ev-mini .ev-logo img.ev-logo-full{display:block}.ev-mini .ev-logo img.ev-logo-mark{display:none}}
/* 0.1.6: the collapse button sits at the bottom of the menu, last in the footer under Get All Access and Sign in
   (the WordPress admin spot), so the logo has the top to itself; same spot open and collapsed, its icon in line with
   the menu icons; phones keep the X beside the logo */
@media (min-width:821px){
.ev-body .ev-side .ev-brand{height:auto;padding:26px 0 22px 20px}
.ev-mini .ev-side .ev-brand{flex-direction:column;align-items:center;padding:26px 0 22px}
.ev-side .ev-foot .ev-collapse{display:flex;align-items:center;justify-content:flex-start;gap:14px;width:auto;height:44px;padding:0 12px;font:inherit;font-size:14px;color:var(--muted)}
.ev-side .ev-foot .ev-collapse:hover{color:#fff}
.ev-mini .ev-side .ev-foot .ev-collapse{justify-content:center;padding:0;width:48px;margin:0 auto}}
/* 0.1.8 (Tim, Nov 1, 2026: "make the flyout work like envato"): the toggle sits beside the logo while the menu is open
   and is gone while it is collapsed; hovering (or tabbing into) the collapsed menu slides it out over the page
   (html.ev-peek: full width, the page stays where it is), and the toggle in that state keeps the menu open */
@media (min-width:821px){
.ev-body .ev-side .ev-brand{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;padding:26px 14px 22px 20px}
.ev-side .ev-brand .ev-collapse{display:grid;width:36px;height:36px;margin-left:auto;transform:translateY(-3px)}  /* centred on the STOCK PRESETS lettering (its middle is 49.8% down logo.png, 75.9 px, against the button's 79 px) */
.ev-mini .ev-side .ev-brand{flex-direction:column;justify-content:center;padding:26px 0 22px}
.ev-mini .ev-side .ev-brand .ev-collapse{display:none}
html.ev-peek .ev-side{box-shadow:24px 0 60px rgba(0,0,0,.55);z-index:60}
html.ev-peek .ev-main{margin-left:76px}}
@media (max-width:820px){.ev-side .ev-brand .ev-collapse{display:none}}
/* phones: the drawer's top row is the same whether or not the menu was last collapsed on a computer (an earlier rule
   stacked the logo over the X when ev-mini was remembered) */
@media (max-width:820px){.ev-mini .ev-side .ev-brand{flex-direction:row;align-items:center;justify-content:normal;gap:8px;height:92px;padding:6px 14px 0 20px}.ev-mini .ev-side .ev-logo{flex:1 1 0%}}
