/* BY HOME — корзина + оформление. Использует переменные из app.css (:root). */

/* кнопка «В корзину» на карточке.
   Touch: компактная кнопка в потоке под ценой.
   Desktop (hover): появляется поверх нижней кромки фото при наведении — сетка дышит. */
.card-cart{
  margin:9px 13px 13px; padding:10px 12px; width:calc(100% - 26px);
  background:var(--ink); color:#fff; border-radius:10px; font-weight:700; font-size:13px;
  transition:.18s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.card-cart:hover{ background:#000; transform:translateY(-1px); }
.card-cart:active{ transform:translateY(0); }
.card-cart.added{ background:var(--green); }
.card.lrow .card-cart{ width:auto; align-self:flex-start; margin-top:8px; padding:11px 22px; }

.card-cart-ph{ position:absolute; left:10px; right:10px; bottom:10px; z-index:2; margin:0; width:auto;
  padding:9px 12px; background:rgba(27,27,25,.92); backdrop-filter:blur(2px); }
.card-cart-ph{ display:none; }
@media(hover:hover) and (pointer:fine){
  .card-cart:not(.card-cart-ph){ display:none; }
  /* задержка появления: пролёт курсора через карточку не выхватывает кнопку под клик */
  .card-cart-ph{ display:flex; opacity:0; transform:translateY(8px); pointer-events:none; transition:.18s ease .09s; }
  .card:hover .card-cart-ph, .card:focus-within .card-cart-ph{ opacity:1; transform:none; pointer-events:auto; }
  .card-cart-ph.added{ opacity:1; transform:none; pointer-events:auto; }
  /* в списочном виде оставляем обычную кнопку */
  .card.lrow .card-cart:not(.card-cart-ph){ display:flex; }
  .card.lrow .card-cart-ph{ display:none; }
}

/* бейдж счётчика корзины — пульс */
#cartCount.pulse{ animation:cartPulse .45s ease; }
@keyframes cartPulse{ 0%{transform:scale(1)} 35%{transform:scale(1.45)} 100%{transform:scale(1)} }

/* ─── тост ─── */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:#fff; padding:13px 22px; border-radius:999px; font-size:14px; font-weight:600;
  z-index:120; opacity:0; transition:.25s; box-shadow:0 14px 40px rgba(20,18,14,.3); pointer-events:none;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ─── дровер корзины ─── */
.cart-back{ position:fixed; inset:0; background:rgba(20,18,14,.45); z-index:100; opacity:0; transition:.3s; }
.cart-back.on{ opacity:1; }
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw; background:#fff; z-index:101;
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:-20px 0 60px rgba(20,18,14,.18);
}
.cart-drawer.on{ transform:translateX(0); }
/* Закрытая корзина: display:flex выше перебивал атрибут hidden, и тень выступала
   у края экрана, а кнопки оставались в порядке табуляции. */
.cart-drawer[hidden], .cart-back[hidden]{ display:none; }
.co-err-act{ display:inline-block; margin-left:6px; padding:3px 10px; border-radius:999px; border:1px solid currentColor; font-size:12.5px; font-weight:700; cursor:pointer; }
.co-err-act:hover{ background:rgba(0,0,0,.06); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.cart-head b{ font-size:19px; font-weight:800; }
.cart-x{ width:36px; height:36px; border-radius:50%; font-size:16px; color:var(--soft); display:grid; place-items:center; }
.cart-x:hover{ background:var(--panel); color:var(--ink); }
.cart-items{ flex:1; overflow-y:auto; padding:8px 22px; }
.cart-empty{ text-align:center; color:var(--soft); padding:80px 20px; font-size:16px; font-weight:600; }
.cart-empty span{ font-size:13px; font-weight:400; color:var(--soft2); }
.cart-item{ display:flex; gap:13px; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-item img{ width:74px; height:74px; border-radius:10px; object-fit:cover; background:var(--panel); flex-shrink:0; }
.cart-item-mid{ flex:1; min-width:0; }
.cart-item-name{ font-size:13.5px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cart-item-code{ font-size:11.5px; color:var(--soft2); margin:3px 0 8px; }
.cart-qty{ display:inline-flex; align-items:center; border:1px solid var(--line2); border-radius:8px; overflow:hidden; }
.cart-qty button{ width:30px; height:30px; font-size:16px; color:var(--ink); }
.cart-qty button:hover{ background:var(--panel); }
.cart-qty span{ min-width:30px; text-align:center; font-size:14px; font-weight:600; }
.cart-item-right{ text-align:right; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; }
.cart-item-price{ font-weight:800; font-size:15px; white-space:nowrap; }
.cart-item-rm{ font-size:11.5px; color:var(--soft2); }
.cart-item-rm:hover{ color:var(--orange-d); text-decoration:underline; }
.cart-foot{ border-top:1px solid var(--line); padding:18px 22px calc(18px + env(safe-area-inset-bottom)); }
.cart-total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.cart-total span{ font-size:15px; color:var(--soft); }
.cart-total b{ font-size:24px; font-weight:800; }
.cart-checkout{ width:100%; height:52px; background:var(--green-cta); color:#fff; border-radius:12px; font-weight:700; font-size:15px; transition:.2s; }
.cart-checkout:hover{ background:var(--accent-d); }
/* промокод */
.promo-box{ margin-bottom:14px; }
.promo-row{ display:flex; gap:8px; }
.promo-row input{ flex:1; min-width:0; height:42px; padding:0 12px; border:1px solid var(--line2); border-radius:10px; font-size:14px; text-transform:uppercase; letter-spacing:.04em; background:#fff; }
.promo-row input:focus{ outline:none; border-color:var(--ink); }
.promo-row button{ height:42px; padding:0 16px; border-radius:10px; border:1px solid var(--ink); font-size:13.5px; font-weight:600; color:var(--ink); background:#fff; transition:.2s; }
.promo-row button:hover{ background:var(--ink); color:#fff; }
.promo-msg{ margin-top:7px; font-size:12.5px; line-height:1.4; color:var(--orange-d); }
.promo-on{ display:flex; justify-content:space-between; align-items:center; gap:10px; background:#eef5ee; color:#2e5a35; border-radius:10px; padding:10px 12px; font-size:13px; }
.promo-on b{ letter-spacing:.04em; }
.promo-on button{ font-size:12px; color:var(--soft); text-decoration:underline; }
.promo-on button:hover{ color:var(--ink); }
.cart-disc{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; font-size:14px; color:#2e5a35; }
.cart-disc b{ font-weight:700; }
.co-summary .promo-box{ margin:6px 0 14px; }
.co-summary .cart-disc{ margin:0 0 10px; }
.cart-continue{ width:100%; height:42px; margin-top:8px; font-size:13.5px; color:var(--soft); }
.cart-continue:hover{ color:var(--ink); }

/* ─── оформление (модалка) ─── */
.co{ position:fixed; inset:0; z-index:110; display:grid; place-items:center; padding:20px; }
.co[hidden]{ display:none; }
.co-back{ position:absolute; inset:0; background:rgba(20,18,14,.5); backdrop-filter:blur(3px); opacity:0; transition:.3s; }
.co.on .co-back{ opacity:1; }
.co-card{ position:relative; background:#fff; border-radius:18px; width:100%; max-width:860px; max-height:92vh; overflow:auto;
  transform:translateY(16px) scale(.98); opacity:0; transition:.3s; }
.co.on .co-card{ transform:none; opacity:1; }
.co-x{ position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.9); display:grid; place-items:center; z-index:3; font-size:15px; color:var(--soft); }
.co-x:hover{ background:var(--panel); color:var(--ink); }
.co-grid{ display:grid; grid-template-columns:1fr 300px; }
/* «Ваш заказ» остаётся на виду, пока прокручивается длинная форма: без этого
   у кнопки «Оформить» справа была пустая колонка. Фон колонки рисует сетка,
   потому что сам блок теперь высотой со своё содержимое. */
@media(min-width:721px){
  .co-grid{ background:linear-gradient(to right, transparent calc(100% - 300px), var(--line) calc(100% - 300px), var(--line) calc(100% - 299px), var(--panel) calc(100% - 299px)); }
  .co-summary{ position:sticky; top:0; align-self:start; border-left:none; background:transparent; }
}
.co-form{ padding:30px 32px; }
.co-form h2{ font-size:24px; font-weight:800; margin-bottom:20px; }
.co-field{ margin-bottom:14px; }
.co-field label{ display:block; font-size:12.5px; font-weight:600; color:#43423c; margin-bottom:6px; }
.co-field label i{ color:var(--orange); font-style:normal; }
.co-hint-inline{ font-weight:400; color:var(--soft2); }
.co-field input,.co-field select,.co-field textarea{
  width:100%; border:1.5px solid var(--line2); border-radius:10px; padding:11px 13px; font-size:14px; color:var(--ink); background:#fff; transition:.15s;
}
.co-field input:focus,.co-field select:focus,.co-field textarea:focus{ outline:none; border-color:var(--ink); }
.co-field textarea{ resize:vertical; }
.co-2{ display:grid; grid-template-columns:1fr 120px; gap:10px; }
.co-label{ font-size:12.5px; font-weight:700; margin:18px 0 9px; }
.co-seg{ display:flex; gap:8px; margin-bottom:14px; }
.co-seg button{ flex:1; height:42px; border:1.5px solid var(--line2); border-radius:10px; font-weight:600; font-size:13.5px; color:#43423c; transition:.15s; }
.co-seg button.on{ border-color:var(--ink); background:var(--ink); color:#fff; }
/* Объяснение, почему деньги не берут сразу. Стоит над выбором способа:
   покупатель должен прочитать его до того, как выберет, а не после. */
.co-paynote{ font-size:12px; line-height:1.5; color:var(--soft); background:#fbfbf9;
  border-left:2px solid var(--line2); border-radius:0 8px 8px 0; padding:10px 12px; margin:0 0 12px; }

.co-pay{ display:flex; gap:11px; align-items:flex-start; border:1.5px solid var(--line2); border-radius:12px; padding:13px 14px; margin-bottom:9px; cursor:pointer; transition:.15s; }
.co-pay:hover{ border-color:var(--soft2); }
.co-pay:has(input:checked){ border-color:var(--ink); background:#fbfbf9; }
.co-pay input{ width:18px; height:18px; margin-top:1px; accent-color:var(--ink); flex-shrink:0; }
.co-pay span{ display:flex; flex-direction:column; gap:3px; }
.co-pay b{ font-size:13.5px; font-weight:700; }
.co-pay i{ font-style:normal; font-size:11.5px; color:var(--soft); line-height:1.4; }
.co-consent{ display:flex; gap:9px; align-items:center; margin:14px 0; font-size:12.5px; color:#43423c; cursor:pointer; }
.co-consent input{ width:16px; height:16px; accent-color:var(--ink); }
.co-err{ background:#fdeee6; color:var(--orange-d); font-size:13px; font-weight:600; padding:10px 14px; border-radius:9px; margin-bottom:12px; }
.co-submit{ width:100%; height:54px; background:var(--accent); color:#fff; border-radius:12px; font-weight:700; font-size:15.5px; transition:.2s; }
.co-submit:hover{ background:var(--accent-d); }
.co-submit:disabled{ opacity:.6; cursor:default; }
.co-summary{ background:var(--panel); padding:30px 26px; border-left:1px solid var(--line); }
.co-summary>b{ font-size:15px; font-weight:800; display:block; margin-bottom:14px; }
.co-rows{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.co-row{ display:flex; justify-content:space-between; gap:10px; font-size:13px; }
.co-row span{ color:#43423c; }
.co-row i{ font-style:normal; color:var(--soft2); }
.co-row b{ white-space:nowrap; font-weight:700; }
.co-sumtotal{ display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; border-top:1px solid var(--line2); }
.co-sumtotal span{ font-size:14px; color:var(--soft); }
.co-sumtotal b{ font-size:22px; font-weight:800; }
.co-trust{ margin-top:18px; font-size:11.5px; color:var(--soft); line-height:1.7; }
/* успех */
.co-done{ padding:54px 40px; text-align:center; }
.co-check{ width:70px; height:70px; border-radius:50%; background:var(--green); color:#fff; font-size:36px; display:grid; place-items:center; margin:0 auto 22px; }
.co-done h2{ font-size:24px; font-weight:800; margin-bottom:10px; }
.co-done p{ color:var(--soft); font-size:15px; line-height:1.5; max-width:38ch; margin:0 auto 26px; }
.co-done .co-submit{ max-width:240px; margin:0 auto; }

@media(max-width:720px){
  .co-grid{ grid-template-columns:1fr; }
  .co-summary{ border-left:none; border-top:1px solid var(--line); order:-1; }
  .co-form{ padding:24px 20px; }
  .cart-drawer{ width:100%; max-width:100%; }
}

/* мобайл: липкая кнопка оформления + компактная сводка */
@media(max-width:720px){
  .co-card{ display:flex; flex-direction:column; }
  .co-form{ padding-bottom:80px; }
  .co-submit{ position:sticky; bottom:0; margin-bottom:0; box-shadow:0 -10px 24px rgba(255,255,255,.9); }
}
/* кликабельный тост */
.toast u{ text-decoration:underline; cursor:pointer; }
.toast{ cursor:default; }