/* STREAK DM — окно покупки (левая форма + правая карточка товара) */
:root{--s-line:#353537;--s-line-2:#2d2d2f;--s-tile:#222224;--s-input:#141415;--s-sel-bg:#3d2a24;--s-orange:#ff7a2f;--s-muted:#6f6f73;--s-soft:#a4a4a8}
html,body{overflow-x:hidden}
main{max-width:100%}

/* оверлей: прокручивается сам оверлей, а не карточка — внутри окна нет своей полосы прокрутки */
.modal{overflow-y:auto;overflow-x:hidden;place-items:start center;padding:32px 16px}
.modal-card{max-width:100%;margin:auto}
.modal-card.compact{width:min(460px,100%)}
.field[hidden]{display:none!important}

.shop-card{width:min(1000px,100%);padding:30px 34px 34px;background:var(--bg);border:1px solid #2f2f31;overflow:visible}
.shop-head{padding-right:40px;margin-bottom:24px}
.shop-head h2{margin:6px 0 0;font-size:28px;line-height:1.15;overflow-wrap:anywhere}
.shop-card [hidden]{display:none!important}

.shop-body{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);align-items:start}
.shop-left{min-width:0}
.shop-form{border:1px solid var(--s-line);padding:30px 32px 26px;display:flex;flex-direction:column;gap:12px;min-width:0}

/* поля с плавающей подписью, как на референсе */
.ffield{position:relative;display:block;min-width:0;background:var(--s-input);border:1px solid var(--s-line);transition:border-color .15s}
.ffield:focus-within{border-color:#58585c}
.ffield__label{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--s-muted);font-size:14px;pointer-events:none;transition:top .15s,font-size .15s,transform .15s;white-space:nowrap;max-width:calc(100% - 36px);overflow:hidden;text-overflow:ellipsis}
.ffield input{display:block;width:100%;min-width:0;height:56px;padding:20px 18px 6px;background:transparent;border:0;outline:0;color:#fff;font:400 16px Streak,Arial,sans-serif;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.ffield input::-webkit-outer-spin-button,.ffield input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ffield:focus-within .ffield__label,.ffield input:not(:placeholder-shown)+.ffield__label,.ffield.is-filled .ffield__label{top:12px;transform:none;font-size:11px}
.ffield input::placeholder{color:transparent}

.amount-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 26px;align-items:center}
.amount-wrap{display:flex;align-items:center;min-width:0}
.amount-wrap input{flex:1 1 auto;padding-right:6px}
.amount-wrap i{flex:0 0 auto;font-style:normal;color:#fff;font-size:16px;padding:14px 16px 0 0}
.amount-reward{margin:0;min-width:0;color:#d9d9dc;font-size:14px;line-height:1.45}
.amount-reward b{display:inline-block;font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}

/* список вариантов (наборы, разбан) */
.opt-list{display:flex;flex-direction:column;gap:12px;min-width:0}
.opt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;min-height:58px;padding:12px 18px;margin:0;text-align:left;background:var(--s-tile);color:#fff;border:1px solid var(--s-line);font:400 15px Streak,Arial,sans-serif;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:#4a4a4e}
.opt.active{background:var(--s-sel-bg);border-color:var(--s-orange)}
.opt__name{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.opt__price{flex:0 0 auto;font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}
.opt:not(.active) .opt__name,.opt:not(.active) .opt__price{color:#8a8a8e}
.opt-list .opt:not(.active) .opt__name{color:#e8e8ea}
.opt-list .opt:not(.active) .opt__price{color:#cfcfd2}
.opt-grid .opt{min-height:52px;padding:10px 16px;font-size:14px}
.opt[disabled]{opacity:.4;cursor:not-allowed}
.opt[disabled]:hover{border-color:var(--s-line)}

/* соглашение */
.agree{position:relative;display:flex;align-items:flex-start;gap:12px;margin-top:10px;color:#cfcfd2;font-size:14px;line-height:1.35;cursor:pointer;user-select:none}
.agree input{position:absolute;opacity:0;width:1px;height:1px}
.agree__box{flex:0 0 16px;width:16px;height:16px;margin-top:1px;border:1px solid #5a5a5e;background:var(--s-input);position:relative}
.agree input:checked+.agree__box{border-color:var(--s-orange)}
.agree input:checked+.agree__box:after{content:"";position:absolute;inset:3px;background:var(--s-orange)}
.agree input:focus-visible+.agree__box{outline:2px solid var(--s-orange);outline-offset:2px}
.agree__text{min-width:0}
.agree a{color:inherit;text-decoration:none}
.agree a:hover{color:#fff;text-decoration:underline}

/* кнопка оплаты */
.pay-btn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:54px;margin-top:14px;padding:0 64px;background:var(--s-orange);color:#fff;border:0;font:700 14px Streak,Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:filter .15s,opacity .15s}
.pay-btn svg{position:absolute;right:22px;top:50%;width:34px;height:14px;transform:translateY(-50%)}
.pay-btn:hover{filter:brightness(1.07)}
.pay-btn.is-locked{filter:saturate(.8) brightness(.92)}
.pay-btn:disabled{opacity:.55;cursor:wait}
.shop-left .message{min-height:0;margin:12px 0 0;color:#ffae65;font-size:13px;line-height:1.4}
.shop-left .message:empty{display:none}

/* правая карточка товара */
.shop-info{min-width:0;margin-top:56px;min-height:330px;border:1px solid var(--s-line);border-left:0;padding:48px 48px 44px 56px;display:flex;flex-direction:column;justify-content:center;overflow-wrap:anywhere}
.shop-info h3{margin:0;font-size:24px;line-height:1.2;color:#fff}
.shop-info .si-sub{margin:6px 0 0;color:var(--s-muted);font-size:15px;line-height:1.45}
.shop-info .si-lines{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.shop-info .si-lines li{color:var(--s-muted);font-size:15px;line-height:1.35}
.shop-info .si-desc{margin:14px 0 0;color:var(--s-muted);font-size:15px;line-height:1.45}
.shop-info .si-price{margin:18px 0 0;color:#fff;font-size:24px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.shop-info .si-note{margin:16px 0 0;color:var(--s-muted);font-size:13px;line-height:1.5}
.shop-info .si-rows{margin:22px 0 0;display:flex;flex-direction:column;border-top:1px solid var(--s-line-2)}
.shop-info .si-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--s-line-2);font-size:14px}
.shop-info .si-row span{color:var(--s-muted)}
.shop-info .si-row b{color:#fff;font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:auto}

/* адаптив */
@media(max-width:900px){
  /* на узких экранах карточка товара идёт между формой и кнопкой */
  .shop-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"form" "info" "pay"}
  .shop-left{display:contents}
  .shop-form{grid-area:form}
  .shop-info{grid-area:info;margin-top:0;min-height:0;border-left:1px solid var(--s-line);border-top:0;padding:28px 28px 30px}
  .shop-left .pay-btn,.shop-left .message{grid-column:1}
  .shop-left .pay-btn{grid-row:3}
  .shop-left .message{grid-row:4}
}
@media(max-width:560px){
  .modal{padding:12px 10px}
  .shop-card{padding:22px 16px 20px}
  .shop-head{margin-bottom:18px}
  .shop-head h2{font-size:22px}
  .shop-form{padding:18px 14px 18px;gap:10px}
  .amount-row{grid-template-columns:minmax(0,1fr);gap:10px}
  .opt{padding:10px 14px;min-height:52px;font-size:14px}
  .opt-grid{gap:8px}
  .opt-grid .opt{padding:10px 12px;font-size:13px;min-height:48px;gap:8px}
  .shop-info{padding:22px 16px 24px}
  .shop-info h3,.shop-info .si-price{font-size:21px}
  .pay-btn{padding:0 56px}
}
@media(max-width:340px){.opt-grid{grid-template-columns:minmax(0,1fr)}}
.nw{white-space:nowrap}

/* ===== Телефоны ===== */
@media(max-width:760px){
  .topbar{height:auto;min-height:0;padding:12px 16px 0;grid-template-columns:auto 1fr;row-gap:6px}
  .brand img{width:124px}
  .topbar nav{display:flex;grid-column:1/-1;grid-row:2;gap:26px;padding:10px 0 12px;border-top:1px solid #28282a}
  .topbar nav a{font-size:12px}
  .header-actions{gap:12px}
  .header-actions .orange-btn{padding:11px 14px;font-size:12px}
  main{width:auto;margin:18px 16px 60px}
  h1{font-size:clamp(30px,11vw,52px);margin:14px 0 14px;overflow-wrap:anywhere}
  .intro{font-size:14px;margin-bottom:24px}
  .store{min-height:0}
  .products{padding:14px;gap:10px}
  .product{min-height:54px;padding:0 14px;gap:12px}
  .product span{min-width:0}
  .rate{padding:18px 16px}
  .rate h2{font-size:19px}
  .profile{padding:14px 16px;gap:12px}
  /* кнопка «Оплатить» всегда видна внизу экрана */
  .shop-left .pay-btn{position:sticky;bottom:10px;z-index:2;box-shadow:0 -12px 24px rgba(20,20,22,.85)}
}
@media(max-width:380px){
  .topbar nav{gap:18px}
  .product small{font-size:11px}
}