/* catalogue.css - plugins.html and plugin/<slug>.html (generated by tools/build-catalogue.mjs; docs/CATALOGUE.md).
   Load after tokens.css, kit.css, app.css. Tokens only; dark theme; orange = brand, violet is not used here.
   Symmetry rules of docs/DESIGN.md: equal cards, equal panel heights, wrapped rows centred, mirrored prev / next. */

/* Catalogue-local token: --text-3 (#667389) is only 3.7-4.0:1 on the panel colours, below WCAG AA for small text. Every dim text of these pages
   (hints, counts, blurbs, captions, labels) uses --cat-dim: 5.6:1 on --bg-2, 5.0:1 on --bg-3 (tools/catalogue-audit.mjs checks the pairs). */
:root{--cat-dim:#8391a8}
picture{display:contents}   /* the <picture> wrapper must not take part in the layout: the <img> keeps its own box rules */

/* ---------- both languages live in the markup; <html lang> (assets/catalogue/boot.js) picks one ---------- */
html[lang="tr"] .l-en{display:none}
html:not([lang="tr"]) .l-tr{display:none}
html:not(.js) .cat-tools{display:none}   /* search + chips need JS; the full list stays readable without it */
[hidden]{display:none!important}

body.cat{position:relative;overflow-x:hidden;min-height:100vh;background:var(--bg-0);color:var(--text);font-size:15px;line-height:1.6;display:flex;flex-direction:column}
body.cat::before{content:"";position:absolute;inset:0 0 auto 0;height:720px;pointer-events:none;z-index:0;
  background:radial-gradient(60% 70% at 70% 0%,rgba(255,122,26,.18),transparent 70%),radial-gradient(40% 50% at 92% 30%,rgba(155,107,255,.07),transparent 70%)}
.cat-top,.cat-main,.cat-footer{position:relative;z-index:1;width:100%}
.cat-top{z-index:2}   /* the signed-in account menu (js/account/chip.js) hangs from the header: it must paint over the page, which comes later and has the same level */
.cat-skip{position:absolute;left:12px;top:-60px;z-index:var(--z-tip);padding:8px 14px;border-radius:var(--radius-s);background:var(--accent);color:var(--text-inv);font-weight:700;text-decoration:none}
.cat-skip:focus{top:12px;outline:none;box-shadow:var(--ring)}
body.cat a{color:inherit}
body.cat a.cat-skip{color:var(--text-inv)}   /* dark text on the orange fill (7.3:1); "body.cat a" above would make it light (2.2:1) */
.cat-footer .bm-dim{color:var(--cat-dim)}      /* kit.css .bm-dim is --text-3 (4.15:1); the footer text is small */
body.cat :focus-visible{outline:none;box-shadow:var(--ring)}
/* components that set their own box-shadow with a higher specificity (the active language tab, the disabled buy button) must still show the ring on keyboard focus */
body.cat .cat-lang .bm-tab:focus-visible,body.cat .bm-btn.cat-buy-btn[aria-disabled="true"]:focus-visible{box-shadow:var(--ring)}
body.cat h1,body.cat h2,body.cat h3,.cat-sub,.cat-lead,.cat-group-blurb,.cat-sec-sub,.cat-fb-title{text-wrap:balance}

/* ---------- header: brand | nav | language, the middle column is centred ---------- */
.cat-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-4);max-width:1180px;margin:0 auto;padding:14px 16px}
.cat-top .cat-top-right{justify-self:end;margin-left:0}
.cat-brand{justify-self:start}
.cat-nav{display:flex;justify-content:center;gap:4px}
.cat-nav a{color:var(--text-2);text-decoration:none;padding:7px 12px;border-radius:var(--radius-s);font-weight:600;transition:background var(--t-fast),color var(--t-fast)}
.cat-nav a:hover{color:var(--text);background:var(--bg-3)}
.cat-nav a[aria-current="page"]{color:var(--text);background:var(--bg-3);box-shadow:inset 0 -2px 0 var(--accent)}
.cat-lang .bm-tab{padding:5px 10px;font-size:var(--fs-s)}
@media (max-width:340px){.cat-brand{zoom:.85}}   /* brand + account icon + language on one line at 320 px (the landing page makes its lockup smaller at this width as well) */
@media (max-width:720px){
  .cat-top{grid-template-columns:1fr auto;grid-template-areas:"brand lang" "nav nav";row-gap:var(--sp-2)}
  .cat-brand{grid-area:brand}.cat-top-right{grid-area:lang}.cat-nav{grid-area:nav}
}

.cat-main{max-width:1180px;margin:0 auto;padding:0 16px 80px;flex:1}

/* ---------- intro ---------- */
.cat-intro{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 0 32px}
.cat-eyebrow{height:26px;padding:0 12px;font-size:11px}
.cat-h1{font-size:clamp(36px,6.4vw,64px);line-height:1.04;letter-spacing:-.035em;font-weight:850;margin:16px 0 0}
.cat-sub{color:var(--text-2);font-size:clamp(15px,2.1vw,18px);max-width:62ch;margin:14px 0 0;line-height:1.55}
.cat-h2{font-size:clamp(22px,3.4vw,32px);letter-spacing:-.025em;font-weight:800;margin:0;text-align:center}
.cat-hint{margin:0;color:var(--cat-dim);font-size:var(--fs-s);line-height:1.5;text-wrap:balance}

/* ---------- equal-column rows: wrapped rows are centred, column count follows the container (like the landing plugin grid) ----------
   Mobile = one column: the container is the page width minus the 2 x 16 px gutter, so a container below 668 px is a viewport below 700 px. */
.cat-cols{--gap:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);container-type:inline-size;list-style:none;margin:0;padding:0}
.cat-cols>*{flex:0 0 100%;min-width:0}
@container (min-width:668px){.cat-cols>*{flex-basis:calc((100% - var(--gap))/2)}}
@container (min-width:780px){.cat-cols>*{flex-basis:calc((100% - 2*var(--gap))/3)}}
@container (min-width:1040px){.cat-cols.cat-cols-4>*{flex-basis:calc((100% - 3*var(--gap))/4)}}
/* a list of 4 steps is 2 + 2 (never 3 + 1) and 7 / 8 feature tiles are 4 + 3 / 4 + 4 on the widest layout (never 3 + 3 + 1): no lone tile where it can be avoided */
.cat-cols.cat-cols-2{max-width:900px;margin-inline:auto;width:100%}
@container (min-width:780px){.cat-cols.cat-cols-2>*{flex-basis:calc((100% - var(--gap))/2)}}

/* ---------- Full Band ---------- */
.cat-fb{display:grid;grid-template-columns:1fr;gap:var(--sp-5);align-items:center;padding:clamp(20px,4vw,36px);margin-top:8px;border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--bg-2)),var(--bg-1));box-shadow:0 0 0 1px var(--accent-soft),0 18px 60px rgba(255,122,26,.12);scroll-margin-top:16px}
@media (min-width:860px){.cat-fb{grid-template-columns:1fr 1fr;gap:var(--sp-6)}}
.cat-fb-info{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3);min-width:0}   /* stacked layout: the block is centred */
@media (min-width:860px){.cat-fb-info{align-items:flex-start;text-align:left}}
.cat-fb-label{height:24px;padding:0 12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.cat-fb-title{margin:0;font-size:clamp(24px,3.6vw,36px);line-height:1.12;letter-spacing:-.03em;font-weight:850}
.cat-checks{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--text-2);justify-items:start;text-align:left;width:fit-content;max-width:100%}
.cat-checks li{position:relative;padding-left:26px;line-height:1.4;text-wrap:balance}
.cat-checks li::before{content:"";position:absolute;left:3px;top:.38em;width:10px;height:6px;border-left:2px solid var(--good);border-bottom:2px solid var(--good);transform:rotate(-45deg)}
.cat-fb-price{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px}
@media (min-width:860px){.cat-fb-price{justify-content:flex-start}}
.cat-fb-price b{font-size:44px;line-height:1;letter-spacing:-.03em;font-weight:850}
.cat-fb-price>span:not(.bm-chip){color:var(--cat-dim)}
.cat-fb-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);width:100%;max-width:520px}
.cat-fb-actions>*{flex:1 1 180px}
.cat-fb-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.cat-fb-mosaic span{display:block;aspect-ratio:16/10;border:1px solid var(--line-2);border-radius:var(--radius-s);overflow:hidden;background:var(--bg-1);box-shadow:var(--shadow-1)}
.cat-fb-mosaic img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* buy buttons: the coming-soon state is a clear, calm "not yet" (aria-disabled, focusable); the store flips it through assets/catalogue/store.js */
.cat-buy-btn{width:100%}
.bm-btn.cat-buy-btn[aria-disabled="true"]{background:var(--bg-3);border:1px dashed var(--line-3);color:var(--text-2);box-shadow:none;cursor:not-allowed;font-weight:700}
.bm-btn.cat-buy-btn[aria-disabled="true"]:hover{filter:none;box-shadow:none;background:var(--bg-3)}

/* ---------- search + category chips ---------- */
.cat-tools{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);margin-top:var(--sp-7);scroll-margin-top:16px}
.cat-search{position:relative;display:block;width:min(560px,100%)}
.cat-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--cat-dim);pointer-events:none}
.cat-q{width:100%;height:var(--ctl-h-lg);padding:0 16px 0 42px;font:inherit;font-size:15px;color:var(--text);background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-pill);transition:border-color var(--t-fast)}
.cat-q::placeholder{color:var(--cat-dim)}
.cat-q:hover{border-color:var(--line-3)}
.cat-q:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.cat-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:940px}   /* two balanced rows (7 + 6) instead of 12 + 1 */
.cat-chip{font:inherit;font-size:13px;font-weight:650;color:var(--text-2);background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-pill);min-height:32px;padding:0 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all var(--t-fast)}
.cat-chip i{font-style:normal;font:600 11px var(--mono);color:var(--cat-dim)}
.cat-chip:hover{color:var(--text);border-color:var(--cat-dim)}
.cat-chip.is-on{color:var(--text-inv);background:var(--accent);border-color:var(--accent)}
.cat-chip.is-on i{color:var(--text-inv);opacity:.7}
.cat-count{margin:0;color:var(--cat-dim);font-size:var(--fs-m)}

/* ---------- category groups + cards ---------- */
.cat-groups{display:flex;flex-direction:column;gap:var(--sp-7);margin-top:var(--sp-6)}
.cat-group{scroll-margin-top:16px}
.cat-group-head{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:var(--sp-4);text-align:center}
.cat-group-head .cat-h2::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c,var(--accent));margin-right:12px;vertical-align:.12em;box-shadow:0 0 12px color-mix(in srgb,var(--c,var(--accent)) 60%,transparent)}
.cat-group-blurb{margin:0;color:var(--cat-dim)}
.cat-card{display:flex;flex-direction:column;text-decoration:none;color:var(--text);background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med),border-color var(--t-fast);box-shadow:var(--shadow-1)}
.cat-card:hover,.cat-card:focus-visible{transform:translateY(-3px);border-color:var(--c,var(--accent));box-shadow:0 16px 44px color-mix(in srgb,var(--c,var(--accent)) 18%,transparent)}
.cat-card-shot{position:relative;display:block;aspect-ratio:16/10;background:var(--bg-1);border-bottom:1px solid var(--line);overflow:hidden}
.cat-card-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.cat-card-flag{position:absolute;right:10px;top:10px;height:22px;padding:0 9px;font-size:10.5px;backdrop-filter:blur(4px)}
.cat-card-body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;flex:1}
.cat-card-cat{font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--accent-2))}
.cat-card-name{font-size:17px;font-weight:750;letter-spacing:-.01em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-card-tag{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;color:var(--text-2);font-size:var(--fs-m);line-height:1.45;height:calc(2 * 1.45em)}
.cat-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.cat-price{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.cat-card-go{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:var(--fs-m);color:var(--accent-2)}
.cat-card-go svg{transition:transform var(--t-fast)}
.cat-card:hover .cat-card-go svg{transform:translateX(4px)}
.cat-art{position:absolute;inset:0;display:grid;place-items:center;color:var(--c,var(--accent));background:radial-gradient(70% 90% at 50% 40%,color-mix(in srgb,var(--c,var(--accent)) 16%,var(--bg-2)),var(--bg-1))}
.cat-empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-6);margin:var(--sp-6) auto 0;max-width:560px;text-align:center}
.cat-empty p{margin:0;color:var(--text-2)}
.cat-empty[hidden]{display:none}

/* ---------- detail: breadcrumbs, hero ---------- */
.cat-crumbs{padding:6px 0 18px}
.cat-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;list-style:none;margin:0;padding:0;color:var(--cat-dim);font-size:var(--fs-m)}
.cat-crumbs li+li::before{content:"/";margin-right:6px;color:var(--cat-dim)}
.cat-crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:28px;min-width:28px;color:var(--text-2);text-decoration:none}
.cat-crumbs a:hover{color:var(--accent-2)}
.cat-crumbs [aria-current]{color:var(--text)}
.cat-hero{display:grid;grid-template-columns:1fr;gap:var(--sp-5);align-items:stretch}
@media (min-width:900px){.cat-hero{grid-template-columns:1fr 1fr}}
.cat-hero-info{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3);padding:clamp(20px,3.4vw,32px);min-width:0}   /* the whole info panel is centred: every row is symmetric */
.cat-hero-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cat-tag-cat{color:var(--c,var(--accent-2));border-color:color-mix(in srgb,var(--c,var(--accent)) 50%,var(--line-2))}
/* the name must fit on ONE line (a two-word name wrapped to one word per line is an orphan): --n = characters of the longer name (set by the generator),
   the size follows the width of the info panel (container query unit) and caps at 48 px, so short names stay big and "Multiband Compressor" shrinks to fit */
.cat-hero-info{container-type:inline-size}
.cat-h1-plugin{font-size:clamp(26px,calc(100cqi/(var(--n,12)*.58)),48px);margin:6px 0 0}
.cat-lead{margin:0;font-size:clamp(16px,2vw,19px);line-height:1.5;color:var(--text);font-weight:600}
.cat-sum{margin:0;color:var(--text-2);line-height:1.65}
.cat-buy{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);width:100%;margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--line)}
.cat-buy-price{display:flex;align-items:center;justify-content:center;gap:14px;text-align:left}
.cat-buy-price b{font-size:44px;line-height:1;letter-spacing:-.03em;font-weight:850}
.cat-buy-price>span{color:var(--text-2);font-size:var(--fs-m);line-height:1.4;text-wrap:balance}
.cat-buy-price strong{display:block;color:var(--text)}
.cat-buy-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.cat-buy-actions>*{width:100%}
@media (max-width:520px){.cat-buy-actions{grid-template-columns:1fr}}
.cat-buy-fb{margin:0;color:var(--cat-dim);font-size:var(--fs-s);line-height:1.5}
.cat-buy-fblink{display:inline-flex;align-items:center;gap:6px;min-height:28px;color:var(--accent-2);font-weight:650;font-size:var(--fs-m);text-decoration:none}
.cat-buy-fblink:hover{text-decoration:underline}
.cat-hero-shot{display:flex;flex-direction:column;gap:var(--sp-3);margin:0;padding:clamp(14px,2.4vw,22px);min-width:0;background:linear-gradient(180deg,var(--bg-2),var(--bg-1))}
.cat-shot-frame{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:220px}
/* the panel images already carry the frame's own 1 px border and rounded corners (transparent outside): only a shadow that follows the alpha, no second outline.
   Vocal Toner is a square-cornered opaque editor capture: it keeps radius + border. */
.cat-shot-frame img{display:block;max-width:100%;height:auto;max-height:640px;width:auto;filter:drop-shadow(0 12px 26px rgba(0,0,0,.5))}
body.cat[data-id="vocal-toner"] .cat-shot-frame img{border-radius:var(--radius-m);border:1px solid var(--line-2);box-shadow:var(--shadow-2);filter:none}
.cat-shot-frame .cat-art{position:relative;inset:auto;width:100%;min-height:260px;border-radius:var(--radius-m)}
.cat-shot-cap{margin:0;text-align:center;color:var(--cat-dim);font-size:var(--fs-s);text-wrap:balance}

/* ---------- detail sections ---------- */
.cat-sec{margin-top:clamp(40px,7vw,64px);display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
.cat-sec>*{width:100%}
.cat-sec-sub{margin:-8px 0 0;text-align:center;color:var(--cat-dim)}
.cat-feat>span,.cat-step>span:last-child,.cat-spec dd,.cat-sum,.cat-buy-fb{text-wrap:balance}
.cat-feat,.cat-step{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--bg-1);line-height:1.45}
.cat-feat svg{flex:none;margin-top:2px;color:var(--good)}
.cat-step-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--accent-soft);color:var(--accent-2);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.cat-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:0;padding:0}
.cat-tagchip{display:inline-flex;align-items:center;min-height:34px;padding:4px 16px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:var(--bg-2);color:var(--text-2);font-weight:600;text-align:center}
.cat-tagchip-mono{font:600 12px var(--mono)}
.cat-specs{width:100%;max-width:760px;margin:0 auto;padding:6px 0;display:block}
.cat-spec{display:grid;grid-template-columns:minmax(110px,200px) 1fr;gap:16px;align-items:baseline;padding:12px 22px;border-top:1px solid var(--line)}
.cat-spec:first-child{border-top:0}
.cat-spec dt{margin:0;color:var(--cat-dim);font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cat-spec dd{margin:0;color:var(--text);line-height:1.5}
@media (max-width:520px){.cat-spec{grid-template-columns:1fr;gap:2px}}

/* ---------- previous / next: always both (the order wraps around), mirrored ---------- */
.cat-pn{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:clamp(40px,7vw,64px)}
.cat-pn-a{display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 20px;text-decoration:none;color:var(--text);border:1px solid var(--line);border-radius:var(--radius-m);background:var(--bg-1);transition:border-color var(--t-fast),background var(--t-fast)}
.cat-pn-a:hover{border-color:var(--accent);background:var(--bg-2)}
.cat-pn-prev{align-items:flex-start;text-align:left}
.cat-pn-next{align-items:flex-end;text-align:right}
.cat-pn-dir{display:inline-flex;align-items:center;gap:8px;color:var(--cat-dim);font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cat-pn-name{font-weight:750;font-size:17px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:520px){.cat-pn{grid-template-columns:1fr}.cat-pn-next{align-items:flex-start;text-align:left}}

/* ---------- footer ---------- */
.cat-footer{display:grid;grid-template-columns:1fr auto 1fr;gap:12px 24px;align-items:center;max-width:1180px;margin:0 auto;padding:28px 16px 40px;border-top:1px solid var(--line)}
.cat-foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-wrap:balance}   /* as on the landing page: a wrapped tagline never leaves one word alone */
.cat-foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.cat-foot-nav a{color:var(--text-2);text-decoration:none;font-weight:600;padding:7px 2px}
.cat-foot-nav a:hover{color:var(--accent-2)}
.cat-footer>.cat-foot-copy{justify-self:end}
/* legal row (the same as the landing page): the five legal links on one centred line, the trademark line under it; one column of links below 900 px */
.cat-foot-legal{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--line)}
.cat-foot-legal-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px}
.cat-foot-legal-nav a{color:var(--text-2);text-decoration:none;font-size:var(--fs-s);font-weight:600;padding:7px 2px}
.cat-foot-legal-nav a:hover{color:var(--accent-2)}
.cat-foot-tm{margin:0;max-width:92ch;text-align:center;color:var(--text-2);font-size:var(--fs-s);line-height:1.55;text-wrap:balance}
@media (max-width:900px){.cat-foot-legal-nav{flex-direction:column;align-items:center;gap:0}}
@media (max-width:760px){
  .cat-footer{grid-template-columns:1fr;justify-items:center;text-align:center}
  .cat-footer>.cat-foot-copy{justify-self:center}
  .cat-foot-brand{align-items:center}
}
@media (max-width:420px){.cat-foot-nav{flex-direction:column;align-items:center;gap:0}}   /* phones: one centred column, no off-centre middle link */
@media (prefers-reduced-motion:reduce){.cat-card,.cat-card-go svg{transition:none}.cat-card:hover{transform:none}}