/* HERO — warm-cream Most-Popular gradient card (matches test-shop hero language) */
.sf24-tcc-co-hero { position:relative; padding:24px 28px 28px; margin-bottom:24px; background:linear-gradient(135deg,#fff7ed 0%,#fff 35%,#fefce8 100%); border:1px solid rgba(245,133,41,.18); border-radius:20px; box-shadow:0 12px 36px -16px rgba(245,133,41,.3), inset 0 0 0 1px rgba(255,255,255,.7); overflow:hidden; }
.sf24-tcc-co-hero::before { content:''; position:absolute; top:-60%; right:-15%; width:60%; height:220%; background:radial-gradient(ellipse at center, rgba(245,133,41,.14), transparent 60%); pointer-events:none; z-index:0; }
.sf24-tcc-co-hero > * { position:relative; z-index:1; }
.sf24-tcc-co-hero-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.sf24-tcc-co-back { display:inline-flex; align-items:center; gap:6px; padding:7px 13px 7px 10px; background:rgba(255,255,255,.85); backdrop-filter:blur(4px); border:1px solid rgba(245,133,41,.25); border-radius:999px; font-size:12.5px; font-weight:700; color:var(--tcc-tx); text-decoration:none; transition:all .2s; }
.sf24-tcc-co-back:hover { border-color:#f58529; color:#c2410c; transform:translateX(-2px); }
.sf24-tcc-co-secure { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; background:rgba(16,185,129,.12); color:#065f46; border:1px solid rgba(16,185,129,.25); border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.sf24-tcc-co-h1 { font-family:var(--tcc-fh); font-size:30px; font-weight:900; letter-spacing:-.02em; margin:0 0 5px; line-height:1.1; color:var(--tcc-tx); }
.sf24-tcc-co-h-sub { font-size:14px; color:#c2410c; margin:0 0 18px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.sf24-tcc-co-h-sub::before { content:'🔥'; font-size:14px; display:inline-block; animation:sf24-tcc-co-flame 1.4s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes sf24-tcc-co-flame { 0%,100% { transform:scale(1) rotate(-3deg); } 50% { transform:scale(1.18) rotate(3deg); } }
.sf24-tcc-co-progress { max-width:420px; }
.sf24-tcc-co-progress-track { height:6px; background:rgba(245,133,41,.15); border-radius:6px; overflow:hidden; position:relative; }
.sf24-tcc-co-progress-fill { width:66%; height:100%; background:#7c3aed; border-radius:6px; box-shadow:0 0 12px rgba(124,58,237,.35); animation:sf24-tcc-co-pgrow .9s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes sf24-tcc-co-pgrow { from { width:0; } to { width:66%; } }
.sf24-tcc-co-progress-labels { display:flex; justify-content:space-between; margin-top:8px; padding:0 2px; font-size:10.5px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--tcc-tm); }
.sf24-tcc-co-progress-labels .is-done { color:#10b981; }
.sf24-tcc-co-progress-labels .is-active { color:var(--tcc-ac); }
@media (max-width:600px) { .sf24-tcc-co-hero { padding:20px 18px 22px; border-radius:16px; } .sf24-tcc-co-h1 { font-size:24px; } .sf24-tcc-co-h-sub { font-size:13px; margin-bottom:16px; } }

/* Layout */
.sf24-tcc-co-layout { display:grid; grid-template-columns:minmax(0, 1fr) 400px; gap:20px; align-items:start; }
@media (max-width:920px) { .sf24-tcc-co-layout { grid-template-columns:1fr; gap:16px; } }

/* Form col — card-style sections (matches test-cart item card DNA) */
.sf24-tcc-co-form-col { min-width:0; }
.sf24-tcc-co-form { display:flex; flex-direction:column; gap:14px; }
.sf24-tcc-co-fset { padding:22px 24px 24px !important; background:#fff !important; border:1px solid var(--tcc-bd) !important; border-radius:18px !important; box-shadow:0 4px 14px -8px rgba(15,15,17,.08) !important; margin:0 !important; transition:border-color .2s, box-shadow .2s !important; }
.sf24-tcc-co-fset:focus-within { border-color:#cbcdd5 !important; box-shadow:0 8px 24px -10px rgba(15,15,17,.1) !important; }
.sf24-tcc-co-legend { display:flex; align-items:center; gap:12px; padding:0; margin:0 0 18px; }
.sf24-tcc-co-legend > span:last-child { font-family:var(--tcc-fh); font-size:17px; font-weight:900; letter-spacing:-.015em; color:var(--tcc-tx); }
.sf24-tcc-co-legend-num { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#7c3aed; color:#fff; font-family:var(--tcc-fh); font-size:13px; font-weight:900; line-height:1; box-shadow:0 5px 14px -4px rgba(124,58,237,.4); flex-shrink:0; }
.sf24-tcc-co-secure-inline { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; color:#065f46; background:rgba(16,185,129,.1); padding:4px 10px; border:1px solid rgba(16,185,129,.22); border-radius:999px; letter-spacing:.04em; text-transform:uppercase; }

/* Email-match hint (guest) — "You already have an account → Sign in" */
.sf24-tcc-co-email-hint { display:flex; align-items:center; gap:8px; margin-top:8px; padding:9px 12px 9px 11px; background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(124,58,237,.04)); border:1px solid rgba(124,58,237,.25); border-radius:10px; font-size:12.5px; color:var(--tcc-tx); animation:sf24-tcc-co-emhint-in .35s cubic-bezier(.34,1.56,.64,1); }
.sf24-tcc-co-email-hint[hidden] { display:none !important; }
@keyframes sf24-tcc-co-emhint-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.sf24-tcc-co-email-hint-icon { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#7c3aed; color:#fff; flex-shrink:0; }
.sf24-tcc-co-email-hint-cta { margin-left:auto; padding:5px 12px; background:#7c3aed; color:#fff; border:0; border-radius:7px; font-family:inherit; font-size:12px; font-weight:800; cursor:pointer; transition:background .15s, transform .2s; outline:none; }
.sf24-tcc-co-email-hint-cta:hover { background:#6d28d9; transform:translateX(2px); }

/* Login link in legend (guest) */
.sf24-tcc-co-login-link { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:6px 12px 6px 12px; background:rgba(124,58,237,.08); border:1px solid rgba(124,58,237,.22); border-radius:999px; font-size:12px; color:var(--tcc-tx); cursor:pointer; transition:all .2s; outline:none; font-family:inherit; }
.sf24-tcc-co-login-link span { color:var(--tcc-ts); font-weight:500; }
.sf24-tcc-co-login-link strong { color:#7c3aed; font-weight:800; }
.sf24-tcc-co-login-link svg { color:#7c3aed; transition:transform .2s; }
.sf24-tcc-co-login-link:hover { background:rgba(124,58,237,.14); border-color:rgba(124,58,237,.4); transform:translateY(-1px); }
.sf24-tcc-co-login-link:hover svg { transform:translateX(2px); }
@media (max-width:520px) { .sf24-tcc-co-login-link { padding:5px 10px; font-size:11.5px; } .sf24-tcc-co-login-link span { display:none; } }

/* Select field — match input styling */
.sf24-tcc-co-field select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important; background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:14px 14px !important; padding-right:38px !important; cursor:pointer; }
.sf24-tcc-co-field select.is-invalid { border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.08) !important; }

/* Login overlay */
.sf24-tcc-co-login-overlay { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .25s; }
.sf24-tcc-co-login-overlay[hidden] { display:none !important; }
.sf24-tcc-co-login-overlay.is-shown { opacity:1; }
.sf24-tcc-co-login-backdrop { position:absolute; inset:0; background:rgba(15,15,17,.55); backdrop-filter:blur(6px); cursor:pointer; }
.sf24-tcc-co-login-sheet { position:relative; width:100%; max-width:420px; background:#fff; border-radius:22px; padding:28px 26px 22px; box-shadow:0 30px 80px -20px rgba(15,15,17,.55), 0 0 0 1px rgba(124,58,237,.08); transform:translateY(20px) scale(.97); transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.sf24-tcc-co-login-overlay.is-shown .sf24-tcc-co-login-sheet { transform:translateY(0) scale(1); }
.sf24-tcc-co-login-x { position:absolute; top:12px; right:12px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:8px; cursor:pointer; color:var(--tcc-ts); transition:all .15s; }
.sf24-tcc-co-login-x:hover { background:#f3f4f6; color:var(--tcc-tx); }
.sf24-tcc-co-login-head { text-align:center; margin-bottom:22px; }
.sf24-tcc-co-login-icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#7c3aed,#6d28d9); box-shadow:0 10px 24px -8px rgba(124,58,237,.5); margin-bottom:14px; }
.sf24-tcc-co-login-title { font-family:var(--tcc-fh); margin:0 0 6px; font-size:20px; font-weight:900; letter-spacing:-.02em; color:var(--tcc-tx); }
.sf24-tcc-co-login-sub { margin:0; font-size:13px; color:var(--tcc-ts); line-height:1.45; }
.sf24-tcc-co-login-form { display:flex; flex-direction:column; gap:13px; }
.sf24-tcc-co-li-remember { padding:2px 0; }
.sf24-tcc-co-li-submit { width:100%; padding:14px 18px !important; font-size:14.5px !important; margin-top:4px; box-shadow:0 12px 28px -10px rgba(124,58,237,.5) !important; }
.sf24-tcc-co-li-submit.is-loading { pointer-events:none; opacity:.85; position:relative; }
.sf24-tcc-co-li-submit.is-loading::after { content:""; position:absolute; right:18px; top:50%; transform:translateY(-50%); width:14px; height:14px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sf24-tcc-co-spin .7s linear infinite; }
.sf24-tcc-co-li-foot { display:flex; align-items:center; justify-content:center; gap:10px; padding-top:6px; font-size:12px; color:var(--tcc-tm); }
.sf24-tcc-co-li-foot a { color:#7c3aed; text-decoration:none; font-weight:600; transition:color .15s; }
.sf24-tcc-co-li-foot a:hover { color:#5b21b6; text-decoration:underline; }
@media (max-width:520px) { .sf24-tcc-co-login-sheet { padding:24px 20px 18px; border-radius:18px; } .sf24-tcc-co-login-title { font-size:18px; } }

.sf24-tcc-co-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:0 !important; }
.sf24-tcc-co-row + .sf24-tcc-co-row { margin-top:12px !important; }
.sf24-tcc-co-field { display:flex; flex-direction:column; gap:6px; min-width:0; position:relative; }
.sf24-tcc-co-field--full { grid-column:1 / -1; }
.sf24-tcc-co-field label { font-size:12.5px; font-weight:700; color:var(--tcc-tx); letter-spacing:-.005em; display:flex; align-items:center; gap:6px; }
.sf24-tcc-co-required { color:#ef4444; font-weight:900; font-size:11px; }
.sf24-tcc-co-optional { color:var(--tcc-tm); font-weight:500; font-size:11px; }
.sf24-tcc-co-field input, .sf24-tcc-co-field select, .sf24-tcc-co-field textarea {
  width:100% !important; padding:13px 14px !important;
  background:#fff !important;
  border:1.5px solid #d4d6dd !important; border-radius:11px !important;
  font-family:inherit !important; font-size:14.5px !important; font-weight:500 !important;
  color:var(--tcc-tx) !important; outline:none !important; box-sizing:border-box;
  transition:border-color .2s, box-shadow .2s, background .2s !important;
  letter-spacing:-.005em;
  box-shadow:inset 0 1px 2px rgba(15,15,17,.04), 0 1px 0 rgba(15,15,17,.02) !important;
}
.sf24-tcc-co-field input:hover, .sf24-tcc-co-field select:hover, .sf24-tcc-co-field textarea:hover { border-color:#9ca3af !important; box-shadow:inset 0 1px 2px rgba(15,15,17,.05), 0 2px 4px rgba(15,15,17,.03) !important; }
.sf24-tcc-co-field input:focus, .sf24-tcc-co-field select:focus, .sf24-tcc-co-field textarea:focus { border-color:#7c3aed !important; box-shadow:0 0 0 3px rgba(124,58,237,.14), inset 0 1px 2px rgba(15,15,17,.03) !important; background:#fff !important; }
.sf24-tcc-co-field input::placeholder { color:var(--tcc-tm); font-weight:400; }
.sf24-tcc-co-field input.is-invalid { border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.08) !important; }
.sf24-tcc-co-help { font-size:11.5px; color:var(--tcc-tm); padding-left:2px; font-weight:500; }
@media (max-width:600px) { .sf24-tcc-co-row { grid-template-columns:1fr; gap:12px; } }

/* Gateways — match cart upsell-card aesthetic */
.sf24-tcc-co-gateways { display:flex; flex-direction:column; gap:10px; margin-top:0; }
.sf24-tcc-co-gateway { display:flex; align-items:center; gap:14px; padding:14px 16px; background:#fff; border:1.5px solid var(--tcc-bd); border-radius:13px; cursor:pointer; transition:all .25s cubic-bezier(.34,1.4,.64,1); position:relative; }
.sf24-tcc-co-gateway input[type="radio"] { position:absolute; opacity:0; pointer-events:none; }
.sf24-tcc-co-gateway:hover { border-color:#cbcdd5; background:#fafbfc; transform:translateY(-1px); }
.sf24-tcc-co-gateway.is-active { border-color:#7c3aed; background:#fff; box-shadow:0 0 0 1px #7c3aed, 0 8px 22px -10px rgba(124,58,237,.25); transform:translateY(-1px); }
.sf24-tcc-co-gateway-radio { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; border:2px solid var(--tcc-bd); background:#fff; flex-shrink:0; transition:border-color .2s; }
.sf24-tcc-co-gateway.is-active .sf24-tcc-co-gateway-radio { border-color:#7c3aed; }
.sf24-tcc-co-gateway-dot { width:11px; height:11px; border-radius:50%; background:#7c3aed; transform:scale(0); transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.sf24-tcc-co-gateway.is-active .sf24-tcc-co-gateway-dot { transform:scale(1); }
.sf24-tcc-co-gateway-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.sf24-tcc-co-gateway-title { font-family:var(--tcc-fh); font-size:15px; font-weight:800; color:var(--tcc-tx); letter-spacing:-.01em; }
.sf24-tcc-co-gateway-desc { font-size:12px; color:var(--tcc-ts); line-height:1.4; }
.sf24-tcc-co-gateway-icons { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; }
.sf24-tcc-co-pay-pill { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:42px; height:26px; padding:0 9px; background:#fff; border:1px solid var(--tcc-bd); border-radius:7px; font-family:-apple-system,Helvetica,Arial,sans-serif; font-weight:900; font-size:11px; letter-spacing:.04em; color:#1a1a1a; }
.sf24-tcc-co-pay-pill svg { height:15px; width:auto; display:block; }
.sf24-tcc-co-pay-pill--visa { color:#1A1F71; font-style:italic; letter-spacing:.06em; font-size:12px; }
.sf24-tcc-co-pay-pill--mc { padding:0 5px; }
.sf24-tcc-co-pay-pill--mc svg { height:18px; }
.sf24-tcc-co-pay-pill--amex { background:#006FCF; color:#fff; border-color:#006FCF; }
.sf24-tcc-co-pay-pill--btc, .sf24-tcc-co-pay-pill--usdt, .sf24-tcc-co-pay-pill--eth { padding:0 5px; min-width:28px; }
.sf24-tcc-co-pay-pill--btc svg, .sf24-tcc-co-pay-pill--usdt svg, .sf24-tcc-co-pay-pill--eth svg { height:18px; }
.sf24-tcc-co-pay-pill--apay, .sf24-tcc-co-pay-pill--gpay { padding:0 7px; }
.sf24-tcc-co-pay-pill--apay svg, .sf24-tcc-co-pay-pill--gpay svg { height:14px; }
.sf24-tcc-co-pay-pill--paypal { padding:0 8px; min-width:54px; gap:0; font-style:italic; font-family:Arial,Helvetica,sans-serif; font-weight:900; font-size:12px; letter-spacing:0; }
.sf24-tcc-co-pp-pay { color:#003087; }
.sf24-tcc-co-pp-pal { color:#009CDE; }
.sf24-tcc-co-wallet-bal { display:inline-flex; align-items:center; gap:9px; padding:6px 12px 6px 6px; background:linear-gradient(135deg,#7c3aed 0%,#6d28d9 100%); border-radius:11px; box-shadow:0 6px 16px -6px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.18); }
.sf24-tcc-co-wallet-icon { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.15); flex-shrink:0; }
.sf24-tcc-co-wallet-meta { display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.1; gap:1px; }
.sf24-tcc-co-wallet-label { font-size:9.5px; font-weight:700; color:rgba(255,255,255,.75); letter-spacing:.08em; text-transform:uppercase; }
.sf24-tcc-co-wallet-amt { font-family:var(--tcc-fh); font-size:14px; font-weight:900; color:#fff; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.sf24-tcc-co-wallet-amt .woocommerce-Price-amount, .sf24-tcc-co-wallet-amt bdi { color:#fff !important; }
.sf24-tcc-co-gateway-empty { padding:18px; text-align:center; color:var(--tcc-ts); font-size:13px; background:#fef2f2; border-radius:12px; border:1px dashed #fecaca; }
@media (max-width:600px) {
  /* Compact payment row on mobile — stack body above icons, allow icons to wrap, prevent right-overflow */
  .sf24-tcc-co-gateway { padding:12px 14px; gap:10px; flex-wrap:wrap; }
  .sf24-tcc-co-gateway-body { flex:1 1 calc(100% - 40px); min-width:0; }
  .sf24-tcc-co-gateway-title { font-size:14px; }
  .sf24-tcc-co-gateway-desc { font-size:11.5px; }
  .sf24-tcc-co-gateway-icons { flex:1 1 100%; flex-wrap:wrap; gap:5px; padding-left:32px; }
  .sf24-tcc-co-pay-pill { height:22px; font-size:10px; min-width:36px; padding:0 7px; }
  .sf24-tcc-co-pay-pill svg { height:13px; }
  .sf24-tcc-co-pay-pill--mc svg, .sf24-tcc-co-pay-pill--btc svg, .sf24-tcc-co-pay-pill--usdt svg, .sf24-tcc-co-pay-pill--eth svg { height:15px; }
  .sf24-tcc-co-fset { padding:18px 18px 20px !important; }
}

/* Marketing checkbox + terms */
.sf24-tcc-co-marketing { padding:0; }
.sf24-tcc-co-check { display:inline-flex; align-items:flex-start; gap:11px; cursor:pointer; user-select:none; }
.sf24-tcc-co-check input[type="checkbox"] { position:absolute; opacity:0; pointer-events:none; }
.sf24-tcc-co-check-mark { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:7px; border:1.5px solid var(--tcc-bd); background:#fff; flex-shrink:0; transition:all .2s cubic-bezier(.34,1.56,.64,1); }
.sf24-tcc-co-check-mark svg { opacity:0; transform:scale(.5); transition:opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.sf24-tcc-co-check input:checked ~ .sf24-tcc-co-check-mark { background:#7c3aed; border-color:#7c3aed; box-shadow:0 4px 12px -3px rgba(124,58,237,.4); }
.sf24-tcc-co-check input:checked ~ .sf24-tcc-co-check-mark svg { opacity:1; transform:scale(1); }
.sf24-tcc-co-check-text { font-size:13.5px; color:var(--tcc-ts); line-height:1.5; padding-top:1px; }
.sf24-tcc-co-terms { font-size:12px; color:var(--tcc-tm); line-height:1.6; margin:0; padding:0; text-align:center; }
.sf24-tcc-co-terms a { color:var(--tcc-tx); text-decoration:underline; text-decoration-color:rgba(15,15,17,.3); text-underline-offset:2px; font-weight:600; transition:text-decoration-color .15s; }
.sf24-tcc-co-terms a:hover { text-decoration-color:#7c3aed; }

.sf24-tcc-co-msg { padding:13px 16px; border-radius:12px; font-size:13.5px; font-weight:600; line-height:1.45; }
.sf24-tcc-co-msg[hidden] { display:none !important; }
.sf24-tcc-co-msg.is-error { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.sf24-tcc-co-msg.is-success { background:rgba(16,185,129,.08); color:#065f46; border:1px solid rgba(16,185,129,.3); }

.sf24-tcc-co-place-mobile { display:none !important; } /* hidden — replaced by sticky bottom-bar on mobile */
@media (max-width:920px) { .sf24-tcc-co-place-desktop { display:none !important; } }

/* Mobile sticky bottom bar */
.sf24-tcc-co-stickybar { position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.92); backdrop-filter:blur(14px) saturate(1.6); -webkit-backdrop-filter:blur(14px) saturate(1.6); border-top:1px solid rgba(15,15,17,.08); box-shadow:0 -10px 30px -8px rgba(15,15,17,.18); transform:translateY(110%); transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.sf24-tcc-co-stickybar.is-shown { transform:translateY(0); }
@media (max-width:920px) { .sf24-tcc-co-stickybar { display:flex; } body.sf24-tcc-co-stickybar-on { padding-bottom:80px !important; } }
.sf24-tcc-co-stickybar-meta { display:flex; flex-direction:column; line-height:1.1; gap:2px; flex-shrink:0; }
.sf24-tcc-co-stickybar-label { font-size:10px; font-weight:800; color:var(--tcc-tm); letter-spacing:.08em; text-transform:uppercase; }
.sf24-tcc-co-stickybar-amt { font-family:var(--tcc-fh); font-size:20px; font-weight:900; color:#c2410c; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.sf24-tcc-co-stickybar-btn { flex:1; min-width:0; padding:13px 18px !important; font-size:14.5px !important; gap:7px !important; }

/* Summary col — premium card */
.sf24-tcc-co-summary-col { min-width:0; }
.sf24-tcc-co-summary { padding:24px 24px 22px; background:#fff; border:1px solid var(--tcc-bd); border-radius:20px; box-shadow:0 12px 36px -16px rgba(15,15,17,.14), 0 4px 10px -6px rgba(15,15,17,.06); position:sticky; top:24px; overflow:hidden; }
.sf24-tcc-co-summary::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:#7c3aed; }
.sf24-tcc-co-summary-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.sf24-tcc-co-summary-title { font-family:var(--tcc-fh); margin:0; font-size:18px; font-weight:900; letter-spacing:-.015em; color:var(--tcc-tx); }
.sf24-tcc-co-summary-edit { font-size:12px; font-weight:700; color:var(--tcc-tx); text-decoration:none; padding:5px 10px; background:#f3f4f6; border-radius:8px; transition:background .15s; }
.sf24-tcc-co-summary-edit:hover { background:#e5e7eb; }
.sf24-tcc-co-mini-items { list-style:none; margin:0 0 16px; padding:0 0 16px; border-bottom:1px solid var(--tcc-bd); display:flex; flex-direction:column; gap:12px; max-height:280px; overflow-y:auto; }
.sf24-tcc-co-mini-item { display:grid; grid-template-columns:46px 1fr auto; gap:12px; align-items:center; }
.sf24-tcc-co-mini-img { position:relative; width:46px; height:46px; border-radius:10px; overflow:hidden; background:#f5f5f7; padding:5px; flex-shrink:0; }
.sf24-tcc-co-mini-img img { width:100%; height:100%; object-fit:contain; }
.sf24-tcc-co-mini-qty { position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px; background:#1a1033; color:#fff; border-radius:999px; font-family:var(--tcc-fh); font-size:10.5px; font-weight:900; line-height:20px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.2); border:1.5px solid #fff; }
.sf24-tcc-co-mini-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sf24-tcc-co-mini-name { font-size:13px; font-weight:700; color:var(--tcc-tx); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.005em; }
.sf24-tcc-co-mini-link { font-size:11px; color:var(--tcc-tm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.sf24-tcc-co-mini-price { font-family:var(--tcc-fh); font-size:14px; font-weight:800; color:var(--tcc-tx); font-variant-numeric:tabular-nums; }
.sf24-tcc-co-summary-rows { display:flex; flex-direction:column; gap:10px; padding-bottom:16px; border-bottom:1px solid var(--tcc-bd); margin-bottom:16px; }
.sf24-tcc-co-summary-coupon strong { color:#10b981 !important; font-family:"SF Mono", Monaco, monospace; font-size:12px; letter-spacing:.04em; }
/* Place order CTA — animated: shimmer sweep + breathing glow + arrow nudge */
.sf24-tcc-co-place-desktop, .sf24-tcc-co-place-mobile { width:100%; position:relative; overflow:hidden; isolation:isolate; transition:transform .25s, box-shadow .3s !important; animation:sf24-tcc-po-pulse 2.6s ease-in-out infinite; }
.sf24-tcc-co-place-desktop { padding:16px 22px !important; font-size:15.5px !important; }
.sf24-tcc-co-place-desktop::before, .sf24-tcc-co-place-mobile::before {
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:50%;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
  transform:skewX(-22deg); pointer-events:none; z-index:1;
  animation:sf24-tcc-po-shine 3.2s cubic-bezier(.55,0,.2,1) infinite;
  animation-delay:.8s;
}
.sf24-tcc-co-place-desktop > *, .sf24-tcc-co-place-mobile > * { position:relative; z-index:2; }
.sf24-tcc-co-place-desktop svg, .sf24-tcc-co-place-mobile svg { transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.sf24-tcc-co-place-desktop:hover, .sf24-tcc-co-place-mobile:hover { animation-play-state:paused; transform:translateY(-2px) scale(1.01); box-shadow:0 18px 38px -10px rgba(124,58,237,.6) !important; }
.sf24-tcc-co-place-desktop:hover svg, .sf24-tcc-co-place-mobile:hover svg { transform:translateX(4px); }
.sf24-tcc-co-place-desktop:hover::before, .sf24-tcc-co-place-mobile:hover::before { animation-duration:1.4s; }
.sf24-tcc-co-place-desktop:active, .sf24-tcc-co-place-mobile:active { transform:translateY(0) scale(.99); }
.sf24-tcc-co-place-desktop.is-loading, .sf24-tcc-co-place-mobile.is-loading { animation:none; }
.sf24-tcc-co-place-desktop.is-loading::before, .sf24-tcc-co-place-mobile.is-loading::before { display:none; }
@keyframes sf24-tcc-po-pulse { 0%,100% { box-shadow:0 10px 24px -8px rgba(124,58,237,.45); } 50% { box-shadow:0 14px 36px -8px rgba(124,58,237,.6), 0 0 0 4px rgba(124,58,237,.08); } }
@keyframes sf24-tcc-po-shine { 0% { left:-60%; } 60%,100% { left:120%; } }
@media (prefers-reduced-motion: reduce) { .sf24-tcc-co-place-desktop, .sf24-tcc-co-place-mobile { animation:none; } .sf24-tcc-co-place-desktop::before, .sf24-tcc-co-place-mobile::before { animation:none; display:none; } .sf24-tcc-co-place-desktop:hover, .sf24-tcc-co-place-mobile:hover { transform:none; } .sf24-tcc-co-place-desktop:hover svg, .sf24-tcc-co-place-mobile:hover svg { transform:none; } }

/* Loading state */
.sf24-tcc-co-place-mobile.is-loading, .sf24-tcc-co-place-desktop.is-loading, .sf24-tcc-co-stickybar-btn.is-loading { pointer-events:none; opacity:.85; position:relative; }
.sf24-tcc-co-place-mobile.is-loading::after, .sf24-tcc-co-place-desktop.is-loading::after, .sf24-tcc-co-stickybar-btn.is-loading::after { content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%); width:14px; height:14px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sf24-tcc-co-spin .7s linear infinite; }
@keyframes sf24-tcc-co-spin { to { transform:translateY(-50%) rotate(360deg); } }