* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: #333; background: #fff; font-family: Arial, Helvetica, sans-serif; }
button, a { font: inherit; }
button { cursor: pointer; }

.page-header { background: #398ff4; color: #fff; text-align: center; }
.catalog-header { height: 62px; display: flex; align-items: flex-start; justify-content: center; padding-top: 20px; border-bottom: 3px solid #2681ee; }
.catalog-header h1, .help-header h1 { margin: 0; font-size: 18px; line-height: 22px; font-weight: 700; }
.product-list { padding-top: 24px; padding-bottom: 24px; }
.product-card { display: flex; align-items: center; height: 124px; width: calc(100% - 24px); margin: 0 12px 24px; padding: 12px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 0 5px rgba(0,0,0,.1); text-align: left; }
.product-card img { display: block; width: 303px; height: 100px; max-width: 100%; object-fit: contain; object-position: left center; margin-left: 11px; }
.product-card.handheld img { width: 206px; margin-left: 18px; }
.product-card:focus-visible, .home:focus-visible, .question-button:focus-visible, .contact:focus-visible { outline: 2px solid #1b64c3; outline-offset: 2px; }

.help-header { height: 116px; padding-top: 20px; position: relative; }
.help-header h1 { margin-bottom: 4px; }
.help-header p { margin: 0; font-size: 14px; line-height: 18px; font-weight: 700; }
.home { position: absolute; left: 12px; bottom: 13px; display: inline-flex; align-items: center; gap: 12px; border: 0; padding: 0; color: #fff; background: none; font-size: 14px; line-height: 20px; }
.home-icon { width: 14px; height: 14px; background: #fff; mask: url("assets/91f0c730f0c6d862368a46f16fd3a097_354.svg") center / contain no-repeat; }
.help-content { min-height: calc(100vh - 116px); padding: 12px 12px 30px; border-radius: 15px 15px 0 0; background: #fff; }
.help-content h2 { margin: 12px 12px 11px; color: #616263; font-size: 14px; line-height: 18px; font-weight: 700; }
.questions { padding: 12px; border: .5px solid rgba(201,201,201,.65); border-radius: 15px; }
.question { border-bottom: .5px solid #d9d9d9; }
.question:last-child { border-bottom: 0; }
.question-button { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; padding: 7px 16px; background: #fff; color: #333; text-align: left; font-size: 16px; line-height: 26px; }
.question-button > span:first-child { max-width: calc(100% - 48px); }
.question-button[aria-expanded="true"] { background: #e7e7e7; }
.question-chevron { flex: none; width: 16px; height: 16px; background: #333; mask: url("assets/18c24f123602ea2d6617d554dc423edf_355.svg") center / contain no-repeat; }
.question-button[aria-expanded="true"] .question-chevron { mask-image: url("assets/98893ec6afeb14549d1d4c1323cae7a4_346.svg"); }
.answer { background: #fff; }
.answer-images { display: flex; flex-wrap: wrap; }
.answer-image { flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 81px; height: 81px; margin: 12px; padding: 0; border: .5px solid #acacac; background: #fff; }
.answer-image img { display: block; max-width: none; width: auto; height: 100%; }
.answer-text { margin: 12px; color: #888d9d; font-size: 14px; line-height: normal; white-space: pre-wrap; }

.contact { position: fixed; z-index: 5; right: 0; bottom: 100px; width: 150px; height: 45px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: #009df7; text-decoration: none; }
.contact-top { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 19px; font-weight: 700; }
.contact-top img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.contact-email { font-size: 12px; line-height: 15px; }
.image-viewer { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.72); }
.image-viewer[hidden] { display: none; }
.image-viewer-close { display: grid; place-items: center; width: 100%; height: 100%; padding: 12px; border: 0; background: transparent; }
.image-viewer-close img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }

@media (max-width: 360px) {
  .product-card img { max-width: calc(100% - 11px); }
}