/* Catalog composition. Action buttons are defined only in buttons.css. */
body[data-page="catalog"]{--catalog-ink:#e7eff4;--catalog-soft:#a2bac8;--catalog-line:#7793a13d;background:#09131b;color:var(--catalog-ink)}
.catalog-intro{padding-block:22px 32px}
.catalog-breadcrumbs{display:flex;align-items:center;gap:12px;margin-bottom:22px;color:var(--catalog-soft);font-size:11px}
.catalog-breadcrumbs a{display:inline-flex;align-items:center;min-height:32px}
.catalog-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.catalog-heading .eyebrow{margin-bottom:16px}
.catalog-heading h1{font-size:clamp(40px,4.1vw,60px);line-height:1.04}
.catalog-heading h1 span,.catalog-section-heading h2 span{color:var(--catalog-soft)}
.catalog-intro-copy{max-width:360px}
.catalog-intro-copy p{color:var(--catalog-soft);font-size:13px;line-height:1.75}
.catalog-intro-copy .text-link{margin-top:16px}
.catalog-families{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.family-card{position:relative;min-width:0;padding:24px 26px;border:1px solid var(--catalog-line);border-radius:6px;background:radial-gradient(ellipse at 65% 40%,#2d45553d,transparent 62%),#111f29}
.family-klio{background:radial-gradient(ellipse at 60% 42%,#35504e36,transparent 64%),#0e1c24}
.family-top{display:flex;justify-content:space-between;gap:16px;color:#8faab9;font:10px/1.5 var(--font-mono);letter-spacing:.07em;text-transform:uppercase}
.family-top p{color:inherit}
.family-name{margin-top:18px}
.family-name h2{font-size:clamp(28px,2.6vw,38px)}
.family-name p{margin-top:8px;color:var(--catalog-soft);font-size:13px}
.family-image{position:relative;isolation:isolate;display:grid;place-items:center;height:190px;margin:8px 0 14px}
.family-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;filter:drop-shadow(0 14px 18px #0005)}
.family-klio .family-image img{width:88%;margin-inline:auto}
.family-code{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#91b0c309;font:600 clamp(130px,12vw,180px)/1 var(--font-display);letter-spacing:-.07em}
.family-caption{padding-bottom:14px;border-bottom:1px solid var(--catalog-line);color:#94adbc;font:10px/1.5 var(--font-mono)}
.family-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:17px}
.family-bottom>div{min-width:0}
.family-bottom strong{font:400 28px/1.2 var(--font-display);letter-spacing:-.03em}
.family-bottom strong small{font-size:13px;letter-spacing:0}
.family-bottom p{margin-top:6px;color:var(--catalog-soft);font-size:11px;line-height:1.6}
.family-enter{flex-shrink:0}
.catalog-section{padding-block:54px 64px}
.catalog-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;padding-bottom:26px}
.catalog-section-heading .eyebrow{margin-bottom:14px}
.catalog-section-heading h2{font-size:clamp(32px,3vw,40px);line-height:1.12}
.catalog-section-heading>p{max-width:350px;color:var(--catalog-soft);font-size:13px;line-height:1.75}
.catalog-controls{display:grid;grid-template-columns:1.1fr .85fr 1.4fr;gap:16px;padding:20px;border:1px solid var(--catalog-line);border-radius:6px;background:#13242e}
.catalog-controls label{display:flex;flex-direction:column;gap:8px;min-width:0;color:#b2c6d1;font-size:11px}





.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px 2px 16px}
.catalog-toolbar p{color:var(--catalog-soft);font-size:12px}
.catalog-workbench{display:grid;grid-template-columns:minmax(320px,520px) minmax(0,1fr);gap:24px;align-items:start}
.catalog-preview{position:static;isolation:isolate;min-width:0;padding:24px;border:1px solid #7895a55c;border-radius:8px;background:linear-gradient(145deg,#263b48 0%,#111f29 36%,#0b171f 72%);box-shadow:inset 0 1px #c9deec26,0 20px 48px #0003}
.selection-heading{display:flex;justify-content:space-between;gap:12px;color:#9bb4c2;font:9px/1.5 var(--font-mono);letter-spacing:.035em}
.selection-heading>span:last-child{color:#eab18f;white-space:nowrap}
.selection-image{position:relative;isolation:isolate;display:grid;place-items:center;height:300px;margin:8px -16px 20px;background:radial-gradient(ellipse at 50% 45%,#bddce721,transparent 65%)}
.selection-image::before{content:"";position:absolute;inset:auto 12% 0;height:18%;border-radius:50%;background:radial-gradient(ellipse,#8eb2c62b,transparent 68%);transform:scaleY(.3);pointer-events:none}
.selection-image::after{content:"";position:absolute;inset:auto 10% 0;height:1px;background:linear-gradient(90deg,transparent,#9fbac94f,transparent);pointer-events:none}
.selection-image img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 15px #0008)}
.selection-image[data-image="assets/klio/klio-160.png"] img{transform:translate(-2%,-10%) scale(1.35)}
.selection-image>span{position:absolute;inset:-8px 8px auto auto;color:#b6d2e00a;font:600 clamp(140px,15vw,210px)/1 var(--font-display);letter-spacing:-.07em;pointer-events:none}
.selection-caption h3{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 16px;margin:18px 0 0;font-size:32px;line-height:1.18}
.selection-caption h3>span{color:#edaa80;white-space:nowrap;font-size:30px;font-weight:400}
.selection-caption h3 small{font-size:13px;letter-spacing:0}
.selection-specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 20px;padding:16px 0;border-block:1px solid var(--catalog-line)}
.selection-specs dt{color:#9fb6c4;font-size:10px;line-height:1.45}
.selection-specs dd{margin:7px 0 0;color:#edf4f7;font:400 19px/1.2 var(--font-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.selection-specs dd small{font-size:11px;color:#a2bac8}
.selection-actions,.selection-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.selection-links{margin-top:8px}
.selection-actions>*,.selection-links>*{width:100%}
.selection-note{margin-top:12px;color:#91aab9;font-size:10px;line-height:1.65}
.selection-back{display:none}
.catalog-results{min-width:0;padding-bottom:18px;border:1px solid var(--catalog-line);border-radius:6px;background:#0d1b24;overflow:hidden}
.catalog-list-head{display:grid;grid-template-columns:1.5fr 1fr .55fr;gap:12px;padding:16px 98px 16px 84px;border-bottom:1px solid var(--catalog-line);background:#152630;color:#92adbd;font:10px/1.5 var(--font-mono)}
.catalog-row{display:flex;flex-wrap:wrap;align-items:stretch;min-width:0;min-height:90px;border-bottom:1px solid #6c8b9b26}
.catalog-optic-links{flex-basis:100%;padding:12px 16px;border-top:1px solid var(--catalog-line);font-size:12px;color:var(--catalog-soft)}
.catalog-optic-links summary{cursor:pointer;padding-block:8px}
.catalog-optic-links>div{display:flex;flex-wrap:wrap;gap:8px 20px;padding-block:12px}
.catalog-optic-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.selection-optics{min-width:0;margin:0 0 20px;padding:0;border:0}
.selection-optics legend{margin-bottom:10px;color:var(--catalog-soft);font-size:11px}
.selection-optics>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.selection-optics button{min-width:0}


.selection-optics button span{margin-left:2px;font-size:10px}
.catalog-row[data-selected="true"]{background:#e99b6c0c;box-shadow:inset 3px 0 #e99b6c}
.catalog-row-pick{position:relative;display:grid;grid-template-columns:56px minmax(100px,1.5fr) minmax(70px,1fr) minmax(70px,.55fr);align-items:center;gap:12px;flex:1;min-width:0;padding:14px 16px;border:0;text-align:left;color:#e7eff4}
.catalog-row-pick:disabled{opacity:1;cursor:default}
.catalog-row-pick:not(:disabled):hover{background:#9bb5c308}
.catalog-row-pick:focus-visible{position:relative;z-index:1;outline-offset:-4px}
.row-thumb{display:grid;place-items:center;width:56px;height:56px;border-radius:3px;background:#20354080}
.row-thumb img{width:100%;height:100%;object-fit:contain}
.catalog-row-pick small{display:block;color:#9ab3c2;font-size:10px;line-height:1.4;font-weight:400}
.catalog-row-pick strong{display:block;color:#e1edf3;font-size:17px;line-height:1.35;font-weight:400;font-variant-numeric:tabular-nums}
.row-identity{min-width:0}
.row-identity strong{margin-top:5px;font:400 24px/1.1 var(--font-display)}
.row-identity em{color:#99b0be;font:400 11px/1.4 var(--font-body)}
.catalog-row[data-selected="true"] .row-identity strong{color:#f1b38b}
.row-optics strong{margin-top:3px}
.row-select{position:absolute;right:8px;top:8px;width:5px;height:5px;border-radius:50%;background:#e99b6c;opacity:0}
.catalog-row[data-selected="true"] .row-select{opacity:1}
.row-detail{display:flex;align-items:center;justify-content:center;flex:0 0 82px;gap:7px;min-width:0;padding:12px 8px;border-left:1px solid #6c8b9b26;color:#bdd0dc;font-size:10px;line-height:1.5}
.row-detail .button-icon{color:#e8a47b;font-size:16px}
.row-detail:hover{color:#f1c1a2;background:#e99b6c08}
.row-detail:focus-visible{outline-offset:-4px}
#catalog-more{width:calc(100% - 32px);margin:16px 16px 0}
.catalog-data-note{margin:16px 18px 0;color:#91aab9;font-size:10px;line-height:1.7}
.catalog-empty{padding:28px 20px}
.catalog-empty h3{font-size:26px}
.catalog-empty p{margin:14px 0 20px;color:var(--catalog-soft);font-size:13px;line-height:1.7}
.catalog-assistance{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:32px;padding:28px;border:1px solid var(--catalog-line);border-left:3px solid #e99b6c;border-radius:6px;background:#12222c}
.catalog-assistance .eyebrow{margin-bottom:12px}
.catalog-assistance h3{font-size:28px;line-height:1.2}
.catalog-assistance p:not(.eyebrow){max-width:610px;margin-top:12px;color:var(--catalog-soft);font-size:13px;line-height:1.7}
.catalog-assistance .btn{flex-shrink:0}
@media(min-width:1001px) and (min-height:901px){
 .catalog-preview{position:sticky;top:100px}
}
@media(min-width:1001px) and (max-width:1200px){
 .catalog-workbench{grid-template-columns:400px minmax(0,1fr)}
 .catalog-preview{padding:20px}
 .selection-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .selection-image{height:260px}
 .selection-caption h3{font-size:28px}
}
@media(max-width:1100px){
 .catalog-heading{gap:28px}
 .family-card{padding:22px}
 .family-bottom{align-items:flex-start;flex-direction:column;gap:14px}
 .family-enter{width:100%}
 .catalog-controls{grid-template-columns:1fr 1fr 1.4fr;gap:12px}
}
@media(max-width:1000px){
 .catalog-workbench{grid-template-columns:1fr}
 .selection-image{height:340px}
 .selection-back{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-top:8px;color:#eab18f;font-size:12px}
}
@media(max-width:760px){
 .catalog-intro{padding-block:12px 24px}
 .catalog-breadcrumbs{margin-bottom:16px;font-size:10px}
 .catalog-heading{display:block}
 .catalog-heading h1{font-size:40px}
 .catalog-heading .eyebrow{margin-bottom:12px}
 .catalog-intro-copy{max-width:100%;margin-top:18px}
 .catalog-intro-copy p{font-size:12px}
 .catalog-intro-copy br{display:none}
 .catalog-families{grid-template-columns:1fr;gap:14px}
 .family-card{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:12px;padding:18px}
 .family-top{grid-column:1/-1;font-size:9px}
 .family-name{align-self:center;margin:0}
 .family-name h2{font-size:28px}
 .family-name p{font-size:12px;line-height:1.5}
 .family-image{height:140px;margin:0}
 .family-code{font-size:86px}
 .family-klio .family-image img{width:100%}
 .family-caption{grid-column:1/-1;padding-bottom:12px;font-size:9px}
 .family-bottom{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px;padding-top:0}
 .family-bottom strong{font-size:25px}
 .family-bottom p{max-width:180px;font-size:10px}
 .family-enter{width:auto}
 .catalog-section{padding-block:38px 44px}
 .catalog-section-heading{display:block;padding-bottom:22px}
 .catalog-section-heading h2{font-size:32px}
 .catalog-section-heading>p{max-width:100%;margin-top:16px;font-size:12px}
 .catalog-section-heading>p br{display:none}
 .catalog-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;padding:16px}
 .catalog-controls .catalog-search{grid-column:1/-1}
 
 
 .catalog-toolbar{gap:10px}
 .catalog-toolbar p{font-size:11px}
 .catalog-preview{padding:18px}
 .selection-image{height:290px;margin-inline:-10px}
 .selection-caption h3{font-size:28px}
 .selection-specs{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .catalog-list-head{grid-template-columns:minmax(84px,1.4fr) minmax(62px,1fr) minmax(60px,.55fr);gap:8px;padding:14px 68px 14px 12px;font-size:9px}
 .catalog-row{min-height:88px}
 .catalog-row-pick{grid-template-columns:minmax(84px,1.4fr) minmax(62px,1fr) minmax(60px,.55fr);gap:8px;padding:14px 12px}
 .row-thumb{display:none}
 .catalog-row-pick small{font-size:9px}
 .catalog-row-pick strong{font-size:15px}
 .row-identity strong{font-size:23px}
 .row-detail{flex-basis:58px;flex-direction:column;gap:3px;padding:10px 5px;font-size:9px}
 .catalog-assistance{display:block;margin-top:24px;padding:22px 18px}
 .catalog-assistance h3{font-size:26px}
 .catalog-assistance .btn{width:100%;margin-top:20px}
}
@media(max-width:420px){
 .family-card{grid-template-columns:minmax(0,1fr) 108px;padding:16px}
 .family-name h2{font-size:25px}
 .family-image{height:124px}
 .family-bottom{flex-wrap:wrap}
 .family-enter{width:100%}
 .catalog-controls{padding:14px 12px;gap:12px 10px}
 .catalog-preview{padding:16px}
 .selection-heading{font-size:8px}
 .selection-image{height:250px}
 .selection-actions,.selection-links{grid-template-columns:1fr}
 .catalog-list-head{grid-template-columns:minmax(73px,1.4fr) minmax(54px,1fr) minmax(50px,.55fr);gap:5px;padding-inline:8px 66px;font-size:8px}
 .catalog-row-pick{grid-template-columns:minmax(73px,1.4fr) minmax(54px,1fr) minmax(50px,.55fr);gap:5px;padding-inline:8px}
 .catalog-row-pick small{font-size:8px}
 .catalog-row-pick strong{font-size:13px}
 .row-identity strong{font-size:21px}
}