.home{background-image:url("../img/BASE_img.png");background-repeat:no-repeat;background-size:contain;margin:0 auto;width:100%;min-height:calc(100vh - 155px);max-width:1920px}
.welcome__block{max-width:1440px}
.welcome{padding-top:30px}
.logo-box{display:flex;flex-direction:row;align-items:center;justify-content:space-between}
.logo1{margin-left:60px;height:40px}
.logo2{margin-right:60px;height:40px}
.welcome__text{margin-left:60px;margin-top:35px}
.welcome__text p{margin:0;font-size:clamp(18px,2.8vw,54px);font-weight:600;color:#fff;text-shadow:0 3px 35px rgba(30,66,138,.7)}
.promo-steps{position:relative;display:flex;justify-content:center;align-items:flex-end;padding-top:clamp(40px,7vw,140px);padding-left:60px;padding-right:60px;color:#fff}
.bt{position:absolute;left:60px;bottom:0;padding-bottom:clamp(10px,1.1vw,21px)}
.btn_magnum{display:flex;align-items:center;justify-content:center;text-decoration:none;text-align:center;color:#fff;font-size:24px;width:220px;background-color:#ec008c;font-weight:300;padding:20px 20px;white-space:nowrap}
.steps{display:flex;justify-content:center;align-items:flex-end;gap:58px}
.step{display:flex;align-items:flex-end;gap:12px}
.number{font-size:clamp(100px,8vw,154px);font-weight:700;line-height:1;font-family:'NIVEA Brand Type ExCon ExBold',sans-serif}
.step p{margin:0;padding-bottom:clamp(1px,1.1vw,21px);font-size:clamp(11px,.8vw,15px);line-height:1.2;font-weight:700}
.highlight{color:#ec008c;-webkit-text-stroke:.25vw #fff;paint-order:stroke fill}
.products{display:flex;flex-wrap:wrap;justify-content:center;padding:0 50px 50px;gap:20px}
.product-card{flex:0 0 calc((100% - 300px) / 5);height:auto;max-height:400px;min-width:210px;padding:20px;text-align:center}
.product-body{padding:16px 14px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer}
.product-image{width:100%;height:150px;display:flex;align-items:center;justify-content:center}
.product-image img{max-width:100%;max-height:100%;object-fit:contain;-webkit-filter:drop-shadow(0 0 20px #fff);filter:drop-shadow(0 0 20px #fff)}
.product-title{margin:0;font-weight:700;font-size:14px;text-align:center;color:#fff}
.product-prices{display:flex;align-items:baseline;gap:8px}
.price-old{position:relative;color:#ff70b7;opacity:.95;font-weight:700;font-size:16px}
.price-old::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:2px;background:#ff70b7;transform:translateY(-50%) rotate(-6deg)}
.price-new{font-weight:800;font-size:22px;color:#fff}
.product-note{display:none;margin:0;font-size:12px;opacity:.9;text-align:center;color:#fff}
.product-cta{padding-right:15px;padding-left:15px;display:flex;align-items:center;justify-content:center;height:40px;width:130px;text-decoration:none;color:#fff;background-color:#ec008c;cursor:pointer;border-radius:35px;transition:all .3s ease;font-size:13px;margin:0 auto}

/* === модалки (общие) === */
.modal{position:fixed;inset:0;z-index:10002;display:none;place-items:center;background:rgba(0,0,0,.55);overflow:hidden}
.modal.is-open{display:grid}
body.modal-lock{overflow:hidden}
.modal__dialog{position:relative;width:min(1000px,95vw);max-height:90vh;overflow:auto;background:#fff;border-radius:14px;display:grid;grid-template-columns:1fr 2fr;gap:20px;padding:20px}
.modal__close{position:absolute;z-index:100;top:8px;right:10px;width:36px;height:36px;border-radius:50%;background:#3e6ced;color:#fff;border:0;cursor:pointer;font-size:20px;line-height:36px;text-align:center;transition:background .2s ease}
.modal__close:hover{background:#0a2a79}
.modal__media{background:#0032a0;display:grid;place-items:center;overflow:hidden;border-radius:10px;padding:16px;box-sizing:border-box}
.modal__slide{width:100%}
.modal__slide img{display:block;max-width:100%;height:auto;max-height:60vh;object-fit:contain;cursor:zoom-in;transition:transform .25s ease;touch-action:manipulation;-webkit-filter:drop-shadow(0 0 15px #fff);filter:drop-shadow(0 0 15px #fff)}
.modal__slide img.is-zoomed{transform:scale(2.2);cursor:zoom-out;touch-action:none}
.modal,.modal__media,.modal__slide{scrollbar-width:none}
.modal::-webkit-scrollbar,.modal__media::-webkit-scrollbar,.modal__slide::-webkit-scrollbar{width:0;height:0;display:none}
.modal__text{display:flex;flex-direction:column;justify-content:flex-start;padding-right:10px;overflow:visible}
.modal__title{margin:0 0 10px;font-size:22px;font-weight:700;color:#0032a0;text-align:center}
.modal__desc{margin:0 0 16px;color:#333;font-size:15px;line-height:1.5;text-align:left;white-space:pre-line}
.modal__table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
.modal__table td{padding:6px 8px;border:1px solid #ddd}
.modal__table td:first-child{font-weight:800;color:#0032a0}
.modal__table td:last-child{text-align:right;width:55%}

/* === модалка покупки === */
.modal__dialog--purchase{grid-template-columns:none;width:60vw;max-width:650px}
.purchase{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:flex-start}
.purchase__media{display:flex;align-items:flex-start;justify-content:flex-start}
.purchase__img{width:220px;height:auto;object-fit:contain}
.purchase__title{margin:0 0 8px;font-size:22px;line-height:1.25}
.purchase__prices{display:flex;align-items:baseline;gap:8px}
.purchase__price-old{position:relative;color:#ff70b7;opacity:.95;font-weight:700;font-size:16px}
.purchase__price-old::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:2px;background:#ff70b7;transform:translateY(-50%) rotate(-6deg)}
.purchase__price-new{font-weight:800;font-size:22px;color:#1E4BD8}
.purchase__label{display:block;font-size:14px;margin-bottom:6px;color:#233}
.purchase__input{width:100%;padding:12px 14px;font-size:16px;border:2px solid #CFE0FF;border-radius:12px;outline:none;text-transform:uppercase}
.purchase__input:focus{border-color:#5B8CFF;box-shadow:0 0 0 3px rgba(91,140,255,.15)}
.purchase__msg{min-height:22px;margin:8px 0 12px;font-size:14px}
.purchase__msg--error{color:#c43131}
.purchase__msg--success{color:#0a8f5b}
.purchase__msg--info{color:#526}
.purchase__actions{display:flex;gap:12px;align-items:center}
.btn-pill{background:#1E4BD8;color:#fff;font-size:17px;border:none;padding:20px;height:50px}
.is-hidden{display:none !important}
.purchase__pay-grid{display:grid;gap:12px;margin-top:12px}

/* центрирование модалки purchase */
#purchase-modal.modal{place-items:center;overflow:hidden}
#purchase-modal.modal.is-open{display:grid}
#purchase-modal .modal__dialog{width:min(650px,95vw);max-height:90vh;overflow:auto;margin:0;border-radius:16px;padding:20px;background:#fff}

/* ховеры */
@media (hover:hover){
  .btn_magnum:hover,.product-cta:hover{background:#a4008c;box-shadow:0 12px 16px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19)}
  .btn-pill:hover{background:#0032a0;box-shadow:0 12px 16px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19)}
  #back-to-code:hover,#back-to-details:hover{background:#0032a0;box-shadow:0 12px 16px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19)}
}

/* адаптивы */
@media (max-width:1435px){
  .welcome__text{margin-top:15px}
  .products{gap:0 110px}
  .steps{gap:clamp(5px,3vw,60px)}
  .btn_magnum{font-size:20px;padding:16px 10px;width:200px}
}
@media (max-width:1100px){
  .btn_magnum{font-size:18px;padding:15px 15px;width:150px}
  .number{font-size:clamp(50px,10vw,154px)}
  .step p{font-size:clamp(10px,1vw,11px);padding-bottom:clamp(1px,1.5vw,21px)}
  .steps{gap:clamp(5px,2.2vw,24px)}
  .logo1,.logo2{height:30px}
  .products{gap:0 50px}
}
@media (max-width:935px){
  .btn_magnum{font-size:13px;width:110px}
  .steps{gap:clamp(5px,2vw,20px)}
  .number{font-size:clamp(50px,10vw,95px)}
  .step p{font-size:clamp(5px,1vw,9px);padding-bottom:clamp(1px,1.5vw,13px)}
  .promo-steps{padding-top:clamp(40px,9vw,84px)}
  .welcome{padding-top:15px}
  .welcome__text p{font-size:23px}
  .modal{display:none;align-items:start;justify-items:center;overflow-y:auto;padding:0}
  .modal.is-open{display:grid}
  .modal__dialog{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(40vh,auto) auto;gap:16px;width:100%;max-width:100%;max-height:100vh;box-sizing:border-box;border-radius:0;background:#fff;padding:0}
  .modal__media{display:flex;align-items:center;justify-content:center;min-height:40vh;max-height:60vh;padding:20px 16px;box-sizing:border-box;background:#0032a0;border-radius:0}
  .modal__slide{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .modal__slide img{max-width:100%;max-height:100%;object-fit:contain}
  .modal__text{overflow:visible;padding:16px;box-sizing:border-box;background:#fff}
  #purchase-modal .modal__dialog{display:block;width:min(360px,calc(100vw - 32px));max-height:90vh;height:auto;margin:24px 16px;border-radius:16px;padding:20px;overflow:auto}
  #purchase-modal .purchase{display:flex;flex-direction:column;gap:16px;align-items:center}
  #purchase-modal .purchase__actions{display:flex;justify-content:center !important;align-items:center !important}
  #purchase-modal .purchase__img{width:min(60vw,220px);height:auto;object-fit:contain}
  #order-status-modal .modal__dialog,.modal__dialog--status{display:block;width:min(360px,calc(100vw - 32px));max-height:65vh;height:auto;margin-top:24px;border-radius:16px;padding:20px;overflow:auto}
}
@media (max-width:840px){
  .logo1,.logo2{height:40px}
  .home{background-image:url("../img/BASE_img_mobile.png")}
  .welcome{padding-top:30px}
  .welcome__text{margin-top:10px}
  .welcome__text p{font-size:4vw;margin-top:40px}
  .promo-steps{padding-top:25vw}
  .steps{gap:4.5vw}
  .steps p{font-size:1.8vw;padding-bottom:2.2vw}
  .number{font-size:17vw}
  .bt{left:50%;bottom:-85px;transform:translateX(-50%)}
  .btn_magnum{padding:12px 40px;font-size:17px;width:100px}
  .products{padding-top:70px;gap:0 50px}
}
@media (max-width:720px){
  .product-body{gap:0}
  .product-card{flex:0 0 100%;max-height:800px}
  .product-image{height:380px}
  .product-title br{display:none}
  .promo-steps{padding-left:20px;padding-right:20px;padding-top:26vw}
  .steps p{font-size:1.7vw}
  .modal__dialog--purchase{padding:18px}
  .purchase{grid-template-columns:1fr}
  .purchase__img{width:160px}
  .logo1{margin-left:40px;height:30px}
  .logo2{margin-right:40px;height:30px}
  .welcome{padding-top:10px}
  .welcome__text{margin-left:40px}
  .header__section{min-width:358px}
}
@media (max-width:550px){
  .footer_navigation__link{font-size:10px}
  .promo-steps{padding-top:23vw}
  .bt{bottom:-70px}
  .btn_magnum{padding:12px 36px;font-size:13px;width:80px}
}
@media (max-width:450px){.products{padding-top:30px}}
@media (max-width:375px){
  .promo-steps{padding-top:20vw}
  .products{padding-top:0}
  .btn_magnum{padding:9px 26px;font-size:10px;width:68px}
  .bt{bottom:-60px}
  .logo1,.logo2{height:25px}
  #purchase-modal.modal .modal__dialog,.modal--purchase .modal__dialog{width:300px}
}

/* компактный режим модалки */
.purchase.is-compact{grid-template-columns:1fr}
.purchase.is-compact .purchase__media,
.purchase.is-compact .purchase__title,
.purchase.is-compact .purchase__prices{display:none !important}

/* back-кнопки как pill */
#back-to-code,#back-to-details{background:#1E4BD8;color:#fff;border:none;font-size:17px;padding:12px 20px;border-radius:35px;line-height:1.1}

/* отступы кнопок на шаге 2 */
.purchase__step--details .purchase__actions{margin-top:16px}

/* компакт: как мобильная карточка */
#purchase-modal.is-compact .modal__dialog{display:block;width:min(420px,95vw);max-height:90vh;height:auto;margin:24px 16px;border-radius:16px;padding:28px 24px;overflow:auto}
#purchase-modal.is-compact .purchase{display:flex;flex-direction:column;gap:16px;align-items:stretch}
#purchase-modal.is-compact .purchase__actions{display:flex;justify-content:center;gap:12px;margin-top:16px}

/* инлайн-ошибки */
.purchase__input.field-error{border-color:#f44336 !important;box-shadow:0 0 0 3px rgba(244,67,54,.12)}
.purchase__error{margin-top:6px;font-size:13px;color:#f44336}
.purchase__error:empty{display:none}

/* success-модалка */
.modal__dialog--success{width:min(540px,95vw);padding:24px;border-radius:16px;margin-top:25px;background:#fff;grid-template-columns:none}
.success__title{margin:0 0 12px;font-size:22px;font-weight:800;color:#0032a0}
.success__list{margin:6px 0 14px;padding:0}
.success__row{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;align-items:baseline;padding:6px 0;border-bottom:1px solid #eef1f7}
.success__row:last-child{border-bottom:0}
.success__row dt{margin:0;color:#5a6b8c;font-weight:600}
.success__row dd{margin:0;color:#0b1a33;text-align:right;font-weight:700}
.success__hint{margin:10px 0 16px;color:#2b3a55;text-align:center}

/* статус заказа — узкая карточка */
#order-status-modal .modal__dialog,.modal__dialog--status{grid-template-columns:none;width:min(420px,95vw);max-height:90vh;height:auto;overflow:auto;margin-top:24px;border-radius:16px;padding:20px;background:#fff}
#order-status-modal .purchase__actions{display:flex;justify-content:center;gap:12px;margin-top:12px}
#order-status-modal .orderstatus__promo{text-align:center;font-weight:800;font-size:18px;margin:6px 0 10px;color:#0032a0}
#order-status-modal .orderstatus__line{font-size:15px;margin:6px 0}

/* чекбокс согласия — фикс ширины и выравнивание */
.form-row--checkbox{margin-top:10px}
.purchase__checkbox-label{display:flex;align-items:flex-start;font-weight:400;font-size:13px;cursor:pointer}
.purchase__checkbox-label input[type="checkbox"]{margin-right:8px;margin-top:2px;width:auto}
.purchase__checkbox-text{display:inline-block;color:#333}
.purchase__checkbox-text a{color:#005baa;text-decoration:underline}
.purchase__checkbox-text a:hover{text-decoration:none}
