.commerce-page { --commerce-acid:#c9ff3d; --commerce-gold:#ffb33f; --commerce-green:#52d99d; --commerce-red:#ff6579; --commerce-blue:#5bdcff; --commerce-panel:#111620; --commerce-line:rgba(255,255,255,.09); background:#07090e; }
.commerce-page > .trending { display:none; }
.commerce-v2 { min-height:100vh; color:#dfe3dc; background:#07090e; }
.commerce-hero { padding:145px 0 55px; border-bottom:1px solid var(--commerce-line); background:radial-gradient(circle at 80% 20%,rgba(255,179,63,.08),transparent 27%),linear-gradient(135deg,#0b0e14,#121720); }
.commerce-hero > .container { display:flex; align-items:flex-end; justify-content:space-between; gap:35px; }
.commerce-eyebrow { color:var(--commerce-acid); font-size:8px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }.commerce-eyebrow i { margin-right:6px; }
.commerce-hero h1 { margin:6px 0 7px; color:#f4f6f0; font-size:clamp(36px,5vw,58px); font-weight:900; letter-spacing:-.055em; }.commerce-hero p { margin:0; color:#77818e; font-size:11px; }
.commerce-progress { display:flex; align-items:center; gap:8px; padding:9px 11px; border:1px solid var(--commerce-line); border-radius:12px; background:#0c1016; }.commerce-progress span { display:flex; align-items:center; gap:6px; color:#5f6875; font-size:7px; font-weight:850; }.commerce-progress span b { display:grid; width:22px; height:22px; place-items:center; color:#6f7884; border:1px solid #2a323d; border-radius:7px; font-size:7px; }.commerce-progress > i { width:25px; height:1px; background:#252d37; }.commerce-progress span.active { color:#dce0da; }.commerce-progress span.active b { color:#101609; border-color:var(--commerce-acid); background:var(--commerce-acid); }.commerce-progress span.done { color:var(--commerce-green); }.commerce-progress span.done b { color:#0b150f; border-color:var(--commerce-green); background:var(--commerce-green); }.commerce-progress > i.active { background:var(--commerce-green); }
.commerce-workspace { padding:32px 0 75px; }.commerce-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; align-items:start; gap:15px; }.commerce-main { min-width:0; }.commerce-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; margin-bottom:13px; }.commerce-section-head > div > span,.commerce-summary-label { color:var(--commerce-acid); font-size:7px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }.commerce-section-head h2 { margin:2px 0 0; color:#eef0eb; font-size:22px; font-weight:900; letter-spacing:-.04em; }.commerce-section-head > a { color:#8b949f; font-size:8px; font-weight:800; }.commerce-section-head > a i { margin-right:5px; color:var(--commerce-acid); }
.commerce-items { display:grid; gap:8px; }.commerce-item { display:grid; grid-template-columns:125px minmax(0,1fr) 92px 118px; grid-template-rows:1fr auto; column-gap:15px; overflow:hidden; border:1px solid var(--commerce-line); border-radius:14px; background:linear-gradient(145deg,#121720,#0c1017); }.commerce-item-image { position:relative; display:grid; grid-row:1 / 3; min-height:154px; place-items:center; border-right:1px solid var(--commerce-line); background:radial-gradient(circle,rgba(201,255,61,.08),transparent 65%),#0a0e14; }.commerce-item-image img { width:90%; height:90%; object-fit:contain; }.commerce-item-image > span { position:absolute; top:9px; left:9px; padding:4px 7px; color:#111609; border-radius:5px; background:var(--commerce-acid); font-size:6px; font-weight:900; text-transform:uppercase; }
.commerce-item-copy { align-self:center; min-width:0; padding:16px 0 11px; }.commerce-item-copy > span { color:#6e7784; font-size:6px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.commerce-item-copy h2 { margin:4px 0 5px; font-size:12px; font-weight:900; }.commerce-item-copy h2 a { display:block; overflow:hidden; color:#e7eae4; text-overflow:ellipsis; white-space:nowrap; }.commerce-item-copy p { max-width:440px; margin:0 0 10px; color:#66707c; font-size:7px; line-height:1.55; }.commerce-item-copy > div { display:flex; flex-wrap:wrap; gap:10px; }.commerce-stock { display:inline-flex; align-items:center; gap:5px; color:var(--commerce-green); font-size:7px; font-weight:850; }.commerce-stock i { width:5px; height:5px; border-radius:50%; background:currentColor; }.commerce-item-copy small { color:#56606c; font-size:7px; }
.commerce-item-price { display:flex; align-self:center; align-items:flex-end; flex-direction:column; padding:15px 0; }.commerce-item-price small { color:#626b77; font-size:7px; text-decoration:line-through; }.commerce-item-price strong { color:var(--commerce-gold); font-size:14px; font-weight:900; }.commerce-item-price span { color:#515a66; font-size:6px; }
.commerce-item-actions { display:flex; align-self:center; align-items:flex-end; flex-direction:column; gap:6px; padding:14px 14px 14px 0; }.commerce-item-actions > label { color:#59626f; font-size:6px; font-weight:850; text-transform:uppercase; }.commerce-quantity { display:flex; overflow:hidden; border:1px solid var(--commerce-line); border-radius:8px; background:#0a0e14; }.commerce-quantity button { display:grid; width:30px; height:32px; place-items:center; color:#7e8793; border:0; background:transparent; font-size:7px; }.commerce-quantity button:hover { color:#101609; background:var(--commerce-acid); }.commerce-quantity button:disabled { opacity:.45; }.commerce-quantity input { width:36px; height:32px; padding:0; color:#e1e4de; border:0; border-right:1px solid var(--commerce-line); border-left:1px solid var(--commerce-line); outline:0; background:#111720; font-size:9px; font-weight:900; text-align:center; appearance:textfield; }.commerce-quantity input::-webkit-inner-spin-button { appearance:none; }.commerce-remove { color:#6f7884; font-size:7px; font-weight:800; }.commerce-remove:hover { color:var(--commerce-red); }.commerce-remove i { margin-right:4px; }
.commerce-line-total { display:flex; grid-column:2 / 5; align-items:center; justify-content:space-between; padding:9px 14px 9px 0; border-top:1px solid var(--commerce-line); }.commerce-line-total span { color:#59626f; font-size:6px; font-weight:850; text-transform:uppercase; }.commerce-line-total strong { color:#dfe3dc; font-size:10px; }
.commerce-assurance { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }.commerce-assurance > div { display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid var(--commerce-line); border-radius:10px; background:#0c1016; }.commerce-assurance > div > i { color:var(--commerce-green); }.commerce-assurance span { display:flex; flex-direction:column; color:#5e6874; font-size:6px; }.commerce-assurance strong { color:#a7afb8; font-size:7px; }
.commerce-summary { position:sticky; top:95px; padding:21px; border:1px solid var(--commerce-line); border-radius:15px; background:linear-gradient(145deg,#141a23,#0d1118); box-shadow:0 25px 65px rgba(0,0,0,.23); }.commerce-summary h2 { margin:4px 0 19px; color:#f0f2ed; font-size:19px; font-weight:900; letter-spacing:-.04em; }.commerce-summary-lines { display:grid; gap:9px; padding-bottom:15px; border-bottom:1px solid var(--commerce-line); }.commerce-summary-lines p { display:flex; justify-content:space-between; margin:0; color:#737d89; font-size:8px; }.commerce-summary-lines strong { color:#c4cad1; }.commerce-summary-lines .free { color:var(--commerce-green); }.commerce-summary-total { display:grid; grid-template-columns:1fr auto; align-items:end; padding:16px 0; }.commerce-summary-total span { color:#9da5ae; font-size:8px; font-weight:850; }.commerce-summary-total strong { color:var(--commerce-gold); font-size:22px; font-weight:900; }.commerce-summary-total small { grid-column:1 / -1; margin-top:2px; color:#56606c; font-size:6px; }.commerce-primary { display:flex; width:100%; min-height:42px; align-items:center; justify-content:center; gap:8px; color:#101609 !important; border:0; border-radius:9px; background:var(--commerce-acid); box-shadow:0 13px 25px rgba(201,255,61,.1); font-size:9px; font-weight:900; }.commerce-primary:hover { background:#dcff7d; transform:translateY(-1px); }
.commerce-summary-trust { display:flex; gap:8px; margin-top:13px; padding:10px; border-radius:8px; background:#0a0e14; }.commerce-summary-trust > i { color:var(--commerce-green); font-size:9px; }.commerce-summary-trust span { display:flex; flex-direction:column; color:#59626f; font-size:6px; }.commerce-summary-trust strong { color:#9ea6b0; font-size:7px; }.commerce-promo { display:flex; align-items:center; justify-content:space-between; margin-top:10px; color:#68717e; font-size:7px; }.commerce-promo i { color:var(--commerce-blue); }.commerce-promo a { color:var(--commerce-acid); font-weight:850; }
.commerce-empty { display:flex; min-height:480px; align-items:center; justify-content:center; flex-direction:column; text-align:center; }.commerce-empty > span:first-child { display:grid; width:70px; height:70px; margin-bottom:18px; place-items:center; color:var(--commerce-acid); border:1px solid rgba(201,255,61,.25); border-radius:20px; background:rgba(201,255,61,.06); font-size:26px; }.commerce-empty h1 { margin:6px 0; color:#eff1ec; font-size:35px; font-weight:900; letter-spacing:-.05em; }.commerce-empty p { margin:0 0 18px; color:#6b7480; font-size:9px; }.commerce-empty > a { padding:11px 15px; color:#101609; border-radius:9px; background:var(--commerce-acid); font-size:8px; font-weight:900; }.commerce-empty > a i { margin-left:6px; }
.commerce-toast { position:fixed; z-index:9999; right:20px; bottom:20px; padding:11px 14px; color:#0b140e; border-radius:9px; background:var(--commerce-green); box-shadow:0 15px 45px rgba(0,0,0,.35); font-size:8px; font-weight:850; opacity:0; pointer-events:none; transform:translateY(12px); }.commerce-toast.error { color:#fff; background:var(--commerce-red); }.commerce-toast.show { opacity:1; transform:translateY(0); }

/* Checkout */
.checkout-items { display:grid; gap:7px; }.checkout-items article { display:grid; grid-template-columns:82px 1fr auto; align-items:center; gap:13px; min-height:95px; padding:9px 15px 9px 9px; border:1px solid var(--commerce-line); border-radius:12px; background:linear-gradient(145deg,#121720,#0d1118); }.checkout-item-image { display:grid; width:82px; height:75px; place-items:center; border-radius:9px; background:radial-gradient(circle,rgba(201,255,61,.08),transparent 65%),#090d12; }.checkout-item-image img { width:90%; height:90%; object-fit:contain; }.checkout-items article > div > span { color:#66707c; font-size:6px; font-weight:900; text-transform:uppercase; }.checkout-items h3 { margin:3px 0; color:#e3e7df; font-size:10px; font-weight:900; }.checkout-items small { color:#68717e; font-size:7px; }.checkout-items article > strong { color:var(--commerce-gold); font-size:11px; }
.checkout-delivery { margin-top:11px; padding:17px; border:1px solid var(--commerce-line); border-radius:13px; background:#0c1016; }.checkout-delivery header { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; }.checkout-delivery header > i { display:grid; width:36px; height:36px; place-items:center; color:#fff; border-radius:9px; background:#1b2938; font-size:15px; }.checkout-delivery header div { display:flex; flex-direction:column; }.checkout-delivery header span { color:#5e6874; font-size:6px; font-weight:850; text-transform:uppercase; }.checkout-delivery h3 { margin:1px 0; color:#dfe3dc; font-size:10px; }.checkout-delivery header a { color:var(--commerce-acid); font-size:7px; font-weight:850; }.checkout-delivery > p { margin:12px 0; color:#6d7682; font-size:7px; line-height:1.6; }.checkout-delivery > div { display:flex; flex-wrap:wrap; gap:12px; }.checkout-delivery > div span { color:#818a95; font-size:7px; }.checkout-delivery > div i { margin-right:4px; color:var(--commerce-green); }
.checkout-wallet { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding:13px; border:1px solid rgba(201,255,61,.18); border-radius:10px; background:rgba(201,255,61,.04); }.checkout-wallet div { display:flex; flex-direction:column; }.checkout-wallet span { color:#68717d; font-size:6px; font-weight:850; text-transform:uppercase; }.checkout-wallet strong { color:#edf0e9; font-size:17px; }.checkout-wallet > i { color:var(--commerce-acid); }.checkout-balance-after { display:flex; align-items:center; justify-content:space-between; margin:15px 0; padding:11px 12px; border-radius:9px; }.checkout-balance-after span { font-size:7px; font-weight:850; }.checkout-balance-after strong { font-size:12px; }.checkout-balance-after.success { color:var(--commerce-green); background:rgba(82,217,157,.06); }.checkout-balance-after.shortage { color:var(--commerce-red); background:rgba(255,101,121,.07); }.checkout-summary form { margin:0; }.checkout-confirm-note { margin:9px 0 0; color:#59626f; font-size:6px; text-align:center; }.checkout-confirm-note.warning { color:#8b7378; }.checkout-confirm-note i { margin-right:4px; color:var(--commerce-red); }.checkout-back { display:block; margin-top:13px; color:#77818d; font-size:7px; font-weight:800; text-align:center; }.checkout-back i { margin-right:4px; }
@media (max-width:991px) { .commerce-layout { grid-template-columns:1fr; }.commerce-summary { position:static; }.commerce-progress { display:none; } }
@media (max-width:767px) { .commerce-hero { padding:125px 0 45px; }.commerce-hero > .container { align-items:flex-start; flex-direction:column; }.commerce-item { grid-template-columns:100px 1fr; grid-template-rows:auto auto auto; }.commerce-item-image { grid-row:1 / 4; min-height:180px; }.commerce-item-copy { padding-right:12px; }.commerce-item-price { align-items:flex-start; padding:0 12px 5px 0; }.commerce-item-actions { align-items:flex-start; padding:0 12px 10px 0; }.commerce-line-total { grid-column:2; padding-right:12px; }.commerce-assurance { grid-template-columns:1fr; } }
@media (max-width:480px) { .commerce-item { grid-template-columns:1fr; }.commerce-item-image { grid-row:auto; min-height:150px; border-right:0; border-bottom:1px solid var(--commerce-line); }.commerce-item-copy,.commerce-item-price,.commerce-item-actions { padding:12px 14px; }.commerce-item-actions { align-items:stretch; }.commerce-item-actions > label { text-align:left; }.commerce-quantity { align-self:flex-start; }.commerce-line-total { grid-column:1; padding:10px 14px; }.checkout-items article { grid-template-columns:65px 1fr; }.checkout-item-image { width:65px; height:60px; }.checkout-items article > strong { grid-column:2; }.checkout-delivery header { grid-template-columns:36px 1fr; }.checkout-delivery header a { grid-column:1 / -1; } }

/* Order success */
.order-success-page > .trending { display:none; }
.success-hero { padding:142px 0 53px; text-align:center; border-bottom:1px solid var(--commerce-line); background:radial-gradient(circle at 50% 45%,rgba(82,217,157,.12),transparent 23%),linear-gradient(145deg,#0b0e14,#121720); }
.success-hero .container { display:flex; align-items:center; flex-direction:column; }
.success-check { display:grid; width:62px; height:62px; margin-bottom:16px; place-items:center; color:#07110c; border-radius:19px; background:var(--commerce-green); box-shadow:0 0 0 8px rgba(82,217,157,.06),0 20px 50px rgba(82,217,157,.15); font-size:23px; }
.success-hero h1 { margin:7px 0; color:#f3f5f0; font-size:clamp(34px,5vw,56px); font-weight:900; letter-spacing:-.055em; }
.success-hero > .container > p { margin:0; color:#78828e; font-size:10px; }
.success-progress { margin-top:27px; }
.success-workspace { padding:28px 0 70px; background:#07090e; }
.success-overview { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:22px; }
.success-overview article { display:flex; min-width:0; padding:13px 15px; flex-direction:column; border:1px solid var(--commerce-line); border-radius:11px; background:#0c1016; }
.success-overview span { color:#5f6874; font-size:6px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.success-overview strong { overflow:hidden; margin-top:3px; color:#cdd2d6; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.success-overview .success-total { color:var(--commerce-gold); }
.success-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; align-items:start; gap:15px; }
.success-order-panel { padding:20px; border:1px solid var(--commerce-line); border-radius:15px; background:linear-gradient(145deg,#121720,#0c1017); }
.success-order-panel .commerce-section-head { align-items:center; }
.success-paid-badge { display:inline-flex; align-items:center; gap:5px; padding:6px 9px; color:var(--commerce-green); border:1px solid rgba(82,217,157,.18); border-radius:7px; background:rgba(82,217,157,.06); font-size:7px; font-weight:900; }
.success-items { display:grid; gap:7px; }
.success-items article { display:grid; grid-template-columns:82px minmax(0,1fr) auto; align-items:center; gap:13px; min-height:94px; padding:8px 14px 8px 8px; border:1px solid var(--commerce-line); border-radius:11px; background:#0a0e14; }
.success-item-image { display:grid; width:82px; height:76px; place-items:center; border-radius:8px; background:radial-gradient(circle,rgba(201,255,61,.08),transparent 65%),#111720; }
.success-item-image img { width:90%; height:90%; object-fit:contain; }
.success-items article > div { min-width:0; }
.success-items article > div > span { color:#5f6874; font-size:6px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.success-items h3 { overflow:hidden; margin:3px 0; color:#e5e9e1; font-size:10px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.success-items small { color:#6b7581; font-size:7px; }
.success-items article > strong { color:var(--commerce-gold); font-size:11px; }
.success-order-total { display:flex; align-items:center; justify-content:space-between; margin-top:13px; padding:14px 4px 0; border-top:1px solid var(--commerce-line); }
.success-order-total span { display:flex; color:#c4cad0; flex-direction:column; font-size:9px; font-weight:900; }
.success-order-total small { color:#59636f; font-size:6px; font-weight:600; }
.success-order-total > strong { color:var(--commerce-gold); font-size:21px; font-weight:900; }
.success-next-panel { padding:21px; border:1px solid var(--commerce-line); border-radius:15px; background:linear-gradient(145deg,#141a23,#0d1118); }
.success-next-panel h2 { margin:4px 0 18px; color:#f0f2ed; font-size:19px; font-weight:900; letter-spacing:-.04em; }
.success-next-panel ol { position:relative; display:grid; gap:16px; margin:0 0 18px; padding:0; list-style:none; }
.success-next-panel ol::before { position:absolute; top:18px; bottom:18px; left:14px; width:1px; content:""; background:#29313b; }
.success-next-panel li { position:relative; z-index:1; display:grid; grid-template-columns:29px 1fr; align-items:center; gap:10px; }
.success-next-panel li b { display:grid; width:29px; height:29px; place-items:center; color:#707a86; border:1px solid #2d3641; border-radius:8px; background:#10151d; font-size:7px; }
.success-next-panel li.active b { color:#07110c; border-color:var(--commerce-green); background:var(--commerce-green); }
.success-next-panel li span { display:flex; color:#5d6773; flex-direction:column; font-size:6px; line-height:1.4; }
.success-next-panel li strong { color:#aeb5bd; font-size:8px; }
.success-next-panel li.active strong { color:#e4e8e0; }
.success-notice { display:flex; gap:9px; margin-bottom:13px; padding:11px; border-radius:9px; background:#090d12; }
.success-notice > i { color:#66a6d9; font-size:15px; }
.success-notice p { display:flex; margin:0; color:#59636f; flex-direction:column; font-size:6px; line-height:1.5; }
.success-notice strong { color:#a7afb8; font-size:7px; }
.success-secondary { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:9px; color:#78828e; font-size:7px; font-weight:850; }
.success-secondary:hover { color:#e3e7df; }
.success-support { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:14px; padding:14px 17px; border:1px solid var(--commerce-line); border-radius:12px; background:#0c1016; }
.success-support > div { display:flex; align-items:center; gap:10px; }
.success-support > div > i { color:var(--commerce-blue); font-size:16px; }
.success-support span { display:flex; color:#606a76; flex-direction:column; font-size:7px; }
.success-support strong { color:#b3bac2; font-size:8px; }
.success-support > a { color:var(--commerce-acid); font-size:7px; font-weight:900; }
.success-support > a i { margin-left:5px; }
@media (max-width:991px) { .success-layout { grid-template-columns:1fr; }.success-overview { grid-template-columns:repeat(2,1fr); } }
@media (max-width:575px) { .success-overview { grid-template-columns:1fr 1fr; }.success-items article { grid-template-columns:66px 1fr; }.success-item-image { width:66px; height:62px; }.success-items article > strong { grid-column:2; }.success-support { align-items:flex-start; flex-direction:column; } }