/* Mobile fixes for pages created in 2026 expansion. Desktop styles are untouched. */
@media all and (max-width: 430px){
  .container,
  .white__block,
  .calculator,
  .calculator__left,
  .calculator__right,
  .calculator__left .wrap__input,
  .calculator__input,
  .wrap__cashback .container,
  .cashback__form,
  .cashback__form form,
  .seo-calc,
  .seo-calc > *,
  .seo-calc__fields,
  .seo-calc__result,
  .service-intro,
  .service-grid,
  .service-card,
  .service-table-wrap,
  .faq-simple{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  img, video, iframe{max-width:100%;height:auto;}

  /* Standard calculator from the old site has fixed 336px controls on desktop. */
  .calculator button{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .calculator__input input{
    min-width:0;
    max-width:calc(100% - 80px);
  }

  /* Fixed 336px cashback inputs/buttons should shrink with the mobile grid column. */
  .cashback__form{
    width:100%;
  }
  .cashback__form input,
  .cashback__form button,
  .form__one-year-wrap input,
  .form__one-year-wrap button,
  .have__questions-form input,
  .have__questions-form button,
  .top__form-form input,
  .top__form-form button{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  /* New calculators. */
  .seo-calc__input{min-width:0;max-width:100%;}
  .seo-calc__input input{min-width:0;max-width:100%;}
  .seo-calc__metric{min-width:0;flex-wrap:wrap;align-items:baseline;}
  .seo-calc__metric strong{max-width:100%;overflow-wrap:anywhere;word-break:normal;}
  .seo-calc__button{max-width:100%;white-space:normal;text-align:center;}

  /* Informational tables stay inside their own scroll area instead of widening the page. */
  .seo-table,
  .seo-table-wrap{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  table.seo-table:not(.seo-table--info){
    display:block;
    width:100%;
  }

  /* Service tables become readable vertical cards on phones. */
  .service-table-wrap{overflow:visible;}
  .service-table{
    display:block;
    width:100%;
    max-width:100%;
    background:transparent;
    border:0;
  }
  .service-table thead{display:none;}
  .service-table tbody,
  .service-table tr,
  .service-table td{display:block;width:100%;max-width:100%;box-sizing:border-box;}
  .service-table tr{
    margin:0 0 12px;
    border:1px solid #e4e4e4;
    border-radius:8px;
    overflow:hidden;
    background:#fff;
  }
  .service-table td{
    border:0 !important;
    border-bottom:1px solid #eee !important;
    padding:12px 14px !important;
    overflow-wrap:anywhere;
  }
  .service-table td:last-child{border-bottom:0 !important;}
  .service-table td:first-child{background:#f5f5f5;}
  .service-table td:nth-child(2)::before,
  .service-table td:nth-child(3)::before{
    display:block;
    margin-bottom:4px;
    font-size:11px;
    line-height:1.25;
    color:#777;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.02em;
  }
  .service-table td:nth-child(2)::before{content:"Что делаем";}
  .service-table td:nth-child(3)::before{content:"Результат";}
  .service-cta{padding:20px 0;}
  .service-cta .main__but{width:100%;max-width:100%;box-sizing:border-box;}
  .faq-simple{padding-left:14px;padding-right:14px;}
}

@media all and (max-width: 359px){
  /* On 320px screens put old calculator labels over the controls. */
  .calculator__left .wrap__input{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    align-items:start;
  }
  .calculator__input{width:100%;}
  .calculator__input input{width:130px;max-width:calc(100% - 80px);}
  .calculator__price{margin-right:0;}
}

@media all and (max-width: 430px){
  .one__button,
  .one__button-but{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  .one__button-but{
    width:100%;
  }
}

@media all and (max-width: 430px){
  /* The two 3-column informational tables are easier to read as cards on phones. */
  .seo-table--hose,
  .seo-table--winter{
    display:block;
    width:100% !important;
    min-width:0 !important;
    max-width:100%;
    overflow:visible;
    border:0;
    background:transparent;
  }
  .seo-table--hose thead,
  .seo-table--winter thead{display:none;}
  .seo-table--hose tbody,
  .seo-table--hose tr,
  .seo-table--hose td,
  .seo-table--winter tbody,
  .seo-table--winter tr,
  .seo-table--winter td{
    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .seo-table--hose tr,
  .seo-table--winter tr{
    margin:0 0 12px;
    border:1px solid #DDE7ED;
    border-radius:9px;
    overflow:hidden;
    background:#fff;
  }
  .seo-table--hose td,
  .seo-table--winter td{
    padding:11px 13px !important;
    border:0 !important;
    border-bottom:1px solid #DDE7ED !important;
    white-space:normal !important;
  }
  .seo-table--hose td:last-child,
  .seo-table--winter td:last-child{border-bottom:0 !important;}
  .seo-table--hose td:first-child,
  .seo-table--winter td:first-child{background:#F4FBFF;}
  .seo-table--hose td:nth-child(2)::before,
  .seo-table--hose td:nth-child(3)::before,
  .seo-table--winter td:nth-child(2)::before,
  .seo-table--winter td:nth-child(3)::before{
    display:block;
    margin-bottom:4px;
    font-size:11px;
    line-height:1.25;
    color:#777;
    font-weight:700;
    text-transform:uppercase;
  }
  .seo-table--hose td:nth-child(2)::before{content:"Условия заправки";}
  .seo-table--hose td:nth-child(3)::before{content:"Перед заказом";}
  .seo-table--winter td:nth-child(2)::before{content:"Почему это важно зимой";}
  .seo-table--winter td:nth-child(3)::before{content:"Рекомендация";}
}