:root { --bg:#08060f; --surface:#100a1a; --line:rgba(255,255,255,.11); --line-strong:rgba(255,255,255,.19); --text:#f7f3fb; --muted:#9d95a6; --purple:#ad61f7; --purple-light:#d09cff; --green:#66e4a4; --shell:1220px; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--bg); }
body { min-width:320px; min-height:100vh; margin:0; background:radial-gradient(circle at 72% 28%,rgba(143,52,226,.12),transparent 35%),linear-gradient(rgba(8,6,15,.9),rgba(8,6,15,.98)),url('/assets/x-marketplace-banner.png') center/cover fixed; color:var(--text); font-family:"Manrope",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input { color:inherit; font:inherit; }
h1,strong,.product-brand { font-family:"Syne",system-ui,sans-serif; }
.product-shell { width:min(calc(100% - 40px),var(--shell)); margin-inline:auto; }
.product-nav { border-bottom:1px solid var(--line); background:rgba(8,6,15,.78); backdrop-filter:blur(18px); }
.nav-inner { display:flex; height:78px; align-items:center; justify-content:space-between; }
.product-brand { display:flex; align-items:center; gap:11px; font-size:18px; font-weight:700; letter-spacing:-.04em; }
.product-brand > span { display:grid; width:39px; height:39px; place-items:center; border:1px solid rgba(202,139,255,.36); border-radius:12px; background:linear-gradient(145deg,rgba(190,105,255,.28),rgba(71,20,128,.72)); color:#dba9ff; transform:rotate(-4deg); }
.product-brand svg { width:23px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-width:2.8; filter:drop-shadow(0 0 6px rgba(190,105,255,.8)); }
.back-link { padding:9px 13px; border:1px solid var(--line); border-radius:9px; color:#aaa1b3; font-size:11px; font-weight:700; transition:.2s; }
.back-link:hover { border-color:rgba(202,139,255,.45); color:white; }
.product-main { padding:42px 0 100px; }
.breadcrumbs { display:flex; gap:10px; margin-bottom:20px; color:#746b7c; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.breadcrumbs a:hover { color:var(--purple-light); }
.detail-card { display:grid; grid-template-columns:1.04fr .96fr; overflow:hidden; border:1px solid var(--line-strong); border-radius:26px; background:rgba(14,9,23,.88); box-shadow:0 38px 110px rgba(0,0,0,.45); backdrop-filter:blur(16px); }
.detail-image { position:relative; min-height:610px; overflow:hidden; border-right:1px solid var(--line); background:#0a0710; }
.detail-image::after { position:absolute; inset:0; background:linear-gradient(to top,rgba(8,5,13,.28),transparent 40%); content:""; pointer-events:none; }
.detail-image img { width:100%; height:100%; object-fit:cover; }
.detail-panel { display:flex; min-width:0; flex-direction:column; justify-content:center; padding:52px; }
.detail-eyebrow { margin:0 0 12px; color:var(--purple-light); font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.detail-panel h1 { margin:0 0 22px; font-size:clamp(42px,5vw,64px); line-height:.98; letter-spacing:-.065em; }
.price-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.price-row > strong { font-size:30px; }
.stock-count { display:flex; align-items:center; gap:7px; color:#87d7aa; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.stock-count i { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.trust-badges { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:28px; }
.trust-badges span { display:flex; min-height:52px; align-items:center; gap:7px; justify-content:center; padding:8px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.025); color:#b5adbd; font-size:8px; font-weight:700; text-align:center; }
.trust-badges i { color:var(--purple-light); font-style:normal; }
.purchase-row { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:17px; padding-top:24px; border-top:1px solid var(--line); }
.quantity-field > label,.total-field > span { display:block; margin-bottom:8px; color:#766d7e; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.quantity-control { display:flex; overflow:hidden; border:1px solid var(--line-strong); border-radius:10px; background:rgba(255,255,255,.025); }
.quantity-control button { width:38px; border:0; background:transparent; cursor:pointer; font-size:18px; }
.quantity-control button:hover { background:rgba(173,97,247,.12); }
.quantity-control input { width:48px; height:40px; border:0; border-right:1px solid var(--line); border-left:1px solid var(--line); outline:0; background:transparent; text-align:center; font-weight:700; -moz-appearance:textfield; }
.quantity-control input::-webkit-inner-spin-button { appearance:none; }
.total-field { text-align:right; }
.total-field strong { font-size:24px; }
.buy-button { display:flex; min-height:54px; align-items:center; justify-content:center; gap:10px; border:1px solid rgba(167,140,255,.55); border-radius:12px; background:linear-gradient(135deg,#675ee8,#8f50e8); box-shadow:0 15px 35px rgba(94,64,214,.24),inset 0 1px rgba(255,255,255,.16); font-size:12px; font-weight:800; transition:.22s; }
.buy-button:hover { box-shadow:0 20px 45px rgba(105,64,214,.38),inset 0 1px rgba(255,255,255,.2); transform:translateY(-2px); }
.buy-button svg { width:19px; fill:currentColor; }
.purchase-note { margin:12px 0 0; color:#6f6776; font-size:9px; text-align:center; }
.term-switcher { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin-bottom:23px; padding:5px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }
.term-switcher a { padding:10px; border-radius:8px; color:#877d90; font-size:10px; font-weight:700; text-align:center; }
.term-switcher a.active { background:linear-gradient(135deg,rgba(167,79,248,.32),rgba(106,43,184,.18)); color:white; box-shadow:inset 0 1px rgba(255,255,255,.08); }
.package-options { display:grid; gap:7px; padding:0; margin:0 0 20px; border:0; }
.package-options legend { margin-bottom:9px; color:#766d7e; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.package-options label { display:block; cursor:pointer; }
.package-options input { position:absolute; opacity:0; pointer-events:none; }
.package-options label > span { display:flex; min-height:49px; align-items:center; justify-content:space-between; padding:0 15px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); transition:.2s; }
.package-options label:hover > span { border-color:rgba(193,127,255,.4); }
.package-options input:checked + span { border-color:rgba(201,140,255,.68); background:rgba(157,67,238,.13); box-shadow:0 0 0 2px rgba(173,97,247,.07); }
.package-options strong { font-family:"Manrope",sans-serif; font-size:11px; }
.package-options small { color:var(--purple-light); font-size:11px; font-weight:700; }
.boost-detail-card .detail-panel { padding-top:38px; padding-bottom:38px; }
.boost-detail-card .detail-panel h1 { margin-bottom:16px; }
.boost-detail-card .trust-badges { margin-bottom:20px; }
.boost-detail-card .purchase-row { padding-top:18px; }
@media (max-width:900px) { .detail-card { grid-template-columns:1fr; } .detail-image { min-height:auto; aspect-ratio:46/30; border-right:0; border-bottom:1px solid var(--line); } .detail-panel { padding:42px; } }
@media (max-width:560px) { .product-shell { width:min(calc(100% - 24px),var(--shell)); } .product-brand { font-size:15px; } .back-link { padding:8px 10px; font-size:9px; } .product-main { padding-top:26px; } .detail-card { border-radius:19px; } .detail-panel { padding:30px 20px; } .detail-panel h1 { font-size:42px; } .trust-badges { grid-template-columns:1fr; } .trust-badges span { justify-content:flex-start; padding-left:14px; } .purchase-row { align-items:stretch; flex-direction:column; } .total-field { display:flex; align-items:center; justify-content:space-between; text-align:left; } .total-field > span { margin:0; } }
:focus-visible { outline:2px solid var(--purple-light); outline-offset:3px; }