/* Login Shop design layer — cart (P1) and order confirmation (Q1). Part of module loginshopdesign. */
:root { --lsk-g: #059669; --lsk-gd: #047857; --lsk-g50: #ecfdf5; --lsk-o: #ea580c; --lsk-o50: #fff7ed; --lsk-ink: #0f172a; --lsk-mu: #64748b; --lsk-li: #e2e8f0;
  --lsk-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --lsk-display: 'Plus Jakarta Sans', 'Inter', sans-serif; }

/* until the page is rebuilt: hide the original content (shown again after 3 s if the script fails) */
@keyframes lskShow { to { visibility: visible; } }
body#cart #main > *, body#order-confirmation #content-hook_order_confirmation, body#order-confirmation #main > #content { visibility: hidden; animation: lskShow 0s 3s forwards; }
html.lsk-failed body#cart #main > *, html.lsk-failed body#order-confirmation #content-hook_order_confirmation, html.lsk-failed body#order-confirmation #main > #content { visibility: visible; animation: none; }
html.lsk-ready .lsk-hidden { display: none !important; }
body#cart #main > .lsk, body#order-confirmation #main > .lsk { visibility: visible; animation: none; }

.lsk { font-family: var(--lsk-font); color: var(--lsk-ink); -webkit-font-smoothing: antialiased; margin: 8px 0 40px; transition: opacity .2s; }
.lsk.is-busy { opacity: .55; pointer-events: none; }
.lsk * { box-sizing: border-box; }
.lsk svg { fill: none !important; flex: none; }
.lsk a { text-decoration: none !important; }
.lsk h1, .lsk h2, .lsk h3 { font-family: var(--lsk-display) !important; text-transform: none !important; letter-spacing: -.02em; margin: 0; color: var(--lsk-ink); }
.lsk-g { color: var(--lsk-g) !important; }
.lsk-th { flex: none; width: 84px; height: 84px; border-radius: 12px; background: #f8fafc; border: 1px solid #f1f5f9; display: grid; place-items: center; color: #cbd5e1; overflow: hidden; }
.lsk-th img { width: 100%; height: 100%; object-fit: cover; }
.lsk-logo { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--lsk-li); flex: none; }
.lsk-ini { width: 34px; height: 34px; border-radius: 10px; color: #fff; display: grid; place-items: center; font: 800 12px/1 var(--lsk-font); font-style: normal; flex: none; }

/* ---------- cart ---------- */
.lsk-ttl { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.lsk-ttl h1 { font-size: 26px; }
.lsk-ttl span { color: var(--lsk-mu); font-size: 14px; }
.lsk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; align-items: start; }
.lsk-left { min-width: 0; }
.lsk-free { background: var(--lsk-g50); border: 1px solid #a7f3d0; border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--lsk-gd); margin-bottom: 16px; }
.lsk-free svg { vertical-align: -4px; margin-right: 4px; }
.lsk-bar { height: 6px; border-radius: 6px; background: #d1fae5; margin-top: 8px; overflow: hidden; }
.lsk-bar i { display: block; height: 100%; background: var(--lsk-g); border-radius: 6px; }
.lsk-shop { background: #fff; border: 1px solid #eef0f4; border-radius: 16px; margin-bottom: 16px; overflow: hidden; }
.lsk-shop > header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #f1f5f9; background: #fbfcfe; }
.lsk-shop > header p { margin: 0; min-width: 0; }
.lsk-shop > header b { font-size: 15px; display: block; }
.lsk-shop > header small { color: var(--lsk-mu); font-size: 12px; display: block; }
.lsk-shop > header em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--lsk-gd); background: var(--lsk-g50); border-radius: 99px; padding: 4px 10px; white-space: nowrap; }
.lsk-it { display: flex; gap: 16px; align-items: center; padding: 16px 18px; }
.lsk-it + .lsk-it { border-top: 1px solid #f1f5f9; }
.lsk-nm { flex: 1; min-width: 0; }
.lsk-nm > a { display: block; font: 700 15px/1.3 var(--lsk-font); color: var(--lsk-ink) !important; }
.lsk-nm > a:hover { color: var(--lsk-g) !important; }
.lsk-nm small { display: block; color: var(--lsk-mu); font-size: 13px; margin-top: 2px; }
.lsk-unit { margin-top: 6px; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lsk-unit s { color: #94a3b8; font-size: 12px; }
.lsk-off { background: #fee2e2; color: #dc2626; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 6px; }
.lsk-qty { display: inline-flex; align-items: center; border: 1px solid var(--lsk-li); border-radius: 10px; height: 36px; overflow: hidden; background: #fff; flex: none; }
.lsk-qty a { width: 34px; height: 100%; display: grid; place-items: center; color: #475569 !important; }
.lsk-qty a:hover { background: #f1f5f9; color: var(--lsk-g) !important; }
.lsk-qty em { font-style: normal; font-weight: 700; font-size: 14px; min-width: 30px; text-align: center; }
.lsk-pr { width: 120px; text-align: right; font: 800 16px/1.2 var(--lsk-display); white-space: nowrap; flex: none; }
.lsk-x { color: #94a3b8 !important; flex: none; padding: 4px; }
.lsk-x:hover { color: #dc2626 !important; }
.lsk-back { display: inline-flex; align-items: center; gap: 6px; color: var(--lsk-g) !important; font-weight: 600; font-size: 14px; }
.lsk-sum { background: #fff; border: 1px solid #eef0f4; border-radius: 16px; padding: 22px; box-shadow: 0 14px 40px -30px rgba(15,23,42,.35); position: sticky; top: 16px; }
.lsk-sum h3 { font-size: 18px; margin-bottom: 14px !important; }
.lsk-sl { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #334155; padding: 6px 0; }
.lsk-sl b { color: var(--lsk-ink); white-space: nowrap; }
.lsk-sl.lsk-t { border-top: 1px solid var(--lsk-li); margin-top: 8px; padding-top: 14px; font-size: 16px; align-items: baseline; }
.lsk-sl.lsk-t b { font: 800 22px/1.1 var(--lsk-display); }
.lsk-rm { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #f1f5f9; color: #64748b !important; font-size: 13px; margin-left: 4px; }
.lsk-promo { display: flex; gap: 8px; margin: 14px 0; }
.lsk-promo input { flex: 1; min-width: 0; height: 42px; border: 1px solid var(--lsk-li) !important; border-radius: 10px !important; padding: 0 12px !important; font: 500 13px var(--lsk-font); box-shadow: none !important; background: #fff; }
.lsk-promo input:focus { border-color: var(--lsk-g) !important; outline: 0; box-shadow: 0 0 0 3px rgba(5,150,105,.12) !important; }
.lsk-promo button { height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: #0f172a; color: #fff; font: 700 13px var(--lsk-font); cursor: pointer; }
.lsk-big { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 12px; background: var(--lsk-o); color: #fff !important; font: 700 16px/1 var(--lsk-font); margin-top: 6px; box-shadow: 0 12px 24px -14px rgba(234,88,12,.8); transition: background .15s; }
.lsk-big:hover { background: #c2410c; }
.lsk-ok { list-style: none; padding: 0; margin: 16px 0 0; }
.lsk-ok li { display: flex; gap: 10px; align-items: center; font-size: 13px; color: #475569; padding: 5px 0; }
.lsk-ok li svg { color: var(--lsk-g); }
.lsk-empty { text-align: center; background: #fff; border: 1px solid #eef0f4; border-radius: 18px; padding: 44px 20px; color: var(--lsk-mu); }
.lsk-empty svg { color: #cbd5e1; }
.lsk-empty h1 { font-size: 24px; margin: 12px 0 6px; }
.lsk-empty .lsk-big { display: inline-flex; padding: 0 24px; margin-top: 12px; }
.lsk-reco h3 { font-size: 18px; margin: 28px 0 14px !important; }
.lsk-rg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lsk-rc { background: #fff; border: 1px solid #eef0f4; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; }
.lsk-rc .lsk-th { width: 100%; height: 160px; background: #fff; }
.lsk-rc .lsk-th img { object-fit: contain; }
.lsk-rn { display: block; font: 700 13px/1.35 var(--lsk-font); color: var(--lsk-ink) !important; margin: 10px 0 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lsk-rc small { color: var(--lsk-mu); font-size: 12px; }
.lsk-rp { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; }
.lsk-rp b { font: 800 15px var(--lsk-display); }
.lsk-rp a { width: 32px; height: 32px; border-radius: 9px; background: var(--lsk-g); color: #fff !important; display: grid; place-items: center; }

/* ---------- order confirmation ---------- */
.lsk-hero { display: flex; gap: 22px; align-items: center; background: linear-gradient(120deg, #047857, #059669 60%, #10b981); color: #ecfdf5; border-radius: 20px; padding: 28px 32px; margin-bottom: 22px; }
.lsk-ck { width: 66px; height: 66px; border-radius: 50%; background: #fff; color: var(--lsk-g); display: grid; place-items: center; flex: none; }
.lsk-hero h1 { color: #fff !important; font-size: 26px; }
.lsk-hero p { margin: 6px 0 0; font-size: 14px; color: #d1fae5; }
.lsk-ref { margin-left: auto; text-align: right; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 12px 18px; flex: none; }
.lsk-ref small { display: block; font-size: 12px; color: #d1fae5; }
.lsk-ref b { font: 800 20px var(--lsk-display); color: #fff; letter-spacing: .04em; }
.lsk-grid--ok { grid-template-columns: minmax(0, 1fr) 380px; }
.lsk-box { background: #fff; border: 1px solid #eef0f4; border-radius: 16px; padding: 22px; margin-bottom: 18px; }
.lsk-box h3 { font-size: 17px; margin-bottom: 14px !important; display: flex; align-items: center; gap: 10px; }
.lsk-cancel { font-style: normal; font-size: 12px; font-weight: 700; color: #dc2626; background: #fee2e2; border-radius: 99px; padding: 3px 10px; font-family: var(--lsk-font); }
.lsk-tl { display: flex; justify-content: space-between; position: relative; margin: 4px 6px 6px; }
.lsk-tl::before, .lsk-tl::after { content: ""; position: absolute; left: 40px; right: 40px; top: 13px; height: 3px; background: var(--lsk-li); }
.lsk-tl::after { right: auto; width: calc((100% - 80px) * var(--lsk-pct) / 100); background: var(--lsk-g); }
.lsk-tl > div { position: relative; z-index: 1; text-align: center; font-size: 12px; color: var(--lsk-mu); width: 80px; }
.lsk-tl i { display: grid; place-items: center; margin: 0 auto 6px; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--lsk-li); font-style: normal; font-size: 12px; }
.lsk-tl .is-done { color: var(--lsk-ink); font-weight: 700; }
.lsk-tl .is-done i { background: var(--lsk-g); border-color: var(--lsk-g); color: #fff; }
.lsk-pk { border: 1px solid #eef0f4; border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.lsk-pk > header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fbfcfe; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.lsk-pk > header .lsk-ini, .lsk-pk > header .lsk-logo { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.lsk-pk > header em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: #6d28d9; background: #ede9fe; border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.lsk-li { display: flex; gap: 14px; align-items: center; padding: 10px 14px; font-size: 14px; }
.lsk-li + .lsk-li { border-top: 1px solid #f8fafc; }
.lsk-li .lsk-th { width: 56px; height: 56px; }
.lsk-li p { margin: 0; min-width: 0; }
.lsk-li b { display: block; }
.lsk-li small { color: var(--lsk-mu); font-size: 12px; }
.lsk-li strong { margin-left: auto; font: 800 15px var(--lsk-display); white-space: nowrap; }
.lsk-kv { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.lsk-kv:last-child { border: 0; }
.lsk-kv span { color: var(--lsk-mu); }
.lsk-kv b { text-align: right; }
.lsk-kv.lsk-t span { color: var(--lsk-ink); font-weight: 700; }
.lsk-kv.lsk-t b { font: 800 20px var(--lsk-display); }
.lsk-right { min-width: 0; }
.lsk-note { display: flex; gap: 12px; align-items: flex-start; background: var(--lsk-o50); border: 1px solid #fed7aa; border-radius: 12px; padding: 14px; font-size: 13px; color: #9a3412; margin-bottom: 18px; }
.lsk-note svg { color: var(--lsk-o); }
.lsk-note p { margin: 0; }
.lsk-btns { display: grid; gap: 10px; }
.lsk-b2 { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 12px; font: 700 14px var(--lsk-font); border: 1px solid var(--lsk-li); background: #fff; color: var(--lsk-ink) !important; cursor: pointer; }
.lsk-b2.is-g { background: var(--lsk-g); border-color: var(--lsk-g); color: #fff !important; }
.lsk-b2.is-g:hover { background: var(--lsk-gd); }
.lsk-b2.is-plain { border: 0; background: transparent; color: var(--lsk-mu) !important; }
@media print {
  body#order-confirmation #header, body#order-confirmation #footer, .lsk-btns, .lsk-note { display: none !important; }
  .lsk-hero { color: #000; background: none; border: 1px solid #ccc; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) { .lsk-grid, .lsk-grid--ok { grid-template-columns: minmax(0, 1fr) 320px; } .lsk-rg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .lsk-grid, .lsk-grid--ok { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lsk-sum { position: static; }
  .lsk-hero { flex-wrap: wrap; padding: 22px 18px; gap: 14px; }
  .lsk-hero h1 { font-size: 21px; }
  .lsk-ref { margin-left: 0; text-align: left; }
  .lsk-ck { width: 52px; height: 52px; }
}
@media (max-width: 600px) {
  .lsk-it { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .lsk-it .lsk-th { width: 72px; height: 72px; }
  .lsk-nm { flex: 1 1 calc(100% - 90px); }
  .lsk-qty { margin-left: 0; }
  .lsk-pr { width: auto; margin-left: auto; }
  .lsk-tl > div { width: 64px; font-size: 11px; }
  .lsk-tl::before, .lsk-tl::after { left: 32px; right: 32px; }
  .lsk-tl::after { width: calc((100% - 64px) * var(--lsk-pct) / 100); }
}