.catalog-page .header{background: rgba(0,0,0,.45)}
.catalog-hero{position:relative; z-index:10; padding:48px 0 24px;}
.catalog-hero__inner{display:grid; grid-template-columns: 1.05fr .95fr; gap:16px; align-items:stretch}
.catalog-card{padding:26px; border-radius:22px; position:relative; overflow:hidden}
.catalog-card::before{content:''; position:absolute; inset:-1px; border-radius:22px; background:linear-gradient(120deg, rgba(255,122,26,.28), rgba(255,177,92,.08)); filter:blur(16px); opacity:.7; z-index:0}
.catalog-card > *{position:relative; z-index:1}
.catalog-kicker{display:inline-flex; padding:7px 12px; border-radius:999px; background:rgba(255,122,26,.12); color:var(--accent2); border:1px solid rgba(255,122,26,.35); font-size:12px; font-weight:800; letter-spacing:.7px; text-transform:uppercase}
.catalog-title{margin:14px 0 0; font-size: clamp(32px, 5vw, 58px); line-height:1.05; font-weight:900; letter-spacing:-.5px}
.catalog-lead{margin:14px 0 0; max-width:64ch; color:#c9d0da; line-height:1.7}.catalog-actions{margin-top:20px; display:flex; gap:12px; flex-wrap:wrap}
.metrics{margin-top:22px; display:grid; grid-template-columns: repeat(3,1fr); gap:12px}.metric{padding:16px; border-radius:18px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08)}.metric__value{font-size:28px; font-weight:900; color:var(--accent2)}.metric__label{margin-top:4px; color:#c9d0da; font-size:13px}
.hero-preview{display:grid; grid-template-columns: 1.3fr .7fr; gap:12px; min-height:100%}.hero-preview__main, .hero-preview__stack > div{border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); position:relative}.hero-preview__main img, .hero-preview__stack img{width:100%; height:100%; object-fit:cover; display:block}.hero-preview__stack{display:grid; gap:12px}.hero-preview__label{position:absolute; left:16px; bottom:16px; padding:8px 12px; border-radius:999px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12); color:#fff; font-size:12px; font-weight:700}
.catalog-toolbar{position:relative; z-index:10; padding:8px 0 0}.toolbar{display:grid; gap:12px; padding:18px; border-radius:18px}.toolbar__row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}.search{flex:1 1 280px; padding:14px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.28); color:#f5f7fa; outline:none}.search:focus{border-color: rgba(255,122,26,.7); box-shadow:0 0 0 3px rgba(255,122,26,.18)}
.chips{display:flex; gap:10px; flex-wrap:wrap}.chip{padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#dfe5eb; font-weight:700; cursor:pointer; transition:.18s ease}.chip:hover,.chip.is-active{background:rgba(255,122,26,.14); border-color: rgba(255,122,26,.45); color:#fff}
.catalog-grid{position:relative; z-index:10; padding:24px 0 64px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px}.product{padding:18px; border-radius:20px; position:relative; overflow:hidden; display:grid; grid-template-columns: 1.1fr .9fr; gap:16px}.product::before{content:''; position:absolute; inset:-1px; border-radius:20px; background:linear-gradient(120deg, rgba(255,122,26,.22), transparent 55%); filter:blur(16px); opacity:.55; z-index:0}.product > *{position:relative; z-index:1}
.product-media{position:relative; min-height:280px; border-radius:18px; overflow:hidden; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1)}.product-media img{width:100%; height:100%; object-fit:cover; display:block}.product-media button{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.42); color:#fff; cursor:pointer}.product-media .prev{left:12px}.product-media .next{right:12px}.dots{position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:8px}.dot{width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.35); border:1px solid rgba(255,255,255,.5); cursor:pointer}.dot.is-active{background:var(--accent)}.zoom-btn{position:absolute; right:12px; top:12px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.45); color:#fff; padding:10px 12px; cursor:pointer}.video-badge{position:absolute; left:12px; top:12px; padding:8px 12px; border-radius:999px; background:rgba(255,122,26,.14); border:1px solid rgba(255,122,26,.38); color:#fff; font-weight:800; font-size:12px}
.product-body{display:flex; flex-direction:column}.product-name{margin:8px 0 0; font-size:24px; font-weight:900; line-height:1.12}.product-desc{margin:12px 0 0; color:#c9d0da; line-height:1.7; font-size:14px}.meta{margin-top:16px; display:grid; grid-template-columns: 1fr 1fr; gap:10px}.meta__item{padding:12px; border-radius:14px; background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.08)}.meta__k{font-size:11px; font-weight:900; letter-spacing:.7px; color:var(--accent2); text-transform:uppercase}.meta__v{margin-top:6px; color:#eef2f6; font-weight:700; font-size:14px}.tags{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap}.tag{padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); color:#dbe2ea; font-size:12px; font-weight:700}.product-actions{margin-top:auto; padding-top:18px; display:flex; gap:10px; flex-wrap:wrap}
.empty-state{grid-column:1/-1; padding:36px; text-align:center}.viewer,.lightbox{position:fixed; inset:0; background:rgba(5,8,12,.78); backdrop-filter:blur(12px); display:none; align-items:center; justify-content:center; padding:24px; z-index:120}.viewer.is-open,.lightbox.is-open{display:flex}.viewer__panel,.lightbox__panel{width:min(1120px, 100%); max-height:90vh; overflow:auto; padding:20px; border-radius:24px; background:rgba(9,12,18,.82); border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 90px rgba(0,0,0,.5)}
.viewer__close,.lightbox__close{position:sticky; top:0; margin-left:auto; display:flex; width:46px; height:46px; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.45); color:#fff; cursor:pointer; z-index:2}.viewer__grid{display:grid; grid-template-columns: 1.08fr .92fr; gap:18px; margin-top:10px}.viewer-stage{position:relative; border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04)}.viewer-stage img,.viewer-stage video{width:100%; height:min(62vh, 680px); object-fit:cover; display:block; background:#05080c}.viewer-tabs{display:flex; gap:10px; padding:12px}.viewer-tab{padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#dfe5eb; font-weight:700; cursor:pointer}.viewer-tab.is-active{background:rgba(255,122,26,.14); border-color:rgba(255,122,26,.45); color:#fff}.viewer-thumbs{display:grid; grid-template-columns: repeat(3,1fr); gap:10px; padding:0 12px 12px}.viewer-thumbs img{width:100%; aspect-ratio: 4/3; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.12); cursor:pointer}.viewer-thumbs img.is-active{outline:2px solid var(--accent)}.viewer-copy{padding:8px 6px 6px}.viewer-copy h3{font-size:34px; line-height:1.05; margin:0}.viewer-copy p{color:#c9d0da; line-height:1.75}.specs{display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:14px}.spec{padding:14px; border-radius:16px; background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.08)}.spec .meta__k{font-size:11px}.spec .meta__v{font-size:15px}.viewer-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}.lightbox__panel{padding:12px; width:min(1280px,100%)}.lightbox img{display:block; width:100%; max-height:84vh; object-fit:contain; border-radius:18px; background:#05080c}.catalog-footer-note{margin-top:20px; color:#aeb6c2; font-size:13px; text-align:center}
@media (max-width: 1100px){.catalog-grid{grid-template-columns:1fr}.product{grid-template-columns:1fr}.catalog-hero__inner,.viewer__grid{grid-template-columns:1fr}.hero-preview{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr 1fr}}
@media (max-width: 720px){.container{width:min(1120px, calc(100% - 28px))}.metrics{grid-template-columns:1fr}.toolbar__row{align-items:stretch}.search{flex-basis:100%}.product-media{min-height:240px}.viewer-thumbs{grid-template-columns:repeat(2,1fr)}.specs{grid-template-columns:1fr}}