.hp-catalog-shell { --hp-ink: #1E293B; --hp-silver: #94A3B8; --hp-accent: #F97316; --hp-bg: #F8FAFC; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 40px 0 64px; color: var(--hp-ink); }
.hp-catalog-shell a, .hp-family-grid a { color: #1E293B; }
.hp-catalog-shell a:focus-visible, .hp-family-grid a:focus-visible { outline: 3px solid #F97316; outline-offset: 4px; }
.hp-breadcrumbs { font-size: .875rem; margin-bottom: 28px; overflow-wrap: anywhere; }
.hp-breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; }
.hp-eyebrow { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; }
.hp-catalog-intro { margin-bottom: 32px; }
.hp-catalog-shell h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.15; margin: 0 0 20px; color: #1E293B; }
.hp-intro-copy { max-width: 760px; font-size: 1.1rem; line-height: 1.7; }
.hp-family-grid, .hp-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 28px 0 40px; }
.hp-family-card { padding: 28px; background: #fff; border: 1px solid #94A3B8; border-top: 4px solid #F97316; border-radius: 8px; display: flex; flex-direction: column; }
.hp-family-card h3 { font-size: 1.3rem; margin: 0 0 14px; }
.hp-family-card h3 a, .hp-product-card h3 a { text-decoration: none; }
.hp-family-card p { font-size: .95rem; line-height: 1.7; }
.hp-family-card .hp-text-link { margin-top: auto; }
.hp-text-link { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.hp-empty { background: #fff; border: 1px solid #E2E8F0; padding: 28px; border-radius: 8px; margin: 36px 0; }
.hp-empty h2 { margin-top: 0; }
.hp-products-section { margin-top: 40px; }
.hp-product-card { border: 1px solid #E2E8F0; border-radius: 8px; background: #fff; overflow: hidden; }
.hp-card-image { display: block; background: #fff; aspect-ratio: 4 / 3; padding: 16px; }
.hp-card-image img { width: 100%; height: 100%; object-fit: contain; }
.hp-card-body { padding: 24px; }
.hp-card-body h3 { font-size: 1.2rem; margin-top: 0; }
.hp-model { font-size: .9rem; color: #475569; }
.hp-product-hero { display: flex; align-items: center; gap: 40px; margin: 32px 0 48px; }
.hp-product-hero header { flex: 1; min-width: 0; }
.hp-product-image { flex: 1; min-width: 0; background: #fff; padding: 24px; border: 1px solid #E2E8F0; border-radius: 8px; }
.hp-product-image img { display: block; width: 100%; max-height: 540px; object-fit: contain; }
.hp-category-tags { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hp-category-tags a { display: inline-block; padding: 4px 10px; border: 1px solid #94A3B8; border-radius: 4px; font-size: .85rem; }
.hp-specifications table { width: 100%; border-collapse: collapse; background: #fff; margin-bottom: 36px; table-layout: fixed; }
.hp-specifications th, .hp-specifications td { border: 1px solid #E2E8F0; padding: 16px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.hp-specifications th { width: 34%; background: #F8FAFC; }
.hp-product-content { margin: 40px 0; overflow-wrap: anywhere; }
.hp-contact-panel { display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px; align-items: center; margin-top: 48px; padding: 36px; background: #1E293B; border-radius: 8px; color: #fff; }
.hp-contact-panel h2, .hp-contact-panel p, .hp-contact-panel a { color: #fff; }
.hp-contact-panel h2 { font-size: 1.6rem; margin-top: 0; }
.hp-contact-panel p { line-height: 1.7; }
.hp-contact-panel div > p:last-child { margin-bottom: 0; }
.hp-catalog-shell a.hp-button, .hp-contact-panel a.hp-button { display: inline-block; padding: 13px 24px; background: #F97316; color: #1E293B; font-weight: 700; text-decoration: none; border: 2px solid #F97316; border-radius: 4px; line-height: 1.4; }
.hp-catalog-shell a.hp-button:hover { background: #1E293B; color: #fff; }
.hp-contact-panel a.hp-button:hover { border-color: #fff; }
@media (max-width: 900px) { .hp-family-grid, .hp-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hp-contact-panel { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .hp-catalog-shell { width: calc(100% - 32px); padding-top: 24px; } .hp-family-grid, .hp-product-grid { grid-template-columns: 1fr; gap: 16px; } .hp-family-card, .hp-contact-panel { padding: 24px; } .hp-product-hero { flex-direction: column; align-items: stretch; gap: 24px; } .hp-specifications th, .hp-specifications td { padding: 10px; font-size: .9rem; } }