/* Окно быстрого заказа. Палитра берётся из shop.css, отдельных цветов тут нет. */

/* В КАРТОЧКЕ покупка в один клик это главное действие: страница должна продавать
   на месте, а не уводить в карточку товара. «Выбрать» рядом остаётся обводкой,
   поэтому спора двух заметных кнопок нет. */
ul.products li.product button.ck-qo-open{display:block;width:100%;margin:8px 0 0;
  padding:11px 14px;min-height:44px;
  background:var(--ck-btn);color:#fff;border:0;box-shadow:none;border-radius:10px;
  font-family:inherit;font-size:14.5px;font-weight:600;line-height:1.2;
  text-decoration:none;cursor:pointer;transition:opacity .16s ease}
ul.products li.product button.ck-qo-open:hover,
ul.products li.product button.ck-qo-open:focus-visible{background:var(--ck-btn);
  color:#fff;opacity:.92}

/* На узкой карточке слово «Заказать» шире поля кнопки за вычетом её отступов,
   и буквы упираются в край. Кегль и отступы уменьшаем только там, где тесно. */
@media (max-width:360px){
  ul.products li.product button.ck-qo-open{padding:11px 8px;font-size:13.5px}
}

/* На самой странице товара по образцу заказчика это ссылка под «В корзину»:
   подчёркнутая, фирменного цвета, без рамки и фона. */
button.ck-qo-open{display:inline-flex;align-items:center;margin:8px 0 0;padding:12px 2px;min-height:44px;
  background:none;border:0;box-shadow:none;border-radius:0;
  font-family:inherit;font-size:14.5px;font-weight:600;line-height:1.3;
  color:var(--ck-btn);text-decoration:underline;text-underline-offset:4px;
  cursor:pointer;transition:color .16s ease}
button.ck-qo-open:hover,button.ck-qo-open:focus-visible{background:none;
  color:var(--ck-ink);text-decoration:underline}

.ck-qo[hidden]{display:none}
.ck-qo{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  padding:16px}
.ck-qo-back{position:absolute;inset:0;background:rgba(43,29,22,.55)}
body.ck-qo-lock{overflow:hidden}

.ck-qo-win{position:relative;width:min(440px,100%);max-height:92vh;overflow-y:auto;
  background:var(--ck-card);border-radius:var(--ck-r);padding:26px 26px 22px;
  box-shadow:0 24px 60px rgba(43,29,22,.32)}
.ck-qo-win h2{margin:0 0 6px;font-size:22px;line-height:1.25}
.ck-qo-note{margin:0 0 14px;font-size:14px;line-height:1.45;color:var(--ck-ink2)}
.ck-qo-name{margin:0 0 10px;font-weight:700;font-size:15.5px;line-height:1.3}

/* Селектор длинный намеренно: тема красит любую кнопку в фирменный оранжевый
   и даёт ей свои поля, из-за чего крестик выходил оранжевой плашкой 52 на 40. */
.ck-qo .ck-qo-win button.ck-qo-x{position:absolute;top:12px;right:12px;
  width:40px;min-width:40px;height:40px;min-height:40px;
  display:flex;align-items:center;justify-content:center;padding:0;line-height:1;
  background:none;border:0;box-shadow:none;color:var(--ck-ink2);cursor:pointer;border-radius:50%}
.ck-qo .ck-qo-win button.ck-qo-x:hover,
.ck-qo .ck-qo-win button.ck-qo-x:focus{background:var(--ck-bg);color:var(--ck-ink);box-shadow:none}
.ck-qo .ck-qo-win button.ck-qo-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}

.ck-qo-packs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
button.ck-qo-pack{min-height:44px;padding:10px 15px;
  background:var(--ck-card);color:var(--ck-ink);border:1.5px solid var(--ck-line2);
  border-radius:10px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease}
/* Цвет текста в наведении и фокусе задаётся явно: кит конструктора красит текст
   ЛЮБОЙ кнопки в белый по button:hover и button:focus, выходил белый на белом. */
button.ck-qo-pack:hover:not(:disabled),
button.ck-qo-pack:focus:not(:disabled){border-color:var(--ck-ink);background:var(--ck-card);color:var(--ck-ink)}
/* Выбранная фасовка описана И для наведения тоже. Без этого правило :hover перебивало
   отметку выбора, потому что у него выше точность, и подсветка пропадала ровно под
   курсором, то есть в момент нажатия. */
button.ck-qo-pack.on,
button.ck-qo-pack.on:hover,
button.ck-qo-pack.on:focus{border-color:var(--ck-btn);background:var(--ck-bg);
  color:var(--ck-ink);box-shadow:inset 0 0 0 1px var(--ck-btn)}
button.ck-qo-pack:disabled{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.ck-qo-wait{font-size:14px;color:var(--ck-ink2)}

.ck-qo-price{margin:0 0 16px;font-size:24px;font-weight:700;color:var(--ck-ink)}
.ck-qo-form label{display:block;margin-bottom:12px;font-size:13.5px;color:var(--ck-ink2)}
.ck-qo-form input[type=text],.ck-qo-form input[type=tel]{display:block;width:100%;margin-top:5px;
  min-height:48px;padding:11px 14px;font-size:16px;font-family:inherit;color:var(--ck-ink);
  background:var(--ck-bg);border:1.5px solid var(--ck-line2);border-radius:10px}
.ck-qo-form input:focus{border-color:var(--ck-btn);outline:none}
/* Поле для роботов. Скрывается уводом за край, а не display:none:
   часть роботов пропускает скрытые поля и ловушка бы не сработала. */
.ck-qo-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

button.ck-qo-send{display:block;width:100%;min-height:50px;margin-top:4px;padding:13px 18px;
  background:var(--ck-btn);color:#fff;border:0;border-radius:10px;
  font-family:inherit;font-size:16px;font-weight:600;cursor:pointer}
button.ck-qo-send:hover:not(:disabled),
button.ck-qo-send:focus:not(:disabled){background:var(--ck-btn-h,var(--ck-btn));color:#fff;opacity:.92}
button.ck-qo-send:disabled{opacity:.6;cursor:progress}

.ck-qo-consent{margin:12px 0 0;font-size:12px;line-height:1.45;color:var(--ck-ink2)}
.ck-qo-err{margin:10px 0 0;font-size:14px;color:#b3261e;min-height:1px}
.ck-qo-err:empty{margin:0}
.ck-qo-ok{margin:8px 0 0;font-size:16px;line-height:1.5}

@media (max-width:600px){
  .ck-qo{align-items:flex-end;padding:0}
  .ck-qo-win{width:100%;max-height:88vh;border-radius:var(--ck-r) var(--ck-r) 0 0;padding:22px 18px 18px}
}