/* Compact phone header and an opt-in support chat. */
/* Account forms share the site's white cards, blue accents and clear labels. */
.signup-page { padding-top: 28px; padding-bottom: 28px; }
.signup-card, .signin-card {
  border: 1px solid #d5e3ed; border-top: 4px solid #126da7; border-radius: 16px;
  background: #fff; box-shadow: 0 8px 28px rgba(24, 62, 88, .07);
}
.signup-card { width: 100%; max-width: 760px; margin: 0 auto; padding: 28px; }
.signup-design { color: #183f5e; text-align: left; }
.signup-design .signup-heading h1, #signup .signup-heading h2 {
  margin: 0 0 8px; font-size: 28px; line-height: 1.3; font-weight: 600; text-align: left;
}
.signup-heading p { margin: 0 0 22px; color: #647b8b; font-size: 14px; line-height: 1.5; }
.signup-design form { width: 100%; margin: 0; }
.signup-design .signup-type { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; border: 0; }
.signup-type legend { margin: 0 0 10px; padding: 0; border: 0; color: #183f5e; font-size: 15px; font-weight: 600; }
.signup-type-option { display: flex; flex: 1 1 180px; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid #cbdfea; border-radius: 9px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 400; }
.signup-type-option:has(input:checked) { color: #075d97; border-color: #126da7; background: #f0f8fd; }
.signup-type-option input[type="radio"] { display: inline-block; position: static; width: 18px; height: 18px; margin: 0; flex: 0 0 18px; accent-color: #126da7; }
.signup-design .signup-section { margin: 0 0 20px; padding: 18px 0 0; border-top: 1px solid #e2ebf1; }
.signup-design .signup-section h3 { margin: 0 0 14px; font-size: 18px; line-height: 1.4; font-weight: 600; }
.signup-car summary { display: list-item; min-height: 44px; padding: 10px 0; color: #075d97; font-size: 16px; font-weight: 600; cursor: pointer; }
.signup-car summary span { color: #657d8d; font-size: 12px; font-weight: 400; }
.signup-car[open] summary { margin-bottom: 14px; }
.signup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.signup-wide { grid-column: 1 / -1; }
.signup-design .form-group { min-width: 0; margin: 0; }
.signup-design .control-label, .signin-card .control-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.signup-design .form-group.required > .control-label::after { content: ' *'; color: #bd2738; }
.signup-design .form-control, .signin-card .form-control { width: 100%; height: 44px; min-width: 0; border: 1px solid #c5d9e7; border-radius: 8px; padding: 10px 12px; font-size: 16px; background: #fff; }
.signup-design textarea.form-control { height: auto; min-height: 80px; resize: vertical; }
.signup-design .form-control:focus, .signin-card .form-control:focus { border-color: #126da7; box-shadow: 0 0 0 3px rgba(18,109,167,.12); }
.signup-design .has-error .form-control, .signin-card .has-error .form-control { border-color: #bd2738; }
.signup-design .hint-block, .signup-design .help-block, .signup-note { margin: 5px 0 0; font-size: 12px; line-height: 1.4; }
.signup-design .help-block:empty { display: none; }
.signup-design .hint-block, .signup-note { color: #657d8d; }
.signup-design .signup-note { margin: -8px 0 14px; }
.signup-captcha-row { display: flex; align-items: center; gap: 12px; max-width: 420px; }
.signup-captcha-row img { width: 120px; max-width: 42%; height: auto; border-radius: 6px; cursor: pointer; }
.signup-captcha-row .form-control { flex: 1 1 0; }
.signup-honeypot { position: absolute; width: 0; height: 0; overflow: hidden; }
.signup-consent { margin: 0 0 18px; color: #657d8d; font-size: 12px; line-height: 1.5; }
.signup-design a { color: #075d97; text-decoration: underline; text-underline-offset: 2px; }
.signup-actions .btn, .signin-card .btn { min-height: 44px; padding: 12px 20px; border-radius: 9px; background: #075d97; font-size: 14px; line-height: 1.4; white-space: normal; }
.signup-actions .btn:hover, .signin-card .btn:hover { background: #064d7b; }
.signup-actions p { margin: 16px 0 0; color: #657d8d; font-size: 14px; line-height: 1.5; }
#signup .modal-dialog { width: calc(100% - 32px); max-width: 760px; margin: 24px auto; }
#signup .modal-content { border: 1px solid #d5e3ed; border-top: 4px solid #126da7; border-radius: 16px; box-shadow: 0 20px 60px rgba(16,42,61,.25); }
#signup .modal-content::before { display: none; }
#signup .modal-body { padding: 26px !important; }
#signup .signup-heading { padding-right: 48px; }
#signup .modal-header .close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; margin: 0; border: 1px solid #d5e3ed; border-radius: 9px; background: #f4f9fc; color: #245e83; font-size: 28px; line-height: 1; opacity: 1; }
#signup .modal-body .form-group { margin-bottom: 0; }
.signin-card { margin-top: 20px; padding: 28px; }
.signin-card .row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px; margin: 0; }
.signin-card .row > .col-xs-6 { float: none; width: auto; min-width: 0; padding: 0; }
.signin-card .row > .col-xs-6:first-child::after { display: none; }
.signin-card h3 { margin: 0 0 20px; font-size: 22px; line-height: 1.4; font-weight: 600; text-align: left; }
.signin-card .wrap, .signin-card form { width: 100%; max-width: 420px; padding: 0; }
.signin-card form .form-group { margin-bottom: 18px; }
.signin-card ul { width: 100%; margin: 0 0 24px; padding: 0; line-height: 1.5; }
.signin-card ul li { margin-bottom: 12px; }
.signin-card .text-center { text-align: left !important; }
.signin-card .lost-password { margin: 0; }
.cart-instructions { margin: 16px 0; }
.cart-instructions summary { display: list-item; width: fit-content; min-height: 44px; padding: 12px 0; color: #075d97; font-size: 14px; line-height: 1.4; cursor: pointer; }
.cart-instructions summary:focus-visible { outline: 2px solid #126da7; outline-offset: 3px; }
.cart-instructions .cart-message { margin: 8px 0 16px; padding: 14px 16px; background: #f5fafe; border-color: #d5e3ed; font-size: 14px; line-height: 1.55; }
body.modal-open .menu, body.modal-open #mobile-support-chat, body.modal-open .cookie { display: none !important; }
@media (min-width: 768px) {
  header .header-account-block:has(#menu-top.menu-top-guest) { width: max-content; max-width: 100%; }
}
@media (max-width: 767px) {
  .signup-page { padding-top: 18px; }
  .signup-card { padding: 18px 14px; border-radius: 12px; }
  .signup-design .signup-heading h1, #signup .signup-heading h2 { font-size: 23px; }
  .signup-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .signup-type-option { flex-basis: 100%; }
  .signup-actions .btn, .signin-card .btn { width: 100%; }
  #signup .modal-dialog { width: calc(100% - 24px); margin: 12px auto; }
  #signup .modal-body { padding: 18px 14px !important; }
  .signin-card { padding: 20px 16px; }
  .signin-card .row { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .signin-card .row > .col-xs-6 + .col-xs-6 { border-top: 1px solid #e2ebf1; padding-top: 24px; }
  .signin-card h3 { font-size: 20px; }
  .login-form-wrap { padding: 20px 16px; margin-top: 20px; }
  .login-form-wrap > .wrap { width: 100%; max-width: 480px; padding: 0; }
  .login-form-wrap form { width: 100%; }
  .reviews .reviews-guest { margin: 0; padding: 18px 14px; border-radius: 8px; line-height: 1.5; }
  .catalog-vin-prompt__form { flex: 1 1 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; }
  .catalog-vin-prompt__form input[name="query"] { width: 100%; min-width: 0; flex-basis: 100%; }
  .catalog-vin-prompt__form button { width: 100%; }
  html.mobile-input-active .menu { display: none !important; }
}
.mobile-contact-toggle-item, .mobile-contact-actions, #mobile-support-chat, #mobile-support-close { display: none; }
header .header-user #menu-top > li.mobile-contact-toggle-item { display: none !important; }
#mobile-support-chat[hidden] { display: none !important; }
@media (max-width: 767px) {
  header { gap: 8px; padding: 8px 12px; }
  header .header-menu {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: 48px;
    column-gap: 8px;
    height: 48px !important;
    min-height: 48px;
  }
  header .header-menu > .logo { width: 48px !important; height: 48px !important; border-radius: 9px; }
  header .header-menu > .logo::after { top: 4px; left: 4px; width: 38px; height: 38px; }
  header .header-menu > ul { grid-template-rows: 44px; grid-auto-columns: 76px; height: 48px; padding-bottom: 4px; }
  header .header-menu > ul > li:nth-child(n):nth-child(n) { height: 44px !important; }
  header .header-user { gap: 6px; margin: 0 !important; }
  header .header-user #menu-top { flex-wrap: nowrap; gap: 4px; width: 100%; min-width: 0; }
  header .header-user #menu-top > li { flex: 0 0 44px; min-width: 0; height: 44px !important; }
  header .header-user #menu-top > li:first-child { flex: 1 1 auto; width: auto !important; }
  header .header-user #menu-top > li:first-child > a { width: 100% !important; }
  header .header-user #menu-top > li.username > a span { display: block; overflow: hidden; text-overflow: ellipsis; }
  header .header-user #menu-top.menu-top-guest > li:first-child { flex: 0 0 52px; }
  header .header-user #menu-top > li.header-user-signup { flex: 1 1 auto; width: auto !important; }
  header .header-user #menu-top > li.header-user-signup > a { width: 100% !important; padding: 0 3px !important; font-size: 11px !important; }
  header .header-profile-car {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
    min-width: 0; min-height: 36px; margin-top: 6px !important; padding: 6px 8px 6px 30px;
    font-size: 12px; line-height: 1.35;
  }
  header .header-profile-car .profile-car-icon { left: 8px; top: 8px; width: 16px; height: 16px; }
  header .header-profile-car .header-profile-vin { margin-top: 0; font-size: 12px; letter-spacing: 0; }
  header .header-car-prompt { padding-left: 8px; }
  header .header-car-prompt > p { display: none; }
  html.mobile-ux-ready header .header-user .header-contact { display: none !important; order: 2; }
  html.mobile-ux-ready header .header-user .header-account-block { order: 1; }
  html.mobile-ux-ready header .header-user #menu-top > li.phone-call,
  html.mobile-ux-ready header .header-user #menu-top > li.mail-delivery { display: none !important; }
  html.mobile-ux-ready header .header-user #menu-top > li.mobile-contact-toggle-item {
    display: block !important; flex: 0 0 86px; width: 86px !important; border: 0 !important; background: transparent !important;
  }
  .mobile-contact-toggle {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    width: 86px; height: 44px; padding: 0 5px; border: 1px solid #d8e2e9;
    border-radius: 8px; background: #fff; color: #075d97; font: 12px/1.2 Arial, sans-serif;
  }
  .mobile-contact-toggle svg { width: 16px; height: 16px; flex: 0 0 16px; }
  .mobile-contact-toggle:focus-visible, #mobile-support-chat:focus-visible { outline: 2px solid #075d97; outline-offset: 2px; }
  html.mobile-ux-ready header.mobile-contacts-open .header-user .header-contact {
    display: flex !important; gap: 4px 12px; padding: 8px 10px; border: 1px solid #d8e2e9; border-radius: 9px; background: #fff;
  }
  header.mobile-contacts-open .header-contact .contact-line { display: flex; align-items: center; min-height: 44px; }
  header.mobile-contacts-open .header-contact .contact-line:last-of-type { flex-basis: 100%; }
  header.mobile-contacts-open .header-contact .contact-max-icon { width: 44px; height: 44px; }
  header .header-contact .mobile-contact-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; width: 100%; }
  .mobile-contact-actions a { display: inline-flex; align-items: center; min-height: 44px; color: #075d97; font-size: 14px; text-decoration: underline; }
  html.mobile-ux-ready body .search-block #search-form.kitai-search,
  html.mobile-ux-ready body.site-index .search-block #search-form.kitai-search { margin-top: 8px !important; margin-bottom: 8px !important; }
  html.mobile-ux-ready body .search-block .video-lessons { margin-bottom: 12px !important; font-size: 13px; line-height: 1.4; }
  /* Hide only the closed native widget; the full chat remains available on tap. */
  html.mobile-chat-ready:not(.mobile-chat-open) jdiv { display: none !important; }
  html.mobile-chat-open #jcont { width: min(336px, calc(100% - 24px)) !important; max-width: calc(100% - 24px) !important; right: 12px !important; left: auto !important; }
  html.mobile-chat-ready #jivo_close_button { display: none !important; }
  html.mobile-chat-open #jcont jdiv[class*="header__"][class*="__showContent"] { left: 12px !important; right: 60px !important; width: auto !important; }
  html.mobile-chat-open #jcont jdiv[class*="header__"][class*="__showContent"] jdiv { max-width: 100% !important; }
  html.mobile-chat-open #mobile-support-close {
    position: fixed; top: 12px; right: 12px; z-index: 2147483647;
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    margin: 0; padding: 0; border: 1px solid #d2dee6; border-radius: 50%; background: #fff; color: #173f60;
    font: 30px/1 Arial, sans-serif; cursor: pointer;
  }
  #mobile-support-chat {
    position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 10010;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    width: 52px; height: 52px; padding: 4px; border: 1px solid #fff; border-radius: 50%;
    background: #075d97; color: #fff; box-shadow: 0 3px 12px rgba(14, 48, 73, .22); font: 11px/1.1 Arial, sans-serif;
  }
  #mobile-support-chat svg { width: 23px; height: 23px; }
  html.mobile-chat-open #mobile-support-chat,
  html.mobile-input-active #mobile-support-chat { display: none; }
}

/* Readable catalogue descriptions on phones: do not inherit desktop columns. */
@media (max-width: 767px) {
  .catalog-description .ckeditor {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    -webkit-column-count: 1;
    column-count: 1;
    -webkit-column-width: auto;
    column-width: auto;
    -webkit-column-gap: 0;
    column-gap: 0;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .catalog-description .ckeditor > * { max-width: 100%; word-break: normal; overflow-wrap: break-word; }
  .catalog-description h1, .catalog-description .ckeditor h1 {
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 600;
  }
  .catalog-description h2, .catalog-description .ckeditor h2 {
    margin: 22px 0 10px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
  }
  .catalog-description h3, .catalog-description .ckeditor h3 {
    margin: 18px 0 8px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
  }
  .catalog-description .ckeditor p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.6;
    text-indent: 0;
  }
  .catalog-description .ckeditor ul, .catalog-description .ckeditor ol { margin: 0 0 12px; padding-left: 20px; }
  .catalog-description .ckeditor li { margin-bottom: 6px; font-size: 15px; line-height: 1.6; }
}
/* Shared mobile layouts: informational pages, account forms and dialogs. */
@media (max-width: 767px) {
  .wrap > h1 { font-size: 24px; line-height: 1.3; margin: 22px 0 20px; overflow-wrap: break-word; }
  .delivery-content.ckeditor { column-count: 1; column-width: auto; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
  .delivery-content.ckeditor h1 { font-size: 22px; line-height: 1.35; }
  .delivery-content.ckeditor h2 { font-size: 19px; line-height: 1.4; }
  .delivery-content.ckeditor h3 { font-size: 17px; line-height: 1.4; }
  .delivery-content.ckeditor img { max-width: 100% !important; height: auto !important; }
  .delivery-content.ckeditor table { display: block; width: 100% !important; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .delivery-content.ckeditor th, .delivery-content.ckeditor td { padding: 10px; font-size: 14px; line-height: 1.45; }
  .contacts { display: flex; flex-direction: column; gap: 22px; }
  .contacts::after { display: none; }
  .contacts .contacts-map { float: none; width: 100%; height: 260px; border-radius: 8px; overflow: hidden; }
  .contacts .contacts-info, .contacts .contacts-info-center { display: block; float: none; width: 100%; height: auto; padding: 0; }
  .contacts .contacts-info { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
  .contacts .contacts-info h3 { margin: 20px 0 5px; font-size: 18px; line-height: 1.35; }
  .boot-links { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; }
  .boot-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
  .boot-links .boot-links-hr { display: none; }
  .reviews form, .cabinet-form form, .login-form-wrap form { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
  .reviews form { margin-top: 26px; }
  .reviews form .form-group, .cabinet-form form .form-group { margin-top: 0; margin-bottom: 18px; }
  .reviews, .cabinet-form, .login-form-wrap { min-width: 0; overflow-wrap: break-word; }
  .reviews .form-control, .cabinet-form .form-control, .login-form-wrap .form-control,
  .modal-form .form-control { width: 100%; max-width: 100%; min-height: 44px; font-size: 16px; }
  .reviews textarea, .cabinet-form textarea, .modal-form textarea { resize: vertical; }
  .reviews .btn, .cabinet-form .btn, .login-form-wrap .btn { min-height: 44px; max-width: 100%; white-space: normal; }
  .modal-form .modal-dialog { width: calc(100% - 24px); max-width: 480px; margin: 12px auto; }
  .modal-form .modal-body, #login.modal-form .modal-body { padding: 66px 20px 20px !important; }
  .modal-form .modal-body h2 { margin-bottom: 22px; font-size: 20px; line-height: 1.35; }
  .modal-form .modal-body .form-group { margin-bottom: 18px; }
  .modal-form .modal-body .row > [class*="col-xs-"] { float: none; width: 100%; }
  .modal-form .modal-body .btn { min-height: 44px; max-width: 100%; white-space: normal; }
  .modal-form .modal-header .close { top: 14px; right: 14px; width: 44px; height: 44px; background: none; font-size: 30px; line-height: 1; color: #173f60; }
  .modal-form .checkbox label { line-height: 1.5; overflow-wrap: anywhere; }
  .modal-form img { max-width: 100%; height: auto; }
  .order-content .order-content-head > .col-xs-6 { float: none; width: 100%; }
  .order-content .order-content-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .order-content .print-button .btn { max-width: 100%; margin-bottom: 10px; white-space: normal; }
}
/* Mobile spacing refinement after full-width layout verification. */
@media (max-width: 767px) {
  .delivery-content.ckeditor, .reviews, .cabinet-form { margin-top: 22px; padding: 18px 14px; }
  .modal-form .close { position: absolute; top: 10px; right: 10px; z-index: 10; width: 44px; height: 44px; margin: 0; padding: 0; background: none; font-size: 30px; line-height: 1; color: #173f60; opacity: 1; }
  .modal-form .modal-body .row > .form-group { margin-left: 15px; margin-right: 15px; }
  .checkout-page .btn, .checkout-page .form-control { min-height: 44px; }
}


/* Compact SEO headings shared by brand and model descriptions. */
.catalog-description h1,
.catalog-description .ckeditor h1 {
  font-size: 22px;
  line-height: 1.4;
}

.catalog-description h2,
.catalog-description .ckeditor h2 {
  font-size: 18px;
  line-height: 1.4;
}

.catalog-description h3,
.catalog-description .ckeditor h3 {
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .catalog-description h1,
  .catalog-description .ckeditor h1 {
    font-size: 20px;
  }
}