/* ab_payship 02.10.2026: сторінка «Оплата і доставка» / «Payment and shipping» (information_id=3).
   Усе в межах #ab-ps (id потрібен, щоб перекрити правила теми .content-block p / .ds-information h2).
   Рух тільки через transform і opacity. */
#ab-ps{--b:#6D213F;--soft:#f8eef1;--ink:#26252a;--mut:#5d6068;--line:#ece6e8;--ctl:#9a8f94;--surf:#f7f7f7;--ok:#2c7a3f;--oksoft:#e9f5ec;
  --eo:cubic-bezier(.23,1,.32,1);color:var(--ink);font-weight:400;font-size:1rem;line-height:1.55}
#ab-ps *{box-sizing:border-box}
#ab-ps p,#ab-ps ul,#ab-ps ol,#ab-ps li,#ab-ps dl,#ab-ps dd,#ab-ps dt{color:inherit;margin:0;padding:0;font-weight:inherit}
#ab-ps ul,#ab-ps ol{list-style:none}
#ab-ps h2,#ab-ps h3,#ab-ps h4{margin:0;padding:0;line-height:1.2}
#ab-ps h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:600;color:var(--b);letter-spacing:-.01em}
#ab-ps h3{font-size:1.25rem;font-weight:600;color:var(--ink)}
#ab-ps h4{font-size:1.0625rem;font-weight:600;color:var(--ink);line-height:1.3}
#ab-ps a{color:var(--b);text-underline-offset:3px}
#ab-ps a:focus-visible,#ab-ps button:focus-visible,#ab-ps .ps-range:focus-visible{outline:2px solid var(--b);outline-offset:3px}
#ab-ps svg{flex:none}
#ab-ps b{font-weight:600}
#ab-ps .ps-lead{font-size:1.0625rem;color:var(--mut);max-width:72ch}

/* швидкі факти */
#ab-ps .ps-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0 16px}
#ab-ps .ps-fact{overflow-wrap:anywhere;background:var(--surf);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:2px}
#ab-ps .ps-fact b{font-size:1.375rem;color:var(--b);line-height:1.2;font-variant-numeric:tabular-nums}
#ab-ps .ps-fact span{font-size:.875rem;color:var(--mut);line-height:1.35}

/* навігація по сторінці */
#ab-ps .ps-nav{display:flex;flex-wrap:wrap;gap:8px}
#ab-ps .ps-nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--ctl);border-radius:999px;text-decoration:none;font-weight:500;font-size:.9375rem;color:var(--ink);background:#fff;transition:transform 160ms var(--eo),border-color 160ms ease,color 160ms ease}
#ab-ps .ps-nav a:active{transform:scale(.97)}
#ab-ps .ps-nav svg{width:18px;height:18px;color:var(--b)}

/* секції */
#ab-ps .ps-sec{padding-top:48px;scroll-margin-top:40px}
#ab-ps .ps-sec>h2{margin-bottom:8px}
#ab-ps .ps-sub{margin:40px 0 16px}
#ab-ps .ps-grid{display:grid;gap:12px;margin-top:24px}
#ab-ps .ps-grid.c2{grid-template-columns:repeat(2,1fr)}
#ab-ps .ps-grid.c3{grid-template-columns:repeat(3,1fr)}
#ab-ps .ps-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:8px}
#ab-ps .ps-card p{color:var(--mut);font-size:.9375rem}
#ab-ps .ps-card h3{font-size:1.0625rem}
#ab-ps .ps-cardh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#ab-ps .ps-tag{flex:none}
#ab-ps .ps-tag{font-size:.75rem;font-weight:600;color:var(--b);background:var(--soft);border-radius:999px;padding:3px 10px}
#ab-ps .ps-pays{font-size:.9375rem;font-weight:500;color:var(--ink);margin-top:auto;padding-top:6px}
#ab-ps .ps-notes{display:grid;gap:8px;margin-top:24px}
#ab-ps .ps-note{display:flex;gap:12px;align-items:flex-start;background:var(--soft);border-radius:16px;padding:16px;font-size:.9375rem}
#ab-ps .ps-note svg{width:22px;height:22px;color:var(--b);margin-top:1px}
#ab-ps .ps-note.ok{background:var(--oksoft)}
#ab-ps .ps-note.ok svg{color:var(--ok)}

/* калькулятор доставки */
#ab-ps .ps-calc{margin-top:24px;background:var(--surf);border-radius:16px;padding:24px;display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:stretch}
#ab-ps .ps-retail{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--b);border-radius:12px;padding:12px 16px;font-size:.9375rem;color:var(--ink)}
#ab-ps .ps-retail svg{width:20px;height:20px;color:var(--b);margin-top:2px}
#ab-ps .ps-retail b{color:var(--b)}
#ab-ps .ps-lbl{display:block;font-size:.875rem;font-weight:500;color:var(--mut);margin-bottom:8px}
#ab-ps .ps-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:#fff;border:1px solid var(--ctl);border-radius:12px;padding:4px;isolation:isolate}
#ab-ps .ps-seg::before{content:"";position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/var(--n,3));border-radius:9px;background:var(--b);transform:translateX(calc(var(--i,0)*100%));transition:transform 200ms var(--eo)}
#ab-ps .ps-seg button{appearance:none;border:0;background:none;font:inherit;font-weight:500;font-size:.9375rem;line-height:1.2;color:var(--ink);min-height:48px;min-width:0;padding:6px 8px;border-radius:9px;cursor:pointer;overflow-wrap:anywhere;transition:color 200ms var(--eo)}
#ab-ps .ps-seg button small{display:block;font-size:.8125rem;font-weight:400;opacity:.85}
#ab-ps .ps-seg button[aria-checked="true"]{color:#fff}
#ab-ps .ps-seg button:focus{outline:2px solid var(--b);outline-offset:3px}
#ab-ps .ps-seg button:focus:not(:focus-visible){outline:0}
#ab-ps .ps-field{margin-top:24px;position:relative}
#ab-ps .ps-rowlbl{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
#ab-ps .ps-rowlbl .ps-lbl{margin:0}
#ab-ps .ps-rowlbl output{font-size:1.25rem;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
#ab-ps .ps-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;background:transparent;margin:0;padding:0;cursor:pointer;touch-action:pan-y}
#ab-ps .ps-range::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--b) var(--p,30%),#d9d0d4 var(--p,30%))}
#ab-ps .ps-range::-moz-range-track{height:8px;border-radius:999px;background:#d9d0d4}
#ab-ps .ps-range::-moz-range-progress{height:8px;border-radius:999px;background:var(--b)}
#ab-ps .ps-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--b);margin-top:-9px;box-shadow:0 2px 6px rgba(109,33,63,.25);transition:transform 160ms var(--eo)}
#ab-ps .ps-range::-moz-range-thumb{width:26px;height:26px;box-sizing:border-box;border-radius:50%;background:#fff;border:2px solid var(--b);box-shadow:0 2px 6px rgba(109,33,63,.25)}
#ab-ps .ps-range:active::-webkit-slider-thumb{transform:scale(1.12)}
/* позначка порога безкоштовної доставки на шкалі */
#ab-ps .ps-tick{position:relative;height:34px;margin-top:-6px;font-size:.8125rem;color:var(--mut)}
#ab-ps .ps-tick i{position:absolute;top:0;left:calc(13px + (100% - 26px)*var(--t,.5));width:2px;height:10px;margin-left:-1px;border-radius:2px;background:var(--ok)}
#ab-ps .ps-tick span{position:absolute;top:13px;left:calc(13px + (100% - 26px)*var(--t,.5));transform:translateX(-50%);white-space:nowrap;color:var(--ok);font-weight:500}
#ab-ps .ps-tick.off i,#ab-ps .ps-tick.off span{visibility:hidden}
#ab-ps .ps-field.is-na{opacity:.45}
#ab-ps .ps-field.is-na .ps-range{cursor:default}
#ab-ps .ps-res{background:#fff;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px;border:1px solid var(--line)}
#ab-ps .ps-res dl{display:flex;flex-direction:column;gap:12px}
#ab-ps .ps-kv{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
#ab-ps .ps-kv dt{color:var(--mut);font-size:.9375rem}
#ab-ps .ps-kv dd{font-weight:600;font-size:1.125rem;text-align:right;font-variant-numeric:tabular-nums}
#ab-ps .ps-swap{display:inline-block;transition:opacity 120ms ease,transform 120ms var(--eo)}
#ab-ps .ps-swap.is-out{opacity:0;transform:translateY(4px)}
#ab-ps .ps-free{color:var(--ok)}
#ab-ps .ps-hint{font-size:.9375rem;color:var(--ink);background:var(--soft);border-radius:12px;padding:12px 16px}
#ab-ps .ps-hint.is-free{background:var(--oksoft);color:var(--ok);font-weight:500}
#ab-ps .ps-fine{font-size:.8125rem;color:var(--mut);margin-top:auto}
#ab-ps .ps-static{display:none;font-size:.9375rem}

/* шлях посилки */
#ab-ps .ps-path{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
#ab-ps .ps-path li{position:relative;display:flex;flex-direction:column;gap:6px}
#ab-ps .ps-path li:not(:last-child)::before,#ab-ps .ps-path li:not(:last-child)::after{content:"";position:absolute;top:21px;left:44px;right:-16px;height:2px;background:var(--line)}
#ab-ps .ps-path li:not(:last-child)::after{background:var(--b);transform-origin:left center}
#ab-ps.js-on .ps-path li:not(:last-child)::after{transform:scaleX(0);transition:transform 400ms var(--eo);transition-delay:calc(var(--k,0)*140ms + 100ms)}
#ab-ps.js-on .ps-path.is-in li:not(:last-child)::after{transform:scaleX(1)}
#ab-ps .ps-dot{width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--b);color:var(--b);display:grid;place-items:center;margin-bottom:6px}
#ab-ps .ps-dot svg{width:22px;height:22px}
#ab-ps .ps-path p{font-size:.9375rem;color:var(--mut);padding-right:8px}

/* повернення */
#ab-ps .ps-case{margin-top:24px;background:var(--surf);border-radius:16px;padding:24px}
#ab-ps .ps-case .ps-seg{max-width:560px}
#ab-ps .ps-panels{margin-top:16px}
#ab-ps .ps-panel[hidden]{display:none}
#ab-ps[data-ready] .ps-panel{animation:ab-ps-in 180ms var(--eo)}
@keyframes ab-ps-in{from{opacity:0;transform:translateY(4px)}}
#ab-ps .ps-list{display:grid;gap:10px}
#ab-ps .ps-list li{display:flex;gap:10px;align-items:flex-start;font-size:.9688rem}
#ab-ps .ps-list svg{width:20px;height:20px;color:var(--ok);margin-top:2px}
#ab-ps .ps-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:st}
#ab-ps .ps-steps li{counter-increment:st;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:6px}
#ab-ps .ps-steps li::before{content:counter(st);width:32px;height:32px;border-radius:50%;background:var(--b);color:#fff;font-weight:600;display:grid;place-items:center;font-size:.9375rem;margin-bottom:6px}
#ab-ps .ps-steps p{font-size:.9375rem;color:var(--mut)}

/* контакти */
#ab-ps .ps-cta{margin-top:48px;background:var(--b);color:#fff;border-radius:16px;padding:24px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;scroll-margin-top:72px}
#ab-ps .ps-cta h2{color:#fff}
#ab-ps .ps-cta p{color:rgba(255,255,255,.86);margin-top:6px;max-width:52ch}
#ab-ps .ps-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
#ab-ps .ps-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:12px;background:#fff;color:var(--b);font-weight:600;font-size:.9375rem;text-decoration:none;transition:transform 160ms var(--eo),background-color 160ms ease}
#ab-ps .ps-btn:active{transform:scale(.97)}
#ab-ps .ps-btn svg{width:20px;height:20px}
#ab-ps .ps-btn.gh{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
#ab-ps .ps-cta a:focus-visible{outline:2px solid #fff!important;outline-offset:3px}
#ab-ps .ps-contacts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 24px;font-size:.9375rem;color:rgba(255,255,255,.86);border-top:1px solid rgba(255,255,255,.2);padding-top:12px}
#ab-ps .ps-contacts a{color:#fff;display:inline-block;padding:6px 0;white-space:nowrap}

/* поява при прокрутці: лише нижче першого екрана і лише коли JS увімкнув */
#ab-ps.js-on [data-rv]{opacity:0;transform:translateY(6px);transition:opacity 240ms ease,transform 240ms var(--eo);transition-delay:calc(var(--d,0)*50ms)}
#ab-ps.js-on [data-rv].is-in{opacity:1;transform:none}

/* без JS: усе читається, керування приховане */
#ab-ps:not([data-ready]) .ps-seg,#ab-ps:not([data-ready]) .ps-field,#ab-ps:not([data-ready]) .ps-kv.dyn,#ab-ps:not([data-ready]) .ps-hint,#ab-ps:not([data-ready]) #ps-l1,#ab-ps:not([data-ready]) #ps-l2{display:none}
#ab-ps:not([data-ready]) .ps-static{display:block}
#ab-ps:not([data-ready]) .ps-panel+.ps-panel{margin-top:16px}
#ab-ps:not([data-ready]) .ps-panel .visually-hidden{position:static!important;width:auto!important;height:auto!important;clip:auto!important;margin:0 0 8px!important;overflow:visible!important;white-space:normal!important}

@media (hover:hover) and (pointer:fine){
  #ab-ps .ps-nav a:hover{border-color:var(--b);color:var(--b)}
  #ab-ps .ps-btn:hover{background:#fbeff3}
  #ab-ps .ps-btn.gh:hover{background:rgba(255,255,255,.12)}
  #ab-ps .ps-seg button:not([aria-checked="true"]):hover{color:var(--b)}
}
@media (max-width:991px){
  #ab-ps .ps-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  #ab-ps .ps-calc{grid-template-columns:1fr;padding:16px}
  #ab-ps .ps-grid.c3{grid-template-columns:1fr}
  #ab-ps .ps-cta{grid-template-columns:1fr}
  #ab-ps .ps-btns{justify-content:flex-start}
}
@media (max-width:767px){
  #ab-ps .ps-sec{padding-top:40px}
  #ab-ps .ps-fact{padding:12px}
  #ab-ps .ps-fact b{font-size:1.125rem}
  #ab-ps .ps-fact span{font-size:.8125rem}
  #ab-ps .ps-grid.c2,#ab-ps .ps-steps{grid-template-columns:1fr}
  #ab-ps .ps-case{padding:16px}
  #ab-ps .ps-seg button{font-size:.875rem;padding:6px 4px;overflow-wrap:break-word;hyphens:auto}
  #ab-ps .ps-calc{gap:12px}
  #ab-ps .ps-field{margin-top:16px}
  #ab-ps .ps-res{padding:12px 16px;gap:10px}
  #ab-ps .ps-res dl{gap:8px}
  #ab-ps .ps-kv dd{font-size:1rem}
  #ab-ps .ps-kv.dyn:first-child{flex-direction:column;gap:0}
  #ab-ps .ps-kv.dyn:first-child dd{text-align:left;min-height:1.5em}
  #ab-ps .ps-hint{order:-1;min-height:calc(3.1em + 24px);display:flex;align-items:center}
  #ab-ps .ps-cta{padding-bottom:56px;margin-bottom:8px}
  #ab-ps .ps-path{grid-template-columns:1fr;gap:0}
  #ab-ps .ps-path li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:2px;padding-bottom:24px}
  #ab-ps .ps-path li:last-child{padding-bottom:0}
  #ab-ps .ps-path li:not(:last-child)::before,#ab-ps .ps-path li:not(:last-child)::after{top:44px;bottom:0;left:21px;right:auto;width:2px;height:auto}
  #ab-ps .ps-path li:not(:last-child)::after{transform-origin:center top}
  #ab-ps.js-on .ps-path li:not(:last-child)::after{transform:scaleY(0)}
  #ab-ps.js-on .ps-path.is-in li:not(:last-child)::after{transform:scaleY(1)}
  #ab-ps .ps-dot{grid-row:1/3;margin:0}
  #ab-ps .ps-path h4{align-self:end;padding-top:2px}
  #ab-ps .ps-path p{grid-column:2;padding-right:0}
  #ab-ps .ps-btn{flex:1 1 auto;justify-content:center}
}
@media (min-width:992px) and (max-width:1199px){
  #ab-ps .ps-kv.dyn:first-child{flex-direction:column;gap:2px}
  #ab-ps .ps-kv.dyn:first-child dd{text-align:left}
}
@media (min-width:1200px){
  #ab-ps .ps-sec{scroll-margin-top:104px}
  #ab-ps .ps-cta{scroll-margin-top:136px}
  #ab-ps .ps-grid.c3{grid-template-columns:1.3fr 1fr 1fr}
}
@media (max-width:400px){
  #ab-ps .ps-seg button{font-size:.8125rem}
}
@media (prefers-reduced-motion:reduce){
  #ab-ps.js-on [data-rv]{transform:none;transition:opacity 200ms ease;transition-delay:0s}
  #ab-ps .ps-seg::before,#ab-ps .ps-nav a,#ab-ps .ps-btn,#ab-ps .ps-range::-webkit-slider-thumb{transition:none}
  #ab-ps.js-on .ps-path li:not(:last-child)::after{transition:none;transform:none}
  #ab-ps .ps-swap{transition:opacity 120ms ease}
  #ab-ps .ps-swap.is-out{transform:none}
  #ab-ps[data-ready] .ps-panel{animation:none}
  html{scroll-behavior:auto}
}
@media (forced-colors:active){
  #ab-ps .ps-seg button[aria-checked="true"]{outline:2px solid Highlight;outline-offset:-2px}
}
@media print{
  #ab-ps [data-rv]{opacity:1!important;transform:none!important}
  #ab-ps .ps-path li::after{transform:none!important}
  #ab-ps .ps-panel{display:block!important}
  #ab-ps .ps-seg,#ab-ps .ps-field,#ab-ps .ps-nav{display:none!important}
  #ab-ps .ps-static{display:block!important}
}

/* обгортка теми (рамка і поля .content-block) на цій сторінці зайва: блоки мають власні картки */
.ds-information.content-block:has(> #ab-ps){padding:0;border:0;background:none;box-shadow:none}
#ab-ps .ps-retail a{font-weight:500}
#ab-ps .ps-retail span{min-width:0}
main:has(#ab-ps) .ds-page-title{padding-left:7.2px;padding-right:7.2px}
/* темну тему на сайті не ввімкнено; якщо ввімкнуть, блок лишається читабельним */
.dark-theme #ab-ps{background:#fff;border-radius:16px;padding:24px}