.paint-catalog-hero{position:relative;display:flex;align-items:flex-end;justify-content:space-between;min-height:185px;margin:-24px -28px 0;padding:38px 34px 55px;overflow:hidden;border-bottom:1px solid #71532f;background:linear-gradient(90deg,#080c10f5 0%,#0a0e12dc 48%,#090c105c),linear-gradient(0deg,#090d10 0%,transparent 70%),url("assets/generated/catalog-hero-v2.png") center 42%/cover}
.paint-catalog-hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 85px,#d4a34d08 86px 87px);pointer-events:none}.paint-catalog-hero>div,.paint-catalog-hero blockquote{position:relative;z-index:1}.paint-catalog-hero h2{margin:0;color:#f1ece3;font:48px/1 Georgia,serif}.paint-catalog-hero>div>p:last-child{max-width:660px;margin:10px 0 0;color:#abb2b3}.paint-catalog-hero blockquote{max-width:310px;margin:0;color:#b69a6d;font:italic 13px/1.5 Georgia,serif;text-align:right}
.paint-catalog-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);max-width:930px;margin:-38px auto 16px;border:1px solid #705532;background:#0c1215ed;box-shadow:0 12px 28px #0009;backdrop-filter:blur(8px)}.paint-catalog-stats>div{display:grid;grid-template-columns:38px auto 1fr;grid-template-rows:auto auto;align-items:center;gap:0 9px;min-height:75px;padding:12px 18px;border-right:1px solid #443a2f}.paint-catalog-stats>div:last-child{border:0}.paint-catalog-stats svg{grid-row:1/3;width:27px;height:27px;color:#d6a54f;fill:none;stroke:currentColor;stroke-width:1.6}.paint-catalog-stats b{align-self:end;font:24px Georgia,serif}.paint-catalog-stats span{align-self:start;color:#929a9d;font-size:10px;text-transform:uppercase}
.paint-catalog-controls{display:grid;grid-template-columns:repeat(5,minmax(125px,1fr)) 92px;gap:9px;align-items:end;margin:0 0 15px;padding:13px;border:1px solid #354047;background:#0b1114}.paint-catalog-controls label{display:grid;gap:5px}.paint-catalog-controls label>span{color:#a59b8b;font-size:9px;font-weight:800;text-transform:uppercase}.paint-catalog-controls select{width:100%;height:40px;padding:0 30px 0 10px;border:1px solid #3c464c;background:#11191d;color:#eee}.paint-view-switch{display:grid;grid-template-columns:1fr 1fr;height:40px;border:1px solid #3c464c}.paint-view-switch button{display:grid;place-items:center;border:0;border-left:1px solid #343e43;background:#11191d;color:#929ca0;cursor:pointer}.paint-view-switch button:first-child{border:0}.paint-view-switch button.active{background:#332719;color:#e4b65d;box-shadow:inset 0 0 0 1px #b78742}.paint-view-switch svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.paint-catalog-layout{display:grid;grid-template-columns:205px minmax(500px,1fr) 330px;gap:13px;align-items:start}.paint-family-panel,.paint-detail-panel{position:sticky;top:18px;border:1px solid #4c4133;background:#0d1316}.paint-family-panel{padding:12px}.paint-family-panel header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #354046}.paint-family-panel header b,.paint-family-panel h3{color:#d7ab61;font:700 10px Georgia,serif;letter-spacing:.12em;text-transform:uppercase}.paint-family-panel header button{border:0;background:none;color:#90999d;font-size:9px;cursor:pointer}.paint-family-panel h3{margin:17px 4px 7px}.paint-family-panel>div{display:grid;gap:2px}.paint-family-panel>button,.paint-family-panel>div>button{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:7px;width:100%;min-height:31px;padding:5px 6px;border:1px solid transparent;background:transparent;color:#aeb5b7;text-align:left;cursor:pointer}.paint-family-panel button:hover,.paint-family-panel button.active{border-color:#4a4438;background:#181b19;color:#eee}.paint-family-panel button.active{box-shadow:inset 3px 0 #d7a44d}.paint-family-panel button i{width:13px;height:13px;border:1px solid #ffffff45;border-radius:50%;background:var(--family,#76664f);box-shadow:inset 0 0 4px #0008}.paint-family-panel button i.family-all{background:conic-gradient(#d33,#e0c13b,#3a5,#38c,#9258b8,#d33)}.paint-family-panel button i.brand-box{border-radius:2px;background:#bd934f}.paint-family-panel button span{font-size:10px}.paint-family-panel button small{color:#737e83;font-size:9px}
.paint-results{min-width:0}.paint-results-head{display:flex;justify-content:space-between;margin:0 0 9px;padding:3px 2px;color:#9da5a8;font-size:10px}.paint-results-head b{color:#d4d0c7;font-size:12px}.paint-template-grid-collection{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px 12px;align-items:start}.paint-template-list-collection{display:grid;gap:8px}.paint-template{position:relative;overflow:hidden;border:1px solid #554832;background:linear-gradient(145deg,#151b1e,#090e11);color:#ebe8e1;cursor:pointer;box-shadow:inset 0 0 0 1px #ffffff06,0 7px 18px #0006;transition:transform .2s,border-color .2s,box-shadow .2s,filter .2s}.paint-template:hover,.paint-template.selected{border-color:#d1a04d;box-shadow:0 15px 34px #000b,0 0 0 1px #d2a24c88}.paint-template:hover{transform:translateY(-5px);filter:brightness(1.05)}.paint-template::before,.paint-template::after{content:"";position:absolute;z-index:2;pointer-events:none}.paint-template::before{inset:5px;border:1px solid #b7894142}.paint-template::after{left:9px;right:9px;top:9px;height:1px;background:linear-gradient(90deg,transparent,#d6a448,transparent)}.brand-ak{border-color:#6b4a32}.brand-ak::before{border-color:#d666263f}.brand-ak::after{background:linear-gradient(90deg,#d75f1c,transparent,#d75f1c)}.brand-vallejo .paint-template-brand{color:#d8e5ef}
.paint-template-grid{width:100%;aspect-ratio:474/835;padding:0;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:100% 100%;box-shadow:0 15px 30px #0009}.paint-template-grid.brand-vallejo{background-image:url("assets/paint-templates/vallejo.png")}.paint-template-grid.brand-citadel{width:89%;aspect-ratio:422/895;justify-self:center;background-image:url("assets/paint-templates/citadel.png")}.paint-template-grid.brand-ak{background-image:url("assets/paint-templates/ak.png")}.paint-template-grid::before,.paint-template-grid::after{display:none}.paint-template-grid.selected{filter:drop-shadow(0 0 8px #d6a44d99)}.paint-template-grid .paint-template-crest,.paint-template-grid .paint-template-brand,.paint-template-grid .paint-template-tags{display:none}.paint-template-grid .paint-template-swatch{position:absolute;z-index:1;display:block}.paint-template-grid.brand-vallejo .paint-template-swatch{left:14.2%;top:27.4%;width:71.7%;aspect-ratio:1}.paint-template-grid.brand-citadel .paint-template-swatch{left:15.8%;top:35.5%;width:68.5%;aspect-ratio:1}.paint-template-grid.brand-ak .paint-template-swatch{left:17.4%;top:29.9%;width:65.2%;aspect-ratio:1}.paint-template-grid .paint-template-swatch span{display:block;width:100%;height:100%;border:0;border-radius:50%;background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--paint),#fff 24%),var(--paint) 54%,color-mix(in srgb,var(--paint),#000 35%) 100%);box-shadow:inset 0 8px 14px #fff2,inset 0 -10px 18px #0005}.paint-template-grid .paint-template-name{position:absolute;z-index:3;left:8%;right:8%;top:77%;display:grid;align-content:center;min-height:9.5%;padding:2% 3%;border:0;background:linear-gradient(90deg,#e9e1d0,#f3eddf 48%,#e8dfcd);color:#161411;text-align:center;box-shadow:0 0 10px #eae2d5}.paint-template-grid.brand-citadel .paint-template-name{left:10%;right:10%;top:78.1%}.paint-template-grid.brand-ak .paint-template-name{left:9%;right:9%;top:78.2%}.paint-template-grid .paint-template-name h3{margin:0;font:700 clamp(13px,1.25vw,18px)/1.02 Georgia,serif}.paint-template-grid .paint-template-name p{margin:4px 0 0;color:#625b4f;font-size:8px;text-transform:uppercase;letter-spacing:.09em}.paint-template-grid .paint-owned{position:absolute;z-index:5;left:6%;bottom:2.2%;display:flex;align-items:center;gap:5px;width:max-content;padding:5px 8px;border:1px solid #8a6b3c88;background:#090e10df;color:#c0c5c4;font-size:9px;cursor:pointer}.paint-template-grid .paint-owned.owned{border-color:#3e9b4e88;color:#71e17c}.paint-template-grid .paint-owned svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}.paint-template-grid .paint-bookmark{position:absolute;z-index:5;right:5%;top:5%;display:grid;place-items:center;width:30px;height:34px;border:1px solid #b98a3e;background:#0a1013e8;color:#e0ac50;cursor:pointer}.paint-template-grid .paint-bookmark svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}.paint-template-grid .paint-bookmark.active svg{fill:#d5a64f}
.paint-template-list{display:grid;grid-template-columns:66px 110px minmax(155px,1fr) 88px 38px;align-items:center;min-height:88px;padding:8px 12px}.paint-template-list::before{inset:4px}.paint-template-list .paint-template-swatch{grid-column:1;grid-row:1;display:grid;place-items:center}.paint-template-list .paint-template-swatch span{display:block;width:56px;height:56px;border:4px solid #151a1d;border-radius:50%;background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--paint),#fff 24%),var(--paint) 54%,color-mix(in srgb,var(--paint),#000 35%));box-shadow:0 0 0 2px #c99643,0 0 0 5px #202327,inset 0 5px 8px #fff2}.paint-template-list .paint-template-crest,.paint-template-list .paint-template-tags{display:none}.paint-template-list .paint-template-brand{grid-column:2;grid-row:1;padding:0;color:#e3b65f;font-size:13px}.paint-template-list .paint-template-name{grid-column:3;grid-row:1;margin:0;padding:0 15px;border:0;border-left:1px solid #806133;background:transparent;color:#eee;text-align:left}.paint-template-list .paint-template-name h3{margin:0;font:700 18px/1.1 Georgia,serif}.paint-template-list .paint-template-name p{margin:5px 0 0;color:#9ba2a5;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.paint-template-list .paint-owned{grid-column:4;grid-row:1;display:flex;align-items:center;gap:5px;width:max-content;padding:5px 7px;border:0;background:transparent;color:#9da5a8;font-size:9px;cursor:pointer}.paint-template-list .paint-owned.owned{color:#70d779}.paint-template-list .paint-owned svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}.paint-template-list .paint-bookmark{z-index:3;grid-column:5;grid-row:1;display:grid;place-items:center;width:30px;height:30px;border:1px solid #6a5738;background:#0e1417;color:#d1a04b;cursor:pointer}.paint-template-list .paint-bookmark svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}.paint-template-list .paint-bookmark.active svg{fill:#d5a64f}
.paint-detail-panel{padding:17px;background:linear-gradient(180deg,#0d1417,#081013)}.paint-detail-frame{position:relative;display:grid;place-items:center;height:276px;margin:-5px -5px 18px;overflow:hidden;border:1px solid #72582f;background:linear-gradient(#080c0eb5,#080c0ef0),repeating-linear-gradient(90deg,transparent 0 44px,#b98a4120 45px 46px),linear-gradient(90deg,#151b1e,#090d10)}.paint-detail-frame::before{content:"";position:absolute;inset:10px;border:1px solid #785d35}.paint-detail-frame::after{content:"";position:absolute;left:50%;top:50%;width:206px;height:206px;border:1px solid #a77a3f66;clip-path:polygon(50% 0,61% 12%,78% 7%,82% 24%,100% 31%,90% 50%,100% 69%,82% 76%,78% 93%,61% 88%,50% 100%,39% 88%,22% 93%,18% 76%,0 69%,10% 50%,0 31%,18% 24%,22% 7%,39% 12%);transform:translate(-50%,-50%);pointer-events:none}.paint-detail-frame.brand-ak::before{border-color:#b65b28}.paint-detail-medallion{position:relative;z-index:2;display:grid;place-items:center;width:190px;height:190px;border:2px solid #b78a47;border-radius:50%;background:#10171a;box-shadow:0 0 0 7px #070b0d,0 0 0 9px #8b6838}.paint-detail-swatch{width:168px;height:168px;border:3px solid #c99b4d;border-radius:50%;background:var(--paint);box-shadow:none}.paint-detail-bottle{position:absolute;z-index:3;left:11px;bottom:10px;width:68px;height:118px;filter:drop-shadow(0 8px 9px #000)}.paint-detail-status{position:absolute;z-index:4;right:17px;top:17px;display:grid;place-items:center;width:38px;height:38px;border:1px solid #566068;border-radius:50%;background:#142026;color:#778187}.paint-detail-status.owned{border-color:#3d8449;background:#123b21;color:#5be36c;box-shadow:0 0 14px #3fd75c42}.paint-detail-status svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2}.paint-detail-heading h2{margin:0;color:#f2eee6;font:28px/1.04 Georgia,serif}.paint-detail-heading p{margin:7px 0 5px;color:#aeb5b7;font-size:13px}.paint-detail-heading b{padding:0 4px;color:#6f797e}.paint-detail-panel>.paint-detail-reference{margin:0 0 12px}.paint-detail-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.paint-detail-tags span{padding:6px 9px;border:1px solid #465158;border-radius:5px;background:#182126;color:#c4cbcd;font-size:10px}.paint-detail-description{margin:0 0 5px!important;color:#c4c8c7!important;font:13px/1.48 Georgia,serif}.paint-detail-source{display:block;margin-bottom:14px;color:#69767c;font-size:8px;line-height:1.4}.paint-detail-owned{display:grid;grid-template-columns:24px 1fr 18px;align-items:center;gap:8px;width:100%;padding:12px 13px;border:1px solid #465057;background:#11191d;color:#b9c0c2;text-align:left;cursor:pointer}.paint-detail-owned.owned{border-color:#315f39;background:#102018;color:#78df83}.paint-detail-owned svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}.paint-detail-owned b{text-align:right}.paint-detail-panel dl{margin:15px 0;border-top:1px solid #303b40}.paint-detail-panel dl div{display:flex;justify-content:space-between;gap:10px;padding:7px 2px;border-bottom:1px solid #273238;font-size:9px}.paint-detail-panel dt{color:#7f898e}.paint-detail-panel dd{margin:0;max-width:58%;color:#d8d5ce;text-align:right}.paint-detail-panel h3{margin:20px 0 11px;padding-top:14px;border-top:1px solid #493d2e;color:#d5aa61;font:12px Georgia,serif;text-transform:uppercase;letter-spacing:.11em}.paint-related{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.paint-related button{min-width:0;padding:0;border:0;background:none;color:#949da0;cursor:pointer}.paint-related i{display:block;aspect-ratio:1;border:2px solid #c99b4d;border-radius:50%;box-shadow:none}.paint-related span{display:block;overflow:hidden;margin-top:6px;font-size:8px;line-height:1.15;text-overflow:ellipsis}.paint-detail-full{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:18px;padding:12px 14px;border:1px solid #a77c3f;background:linear-gradient(#171711,#0c1012);color:#e2b966;font:700 12px Georgia,serif;cursor:pointer}.paint-detail-full:hover{border-color:#dfad59;background:#1d1a12}.paint-results .pager{margin-top:16px}
@media(max-width:1450px){.paint-catalog-layout{grid-template-columns:185px minmax(470px,1fr)}.paint-detail-panel{display:none}.paint-catalog-controls{grid-template-columns:repeat(3,1fr)}.paint-view-switch{grid-column:3}.paint-template-grid-collection{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}
@media(max-width:850px){.paint-catalog-hero{margin:-22px -22px 0}.paint-catalog-hero blockquote{display:none}.paint-catalog-stats{grid-template-columns:repeat(2,1fr);margin:10px 0 15px}.paint-catalog-layout{grid-template-columns:1fr}.paint-family-panel{position:static;display:flex;gap:5px;overflow:auto}.paint-family-panel header,.paint-family-panel h3{display:none}.paint-family-panel>div{display:flex}.paint-family-panel>button,.paint-family-panel>div>button{width:auto;min-width:max-content}.paint-catalog-controls{grid-template-columns:repeat(2,1fr)}.paint-view-switch{grid-column:auto}}
@media(max-width:600px){.paint-catalog-hero{min-height:170px;margin:-16px -16px 0;padding:30px 20px}.paint-catalog-hero h2{font-size:37px}.paint-catalog-stats>div{grid-template-columns:30px auto 1fr;padding:9px}.paint-catalog-stats b{font-size:20px}.paint-catalog-controls{grid-template-columns:1fr 1fr}.paint-template-grid-collection{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 6px}.paint-template-grid .paint-template-name h3{font-size:12px}.paint-template-grid .paint-template-name p{font-size:7px}.paint-template-grid .paint-owned span{display:none}.paint-template-grid .paint-owned{padding:5px}.paint-template-list{grid-template-columns:58px 1fr 42px;min-height:78px}.paint-template-list .paint-template-brand{display:none}.paint-template-list .paint-template-name{grid-column:2;border:0}.paint-template-list .paint-owned{display:none}.paint-template-list .paint-bookmark{grid-column:3}}