/* ══════════════════════════════════════════════════════════════════════
   cart.css — หน้าที่เป็น PHP ของระบบตะกร้า
   โหลดต่อจาก style.css และ shop.css · ทุกคลาสขึ้นต้นด้วย ck-
   ══════════════════════════════════════════════════════════════════════ */

/* ── ลิงก์ตะกร้าบนแถบบน ─────────────────────────────────────────────── */
.ck-cartlink{
  display:inline-flex;align-items:center;gap:8px;position:relative;
  padding:8px 15px;border-radius:999px;font-size:14px;font-weight:700;
  background:var(--sh-blue,#1d4ed8);color:#fff;text-decoration:none;white-space:nowrap;
}
.ck-cartlink:hover{text-decoration:none;color:#fff;filter:brightness(1.08)}
.ck-cartlink svg{width:17px;height:17px;flex:0 0 auto}
.ck-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:21px;height:21px;padding:0 6px;border-radius:999px;
  background:#fff;color:var(--sh-blue,#1d4ed8);font-size:12.5px;font-weight:700;
}

/* ── ปุ่มใส่ตะกร้าบนหน้าสินค้าเดิม ───────────────────────────────────── */
.ck-buy{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin:18px 0 0;padding:16px;border-radius:14px;
  background:#fff;border:1px solid var(--line);
}
.ck-buy-price{display:flex;align-items:baseline;gap:6px;font-weight:700;color:var(--accent)}
.ck-buy-price b{font-size:26px;letter-spacing:-.5px}
.ck-buy-price span{font-size:14px;color:var(--mut);font-weight:600}
.ck-buy form{margin:0;margin-left:auto}
.ck-add{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:11px;border:0;cursor:pointer;
  font-family:inherit;font-size:15.5px;font-weight:700;line-height:1.3;
  background:var(--accent);color:#fff;
}
.ck-add:hover{filter:brightness(1.08)}
.ck-add svg{width:18px;height:18px}
@media (max-width:560px){ .ck-buy form{margin-left:0;width:100%} .ck-add{width:100%} }

/* ── แถบแจ้งผล ──────────────────────────────────────────────────────── */
.ck-alert{
  margin:0 0 20px;padding:14px 16px;border-radius:12px;
  font-size:15px;line-height:1.7;font-weight:600;
}
.ck-alert-ok{background:#e8f6ed;border:1px solid #bfe3cd;color:#14663a}
.ck-alert-bad{background:#fdecec;border:1px solid #f3c9c9;color:#a02222}
.ck-alert-warn{background:#fff4e0;border:1px solid #f3ddb4;color:#9a5b00}
.ck-alert-warn a{color:#9a5b00;text-decoration:underline}

/* ── ตะกร้าว่าง ─────────────────────────────────────────────────────── */
.ck-empty{
  background:#fff;border:1px dashed var(--sh-ring,#dbe4f2);border-radius:16px;
  padding:38px 20px;text-align:center;
}
.ck-empty p{margin:0 0 6px;font-size:15.5px;line-height:1.74;color:var(--mut)}
.ck-empty p b{color:var(--ink);font-size:18px}

/* ── รายการในตะกร้า ─────────────────────────────────────────────────── */
.ck-list{display:grid;gap:12px}
.ck-row{
  display:grid;gap:12px;align-items:center;
  grid-template-columns:64px 1fr auto;
  grid-template-areas:"pic info rm" "qty qty line";
  background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:14px;padding:14px;
}
.ck-pic{grid-area:pic;width:64px;height:64px;border-radius:10px;overflow:hidden;
  background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
.ck-pic img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.ck-nopic{color:var(--accent);opacity:.6}
.ck-nopic svg{width:28px;height:28px}
.ck-info{grid-area:info;min-width:0}
.ck-info h2{margin:0;font-size:16px;font-weight:700;line-height:1.45}
.ck-info h2 a{color:var(--ink)}
.ck-info h2 a:hover{color:var(--accent)}
.ck-unit{margin:3px 0 0;font-size:13.5px;color:var(--mut)}
.ck-qty{grid-area:qty}
.ck-qty input{
  width:84px;padding:9px 10px;border-radius:9px;border:1px solid var(--line);
  font-family:inherit;font-size:15px;text-align:center;background:#fff;color:var(--ink);
}
.ck-line{grid-area:line;text-align:right;font-size:14px;color:var(--mut);white-space:nowrap}
.ck-line b{font-size:19px;color:var(--ink);font-weight:700}
.ck-rm{grid-area:rm}
.ck-x{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:#fff;color:#9aa7ba;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;
}
.ck-x:hover{border-color:#e0a0a0;color:#c33}
.ck-x svg{width:16px;height:16px}

@media (min-width:700px){
  .ck-row{grid-template-columns:72px 1fr 110px 140px 44px;
    grid-template-areas:"pic info qty line rm"}
  .ck-pic{width:72px;height:72px}
}

/* ── กล่องสรุปยอด ───────────────────────────────────────────────────── */
.ck-sum{
  margin-top:18px;background:var(--sh-ice-2,#f6f9fd);
  border:1px solid var(--sh-ring,#dbe4f2);border-radius:16px;padding:18px;
}
.ck-sum-rows{display:grid;gap:9px;max-width:420px;margin-left:auto}
.ck-sum-rows div{display:flex;justify-content:space-between;gap:16px;
  font-size:15px;color:var(--ink-2)}
.ck-sum-rows b{color:var(--ink);font-weight:700}
.ck-free{color:#15803d}
.ck-grand{padding-top:10px;border-top:1px solid var(--sh-ring,#dbe4f2);font-size:17px}
.ck-grand b{font-size:24px;color:var(--accent);letter-spacing:-.5px}
.ck-shipnote{margin:14px 0 0;font-size:13.5px;line-height:1.7;color:var(--mut);text-align:right}
.ck-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:18px}
.ck-acts .sh-btn{cursor:pointer;font-family:inherit}
@media (max-width:560px){
  .ck-sum-rows{margin-left:0}
  .ck-shipnote{text-align:left}
  .ck-acts{justify-content:stretch}
  .ck-acts .sh-btn{flex:1 1 100%}
}

.ck-clear{margin-top:14px;text-align:right}
.ck-clear button{
  background:none;border:0;padding:6px;cursor:pointer;font-family:inherit;
  font-size:13.5px;color:var(--mut);text-decoration:underline;
}
.ck-clear button:hover{color:#c33}

.ck-help{margin:26px 0 0;font-size:14.5px;line-height:1.74;color:var(--mut);text-align:center}

/* ── ชวนไปออกใบเสนอราคา อยู่ใต้ปุ่มไปหน้าสั่งซื้อ ────────────────────── */
.ck-quotelink{
  margin:15px 0 0;padding-top:14px;border-top:1px solid var(--sh-ring,#dbe4f2);
  font-size:13.8px;line-height:1.74;color:var(--mut);text-align:right;
}
@media (max-width:560px){ .ck-quotelink{text-align:left} }