.catalog-hero{padding-top:calc(var(--nav-height) + var(--space-16));padding-bottom:var(--space-8);text-align:center;background:var(--gradient-hero)}.catalog-hero h1{margin-bottom:var(--space-4)}.catalog-hero p{font-size:var(--text-lg);max-width:500px;margin:0 auto}.catalog-section{padding:var(--space-12) 0 var(--space-24)}.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-6)}.catalog-empty{grid-column:1 / -1;text-align:center;padding:var(--space-16)}.catalog-empty p{font-size:var(--text-lg);color:var(--color-text-muted)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--duration-normal) var(--ease-out)}.modal-overlay.open{opacity:1;pointer-events:all}.modal{background:var(--color-bg-card);border:1px solid var(--color-surface-border);border-radius:var(--radius-xl);max-width:700px;width:90%;max-height:85vh;overflow-y:auto;transform:scale(.9) translateY(20px);transition:transform var(--duration-normal) var(--ease-spring)}.modal-overlay.open .modal{transform:scale(1) translateY(0)}.modal-close{position:absolute;top:var(--space-4);right:var(--space-4);background:var(--color-bg-elevated);border:1px solid var(--color-surface-border);border-radius:var(--radius-full);width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-fast);font-size:var(--text-lg)}.modal-close:hover{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.modal-body{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);padding:var(--space-6);position:relative}.modal-image{border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg-secondary);aspect-ratio:1}.modal-image img{width:100%;height:100%;object-fit:cover}.modal-details{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4) 0}.modal-details h2{font-size:var(--text-2xl)}.modal-price{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800;color:var(--color-accent)}.modal-description{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-relaxed)}.option-group{display:flex;flex-direction:column;gap:var(--space-2)}.option-group label{font-family:var(--font-display);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-text-muted)}.option-pills{display:flex;flex-wrap:wrap;gap:var(--space-2)}.option-pill{padding:var(--space-2) var(--space-4);background:var(--color-bg-secondary);border:1px solid var(--color-surface-border);border-radius:var(--radius-sm);font-family:var(--font-display);font-size:var(--text-xs);font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-fast)}.option-pill:hover{border-color:var(--color-accent);color:var(--color-accent)}.option-pill.selected{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.color-pill{width:32px;height:32px;border-radius:var(--radius-full);border:2px solid var(--color-surface-border);cursor:pointer;transition:all var(--duration-fast)}.color-pill:hover,.color-pill.selected{border-color:var(--color-accent);transform:scale(1.15);box-shadow:var(--shadow-glow-sm)}@media(max-width:768px){.modal-body{grid-template-columns:1fr}}