/* ===== кошик / оформлення / подяка: доповнення до розмітки борда (стани, які на макеті не показані) ===== */

/* перемикач форми в рядку — тепер це кнопки */
button.sg { border: 0; background: none; font: inherit; appearance: none; -webkit-appearance: none }
button.sg:focus-visible { outline: 3px solid var(--green); outline-offset: 1px }
.sg.no { opacity: .62 }
.sg.no.on { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--berry-ink); background: #fff }
.sg.no.on b { color: var(--berry-ink) }
.cl-main .cmeta { margin-top: 2px }

/* кнопка «Замінити» в підказці — тепер справжня кнопка */
button.nd-b { border: 0; font-family: inherit }

/* рядок, який неможливо купити */
.cl.bad { border-color: #E5B5C0; background: #FFFAFB }
.cl.bad .cl-ph { opacity: .6 }
.cl-bad { color: var(--berry-ink); font-weight: 700 }
.cl.bad .cl-form { display: block }
.cl.bad .cl-pr b { color: var(--muted) }
@media (max-width: 640px) { .cl.bad .cl-form { display: block; margin-top: 8px } }

/* завантаження рядків */
.cl-sk { pointer-events: none; min-height: 150px }
.cl-sk .cl-ph { background: var(--mist) }
.cl-sk .sk { display: block; height: 14px; border-radius: 8px; background: linear-gradient(90deg, var(--mist) 0, #F4F9F5 50%, var(--mist) 100%); background-size: 200% 100%; animation: uagSk 1.3s linear infinite; margin-bottom: 12px }
.cl-sk .sk1 { width: 52%; height: 20px }
.cl-sk .sk2 { width: 34% }
.cl-sk .sk3 { width: 78%; height: 40px; border-radius: 14px }
@keyframes uagSk { to { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { .cl-sk .sk { animation: none } }

/* не вдалося завантажити */
.cl-err { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: #fff; border: 1.5px solid #E5B5C0; border-radius: 24px; padding: 22px 24px }
.cl-err b { font-size: 18px; color: var(--berry-ink) }
.cl-err span { color: var(--muted); font-size: 15px }
.cl-err .btn { margin-top: 10px }

/* «Видалено … Повернути» */
.cl-undo { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--mist); border-radius: 18px; padding: 11px 16px; margin: 0 0 14px; font-size: 14.5px; font-weight: 700; color: var(--tx); animation: uagUndo .25s ease-out }
.cl-undo span { min-width: 0 }
.cl-undo button { flex: none; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--berry-ink); border-bottom: 1.5px solid currentColor; padding: 0; cursor: pointer }
.cl-undo button:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px }
.emp .cl-undo { max-width: 460px; margin: 18px auto 0 }
@keyframes uagUndo { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .cl-undo { animation: none } }

/* підсумок */
.sum-btn[aria-disabled="true"] { background: var(--soft); color: var(--muted); border-color: transparent; box-shadow: none; cursor: not-allowed }
.sum-warn { margin: 12px 0 0; font-size: 13px; line-height: 1.45; font-weight: 700; color: var(--berry-ink); text-align: center }
.sum-warn.shake { animation: uagShake .35s }
@keyframes uagShake { 20%, 60% { transform: translateX(-5px) } 40%, 80% { transform: translateX(5px) } }
@media (prefers-reduced-motion: reduce) { .sum-warn.shake { animation: none } }

/* «Додайте ще сорти» */
.ups .pc[hidden] { display: none }
@media (max-width: 640px) { .ups-grid .pc:nth-of-type(n) { min-width: 0 } }

/* без JavaScript */
.noscript-note { margin: 28px 0; padding: 18px 22px; border-radius: 20px; background: var(--mist); font-weight: 700; line-height: 1.55 }
.noscript-note a { color: var(--berry-ink); border-bottom: 1.5px solid currentColor }

/* нижня панель кошика на телефоні (ті самі правила, що на сторінці сорту) */
@media (max-width: 640px) {
  .sbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; background: #fff;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1.5px solid var(--line); box-shadow: 0 -10px 30px rgba(36, 59, 45, .12);
    transform: translateY(110%); visibility: hidden; transition: transform .3s cubic-bezier(.2, .8, .3, 1), visibility 0s linear .3s }
  .sbar[hidden] { display: none }
  .sbar.show { transform: none; visibility: visible; transition-delay: 0s }
  .sb-p small { display: block; font-size: 12px; color: var(--muted); font-weight: 700; line-height: 1.2 }
  .sb-p b { display: block; font-size: 24px; color: var(--deep); line-height: 1.15 }
  .sbar .btn { flex: 1; max-width: 220px; min-height: 52px }
  .sbar .btn[aria-disabled="true"] { background: var(--soft); color: var(--muted); box-shadow: none; cursor: not-allowed }
  .uag:has(.sbar.show) .totop { bottom: 88px }
  html:not(.js) .sbar { display: none }
}
@media (min-width: 641px) { .sbar { display: none } }
@media (prefers-reduced-motion: reduce) { .sbar { transition: none } }

/* плавність наведення — як на решті сайту */
.cl-x, .clr, .cl-foot a, .sg, .nd-b, .cl-undo button { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease }
@media (hover: hover) {
  .cl-x:hover { color: var(--burg) }
  .clr:hover, .cl-foot a:hover { color: var(--head) }
  .cl-foot .clr:hover { color: var(--berry-ink) }
  .sg:not(.on):not(.no):hover { background: rgba(255, 255, 255, .7) }
  .nd-b:hover { background: var(--burg) }
  .cl-undo button:hover { color: var(--burg) }
}
.nd-b:active { transform: scale(.96) }
@media (prefers-reduced-motion: reduce) { .cl-x, .clr, .cl-foot a, .sg, .nd-b, .cl-undo button { transition: none } }

/* ===== оформлення: склад, блоки доставки, підказки Нової пошти ===== */
.co-ph { display: block; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: var(--mist) }
.co-si-err { padding: 14px 0; font-size: 14px; font-weight: 700; color: var(--berry-ink) }
.co-si-err button { border: 0; background: none; padding: 0; font: inherit; color: inherit; border-bottom: 1.5px solid currentColor; cursor: pointer }
.co-df > * + * { margin-top: 16px }
.co-df > .co-g[style*="display: none"] { margin-top: 0 }

.co-pt { position: relative }
.co-pt input { padding-right: 46px !important; text-overflow: ellipsis }
.co-pt .np-chev { position: absolute; right: 16px; top: 26px; transform: translateY(-50%); color: var(--head); pointer-events: none }
.co-pt .np-chev[hidden] { display: none }
.co-pt:has(input[aria-expanded="true"]) .np-chev { transform: translateY(-50%) rotate(180deg) }
.co-pt input:disabled { background: var(--mist); color: var(--muted) }

.np-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 288px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1.5px solid var(--line); border-radius: 18px; box-shadow: 0 18px 42px rgba(36, 59, 45, .16) }
.np-list[hidden] { display: none }
.np-opt { padding: 11px 14px; border-radius: 12px; font-size: 15px; line-height: 1.35; color: var(--tx); cursor: pointer; font-weight: 700 }
.np-opt.on { background: var(--mist); color: var(--head) }
.np-msg { padding: 12px 14px; font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--muted) }
.np-hint { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted) }
.np-hint:empty { display: none }

/* клавіатурний фокус на прихованих радіо (картки перевізника, вкладки, чіпи) */
.co-chips .sr:focus-visible + .co-chip { outline: 3px solid var(--decor); outline-offset: 2px }
.dvx:has(#c-np:focus-visible) label[for="c-np"], .dvx:has(#c-up:focus-visible) label[for="c-up"],
.dvx:has(#t-dep:focus-visible) label[for="t-dep"], .dvx:has(#t-pst:focus-visible) label[for="t-pst"], .dvx:has(#t-cur:focus-visible) label[for="t-cur"] { outline: 3px solid var(--decor); outline-offset: 2px }

/* наведення */
.co-chip, .co-cr, .co-dtab, .sum-t-row a, .co-si-err button { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease }
@media (hover: hover) {
  .co-chip:hover { background: var(--mist); border-color: var(--decor) }
  .sr:checked + .co-chip:hover { background: var(--soft) }
  .co-cr:hover { border-color: var(--decor) }
  .dvx:has(#c-np:checked) label[for="c-np"]:hover, .dvx:has(#c-up:checked) label[for="c-up"]:hover { background: var(--soft) }
  .co-dtab:hover { background: rgba(255, 255, 255, .7) }
  .sum-t-row a:hover, .co-si-err button:hover { color: var(--burg) }
  .np-opt:hover { background: var(--mist) }
}
@media (prefers-reduced-motion: reduce) { .co-chip, .co-cr, .co-dtab, .sum-t-row a, .co-si-err button { transition: none } }

/* наведення: фото й назва в рядку кошика, виділена форма, виділена вкладка доставки, посилання під кнопкою */
.cl-ph img, .cl-ph .ph-photo { transition: transform .45s cubic-bezier(.2, .8, .3, 1) }
.cl-ph { transition: box-shadow .2s ease }
.cl-name a, .sum-note a { transition: color .2s ease }
.sum-note a { color: var(--berry-ink); text-decoration: underline; text-underline-offset: 3px }
.sg.on, .co-dtab { transition: background-color .2s ease, box-shadow .2s ease, color .2s ease }
@media (hover: hover) {
  .cl-ph:hover img, .cl-ph:hover .ph-photo { transform: scale(1.06) }
  .cl-ph:hover { box-shadow: 0 0 0 3px var(--decor) }
  .cl-name a:hover { color: var(--head) }
  .sum-note a:hover { color: var(--burg) }
  .sg.on:not(.no):hover { box-shadow: 0 5px 14px rgba(36, 59, 45, .22), inset 0 0 0 1.5px var(--deep) }
  .dvx:has(#t-dep:checked) label[for="t-dep"]:hover, .dvx:has(#t-pst:checked) label[for="t-pst"]:hover, .dvx:has(#t-cur:checked) label[for="t-cur"]:hover { background: var(--mist) }
}
@media (prefers-reduced-motion: reduce) { .cl-ph img, .cl-ph .ph-photo, .cl-name a, .sum-note a, .sg.on, .co-dtab { transition: none } .cl-ph:hover img, .cl-ph:hover .ph-photo { transform: none } }