.catalog-shell { padding: 3rem 0 5rem; }
.catalog-shell h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: .4rem 0 1rem; }
.catalog-intro { max-width: 760px; color: #bcbcbc; line-height: 1.7; }
.catalog-nav { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.8rem 0; }
.catalog-panel { margin: 2rem 0; padding: 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.catalog-panel h2 { font-size: 1.6rem; margin-bottom: .7rem; }
.catalog-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.catalog-controls label, .vehicle-field label { display: grid; gap: .45rem; font-size: .9rem; color: #ddd; }
.catalog-controls input, .catalog-controls select, .vehicle-field select { width: 100%; min-width: 0; background: #111; color: #eee; border: 1px solid #555; border-radius: 4px; padding: .75rem; min-height: 46px; font: inherit; }
.catalog-search { grid-column: span 2; }
.catalog-controls button { min-height: 46px; }
.catalog-shell :focus-visible { outline: 3px solid #55ce7b; outline-offset: 4px; }
.catalog-shell button:disabled, .catalog-shell select:disabled { opacity: .5; cursor: not-allowed; }
.catalog-shell a { overflow-wrap: anywhere; }
.catalog-shell .btn { white-space: normal; max-width: 100%; text-align: center; }
.catalog-muted, .catalog-stock { color: #bbb; font-size: .9rem; line-height: 1.6; }
.catalog-eyebrow { color: #58cb7c; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.catalog-toolbar { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin: 1.5rem 0; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.catalog-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); min-width: 0; }
.catalog-photo { position: relative; aspect-ratio: 4/3; display: grid; place-items: center; background: #202220; overflow: hidden; }
.catalog-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.catalog-photo-fallback { color: #aaa; font-size: .9rem; padding: 1.5rem; }
.catalog-card-body { padding: 1.25rem; }
.catalog-card h3 { font-size: 1.2rem; line-height: 1.35; margin: .5rem 0; }
.catalog-price { font-size: 1.2rem; font-weight: 700; margin: .9rem 0 .3rem; }
.catalog-text-link { display: inline-block; margin-top: 1rem; color: #69d68c; text-decoration: underline; text-underline-offset: 4px; }
.catalog-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin: 2rem 0; }
.catalog-notice { padding: 1.5rem; border-left: 3px solid #57c77b; background: #202320; line-height: 1.7; }
.catalog-notice button { margin-top: 1rem; }
.catalog-loading { padding: 2rem; color: #bbb; }
.catalog-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2rem 0; }
.catalog-detail h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.catalog-detail .catalog-price { font-size: 1.7rem; }
.catalog-description { white-space: pre-line; line-height: 1.7; margin: 1rem 0; overflow-wrap: anywhere; }
.catalog-order > p { white-space: pre-line; margin: .8rem 0; }
.vehicle-field > label { margin-bottom: .45rem; }
.catalog-specs { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; margin: 1rem 0; }
.catalog-specs dt { color: #bbb; }
.catalog-specs dd { overflow-wrap: anywhere; }
.catalog-application { padding: 1.2rem 0; border-top: 1px solid #3a3a3a; overflow-wrap: anywhere; }
.catalog-application h4 { font-size: 1.1rem; margin-bottom: .7rem; }
.catalog-application p { margin: .5rem 0; line-height: 1.6; }
.catalog-conditions { padding-left: 1.3rem; margin: .7rem 0; }
.catalog-conditions li { margin-bottom: .7rem; }
.catalog-application a { color: #69d68c; text-decoration: underline; }
.catalog-required { padding: .65rem; border: 1px solid #555; }
.catalog-shell summary { cursor: pointer; padding: .7rem 0; }
.vehicle-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 1rem; margin: 1rem 0; }
.vehicle-field { min-width: 0; overflow-wrap: anywhere; }
.vehicle-registration { margin: 1.2rem 0; padding: 1.2rem 0; border-block: 1px solid var(--color-border); }
.vehicle-registration[hidden] { display: none; }
.vehicle-registration-controls { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; }
.vehicle-registration label { display: grid; gap: .45rem; min-width: 0; flex: 1 1 180px; max-width: 330px; font-size: .9rem; }
.vehicle-registration input { width: 100%; min-width: 0; min-height: 46px; padding: .75rem; border: 1px solid #555; border-radius: 4px; background: #111; color: #eee; font: inherit; text-transform: uppercase; }
.vehicle-registration .btn { min-height: 46px; }
.vehicle-registration p { margin-top: .7rem; }
.vehicle-field button { font: inherit; color: #69d68c; background: none; border: 0; padding: .7rem 0; text-decoration: underline; cursor: pointer; }
.catalog-app-product { margin: 1.5rem 0; padding: 1.5rem; border: 1px solid #444; border-radius: 8px; }
.catalog-app-product h3 a { color: #69d68c; }
.catalog-app-product > p { margin: .8rem 0; }
.catalog-legacy-list { padding-left: 1.3rem; }
.catalog-legacy-list li { padding: .8rem 0; border-bottom: 1px solid #333; }
.catalog-promo { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; padding: 1.5rem 0; }
@media (max-width: 900px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vehicle-fields, .catalog-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .catalog-shell { padding-top: 2rem; } .catalog-grid, .catalog-detail, .catalog-controls, .vehicle-fields { grid-template-columns: minmax(0, 1fr); } .catalog-search { grid-column: auto; } .catalog-panel { padding: 1rem; } .catalog-toolbar { align-items: start; flex-direction: column; } .catalog-nav .btn { width: 100%; } }
/* Product type navigation (shop categories by what the part is). */
.catalog-types { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 .5rem; }
.catalog-type { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .9rem; border: 1px solid #555; border-radius: 999px; color: #eee; text-decoration: none; background: #111; }
.catalog-type:hover, .catalog-type:focus-visible { border-color: var(--color-accent); }
.catalog-type.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); font-weight: 600; }
.catalog-controls label[hidden] { display: none; }