/* ===== Sepet Sayfası ===== */

@keyframes item-in {
  from { opacity:0; transform:translateY(14px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes price-flash {
  0%,100% { opacity:1 }
  40%      { opacity:.45; color:var(--blue) }
}
@keyframes bar-grow {
  from { width:0 }
}

/* ── Page shell ─────────────────────────────────────────── */
.sp-page { padding:36px 0 96px; min-height:68vh }

.sp-header { margin-bottom:36px }
.sp-header h1 {
  font-size:36px; font-weight:800; letter-spacing:-.025em; color:var(--ink);
  display:flex; align-items:center; gap:14px;
}
.sp-header h1 .item-badge {
  font-size:14px; font-weight:800; letter-spacing:.04em;
  background:var(--blue); color:#fff;
  padding:4px 11px; border-radius:99px;
  font-family:'Manrope', sans-serif;
  transform:translateY(-2px);
}
.sp-breadcrumb {
  font-size:12px; color:var(--muted); margin-top:6px; letter-spacing:.02em;
}
.sp-breadcrumb a:hover { color:var(--blue) }
.sp-breadcrumb .sep { margin:0 7px; opacity:.4 }

/* ── Two-column layout ──────────────────────────────────── */
.sp-layout {
  display:grid;
  grid-template-columns:1fr 368px;
  gap:28px;
  align-items:start;
}

/* ── Cart item list ─────────────────────────────────────── */
.sp-items-col { display:grid; gap:0 }

/* Empty state */
.sp-empty {
  display:none;
  text-align:center;
  padding:72px 32px;
  border:1.5px dashed var(--line);
  border-radius:18px;
}
.sp-empty.visible { display:block }
.sp-empty-ico {
  width:68px; height:68px; border-radius:50%;
  background:var(--blue-50); color:var(--blue);
  display:grid; place-items:center; margin:0 auto 18px;
}
.sp-empty-ico svg { width:30px; height:30px }
.sp-empty h2 { font-size:22px; font-weight:800; letter-spacing:-.015em; margin-bottom:8px }
.sp-empty p { color:var(--muted); font-size:14px; max-width:34ch; margin-inline:auto; line-height:1.55 }
.sp-empty-cta {
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  background:var(--blue); color:#fff;
  padding:13px 24px; border-radius:12px;
  font-weight:800; font-size:14px;
  box-shadow:0 8px 20px -8px rgba(10,132,217,.5);
}

/* Item card */
.sp-item {
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 22px 20px;
  display:grid;
  grid-template-columns:100px 1fr;
  grid-template-rows:auto auto;
  column-gap:18px;
  row-gap:0;
  margin-bottom:10px;
  animation:item-in .35s ease both;
  transition:border-color .2s, box-shadow .2s, max-height .38s ease, opacity .25s ease, padding .3s ease, margin .3s ease;
  max-height:600px;
  overflow:hidden;
}
.sp-item:hover { border-color:var(--blue-100); box-shadow:0 4px 20px -8px rgba(10,132,217,.1) }
.sp-item.removing {
  max-height:0;
  opacity:0;
  padding-top:0; padding-bottom:0;
  margin-bottom:0;
  border-color:transparent;
}

/* Product preview — CSS card mockup */
.sp-preview {
  grid-row:1 / 3;
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}
.sp-stage {
  width:100px; height:73px;
  border-radius:10px;
  background:linear-gradient(160deg, #e8f4fc 0%, #cce4f5 100%);
  border:1px solid var(--blue-100);
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  flex-shrink:0;
  cursor:zoom-in;
}
.sp-zoom-btn {
  position:absolute; bottom:5px; right:5px; z-index:10;
  width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid rgba(10,132,217,.2);
  display:grid; place-items:center;
  cursor:zoom-in; padding:0;
  box-shadow:0 2px 6px rgba(13,30,57,.15);
  transition:background .15s, box-shadow .15s;
}
.sp-zoom-btn:hover { background:#fff; box-shadow:0 3px 10px rgba(10,132,217,.25) }
.sp-zoom-btn svg { width:11px; height:11px; color:var(--blue); flex-shrink:0 }
.sp-stage::before {
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg, rgba(10,132,217,.05) 0 1px, transparent 1px 9px);
}
.sp-card {
  width:62%; aspect-ratio:8.5/5.5;
  border-radius:5px; background:#fff;
  position:relative; overflow:hidden; z-index:1;
  box-shadow:0 6px 16px -8px rgba(13,30,57,.32),0 2px 0 #d6eaf7,0 4px 0 #c4dff2;
  transform:rotate(-6deg);
}
.sp-card .sc-band { position:absolute;left:0;top:0;bottom:0;width:34%;background:var(--blue) }
.sp-card .sc-lines {
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  display:flex; flex-direction:column; gap:3px; align-items:flex-end;
}
.sp-card .sc-lines span {
  display:block; border-radius:1px; background:var(--line);
}
.sp-card .sc-lines span:nth-child(1) { width:28px;height:2.5px;background:var(--ink) }
.sp-card .sc-lines span:nth-child(2) { width:20px;height:1.5px }
.sp-card .sc-lines span:nth-child(3) { width:22px;height:1.5px }

.sp-qty-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:800; letter-spacing:.04em;
  color:var(--blue); background:var(--blue-50);
  border:1px solid var(--blue-100);
  padding:3px 8px; border-radius:5px;
  white-space:nowrap;
}

/* Item details */
.sp-details {
  padding-top:2px;
  min-width:0;
}
.sp-name {
  font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.01em;
  margin-bottom:3px;
}
.sp-sub {
  font-size:12px; font-weight:500; color:var(--muted); line-height:1.4;
}

/* Specs accordion */
.sp-specs-row { margin-top:10px }
.sp-specs-btn {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:700; color:var(--blue);
  background:none; border:0; padding:0; cursor:pointer;
  transition:color .15s;
}
.sp-specs-btn:hover { color:var(--blue-700) }
.sp-specs-btn .chev { width:13px;height:13px; transition:transform .2s }
.sp-specs-btn.open .chev { transform:rotate(180deg) }
.sp-specs-body {
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .2s ease;
}
.sp-specs-body.open { grid-template-rows:1fr }
.sp-specs-inner { overflow:hidden; padding-top:0 }
.sp-specs-body.open .sp-specs-inner { padding-top:10px }
.sp-specs-table { width:100%; border-collapse:collapse; font-size:12px }
.sp-specs-table tr { border-bottom:1px solid var(--line-2) }
.sp-specs-table tr:last-child { border:0 }
.sp-specs-table td { padding:5px 0; font-weight:500; color:var(--ink-2) }
.sp-specs-table td:last-child { text-align:right; color:var(--muted); padding-left:8px }

/* Actions + price row */
.sp-foot {
  grid-column:2;
  display:flex; align-items:center; gap:0; margin-top:14px;
  border-top:1px solid var(--line-2); padding-top:14px;
}
.sp-qty-wrap {
  display:flex; align-items:center; gap:6px; flex:1;
}
.sp-qty-label {
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.sp-qty-select {
  appearance:none;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B82' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 9px center;
  background-size:14px;
  border:1.5px solid var(--line); border-radius:8px;
  padding:7px 30px 7px 11px;
  font:700 13px 'Manrope', sans-serif; color:var(--ink);
  cursor:pointer; min-width:128px;
  transition:border-color .15s;
}
.sp-qty-select:hover { border-color:var(--blue-100) }
.sp-qty-select:focus { outline:none; border-color:var(--blue) }

.sp-links { display:flex; align-items:center; gap:16px; margin-left:8px }
.sp-link-btn {
  font-size:12px; font-weight:700; color:var(--muted);
  background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
  transition:color .15s; white-space:nowrap;
}
.sp-link-btn svg { width:12px; height:12px; flex-shrink:0 }
.sp-link-btn:hover { color:var(--ink) }
.sp-link-btn.del:hover { color:var(--red) }

.sp-price-col { text-align:right; margin-left:auto; padding-left:14px; white-space:nowrap }
.sp-unit-p { font-size:11px; color:var(--muted); font-weight:600; margin-bottom:2px }
.sp-total-p {
  font-family:'JetBrains Mono', monospace;
  font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1;
  transition:color .2s;
}
.sp-total-p.flash { animation:price-flash .4s ease }
.sp-kdv { font-size:10px; color:var(--muted); margin-top:3px; font-weight:600 }

/* Continue link */
.sp-continue {
  display:inline-flex; align-items:center; gap:7px; margin-top:18px;
  font-size:13px; font-weight:700; color:var(--blue);
}
.sp-continue:hover { text-decoration:underline; text-underline-offset:3px }
.sp-continue svg { width:15px;height:15px }

/* ── Order Summary ───────────────────────────────────────── */
.sp-summary {
  position:sticky; top:88px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 32px -16px rgba(13,30,57,.12);
}

.ss-head {
  padding:20px 22px 16px;
  border-bottom:1px solid var(--line-2);
}
.ss-head h2 { font-size:17px; font-weight:800; letter-spacing:-.01em }
.ss-head .ss-count { font-size:12px; color:var(--muted); font-weight:600; margin-top:2px }

.ss-body { padding:18px 22px 0 }

/* Line rows */
.ss-row {
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13.5px; margin-bottom:10px; gap:12px;
}
.ss-row .ss-lbl { color:var(--muted); font-weight:500; flex-shrink:0 }
.ss-row .ss-val { font-weight:700; color:var(--ink); text-align:right }
.ss-row .ss-val.mono { font-family:'JetBrains Mono', monospace; font-size:14px; letter-spacing:-.01em }
.ss-row .ss-val.green { color:var(--green) }

.ss-divider { border:0; border-top:1px solid var(--line); margin:12px 0 }

.ss-total-row {
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:3px;
}
.ss-total-lbl { font-size:16px; font-weight:800; color:var(--ink) }
.ss-total-val {
  font-family:'JetBrains Mono', monospace;
  font-size:28px; font-weight:600; letter-spacing:-.025em; color:var(--ink); line-height:1;
}
.ss-total-val sub { font-size:13px; font-weight:600; color:var(--muted); vertical-align:baseline; margin-left:2px }
.ss-kdv-note { font-size:11px; color:var(--muted); font-weight:600; margin-bottom:16px }

/* Free shipping bar */
.ss-freeship {
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:10px; padding:11px 13px; margin-bottom:14px;
}
.ss-fs-label {
  display:flex; align-items:flex-start; gap:7px;
  font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:8px; line-height:1.4;
}
.ss-fs-label svg { width:14px; height:14px; color:var(--green); flex-shrink:0; margin-top:1px }
.ss-fs-track { height:6px; border-radius:3px; background:var(--line); overflow:hidden }
.ss-fs-fill {
  height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--blue) 0%, #3FA9FF 100%);
  width:0;
  transition:width 1s cubic-bezier(.34,1.2,.64,1);
}
.ss-fs-note { font-size:11px; color:var(--muted); margin-top:6px; font-weight:500 }

/* Promo code */
.ss-promo { margin-bottom:14px; border-top:1px solid var(--line-2); padding-top:14px }
.ss-promo-toggle {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  font-size:13px; font-weight:700; color:var(--ink);
  background:none; border:0; cursor:pointer; padding:0;
  transition:color .15s;
}
.ss-promo-toggle:hover { color:var(--blue) }
.ss-promo-toggle .ptchev { width:16px;height:16px;color:var(--muted);transition:transform .2s }
.ss-promo-toggle.open .ptchev { transform:rotate(180deg) }
.ss-promo-body {
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .2s ease;
}
.ss-promo-body.open { grid-template-rows:1fr }
.ss-promo-inner { overflow:hidden }
.ss-promo-body.open .ss-promo-inner { padding-top:10px }
.ss-promo-row { display:flex; gap:7px }
.ss-promo-input {
  flex:1; border:1.5px solid var(--line); border-radius:9px;
  padding:10px 12px; font:600 13px 'Manrope',sans-serif; color:var(--ink);
  transition:border-color .15s;
}
.ss-promo-input:focus { outline:none; border-color:var(--blue) }
.ss-promo-input::placeholder { color:var(--muted-2) }
.ss-promo-btn {
  background:var(--ink); color:#fff; border:0; border-radius:9px;
  padding:10px 16px; font:700 13px 'Manrope',sans-serif; cursor:pointer;
  transition:background .15s; white-space:nowrap;
}
.ss-promo-btn:hover { background:var(--ink-2) }

/* Promo: has coupon */
.ss-promo-toggle.has-coupon { color:var(--green) }
.ss-promo-toggle.has-coupon .ptchev { display:none }

/* Promo: error */
.ss-promo-error { font-size:12px; color:#dc2626; margin-top:7px; display:none; font-weight:600 }
.ss-promo-input.error { border-color:#dc2626 !important; animation:sp-shake .3s }
@keyframes sp-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* Promo: applied banner */
.ss-coupon-applied {
  display:none; align-items:center; justify-content:space-between; gap:10px;
  background:var(--green-50); border:1.5px solid var(--green);
  border-radius:10px; padding:10px 14px; margin-top:10px;
}
.ss-coupon-applied.visible { display:flex }
.sca-info { display:flex; align-items:center; gap:9px }
.sca-check { width:15px; height:15px; color:var(--green); flex-shrink:0 }
.sca-code { font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:700; color:var(--ink); display:block; margin-bottom:1px }
.sca-desc { font-size:11.5px; color:var(--green); font-weight:600 }
.sca-remove { font-size:11.5px; font-weight:700; color:var(--muted); background:none; border:none; cursor:pointer; padding:0; text-decoration:underline; white-space:nowrap; transition:color .15s }
.sca-remove:hover { color:#dc2626 }

/* Discount row */
.ss-discount .ss-lbl { color:var(--green) }
.ss-discount-val { color:var(--green) }
.ss-coupon-tag { font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; background:var(--green-50); border:1px solid var(--green); border-radius:4px; padding:1px 5px; color:var(--green); margin-left:3px }

/* CTAs */
.ss-cta { padding:0 22px 18px; display:grid; gap:9px }
.ss-btn-primary {
  width:100%; background:var(--blue); color:#fff; border:0;
  border-radius:13px; padding:16px 22px; min-height:56px;
  font:800 16px 'Manrope',sans-serif; text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 10px 24px -10px rgba(10,132,217,.5), inset 0 -2px 0 rgba(0,0,0,.12);
  cursor:pointer; transition:background .15s, transform .08s;
}
.ss-btn-primary:hover { background:var(--blue-600) }
.ss-btn-primary:active { transform:translateY(1px) }
.ss-btn-primary .ba { transition:transform .15s }
.ss-btn-primary:hover .ba { transform:translateX(3px) }
.ss-btn-guest {
  width:100%; background:#fff; color:var(--ink);
  border:1.5px solid var(--line); border-radius:13px;
  padding:13px 22px; min-height:48px; text-decoration:none;
  font:700 14px 'Manrope',sans-serif; text-align:center;
  display:block; box-sizing:border-box;
  cursor:pointer; transition:border-color .15s, background .15s;
}
.ss-btn-guest:hover { border-color:var(--ink); background:var(--surface) }

/* Trust row */
.ss-trust {
  display:flex; justify-content:center; gap:18px; flex-wrap:wrap;
  padding:13px 22px;
  border-top:1px solid var(--line-2);
  background:var(--surface);
}
.ss-trust-item {
  display:flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; color:var(--muted); white-space:nowrap;
}
.ss-trust-item svg { width:13px;height:13px;color:var(--blue) }

/* Payment chips */
.ss-pay {
  display:flex; justify-content:center; align-items:center; gap:5px; flex-wrap:wrap;
  padding:11px 22px 16px;
  background:var(--surface);
  border-top:1px solid var(--line-2);
}
.ss-pay-chip {
  background:#fff; border:1px solid var(--line);
  border-radius:5px; padding:4px 9px;
  font-size:10.5px; font-weight:800; color:var(--muted); letter-spacing:.04em;
}

/* ── Mobile sticky CTA ──────────────────────────────────── */
.sp-mobile-cta {
  display:none;
  position:fixed; bottom:0;left:0;right:0;
  background:#fff; border-top:1px solid var(--line);
  padding:10px 16px 10px;
  z-index:25;
  align-items:center; gap:12px;
  box-shadow:0 -8px 24px -8px rgba(13,30,57,.12);
}
.smc-info { flex:1 }
.smc-label { font-size:11px;color:var(--muted);font-weight:600 }
.smc-amount { font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:600;color:var(--ink);line-height:1.1 }
.smc-btn {
  background:var(--blue);color:#fff;border:0;
  border-radius:12px;padding:13px 22px;
  font:800 15px 'Manrope',sans-serif;white-space:nowrap;
  text-decoration:none; display:flex; align-items:center;
  box-shadow:0 6px 16px -6px rgba(10,132,217,.5);cursor:pointer;
}

/* ── Ürün önizleme varyantları ──────────────────────────── */

/* Broşür — landscape kart */
.sp-stage.brochure {
  background:linear-gradient(160deg, #fffbea 0%, #fff3b0 100%);
  border-color:#edd;
}
.sp-brochure {
  width:74%; aspect-ratio:210/148;
  border-radius:4px; background:#fff;
  position:relative; overflow:hidden; z-index:1;
  box-shadow:0 6px 16px -8px rgba(13,30,57,.28), 0 2px 0 #ece3c0;
  transform:rotate(-4deg);
}
.sp-brochure .br-half {
  position:absolute; left:0; top:0; bottom:0; width:46%;
  background:linear-gradient(160deg, var(--yellow) 0%, var(--yellow-dark) 100%);
}
.sp-brochure .br-lines {
  position:absolute; right:7px; top:8px;
  display:flex; flex-direction:column; gap:3px;
}
.sp-brochure .br-lines span {
  display:block; border-radius:1px; background:var(--line);
}
.sp-brochure .br-lines span:nth-child(1) { width:24px;height:2px;background:var(--ink-2) }
.sp-brochure .br-lines span:nth-child(2) { width:18px;height:1.5px }
.sp-brochure .br-lines span:nth-child(3) { width:20px;height:1.5px }
.sp-brochure .br-lines span:nth-child(4) { width:14px;height:1.5px }
.sp-brochure .br-fold {
  position:absolute; top:0; bottom:0; left:46%;
  width:1.5px; background:rgba(0,0,0,.08);
}

/* Etiket — daire sticker */
.sp-stage.sticker {
  background:linear-gradient(160deg, #f4f9fd 0%, #e6f3fb 100%);
  border-color:var(--blue-100);
}
.sp-sticker-wrap {
  position:relative; z-index:1;
  transform:rotate(-5deg);
  display:flex; align-items:center; justify-content:center;
}
.sp-sticker {
  width:50px; height:50px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue) 0%, #3FA9FF 100%);
  border:3px solid #fff;
  box-shadow:0 6px 18px -6px rgba(10,132,217,.45), 0 0 0 1px var(--blue-100);
  display:grid; place-items:center;
  position:relative;
}
.sp-sticker::before {
  content:"";position:absolute;inset:5px;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.5);
}
.sp-sticker::after {
  content:"M";
  font-family:'Manrope',sans-serif;font-size:16px;font-weight:800;color:#fff;
  position:relative; z-index:1;
}
.sp-sticker-shadow {
  width:44px;height:44px;border-radius:50%;
  background:rgba(10,132,217,.15);
  position:absolute;top:6px;left:4px;z-index:0;
}

/* Davetiye — portrait kart */
.sp-stage.invite {
  background:linear-gradient(160deg, #1c2a3e 0%, #0B1729 100%);
  border-color:var(--ink);
}
.sp-invite {
  width:45%; aspect-ratio:14/19;
  border-radius:5px; background:var(--ink);
  position:relative; overflow:hidden; z-index:1;
  box-shadow:0 8px 20px -8px rgba(13,30,57,.6), 0 2px 0 rgba(255,214,10,.3);
  transform:rotate(-4deg);
}
.sp-invite .iv-top {
  position:absolute;top:0;left:0;right:0;height:38%;
  background:linear-gradient(135deg, var(--yellow) 0%, var(--yellow-dark) 100%);
}
.sp-invite .iv-lines {
  position:absolute;bottom:12px;left:9px;right:9px;
  display:flex;flex-direction:column;gap:3px;
}
.sp-invite .iv-lines span {
  display:block;border-radius:1px;background:rgba(255,255,255,.15);height:1.5px;
}
.sp-invite .iv-lines span:nth-child(1) { width:70% }
.sp-invite .iv-lines span:nth-child(2) { width:50% }

/* Antetli Kağıt — A4 portrait */
.sp-stage.letterhead {
  background:linear-gradient(160deg, #f0f9f4 0%, #d6f2e4 100%);
  border-color:rgba(22,163,74,.2);
}
.sp-letterhead {
  width:45%; aspect-ratio:210/297;
  border-radius:3px; background:#fff;
  position:relative; overflow:hidden; z-index:1;
  box-shadow:0 6px 16px -8px rgba(13,30,57,.22), 0 2px 0 #c8e8d4;
  transform:rotate(-4deg);
}
.sp-letterhead .lh-top {
  position:absolute;top:0;left:0;right:0;height:22%;
  background:linear-gradient(135deg, var(--green) 0%, #15d45b 100%);
}
.sp-letterhead .lh-logo {
  position:absolute;top:5px;left:7px;
  width:16px;height:16px;border-radius:3px;background:rgba(255,255,255,.3);
}
.sp-letterhead .lh-lines {
  position:absolute;bottom:10px;left:8px;right:8px;
  display:flex;flex-direction:column;gap:3px;
}
.sp-letterhead .lh-lines span {
  display:block;height:1.5px;border-radius:1px;background:var(--line);
}
.sp-letterhead .lh-lines span:nth-child(1) { width:90% }
.sp-letterhead .lh-lines span:nth-child(2) { width:80% }
.sp-letterhead .lh-lines span:nth-child(3) { width:70% }
.sp-letterhead .lh-lines span:nth-child(4) { width:55% }

/* ── Lightbox ───────────────────────────────────────────── */
@keyframes lb-in  { from { opacity:0; transform:scale(.88) translateY(12px) } to { opacity:1; transform:scale(1) translateY(0) } }
@keyframes lb-out { from { opacity:1 } to { opacity:0 } }

#spLightbox {
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  pointer-events:none; opacity:0;
  transition:opacity .22s ease;
}
#spLightbox.open { opacity:1; pointer-events:all }

.spLb-backdrop {
  position:absolute; inset:0;
  background:rgba(11,23,41,.62);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.spLb-box {
  position:relative; z-index:1;
  background:#fff;
  border-radius:18px;
  padding:48px 40px 32px;
  box-shadow:0 32px 80px -24px rgba(11,23,41,.5), 0 0 0 1px rgba(11,23,41,.06);
  display:flex; flex-direction:column; align-items:center; gap:28px;
  min-width:280px;
  transform:scale(.88) translateY(12px);
  transition:transform .24s cubic-bezier(.34,1.3,.64,1), opacity .22s ease;
}
#spLightbox.open .spLb-box { transform:scale(1) translateY(0) }

.spLb-close {
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line);
  display:grid; place-items:center; cursor:pointer;
  color:var(--muted); transition:background .15s, color .15s;
}
.spLb-close:hover { background:var(--ink); color:#fff; border-color:var(--ink) }
.spLb-close svg { width:14px; height:14px }

.spLb-stage-wrap {
  width:280px; height:204px;
  display:grid; place-items:center;
  position:relative;
}
.spLb-stage-wrap .sp-stage {
  position:absolute;
  transform:scale(2.8);
  transform-origin:center;
  cursor:default;
  pointer-events:none;
}
/* hide zoom btn inside lightbox */
.spLb-stage-wrap .sp-zoom-btn { display:none }

.spLb-meta { text-align:center }
.spLb-name {
  font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.01em;
  margin-bottom:4px;
}
.spLb-sub {
  font-size:12px; font-weight:500; color:var(--muted);
}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:960px){
  .sp-layout {
    grid-template-columns:1fr;
  }
  .sp-summary {
    position:static;
    order:-1;
  }
}

@media(max-width:640px){
  .sp-page { padding:20px 0 80px }
  .sp-header h1 { font-size:26px }
  .sp-mobile-cta { display:flex }

  .sp-item {
    grid-template-columns:80px 1fr;
  }
  .sp-stage { width:80px;height:58px }
  .sp-preview { width:80px }
  .sp-total-p { font-size:18px }
  .sp-links { gap:10px }

  .sp-foot {
    flex-wrap:wrap;
    gap:10px;
  }
  .sp-price-col {
    width:100%;
    text-align:left;
    padding-left:0;
    display:flex;align-items:baseline;gap:10px;
    border-top:1px solid var(--line-2);
    padding-top:10px;
    margin-top:0;
  }
  .sp-unit-p { margin-bottom:0 }

  .ss-trust { gap:12px }
  .ss-trust-item { font-size:10px }
}

@media(max-width:400px){
  .sp-item {
    grid-template-columns:1fr;
  }
  .sp-preview {
    flex-direction:row; align-items:center; width:auto;
  }
  .sp-preview { grid-row:auto }
}