/* Pogo.Market � shared stylesheet */ :root{ --bg-canvas:#FFFBF0; --bg-alt:#FFF4D6; --panel:#FFFFFF; --line:#F0DFAE; --line-soft:#F7EBCB; --ink:#241608; --ink-2:#5C4830; --muted:#7A6A50; --muted-2:#A79572; --gold:#FFCB05; --gold-lite:#FFE484; --gold-deep:#E0A200; --gold-shadow:#A87400; --gold-tint:#FFF3CE; --red:#E7291D; --red-dark:#B81F15; --green:#1E8E5A; --green-tint:#E4F5EC; --deep:#1B1006; --deep-2:#2B0906; --nav-bg:rgba(255,251,240,0.88); --radius:16px; --display:'Baloo 2', system-ui, sans-serif; --body:'Manrope', system-ui, sans-serif; --mono:'JetBrains Mono', ui-monospace, monospace; } /* Dark mode — same variables, warm-dark palette. Toggled by assets/theme.js, which sets data-theme on (persisted) and falls back to the OS preference on first visit. */ :root[data-theme="dark"]{ --bg-canvas:#181008; --bg-alt:#221809; --panel:#2A1D10; --line:#4A3820; --line-soft:#3A2C18; --ink:#F5EAD8; --ink-2:#D8C4A5; --muted:#B39D7C; --muted-2:#8A785C; --gold-tint:#3A2E12; --green-tint:#163326; --nav-bg:rgba(24,16,8,0.88); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg-canvas:#181008; --bg-alt:#221809; --panel:#2A1D10; --line:#4A3820; --line-soft:#3A2C18; --ink:#F5EAD8; --ink-2:#D8C4A5; --muted:#B39D7C; --muted-2:#8A785C; --gold-tint:#3A2E12; --green-tint:#163326; --nav-bg:rgba(24,16,8,0.88); } } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--bg-canvas); color:var(--ink); font-family:var(--body); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body.locked{overflow:hidden;} img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;} .wrap{max-width:1160px;margin:0 auto;padding:0 32px;} :focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:6px;} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} /* ---------- COIN (signature element) ---------- */ /* A stack of real coin discs. Height encodes bundle size — the pile literally grows with what you're buying. */ .stack{position:relative;display:block;margin:0 auto;} .stack .c{ position:absolute;left:0;width:100%; border-radius:50%; background: radial-gradient(ellipse at 34% 28%, var(--gold-lite) 0%, var(--gold) 42%, var(--gold-deep) 78%, var(--gold-shadow) 100%); box-shadow:0 1px 0 rgba(120,80,0,.35), inset 0 -1px 2px rgba(255,255,255,.45); } .stack .c.top{ background: radial-gradient(ellipse at 36% 30%, #FFF1B8 0%, var(--gold-lite) 30%, var(--gold) 62%, var(--gold-deep) 100%); box-shadow:0 2px 6px rgba(168,116,0,.3), inset 0 -1px 2px rgba(255,255,255,.6); } .stack .c.top::after{ content:"";position:absolute;inset:22% 30%; border-radius:50%; border:1.5px solid rgba(168,116,0,.5); } /* ---------- NAV ---------- */ header.nav{ position:sticky;top:0;z-index:50; background:var(--nav-bg); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .nav-inner{ max-width:1160px;margin:0 auto;padding:14px 32px; display:flex;align-items:center;justify-content:space-between;gap:24px; } .logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:21px;} /* Wordmark — "Coin Slot": the separator dot is an actual PokéCoin, sized in em so it tracks the type at any scale. Chakra Petch's clipped corners echo the mono data language already running through the price cards. */ .wordmark{ display:inline-flex;align-items:center;line-height:1;white-space:nowrap; font-family:'Chakra Petch',sans-serif;font-weight:700; letter-spacing:.005em;text-transform:uppercase; } .wm-b{color:var(--red);} .wm-coin{ display:inline-block;flex-shrink:0;border-radius:50%; width:.42em;height:.42em;margin:0 .16em; background:radial-gradient(120% 120% at 35% 30%, #FFF1B8 0%, var(--gold) 52%, var(--gold-deep) 100%); box-shadow:0 1px 2px rgba(168,116,0,.5), inset 0 -1px 1px rgba(255,255,255,.5); } /* On the dark footer the mid red muddies, so use the ball's highlight red — same gradient, ~6.9:1 against #2B0906 instead of ~4.3:1. */ .footer-brand .wm-b{color:#FF6A5E;} /* ---------- ANIMATED BRAND MARK ---------- Adapted from the Claude Design source ("Pogo.Market logo animation"). Geometry is proportional to --s, so one rule serves every size. The bob and ground shadow from the original are intentionally dropped in the nav — a 14px hop on a 32px mark is far too much in a sticky header. */ .pball{ --s:32px; /* inline-block so the mark sizes itself anywhere, not only inside a flex parent */ position:relative;display:inline-block;vertical-align:middle;flex-shrink:0; width:var(--s);height:var(--s);border-radius:50%;overflow:hidden; box-shadow: inset calc(var(--s) * -0.100) calc(var(--s) * -0.136) calc(var(--s) * 0.27) rgba(0,0,0,.28), inset calc(var(--s) * 0.118) calc(var(--s) * 0.118) calc(var(--s) * 0.21) rgba(255,255,255,.55); animation:pb-spin 6s linear infinite; } .pball > span{position:absolute;} .pb-top{left:0;right:0;top:0;height:50%;} .pb-bot{left:0;right:0;bottom:0;height:50%;} .pb-band{left:0;right:0;top:50%;height:6.8%;transform:translateY(-50%);} .pb-hub{ top:50%;left:50%;width:30%;height:30%;transform:translate(-50%,-50%); border-radius:50%;display:flex;align-items:center;justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.35); } .pb-core{display:block;width:58%;height:58%;border-radius:50%;} .pb-gloss{ top:10%;left:15.5%;width:31.8%;height:20%;border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0)); } @keyframes pb-spin{to{transform:rotate(360deg);}} /* Site colourway: red shell, ink band, PokéCoin gold core */ .pb-top{background:radial-gradient(120% 150% at 34% 20%, #FF6A5E 0%, var(--red) 60%, var(--red-dark) 100%);} .pb-bot{background:radial-gradient(120% 150% at 34% 90%, #FFFFFF 0%, #FFF8E8 62%, var(--line) 100%);} .pb-band,.pb-hub{background:var(--deep);} .pb-core{background:radial-gradient(120% 120% at 35% 30%, #FFF1B8 0%, var(--gold) 55%, var(--gold-deep) 100%);} /* Original colourway from the Claude Design file */ .pball.blue .pb-top{background:radial-gradient(120% 150% at 34% 20%, oklch(0.72 0.19 250) 0%, oklch(0.55 0.19 255) 60%, oklch(0.42 0.16 258) 100%);} .pball.blue .pb-bot{background:radial-gradient(120% 150% at 34% 90%, #FFFFFF 0%, #E7EAEF 62%, #CFD4DC 100%);} .pball.blue .pb-band,.pball.blue .pb-hub{background:oklch(0.28 0.03 258);} .pball.blue .pb-core{background:radial-gradient(120% 120% at 35% 30%, #FFFFFF 0%, #DFE3EA 100%);} nav.links{display:flex;gap:22px;font-size:14px;color:var(--muted);font-weight:600;white-space:nowrap;} nav.links a{transition:color .15s ease;} nav.links a:hover{color:var(--red);} .btn{ font-family:var(--body);font-weight:700;font-size:14.5px; padding:11px 22px;border-radius:100px;border:1.5px solid transparent;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;gap:8px; transition:transform .14s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease; } .btn:active{transform:translateY(1px);} .btn-primary{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(231,41,29,.26);} .btn-primary:hover{background:var(--red-dark);box-shadow:0 9px 26px rgba(231,41,29,.36);} .btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink);} .btn-ghost:hover{background:var(--ink);color:var(--bg-canvas);} .btn-sm{padding:9px 17px;font-size:13.5px;} .btn-block{width:100%;} /* ---------- HERO ---------- */ .hero{ position:relative;overflow:hidden; background: radial-gradient(900px 420px at 78% 18%, rgba(255,203,5,.20), transparent 62%), radial-gradient(700px 380px at 12% 92%, rgba(231,41,29,.14), transparent 60%), linear-gradient(165deg, #24150A 0%, var(--deep) 55%, #150B04 100%); border-radius:0 0 34px 34px; padding:78px 0 82px; min-height:648px;display:flex;align-items:center; } .hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;} /* Directional scrim: dense on the left so the copy keeps contrast against a light studio clip, clearing to almost nothing on the right so the subject still reads. Lower layers warm the neutral grey toward the palette. */ .hero-scrim{ position:absolute;inset:0;z-index:1; background: linear-gradient(100deg, rgba(20,11,4,.94) 0%, rgba(20,11,4,.87) 25%, rgba(20,11,4,.58) 47%, rgba(20,11,4,.18) 68%, rgba(20,11,4,.04) 85%), radial-gradient(760px 420px at 12% 90%, rgba(231,41,29,.18), transparent 62%), linear-gradient(to bottom, rgba(27,16,6,.34), rgba(27,16,6,.08) 42%, rgba(27,16,6,.48)); } .hero-inner{position:relative;z-index:2;width:100%;} .hero-content{max-width:545px;} .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-family:var(--mono);font-size:12px;letter-spacing:.05em; color:var(--gold);background:rgba(255,203,5,.10); border:1px solid rgba(255,203,5,.32);padding:7px 14px;border-radius:100px;margin-bottom:22px; } .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 9px var(--gold);animation:pulse 2.4s ease-in-out infinite;} @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}} h1.headline{ font-family:var(--display);font-weight:800;font-size:clamp(38px,4.7vw,60px); line-height:1.04;letter-spacing:-.015em;margin-bottom:20px;color:#fff; } h1.headline .accent{color:var(--gold);} .hero-sub{color:#E9D9BE;font-size:17.5px;max-width:470px;margin-bottom:30px;} .hero-ctas{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:32px;} .hero .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;} .hero .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;} .hero-trust{display:flex;gap:22px;flex-wrap:wrap;} .hero-trust .ti{display:flex;align-items:center;gap:7px;font-size:13px;color:#E9D9BE;font-weight:600;} .hero-trust svg{width:15px;height:15px;color:var(--gold);flex-shrink:0;} /* ---------- TRUST STRIP ---------- */ .trust-strip{border-bottom:1px solid var(--line);background:var(--bg-alt);padding:24px 0;} .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .trust-item{display:flex;align-items:center;gap:12px;} .trust-item svg{width:21px;height:21px;color:var(--red);flex-shrink:0;} .trust-item strong{display:block;color:var(--ink);font-size:13.5px;font-weight:700;line-height:1.3;} .trust-item span{font-size:12.5px;color:var(--muted);} /* ---------- SECTIONS ---------- */ section.sec{padding:76px 0;} .sec-head{margin-bottom:34px;max-width:620px;} .sec-label{font-family:var(--mono);font-size:11.5px;color:var(--red-dark);text-transform:uppercase;letter-spacing:.09em;margin-bottom:9px;} .sec-title{font-family:var(--display);font-weight:700;font-size:clamp(27px,3.1vw,38px);letter-spacing:-.015em;line-height:1.14;} .sec-desc{color:var(--muted);font-size:15.5px;margin-top:11px;} /* ---------- BUNDLE GRID ---------- */ .bundle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .bundle{ position:relative;display:flex;flex-direction:column; background:var(--panel);border:1px solid var(--line);border-radius:20px; padding:24px 22px 22px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .bundle:hover{transform:translateY(-4px);border-color:var(--gold-deep);box-shadow:0 22px 44px -26px rgba(120,70,0,.42);} .bundle.featured{border-color:var(--gold-deep);box-shadow:0 0 0 3px var(--gold-tint);} .bundle-tag{ position:absolute;top:-11px;left:22px; font-family:var(--mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; padding:5px 11px;border-radius:100px;background:var(--deep);color:var(--gold); } .bundle-tag.rate{background:var(--green);color:#fff;} .bundle-art{height:118px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:16px;} .bundle-coins{font-family:var(--display);font-size:29px;font-weight:800;line-height:1;letter-spacing:-.01em;} .bundle-coins small{font-size:14px;font-weight:600;color:var(--muted);margin-left:5px;letter-spacing:0;} .bundle-rate{ font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:7px; display:flex;align-items:center;gap:7px;flex-wrap:wrap; } .rate-pill{background:var(--green-tint);color:var(--green);font-weight:700;padding:3px 8px;border-radius:6px;} .bundle-price{display:flex;align-items:baseline;gap:9px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft);} .bundle-price .now{font-family:var(--mono);font-size:24px;font-weight:700;letter-spacing:-.02em;} .bundle-price .was{font-family:var(--mono);font-size:13px;color:var(--muted-2);text-decoration:line-through;} .bundle-note{font-size:12.5px;color:var(--muted);margin-top:4px;margin-bottom:16px;} .bundle .btn{margin-top:auto;} /* ---------- ART SLOT ---------- Placeholder standing in for artwork still to be produced. Swap the whole .slot element for … — the card layout doesn't change. */ .slot{ position:relative;display:flex;align-items:center;justify-content:center; background: repeating-linear-gradient(135deg, rgba(255,203,5,.07) 0 8px, transparent 8px 16px), linear-gradient(165deg, var(--gold-tint), #FFE7A6); border:1px dashed rgba(168,116,0,.32);border-radius:14px; } .slot span{ font-family:var(--mono);font-size:10px;letter-spacing:.12em; color:var(--gold-shadow);opacity:.75;text-transform:uppercase; } /* ---------- ITEM BUNDLES ---------- */ .bundles-band{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .pack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .pack{ background:var(--panel);border:1px solid var(--line);border-radius:18px; padding:18px;display:flex;flex-direction:column;position:relative; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .pack:hover{transform:translateY(-4px);border-color:var(--gold-deep);box-shadow:0 22px 44px -26px rgba(120,70,0,.42);} .pack .slot{height:104px;margin-bottom:14px;} .pack-save{ position:absolute;top:10px;right:10px;z-index:2; font-family:var(--mono);font-size:10.5px;font-weight:700; background:var(--red);color:#fff;padding:4px 8px;border-radius:6px; } .pack-name{font-family:var(--display);font-size:16.5px;font-weight:700;line-height:1.2;} .pack-contents{list-style:none;margin:11px 0 14px;display:flex;flex-direction:column;gap:5px;} .pack-contents li{ font-size:12.5px;color:var(--muted);display:flex;gap:7px;align-items:baseline; } .pack-contents b{font-family:var(--mono);font-size:11.5px;color:var(--ink);font-weight:700;min-width:26px;} .pack-foot{margin-top:auto;padding-top:13px;border-top:1px solid var(--line-soft);} .pack-price{display:flex;align-items:baseline;gap:8px;margin-bottom:11px;} .pack-price .now{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:-.02em;} .pack-price .was{font-family:var(--mono);font-size:12px;color:var(--muted-2);text-decoration:line-through;} /* ---------- ITEMS ---------- */ .item-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;} .item{ background:var(--panel);border:1px solid var(--line);border-radius:16px; padding:14px;display:flex;flex-direction:column;position:relative; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .item:hover{transform:translateY(-3px);border-color:var(--gold-deep);box-shadow:0 16px 32px -20px rgba(120,70,0,.4);} .item .slot{height:78px;margin-bottom:11px;} .item-qty{ position:absolute;top:9px;right:9px;z-index:2; font-family:var(--mono);font-size:10.5px;font-weight:700; background:var(--deep);color:var(--gold);padding:3px 7px;border-radius:6px; } .item-name{font-size:13.5px;font-weight:700;line-height:1.3;min-height:35px;} .item-foot{margin-top:auto;padding-top:10px;} .item-price{display:flex;align-items:baseline;gap:6px;margin-bottom:9px;flex-wrap:wrap;} .item-price .now{font-family:var(--mono);font-size:15.5px;font-weight:700;} .item-price .was{font-family:var(--mono);font-size:11px;color:var(--muted-2);text-decoration:line-through;} .item .btn{padding:8px 12px;font-size:12.5px;} /* ---------- ABOUT / CONTACT ---------- */ .about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:start;} .about-copy p{color:var(--muted);font-size:15px;margin-bottom:14px;max-width:560px;} .about-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 20px;} .stat b{display:block;font-family:var(--mono);font-size:24px;font-weight:700;letter-spacing:-.02em;} .stat span{font-size:12.5px;color:var(--muted);} .contact-band{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .contact-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;} .contact-card h3{font-family:var(--display);font-size:17px;font-weight:700;margin-bottom:6px;} .contact-card p{font-size:13.5px;color:var(--muted);margin-bottom:12px;} .contact-card a{font-family:var(--mono);font-size:13px;color:var(--red-dark);font-weight:700;} .contact-card a:hover{text-decoration:underline;} /* ---------- HOW ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;} .step{position:relative;padding-top:22px;border-top:2px solid var(--line);} .step.done{border-top-color:var(--gold-deep);} .step-k{font-family:var(--mono);font-size:11.5px;color:var(--gold-shadow);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;} .step h3{font-family:var(--display);font-size:19px;font-weight:700;margin-bottom:7px;} .step p{color:var(--muted);font-size:14.5px;} /* ---------- FAQ ---------- */ .faq{max-width:760px;} .qa{border-bottom:1px solid var(--line);} .qa summary{ padding:19px 0;font-weight:700;font-size:15.5px;cursor:pointer; display:flex;justify-content:space-between;align-items:center;gap:18px;list-style:none; } .qa summary::-webkit-details-marker{display:none;} .qa summary::after{content:"+";font-family:var(--mono);font-size:19px;color:var(--gold-shadow);flex-shrink:0;transition:transform .2s ease;} .qa[open] summary::after{transform:rotate(45deg);} .qa p{padding:0 0 20px;color:var(--muted);font-size:14.5px;max-width:660px;} /* ---------- REVIEWS ---------- */ .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .review{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;} .review-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;} .review-stars{color:var(--gold-deep);font-size:13px;letter-spacing:2px;} .review-when{font-family:var(--mono);font-size:11px;color:var(--muted-2);} .review p{font-size:14.5px;line-height:1.6;margin-bottom:16px;} .review-who{display:flex;align-items:center;gap:10px;font-size:12.5px;} .review-who b{font-weight:700;} .review-who span{color:var(--muted-2);font-family:var(--mono);font-size:11px;} .verified-mark{display:inline-flex;align-items:center;gap:4px;color:var(--green);font-weight:700;font-size:11.5px;} .verified-mark svg{width:13px;height:13px;} /* ---------- FOOTER ---------- */ footer{padding:56px 0 26px;background:var(--deep-2);color:#F6E8C8;} .footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;margin-bottom:40px;} .footer-brand .logo{color:#fff;} .footer-brand p{color:#D8B98F;font-size:13.5px;margin-top:13px;max-width:290px;} .footer-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--gold);font-family:var(--mono);margin-bottom:15px;} .footer-col a{display:block;color:#D8B98F;font-size:14px;margin-bottom:10px;transition:color .15s ease;} .footer-col a:hover{color:var(--gold);} .footer-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(246,232,200,.14);color:#B99A72;font-size:12.5px;} .disclaimer{font-size:11.5px;color:#A98D68;max-width:920px;margin-top:16px;line-height:1.65;} /* ---------- CHECKOUT DRAWER ---------- */ .scrim{ position:fixed;inset:0;z-index:90;background:rgba(20,10,4,.55); backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s ease; } .scrim.open{opacity:1;pointer-events:auto;} .drawer{ position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(460px,100%); background:var(--bg-canvas);border-left:1px solid var(--line); display:flex;flex-direction:column; transform:translateX(102%);transition:transform .32s cubic-bezier(.32,.72,0,1); box-shadow:-24px 0 60px -30px rgba(20,10,4,.5); } .drawer.open{transform:translateX(0);} .dr-head{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:20px 24px;border-bottom:1px solid var(--line);background:var(--panel); } .dr-head h2{font-family:var(--display);font-size:19px;font-weight:700;} .dr-close{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .15s ease;} .dr-close:hover{border-color:var(--red);color:var(--red);} .dr-body{flex:1;overflow-y:auto;padding:24px;} .dr-foot{padding:18px 24px 22px;border-top:1px solid var(--line);background:var(--panel);} .dr-item{display:flex;gap:16px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line-soft);} .dr-item-art{width:72px;height:72px;border-radius:14px;background:linear-gradient(165deg,var(--gold-tint),#FFE7A6);display:flex;align-items:flex-end;justify-content:center;flex-shrink:0;border:1px solid var(--line);} .dr-item-art .slot{width:100%;height:100%;border-radius:13px;} .dr-item-name{font-family:var(--display);font-size:18px;font-weight:700;line-height:1.2;} .dr-item-rate{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:5px;} .qty-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-soft);} .qty-label{font-size:14px;font-weight:700;} .qty-label em{display:block;font-style:normal;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px;} .stepper{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel);} .stepper button{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:17px;font-weight:700;transition:background .15s ease;} .stepper button:hover:not(:disabled){background:var(--gold-tint);} .stepper button:disabled{color:var(--muted-2);cursor:not-allowed;} .stepper output{width:40px;text-align:center;font-family:var(--mono);font-weight:700;font-size:15px;} .field{margin-top:17px;} /* Direct child only — the payment rows are also