/* ============================================================
   PAPPLE · styles.css — компоненты витрины. Извлечено ДОСЛОВНО из
   дизайн-исходников + оболочка mini-app. Зависит от tokens.css.
   Поверхности несут классы:  site/app root = "ds2 gv w5"  (+ "dark").
   ============================================================ */

/* ===== base controls / country picker / cart bits (scope .gv) ===== */

  .gv{ --bg:#fff; --bg2:#f5f5f7; --text:#1d1d1f; --text2:#6e6e73; --line:rgba(0,0,0,.1); --line2:rgba(0,0,0,.06);
    --accent:#0071e3; --soft:rgba(0,113,227,.08); --sh:0 18px 50px -22px rgba(0,0,0,.22); --csh:0 1px 2px rgba(0,0,0,.06);
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif; color:var(--text);
    -webkit-font-smoothing:antialiased; position:relative; overflow:hidden; }
  .gv, .gv *{ box-sizing:border-box; margin:0; }
  .gv .eyebrow{ color:var(--accent); font-weight:600; font-size:13px; letter-spacing:.01em; }
  .gv .brand{ display:flex; align-items:center; gap:7px; font-weight:600; font-size:16px; letter-spacing:-.02em; }
  .gv .muted{ color:var(--text2); }
  .gv .pbtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer;
    font-family:inherit; font-size:16px; font-weight:500; padding:14px 24px; border-radius:980px; background:var(--accent);
    color:#fff; transition:.18s; }
  .gv .pbtn:hover{ filter:brightness(1.07); transform:translateY(-1px); }
  .gv .pbtn:disabled{ opacity:.38; cursor:not-allowed; transform:none; filter:none; }
  .gv .pbtn.block{ width:100%; }
  .gv .ghost{ background:var(--soft); color:var(--accent); }
  .gv .ghost:hover{ background:var(--accent); color:#fff; }

  /* country picker */
  .gv .cp{ position:relative; }
  .gv .cp-trigger{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line); background:var(--bg);
    border-radius:980px; padding:9px 15px; font-size:15px; font-weight:500; color:var(--text); cursor:pointer; font-family:inherit; }
  .gv .cp-trigger:hover{ border-color:var(--accent); }
  .gv .cp-flag{ font-size:18px; line-height:1; }
  .gv .cp-cur{ font-size:11px; font-weight:600; color:var(--text2); }
  .gv .cp-back{ position:fixed; inset:0; z-index:40; }
  .gv .cp-pop{ position:absolute; top:calc(100% + 8px); z-index:41; width:280px; background:var(--bg); border:1px solid var(--line);
    border-radius:16px; box-shadow:var(--sh); padding:8px; }
  .gv .cp-pop.left{ left:0; } .gv .cp-pop.right{ right:0; } .gv .cp-pop.center{ left:50%; transform:translateX(-50%); }
  .gv .cp-search{ width:100%; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:14px; outline:none;
    font-family:inherit; margin-bottom:6px; background:var(--bg2); color:var(--text); }
  .gv .cp-search::placeholder{ color:var(--text2); }
  .gv .cp-search:focus{ border-color:var(--accent); }
  .gv .cp-list{ max-height:248px; overflow-y:auto; display:flex; flex-direction:column; gap:1px; }
  .gv .cp-item{ display:flex; align-items:center; gap:10px; border:none; background:transparent; border-radius:10px;
    padding:9px 11px; font-size:14px; color:var(--text); cursor:pointer; font-family:inherit; text-align:left; }
  .gv .cp-item:hover{ background:var(--bg2); }
  .gv .cp-item.on{ background:var(--soft); color:var(--accent); font-weight:600; }
  .gv .cp-iname{ flex:1; }
  .gv .cp-empty{ padding:14px; text-align:center; color:var(--text2); font-size:13px; }

  /* delivery toggle */
  .gv .dtog{ display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--bg2); padding:4px; border-radius:12px; }
  .gv .dtog button{ display:flex; align-items:center; justify-content:center; gap:6px; border:none; background:transparent;
    color:var(--text2); font-size:13px; font-weight:500; padding:8px 0; border-radius:9px; cursor:pointer; font-family:inherit; }
  .gv .dtog button.on{ background:var(--bg); color:var(--text); font-weight:600; box-shadow:var(--csh); }

  /* mini stepper */
  .gv .mini{ display:inline-flex; align-items:center; gap:2px; background:var(--bg2); border-radius:980px; padding:2px; }
  .gv .mini button{ width:24px; height:24px; border:none; background:transparent; color:var(--text); font-size:15px; cursor:pointer;
    border-radius:50%; font-family:inherit; }
  .gv .mini button:hover{ background:var(--line); }
  .gv .mini span{ min-width:18px; text-align:center; font-size:13px; font-weight:600; }

  /* cart list */
  .gv .cl{ display:flex; flex-direction:column; }
  .gv .cl-g{ padding:8px 0; }
  .gv .cl-g + .cl-g{ border-top:1px solid var(--line2); }
  .gv .cl-gh{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text2); margin-bottom:5px; }
  .gv .cl-gh span{ font-size:14px; }
  .gv .cl-row{ display:grid; grid-template-columns:1fr auto 72px; align-items:center; gap:10px; padding:5px 0; }
  .gv .cl-l{ display:flex; flex-direction:column; line-height:1.25; }
  .gv .cl-l b{ font-size:15px; font-weight:600; }
  .gv .cl-l span{ font-size:11px; color:var(--text2); }
  .gv .cl-sub{ font-size:14px; font-weight:600; text-align:right; }
  .gv .cl-empty{ color:var(--text2); font-size:14px; text-align:center; padding:30px 10px; }

  /* ===== shared amount bits ===== */
  .gv .bignum{ font-size:64px; font-weight:600; letter-spacing:-.04em; line-height:1; }
  .gv .slider{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; outline:none; cursor:pointer;
    background:linear-gradient(90deg,var(--accent) var(--pct),var(--bg2) var(--pct)); }
  .gv .slider::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#fff;
    border:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.22); cursor:grab; }
  .gv .slider::-moz-range-thumb{ width:26px; height:26px; border-radius:50%; background:#fff; border:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.22); }
  .gv .chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .gv .chip{ border:1px solid var(--line); background:var(--bg); border-radius:980px; padding:8px 14px; font-size:14px;
    font-weight:600; color:var(--text); cursor:pointer; font-family:inherit; }
  .gv .chip:hover{ border-color:var(--accent); color:var(--accent); }
  .gv .chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .gv .rangelbl{ display:flex; justify-content:space-between; font-size:12px; color:var(--text2); }

  /* cart pill / badge */
  .gv .cartpill{ display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--bg);
    border-radius:980px; padding:9px 9px 9px 16px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; color:var(--text); }
  .gv .cartpill .n{ background:var(--accent); color:#fff; border-radius:980px; min-width:24px; height:24px; padding:0 7px;
    display:grid; place-items:center; font-size:13px; }
  .gv .cartpill.empty{ color:var(--text2); }

  /* root frames */
  .gv.vA, .gv.vB, .gv.vC, .gv.vD{ width:1120px; height:700px; background:var(--bg); }

  /* ============ A · STUDIO (slider) ============ */
  .vA .top{ display:flex; align-items:center; justify-content:space-between; padding:24px 36px; }
  .vA .stage{ display:flex; flex-direction:column; align-items:center; gap:22px; padding:6px 36px 0; }
  .vA .acard{ filter:drop-shadow(0 30px 50px rgba(0,0,0,.18)); transition:.3s; }
  .vA .arow{ width:520px; display:flex; flex-direction:column; align-items:center; gap:16px; }
  .vA .arow .slider{ width:100%; }
  .vA .pop{ position:absolute; top:70px; right:36px; width:340px; background:var(--bg); border:1px solid var(--line);
    border-radius:20px; box-shadow:var(--sh); z-index:30; overflow:hidden; }
  .vA .pop-h{ padding:16px 18px; border-bottom:1px solid var(--line2); font-weight:600; }
  .vA .pop-b{ padding:6px 18px; max-height:300px; overflow-y:auto; }
  .vA .pop-f{ padding:14px 18px; border-top:1px solid var(--line2); display:flex; flex-direction:column; gap:12px; }
  .vA .totrow{ display:flex; align-items:center; justify-content:space-between; font-size:14px; color:var(--text2); }
  .vA .totrow b{ font-size:20px; color:var(--text); letter-spacing:-.02em; }

  /* ============ B · SPLIT (input) ============ */
  .vB{ display:grid; grid-template-columns:1fr 420px; }
  .vB .left{ padding:34px 38px; display:flex; flex-direction:column; gap:20px; }
  .vB .bhead{ display:flex; align-items:center; justify-content:space-between; }
  .vB .bcardwrap{ display:flex; justify-content:center; padding:6px 0; }
  .vB .field{ display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:16px; padding:14px 18px; background:var(--bg2); }
  .vB .field .sym{ font-size:34px; font-weight:600; letter-spacing:-.03em; }
  .vB .field input{ flex:1; border:none; background:transparent; outline:none; font-size:38px; font-weight:600; letter-spacing:-.035em;
    font-family:inherit; color:var(--text); width:100%; -moz-appearance:textfield; }
  .vB .field input::-webkit-outer-spin-button,.vB .field input::-webkit-inner-spin-button{ -webkit-appearance:none; }
  .vB .right{ background:var(--bg2); border-left:1px solid var(--line); padding:28px 26px; display:flex; flex-direction:column; }
  .vB .right h3{ font-size:19px; font-weight:600; letter-spacing:-.01em; }
  .vB .rscroll{ flex:1; overflow-y:auto; margin:8px -6px; padding:0 6px; }
  .vB .rfoot{ display:flex; flex-direction:column; gap:12px; padding-top:12px; border-top:1px solid var(--line); }
  .vB .totrow{ display:flex; align-items:center; justify-content:space-between; font-size:15px; color:var(--text2); }
  .vB .totrow b{ font-size:24px; color:var(--text); letter-spacing:-.02em; }

  /* ============ C · QUICK (command/search) ============ */
  .vC{ display:flex; flex-direction:column; align-items:center; padding:54px 40px; gap:0; }
  .vC .ckicker{ font-size:14px; color:var(--text2); margin-bottom:10px; }
  .vC .csearchwrap{ width:640px; position:relative; }
  .vC .csearch{ width:100%; display:flex; align-items:center; gap:12px; border:1px solid var(--line); background:var(--bg);
    border-radius:18px; padding:18px 22px; box-shadow:var(--csh); }
  .vC .csearch input{ flex:1; border:none; outline:none; font-size:22px; font-family:inherit; background:transparent; color:var(--text); letter-spacing:-.01em; }
  .vC .cdrop{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--bg); border:1px solid var(--line);
    border-radius:16px; box-shadow:var(--sh); z-index:20; padding:8px; max-height:230px; overflow-y:auto; }
  .vC .cdrop button{ display:flex; align-items:center; gap:12px; width:100%; border:none; background:transparent; border-radius:10px;
    padding:11px 12px; font-size:16px; cursor:pointer; font-family:inherit; color:var(--text); text-align:left; }
  .vC .cdrop button:hover,.vC .cdrop button.hl{ background:var(--bg2); }
  .vC .cactive{ width:640px; margin-top:18px; display:flex; align-items:center; gap:16px; border:1px solid var(--accent);
    box-shadow:0 0 0 1px var(--accent); border-radius:18px; padding:16px 20px; }
  .vC .cactive .amtin{ border:none; outline:none; font-size:30px; font-weight:600; letter-spacing:-.03em; width:140px;
    font-family:inherit; background:transparent; color:var(--text); text-align:right; }
  .vC .ckbd{ font-size:12px; color:var(--text2); border:1px solid var(--line); border-radius:7px; padding:3px 7px; }
  .vC .cbag{ width:760px; margin-top:30px; }
  .vC .cbag-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .vC .bagchips{ display:flex; flex-wrap:wrap; gap:9px; align-content:flex-start; min-height:48px; }
  .vC .bagchip{ display:inline-flex; align-items:center; gap:9px; background:var(--bg2); border:1px solid var(--line2);
    border-radius:980px; padding:8px 8px 8px 14px; font-size:14px; font-weight:600; }
  .vC .bagchip .x{ width:22px; height:22px; border-radius:50%; border:none; background:var(--line); cursor:pointer; font-size:13px; color:var(--text); }
  .vC .bagchip .x:hover{ background:var(--accent); color:#fff; }
  .vC .cbag-empty{ color:var(--text2); font-size:14px; padding:14px 0; }

  /* ============ D · KEYPAD (calculator) ============ */
  .vD{ display:grid; grid-template-rows:1fr auto; }
  .vD .dtop{ display:grid; grid-template-columns:1fr 360px; gap:0; }
  .vD .dleft{ padding:30px 34px; display:flex; flex-direction:column; gap:18px; }
  .vD .dhead{ display:flex; align-items:center; justify-content:space-between; }
  .vD .ddisp{ display:flex; flex-direction:column; gap:4px; margin-top:auto; }
  .vD .ddisp .lbl{ font-size:13px; color:var(--text2); }
  .vD .ddisp .val{ font-size:58px; font-weight:600; letter-spacing:-.04em; line-height:1; }
  .vD .ddisp .rub{ font-size:16px; color:var(--text2); }
  .vD .dpad{ background:var(--bg2); border-left:1px solid var(--line); padding:22px; display:grid;
    grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:10px; }
  .vD .key{ border:none; background:var(--bg); border-radius:14px; font-size:24px; font-weight:500; cursor:pointer;
    font-family:inherit; color:var(--text); box-shadow:var(--csh); transition:.1s; display:grid; place-items:center; }
  .vD .key:hover{ background:#fff; transform:translateY(-1px); }
  .vD .key:active{ transform:translateY(0); }
  .vD .key.fn{ background:transparent; box-shadow:none; font-size:15px; font-weight:600; color:var(--accent); }
  .vD .key.add{ grid-column:1 / -1; background:var(--accent); color:#fff; font-size:17px; font-weight:600; box-shadow:none; }
  .vD .dbar{ border-top:1px solid var(--line); padding:16px 34px; display:flex; align-items:center; gap:18px; min-height:90px; }
  .vD .dbar-list{ flex:1; display:flex; gap:8px; overflow-x:auto; align-items:center; }
  .vD .dbar-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--bg2); border:1px solid var(--line2);
    border-radius:980px; padding:7px 8px 7px 13px; font-size:13px; font-weight:600; white-space:nowrap; }
  .vD .dbar-chip .x{ width:20px; height:20px; border-radius:50%; border:none; background:var(--line); cursor:pointer; font-size:12px; }
  .vD .dbar-empty{ flex:1; color:var(--text2); font-size:14px; }
  .vD .dbar-tot{ text-align:right; }
  .vD .dbar-tot .t{ font-size:22px; font-weight:600; letter-spacing:-.02em; }
  .vD .dbar-tot .s{ font-size:12px; color:var(--text2); }
  

/* ===== discount dropdown (.h-sel) ===== */

  .f3-disc{ width:100%; margin-top:16px; }

  /* H1 · segmented bar */
  .h-seg{ width:100%; display:flex; gap:3px; }
  .h-segc{ flex:1; border:none; background:var(--bg2); color:var(--text2); font-size:11px; font-weight:600; padding:10px 0; cursor:pointer; font-family:inherit; border-radius:7px; transition:.15s; }
  .h-segc:first-child{ border-top-left-radius:11px; border-bottom-left-radius:11px; }
  .h-segc:last-child{ border-top-right-radius:11px; border-bottom-right-radius:11px; }
  .h-segc.reached{ background:rgba(0,113,227,.12); color:var(--accent); }
  .h-segc.on{ background:var(--soft); color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent); }

  /* H2 · progress to next */
  .h-prog{ width:100%; display:flex; flex-direction:column; gap:8px; }
  .h-prog-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; }
  .h-prog-cur{ font-weight:700; color:var(--accent); }
  .h-prog-next{ color:var(--text2); }
  .h-prog-bar{ height:9px; background:var(--bg2); border-radius:980px; overflow:hidden; }
  .h-prog-fill{ height:100%; background:var(--accent); border-radius:980px; transition:width .2s; }

  /* H3 · compact table */
  .h-table{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .h-trow{ display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); background:var(--bg); border-radius:11px; padding:8px 12px; font-size:12px; color:var(--text2); cursor:pointer; font-family:inherit; }
  .h-trow b{ color:var(--text); font-size:14px; font-weight:600; }
  .h-trow.on{ background:var(--soft); border-color:var(--accent); }
  .h-trow.on, .h-trow.on b{ color:var(--accent); }

  /* H4 · dropdown select */
  .h-sel{ width:100%; position:relative; }
  .h-sel-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); background:var(--bg2); border-radius:14px; padding:12px 16px; font-size:14px; font-weight:600; color:var(--text); cursor:pointer; font-family:inherit; }
  .h-sel-btn i{ font-style:normal; transition:.2s; color:var(--text2); }
  .h-sel-btn i.up{ transform:rotate(180deg); }
  .h-sel-back{ position:fixed; inset:0; z-index:20; }
  .h-sel-pop{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--bg); border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh); z-index:21; padding:6px; max-height:236px; overflow-y:auto; }
  .h-sel-opt{ width:100%; display:flex; align-items:center; justify-content:space-between; border:none; background:transparent; border-radius:9px; padding:10px 12px; font-size:14px; color:var(--text2); cursor:pointer; font-family:inherit; }
  .h-sel-opt b{ color:var(--text); font-weight:600; }
  .h-sel-opt:hover{ background:var(--bg2); }
  .h-sel-opt.on{ background:var(--soft); }
  .h-sel-opt.on, .h-sel-opt.on b{ color:var(--accent); }

  /* H5 · card badge + line */
  .h-cardbadge{ position:absolute; top:-12px; right:-10px; width:48px; height:48px; border-radius:50%; background:#1f8a5b; color:#fff;
    font-weight:700; font-size:15px; display:grid; place-items:center; box-shadow:0 8px 20px rgba(31,138,91,.42); z-index:3; }
  .h-badgeline{ width:100%; display:flex; flex-direction:column; align-items:center; gap:2px; padding:13px; border-radius:16px; background:var(--bg2); }
  .h-badgeline.on{ background:rgba(31,138,91,.10); }
  .h-badgeline b{ font-size:18px; font-weight:700; color:var(--text); }
  .h-badgeline.on b{ color:#1f8a5b; }
  .h-badgeline span{ font-size:12px; color:var(--text2); }
  

/* ===== quick ₽ pills (.pf-quick/.pf-pill) ===== */

  .pf-body{ display:flex; flex-direction:column; gap:18px; padding-bottom:8px; }

  /* account identity */
  .pf-acc{ display:flex; align-items:center; gap:13px; }
  .pf-acc.big{ gap:15px; }
  .pf-avatar{ width:48px; height:48px; border-radius:50%; background:var(--soft); color:var(--accent); display:grid; place-items:center; flex:0 0 auto; }
  .pf-acc.big .pf-avatar{ width:58px; height:58px; }
  .pf-avatar.sm{ width:40px; height:40px; }
  .pf-accinfo{ min-width:0; }
  .pf-accname{ font-size:17px; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .pf-tgtag{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--accent); background:var(--soft); padding:2px 8px; border-radius:980px; }
  .pf-accmail{ font-size:13px; color:var(--text2); margin-top:2px; }

  /* sections */
  .pf-section{ display:flex; flex-direction:column; gap:10px; }
  .pf-section-h{ font-size:13px; font-weight:600; color:var(--text2); letter-spacing:.01em; }

  /* history rows */
  .pf-hist{ display:flex; flex-direction:column; gap:9px; }
  .pf-hrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg2); border-radius:14px; padding:11px 13px; }
  .pf-hrow.grouped{ background:transparent; border-radius:0; border-top:1px solid var(--line2); padding:11px 15px; }
  .pf-group .pf-hrow.grouped:first-child{ border-top:none; }
  .pf-hl{ display:flex; align-items:center; gap:11px; min-width:0; }
  .pf-hcard{ width:42px; height:30px; border-radius:7px; background:linear-gradient(150deg,#2f74ff,#0c1f86); display:grid; place-items:center; flex:0 0 auto; }
  .pf-hflag{ font-size:15px; }
  .pf-hmeta{ display:flex; flex-direction:column; min-width:0; }
  .pf-hmeta b{ font-size:14px; font-weight:600; letter-spacing:-.01em; }
  .pf-hmeta span{ font-size:11px; color:var(--text2); }

  /* code copy chip */
  .pf-code{ display:inline-flex; align-items:center; gap:7px; border:1px dashed var(--line); background:var(--bg); border-radius:9px;
    padding:6px 9px; cursor:pointer; font-family:ui-monospace,"SF Mono",Menlo,monospace; transition:.15s; flex:0 0 auto; }
  .pf-codetxt{ font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--text); white-space:nowrap; }
  .pf-codeico{ color:var(--text2); display:grid; place-items:center; }
  .pf-code:hover{ border-color:var(--accent); }
  .pf-code.done{ border-style:solid; border-color:#1f8a5b; }
  .pf-code.done .pf-codetxt, .pf-code.done .pf-codeico{ color:#1f8a5b; }
  .pf-code.big{ width:100%; justify-content:space-between; padding:12px 14px; border-radius:12px; background:var(--bg2); }
  .pf-code.big .pf-codetxt{ font-size:16px; letter-spacing:.06em; }

  /* faq accordion */
  .pf-faq{ display:flex; flex-direction:column; gap:14px; }
  .pf-faqsec-h{ font-size:12px; font-weight:600; color:var(--text2); margin-bottom:6px; }
  .pf-qrow{ border-bottom:1px solid var(--line2); }
  .pf-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; border:none; background:transparent;
    padding:11px 0; font-size:14px; font-weight:500; color:var(--text); text-align:left; cursor:pointer; font-family:inherit; }
  .pf-qchev{ color:var(--text2); transition:.2s; flex:0 0 auto; }
  .pf-qrow.open .pf-qchev{ transform:rotate(90deg); }
  .pf-a{ font-size:13px; color:var(--text2); line-height:1.5; padding:0 0 12px; }

  /* suggest box */
  .pf-suggest{ display:flex; flex-direction:column; gap:9px; background:var(--bg2); border-radius:16px; padding:14px; }
  .pf-suggest.compact{ background:transparent; padding:4px 0; }
  .pf-suggest-h{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
  .pf-suggest textarea{ width:100%; box-sizing:border-box; border:1px solid var(--line); background:var(--bg); color:var(--text);
    border-radius:12px; padding:11px 13px; font-size:14px; font-family:inherit; resize:none; outline:none; }
  .pf-suggest textarea:focus{ border-color:var(--accent); }
  .pf-sent{ display:flex; align-items:center; gap:8px; justify-content:center; background:rgba(31,138,91,.12); color:#1f8a5b;
    font-size:14px; font-weight:600; padding:14px; border-radius:14px; }

  /* footer actions */
  .pf-actions{ display:flex; flex-direction:column; gap:2px; }
  .pf-act{ display:flex; align-items:center; justify-content:space-between; border:none; background:transparent; padding:14px 2px;
    border-top:1px solid var(--line2); font-size:15px; color:var(--text); cursor:pointer; font-family:inherit; }
  .pf-act span{ display:flex; align-items:center; gap:11px; }
  .pf-act i{ color:var(--text2); }
  .pf-act.danger{ color:#e0383e; }
  .pf-act.solo{ justify-content:center; border:1px solid var(--line); border-radius:14px; margin-top:4px; }

  /* P2 grouped (iOS settings) */
  .pf-body.grouped{ gap:10px; }
  .pf-group{ background:var(--bg2); border-radius:16px; overflow:hidden; }
  .pf-grouptitle{ font-size:12px; font-weight:600; color:var(--text2); padding:6px 6px 0; text-transform:uppercase; letter-spacing:.03em; }
  .pf-grow{ padding:13px 15px; }
  .pf-grow.head{ display:flex; align-items:center; gap:12px; }
  .pf-srow{ width:100%; display:flex; align-items:center; justify-content:space-between; border:none; background:transparent;
    border-top:1px solid var(--line2); padding:13px 15px; font-size:15px; color:var(--text); cursor:pointer; font-family:inherit; }
  .pf-group .pf-srow:first-child{ border-top:none; }
  .pf-srow-l{ display:flex; align-items:center; gap:11px; }
  .pf-srow-r{ display:flex; align-items:center; gap:7px; color:var(--text2); }
  .pf-srow-r em{ font-style:normal; font-size:13px; }
  .pf-srow.danger{ color:#e0383e; }
  .pf-group .pf-faq{ padding:6px 15px; gap:0; }
  .pf-group .pf-faqsec + .pf-faqsec .pf-qrow:first-child{ border-top:1px solid var(--line2); }

  /* P3 segmented */
  .pf-seg3{ display:flex; gap:4px; background:var(--bg2); padding:4px; border-radius:13px; }
  .pf-seg3 button{ flex:1; border:none; background:transparent; padding:9px 0; border-radius:9px; font-size:13px; font-weight:600;
    color:var(--text2); cursor:pointer; font-family:inherit; transition:.15s; }
  .pf-seg3 button.on{ background:var(--bg); color:var(--text); box-shadow:var(--csh); }

  /* P4 big code cards */
  .pf-hcards{ display:flex; flex-direction:column; gap:11px; }
  .pf-hcardbig{ background:var(--bg2); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:10px; }
  .pf-hcardbig-top{ display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; }
  .pf-hstatus{ font-size:11px; font-weight:600; color:#1f8a5b; background:rgba(31,138,91,.12); padding:2px 9px; border-radius:980px; }
  .pf-hcardbig-date{ font-size:11px; color:var(--text2); }

  /* P5 dashboard */
  .pf-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
  .pf-stats.two{ grid-template-columns:1fr 1fr; }
  .pf-stat{ background:var(--bg2); border-radius:14px; padding:13px 8px; text-align:center; }
  .pf-stat b{ display:block; font-size:19px; font-weight:700; letter-spacing:-.02em; }
  .pf-stat span{ font-size:11px; color:var(--text2); }
  .pf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .pf-tile{ display:flex; align-items:center; gap:9px; border:1px solid var(--line); background:var(--bg); border-radius:13px;
    padding:13px; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; font-family:inherit; }
  .pf-tile svg{ color:var(--accent); flex:0 0 auto; }
  .pf-tile.danger{ color:#e0383e; } .pf-tile.danger svg{ color:#e0383e; }

  /* back button in header */
  .f2-back{ display:flex; align-items:center; gap:3px; border:none; background:transparent; color:var(--accent); cursor:pointer;
    font-family:inherit; font-size:17px; font-weight:600; padding:0; margin-left:-4px; }
  .f2-back span{ letter-spacing:-.01em; }

  /* sub-screens */
  .pf-buytag{ font-size:10px; font-weight:600; color:var(--accent); background:var(--soft); padding:1px 6px; border-radius:980px; margin-left:7px; }
  .pf-hrow.buy .pf-hmeta{ gap:2px; }
  .pf-buymoney{ font-size:12px; color:var(--text2); }
  .pf-buymoney b{ color:var(--text); font-weight:700; }
  .pf-buymoney em{ font-style:normal; color:#1f8a5b; font-weight:600; }
  .gv.dark .pf-buymoney em{ color:#34c98a; }
  .pf-emailcur{ display:flex; flex-direction:column; gap:3px; background:var(--bg2); border-radius:14px; padding:13px 15px; }
  .pf-emailcur span{ font-size:12px; color:var(--text2); }
  .pf-emailcur b{ font-size:16px; font-weight:600; }
  .pf-field{ display:flex; flex-direction:column; gap:7px; }
  .pf-field label{ font-size:13px; font-weight:600; color:var(--text2); }
  .pf-field input{ border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:12px; padding:13px 15px;
    font-size:16px; font-family:inherit; outline:none; }
  .pf-field input:focus{ border-color:var(--accent); }
  .pf-note{ font-size:12px; color:var(--text2); line-height:1.5; margin:0; }
  .pf-supcard{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; background:var(--bg2);
    border-radius:18px; padding:24px 20px; }
  .pf-supicon{ width:56px; height:56px; border-radius:50%; background:var(--soft); color:var(--accent); display:grid; place-items:center; }
  .pf-supcard b{ font-size:18px; font-weight:600; }
  .pf-supcard span{ font-size:13px; color:var(--text2); line-height:1.5; }
  .pf-supcard .pbtn{ margin-top:6px; }
  .pf-suplink{ font-size:14px; color:var(--accent); text-decoration:none; font-weight:500; }
  .pf-hint{ font-size:13px; color:var(--text2); line-height:1.5; }
  .pf-tgtag svg{ display:block; }

  /* quick-amount pills (under slider) */
  .pf-quick{ display:flex; gap:7px; width:100%; margin-top:14px; overflow-x:auto; padding-bottom:2px; }
  .pf-quick::-webkit-scrollbar{ height:0; }
  .pf-pill{ flex:0 0 auto; white-space:nowrap; border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:980px;
    padding:8px 13px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:.15s; }
  .pf-pill:hover{ border-color:var(--accent); }
  .pf-pill.on{ background:var(--soft); border-color:var(--accent); color:var(--accent); }
  

/* ===== contact fields in cart (.f2-contact/.f2-fld) ===== */

  .f2 .f2-screen{ flex:1; overflow-y:auto; }
  .f2 .f2-screen::-webkit-scrollbar{ width:0; }
  .f2-body{ padding:6px 22px 18px; display:flex; flex-direction:column; align-items:center; }
  .f2-head{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:4px 0 10px; }
  .f2-brand{ display:flex; align-items:center; gap:6px; font-weight:600; font-size:16px; letter-spacing:-.02em; }
  .f2-title{ font-size:20px; font-weight:600; letter-spacing:-.02em; }
  .f2-card{ filter:drop-shadow(0 18px 34px rgba(0,0,0,.20)); margin:6px 0 2px; }

  .f2-hero{ width:100%; display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px; margin-top:12px; border-radius:18px; background:var(--bg2); }
  .f2-hero.on{ background:rgba(31,138,91,.10); }
  .f2-hero b{ font-size:26px; font-weight:700; color:var(--text); letter-spacing:-.03em; line-height:1; }
  .f2-hero.on b{ font-size:34px; color:#1f8a5b; }
  .f2-hero span{ font-size:13px; color:var(--text2); }

  /* even discount flags above slider */
  .f2-flags{ width:100%; display:flex; justify-content:space-between; gap:9px; margin-top:20px; }
  .f2-pill{ flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; border:1px solid var(--line); background:var(--bg);
    border-radius:13px; padding:8px 4px; cursor:pointer; font-family:inherit; transition:.15s; }
  .f2-pill b{ font-size:15px; font-weight:700; color:var(--text); letter-spacing:-.01em; }
  .f2-pill span{ font-size:10px; color:var(--text2); }
  .f2-pill.on{ background:var(--accent); border-color:var(--accent); box-shadow:0 6px 16px -6px var(--accent); }
  .f2-pill.on b, .f2-pill.on span{ color:#fff; }

  .f2-hs{ width:100%; margin:14px 0 2px; }
  .f2-rail{ position:relative; height:8px; background:var(--bg2); border-radius:980px; cursor:pointer; touch-action:none; }
  .f2-fill{ position:absolute; left:0; top:0; bottom:0; background:var(--accent); border-radius:980px; }
  .f2-notch{ position:absolute; top:50%; width:10px; height:10px; border-radius:50%; background:var(--bg); border:2px solid var(--line); transform:translate(-50%,-50%); z-index:2; }
  .f2-notch.on{ background:#fff; border-color:#fff; }
  .f2-thumb{ position:absolute; top:50%; width:26px; height:26px; border-radius:50%; background:#fff; border:1px solid var(--line); box-shadow:0 3px 10px rgba(0,0,0,.28); transform:translate(-50%,-50%); z-index:5; }
  .f2-range{ display:flex; justify-content:space-between; font-size:12px; color:var(--text2); margin-top:12px; }

  /* amount controls */
  .f2-amtwrap{ width:100%; margin-top:18px; display:flex; justify-content:center; }
  .f2 input[type=number]::-webkit-outer-spin-button, .f2 input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .f2 input[type=number]{ -moz-appearance:textfield; }
  .f2-amt.tap{ display:flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer; font-family:inherit; padding:0; }
  .f2-big{ font-size:38px; font-weight:600; letter-spacing:-.04em; color:var(--text); }
  .f2-pen{ color:var(--accent); display:flex; }
  .f2-inline{ display:flex; align-items:center; gap:4px; }
  .f2-inline .sym{ font-size:30px; font-weight:600; color:var(--text); }
  .f2-inline input{ width:150px; font-size:34px; font-weight:600; border:none; border-bottom:2px solid var(--accent); outline:none; font-family:inherit; text-align:center; background:transparent; color:var(--text); }
  .f2-fieldbox{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:14px; padding:11px 16px; background:var(--bg2); width:100%; max-width:300px; }
  .f2-fieldbox.slim{ padding:8px 14px; max-width:220px; }
  .f2-fieldbox .sym{ font-size:28px; font-weight:600; }
  .f2-fieldbox.slim .sym{ font-size:20px; }
  .f2-fieldbox input{ flex:1; min-width:0; border:none; background:transparent; outline:none; font-size:30px; font-weight:600; letter-spacing:-.03em; font-family:inherit; color:var(--text); }
  .f2-fieldbox.slim input{ font-size:22px; }
  .f2-stepperbox{ display:flex; align-items:center; gap:10px; width:100%; max-width:320px; }
  .f2-stepperbox > button{ width:48px; height:48px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); background:var(--bg); font-size:24px; cursor:pointer; font-family:inherit; color:var(--text); }
  .f2-stepperbox > button:hover{ border-color:var(--accent); color:var(--accent); }
  .f2-stepin{ flex:1; display:flex; align-items:center; justify-content:center; gap:4px; border:1px solid var(--line); border-radius:14px; padding:9px; background:var(--bg2); }
  .f2-stepin input{ width:100%; text-align:center; border:none; background:transparent; outline:none; font-size:26px; font-weight:600; font-family:inherit; color:var(--text); }
  .f2-stepin .sym{ font-size:22px; font-weight:600; }
  .f2-presets{ width:100%; display:flex; flex-direction:column; gap:12px; align-items:center; }
  .f2-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
  .f2-chip{ border:1px solid var(--line); background:var(--bg); border-radius:980px; padding:7px 14px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; color:var(--text); }
  .f2-chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .f2-kp{ width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
  .f2-pad{ width:100%; max-width:290px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .f2-pad button{ height:46px; border:none; background:var(--bg2); border-radius:12px; font-size:20px; font-weight:500; cursor:pointer; font-family:inherit; color:var(--text); }
  .f2-pad button:hover{ background:var(--line); }
  .f2-pad-ok{ grid-column:1 / -1; background:var(--accent) !important; color:#fff !important; font-weight:600; }
  .f2-add{ margin-top:24px; }

  /* cart */
  .f2-cartscroll{ width:100%; }
  .f2-section{ width:100%; font-size:13px; font-weight:600; color:var(--text2); margin:16px 0 8px; }
  .f2-contact{ display:flex; flex-direction:column; gap:8px; width:100%; }
  .f2-fld{ display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--bg); color:var(--text2); }
  .f2-fld:focus-within{ border-color:var(--accent); }
  .f2-fld input{ flex:1; border:none; outline:none; background:transparent; font-size:15px; font-family:inherit; color:var(--text); }
  .f2-chint{ font-size:12px; color:var(--text2); line-height:1.4; }
  /* mini-app: fixed Telegram delivery row (user is already inside Telegram) */
  .f2-tgrow{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--bg2); }
  .f2-tgrow-ic{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); }
  .f2-tgrow-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .f2-tgrow-txt b{ font-size:14px; font-weight:600; color:var(--text); letter-spacing:-.01em; }
  .f2-tgrow-txt span{ font-size:13px; color:var(--text2); }
  .f2-tgrow-chk{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#fff; }
  .f2-emaillbl{ font-size:12px; font-weight:600; color:var(--text2); margin-top:2px; }
  .f2-tgnote{ font-size:12px; color:var(--text2); line-height:1.45; margin-top:-2px; }
  .f2-checkout{ width:100%; margin-top:16px; padding-top:14px; border-top:1px solid var(--line2); display:flex; flex-direction:column; gap:9px; }
  .f2-need{ font-size:12px; color:#e0383e; text-align:center; }
  .f2-duprow{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text2); cursor:pointer; padding:2px 0; }
  .f2-duprow input[type=checkbox]{ width:16px; height:16px; accent-color:var(--accent); flex:0 0 auto; cursor:pointer; }
  .f2-dupico{ display:flex; align-items:center; color:var(--accent); }
  .ds2-checkout-err{ font-size:13px; color:#e0383e; text-align:center; margin-top:4px; }
  /* delivery method toggle */
  .f2-dtoggle{ display:flex; gap:6px; background:var(--bg2); border-radius:12px; padding:4px; }
  .f2-dtbtn{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; border:none; background:transparent;
    border-radius:9px; padding:8px 10px; font-size:14px; font-weight:500; color:var(--text2); font-family:inherit;
    cursor:pointer; transition:.15s; white-space:nowrap; }
  .f2-dtbtn.on{ background:var(--bg); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.10); }
  .f2-dtbtn-ico{ display:flex; align-items:center; color:inherit; }

  /* help */
  .f2-faq{ width:100%; display:flex; flex-direction:column; gap:11px; }
  .f2-q{ background:var(--bg2); border-radius:14px; padding:14px 16px; }
  .f2-qq{ font-weight:600; font-size:15px; margin-bottom:4px; letter-spacing:-.01em; }
  .f2-qa{ font-size:13px; color:var(--text2); line-height:1.5; }
  .f2-support{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--accent); font-weight:600; margin-top:6px; justify-content:center; }

  /* tab bar */
  .f2-tabs{ flex:0 0 auto; display:flex; gap:6px; border-top:1px solid var(--line); background:color-mix(in srgb,var(--bg) 90%,transparent);
    backdrop-filter:blur(14px); padding:9px 14px 24px; }
  .f2-tabs button{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; border:none; background:transparent; color:var(--text2);
    font-size:11px; font-weight:500; cursor:pointer; font-family:inherit; padding:5px 0; border-radius:14px; }
  .f2-tabs button.on{ color:var(--accent); }
  .f2-ico{ position:relative; display:flex; }
  .f2-badge{ position:absolute; top:-7px; right:-11px; background:#e0383e; color:#fff; font-size:10px; font-weight:700; min-width:16px; height:16px;
    border-radius:980px; display:grid; place-items:center; padding:0 4px; font-style:normal; }
  .f2-tabs.pill button.on{ background:var(--soft); }
  

/* ===== store / configurator / hero / cart (.ds2*) ===== */

  .ds2{ --r:18px; --tg:#229ED9; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
    background:var(--bg); color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased; }
  .ds2 *{ box-sizing:border-box; }
  /* site root must NOT be a scroll container, or the sticky nav can't stick (mini-app keeps overflow:hidden) */
  .ds2:not(.mapp){ overflow:visible; }
  .ds2-cq{ display:flex; flex-direction:column; min-height:100vh; }
  .ds2 h1{ font-size:24px; line-height:1.08; letter-spacing:-.03em; font-weight:600; margin:0; }
  .ds2 h2{ font-size:24px; line-height:1.1; letter-spacing:-.02em; font-weight:600; margin:0; }
  .ds2 p{ margin:0; }
  .ds2 a{ color:inherit; text-decoration:none; }

  .ds2-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; font-family:inherit;
    font-size:16px; font-weight:600; padding:14px 22px; border-radius:980px; transition:.16s; }
  .ds2-btn.primary{ background:var(--accent); color:#fff; }
  .ds2-btn.primary:hover{ filter:brightness(1.07); }
  .ds2-btn.primary:disabled{ opacity:.4; cursor:not-allowed; filter:none; }
  .ds2-btn.tgfill{ background:var(--tg); color:#fff; }
  .ds2-btn.block{ width:100%; }

  /* telegram button */
  .ds2-tg{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; font-family:inherit;
    font-size:15px; font-weight:600; padding:13px 20px; border-radius:980px; background:var(--tg); color:#fff; transition:.16s; }
  .ds2-tg:hover{ filter:brightness(1.06); }
  .ds2-tg.block{ width:100%; }
  /* TASK-S036 R5: кнопка Telegram в nav — явный белый текст */
  .ds2-tg.nav{ padding:9px 12px; font-size:14px; color:#fff !important; }
  /* лейбл «Telegram» виден и на мобиле (как на десктопе); скрыт только в mini-app */
  .ds2-tg.nav .ds2-tglabel{ display:inline; }
  .ds2.mapp .ds2-tg.nav .ds2-tglabel{ display:none; }
  .ds2-tg.hero{ margin-top:4px; background:#fff; color:var(--tg); }
  .ds2-tg.alt{ background:transparent; color:var(--tg); box-shadow:inset 0 0 0 1.5px var(--tg); }

  /* nav */
  .ds2-nav{ position:sticky; top:0; z-index:40; backdrop-filter:saturate(180%) blur(20px);
    background:color-mix(in srgb,var(--bg) 84%,transparent); border-bottom:1px solid var(--line); }
  .ds2-navin{ max-width:1100px; margin:0 auto; height:56px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .ds2-subnav{ display:flex; justify-content:center; padding:0 16px 9px; }
  .ds2-logo{ display:flex; align-items:center; gap:7px; font-weight:600; font-size:18px; letter-spacing:-.02em; border:none; background:none; color:var(--text); cursor:pointer; font-family:inherit; }
  .ds2-logo.sm{ font-size:15px; }
  .ds2-pagetabs{ display:flex; gap:3px; background:var(--bg2); padding:3px; border-radius:980px; }
  .ds2-pagetabs button{ border:none; background:transparent; color:var(--text2); font-size:13px; font-weight:600; padding:8px 18px;
    border-radius:980px; cursor:pointer; font-family:inherit; transition:.15s; white-space:nowrap; }
  .ds2-pagetabs button.on{ background:var(--bg); color:var(--text); box-shadow:var(--csh); }
  .ds2-navr{ display:flex; align-items:center; gap:8px; }
  .ds2-ico{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--text);
    display:grid; place-items:center; cursor:pointer; flex:0 0 auto; }
  /* prominent cart button: icon + count + arrow */
  .ds2-cartbtn{ position:relative; display:inline-flex; align-items:center; gap:7px; border:none; background:var(--accent); color:#fff;
    border-radius:980px; padding:9px 14px; cursor:pointer; font-family:inherit; box-shadow:0 6px 16px -6px var(--accent); transition:.16s; }
  .ds2-cartbtn:hover{ filter:brightness(1.07); transform:translateY(-1px); }
  .ds2-cartn{ background:rgba(255,255,255,.3); border-radius:980px; padding:0 7px; font-size:12px; font-weight:700; min-width:18px; text-align:center; }
  .ds2-cartsum{ font-size:14px; font-weight:600; white-space:nowrap; }
  .ds2-navr{ min-width:0; }
  .ds2-cartbtn{ flex:0 0 auto; }

  .ds2-main{ flex:1; width:100%; max-width:1100px; margin:0 auto; padding:18px 16px 40px; }

  /* store page */
  .ds2-store{ display:flex; flex-direction:column; gap:16px; }
  .ds2-headline{ text-align:center; display:flex; flex-direction:column; gap:6px; }
  .ds2-headline.mini h1{ font-size:21px; }
  .ds2-headline.band p{ font-size:14px; color:var(--text2); }
  .ds2-headline.strip{ padding:2px 0; }
  .ds2-eyebrow{ font-size:13px; font-weight:600; color:var(--accent); }

  /* configurator */
  .ds2-config{ display:flex; flex-direction:column; gap:18px; background:var(--bg); border:1px solid var(--line); border-radius:22px;
    padding:20px; box-shadow:0 20px 50px -28px rgba(0,0,0,.25); }
  .ds2-config-l{ display:flex; flex-direction:column; align-items:center; gap:14px; min-width:0; }
  .ds2-preview{ filter:drop-shadow(0 16px 30px rgba(0,0,0,.22)); }
  .ds2-config-r{ display:flex; flex-direction:column; gap:13px; min-width:0; }

  /* плашка полного подсчёта — мягкий мятный фон, к оплате доминанта, −% синий */
  .ds2-plashka{ display:flex; align-items:center; justify-content:space-between; gap:16px; border-radius:var(--r); padding:16px 20px;
    background:#4aa0ef; }
  .ds2.dark .ds2-plashka{ background:#4aa0ef; }
  .ds2-pl-pct{ flex:0 0 auto; font-size:22px; font-weight:700; letter-spacing:-.02em; color:#fff; }
  .ds2-pl-mid{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:0; }
  .ds2-pl-payline{ font-size:22px; font-weight:700; letter-spacing:-.02em; color:#fff; white-space:nowrap; }
  .ds2-pl-payline .lbl{ font-weight:700; color:#fff; }
  .ds2-pl-econ{ font-size:13px; color:rgba(255,255,255,.85); white-space:nowrap; }
  .ds2-plashka.slim{ padding:13px 16px; }
  .ds2-plashka.slim .ds2-pl-payline{ font-size:22px; }
  .ds2-plashka.slim .ds2-pl-pct{ font-size:22px; }

  /* парные подписанные списки: Страна + Скидка */
  .ds2-pickers{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .ds2-pickcol{ display:flex; flex-direction:column; gap:6px; min-width:0; }
  .ds2-pickcol > label{ font-size:13px; font-weight:600; color:var(--text2); }
  .ds2-pickcol .cp, .ds2-pickcol .h-sel{ width:100%; }
  .ds2-pickcol .cp-trigger, .ds2-pickcol .h-sel-btn{ width:100%; height:48px; box-sizing:border-box; display:flex; align-items:center;
    justify-content:space-between; gap:8px; border:1px solid var(--line); background:var(--bg2); border-radius:14px; padding:0 15px;
    font-size:14px; font-weight:600; color:var(--text); cursor:pointer; font-family:inherit; }
  .ds2-paybar{ display:flex; flex-direction:column; gap:10px; }

  .ds2-block{ display:flex; flex-direction:column; gap:12px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:15px 18px; }
  .ds2-block-h{ font-size:13px; font-weight:600; color:var(--text2); }

  .ds2-hs{ display:flex; flex-direction:column; gap:10px; }
  .ds2-hsrow{ display:flex; align-items:center; gap:12px; }
  .ds2-hsbtn{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; border:1px solid var(--line);
    background:var(--bg2); color:var(--text); font-size:22px; font-weight:400; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:filter .15s, transform .1s; -webkit-user-select:none; user-select:none; }
  .ds2-hsbtn:hover:not(:disabled){ filter:brightness(.97); }
  .ds2-hsbtn:active:not(:disabled){ transform:scale(.94); }
  .ds2-hsbtn:disabled{ opacity:.38; cursor:default; }
  .ds2.dark .ds2-hsbtn:hover:not(:disabled){ filter:brightness(1.25); }
  .ds2-hsrow .ds2-rail{ flex:1; }
  .ds2-rail{ position:relative; height:8px; background:var(--bg2); border-radius:980px; cursor:pointer; touch-action:none; }
  .ds2-rfill{ position:absolute; left:0; top:0; bottom:0; background:var(--accent); border-radius:980px; }
  .ds2-thumb{ position:absolute; top:50%; width:26px; height:26px; border-radius:50%; background:#fff; border:1px solid var(--line);
    box-shadow:0 3px 10px rgba(0,0,0,.26); transform:translate(-50%,-50%); }
  .ds2-range{ display:flex; justify-content:space-between; font-size:12px; color:var(--text2); }

  .ds2-rubfield{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .ds2-rublbl{ font-size:13px; color:var(--text2); }
  .ds2-rubinput{ display:flex; align-items:center; border:1px solid var(--line); border-radius:12px; padding:0 14px; background:var(--bg); }
  .ds2-rubinput input{ width:120px; border:none; background:transparent; outline:none; color:var(--text); font-size:19px; font-weight:600;
    padding:10px 0; font-family:inherit; text-align:right; -moz-appearance:textfield; }
  .ds2-rubinput input::-webkit-outer-spin-button,.ds2-rubinput input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .ds2-rubinput span{ font-size:17px; font-weight:600; color:var(--text2); margin-left:6px; }

  /* CTAs */
  .ds2-dual{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .ds2-dual .ds2-btn, .ds2-dual .ds2-tg{ padding:14px 12px; font-size:15px; }
  .ds2-seg{ display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--bg2); padding:4px; border-radius:14px; }
  .ds2-seg button{ display:flex; align-items:center; justify-content:center; gap:6px; border:none; background:transparent; color:var(--text2);
    font-size:14px; font-weight:600; padding:10px 0; border-radius:10px; cursor:pointer; font-family:inherit; transition:.15s; }
  .ds2-seg button.on{ background:var(--bg); color:var(--text); box-shadow:var(--csh); }
  .ds2-ctarow{ display:flex; gap:10px; align-items:stretch; }
  /* CTA варианты: степпер + панель итога корзины */
  .ds2-stepper{ display:inline-flex; align-items:center; gap:4px; background:var(--bg2); border-radius:980px; padding:4px; }
  .ds2-stepper button{ width:40px; height:40px; border-radius:50%; border:none; background:var(--bg); color:var(--text); font-size:22px;
    cursor:pointer; font-family:inherit; display:grid; place-items:center; box-shadow:var(--csh); }
  .ds2-stepper button:disabled{ opacity:.35; cursor:not-allowed; }
  .ds2-stepper > span{ min-width:34px; text-align:center; font-size:17px; font-weight:700; }
  .ds2-cta2{ display:flex; align-items:center; gap:10px; }
  .ds2-cta2 .ds2-btn{ flex:1; }
  .ds2-cta2 .ds2-stepper{ flex:0 0 auto; }
  .ds2-curstep{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--bg2); border-radius:14px; padding:8px 8px 8px 16px; }
  .ds2-curstep > span{ font-size:14px; font-weight:600; color:var(--text2); }
  .ds2-curstep .ds2-stepper{ background:var(--bg); }
  .ds2-cartbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; border:none; cursor:pointer;
    background:var(--accent); color:#fff; border-radius:16px; padding:14px 18px; font-family:inherit; font-size:16px; font-weight:600; }
  .ds2-cartbar-l{ display:flex; align-items:center; gap:8px; }
  .ds2-cartbar-r{ display:flex; align-items:center; gap:8px; }
  .ds2-morph{ flex:1; display:flex; align-items:center; gap:8px; background:var(--accent); border-radius:980px; padding:5px; }
  .ds2-morph > button{ width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.2); color:#fff; font-size:22px; cursor:pointer; font-family:inherit; }
  .ds2-morph > span{ color:#fff; font-weight:600; flex:1; text-align:center; }
  .ds2-go{ padding:0 18px; }

  /* enriched front info (V4) */
  .ds2-rich{ display:flex; flex-direction:column; gap:16px; }
  .ds2-why{ display:grid; grid-template-columns:1fr; gap:10px; }
  .ds2-whycell{ display:flex; align-items:flex-start; gap:13px; background:var(--bg2); border-radius:16px; padding:15px 17px; }
  .ds2-whyico{ width:42px; height:42px; flex:0 0 auto; border-radius:50%; background:var(--soft); color:var(--accent); display:grid; place-items:center; }
  .ds2-whycell b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; }
  .ds2-whycell span{ display:block; font-size:13px; color:var(--text2); line-height:1.4; margin-top:2px; }
  .ds2-svcline{ display:flex; flex-direction:column; gap:10px; padding:4px 2px; }
  .ds2-svchint{ font-size:13px; font-weight:600; color:var(--text2); }
  .ds2-svcchips{ display:flex; flex-wrap:wrap; gap:7px; }
  .ds2-svcchip{ font-size:13px; font-weight:500; color:var(--text); background:var(--bg2); border:1px solid var(--line); border-radius:980px; padding:7px 13px; }
  .ds2-steps3{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .ds2-step3{ display:flex; align-items:center; gap:11px; font-size:14px; font-weight:500; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:12px 15px; }
  .ds2-step3n{ width:26px; height:26px; flex:0 0 auto; border-radius:50%; background:var(--accent); color:#fff; font-size:13px; font-weight:700; display:grid; place-items:center; }

  /* trust strip */
  .ds2-trust{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .ds2-tcell{ background:var(--bg2); border-radius:14px; padding:13px 16px; }
  .ds2-tcell b{ display:block; font-size:14px; font-weight:600; letter-spacing:-.01em; }
  .ds2-tcell span{ font-size:12px; color:var(--text2); }

  /* sticky buy bar (V3) */
  .ds2.has-bar .ds2-main{ padding-bottom:96px; }
  .ds2-buybar{ position:sticky; bottom:0; z-index:30; display:flex; gap:10px; padding:12px 16px;
    background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(20px); border-top:1px solid var(--line); }
  .ds2-bb-cart{ flex:1; display:flex; align-items:center; gap:8px; border:none; background:var(--accent); color:#fff; border-radius:14px;
    padding:14px 18px; font-size:16px; font-weight:600; cursor:pointer; font-family:inherit; }
  .ds2-bb-cart b{ background:rgba(255,255,255,.28); border-radius:980px; padding:0 8px; font-size:13px; }
  .ds2-bb-cart span{ margin-left:auto; }
  .ds2-buybar .ds2-tg.bar{ border-radius:14px; padding:14px 18px; }

  /* info pages */
  .ds2-page{ display:flex; flex-direction:column; gap:18px; max-width:720px; margin:0 auto; }
  .ds2-page-h{ text-align:center; display:flex; flex-direction:column; gap:8px; }
  .ds2-page-h p{ font-size:15px; color:var(--text2); }
  .ds2-guidewrap, .ds2-faqwrap{ background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:22px; }
  .ds2-support{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; background:var(--bg2); border-radius:20px; padding:26px 22px; }
  .ds2-supicon{ width:54px; height:54px; border-radius:50%; background:var(--soft); color:var(--accent); display:grid; place-items:center; }
  .ds2-support b{ font-size:18px; font-weight:600; }
  .ds2-support span{ font-size:14px; color:var(--text2); line-height:1.5; max-width:380px; }
  .ds2-support .ds2-btn{ margin-top:6px; }

  /* footer */
  .ds2-foot{ border-top:1px solid var(--line); padding:22px 16px 30px; display:flex; flex-direction:column; gap:14px; max-width:1100px; margin:0 auto; width:100%; }
  .ds2-foot-top{ display:flex; align-items:center; gap:12px; }
  .ds2-footnote{ margin-left:auto; color:var(--text2); font-size:12px; text-align:right; }
  /* legal block (shared) */
  .ds2-legal{ display:flex; flex-direction:column; gap:10px; }
  .ds2-legal-links{ display:flex; flex-wrap:wrap; gap:8px 18px; }
  .ds2-legal-links a{ font-size:13px; font-weight:500; color:var(--text2); text-decoration:none; border-bottom:1px solid transparent; }
  .ds2-legal-links a:hover{ color:var(--text); border-bottom-color:var(--line2); }
  .ds2-legal-note{ font-size:12px; line-height:1.5; color:var(--text2); margin:0; max-width:760px; }
  .ds2-legal.compact{ gap:8px; text-align:center; align-items:center; }
  .ds2-legal.compact .ds2-legal-links{ justify-content:center; }
  .ds2-legal.compact .ds2-legal-note{ font-size:11.5px; }

  /* cart panel — центрированное модальное окно (outside .ds2-cq → viewport-fixed) */
  .ds2-cartback{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:.25s; display:flex; align-items:center; justify-content:center; padding:20px; }
  .ds2-cartback.open{ opacity:1; pointer-events:auto; }
  .ds2-drawer{ position:relative; left:auto; right:auto; bottom:auto; width:440px; max-width:100%; max-height:86vh; background:var(--bg); display:flex; flex-direction:column;
    border-radius:24px; transform:translateY(16px) scale(.98); opacity:0; transition:transform .3s cubic-bezier(.32,.72,0,1), opacity .25s; box-shadow:0 30px 80px -24px rgba(0,0,0,.55); }
  .ds2-cartback.open .ds2-drawer{ transform:translateY(0) scale(1); opacity:1; }
  .ds2-grab{ display:none; }
  .ds2-drawer-h{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line2); }
  .ds2-drawer-h b{ font-size:18px; font-weight:600; }
  .ds2-x{ width:34px; height:34px; border-radius:50%; border:none; background:var(--bg2); color:var(--text); font-size:20px; cursor:pointer; }
  .ds2-drawer-body{ flex:1; overflow-y:auto; padding:12px 20px; }
  .ds2-cg{ padding:9px 0; } .ds2-cg + .ds2-cg{ border-top:1px solid var(--line2); }
  .ds2-cgh{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text2); margin-bottom:6px; }
  .ds2-crow{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:11px; padding:6px 0; }
  .ds2-crl{ display:flex; flex-direction:column; min-width:0; }
  .ds2-crl b{ font-size:15px; font-weight:600; display:flex; align-items:center; gap:6px; }
  .ds2-ctag{ font-size:10px; font-weight:600; color:var(--accent); background:var(--soft); padding:1px 7px; border-radius:980px; }
  .ds2-crl span{ font-size:12px; color:var(--text2); }
  .ds2-crl s{ opacity:.65; margin-right:3px; }
  .ds2-csub{ font-size:14px; font-weight:600; min-width:72px; text-align:right; }
  .ds2-empty{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:54px 20px; color:var(--text2); }
  .ds2-empty span{ font-size:16px; font-weight:600; color:var(--text); }
  .ds2-empty p{ font-size:13px; }
  .ds2-delivery{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line2); display:flex; flex-direction:column; gap:12px; }
  .ds2-drawer-foot{ border-top:1px solid var(--line2); padding:16px 20px; display:flex; flex-direction:column; gap:11px; }
  .ds2-dsave{ display:flex; justify-content:space-between; font-size:14px; color:#1f8a5b; font-weight:600; }
  .ds2-dtot{ display:flex; align-items:center; justify-content:space-between; font-size:14px; color:var(--text2); }
  .ds2-dtot b{ font-size:23px; font-weight:600; letter-spacing:-.02em; color:var(--text); }
  .ds2-need{ font-size:12px; color:#e0383e; text-align:center; }

  /* desktop: cart stays a centered modal */
  @media(min-width:760px){
    .ds2-drawer{ width:460px; }
  }

  /* ===== DESKTOP (≥760) — site only; mini-app stays single-column at any width ===== */
  @media (min-width:760px){
    .ds2:not(.mapp) h1{ font-size:34px; }
    .ds2:not(.mapp) .ds2-headline.mini h1{ font-size:30px; }
    .ds2:not(.mapp) .ds2-navin{ height:60px; position:relative; }
    .ds2:not(.mapp) .ds2-subnav{ position:absolute; top:0; left:0; right:0; height:60px; align-items:center; padding:0; pointer-events:none; }
    .ds2:not(.mapp) .ds2-subnav .ds2-pagetabs{ pointer-events:auto; }
    .ds2:not(.mapp) .ds2-tg.nav .ds2-tglabel{ display:inline; }
    .ds2:not(.mapp) .ds2-main{ padding:20px 24px 50px; }
    .ds2:not(.mapp) .ds2-store{ gap:10px; }
    .ds2:not(.mapp) .ds2-headline.band p{ font-size:16px; }
    .ds2:not(.mapp) .ds2-config{ display:grid; grid-template-columns:1fr 1.05fr; gap:20px; padding:16px 28px; max-width:900px; margin:0 auto; align-items:center; }
    .ds2:not(.mapp) .ds2-trust{ grid-template-columns:repeat(4,1fr); max-width:900px; margin:0 auto; width:100%; }
    .ds2:not(.mapp) .ds2-faqgrid{ grid-template-columns:1fr 1fr; max-width:900px; margin:0 auto; width:100%; }
    .ds2:not(.mapp) .ds2-rich{ max-width:900px; margin:0 auto; width:100%; gap:22px; }
    .ds2:not(.mapp) .ds2-discrib{ justify-content:center; }
    .ds2:not(.mapp) .ds2-discbanner{ text-align:center; max-width:760px; }
    .ds2:not(.mapp) .ds2-discrow{ max-width:760px; }
    .ds2:not(.mapp) .ds2-why{ grid-template-columns:repeat(2,1fr); gap:12px; }
    .ds2:not(.mapp) .ds2-steps3{ grid-template-columns:repeat(4,1fr); }
    .ds2:not(.mapp) .ds2-buybar{ border-top:none; background:transparent; backdrop-filter:none; max-width:900px; margin:0 auto; padding:0 24px 8px; }
    .ds2.has-bar:not(.mapp) .ds2-main{ padding-bottom:50px; }
  }

  /* ===== W2 EDITORIAL ===== */
  .ds2.w2 h1{ font-weight:700; letter-spacing:-.04em; }
  .ds2.w2 .ds2-config, .ds2.w2 .ds2-block, .ds2.w2 .ds2-tcell, .ds2.w2 .ds2-btn, .ds2.w2 .ds2-guidewrap, .ds2.w2 .ds2-faqwrap{ border-radius:4px; }
  .ds2.w2 .ds2-plashka{ border-radius:0; border-left:3px solid var(--accent); background:transparent; padding-left:14px; }
  .ds2.w2 .ds2-block{ border:none; border-top:1px solid var(--line); padding:14px 0 0; }

  /* ===== W3 SOFT ===== */
  .ds2.w3{ --r:22px; background:var(--bg2); }
  .ds2.w3 .ds2-config{ border:none; border-radius:28px; box-shadow:0 24px 60px -26px rgba(0,0,0,.22); }
  .ds2.w3 .ds2-block{ border:none; background:var(--bg2); }
  .ds2.w3 .ds2-tcell{ box-shadow:0 6px 18px -10px rgba(0,0,0,.16); }

  /* ===== W4 MONO ===== */
  .ds2.w4{ --r:6px; --accent:#0a0a0a; }
  .ds2.w4.gv.dark{ --accent:#fff; }
  .ds2.w4 .ds2-block-h, .ds2.w4 .ds2-rublbl{ text-transform:uppercase; letter-spacing:.09em; font-size:11px; }
  .ds2.w4 .ds2-config, .ds2.w4 .ds2-block, .ds2.w4 .ds2-plashka, .ds2.w4 .ds2-rubinput, .ds2.w4 .ds2-tcell{ border:1.5px solid var(--text); border-radius:6px; background:var(--bg); }
  .ds2.w4 .ds2-btn, .ds2.w4 .ds2-cartbtn{ border-radius:6px; }
  .ds2.w4 .ds2-btn.primary, .ds2.w4 .ds2-cartbtn{ background:var(--text); color:var(--bg); }
  .ds2.w4 .ds2-rfill, .ds2.w4 .ds2-morph{ background:var(--text); }
  .ds2.w4 .ds2-pl-pct{ color:var(--text); }

  /* ===== W5 VIVID (default) ===== */
  .ds2.w5 .ds2-headline{ background:var(--accent); color:#fff; margin:-18px -16px 0; padding:16px 16px 16px; border-radius:0 0 22px 22px; }
  .ds2.w5 .ds2-headline.strip{ padding:14px 16px; }
  .ds2.w5 .ds2-headline.strip .ds2-eyebrow{ color:#fff; }
  .ds2.w5 .ds2-headline.band p{ color:rgba(255,255,255,.9); }
  @media (min-width:760px){
    .ds2.w5 .ds2-headline{ margin:-28px -24px 0; padding:30px 24px 26px; }
  }
  .ds2.w5 .ds2-plashka.on{ background:var(--accent); }
  .ds2.w5 .ds2-plashka.on .ds2-pl-pct, .ds2.w5 .ds2-plashka.on .ds2-pl-val, .ds2.w5 .ds2-plashka.on .ds2-pl-sub{ color:#fff; }
  .ds2.w5 .ds2-tcell{ background:var(--soft); }
  .ds2.w5 .ds2-tcell b{ color:var(--accent); }

  /* === enriched Vivid hero (5 вариантов) === */
  .ds2-hero1, .ds2-hero2{ background:var(--accent); color:#fff; margin:-18px -16px 0; padding:18px 16px 18px; border-radius:0 0 24px 24px; display:flex; flex-direction:column; gap:12px; }
  .ds2-hero1 h1, .ds2-hero2 h1{ color:#fff; font-size:23px; line-height:1.1; }
  .ds2-hero1 p, .ds2-hero2 p{ color:rgba(255,255,255,.92); font-size:12px; letter-spacing:-.025em; line-height:1.5; max-width:560px; }
  .ds2-bullets{ display:flex; flex-wrap:wrap; gap:10px; }
  .ds2-bullet{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:#fff; background:rgba(255,255,255,.16); border-radius:980px; padding:8px 15px; }
  .ds2-bullet svg{ stroke:#fff; }
  .ds2-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
  .ds2-stat{ background:rgba(255,255,255,.14); border-radius:14px; padding:12px 8px; text-align:center; }
  .ds2-stat b{ display:block; font-size:21px; font-weight:700; letter-spacing:-.02em; }
  .ds2-stat span{ font-size:12px; color:rgba(255,255,255,.85); }
  .ds2-herowhy{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .ds2-herowhycell{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:#fff; background:rgba(255,255,255,.13); border-radius:12px; padding:11px 14px; }
  .ds2-herowhycell svg{ stroke:#fff; flex:0 0 auto; }
  .ds2-ribbon{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
  .ds2-ribbon::-webkit-scrollbar{ height:0; }
  .ds2-ribbon span{ flex:0 0 auto; font-size:14px; font-weight:600; color:#fff; background:rgba(255,255,255,.16); border-radius:980px; padding:9px 16px; white-space:nowrap; }
  .ds2-hero2{ display:grid; grid-template-columns:1fr; }
  .ds2-hero2-facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .ds2-fact{ background:rgba(255,255,255,.14); border-radius:13px; padding:11px 14px; }
  .ds2-fact b{ display:block; font-size:16px; font-weight:700; }
  .ds2-fact span{ font-size:12px; color:rgba(255,255,255,.85); }

  /* === R3 hero discount treatments === */
  .ds2-stat.hi{ background:#fff; }
  .ds2-stat.hi b, .ds2-stat.hi span{ color:var(--accent); }
  .ds2-discrib{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .ds2-discrib > b{ font-size:15px; color:#fff; white-space:nowrap; }
  .ds2-ladchips{ display:flex; flex-wrap:wrap; gap:6px; }
  .ds2-ladchips span{ font-size:13px; font-weight:700; color:var(--accent); background:#fff; border-radius:980px; padding:6px 12px; }
  .ds2-ladchips.light span{ color:var(--accent); background:#fff; }
  .ds2-ladchips span.max{ background:#0a3f86; color:#fff; }
  .ds2-discbanner{ background:rgba(255,255,255,.16); border-radius:18px; padding:18px 22px; display:flex; flex-direction:column; gap:5px; }
  .ds2-discbanner b{ font-size:21px; font-weight:700; color:#fff; line-height:1.2; }
  .ds2-discbanner span{ font-size:14px; color:rgba(255,255,255,.88); }
  .ds2-discrow{ display:flex; align-items:stretch; gap:14px; }
  .ds2-discmed{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; border-radius:20px; padding:14px 22px; }
  .ds2-discmed b{ font-size:40px; font-weight:800; letter-spacing:-.03em; color:var(--accent); line-height:1; }
  .ds2-discmed span{ font-size:13px; color:var(--text2); margin-top:2px; }
  .ds2-statsflex{ flex:1; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }

  /* ===== MOBILE compact hero (<760) ===== */
  @media (max-width:759.98px){
    .ds2-hero1, .ds2-hero2{ padding:11px 16px 13px; gap:6px; border-radius:0 0 18px 18px; }
    .ds2-hero1 h1, .ds2-hero2 h1{ font-size:18px; }
    .ds2-hero1 p, .ds2-hero2 p{ font-size:12px; line-height:1.35; }
    .ds2-stats{ gap:6px; margin-top:1px; }
    .ds2-stat{ padding:6px 5px; border-radius:10px; }
    .ds2-stat b{ font-size:15px; }
    .ds2-stat span{ font-size:9.5px; line-height:1.15; }
    /* T3: prevent theme-button overflow on narrow screens (site mode only) */
    .ds2:not(.mapp) .ds2-navin{ gap:6px; }
    .ds2:not(.mapp) .ds2-logo{ min-width:0; flex-shrink:1; overflow:hidden; max-width:calc(100% - 110px); }
    .ds2:not(.mapp) .ds2-tg.nav .ds2-tglabel{ display:none; }
    .ds2-ico{ flex:0 0 auto; }
  }

  /* === configurator discount block highlight (dh1..5) === */
  .ds2-discblock .ds2-disc-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .ds2-disc-badge{ font-style:normal; font-size:12px; font-weight:700; color:var(--accent); background:var(--soft); border-radius:980px; padding:4px 11px; }
  .ds2-disc-cap{ font-size:12px; color:var(--text2); }
  .ds2-discblock.dh1{ border:2px solid var(--accent); }
  .ds2-discblock.dh2{ background:var(--soft); border-color:transparent; box-shadow:0 8px 26px -12px var(--accent); }
  .ds2-discblock.dh3{ box-shadow:0 0 0 3px var(--soft), 0 0 0 1px var(--accent); }
  .ds2-discblock.dh4{ border:1.5px solid var(--accent); background:var(--soft); }
  .ds2-discblock.dh5{ position:relative; border:2px solid var(--accent); overflow:hidden; }
  .ds2-discblock.dh5::after{ content:'Выгодно'; position:absolute; top:13px; right:-34px; transform:rotate(45deg); background:var(--accent); color:#fff; font-size:11px; font-weight:700; padding:4px 40px; }

  /* services icons strip (bottom) */
  .ds2-faqgrid{ display:grid; grid-template-columns:1fr; gap:12px; }
  .ds2-faqcard{ background:var(--bg2); border-radius:16px; padding:18px 20px; }
  .ds2-faqcard b{ display:block; font-size:16px; font-weight:600; letter-spacing:-.01em; margin-bottom:6px; }
  .ds2-faqcard span{ font-size:14px; color:var(--text2); line-height:1.5; }
  .ds2-services{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:6px 0 4px; }
  .ds2-svcrow{ display:flex; flex-wrap:nowrap; gap:14px; justify-content:center; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 4px; }
  .ds2-svcrow::-webkit-scrollbar{ height:0; }
  .ds2-svcicon{ width:40px; height:40px; object-fit:contain; border-radius:9px; flex:0 0 auto; background:transparent; }
  .ds2.dark .ds2-services .ds2-svchint{ color:var(--text2); }
  .ds2-btn.tgfill svg{ stroke:#fff; }
  .ds2-services .ds2-svchint{ text-align:center; }

  @media (min-width:760px){
    .ds2-hero1, .ds2-hero2{ margin:-28px -24px 0; padding:22px 40px 20px; align-items:center; text-align:center; }
    .ds2-hero1 h1{ font-size:40px; }
    .ds2-hero1 p{ font-size:16px; text-align:center; white-space:nowrap; }
    .ds2-hero1 .ds2-bullets, .ds2-hero1 .ds2-stats, .ds2-hero1 .ds2-herowhy, .ds2-hero1 .ds2-ribbon{ justify-content:center; max-width:840px; width:100%; }
    .ds2-herowhy{ grid-template-columns:repeat(4,1fr); }
    .ds2-hero2{ grid-template-columns:1.1fr .9fr; text-align:left; align-items:center; gap:30px; }
    .ds2-hero2 h1{ font-size:38px; }
    .ds2-hero2-facts{ grid-template-columns:repeat(2,1fr); }
  }

  /* ===== production plashka — 4 informational tiers by discount =====
     Progression: gray → blue → green → gold (champagne premium).
       · 0%    → neutral gray         (нет скидки)
       · 1–4%  → light blue           (скидка появилась)
       · 5–8%  → savings green        (хорошая выгода)
       · 9%+   → gold champagne       (максимальная выгода, премиум)
     Applies to web (mobile + desktop) AND app — both carry .ds2.w5. */

  /* 0% · neutral gray */
  .ds2.w5 .ds2-plashka.pl-gray{ background:#f1f2f4; border:1px solid var(--line); }
  .ds2.w5 .ds2-plashka.pl-gray .ds2-pl-pct{ color:var(--text2); background:transparent; padding:0; }
  .ds2.w5 .ds2-plashka.pl-gray .ds2-pl-payline{ color:var(--text); }
  .ds2.w5 .ds2-plashka.pl-gray .ds2-pl-payline .lbl{ color:var(--text2); }
  .ds2.w5 .ds2-plashka.pl-gray .ds2-pl-econ{ color:var(--text2); }

  /* 1-4% · light yellow */
  .ds2.w5 .ds2-plashka.pl-yellow{ background:#fffde7; border:1px solid rgba(245,197,0,.28); }
  .ds2.w5 .ds2-plashka.pl-yellow .ds2-pl-pct{ color:#3d2e00; background:#f5c500; font-size:15px; font-weight:700; padding:5px 11px; border-radius:980px; }
  .ds2.w5 .ds2-plashka.pl-yellow .ds2-pl-payline{ color:#3d2e00; }
  .ds2.w5 .ds2-plashka.pl-yellow .ds2-pl-payline .lbl{ color:#8a7200; }
  .ds2.w5 .ds2-plashka.pl-yellow .ds2-pl-econ{ color:#8a7200; }

  /* 5-8% · blue */
  .ds2.w5 .ds2-plashka.pl-blue{ background:#e8f3fe; border:1px solid rgba(0,113,227,.16); }
  .ds2.w5 .ds2-plashka.pl-blue .ds2-pl-pct{ color:#fff; background:var(--accent); font-size:15px; font-weight:700; padding:5px 11px; border-radius:980px; }
  .ds2.w5 .ds2-plashka.pl-blue .ds2-pl-payline{ color:#0b3e7a; }
  .ds2.w5 .ds2-plashka.pl-blue .ds2-pl-payline .lbl{ color:#5b86b8; }
  .ds2.w5 .ds2-plashka.pl-blue .ds2-pl-econ{ color:#6b8db5; }

  /* 9-10% · green */
  .ds2.w5 .ds2-plashka.pl-green{ background:#e7f7ee; border:1px solid rgba(31,138,91,.18); }
  .ds2.w5 .ds2-plashka.pl-green .ds2-pl-pct{ color:#fff; background:#1f8a5b; font-size:15px; font-weight:700; padding:5px 11px; border-radius:980px; }
  .ds2.w5 .ds2-plashka.pl-green .ds2-pl-payline{ color:#0f5c38; }
  .ds2.w5 .ds2-plashka.pl-green .ds2-pl-payline .lbl{ color:#5a9b78; }
  .ds2.w5 .ds2-plashka.pl-green .ds2-pl-econ{ color:#5a9b78; }

  /* ---- dark theme ---- */
  .ds2.w5.dark .ds2-plashka.pl-gray{ background:#1c1c1e; border-color:rgba(255,255,255,.14); }
  .ds2.w5.dark .ds2-plashka.pl-gray .ds2-pl-pct{ color:var(--text2); }
  .ds2.w5.dark .ds2-plashka.pl-gray .ds2-pl-payline{ color:var(--text); }
  .ds2.w5.dark .ds2-plashka.pl-gray .ds2-pl-payline .lbl,
  .ds2.w5.dark .ds2-plashka.pl-gray .ds2-pl-econ{ color:var(--text2); }

  /* 1-4% dark · yellow */
  .ds2.w5.dark .ds2-plashka.pl-yellow{ background:rgba(245,197,0,.14); border-color:rgba(245,197,0,.3); }
  .ds2.w5.dark .ds2-plashka.pl-yellow .ds2-pl-pct{ color:#1a1200; background:#f5c500; }
  .ds2.w5.dark .ds2-plashka.pl-yellow .ds2-pl-payline{ color:#fff8c0; }
  .ds2.w5.dark .ds2-plashka.pl-yellow .ds2-pl-payline .lbl,
  .ds2.w5.dark .ds2-plashka.pl-yellow .ds2-pl-econ{ color:#c9b350; }

  .ds2.w5.dark .ds2-plashka.pl-blue{ background:rgba(41,151,255,.16); border-color:rgba(41,151,255,.3); }
  .ds2.w5.dark .ds2-plashka.pl-blue .ds2-pl-pct{ color:#04203f; background:#2997ff; }
  .ds2.w5.dark .ds2-plashka.pl-blue .ds2-pl-payline{ color:#dcebff; }
  .ds2.w5.dark .ds2-plashka.pl-blue .ds2-pl-payline .lbl,
  .ds2.w5.dark .ds2-plashka.pl-blue .ds2-pl-econ{ color:#8fb4e6; }

  .ds2.w5.dark .ds2-plashka.pl-green{ background:rgba(48,209,123,.14); border-color:rgba(48,209,123,.3); }
  .ds2.w5.dark .ds2-plashka.pl-green .ds2-pl-pct{ color:#04240f; background:#34c98a; }
  .ds2.w5.dark .ds2-plashka.pl-green .ds2-pl-payline{ color:#c7f3da; }
  .ds2.w5.dark .ds2-plashka.pl-green .ds2-pl-payline .lbl,
  .ds2.w5.dark .ds2-plashka.pl-green .ds2-pl-econ{ color:#7fc9a1; }

/* ===== mini-app shell + demo helpers ===== */

/* ============================================================
   MINI APP shell — full-bleed (без рамки). Низ: tab-bar. Футер скрыт.
   Отдельная оболочка от сайта (см. README, п.9).
   ============================================================ */
.mapp{ position:relative; height:100vh; height:100dvh; display:flex; flex-direction:column; background:var(--bg); overflow:hidden; }
.mapp-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top, 0px)) 18px 12px;
  background:var(--bg); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.mapp-brand{ display:flex; align-items:center; gap:8px; font-size:18px; font-weight:600; letter-spacing:-.02em; color:var(--text); }
/* hero-текст в ШАПКЕ витрины (под лого), компактно — освобождает тело конфигуратора (решение Van) */
/* TASK-S036 v2: хедер в ОДНУ строку — [лого] [текст(2 строки)] | [themeBtn] */
.mapp-head-l{ flex:1; min-width:0; display:flex; align-items:center; }
/* TASK-S036 R6: хедер-текст центрирован + крупнее */
.mapp-headhero{ display:flex; flex-direction:row; align-items:center; gap:8px; min-width:0; width:100%; }
.mapp-headhero-t{ display:flex; flex-direction:column; min-width:0; flex:1; align-items:center; text-align:center; }
.mapp-headhero-t b{ font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--text); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.mapp-headhero-t span{ font-size:12px; color:var(--text2); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.mapp-themebtn{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--text);
  display:grid; place-items:center; cursor:pointer; }
.mapp-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.mapp-scroll::-webkit-scrollbar{ width:0; }
.mapp-screen{ padding:16px 16px calc(74px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:14px; }
.mapp-screen.cfg{ padding-top:16px; }
/* cart screen: rows scroll, delivery + checkout pinned to the bottom (above tab-bar) */
.mapp-screen.cartscreen{ height:100%; min-height:100%; display:flex; flex-direction:column; gap:0; padding-bottom:calc(74px + env(safe-area-inset-bottom,0px)); }
.mapp-cartrows{ flex:1; min-height:0; overflow-y:auto; }
.mapp-cartrows::-webkit-scrollbar{ width:0; }
.mapp-cartfoot{ flex:0 0 auto; display:flex; flex-direction:column; gap:10px; margin-top:12px; padding-top:14px; border-top:1px solid var(--line2); background:var(--bg); }
/* bottom tab-bar */
.mapp-tabs{ position:absolute; left:0; right:0; bottom:0; z-index:30; display:grid; grid-template-columns:repeat(3,1fr);
  background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line); padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px)); }
.mapp-tab{ display:flex; flex-direction:column; align-items:center; gap:3px; border:none; background:transparent; cursor:pointer;
  color:var(--text2); font-family:inherit; font-size:11px; font-weight:600; padding:4px 0; }
.mapp-tab.on{ color:var(--accent); }
.mapp-tab .mapp-tabn{ position:relative; }
.mapp-tabbadge{ position:absolute; top:-5px; right:-12px; min-width:16px; height:16px; padding:0 4px; border-radius:980px;
  background:var(--accent); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; }
/* miniapp: configurator card flush to full width (no outer card chrome) */
.mapp .ds2-config{ border:none; border-radius:0; padding:0; box-shadow:none; gap:16px; background:transparent; }
/* карта-превью (config-l) центрирована и шире правой колонки → гарантированный зазор снизу,
   чтобы нижний край карты НИКОГДА не перекрывал подпись «Страна» правой колонки (баг Van Fullsize) */
.mapp .ds2-config-l{ margin-bottom:6px; }
.mapp .ds2-block{ background:var(--bg2); }
/* store/cfg screen (решение Van 2026-06-17): карта КРУПНЕЕ, вся остальная панель равномерно
   КОМПАКТНЕЕ (контролы можно мельче). Один экран без скролла И на телефоне (Fullsize 780-844),
   И на desktop TG (низкое окно 640-720). Всё через clamp(vh) — устойчиво на любой высоте,
   distributes по высоте скролл-контейнера (.mapp{100dvh} → .mapp-scroll{flex:1} → cfg{min-height:100%}). */
.mapp-screen.cfg{
  min-height:100%;
  box-sizing:border-box;
  justify-content:flex-start;
  gap:clamp(2px, 0.88vh, 10px) !important;
  padding-top:clamp(2px, 0.8vh, 10px);
}
/* hero вынесен в ШАПКУ (mapp-headhero) — тело без hero-блока, больше места конфигуратору. */
/* TASK-S036 R5: КАРТА — без изменений (clamp(232,38.6vh,412)); ПАНЕЛЬ +20% (×0.8×1.2 = ×0.96, округлено) */
.mapp-screen.cfg .ds2-config-l{ gap:0; margin-bottom:clamp(2px, 0.67vh, 7px); }
.mapp-screen.cfg .ds2-preview{ width:100%; display:flex; justify-content:center; }
.mapp-screen.cfg .ds2-preview > div{ width:clamp(232px, 38.6vh, 412px) !important; }
.mapp-screen.cfg .ds2-config{ gap:clamp(6px, 1.34vh, 16px); }
/* панель/контролы ×0.96 (реверс ×0.8 → ×1.2) */
.mapp-screen.cfg .ds2-block{ padding:clamp(6px,1.06vh,12px) 14px; gap:clamp(5px,0.86vh,11px); }
.mapp-screen.cfg .ds2-pickers{ gap:clamp(7px,1.06vh,12px); }
.mapp-screen.cfg .ds2-hs{ gap:clamp(5px,0.86vh,10px); }
.mapp-screen.cfg .ds2-hsbtn{ width:clamp(29px,4.22vh,36px); height:clamp(29px,4.22vh,36px); }
.mapp-screen.cfg .ds2-range{ font-size:clamp(10px,1.25vh,12px); }
.mapp-screen.cfg .pf-quick{ margin-top:clamp(2px,0.77vh,12px); }
.mapp-screen.cfg .pf-pill{ padding:clamp(6px,0.86vh,11px) clamp(11px,1.44vw,16px); font-size:clamp(12px,1.44vh,13px); }
.mapp-screen.cfg .ds2-rubfield{ margin-top:clamp(1px,0.48vh,7px); }
.mapp-screen.cfg .ds2-plashka{ padding:clamp(7px,1.06vh,16px) 16px; }
.mapp-screen.cfg .ds2-pl-payline, .mapp-screen.cfg .ds2-pl-pct{ font-size:clamp(17px,2.3vh,22px); }
.mapp-screen.cfg .ds2-cta2{ gap:clamp(7px,1.06vh,12px); }
.mapp-screen.cfg .ds2-cta2 .ds2-btn, .mapp-screen.cfg .ds2-cta2 .ds2-stepper{ padding-top:clamp(7px,1.25vh,13px); padding-bottom:clamp(7px,1.25vh,13px); }
/* TASK-S036 R6 #2: кнопки −/+ пропорционально блоку */
.mapp-screen.cfg .ds2-stepper button{ width:clamp(28px,3.84vh,36px); height:clamp(28px,3.84vh,36px); font-size:clamp(16px,2.2vh,20px); }
.mapp-screen.cfg .ds2-stepper > span{ min-width:clamp(24px,3.2vh,30px); font-size:clamp(13px,1.8vh,16px); }
/* фикс-высоты ×1.2 */
.mapp-screen.cfg .ds2-pickcol .cp-trigger, .mapp-screen.cfg .ds2-pickcol .h-sel-btn{ height:auto; min-height:clamp(35px,4.99vh,46px); padding-top:clamp(6px,0.86vh,12px); padding-bottom:clamp(6px,0.86vh,12px); }
.mapp-screen.cfg .ds2-rubinput input{ font-size:clamp(14px,2.02vh,18px); padding:clamp(6px,0.86vh,10px) 0; }
.mapp-screen.cfg .ds2-rubinput span{ font-size:clamp(13px,1.92vh,17px); }
.mapp-screen.cfg .ds2-thumb{ width:clamp(20px,2.88vh,25px); height:clamp(20px,2.88vh,25px); }
.mapp-screen.cfg .ds2-rail{ height:clamp(6px,0.86vh,7px); }
.mapp-screen.cfg .ds2-block-h{ font-size:clamp(11px,1.44vh,12px); }
.mapp-screen.cfg .ds2-pl-econ{ font-size:clamp(11px,1.44vh,12px); }
/* slider track must read against the bg2 block fill */
.mapp .ds2-rail{ background:color-mix(in srgb, var(--text) 13%, transparent); }
.mapp.dark .ds2-rail{ background:color-mix(in srgb, var(--text) 18%, transparent); }
/* header back button (non-store screens) */
.mapp-back{ display:inline-flex; align-items:center; gap:4px; border:none; background:transparent; color:var(--text);
  font-family:inherit; font-size:16px; font-weight:600; letter-spacing:-.01em; cursor:pointer; padding:4px 8px 4px 0; }
.mapp-back svg{ display:block; }
/* profile / help screens */
.mapp-card{ background:var(--bg2); border-radius:16px; padding:16px 18px; }
.mapp-card h3{ font-size:16px; font-weight:600; margin:0 0 4px; letter-spacing:-.01em; }
.mapp-card p{ font-size:14px; color:var(--text2); line-height:1.5; margin:0; }
.mapp-faq{ display:flex; flex-direction:column; gap:10px; }
.mapp-empty{ text-align:center; color:var(--text2); padding:48px 16px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.mapp-empty span{ font-size:16px; font-weight:600; color:var(--text); }

/* DEMO frame helper (used only on explore/overview.html — DEMO ONLY) */
.demo-phone{ width:390px; flex:0 0 auto; border-radius:46px; overflow:hidden; box-shadow:0 40px 90px -28px rgba(0,0,0,.5); background:var(--bg); }
.demo-browser{ border-radius:14px; overflow:hidden; box-shadow:0 40px 90px -30px rgba(0,0,0,.45); border:1px solid rgba(0,0,0,.08); background:#fff; }

/* mini-app: на узких — edge-to-edge; на широких — аккуратная центр. колонка */
.mapp-screen, .mapp-tabs{ max-width:520px; margin-left:auto; margin-right:auto; width:100%; }
.mapp-head{ padding-left:max(18px, calc(50% - 260px)); padding-right:max(18px, calc(50% - 260px)); }

/* ============================================================
   INSTRUCTION — "chessboard" (tabs + alternating screenshot/text)
   ============================================================ */
.gc{ display:flex; flex-direction:column; gap:14px; }
/* sticky-обёртка табов: подложка + линия, чтобы фреймы не просвечивали под прилипшими табами */
.gc-tabsbar{ display:flex; justify-content:center; }
.gc-tabs{ display:flex; gap:5px; background:var(--bg2); padding:5px; border-radius:14px; align-self:center; }
.gc-tabs button{ border:none; background:transparent; color:var(--text2); font-size:14px; font-weight:600; padding:10px 22px; border-radius:10px; cursor:pointer; font-family:inherit; }
.gc-tabs button.on{ background:var(--bg); color:var(--text); box-shadow:var(--csh); }
/* блок перехода в конце раздела */
.gc-jump{ display:flex; flex-direction:column; gap:10px; align-items:center; margin-top:4px; }
.gc-jump .ds2-btn{ max-width:420px; width:100%; }
.gc-done{ text-align:center; font-size:15px; font-weight:600; color:var(--save); background:color-mix(in srgb, var(--save) 12%, transparent); border-radius:14px; padding:12px 16px; width:100%; max-width:420px; box-sizing:border-box; }
.ds2-btn.ghost{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1.5px var(--line); }
.ds2-btn.ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--accent); }
.gc-cross{ display:flex; flex-direction:column; gap:10px; }
.gc-row{ display:flex; align-items:center; gap:26px; background:var(--bg2); border-radius:18px; padding:18px 24px; }
.gc-row.rev{ flex-direction:row-reverse; }
.gc-rtext{ flex:1; display:flex; flex-direction:column; gap:4px; }
.gc-rtext b{ font-size:17px; font-weight:600; letter-spacing:-.01em; }
.gc-rtext span{ font-size:13.5px; color:var(--text2); line-height:1.5; }
.gc-num{ width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-size:15px; font-weight:700; display:grid; place-items:center; }
.gc-num.sm{ width:26px; height:26px; font-size:13px; }

/* faux iOS screenshot */
.gd-shot{ position:relative; background:var(--bg); border:1px solid var(--line); border-radius:16px; overflow:hidden; flex:0 0 auto;
  display:flex; flex-direction:column; box-shadow:0 8px 22px -10px rgba(0,0,0,.35); }
.gd-statusbar{ height:14px; display:flex; align-items:center; justify-content:space-between; padding:0 8px; }
.gd-statusbar > span:first-child{ width:18px; height:4px; border-radius:2px; background:var(--text2); opacity:.5; }
.gd-dots{ display:flex; gap:2px; } .gd-dots i{ width:4px; height:4px; border-radius:1px; background:var(--text2); opacity:.5; }
.gd-navbar{ display:flex; align-items:center; gap:5px; padding:4px 9px 7px; border-bottom:1px solid var(--line2); }
.gd-navbar b{ font-size:11px; font-weight:700; letter-spacing:-.01em; }
.gd-avatar{ width:13px; height:13px; border-radius:50%; background:var(--accent); opacity:.8; margin-left:auto; }
.gd-rows{ display:flex; flex-direction:column; padding:6px; gap:5px; flex:1; }
.gd-row{ position:relative; background:var(--bg2); border-radius:7px; padding:7px 8px; font-size:9px; font-weight:500; color:var(--text2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gd-row.hi{ background:var(--soft); color:var(--accent); font-weight:700; box-shadow:inset 0 0 0 1.5px var(--accent); }
.gd-row.big{ padding:14px 8px; text-align:center; font-size:10px; }
.gd-tap{ position:absolute; right:6px; top:50%; width:12px; height:12px; border-radius:50%; border:2px solid var(--accent); transform:translateY(-50%); opacity:.7; }
.gd-btn{ margin:0 6px 8px; background:var(--accent); color:#fff; font-size:9px; font-weight:700; text-align:center; padding:7px; border-radius:8px; }
.gd-shotnote{ position:absolute; bottom:3px; left:0; right:0; text-align:center; font-size:7px; letter-spacing:.08em; text-transform:uppercase; color:var(--text2); opacity:.4; }
/* real iOS PNG screenshots — light/dark switching via CSS */
.gd-png-dark{ display:none; }
.dark .gd-png-dark{ display:block; }
.dark .gd-png-light{ display:none; }
/* PNG shots: remove faux-phone border/shadow */
.gd-shot.has-png{ border:none; box-shadow:none; background:transparent; border-radius:16px; overflow:hidden; }

/* compact instruction on mobile (site <760) and inside the mini-app (S032) */
@media (max-width:760px){
  /* компактный верхний заголовок страницы (только сайт) */
  .ds2-page-guide .ds2-page-h{ gap:4px; }
  .ds2-page-guide .ds2-page-h h2{ font-size:18px; line-height:1.15; letter-spacing:-.01em; }
  .ds2-page-guide .ds2-page-h p{ font-size:13px; color:var(--text2); }
  .ds2-page-guide{ gap:12px; }
  /* плотнее шахматка */
  .gc{ gap:10px; }
  .gc-tabs button{ padding:9px 16px; font-size:13px; }
  .gc-row, .gc-row.rev{ flex-direction:row; text-align:left; align-items:center; gap:12px; padding:10px 12px; }
  .gc-row .gd-shot{ width:120px !important; height:228px !important; }
  .gc-cross{ gap:8px; }
  .gc-rtext b{ font-size:14.5px; }
  .gc-rtext span{ font-size:12px; line-height:1.4; }
  /* B (2026-06-17): табы разделов БЕЗ закрепа — скроллятся как обычный контент */
  .ds2:not(.mapp) .gc-tabsbar{ position:static; }
}
/* mini-app — плотнее + sticky-табы под шапкой-баром */
.mapp .gc{ gap:10px; }
.mapp .gc-tabs button{ padding:9px 16px; font-size:13px; }
.mapp .gc-row, .mapp .gc-row.rev{ flex-direction:row; text-align:left; align-items:center; gap:12px; padding:10px 12px; }
.mapp .gc-row .gd-shot{ width:118px !important; height:224px !important; }
.mapp .gc-cross{ gap:8px; }
.mapp .gc-rtext b{ font-size:14.5px; }
.mapp .gc-rtext span{ font-size:12px; line-height:1.4; }
.mapp .gc-tabsbar{ position:static; }

@media (max-width:560px){
  .ds2-svcicon{ width:34px; height:34px; }
  .ds2-svcrow{ gap:10px; }
}

/* ===== FEATURE-S021 Фаза A — мобильные фиксы (2026-06-16) ===== */

/* #2 P1 — preview SVG overflow на мобайле: нет max-width → scrollWidth > clientWidth */
.ds2-preview{ max-width:100%; height:auto; }

/* #3 P1 — сервисные иконки: justify-content:center клипает первую иконку при overflow-x:auto
   scope к сайту (не mini-app), mini-app имеет .mapp и использует ту же строку без scroll-нужды */
@media (max-width:759.98px){
  .ds2:not(.mapp) .ds2-svcrow{
    justify-content:flex-start;
    padding-inline:16px;
    scroll-padding-inline:16px;
  }
}

/* #5 P1 — страховочный overflow-x:clip (не hidden — не ломает sticky-nav) */
.ds2-cq{ overflow-x:clip; }

/* #4 P1 — Hero stats equal height на мобайле */
@media (max-width:759.98px){
  .ds2-stats{ align-items:stretch; }
  .ds2-stat{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
}

/* #6 P2 — Pickers: height:48px → min-height, добавить padding для тач */
.ds2-pickcol .cp-trigger,
.ds2-pickcol .h-sel-btn{
  height:auto;
  min-height:48px;
  padding:8px 15px;
}

/* #8 P2 — Pills: правый fade-out сигнализирует о скроллируемости */
.pf-quick{
  position:relative;
  -webkit-mask-image:linear-gradient(to right, black calc(100% - 36px), transparent 100%);
  mask-image:linear-gradient(to right, black calc(100% - 36px), transparent 100%);
}

/* #9 P2 — "или сумма в ₽" не переносится на узких экранах */
@media (max-width:375px){
  .ds2-rublbl{ white-space:nowrap; font-size:12px; }
}

/* ===== FEATURE-S021 Фаза A — HTML-фреймы инструкции (2026-06-16) ===== */
/* Анимации из дизайн-эталона screen-sources.html */
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes ringPulse{0%{transform:scale(.55);opacity:.65}100%{transform:scale(2.1);opacity:0}}

/* Обёртка: ужимает 401×838 фрейм до нужного размера через scale */
.gd-frame-outer{
  overflow:visible;
  flex:0 0 auto;
  position:relative;
}
.gd-frame-wrap{
  width:401px;
  height:838px;
  transform:scale(var(--gd-scale,0.598));
  transform-origin:top left;
  pointer-events:none;
}
/* PNG-shot больше не нужен overflow:hidden — фреймы должны быть видны целиком */
.gd-shot.has-frame{
  border:none;
  box-shadow:none;
  background:transparent;
  overflow:visible;
}
/* Переключение light/dark фреймов */
.gd-html-frame-dark{ display:none; }
.dark .gd-html-frame-dark{ display:block; }
.dark .gd-html-frame-light{ display:none; }

/* transform задаётся через inline style в JS (Shot()): scale = w/401 */

/* Hero subtitle: <br> скрыт на десктопе, виден на мобайле */
.gd-mob-br{ display:none; }
@media (max-width:760px){
  .gd-mob-br{ display:inline; }
}

/* ===== Доводка мобилы 2026-06-17 (правки Van) ===== */

/* Печатаемый подзаголовок hero — мигающий курсор */
.ds2-caret{ display:inline-block; margin-left:1px; font-weight:400; opacity:.85; animation:caret 1s step-end infinite; }

/* #1 Hero оцентрован на мобиле (на десктопе уже по центру) */
@media (max-width:759.98px){
  .ds2:not(.mapp) .ds2-hero1{ align-items:center; text-align:center; }
  .ds2:not(.mapp) .ds2-hero1 .ds2-stats{ justify-content:center; width:100%; }
}

/* #3 Конфигуратор плотнее на мобиле — ~10% больше влезает на экран */
@media (max-width:759.98px){
  .ds2:not(.mapp) .ds2-config{ gap:12px; padding:14px; }
  .ds2:not(.mapp) .ds2-config-l{ gap:10px; }
  .ds2:not(.mapp) .ds2-config-r{ gap:10px; }
}

/* A (2026-06-17): Главная сайта ещё компактнее ~10% — больше влезает на экран.
   Десктоп (≥760) не трогаем. */
@media (max-width:759.98px){
  .ds2:not(.mapp) .ds2-store{ gap:10px; }
  .ds2:not(.mapp) .ds2-config{ gap:10px; padding:12px; }
  .ds2:not(.mapp) .ds2-config-l{ gap:8px; }
  .ds2:not(.mapp) .ds2-config-r{ gap:8px; }
  .ds2:not(.mapp) .ds2-config-l .ds2-preview{ transform:scale(.9); transform-origin:center top; margin-bottom:-18px; }
  .ds2:not(.mapp) .ds2-block{ padding:12px 14px; gap:10px; }
  .ds2:not(.mapp) .ds2-plashka{ padding:12px 16px; }
  .ds2:not(.mapp) .ds2-steps3{ gap:8px; }
  .ds2:not(.mapp) .ds2-step3{ padding:10px 12px; }
}

/* #4 Ряд иконок сервисов вмещается по ширине экрана с воздухом по бокам
   10 иконок + 9 гэпов + боковые отступы должны влезать в ~390px без скролла */
@media (max-width:759.98px){
  .ds2:not(.mapp) .ds2-svcrow{ gap:7px; padding-inline:12px; flex-wrap:nowrap; justify-content:center; }
  .ds2:not(.mapp) .ds2-svcicon{ width:28px; height:28px; }
}
@media (max-width:380px){
  .ds2:not(.mapp) .ds2-svcrow{ gap:6px; }
  .ds2:not(.mapp) .ds2-svcicon{ width:26px; height:26px; }
}

/* ===== BUG-S004 — дропдаун выбора страны не должен вылезать за край экрана ===== */
/* .cp-pop фикс 280px + left:0 на узком правом столбце уходил вправо за вьюпорт.
   Ширину клампим под экран; на мобиле якорим к правому краю триггера (открываем внутрь). */
.gv .cp-pop{ width:min(280px, calc(100vw - 24px)); max-width:calc(100vw - 24px); box-sizing:border-box; }
@media (max-width:759.98px){
  .gv .cp-pop.left{ left:auto; right:0; }
}

/* ===== BUG-S005 — отключить double-tap-to-zoom точечно на кнопках-контролах ===== */
/* НЕ трогаем зум всей страницы (доступность) — только tappable-контролы конфигуратора/корзины. */
.ds2-hsbtn,
.ds2-stepper button,
.ds2-morph > button,
.pf-pill,
.ds2-seg button,
.ds2-x{ touch-action:manipulation; }