/* Шрифти з дизайну модалки оформлення (Manrope — текст, Golos Text — заголовки). Лише latin/latin-ext/cyrillic:
   cyrillic містить українські літери, latin-ext — символ гривні ₴. */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500 800;font-display:swap;src:url(assets/fonts/golos-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500 800;font-display:swap;src:url(assets/fonts/golos-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500 800;font-display:swap;src:url(assets/fonts/golos-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================================
   Модалка оформлення — за дизайном draft/«KLIP — Оформлення замовлення.html»
   Палітра: фон #171715, поля #1f1f1c, лінії #262622, акцент #f5f5f0.
   ========================================================================== */
body.co-lock{overflow:hidden}

#coModal{
  --co-bg:#171715; --co-field:#1f1f1c; --co-line:#262622; --co-border:#34342f;
  --co-text:#f2f2ed; --co-muted:#8f8f88; --co-label:#9a9a94; --co-faint:#6e6e67; --co-acc:#f5f5f0; --co-err:#f0605d;
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  font-family:'Manrope','Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:var(--co-text);
}
#coModal[hidden]{display:none}
#coModal *{box-sizing:border-box}
#coModal button{font-family:inherit;cursor:pointer}
#coModal button:focus-visible,#coModal label:focus-within{outline:2px solid var(--co-acc);outline-offset:2px}

#coBackdrop{position:absolute;inset:0;background:rgba(8,8,7,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .22s ease}
#coModal.is-open #coBackdrop{opacity:1}

.co-panel{position:relative;z-index:1;width:460px;max-width:100%;max-height:820px;max-height:min(820px,calc(100vh - 40px));max-height:min(820px,calc(100dvh - 40px));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--co-bg);border:1px solid #2c2c28;border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);transform:translateY(22px) scale(.985);opacity:0;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .26s ease}
#coModal.is-open .co-panel{transform:none;opacity:1}
.co-panel::-webkit-scrollbar{width:8px}
.co-panel::-webkit-scrollbar-thumb{background:#2c2c28;border-radius:4px}

.co-grow{flex-grow:1;min-width:0}
.co-pad{padding:0 32px}
.co-sr{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* шапка */
.co-head{display:flex;align-items:flex-start;justify-content:space-between;padding:32px 32px 0}
.co-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--co-muted)}
#coTitle{margin:6px 0 0;font-family:'Golos Text','Manrope',sans-serif;font-weight:700;font-size:26px;letter-spacing:0;line-height:1.15;color:var(--co-acc)}
.co-close{width:44px;height:44px;min-width:44px;border-radius:999px;border:1px solid #33332f;background:transparent;display:flex;align-items:center;justify-content:center;transition:background .18s}
.co-close:hover{background:#242420}
.co-rule{margin:0 32px;border-top:1px solid var(--co-line)}
.co-rule--head{margin-top:24px}
.co-rule--sm{margin-top:16px}
.co-rule:not(.co-rule--head):not(.co-rule--sm){margin-top:24px}
.co-product+.co-rule{margin-top:0}

/* товар */
.co-product{display:flex;align-items:center;gap:16px;padding:20px 32px}
.co-thumb{width:64px;height:64px;min-width:64px;border-radius:12px;background:#232320;border:1px solid #333330;overflow:hidden}
.co-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.co-pname{font-size:16px;font-weight:600;color:var(--co-text)}
.co-punit{font-size:13px;color:var(--co-muted);margin-top:4px}
.co-step{display:flex;align-items:center;height:44px;border:1px solid #33332f;border-radius:10px;overflow:hidden;flex:0 0 auto}
.co-stepbtn{width:44px;height:44px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;transition:background .18s}
.co-stepbtn:first-child{border-right:1px solid #33332f}
.co-stepbtn:last-child{border-left:1px solid #33332f}
.co-stepbtn:hover:not(:disabled){background:#242420}
.co-stepbtn:disabled{opacity:.35;cursor:not-allowed}
.co-qty{width:44px;text-align:center;font-size:14px;font-weight:600;color:var(--co-text);font-variant-numeric:tabular-nums}
.co-line{min-width:84px;text-align:right;font-size:16px;font-weight:700;color:var(--co-acc);font-variant-numeric:tabular-nums;white-space:nowrap}

/* секції */
.co-sec{display:flex;align-items:center;gap:10px;padding:22px 32px 14px}
.co-badge{width:22px;height:22px;min-width:22px;border-radius:999px;border:1px solid #3a3a35;background:#201f1d;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#cfcfc9}
.co-sect{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--co-label)}

/* поля */
.co-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;padding:0 32px}
.co-field label{display:block;font-size:12px;font-weight:600;color:var(--co-label);margin-bottom:6px}
.co-field.co-pad{padding-top:14px}
.co-field.co-first{padding-top:0}
.co-grid+.co-field{padding-top:14px}
.co-req{color:var(--co-acc);font-weight:700}
.co-opt{color:var(--co-faint);font-weight:500;font-size:11px}
.co-input,.co-phone,.co-select{width:100%;height:48px;background:var(--co-field);border:1px solid var(--co-border);border-radius:10px;color:var(--co-text);font-size:14px;transition:border-color .15s,box-shadow .15s}
.co-input{padding:0 14px;font-family:inherit}
.co-input::placeholder,.co-phone input::placeholder,.co-dsearch input::placeholder{color:var(--co-faint)}
.co-input:focus,.co-phone:focus-within,.co-select:focus{outline:none;border-color:var(--co-acc);box-shadow:0 0 0 3px rgba(245,245,240,.12)}
.co-input--icon{padding-left:40px}
.co-search{position:relative}
.co-search>svg,.co-phone>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none}
.co-phone{position:relative;display:flex;align-items:center;padding-left:40px}
.co-prefix{color:var(--co-muted);font-size:14px;padding-right:7px;user-select:none}
.co-phone input{flex:1;min-width:0;height:100%;background:transparent;border:none;outline:none;color:var(--co-text);font-size:14px;font-family:inherit;padding:0 14px 0 0;font-variant-numeric:tabular-nums}
.co-hint{font-size:11px;color:var(--co-faint);margin-top:6px}
.co-err{font-size:11.5px;line-height:1.35;color:var(--co-err);margin-top:6px}
.co-err:empty{display:none}
.co-field.has-error .co-input,.co-field.has-error .co-phone,.co-field.has-error .co-select{border-color:var(--co-err)}
.co-field.has-error .co-hint{display:none}

/* випадаючі списки */
.co-anchor{position:relative}
.co-drop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:#1b1b18;border:1px solid #3a3a35;border-radius:12px;box-shadow:0 22px 55px rgba(0,0,0,.65);overflow:hidden;display:flex;flex-direction:column}
.co-drop[hidden]{display:none}
.co-list{list-style:none;margin:0;padding:6px;max-height:264px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.co-list::-webkit-scrollbar{width:6px}
.co-list::-webkit-scrollbar-thumb{background:#33332f;border-radius:3px}
.co-list li{padding:10px 12px;border-radius:8px;cursor:pointer;font-size:14px;line-height:1.3;color:var(--co-text)}
.co-list li small{display:block;font-size:11.5px;color:var(--co-muted);margin-top:2px}
.co-list li.is-active,.co-list li:hover{background:#26261f}
.co-list li[aria-selected="true"]{background:#2b2b25}
.co-list li.co-info{cursor:default;color:var(--co-muted);font-size:13px}
.co-list li.co-info:hover{background:none}
.co-list li.co-retry{cursor:pointer;color:var(--co-acc)}
.co-list .co-head-li{cursor:default;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--co-faint);padding:8px 12px 4px}
.co-list .co-head-li:hover{background:none}
.co-dsearch{position:relative;padding:8px;border-bottom:1px solid var(--co-line)}
.co-dsearch svg{position:absolute;left:20px;top:50%;transform:translateY(-50%);pointer-events:none}
.co-dsearch input{width:100%;height:38px;padding:0 12px 0 34px;background:var(--co-field);border:1px solid var(--co-border);border-radius:8px;color:var(--co-text);font-size:14px;font-family:inherit}
.co-dsearch input:focus{outline:none;border-color:var(--co-acc)}

/* відділення — кнопка-селект */
.co-select{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;text-align:left}
.co-select:disabled{opacity:.55;cursor:not-allowed}
.co-ico,.co-chev{flex:0 0 auto}
.co-chev{transition:transform .18s}
.co-select[aria-expanded="true"] .co-chev{transform:rotate(180deg)}
.co-selval{flex:1;min-width:0;overflow:hidden}
.co-seltitle{display:block;font-size:14px;color:var(--co-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-selval.has-value .co-seltitle{color:var(--co-text)}
.co-selsub{display:block;font-size:11.5px;color:var(--co-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* оплата */
.co-paycard{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;margin-bottom:10px;cursor:pointer;border:1.5px solid #302f2b;background:transparent;transition:border-color .15s,background .15s;position:relative}
.co-paycard:last-child{margin-bottom:0}
.co-paycard:hover{border-color:#4a4a44}
.co-paycard.is-on{border-color:var(--co-acc);background:rgba(245,245,240,.05)}
.co-ring{width:20px;height:20px;min-width:20px;border-radius:999px;border:1.5px solid #4a4a44;display:flex;align-items:center;justify-content:center}
.co-paycard.is-on .co-ring{border-color:var(--co-acc)}
.co-dot{width:10px;height:10px;border-radius:999px;background:var(--co-acc);display:none}
.co-paycard.is-on .co-dot{display:block}
.co-payt{display:block;font-size:14px;font-weight:600;color:var(--co-text)}
.co-pays{display:block;font-size:12px;color:var(--co-muted);margin-top:2px}

/* підсумок */
.co-sum{padding:20px 32px 0;display:flex;flex-direction:column;gap:10px}
.co-sumrow{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#e0e0da;font-variant-numeric:tabular-nums}
.co-muted{color:var(--co-muted)}
.co-total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 32px 0}
.co-totlb{font-size:14px;font-weight:600;color:#cfcfc9}
#coTotal{font-family:'Golos Text','Manrope',sans-serif;font-size:24px;font-weight:700;color:var(--co-acc);font-variant-numeric:tabular-nums}
.co-cta-wrap{padding-top:22px}
.co-cta{width:100%;height:52px;background:var(--co-acc);color:#141412;border:none;border-radius:12px;font-size:14.5px;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,opacity .15s}
.co-cta:hover:not(:disabled){background:#e7e7e1}
.co-cta:disabled{opacity:.6;cursor:progress}
#coFormError{display:block;min-height:0;margin-top:11px;font-size:12.5px;line-height:1.4;color:var(--co-err);text-align:center}
#coFormError:empty{display:none}
.co-legal{padding:14px 32px 30px;text-align:center;font-size:11px;line-height:1.6;color:var(--co-faint)}

/* успіх */
#coSuccess{padding:44px 32px 34px;text-align:center}
.co-tick{width:60px;height:60px;margin:0 auto 22px;border-radius:999px;border:1.5px solid #4a4a44;background:rgba(245,245,240,.05);display:flex;align-items:center;justify-content:center}
#coSuccess h2{font-family:'Golos Text','Manrope',sans-serif;font-size:26px;font-weight:700;color:var(--co-acc);margin-bottom:12px;letter-spacing:0;line-height:1.15}
#coSuccessNote{font-size:14px;line-height:1.6;color:#bdbdb7;max-width:34ch;margin:0 auto 20px}
.co-oid{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--co-faint);margin-bottom:26px}
#coOrderId{color:var(--co-text);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.co-cta--ghost{background:transparent;color:var(--co-text);border:1px solid #33332f}
.co-cta--ghost:hover:not(:disabled){background:#242420}

/* телефон / малі екрани */
@media (max-width:520px){
  #coModal{padding:0;align-items:stretch}
  .co-panel{width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;border-radius:0;border:none}
  .co-head{padding:24px 20px 0}
  .co-rule{margin-left:20px;margin-right:20px}
  .co-product{padding:18px 20px;gap:12px;flex-wrap:wrap}
  .co-product .co-grow{flex:1 1 calc(100% - 120px)}
  .co-line{min-width:0;margin-left:auto}
  .co-sec{padding-left:20px;padding-right:20px}
  .co-grid{padding:0 20px;grid-template-columns:1fr}
  .co-grid .co-field+.co-field{padding-top:14px}
  .co-pad{padding-left:20px;padding-right:20px}
  .co-sum,.co-total,.co-legal{padding-left:20px;padding-right:20px}
  /* 16px: менше — і iOS Safari масштабує сторінку при фокусі на полі */
  .co-input,.co-phone input,.co-dsearch input,.co-prefix{font-size:16px}
  .co-list li{padding:12px}
}
@media (prefers-reduced-motion:reduce){
  #coBackdrop,.co-panel,.co-chev{transition:none}
}