.precon-filters { grid-template-columns: minmax(220px,1.2fr) minmax(150px,.7fr) minmax(180px,.9fr) minmax(140px,.6fr) auto; }
.precon-library .deck-preview-meta > span { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; color: var(--mt-text-secondary); font-size: .7rem; }
.precon-back { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; text-decoration: none; font-size: .85rem; font-weight: 600; }
.precon-hero { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--mt-border); border-radius: 1.2rem; background: var(--mt-bg-secondary); }
.precon-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,var(--mt-bg-secondary) 25%,color-mix(in srgb,var(--mt-bg-secondary) 90%,transparent) 60%,color-mix(in srgb,var(--mt-bg) 35%,transparent)); }
.precon-hero-art { position: absolute; inset: 0 0 0 auto; z-index: -2; width: 52%; height: 100%; object-fit: cover; object-position: center 25%; }
.precon-hero-copy { padding: clamp(1.5rem,4vw,3rem); }
.precon-eyebrow { margin: 0 0 .9rem; font-size: .68rem; letter-spacing: .09em; font-weight: 700; text-transform: uppercase; color: var(--mt-primary); }
.precon-hero h1 { max-width: 55rem; margin: 0; font-size: clamp(1.9rem,4vw,3.25rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.15; text-wrap: balance; }
.precon-product { margin: 1rem 0 .6rem; color: var(--mt-text-secondary); font-size: .9rem; }
.precon-commanders { font-size: .85rem; color: var(--mt-primary); }.precon-commanders i { margin-right: .4rem; }
.precon-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.precon-facts > * { padding: .4rem .7rem; border: 1px solid var(--mt-border); border-radius: 99px; background: color-mix(in srgb,var(--mt-bg) 75%,transparent); font-size: .7rem; color: var(--mt-text); }
.precon-facts i { margin-right: .25rem; color: var(--mt-primary); }
.precon-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: 1.5rem; }.precon-actions .btn { font-size: .82rem; }.precon-actions p { margin: 0; font-size: .75rem; color: var(--mt-text-secondary); }
.precon-note { max-width: 65rem; margin: 1.15rem 0; color: var(--mt-text-secondary); font-size: .75rem; line-height: 1.7; }
.precon-zone { margin-top: 2.25rem; }.precon-zone-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--mt-border); padding-bottom: .7rem; margin-bottom: 1.1rem; }.precon-zone-heading h2 { margin: 0; font-size: 1.3rem; font-weight: 700; }.precon-zone-heading > span { font-size: .75rem; color: var(--mt-text-secondary); }
.precon-type-heading { display: flex; align-items: center; gap: .6rem; margin: 1.4rem 0 .85rem; font-size: .9rem; font-weight: 600; }.precon-type-heading span { color: var(--mt-text-secondary); font-size: .7rem; font-weight: 400; }
.precon-card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(135px,1fr)); gap: 1rem; }
.precon-card { min-width: 0; max-width: 210px; }.precon-card .library-card-frame { position: relative; }.precon-card .library-card-visual { position: relative; display: block; border-radius: .65rem; overflow: hidden; }.precon-card .library-card-visual img { width: 100%; height: auto; aspect-ratio: 488/680; object-fit: cover; }.precon-card .library-card-visual:hover { outline: 1px solid var(--mt-primary); }
.precon-quantity { position: absolute; inset: .45rem auto auto .45rem; padding: .25rem .45rem; border: 1px solid var(--mt-border); border-radius: .4rem; color: var(--mt-text); background: var(--mt-bg); font-size: .7rem; font-weight: 700; box-shadow: 0 2px 10px color-mix(in srgb,var(--mt-bg) 65%,transparent); }
.precon-missing-image { display: block; margin-top: .4rem; font-size: .6rem; color: var(--mt-text-secondary); }
@media(max-width:1199.98px) { .precon-filters { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:767.98px) { .precon-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }.precon-hero-art { width: 100%; opacity: .4; }.precon-hero::after { background: color-mix(in srgb,var(--mt-bg-secondary) 80%,transparent); } }
@media(max-width:479.98px) { .precon-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }.precon-actions { align-items: stretch; flex-direction: column; }.precon-hero h1 { font-size: 1.9rem; } }