/* ══════════════════════════════════════════════════════════════ GPeptides — gp-checkout.css (Kasse, #view-checkout) Eigenständiges, unter #view-checkout gescoptes Design: warmes Off-White, Anthrazit, Kobaltblau (Shop-Marke) als Akzent. Mobile-first; Desktop ab 900px zweispaltig mit sticky Übersicht. Präfix „co-" — kollidiert nicht mit gp.css / gp-mobile.css. ══════════════════════════════════════════════════════════════ */ :root{ --co-bg:#FBF8F6; --co-surface:#FFFFFF; --co-ink:#26262B; --co-ink2:#55525B; --co-mute:#8E8A93; --co-line:#ECE6E8; --co-line2:#E1DADD; --co-rose:#C9D0FF; --co-rose-tint:#EEF0FF; --co-pink:#3550EE; --co-accent:#2A41E8; --co-magenta:#1B2BC4; --co-grad:linear-gradient(135deg,#3B55F5 0%,#2A41E8 55%,#1B2BC4 100%); --co-ok:#2E9E6B; --co-ok-bg:#EEF9F3; --co-err:#C62A4A; --co-err-bg:#FDF0F2; --co-radius:14px; --co-ease:cubic-bezier(.22,.8,.28,1); } /* Auf der Kasse: globale Leiste, Burger-Menü und Footer ausblenden, damit nichts vom Abschluss ablenkt. Warenkorb-Drawer bleibt nutzbar. */ body.co-active{padding-top:0;background:var(--co-bg)} /* gp-mobile.css setzt html,body{overflow-x:hidden} (≤680px) — damit wird body zum Scroll-Container und position:sticky der Kopfzeile greift nicht mehr. overflow-x:clip verhindert seitliches Scrollen genauso, lässt sticky aber intakt. */ @media (max-width:680px){ html:has(body.co-active),body.co-active{overflow-x:clip!important} } body.co-active .gpnav,body.co-active .gpmob,body.co-active .gpfooter{display:none!important} /* Weiche Übergabe Warenkorb → Kasse (gp.js setzt body.cg-handoff) */ body.cg-handoff .gpdrawer{transition:transform .34s cubic-bezier(.32,.72,.28,1),opacity .3s ease!important;opacity:0} body.cg-handoff .gpov{transition:opacity .3s ease!important} #view-checkout{color:var(--co-ink);font-family:"Inter",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;background:var(--co-bg)} #view-checkout *,#view-checkout *::before,#view-checkout *::after{box-sizing:border-box;min-width:0} #view-checkout h1,#view-checkout h2,#view-checkout h3{margin:0;font-family:"Archivo","Inter",sans-serif;letter-spacing:-.01em} #view-checkout p{margin:0} #view-checkout a{color:inherit} #view-checkout button{font-family:inherit;cursor:pointer} #view-checkout svg{display:block} #view-checkout .co-hide{display:none!important} #view-checkout :focus-visible{outline:3px solid rgba(42,65,232,.45);outline-offset:2px;border-radius:8px} /* ── Kopfzeile ───────────────────────────────────────────────── */ #view-checkout .co-head{position:sticky;top:0;z-index:20;background:rgba(251,248,246,.86);backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--co-line)} #view-checkout .co-head-in{max-width:1180px;margin:0 auto;padding:0 16px;height:60px;display:flex;align-items:center;gap:14px} #view-checkout .co-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:"Archivo";font-weight:900;font-size:16px;letter-spacing:-.01em} #view-checkout .co-brand .mk{width:30px;height:30px;border-radius:9px;background:var(--co-ink);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900;letter-spacing:0} #view-checkout .co-backcart{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:none;border:none;padding:8px 4px;color:var(--co-ink2);font-size:13px;font-weight:600;transition:color .2s} #view-checkout .co-backcart:hover{color:var(--co-magenta)} #view-checkout .co-backcart svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2} #view-checkout .co-secure{display:none;align-items:center;gap:6px;font-size:12px;color:var(--co-mute);font-weight:500;white-space:nowrap} #view-checkout .co-secure svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2} /* ── Seite / Raster ──────────────────────────────────────────── */ #view-checkout .co-wrap{max-width:1180px;margin:0 auto;padding:18px 16px 120px} #view-checkout .co-grid{display:grid;grid-template-columns:1fr;gap:18px} #view-checkout .co-main{order:2;min-width:0} #view-checkout .co-aside{order:1;min-width:0} /* ── Fortschritt ─────────────────────────────────────────────── */ #view-checkout .co-steps{list-style:none;margin:0 0 18px;padding:0;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--co-mute)} #view-checkout .co-steps li{display:flex;align-items:center;gap:7px;white-space:nowrap} #view-checkout .co-steps li+li::before{content:"";width:18px;height:1px;background:var(--co-line2);margin-right:2px} #view-checkout .co-steps .n{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--co-line2);display:grid;place-items:center;font-size:11px;font-weight:700;transition:all .3s var(--co-ease)} #view-checkout .co-steps .n svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:3;display:none} #view-checkout .co-steps li.cur{color:var(--co-ink)} #view-checkout .co-steps li.cur .n{border-color:var(--co-accent);background:var(--co-accent);color:#fff} #view-checkout .co-steps li.done{color:var(--co-ink2)} #view-checkout .co-steps li.done .n{border-color:var(--co-accent);background:var(--co-accent);color:#fff;font-size:0} #view-checkout .co-steps li.done .n svg{display:block} /* ── Abschnitte (Kontakt · Lieferung · Zahlung) ─────────────── */ #view-checkout .co-sec{background:var(--co-surface);border:1px solid var(--co-line);border-radius:var(--co-radius);margin-bottom:12px;transition:border-color .3s,box-shadow .3s} #view-checkout .co-sec.open{border-color:var(--co-line2);box-shadow:0 10px 30px -22px rgba(38,38,43,.25)} #view-checkout .co-sec-h{display:flex;align-items:center;gap:12px;padding:16px 18px;width:100%;background:none;border:none;text-align:left;color:inherit} #view-checkout .co-sec-h .num{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--co-line2);display:grid;place-items:center;font-family:"Archivo";font-weight:800;font-size:12px;color:var(--co-mute);flex:none;transition:all .3s var(--co-ease)} #view-checkout .co-sec-h .num svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;display:none} #view-checkout .co-sec.open .co-sec-h .num{border-color:var(--co-accent);background:var(--co-accent);color:#fff} #view-checkout .co-sec.done .co-sec-h .num{border-color:var(--co-ink);background:var(--co-ink);color:#fff;font-size:0} #view-checkout .co-sec.done .co-sec-h .num svg{display:block} #view-checkout .co-sec-h .tt{flex:1;min-width:0} #view-checkout .co-sec-h h2{font-size:17px;font-weight:800} #view-checkout .co-sec-h .sm{display:block;font-size:13px;color:var(--co-ink2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-checkout .co-sec-h .edit{font-size:12.5px;font-weight:600;color:var(--co-magenta);background:none;border:none;padding:6px 4px;display:none} #view-checkout .co-sec.done .co-sec-h .edit{display:inline-block} #view-checkout .co-sec.done .co-sec-h{cursor:pointer} #view-checkout .co-sec.locked{opacity:.55} #view-checkout .co-sec.locked .co-sec-h{cursor:default} #view-checkout .co-sec-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--co-ease)} #view-checkout .co-sec.open .co-sec-b{grid-template-rows:1fr} #view-checkout .co-sec-b>div{overflow:hidden;min-height:0} #view-checkout .co-sec-in{padding:2px 18px 20px} /* ── Formular ────────────────────────────────────────────────── */ #view-checkout .co-f{display:flex;flex-direction:column;gap:6px;margin-bottom:12px} #view-checkout .co-row{display:grid;grid-template-columns:1fr;gap:0 12px} #view-checkout .co-row.c2{grid-template-columns:1fr 1fr} #view-checkout .co-row.c21{grid-template-columns:minmax(0,1fr) minmax(0,2fr)} #view-checkout label.co-lb{font-size:12.5px;font-weight:600;color:var(--co-ink2);display:flex;justify-content:space-between;gap:8px} #view-checkout label.co-lb .opt{font-weight:500;color:var(--co-mute)} #view-checkout .co-in{width:100%;font:inherit;font-size:16px;color:var(--co-ink);background:#fff;border:1px solid var(--co-line2);border-radius:11px;padding:12px 14px;min-height:48px;transition:border-color .2s,box-shadow .2s,background .2s;appearance:none;-webkit-appearance:none} #view-checkout .co-in::placeholder{color:#B4B0B8} #view-checkout .co-in:hover{border-color:#C4CAE6} #view-checkout .co-in:focus{outline:none;border-color:var(--co-accent);box-shadow:0 0 0 3px rgba(42,65,232,.14)} #view-checkout .co-f.err .co-in{border-color:var(--co-err);background:#FFFBFC} #view-checkout .co-f.err .co-in:focus{box-shadow:0 0 0 3px rgba(198,42,74,.14)} #view-checkout .co-f.ok .co-in{border-color:#CFE7DA} #view-checkout select.co-in{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355525B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px} #view-checkout .co-msg{font-size:12.5px;line-height:1.4;color:var(--co-err);display:none;align-items:flex-start;gap:6px;animation:coFade .25s var(--co-ease)} #view-checkout .co-msg svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;flex:none;margin-top:2px} #view-checkout .co-f.err .co-msg{display:flex} #view-checkout .co-hint{font-size:12.5px;color:var(--co-mute);line-height:1.5} #view-checkout .co-hint a,#view-checkout .co-link{color:var(--co-magenta);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(27,43,196,.25);transition:border-color .2s} #view-checkout .co-hint a:hover,#view-checkout .co-link:hover{border-color:var(--co-magenta)} #view-checkout .co-note{font-size:12.5px;color:var(--co-ink2);line-height:1.5;background:var(--co-rose-tint);border:1px solid var(--co-rose);border-radius:10px;padding:10px 12px;margin:2px 0 12px} /* Checkbox-Zeilen */ #view-checkout .co-chk{display:flex;align-items:flex-start;gap:11px;cursor:pointer;padding:6px 0;font-size:13.5px;line-height:1.5;color:var(--co-ink2);user-select:none} #view-checkout .co-chk input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} #view-checkout .co-chk .bx{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--co-line2);background:#fff;display:grid;place-items:center;flex:none;margin-top:1px;transition:all .2s var(--co-ease)} #view-checkout .co-chk .bx svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;transform:scale(.4);opacity:0;transition:all .2s var(--co-ease)} #view-checkout .co-chk:hover .bx{border-color:var(--co-accent)} #view-checkout .co-chk input:checked+.bx{background:var(--co-grad);border-color:transparent} #view-checkout .co-chk input:checked+.bx svg{transform:scale(1);opacity:1} #view-checkout .co-chk input:focus-visible+.bx{outline:3px solid rgba(42,65,232,.35);outline-offset:2px} #view-checkout .co-chk b{color:var(--co-ink);font-weight:600} #view-checkout .co-chk.err .bx{border-color:var(--co-err);box-shadow:0 0 0 3px rgba(198,42,74,.12)} #view-checkout .co-chk .tx a{color:var(--co-magenta);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(27,43,196,.25)} /* Auswahlzeilen (Versandarten) */ #view-checkout .co-opts{display:flex;flex-direction:column;gap:8px;margin:4px 0 6px} #view-checkout .co-opt{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--co-line2);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .22s var(--co-ease),background .22s var(--co-ease),box-shadow .22s var(--co-ease)} #view-checkout .co-opt:hover{border-color:#B9C2F5} #view-checkout .co-opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} #view-checkout .co-opt .rd{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--co-line2);display:grid;place-items:center;flex:none;transition:all .22s var(--co-ease)} #view-checkout .co-opt .rd i{width:9px;height:9px;border-radius:50%;background:var(--co-accent);transform:scale(0);transition:transform .22s var(--co-ease)} #view-checkout .co-opt.sel{border-color:var(--co-accent);background:var(--co-rose-tint);box-shadow:0 0 0 3px rgba(42,65,232,.10)} #view-checkout .co-opt.sel .rd{border-color:var(--co-accent)} #view-checkout .co-opt.sel .rd i{transform:scale(1)} #view-checkout .co-opt .t{flex:1;min-width:0} #view-checkout .co-opt .t b{display:block;font-size:14px;font-weight:700;color:var(--co-ink)} #view-checkout .co-opt .t span{display:block;font-size:12.5px;color:var(--co-ink2);margin-top:2px} #view-checkout .co-opt .p{font-family:"Archivo";font-weight:800;font-size:14px;white-space:nowrap} #view-checkout .co-opt .p.free{color:var(--co-ok)} #view-checkout .co-opt input:focus-visible~.rd{outline:3px solid rgba(42,65,232,.35);outline-offset:2px} /* Buttons */ #view-checkout .co-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:14px 20px;border:none;border-radius:13px;font-family:"Archivo";font-weight:800;font-size:15px;letter-spacing:.01em;color:#fff;background:var(--co-grad);box-shadow:0 10px 26px -14px rgba(27,43,196,.7);transition:transform .2s var(--co-ease),box-shadow .2s var(--co-ease),opacity .2s;position:relative;overflow:hidden} #view-checkout .co-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 70%);transform:translateX(-110%);transition:transform .7s var(--co-ease)} #view-checkout .co-btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(27,43,196,.8)} #view-checkout .co-btn:not(:disabled):hover::after{transform:translateX(110%)} #view-checkout .co-btn:active{transform:translateY(0)} #view-checkout .co-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none} #view-checkout .co-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4} #view-checkout .co-btn .amt{font-weight:700;opacity:.92} #view-checkout .co-btn.busy{pointer-events:none} #view-checkout .co-spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:coSpin .8s linear infinite;flex:none} #view-checkout .co-btn-ghost{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--co-line2);border-radius:11px;padding:11px 16px;font-weight:600;font-size:13.5px;color:var(--co-ink);min-height:44px;transition:border-color .2s,background .2s} #view-checkout .co-btn-ghost:hover{border-color:var(--co-accent);background:var(--co-rose-tint)} #view-checkout .co-actions{display:flex;flex-direction:column;gap:10px;margin-top:6px} #view-checkout .co-actions .co-secure-line{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--co-mute)} #view-checkout .co-actions .co-secure-line svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2} /* ── Zahlung ─────────────────────────────────────────────────── */ #view-checkout .co-legal{display:flex;flex-direction:column;gap:2px;margin-bottom:14px} #view-checkout .co-agree{border:1px solid var(--co-line);border-radius:12px;background:#FDFBFA;padding:6px 12px;margin-bottom:8px} #view-checkout .co-agree-tgl{display:flex;align-items:center;gap:8px;background:none;border:none;padding:8px 0;width:100%;text-align:left;font-size:12.5px;font-weight:600;color:var(--co-magenta)} #view-checkout .co-agree-tgl svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .25s var(--co-ease)} #view-checkout .co-agree-tgl[aria-expanded="true"] svg{transform:rotate(180deg)} #view-checkout .co-agree-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--co-ease)} #view-checkout .co-agree-b.open{grid-template-rows:1fr} #view-checkout .co-agree-b>div{overflow:hidden;min-height:0} #view-checkout .co-read{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--co-magenta);background:var(--co-rose-tint);border:1px solid var(--co-rose);border-radius:10px;padding:9px 11px;margin:6px 0 10px;transition:all .3s var(--co-ease)} #view-checkout .co-read svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none} #view-checkout .co-read.ok{color:var(--co-ok);background:#EDF8F1;border-color:#BFE6CB} #view-checkout .co-checks.locked{opacity:.45;pointer-events:none;filter:grayscale(.6)} #view-checkout .co-ct{border:1px solid var(--co-line);border-radius:10px;background:#fff;padding:10px 12px 14px;max-height:280px} #view-checkout .co-checks{display:flex;flex-direction:column;gap:2px;padding:4px 0 6px;border-top:1px solid var(--co-line)} #view-checkout .co-checks:empty{display:none} #view-checkout .co-chk-item{padding:7px 0;border-bottom:1px dashed var(--co-line)} #view-checkout .co-chk-item:last-child{border-bottom:none} #view-checkout .co-chk-item.err .tx{color:var(--co-err)} #view-checkout .co-sig.err .co-sigwrap{border-color:var(--co-err);box-shadow:0 0 0 3px rgba(198,42,74,.12)} #view-checkout .co-ct{max-height:300px;overflow-y:auto;font-size:12.5px;line-height:1.6;color:var(--co-ink2);padding:6px 4px 12px;scrollbar-width:thin} #view-checkout .co-ct .ct-brand{font-family:"Archivo";font-weight:900;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--co-magenta);text-align:center;margin-bottom:2px} #view-checkout .co-ct .ct-center{text-align:center} #view-checkout .co-ct .ct-muted{font-size:11px;color:var(--co-mute);margin-bottom:8px} #view-checkout .co-ct .ct-divider{height:1px;background:var(--co-line);margin:10px 0} #view-checkout .co-ct .ct-title{font-family:"Archivo";font-weight:900;font-size:13.5px;text-align:center;letter-spacing:.04em;color:var(--co-ink);margin-bottom:2px} #view-checkout .co-ct .ct-sub{font-size:11.5px;text-align:center;margin-bottom:10px} #view-checkout .co-ct .ct-h{font-family:"Archivo";font-weight:800;font-size:12.5px;color:var(--co-ink);margin:12px 0 4px} #view-checkout .co-ct .ct-p{margin-bottom:6px} #view-checkout .co-ct .ct-list{list-style:none;padding:0;margin:0 0 8px} #view-checkout .co-ct .ct-list li{position:relative;padding-left:14px;margin-bottom:4px} #view-checkout .co-ct .ct-list li::before{content:"–";position:absolute;left:0;color:var(--co-accent)} #view-checkout .co-ct .ct-warn{background:var(--co-rose-tint);border:1px solid var(--co-rose);border-radius:8px;padding:8px 10px;font-weight:600;color:var(--co-ink2);font-size:12px;margin-top:6px} #view-checkout .co-ct .ct-pts{margin:8px 0 0;padding:0;list-style:none} #view-checkout .co-ct .ct-pts li{position:relative;padding-left:18px;margin-bottom:5px} #view-checkout .co-ct .ct-pts li::before{content:"✓";position:absolute;left:0;color:var(--co-accent);font-weight:700} #view-checkout .co-express{position:relative;margin:4px 0 0} #view-checkout .co-express-el{min-height:0} #view-checkout .co-express.gated .co-express-el{opacity:.45;filter:saturate(.6)} #view-checkout .co-express-gate{position:absolute;inset:0;background:transparent;border:none;cursor:not-allowed;display:none;border-radius:12px} #view-checkout .co-express.gated .co-express-gate{display:block} #view-checkout .co-express-note{font-size:12px;color:var(--co-mute);text-align:center;margin-top:8px} #view-checkout .co-or{display:flex;align-items:center;gap:12px;margin:16px 0 14px;font-size:12.5px;font-weight:600;color:var(--co-mute);text-transform:none} #view-checkout .co-or::before,#view-checkout .co-or::after{content:"";flex:1;height:1px;background:var(--co-line2)} #view-checkout .co-pay-el{min-height:120px;position:relative} #view-checkout .co-pay-skel{display:flex;flex-direction:column;gap:10px;padding:2px 0} #view-checkout .co-pay-skel i{display:block;height:52px;border-radius:12px;background:linear-gradient(90deg,#F3EEF0 25%,#FAF6F8 50%,#F3EEF0 75%);background-size:200% 100%;animation:coShimmer 1.4s ease-in-out infinite} #view-checkout .co-pay-skel i:nth-child(2){height:120px} #view-checkout .co-billing{margin-top:12px} #view-checkout .co-billing-el{margin-top:8px} #view-checkout .co-payerr{display:none;align-items:flex-start;gap:8px;background:var(--co-err-bg);border:1px solid #F3C9D2;border-radius:11px;padding:11px 12px;font-size:13px;line-height:1.45;color:#8E1E36;margin:12px 0 0;animation:coFade .25s var(--co-ease)} #view-checkout .co-payerr.show{display:flex} #view-checkout .co-payerr svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;flex:none;margin-top:1px} #view-checkout .co-config{background:#FFF8E8;border:1px solid #F1DFA6;border-radius:12px;padding:14px 14px;font-size:13px;line-height:1.55;color:#5E4A0C} #view-checkout .co-config b{display:block;font-family:"Archivo";font-weight:800;font-size:13.5px;margin-bottom:4px;color:#4A3A08} #view-checkout .co-config code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;background:rgba(0,0,0,.05);padding:1px 5px;border-radius:5px} #view-checkout .co-pay-cta{margin-top:16px} #view-checkout .co-trust{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--co-ink2)} #view-checkout .co-trust li{display:flex;align-items:center;gap:8px} #view-checkout .co-trust svg{width:14px;height:14px;stroke:var(--co-accent);fill:none;stroke-width:2.2;flex:none} #view-checkout .co-legal-links{font-size:12px;color:var(--co-mute);margin-top:12px;line-height:1.6} #view-checkout .co-legal-links a{color:var(--co-ink2);text-decoration:none;border-bottom:1px solid var(--co-line2)} /* Unterschrift (nur wenn CO_CONFIG.requireSignature) */ #view-checkout .co-sig{margin:6px 0 12px} #view-checkout .co-sigwrap{position:relative;border:1px solid var(--co-line2);border-radius:12px;background:#fff;overflow:hidden;cursor:crosshair;transition:border-color .2s} #view-checkout .co-sigwrap.active{border-color:var(--co-accent)} #view-checkout .co-sigwrap canvas{display:block;width:100%;height:120px;touch-action:none} #view-checkout .co-sigph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#B9B4BC;font-size:13px;pointer-events:none;transition:opacity .2s} #view-checkout .co-sigact{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12.5px} #view-checkout .co-sigact .ok{color:var(--co-ok);font-weight:600;opacity:0;transition:opacity .3s} #view-checkout .co-sigact .ok.show{opacity:1} /* ── Bestellübersicht ────────────────────────────────────────── */ #view-checkout .co-sum{background:var(--co-surface);border:1px solid var(--co-line);border-radius:var(--co-radius);overflow:hidden} #view-checkout .co-sum-h{display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px;background:none;border:none;text-align:left;color:inherit;font-weight:700;font-size:14px} #view-checkout .co-sum-h svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .25s var(--co-ease)} #view-checkout .co-sum-h[aria-expanded="true"] svg.chev{transform:rotate(180deg)} #view-checkout .co-sum-h .cnt{font-weight:500;color:var(--co-mute);font-size:12.5px} #view-checkout .co-sum-h .tot{margin-left:auto;font-family:"Archivo";font-weight:800;font-size:15px} #view-checkout .co-sum-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--co-ease)} #view-checkout .co-sum-b.open{grid-template-rows:1fr} #view-checkout .co-sum-b>div{overflow:hidden;min-height:0} #view-checkout .co-sum-in{padding:0 16px 16px;border-top:1px solid var(--co-line)} #view-checkout .co-items{display:flex;flex-direction:column} #view-checkout .co-it{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--co-line);align-items:center;animation:coFade .3s var(--co-ease)} #view-checkout .co-it:last-child{border-bottom:none} #view-checkout .co-it .im{width:56px;height:56px;border-radius:11px;background:#F5F1F2;border:1px solid var(--co-line);display:grid;place-items:center;overflow:hidden;position:relative} #view-checkout .co-it .im img{width:100%;height:100%;object-fit:cover} #view-checkout .co-it .im svg{width:30px;height:auto} #view-checkout .co-it .im .q{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--co-ink);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid #fff} #view-checkout .co-it .nm{font-weight:700;font-size:14px;line-height:1.3} #view-checkout .co-it .vr{font-size:12.5px;color:var(--co-ink2);margin-top:2px} #view-checkout .co-it .vr .pre{color:#A65D19;font-weight:600} #view-checkout .co-it .meta{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap} #view-checkout .co-qty{display:inline-flex;align-items:center;border:1px solid var(--co-line2);border-radius:999px;overflow:hidden;background:#fff} #view-checkout .co-qty button{width:32px;height:30px;border:none;background:none;font-size:16px;font-weight:600;color:var(--co-ink2);display:grid;place-items:center;transition:background .15s,color .15s} #view-checkout .co-qty button:hover{background:var(--co-rose-tint);color:var(--co-magenta)} #view-checkout .co-qty span{min-width:22px;text-align:center;font-size:13px;font-weight:700} #view-checkout .co-it .coa{font-size:11.5px;color:var(--co-mute);text-decoration:none;display:inline-flex;align-items:center;gap:4px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s} #view-checkout .co-it .coa:hover{color:var(--co-magenta);border-color:var(--co-magenta)} #view-checkout .co-it .coa svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2} #view-checkout .co-it .pr{text-align:right;font-family:"Archivo";font-weight:800;font-size:14.5px;white-space:nowrap} #view-checkout .co-it .pr s{display:block;font-size:11.5px;font-weight:600;color:var(--co-mute)} #view-checkout .co-it .pr small{display:block;font-family:"Inter";font-size:11px;font-weight:500;color:var(--co-mute);margin-top:2px} #view-checkout .co-it.bump .pr{animation:coBump .45s var(--co-ease)} /* Code (einklappbar) */ #view-checkout .co-code{border-top:1px solid var(--co-line);padding:12px 0 4px} #view-checkout .co-code-tgl{display:inline-flex;align-items:center;gap:7px;background:none;border:none;padding:4px 0;font-size:13px;font-weight:600;color:var(--co-magenta)} #view-checkout .co-code-tgl svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .25s var(--co-ease)} #view-checkout .co-code-tgl[aria-expanded="true"] svg{transform:rotate(45deg)} #view-checkout .co-code-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--co-ease)} #view-checkout .co-code-b.open{grid-template-rows:1fr} #view-checkout .co-code-b>div{overflow:hidden;min-height:0} #view-checkout .co-code-row{display:flex;gap:8px;padding-top:10px} #view-checkout .co-code-row .co-in{flex:1;text-transform:uppercase;letter-spacing:.05em;font-weight:600;font-size:14px;min-height:44px;padding:10px 12px} #view-checkout .co-code-row .co-btn-ghost{min-height:44px;padding:10px 14px;white-space:nowrap} #view-checkout .co-code-msg{font-size:12.5px;margin-top:7px;min-height:16px;font-weight:500} #view-checkout .co-code-msg.ok{color:var(--co-ok)} #view-checkout .co-code-msg.err{color:var(--co-err)} #view-checkout .co-tag{display:inline-flex;align-items:center;gap:6px;background:var(--co-rose-tint);border:1px solid var(--co-rose);color:var(--co-magenta);font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 9px;border-radius:999px;margin-top:8px} #view-checkout .co-tag button{background:none;border:none;color:inherit;font-size:14px;line-height:1;padding:0 2px} /* Summen */ #view-checkout .co-tots{border-top:1px solid var(--co-line);padding-top:12px;margin-top:8px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--co-ink2)} #view-checkout .co-tots .r{display:flex;justify-content:space-between;align-items:baseline;gap:10px} #view-checkout .co-tots .r b{font-family:"Archivo";font-weight:700;color:var(--co-ink)} #view-checkout .co-tots .r.d b{color:var(--co-ok)} #view-checkout .co-tots .r.d{color:var(--co-ok)} #view-checkout .co-tots .r.t{border-top:1px solid var(--co-line2);padding-top:12px;margin-top:4px;font-size:15px;color:var(--co-ink);font-weight:700} #view-checkout .co-tots .r.t b{font-size:20px;font-weight:900;letter-spacing:-.01em} #view-checkout .co-tots .r .free{color:var(--co-ok);font-weight:700} #view-checkout .co-tots .r.t.bump b{animation:coBump .45s var(--co-ease)} #view-checkout .co-tots .tax{font-size:11.5px;color:var(--co-mute);text-align:right} #view-checkout .co-freebar{margin-top:10px;font-size:12px;color:var(--co-ink2)} #view-checkout .co-freebar .bar{height:4px;border-radius:999px;background:#F1ECEE;margin-top:6px;overflow:hidden} #view-checkout .co-freebar .bar i{display:block;height:100%;background:var(--co-grad);border-radius:999px;transition:width .5s var(--co-ease)} #view-checkout .co-sum-trust{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--co-line);display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--co-ink2)} #view-checkout .co-sum-trust li{display:flex;align-items:center;gap:8px} #view-checkout .co-sum-trust svg{width:13px;height:13px;stroke:var(--co-accent);fill:none;stroke-width:2.2;flex:none} /* Leerer Warenkorb */ #view-checkout .co-empty{max-width:520px;margin:60px auto;text-align:center;padding:0 16px} #view-checkout .co-empty h2{font-size:24px;font-weight:900;margin-bottom:8px} #view-checkout .co-empty p{color:var(--co-ink2);margin-bottom:20px} #view-checkout .co-empty .co-btn{width:auto;padding-left:28px;padding-right:28px} /* Sticky-CTA auf dem Handy (nur Schritt Zahlung) */ #view-checkout .co-sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--co-line);transform:translateY(110%);transition:transform .35s var(--co-ease)} #view-checkout .co-sticky.show{transform:translateY(0)} #view-checkout .co-sticky .co-btn{min-height:50px} /* Toast-ähnliche Preisänderungsmeldung */ #view-checkout .co-flash{background:var(--co-rose-tint);border:1px solid var(--co-rose);border-radius:11px;padding:10px 12px;font-size:13px;color:var(--co-ink2);margin-bottom:12px;display:none;animation:coFade .3s var(--co-ease)} #view-checkout .co-flash.show{display:block} /* ── Warenkorb-Drawer (gp.js) — Neugestaltung 19.09.2026 ───────────────── Nur Optik; das Markup kommt aus gp.js (renderCartList). Gilt in der App und auf den /de/…-Seiten, weil diese Datei auf beiden geladen wird. */ .gpdrawer{width:min(480px,94vw);background:#F7F5F2;box-shadow:-30px 0 70px -30px rgba(13,18,60,.5);display:flex;flex-direction:column} .gpdrawer .dhead{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 26px 14px;border-bottom:none;background:#F7F5F2} .gpdrawer .dhead h2{font-size:22px;letter-spacing:-.02em;margin:0} .gpdrawer .dhead .dsub{display:block;font-size:12.5px;color:#8E8A93;margin-top:3px;font-weight:500} .gpdrawer .close{width:40px;height:40px;border-radius:999px;border:1px solid #E1DADD;background:#fff;display:grid;place-items:center;color:#26262B;font-size:0;line-height:0;padding:0;transition:background .2s,color .2s,transform .25s} .gpdrawer .close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round} .gpdrawer .close:hover{background:#26262B;color:#fff;transform:rotate(90deg)} .gpdrawer .dship{margin:2px 26px 12px;padding:12px 14px;background:#fff;border:1px solid #ECE6E8;border-radius:14px} .gpdrawer .dship-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;color:#55525B;font-weight:600;margin-bottom:8px} .gpdrawer .dship-t b{font-size:12px;color:#8E8A93;font-weight:600} .gpdrawer .dship-bar{height:6px;border-radius:999px;background:#EEE9EB;overflow:hidden} .gpdrawer .dship-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#3B55F5,#2A41E8);transition:width .5s cubic-bezier(.2,.8,.2,1)} .gpdrawer .dship.done .dship-t{color:#2E9E6B} .gpdrawer .dship.done .dship-bar i{background:#2E9E6B} .gpdrawer .ditems{flex:1;overflow-y:auto;padding:4px 26px 16px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin} .gpdrawer .dempty{padding:64px 0;font-size:15px;color:#55525B;text-align:center} .gpdrawer .dempty a{display:inline-block;margin-top:14px;padding:12px 20px;border-radius:999px;background:#14151C;color:#fff;font-family:"Archivo";font-weight:800;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none} .ditem{position:relative;display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:stretch;background:#fff;border:1px solid #ECE6E8;border-radius:18px;padding:12px 44px 12px 12px;box-shadow:0 10px 30px -24px rgba(20,21,28,.35);transition:box-shadow .2s} .ditem:hover{box-shadow:0 14px 34px -22px rgba(20,21,28,.4)} .ditem:last-of-type{border-bottom:1px solid #ECE6E8} .ditem .ip{width:78px;height:78px;border-radius:14px;background:#F7F4F5;border:1px solid #ECE6E8;display:grid;place-items:center;overflow:hidden} .ditem .ip img{width:100%;height:100%;object-fit:contain;padding:5px;background:#fff;border-radius:14px} .ditem .ip svg{width:34px} .ditem .info{display:flex;flex-direction:column;min-width:0} .ditem .info h4{font-family:"Archivo";font-weight:800;font-size:15px;letter-spacing:-.01em;line-height:1.25;color:#14151C;margin:0;white-space:normal} .ditem .info .meta{display:block;font-size:12.5px;color:#6b6d7a;margin-top:3px;line-height:1.4} .ditem .info .pre{display:inline-block;align-self:flex-start;margin-top:6px;padding:3px 8px;border-radius:999px;background:#FFF4E5;color:#B45309;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .ditem .info .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px} .ditem .info b{font-family:"Archivo";font-weight:800;font-size:16px;color:#14151C;white-space:nowrap;margin:0} .ditem .info b s{font-size:12px;color:#B0ABB3;font-weight:500;margin-left:4px} .ditem .qty{display:inline-flex;align-items:center;border:1px solid #E1DADD;border-radius:999px;background:#fff;overflow:hidden;gap:0} .ditem .qty button{width:34px;height:32px;border:none;border-radius:0;background:none;font-size:17px;line-height:1;color:#55525B;cursor:pointer;transition:background .15s,color .15s} .ditem .qty button:hover{background:#EEF0FF;color:var(--cobalt)} .ditem .qty span{min-width:26px;text-align:center;font-size:14px;font-weight:700;color:#14151C} .ditem .rm{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:999px;border:none;background:transparent;color:#B0ABB3;display:grid;place-items:center;cursor:pointer;padding:0;margin:0;font-size:0;line-height:0;text-decoration:none;transition:background .15s,color .15s} .ditem .rm svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .ditem .rm:hover{background:#FDECEF;color:#C62A4A} .gpbac{display:flex;align-items:center;gap:12px;background:#fff;border:1px dashed #D9D2D6;border-radius:16px;padding:12px} .gpbac .ico{width:42px;height:42px;border-radius:12px;background:#F7F4F5;font-size:19px;display:grid;place-items:center;flex:none} .gpbac .tx{flex:1;min-width:0} .gpbac .tx b{display:block;font-size:14px;color:#14151C} .gpbac .tx span{display:block;font-size:12.5px;color:#6b6d7a;margin-top:2px} .gpbac button{border:1px solid #14151C;background:#fff;color:#14151C;border-radius:999px;padding:9px 14px;font-size:12px;font-weight:800;font-family:"Archivo";letter-spacing:.03em;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s} .gpbac button:hover{background:#14151C;color:#fff} .gpdrawer .dfoot{padding:16px 26px 22px;background:#fff;border-top:1px solid #ECE6E8;box-shadow:0 -18px 34px -26px rgba(20,21,28,.3)} .gpdrawer .zonesel{width:100%;font:inherit;font-size:14px;font-weight:600;color:#26262B;background:#fff;border:1px solid #E1DADD;border-radius:12px;padding:12px 40px 12px 14px;margin-bottom:14px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355525B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px} .gpdrawer .sumrow{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:#55525B;padding:4px 0} .gpdrawer .sumrow .cnt{font-weight:500;color:#8E8A93;font-size:12.5px} .gpdrawer .sumrow.save{color:#2E9E6B} .gpdrawer .sumrow.total{margin-top:6px;padding-top:12px;border-top:1px solid #ECE6E8;font-family:"Archivo";font-weight:800;font-size:17px;color:#14151C} .gpdrawer .sumrow.total b{font-family:"Archivo";font-weight:900;font-size:24px;letter-spacing:-.01em;color:#14151C} .gpdrawer .rconfirm{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:#55525B;margin:14px 0 12px} .gpdrawer .rconfirm input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--cobalt);flex:none} .gpdrawer .gpcheckout{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;background:#14151C;color:#F3EEE3;font-family:"Archivo";font-weight:900;font-size:15px;letter-spacing:.02em;text-transform:uppercase;padding:17px 22px;border-radius:14px;border:none;transition:transform .2s,background .2s,opacity .2s} .gpdrawer .gpcheckout:not(:disabled):hover{transform:translateY(-1px);background:var(--cobalt)} .gpdrawer .gpcheckout:disabled{opacity:.4;cursor:not-allowed} .gpdrawer .gpcheckout .c{width:30px;height:30px;border-radius:999px;background:var(--volt);color:#14151C;display:grid;place-items:center;font-size:16px} .gpdrawer .dnote{margin-top:10px;font-size:11.5px;color:#8E8A93;text-align:center} @media (max-width:680px){ .gpdrawer .dhead{padding:18px 18px 10px} .gpdrawer .dship{margin:0 18px 10px} .gpdrawer .ditems{padding:4px 18px 14px} .gpdrawer .dfoot{padding:14px 18px 18px} .ditem{grid-template-columns:68px 1fr;padding:10px 40px 10px 10px} .ditem .ip{width:68px;height:68px} } @keyframes coFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @keyframes coBump{0%{transform:scale(1)}35%{transform:scale(1.06);color:var(--co-magenta)}100%{transform:scale(1)}} @keyframes coSpin{to{transform:rotate(360deg)}} @keyframes coShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} @keyframes coIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} #view-checkout:not([hidden]) .co-steps,#view-checkout:not([hidden]) .co-sec,#view-checkout:not([hidden]) .co-sum{animation:coIn .45s var(--co-ease) both} #view-checkout:not([hidden]) .co-sec:nth-child(2){animation-delay:.05s} #view-checkout:not([hidden]) .co-sec:nth-child(3){animation-delay:.1s} #view-checkout:not([hidden]) .co-sum{animation-delay:.08s} /* ── Desktop ─────────────────────────────────────────────────── */ @media (min-width:900px){ #view-checkout .co-head-in{height:66px;padding:0 24px} #view-checkout .co-secure{display:inline-flex} #view-checkout .co-backcart{margin-left:18px;margin-right:auto} #view-checkout .co-wrap{padding:30px 24px 80px} #view-checkout .co-grid{grid-template-columns:minmax(0,1fr) 400px;gap:34px;align-items:start} #view-checkout .co-main{order:1} #view-checkout .co-aside{order:2;position:sticky;top:82px} #view-checkout .co-steps{margin-bottom:22px;font-size:13px} #view-checkout .co-sec-h{padding:18px 22px} #view-checkout .co-sec-in{padding:2px 22px 22px} #view-checkout .co-sum-h{pointer-events:none;padding:16px 18px} #view-checkout .co-sum-h svg.chev{display:none} #view-checkout .co-sum-h .tot{display:none} #view-checkout .co-sum-b{grid-template-rows:1fr!important} #view-checkout .co-sum-in{padding:0 18px 18px} #view-checkout .co-sticky{display:none} #view-checkout .co-actions{flex-direction:row;align-items:center;justify-content:space-between} #view-checkout .co-actions .co-btn{width:auto;min-width:260px} } @media (min-width:1100px){ #view-checkout .co-wrap{max-width:1320px} #view-checkout .co-head-in{max-width:1320px} #view-checkout .co-grid{grid-template-columns:minmax(0,1fr) 460px;gap:48px} #view-checkout .co-sec-h h2{font-size:19px} #view-checkout .co-sum-h{font-size:15px} } /* Grosse Bildschirme (Full-HD und mehr): die Kasse fuellt die Breite und Schrift, Felder und Knoepfe wachsen mit — sonst wirkt sie verloren. */ @media (min-width:1400px){ #view-checkout{font-size:17px} #view-checkout .co-wrap{max-width:1500px;padding:40px 32px 100px} #view-checkout .co-head-in{max-width:1500px;height:76px;padding:0 32px} #view-checkout .co-brand{font-size:19px} #view-checkout .co-brand .mk{width:34px;height:34px;font-size:13px} #view-checkout .co-backcart,#view-checkout .co-secure{font-size:14px} #view-checkout .co-grid{grid-template-columns:minmax(0,1fr) 540px;gap:60px} #view-checkout .co-aside{top:96px} #view-checkout .co-steps{font-size:15px;margin-bottom:28px} #view-checkout .co-steps .n{width:24px;height:24px;font-size:12px} #view-checkout .co-sec-h{padding:22px 28px} #view-checkout .co-sec-h .num{width:30px;height:30px;font-size:13px} #view-checkout .co-sec-h h2{font-size:22px} #view-checkout .co-sec-h .sm,#view-checkout .co-sec-h .edit{font-size:14px} #view-checkout .co-sec-in{padding:4px 28px 28px} #view-checkout label.co-lb{font-size:14px} #view-checkout .co-in{font-size:17px;min-height:56px;padding:14px 16px;border-radius:12px} #view-checkout .co-hint,#view-checkout .co-msg{font-size:14px} #view-checkout .co-chk{font-size:15px} #view-checkout .co-chk .bx{width:22px;height:22px} #view-checkout .co-opt{padding:16px 18px} #view-checkout .co-opt .t b{font-size:16px} #view-checkout .co-opt .t span{font-size:14px} #view-checkout .co-opt .p{font-size:16px} #view-checkout .co-btn{font-size:17px;min-height:60px;padding:16px 28px;border-radius:14px} #view-checkout .co-actions .co-btn{min-width:320px} #view-checkout .co-btn-ghost{font-size:15px;min-height:50px} #view-checkout .co-sum-h{font-size:17px;padding:20px 24px} #view-checkout .co-sum-h .cnt{font-size:14px} #view-checkout .co-sum-in{padding:0 24px 24px} #view-checkout .co-it{grid-template-columns:72px minmax(0,1fr) auto;gap:16px;padding:18px 0} #view-checkout .co-it .im{width:72px;height:72px} #view-checkout .co-it .nm{font-size:16px} #view-checkout .co-it .vr{font-size:14px} #view-checkout .co-it .pr{font-size:17px} #view-checkout .co-qty button{width:36px;height:34px} #view-checkout .co-code-tgl{font-size:15px} #view-checkout .co-tots{font-size:15.5px;gap:10px} #view-checkout .co-tots .r.t{font-size:17px} #view-checkout .co-tots .r.t b{font-size:26px} #view-checkout .co-freebar,#view-checkout .co-sum-trust{font-size:13.5px} #view-checkout .co-trust{font-size:14px} #view-checkout .co-express-note,#view-checkout .co-or{font-size:14px} } @media (prefers-reduced-motion:reduce){ #view-checkout *{animation:none!important;transition:none!important} }