/* KeyChainino theme.
   Original site colors with 8-bit details: one UI "pixel" = 4px, notched
   corners, hard edges. Headings and text in Atkinson Hyperlegible Next;
   pixel letters (Silkscreen) only for short labels, KC Pixel for numbers. */

:root {
	--bg: #ffffff;
	--alt: #f6f6f6;
	--surface: #ffffff;
	--ink: #000000;
	--muted: #666666;
	--line: #e3e3e3;
	--brand: #e63c20;   /* the logo red */
	--btn: #edb059;     /* the original buttons */
	--blue: #5996ed;    /* the original accent */
	--link: #2e6bc9;    /* the accent, dark enough for text */
	--foot: #222222;    /* the original footer */
	--px-off: #e8e8e6;
	--px-on: #e63c20;
	--pink: #ff2d55;    /* Pictures' lights */
	--dot: #e9e9e9;
	--warn: #fdf3e2;
	--chip: #f0f0f0;
	--font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-px: "Silkscreen", ui-monospace, Menlo, monospace;
	--font-num: "KC Pixel", "Silkscreen", ui-monospace, monospace;
	--font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--gutter: max(24px, env(safe-area-inset-left, 0px));
	/* the pixel frames: 4px notched black (cards, buttons), 3px (fields), 4px light grey (panels) */
	--frame: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink);
	--frame-btn: inset -4px -4px 0 0 rgba(0, 0, 0, .16), var(--frame);
	--frame-field: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink);
	--frame-soft: 0 -4px 0 0 var(--line), 0 4px 0 0 var(--line), -4px 0 0 0 var(--line), 4px 0 0 0 var(--line);
	--dotrule: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 12px);
	--dots: radial-gradient(circle, var(--dot) 1.6px, transparent 1.8px) 0 0 / 18px 18px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 19px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-underline-offset: .15em; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
	outline: 4px solid var(--blue); outline-offset: 4px;
}
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 800; letter-spacing: -.015em; line-height: 1.08; }
h1 { font-size: clamp(40px, 5.4vw, 74px); line-height: 1.03; }
h2 { font-size: clamp(30px, 3.6vw, 50px); }
h3 { font-size: 23px; line-height: 1.25; font-weight: 700; letter-spacing: -.005em; }
p { margin: 0; }
code, kbd, pre { font-family: var(--font-code); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--btn); color: #000; padding: 10px 14px; font-family: var(--font-px); text-transform: uppercase; }
.skip-link:focus { top: 12px; }
.kc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gutter); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.sec { padding-block: 104px; }
.sec.flush { padding-top: 0; }
.say { display: flex; flex-direction: column; gap: 18px; max-width: 34em; }
.say.wide { max-width: 42em; }
.lead { font-size: 22px; line-height: 1.5; }
.muted { color: var(--muted); }
.small { font-size: 17px; }
.end { justify-self: end; }
.eyebrow { font-family: var(--font-px); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.eyebrow.c { color: var(--link); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 64px; align-items: end; margin-bottom: 48px; }
.sec-head.tight { margin-bottom: 36px; }

/* ---------- 8-bit pieces ---------- */
.frame { margin: 4px; box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink); }
.box { margin: 4px; background: var(--surface); box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink); }
.pixrow { height: 4px; background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 12px); }
.pixrow.dim { --line: #3a3a3a; }
.dots { background-color: var(--bg); background-image: radial-gradient(circle, var(--dot) 1.6px, transparent 1.8px); background-size: 18px 18px; }
.dots.alt { background-color: var(--alt); }
.band-dark { --bg: #222222; --alt: #2a2a2a; --surface: #2a2a2a; --ink: #ffffff; --muted: #b3b3b3; --line: #3a3a3a; --link: #8db5f5; --brand: #ff5a3c; --px-off: #333333; background: var(--foot); color: #ffffff; }
.band-dark a { color: #ffffff; }
.band-dark a:hover { color: var(--link); }

.btns { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 22px; margin: 4px;
	border: 0; border-radius: 0; background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none;
	font-family: var(--font-px); font-size: 17px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1;
	box-shadow: inset -4px -4px 0 0 rgba(0, 0, 0, .16), 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink);
}
a.btn, .band-dark a.btn { color: var(--ink); }
.btn.primary, a.btn.primary, .band-dark a.btn.primary { background: var(--btn); color: #000000; }
.btn:hover { filter: brightness(1.04); color: var(--ink); }
.btn.primary:hover { color: #000000; }
.btn:active { box-shadow: inset 4px 4px 0 0 rgba(0, 0, 0, .2), 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink); }
.btn.sm { min-height: 42px; font-size: 15px; padding: 0 14px; }
.btn.capd { padding-left: 10px; }
.cap {
	width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: #111111; color: #ffffff; font-family: var(--font-px); font-size: 14px;
	clip-path: polygon(30% 0, 70% 0, 70% 10%, 90% 10%, 90% 30%, 100% 30%, 100% 70%, 90% 70%, 90% 90%, 70% 90%, 70% 100%, 30% 100%, 30% 90%, 10% 90%, 10% 70%, 0 70%, 0 30%, 10% 30%, 10% 10%, 30% 10%);
}
.stock { font-family: var(--font-px); font-size: 14px; line-height: 1.5; color: var(--brand); max-width: 34em; text-transform: uppercase; }
.blink { animation: kc-blink 1.1s steps(1) infinite; }
@keyframes kc-blink { 50% { opacity: .25; } }
.keyhint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-px); font-size: 13px; color: var(--muted); text-transform: uppercase; }
.keyhint kbd { font-family: var(--font-px); font-size: 13px; color: #ffffff; background: #333333; padding: 4px 8px; margin: 2px; box-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, .45), 0 -2px 0 0 #666666, 0 2px 0 0 #666666, -2px 0 0 0 #666666, 2px 0 0 0 #666666; }

/* ---------- header ---------- */
.site-head .nav { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; padding-block: 14px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { display: block; width: 27px; height: 52px; }
.wordmark { font-family: var(--font-px); font-size: 28px; line-height: 1; color: var(--brand); white-space: nowrap; }
.menu-list { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 0; padding: 0; list-style: none; font-family: var(--font-px); font-size: 15px; text-transform: uppercase; }
.menu-list a { display: block; color: var(--ink); text-decoration: none; padding-block: 10px; }
.menu-list a:hover { color: var(--link); }
.menu-list .current-menu-item > a, .menu-list a[aria-current] { color: var(--link); box-shadow: inset 0 -4px 0 var(--blue); }
.navr { display: flex; gap: 16px; align-items: center; }
.cartl { color: var(--ink); text-decoration: none; font-family: var(--font-px); font-size: 15px; text-transform: uppercase; }
.menu-toggle { display: none; }
.site-head.focus .nav { justify-content: flex-start; gap: 24px; }
.focus-title { font-family: var(--font-px); font-size: 17px; text-transform: uppercase; color: var(--muted); }
.site-head.focus .back { margin-left: auto; font-family: var(--font-px); font-size: 15px; text-transform: uppercase; }

/* ---------- home ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-block: 56px 72px; }
.hero-txt { display: flex; flex-direction: column; gap: 22px; }
.ph { position: relative; margin: 4px; }
.ph picture, .ph img, .story img { display: block; width: 100%; }
.photo { aspect-ratio: 1 / 1; object-fit: cover; }
.size { position: absolute; left: 16px; bottom: 16px; background: #000000; color: #ffffff; font-family: var(--font-px); font-size: 13px; padding: 7px 10px; }
figure { margin: 0; }

.hud .wrap { display: flex; flex-wrap: wrap; }
.hud .cell { flex: 1 1 180px; padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(#3a3a3a, #3a3a3a) 0 0 / 4px 4px repeat-y; }
.hud .cell:first-child { background: none; padding-left: 0; }
.hud-k { font-family: var(--font-px); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--btn); }
.hud-v { font-family: var(--font-num); font-size: 50px; line-height: 1; }
.hud-s { font-size: 15px; color: #b3b3b3; line-height: 1.4; }

.sim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-block: 96px; }
.sim-box { display: flex; justify-content: center; min-width: 0; }
.sim-box iframe { display: block; }

.games { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.gt { margin: 3px; background: var(--surface); box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }
.gt, .gt > a { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 12px; }
.gt.yours { padding: 0; background: var(--btn); }
.gt.yours > a { color: #000000; text-decoration: none; }
.gt.yours .pix { --px-off: rgba(0, 0, 0, .08); --px-on: #000000; }
.gtn { font-family: var(--font-num); font-size: 25px; line-height: 1; display: flex; justify-content: space-between; gap: 6px; }

.honest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 28px 64px; align-items: start; }
.big-say { font-size: 22px; line-height: 1.5; }
.punch { font-size: 26px; font-weight: 800; line-height: 1.3; }

.kgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-block: 104px; }
.kbox { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.shelf { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.shelf-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.shelf-row .pix { width: 58px; padding: 6px; margin: 3px; background: var(--surface); box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }

.os { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 64px; align-items: start; }
.os-side { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.links, .older { margin: 0; padding: 0; list-style: none; }
.links a, .older a {
	display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 21px;
	background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 12px) 0 100% / 100% 4px no-repeat;
}
.links a:hover, .older a:hover { color: var(--link); }
.older small { display: block; font-weight: 400; font-size: 16px; color: var(--muted); }
.older a { flex-direction: column; align-items: flex-start; gap: 2px; }
.code { margin: 4px; background: #222222; color: #ededed; padding: 22px 24px; font-size: 15px; line-height: 1.75; overflow-x: auto; white-space: pre; box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink); }
.code .c { color: #9a9a9a; }

.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 64px; align-items: center; }
.story img { aspect-ratio: 16 / 10; object-fit: cover; }
.sig { font-family: var(--font-px); font-size: 24px; color: var(--brand); }
.press { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 40px; padding-block: 36px; }
.press a { font-size: 24px; font-weight: 800; color: var(--ink); text-decoration: none; }
.press a:hover { color: var(--link); }

.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.post-card { display: flex; flex-direction: column; gap: 12px; }
.post-card::before { content: ""; height: 4px; margin-bottom: 8px; background: repeating-linear-gradient(90deg, var(--blue) 0 8px, transparent 8px 12px); }
.post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h3 a:hover { color: var(--link); }
.post-card > p:last-child { font-size: 17px; color: var(--muted); }

/* ---------- pixel pictures (SVG) ---------- */
.pix { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.pix-off-dot { fill: var(--px-off); }
.pix .pix-on { fill: var(--px-on); }
.pix.pink .pix-on { fill: var(--pink); }

/* ---------- the board, drawn after the real KeyChainino 144 ---------- */
.device { --w: 300px; position: relative; display: flex; flex-direction: column; align-items: center; max-width: 100%; filter: drop-shadow(0 16px 20px rgba(70, 45, 20, .24)) drop-shadow(0 2px 2px rgba(0, 0, 0, .12)); }
.device .tab {
	width: calc(var(--w) * .39); height: calc(var(--w) * .36); margin-bottom: calc(var(--w) * -.02); background: #f2f3f3; border-radius: calc(var(--w) * .09) calc(var(--w) * .09) 0 0;
	-webkit-mask: radial-gradient(circle calc(var(--w) * .085) at 50% 42%, transparent 96%, #000 100%); mask: radial-gradient(circle calc(var(--w) * .085) at 50% 42%, transparent 96%, #000 100%);
}
.device .pcb { width: var(--w); max-width: 100%; position: relative; z-index: 0; border-radius: calc(var(--w) * .045); background: linear-gradient(180deg, #f2f3f3, #e1e3e2); padding: calc(var(--w) * .035) calc(var(--w) * .035) calc(var(--w) * .03); }
.device .pcb::before, .device .pcb::after { content: ""; position: absolute; top: calc(var(--w) * -.04); width: calc(var(--w) * .04); height: calc(var(--w) * .04); }
.device .pcb::before { right: calc(50% + var(--w) * .195); background: radial-gradient(circle at 0 0, transparent 70%, #f2f3f3 72%); }
.device .pcb::after { left: calc(50% + var(--w) * .195); background: radial-gradient(circle at 100% 0, transparent 70%, #f2f3f3 72%); }
.leds { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); width: 100%; aspect-ratio: 1 / 1; }
.leds .l { display: block; position: relative; border: 0; padding: 0; margin: 0; background: transparent; font: inherit; }
.leds.round { gap: calc(var(--w) * .011); }
.leds.round .l { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ece7db, #ddd6c6 60%); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .08); }
.leds.round .l.on { background: radial-gradient(circle at 38% 32%, #ffd0da 0, #ff6d86 30%, var(--pink) 62%, #d1123b 100%); box-shadow: 0 0 calc(var(--w) * .023) rgba(255, 45, 85, .75), 0 0 calc(var(--w) * .0065) #fff inset; }
button.l { cursor: pointer; touch-action: none; }
button.l:hover { box-shadow: inset 0 0 0 2px var(--blue); }
/* real 0603 LEDs: tilted cream package, silver pads, tiny die; lit = white-hot die, red glow on the board */
.leds.smd .l::before { content: ""; position: absolute; left: 50%; top: 50%; width: 76%; height: 34%; transform: translate(-50%, -50%) rotate(45deg); border-radius: 1.5px; background: linear-gradient(90deg, #9fa3a7 0 21%, #f1ebde 21% 79%, #9fa3a7 79%); box-shadow: 0 .5px 1px rgba(0, 0, 0, .3); }
.leds.smd .l::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9%; height: 9%; transform: translate(-50%, -50%); border-radius: 50%; background: #c08a5c; }
.leds.smd .l.on { background: radial-gradient(circle, rgba(255, 40, 24, .4) 0, rgba(255, 40, 24, .12) 45%, rgba(255, 40, 24, 0) 70%); }
.leds.smd .l.on::before { background: linear-gradient(90deg, #c7a29e 0 21%, #ff5a44 21% 79%, #c7a29e 79%); box-shadow: 0 0 6px 1px rgba(255, 40, 24, .95), 0 0 14px 3px rgba(255, 40, 24, .45); }
.leds.smd .l.on::after { width: 22%; height: 22%; background: radial-gradient(circle, #fff 0 40%, #ffd7cf 62%, rgba(255, 90, 68, 0) 100%); box-shadow: 0 0 5px 2px rgba(255, 255, 255, .7); }
.mid { display: flex; align-items: center; height: calc(var(--w) * .3); padding: 0 calc(var(--w) * .04) 0 calc(var(--w) * .035); }
.isp { display: grid; grid-template-columns: repeat(3, calc(var(--w) * .05)); grid-auto-rows: calc(var(--w) * .05); gap: calc(var(--w) * .022); }
.isp i { display: block; border-radius: 50%; background: radial-gradient(circle, #3a3b3f 30%, #d9dcdf 36%, #b3b7bb 72%, transparent 75%); }
.isp i:nth-child(3) { border-radius: 12%; background: radial-gradient(circle, #3a3b3f 30%, transparent 34%), linear-gradient(160deg, #d9dcdf, #b3b7bb); }
.passives { display: flex; flex-direction: column; gap: calc(var(--w) * .03); margin: 0 auto 0 calc(var(--w) * .07); }
.passives i { display: block; width: calc(var(--w) * .075); height: calc(var(--w) * .03); border-radius: 1px; background: linear-gradient(90deg, #b4b7ba 0 22%, #ece9e2 22% 78%, #b4b7ba 78%); box-shadow: 0 1px 1px rgba(0, 0, 0, .18); }
.mcu { width: calc(var(--w) * .17); height: calc(var(--w) * .17); position: relative; border-radius: calc(var(--w) * .01); background: radial-gradient(circle at 18% 82%, rgba(255, 255, 255, .22) 0 5%, transparent 7%), linear-gradient(150deg, #2a2b30, #111216 60%); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.mcu::before, .mcu::after { content: ""; position: absolute; z-index: -1; }
.mcu::before { top: calc(var(--w) * -.014); bottom: calc(var(--w) * -.014); left: 12%; right: 12%; background: repeating-linear-gradient(90deg, #b0b3b7 0 6.5%, transparent 6.5% 13%); }
.mcu::after { left: calc(var(--w) * -.014); right: calc(var(--w) * -.014); top: 12%; bottom: 12%; background: repeating-linear-gradient(0deg, #b0b3b7 0 6.5%, transparent 6.5% 13%); }
.keys { display: flex; align-items: center; justify-content: space-between; height: calc(var(--w) * .32); padding: 0 calc(var(--w) * .025); }
.silk { font: 700 calc(var(--w) * .055) / 1 var(--font-code); color: #6a6f74; }
.pair { display: flex; gap: calc(var(--w) * .13); }
.tact { display: block; width: calc(var(--w) * .22); height: calc(var(--w) * .22); border-radius: calc(var(--w) * .02); position: relative; background: linear-gradient(155deg, #f2f3f4, #b6babe 72%); box-shadow: 0 2px 3px rgba(0, 0, 0, .3), inset 0 0 0 calc(var(--w) * .006) #9ea3a8; }
.tact::before, .tact::after { content: ""; position: absolute; left: -13%; right: -13%; height: 15%; z-index: -1; background: linear-gradient(#e7e9eb, #a3a7ab); border-radius: 2px; }
.tact::before { top: 10%; }
.tact::after { bottom: 10%; }
.cap2 { position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #4a4e54, #0e0f11 72%); box-shadow: 0 3px 5px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, .2); }

/* ---------- kids page ---------- */
.kids .hero { gap: 56px; padding-block: 56px 96px; }
.board { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: 400px; max-width: 100%; }
.tool {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; margin: 4px; border: 0; border-radius: 0;
	background: var(--surface); color: var(--ink); font-family: var(--font-px); font-size: 13px; text-transform: uppercase; text-decoration: none; cursor: pointer;
	box-shadow: inset -4px -4px 0 0 rgba(0, 0, 0, .12), 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink);
}
.tool:active { box-shadow: inset 4px 4px 0 0 rgba(0, 0, 0, .18), 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink); }
.tool svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; }
.tool.send, a.tool.send { background: var(--btn); color: #000000; }
.hint { font-family: var(--font-px); font-size: 13px; color: var(--muted); text-transform: uppercase; }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 48px 0 0; padding: 0; list-style: none; }
.step.box { padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.num { font-family: var(--font-num); font-size: 62.5px; line-height: 1; color: var(--brand); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px 64px; align-items: start; }
.lib { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.lib .card { background: var(--surface); padding: 14px; display: flex; flex-direction: column; gap: 12px; margin: 3px; box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }
.cname { font-family: var(--font-num); font-size: 25px; line-height: 1; }
.blocks { display: flex; flex-direction: column; gap: 40px; }
.blk { display: flex; flex-direction: column; gap: 14px; }
.need { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.need li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 16px 0; background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 12px) 0 100% / 100% 4px no-repeat; }
.need b { display: block; font-weight: 800; font-size: 19px; }
.ico { width: 44px; height: 44px; background: var(--surface); display: grid; place-items: center; box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }
.ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.jumper, .power { background: var(--surface); padding: 16px 18px; font-size: 17px; margin: 4px; box-shadow: 0 -4px 0 0 var(--blue), 0 4px 0 0 var(--blue), -4px 0 0 0 var(--blue), 4px 0 0 0 var(--blue); }
.safety { background: var(--warn); padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; margin: 4px; box-shadow: 0 -4px 0 0 var(--btn), 0 4px 0 0 var(--btn), -4px 0 0 0 var(--btn), 4px 0 0 0 var(--btn); }
.cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; padding-block: 88px; }

/* ---------- programming guide ---------- */
.guide-head { display: flex; flex-direction: column; gap: 22px; padding-block: 56px 48px; }
.choose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 24px 0 0; padding: 0; border: 0; min-width: 0; }
.choose input { position: absolute; opacity: 0; pointer-events: none; }
.opt { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px; margin: 4px; background: var(--surface); cursor: pointer; font-size: 18px; line-height: 1.5; box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink); }
.choose input:checked + .opt { background: #eaf2fd; box-shadow: inset -4px -4px 0 0 rgba(89, 150, 237, .25), 0 -4px 0 0 var(--blue), 0 4px 0 0 var(--blue), -4px 0 0 0 var(--blue), 4px 0 0 0 var(--blue); }
.choose input:focus-visible + .opt { outline: 4px solid var(--blue); outline-offset: 8px; }
.opt-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.opt-name { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.opt-tags { display: flex; gap: 12px; align-items: center; }
.badge { font-family: var(--font-px); font-size: 12px; text-transform: uppercase; padding: 5px 8px; background: var(--btn); color: #000000; }
.radio { width: 20px; height: 20px; flex: none; background: var(--surface); box-shadow: 0 0 0 3px var(--ink); display: grid; place-items: center; }
.choose input:checked + .opt .radio { box-shadow: 0 0 0 3px var(--blue); }
.choose input:checked + .opt .radio::after { content: ""; width: 10px; height: 10px; background: var(--blue); }
.guide:has(#prog-ard:checked) .only-usb { display: none; }
.guide:not(:has(#prog-ard:checked)) .only-ard { display: none; }
.steps { margin: 0; padding: 0; list-style: none; }
.step:not(.box) { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding-block: 40px; background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 12px) 0 100% / 100% 4px no-repeat; scroll-margin-top: 24px; }
.step h2 { font-size: 26px; line-height: 1.2; }
.n { font-family: var(--font-num); font-size: 62.5px; line-height: 1; color: var(--brand); }
.body { display: flex; flex-direction: column; gap: 14px; max-width: 44em; min-width: 0; }
.body ol, .body ul:not(.sk) { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.k, .body code, .prose code { font-family: var(--font-code); font-size: .88em; background: var(--chip); padding: 1px 6px; overflow-wrap: anywhere; }
.tbl { overflow-x: auto; background: var(--surface); margin: 4px; box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink); }
.tbl table { border-collapse: collapse; width: 100%; font-size: 17px; }
.tbl th, .tbl td { text-align: left; padding: 12px 16px; border-bottom: 2px solid var(--line); vertical-align: top; }
.tbl th { font-family: var(--font-px); font-size: 12px; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.tbl tr:last-child td { border-bottom: 0; }
.mono { font-family: var(--font-code); font-size: 16px; }
.note { background: var(--alt); padding: 16px 18px; font-size: 17px; }
.pads { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.pads > p { flex: 1 1 220px; }
.padfig { display: grid; grid-template-columns: repeat(3, auto); gap: 12px 16px; padding: 18px 20px; background: linear-gradient(180deg, #f2f3f3, #e1e3e2); color: #3a3b3f; margin: 4px; box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink); }
.pad { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--font-px); font-size: 11px; }
.pad i { display: block; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, #3a3b3f 30%, #d9dcdf 36%, #b3b7bb 72%, transparent 75%); }
.pad.sq i { border-radius: 12%; background: radial-gradient(circle, #3a3b3f 30%, transparent 34%), linear-gradient(160deg, #d9dcdf, #b3b7bb); }
.sk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sk a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; margin: 3px; background: var(--surface); text-decoration: none; color: var(--ink); box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }
.sk a:hover { background: var(--alt); }
.sk b { font-weight: 800; font-size: 19px; }
.sk span { font-size: 15px; color: var(--muted); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
.trouble { display: flex; flex-direction: column; gap: 22px; }
.err { display: flex; flex-direction: column; gap: 8px; }
.err code { display: block; white-space: pre-wrap; word-break: break-word; padding: 10px 12px; font-size: 15px; background: var(--chip); }

/* ---------- posts and pages ---------- */
.art { max-width: 720px; margin: 0 auto; padding-block: 64px 40px; display: flex; flex-direction: column; gap: 28px; }
.art-head { display: flex; flex-direction: column; gap: 18px; }
.art-head h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.06; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--font-px); font-size: 13px; text-transform: uppercase; color: var(--muted); }
.ctx { background: var(--alt); padding: 16px 18px; font-size: 17px; color: var(--muted); margin: 4px; box-shadow: 0 -4px 0 0 var(--line), 0 4px 0 0 var(--line), -4px 0 0 0 var(--line), 4px 0 0 0 var(--line); }
.ctx b, .ctx strong { color: var(--ink); }
.prose .tut-icon { display: block; width: 144px; }
.prose { font-size: 20px; line-height: 1.65; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 34px; margin-top: 1.6em; }
.prose h3 { font-size: 26px; margin-top: 1.4em; }
.prose h4 { font-size: 21px; margin-top: 1.2em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose img { display: block; margin-inline: auto; }
.prose figure, .prose .wp-caption { max-width: 100%; }
.prose figcaption, .prose .wp-caption-text { font-size: 15px; color: var(--muted); margin-top: 8px; }
.prose pre { margin-inline: 4px; background: var(--alt); color: var(--ink); padding: 20px 22px; font-size: 15px; line-height: 1.7; overflow-x: auto; box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink); }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose blockquote { margin-inline: 0; padding: 4px 0 4px 20px; background: linear-gradient(var(--blue), var(--blue)) 0 0 / 4px 100% no-repeat; color: var(--muted); }
.prose table { border-collapse: collapse; width: 100%; font-size: 17px; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 2px solid var(--line); padding: 8px 12px; text-align: left; }
.prose iframe { display: block; margin-inline: auto; }
.alignleft { float: left; margin: .3em 1.4em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.4em; }
.aligncenter { display: block; margin-inline: auto; }
.sign { display: flex; flex-direction: column; gap: 10px; padding-top: 28px; background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 12px) 0 0 / 100% 4px no-repeat; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 16px; }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--link); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.rel { padding-block: 56px 88px; display: flex; flex-direction: column; gap: 28px; }
.page-head { display: flex; flex-direction: column; gap: 16px; padding-block: 56px 32px; }
.text-page .prose, .text-page .page-head { max-width: 760px; }
.woo-page { padding-bottom: 88px; }
.list-page .page-head { padding-top: 0; }
.list-page .posts { row-gap: 56px; }
.pagination { margin-top: 64px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--font-num); font-size: 25px; }
.nav-links a, .nav-links span { display: inline-block; padding: 6px 12px; text-decoration: none; }
.nav-links .current { background: var(--ink); color: var(--bg); }

/* ---------- 404 ---------- */
.over { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 900px; }
.over .over-face { width: 120px; --px-on: var(--brand); }
.over-title { font-family: var(--font-num); font-size: 75px; line-height: 1; color: var(--brand); text-transform: uppercase; }
.over-search { width: 100%; max-width: 520px; margin-top: 12px; }

/* ---------- forms ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="password"], select, textarea,
.woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce-page form .form-row .input-text {
	font: 18px/1.4 var(--font); color: var(--ink); background: #ffffff; border: 0; border-radius: 0; padding: 12px 14px; margin: 3px; max-width: calc(100% - 6px);
	box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink);
}
textarea { min-height: 160px; }
.search-form { display: flex; gap: 14px; align-items: center; }
.search-form input[type="search"] { flex: 1; min-width: 0; }
.wpcf7-form p { margin-bottom: 18px; }
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form textarea { width: calc(100% - 6px); }
.wpcf7-submit, input[type="submit"]:not(.button) {
	min-height: 52px; padding: 0 22px; margin: 4px; border: 0; border-radius: 0; background: var(--btn); color: #000000; cursor: pointer;
	font-family: var(--font-px); font-size: 17px; text-transform: uppercase;
	box-shadow: inset -4px -4px 0 0 rgba(0, 0, 0, .16), 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink);
}

/* ---------- WooCommerce ----------
   One system for shop, product, cart, checkout and account:
   - the main action is an orange pixel button, the others are white;
   - fields have the 3px pixel frame, panels are grey with the soft frame
     (like the notes in the posts), cards have the black frame;
   - amounts are in KC Pixel, labels in Atkinson (no tiny pixel letters).
   Cart and checkout are laid out like Shopify's: what you fill in on the
   left, the summary on the right. */

/* buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #payment #place_order, .woocommerce-page #payment #place_order, .woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; margin: 4px; border: 0; border-radius: 0; background: var(--surface); color: #000000;
	font-family: var(--font-px); font-size: 16px; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; text-decoration: none; white-space: nowrap;
	box-shadow: var(--frame-btn);
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #payment #place_order, .woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce a.add_to_cart_button, .woocommerce button.single_add_to_cart_button, .woocommerce .woocommerce-message .button, .woocommerce form.woocommerce-form-login .button, .woocommerce form.woocommerce-form-register .button, .woocommerce form.lost_reset_password .button, .woocommerce .woocommerce-MyAccount-content .button {
	background: var(--btn);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--alt); color: #000000; }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #payment #place_order:hover, .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce a.add_to_cart_button:hover, .woocommerce button.single_add_to_cart_button:hover, .woocommerce .woocommerce-message .button:hover { background: #f2c27c; color: #000000; }
.woocommerce a.button:active, .woocommerce button.button:active { box-shadow: inset 4px 4px 0 0 rgba(0, 0, 0, .2), var(--frame); }
.woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] { background: var(--alt); color: var(--muted); opacity: 1; padding: 0 20px; }
.woocommerce a.button.loading::after, .woocommerce button.button.loading::after { top: auto; right: 8px; }
.woocommerce .wc-proceed-to-checkout { padding: 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { display: flex; width: calc(100% - 8px); margin: 4px; font-size: 18px; min-height: 60px; }

/* quantity: a stepper when the script runs, a plain field without it */
.woocommerce .quantity .qty { width: 4.2em; text-align: center; }
.woocommerce .quantity.kc-stepper { display: inline-flex; align-items: stretch; margin: 3px; background: #ffffff; box-shadow: var(--frame-field); }
.woocommerce .quantity.kc-stepper .qty { width: 2.6em; margin: 0; padding: 10px 0; box-shadow: none; -moz-appearance: textfield; appearance: textfield; }
.woocommerce .quantity.kc-stepper .qty::-webkit-inner-spin-button, .woocommerce .quantity.kc-stepper .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.kc-step { width: 40px; border: 0; padding: 0; background: none; color: var(--ink); font: 400 20px/1 var(--font-px); cursor: pointer; }
.kc-step:hover { background: var(--alt); }
.kc-step:disabled { color: var(--line); cursor: default; background: none; }

/* notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper .wc-block-components-notice-banner {
	margin: 4px 4px 28px; padding: 16px 20px 16px 52px; border: 0; background: var(--alt); color: var(--ink); font-size: 17px;
	box-shadow: 0 -4px 0 0 var(--blue), 0 4px 0 0 var(--blue), -4px 0 0 0 var(--blue), 4px 0 0 0 var(--blue);
}
.woocommerce-error { box-shadow: 0 -4px 0 0 var(--brand), 0 4px 0 0 var(--brand), -4px 0 0 0 var(--brand), 4px 0 0 0 var(--brand); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { top: 16px; left: 18px; color: var(--ink); }
.woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a:not(.button) { color: var(--link); }
.woocommerce-message .button, .woocommerce-info .button { float: right; margin: -6px 0 0 16px; min-height: 40px; font-size: 14px; }
.woocommerce-error li { margin: 2px 0; }

/* fields */
.woocommerce form .form-row { padding: 0; margin: 0 0 18px; }
.woocommerce form .form-row label { font-weight: 700; font-size: 16px; line-height: 1.3; margin-bottom: 6px; }
.woocommerce form .form-row .required { color: var(--brand); text-decoration: none; }
.woocommerce form .form-row .optional { color: var(--muted); font-weight: 400; }
.woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea { width: calc(100% - 6px); }
.woocommerce form .form-row textarea { min-height: 110px; }
.woocommerce form .form-row.woocommerce-invalid .input-text, .woocommerce form .form-row.woocommerce-invalid select { box-shadow: 0 -3px 0 0 var(--brand), 0 3px 0 0 var(--brand), -3px 0 0 0 var(--brand), 3px 0 0 0 var(--brand); }
.woocommerce form .form-row .woocommerce-input-wrapper .description { background: var(--ink); border-radius: 0; font-size: 15px; }
.woocommerce form .form-row input[type="checkbox"], .woocommerce form input[type="checkbox"], .woocommerce input[type="radio"] { width: 20px; height: 20px; margin: 0 10px 0 0; vertical-align: -4px; accent-color: var(--ink); }
.woocommerce form .form-row label.checkbox, .woocommerce form .form-row .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 0; font-weight: 400; font-size: 17px; cursor: pointer; }
.select2-container--default .select2-selection--single { border: 0; border-radius: 0; height: auto; padding: 8px 6px; margin: 3px; box-shadow: var(--frame-field); }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); line-height: 1.6; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 10px; right: 6px; }
.select2-dropdown { border-radius: 0; border: 3px solid var(--ink); }
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--ink); }

/* tables (order details, account) */
.woocommerce table.shop_table { border: 0; border-radius: 0; margin: 4px 4px 28px; width: calc(100% - 8px); background: var(--surface); border-collapse: collapse; box-shadow: var(--frame); }
.woocommerce table.shop_table th { font-family: var(--font); font-size: 16px; font-weight: 700; color: var(--ink); }
.woocommerce table.shop_table thead th { font-weight: 400; color: var(--muted); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top: 2px solid var(--line); padding: 14px 16px; }
.woocommerce table.shop_table tr:first-child th, .woocommerce table.shop_table tr:first-child td { border-top: 0; }
.woocommerce table.shop_table .amount, .woocommerce .cart_totals .amount, .woocommerce-checkout-review-order-table .amount { font-family: var(--font-num); font-size: 25px; font-weight: 400; line-height: 1; white-space: nowrap; }
.woocommerce table.shop_table .product-name a, .woocommerce .cart_item .product-name a { font-weight: 700; color: var(--ink); text-decoration: none; }
.woocommerce table.shop_table .product-name a:hover { text-decoration: underline; }
.woocommerce a.remove { width: 32px; height: 32px; line-height: 30px; border-radius: 0; color: var(--muted) !important; font-family: var(--font-code); font-size: 22px; font-weight: 400; }
.woocommerce a.remove:hover { background: var(--brand); color: #ffffff !important; }
.woocommerce table.shop_table .woocommerce-shipping-methods, .woocommerce ul#shipping_method { list-style: none; margin: 0; padding: 0; }

/* product page */
.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; padding-top: 48px; }
.woocommerce div.product > * { grid-column: 1 / -1; }
.woocommerce div.product div.images, .woocommerce div.product div.summary { grid-column: auto; float: none; width: auto; margin: 0; }
.woocommerce div.product div.images .flex-viewport, .woocommerce div.product div.images .woocommerce-product-gallery__wrapper:only-child { margin: 4px; box-shadow: var(--frame); background: var(--surface); }
.woocommerce div.product div.images .flex-control-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 12px; margin: 18px 4px 0; }
.woocommerce div.product div.images .flex-control-thumbs li { float: none; width: auto; padding: 0; }
.woocommerce div.product div.images .flex-control-thumbs li img { opacity: .55; box-shadow: 0 0 0 2px var(--line); }
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active, .woocommerce div.product div.images .flex-control-thumbs li img:hover { opacity: 1; box-shadow: 0 0 0 2px var(--ink); }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { top: 16px; right: 16px; border-radius: 0; background: var(--surface); box-shadow: var(--frame-field); }
.woocommerce div.product .product_title { font-size: clamp(36px, 4.4vw, 56px); margin-bottom: 14px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-bottom: 18px; font-family: var(--font-num); font-size: 50px; line-height: 1.1; color: var(--brand); }
.woocommerce div.product p.price del, .woocommerce div.product span.price del { font-size: 25px; color: var(--muted); opacity: 1; }
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins { text-decoration: none; font-weight: 400; }
.woocommerce div.product .woocommerce-product-details__short-description { font-size: 19px; line-height: 1.6; }
.woocommerce div.product .woocommerce-product-details__short-description p { margin: 0 0 12px; }
.woocommerce div.product .stock { margin: 18px 0 0; font-family: var(--font-px); font-size: 14px; line-height: 1.5; text-transform: uppercase; color: var(--brand); }
.woocommerce div.product .stock.out-of-stock { color: var(--muted); }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 22px 0 18px; padding-top: 26px; background: var(--dotrule) 0 0 / 100% 4px no-repeat; }
.woocommerce div.product form.cart::before, .woocommerce div.product form.cart::after { display: none; }
.woocommerce div.product form.cart div.quantity { float: none; margin: 3px; }
.woocommerce div.product form.cart .button { float: none; flex: 1 1 220px; min-height: 60px; font-size: 18px; }
.woocommerce div.product .product_meta { font-size: 15px; color: var(--muted); }
.woocommerce div.product .product_meta > span { display: block; }
.woocommerce-product-details__description, .woocommerce-product-details__additional-info, .woocommerce-product-details__reviews { max-width: 760px; font-size: 19px; line-height: 1.65; }
.woocommerce-product-details__description > *:first-child { margin-top: 0; }
.woocommerce-product-details__description h2, .woocommerce-product-details__additional-info h2, .woocommerce-product-details__reviews h2 { font-size: 30px; line-height: 1.15; margin: 40px 0 14px; }
.woocommerce-product-details__description p, .woocommerce-product-details__description ul { margin: 0 0 16px; }
.woocommerce-product-details__description li { margin: 4px 0; }
.woocommerce-product-details__description iframe { display: block; max-width: 100%; margin: 24px 0; }
.woocommerce-product-details__description .kc-sim { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 24px 0; padding: 28px 20px; background: var(--dots), var(--alt); }
/* the "Add to cart — €27.00" link written in the KC 144 description has inline
   styles (white on orange, rounded): !important is the only way past them */
.woocommerce-product-details__description a[href*="add-to-cart="] {
	display: inline-flex !important; align-items: center; min-height: 56px; margin: 4px; padding: 0 22px !important; border-radius: 0 !important;
	background: var(--btn) !important; color: #000000 !important; font: 400 17px/1.1 var(--font-px) !important; text-transform: uppercase; box-shadow: var(--frame-btn);
}
/* reviews: snippet 32 prints its own "Reviews" heading above WooCommerce's */
.woocommerce-product-details__reviews .woocommerce-Reviews-title { display: none; }
.woocommerce #reviews #comments ol.commentlist { padding: 0; }
.woocommerce #review_form #respond { padding: 0; }
.woocommerce #review_form #respond p { margin: 0 0 16px; }
.woocommerce #review_form #respond label { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 700; }
.woocommerce #review_form #respond input[type="text"], .woocommerce #review_form #respond input[type="email"], .woocommerce #review_form #respond textarea { width: calc(100% - 6px); max-width: 560px; }
.woocommerce #review_form #respond .comment-form-cookies-consent label { display: inline; font-weight: 400; }
.woocommerce #review_form #respond .form-submit input { background: var(--btn); }
.woocommerce p.stars a { color: var(--brand); }
.woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--brand); }
.woocommerce table.shop_attributes { border-top: 2px solid var(--line); }
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { border-bottom: 2px solid var(--line); padding: 10px 12px; font-style: normal; background: none; }
.woocommerce .related > h2, .woocommerce .upsells > h2 { font-size: 30px; margin-bottom: 20px; }
.woocommerce .related, .woocommerce .upsells { padding-top: 24px; }

/* shop grid */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; clear: both; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
/* [class] outweighs WooCommerce's own .columns-N widths (30.75%, 48%), which would squeeze the cards inside the grid. */
.woocommerce ul.products[class] li.product, .woocommerce-page ul.products[class] li.product {
	float: none; clear: none; width: auto; margin: 4px; padding: 16px; display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--frame);
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link { flex: 1 0 auto; color: var(--ink); }
.woocommerce ul.products li.product a img { aspect-ratio: 1; object-fit: cover; background: var(--alt); margin: 0 0 14px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 24px; font-weight: 800; line-height: 1.15; padding: 0 0 6px; color: var(--ink); }
.woocommerce ul.products li.product .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; font-family: var(--font-num); font-size: 25px; color: var(--brand); }
.woocommerce ul.products li.product .price del { font-size: 18.75px; color: var(--muted); opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; font-weight: 400; }
.woocommerce ul.products li.product .button { display: flex; margin: 18px 4px 4px; }
.woocommerce ul.products li.product .custom-learn-more .button { margin-top: 14px; }
.woocommerce ul.products li.product .added_to_cart { padding-top: 10px; text-align: center; font-family: var(--font-px); font-size: 13px; text-transform: uppercase; }
.woocommerce span.onsale { min-height: 0; min-width: 0; line-height: 1; padding: 8px 10px; border-radius: 0; background: var(--brand); font-family: var(--font-px); font-size: 13px; font-weight: 400; text-transform: uppercase; }
.woocommerce div.product span.onsale { top: 68px; left: 20px; margin: 0; z-index: 2; } /* on the photo: 48px page top + 4px frame + 16px */
.woocommerce .woocommerce-ordering { margin: 0 0 28px; }
.woocommerce .woocommerce-ordering select { margin: 3px; padding-right: 36px; }
.woocommerce .woocommerce-result-count { color: var(--muted); font-size: 16px; margin: 14px 0 28px; }
.woocommerce .woocommerce-breadcrumb { margin: 0; padding-top: 32px; font-family: var(--font-px); font-size: 13px; text-transform: uppercase; color: var(--muted); }
.woocommerce .woocommerce-breadcrumb a { color: var(--muted); }
.soldout-label { border-radius: 0 !important; font-family: var(--font-px); font-weight: 400 !important; }

/* the summary panel: cart totals and checkout summary */
.woocommerce .cart-collaterals .cart_totals, .kc-co-side { background: var(--alt); }
.woocommerce .cart-collaterals .cart_totals > h2, .kc-co-side #order_review_heading { font-size: 24px; line-height: 1.2; margin: 0 0 18px; }

/* ----- cart ----- */
.kc-continue { margin: 0 0 18px; font-family: var(--font-px); font-size: 14px; text-transform: uppercase; }
.kc-continue a { color: var(--muted); text-decoration: none; }
.kc-continue a:hover { color: var(--ink); }
.woocommerce-cart .woo-body > .woocommerce:has(.woocommerce-cart-form) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-rows: auto auto auto 1fr; column-gap: 56px; align-items: start; }
.woocommerce-cart .woo-body > .woocommerce:has(.woocommerce-cart-form) > * { grid-column: 1 / -1; }
.woocommerce-cart .woo-body > .woocommerce > .woocommerce-cart-form { grid-column: 1; grid-row: 3 / 5; }
.woocommerce-cart .woo-body > .woocommerce > .cart-collaterals { grid-column: 2; grid-row: 3 / 5; align-self: stretch; }
.woocommerce .cart-collaterals .cart_totals { float: none; width: auto; position: sticky; top: 24px; margin: 4px; padding: 24px; box-shadow: var(--frame-soft); }
.woocommerce .cart-collaterals .cross-sells { float: none; width: auto; }

.woocommerce table.shop_table.cart { display: block; margin: 0; width: 100%; background: none; box-shadow: none; }
.woocommerce table.shop_table.cart thead, .woocommerce table.shop_table.cart tbody { display: block; }
.woocommerce table.shop_table.cart tr { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 40px 110px; grid-template-areas: "thumb name qty remove total" "thumb price qty remove total"; column-gap: 18px; align-items: center; padding: 20px 0; background: var(--dotrule) 0 100% / 100% 4px no-repeat; }
.woocommerce table.shop_table.cart thead tr { grid-template-areas: "thumb name qty remove total"; padding: 0 0 12px; }
.woocommerce table.shop_table.cart td, .woocommerce table.shop_table.cart th { display: block; padding: 0; border: 0; background: none; text-align: left; }
.woocommerce table.shop_table.cart th { font-family: var(--font-px); font-size: 13px; font-weight: 400; text-transform: uppercase; color: var(--muted); }
.woocommerce table.shop_table.cart .product-remove { grid-area: remove; }
.woocommerce table.shop_table.cart .product-thumbnail { grid-area: thumb; }
.woocommerce table.shop_table.cart .product-name { grid-area: name; align-self: end; font-size: 19px; }
.woocommerce table.shop_table.cart .product-price { grid-area: price; align-self: start; }
.woocommerce table.shop_table.cart .product-price .amount { font-size: 18.75px; color: var(--muted); }
.woocommerce table.shop_table.cart .product-quantity { grid-area: qty; }
.woocommerce table.shop_table.cart .product-subtotal { grid-area: total; text-align: right; }
.woocommerce table.shop_table.cart thead .product-price, .woocommerce table.shop_table.cart thead .product-thumbnail span { display: none; }
.woocommerce table.shop_table.cart td.product-thumbnail a, .woocommerce table.shop_table.cart td.product-thumbnail img { display: block; width: 96px; height: 96px; object-fit: cover; background: var(--surface); box-shadow: 0 0 0 2px var(--line); }
.woocommerce table.shop_table.cart td.product-thumbnail img { box-shadow: none; }
.woocommerce table.shop_table.cart td.product-quantity .quantity { margin: 3px; }
.woocommerce table.shop_table.cart tr:has(> td.actions) { display: block; padding: 24px 0 0; background: none; }
.woocommerce table.shop_table.cart td.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.woocommerce table.shop_table.cart td.actions .coupon { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; }
.woocommerce table.shop_table.cart td.actions .coupon .input-text { flex: 1 1 auto; width: auto; min-width: 0; max-width: 260px; margin: 3px; padding: 12px 14px; border: 0; box-shadow: var(--frame-field); font-size: 17px; }
.woocommerce table.shop_table.cart td.actions .button { float: none; margin: 4px; }
html.js .woocommerce-cart-form [name="update_cart"] { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.woocommerce .cart_totals table.shop_table { display: block; margin: 0; width: 100%; background: none; box-shadow: none; }
.woocommerce .cart_totals table.shop_table tbody { display: block; }
.woocommerce .cart_totals table.shop_table tr, .woocommerce .kc-co-side table.woocommerce-checkout-review-order-table tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding: 12px 0; border: 0; }
.woocommerce .cart_totals table.shop_table th, .woocommerce .cart_totals table.shop_table td { display: block; padding: 0; border: 0; background: none; width: auto; }
.woocommerce .cart_totals table.shop_table th { font-size: 17px; font-weight: 400; color: var(--ink); }
.woocommerce .cart_totals table.shop_table td { text-align: right; }
.woocommerce .cart_totals table.shop_table td::before { display: none; }
.woocommerce .cart_totals tr.shipping, .woocommerce .cart_totals tr.woocommerce-shipping-totals, .woocommerce .kc-co-side tr.woocommerce-shipping-totals { display: block; }
.woocommerce .cart_totals tr.woocommerce-shipping-totals td, .woocommerce .kc-co-side tr.woocommerce-shipping-totals td { margin-top: 10px; text-align: left; }
.woocommerce .cart_totals tr.order-total, .woocommerce .kc-co-side tr.order-total { margin-top: 10px; padding-top: 18px; background: var(--dotrule) 0 0 / 100% 4px no-repeat; }
.woocommerce .cart_totals tr.order-total th, .woocommerce .kc-co-side tr.order-total th { font-size: 20px; font-weight: 800; }
.woocommerce .cart_totals tr.order-total .amount, .woocommerce .kc-co-side tr.order-total .amount { font-size: 37.5px; }
.woocommerce .cart_totals tr.order-total strong, .woocommerce .kc-co-side tr.order-total strong { font-weight: 400; }
.woocommerce .cart_totals .woocommerce-shipping-destination, .woocommerce .cart_totals .woocommerce-shipping-calculator { margin: 10px 0 0; font-size: 15px; color: var(--muted); }
.woocommerce .cart_totals .shipping-calculator-button { color: var(--link); }
.woocommerce .cart_totals .shipping-calculator-button::after { display: none; }
.woocommerce .cart_totals .shipping-calculator-form { padding-top: 12px; }
/* shipping choices, in cart and checkout */
.woocommerce ul#shipping_method li { margin: 0 0 8px; padding: 0; text-indent: 0; }
.woocommerce ul#shipping_method li label { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 3px; padding: 12px 14px; background: #ffffff; font-size: 16px; line-height: 1.35; cursor: pointer; box-shadow: 0 0 0 2px var(--line); }
.woocommerce ul#shipping_method li input { position: absolute; opacity: 0; }
.woocommerce ul#shipping_method li input:checked + label { box-shadow: var(--frame-field); }
.woocommerce ul#shipping_method li input:focus-visible + label { outline: 4px solid var(--blue); outline-offset: 4px; }
.woocommerce ul#shipping_method li label .amount { font-size: 18.75px; }
.woocommerce ul#shipping_method li input[type="hidden"] + label { box-shadow: none; padding: 0; background: none; }
/* snippet 8's extra checkout button sits right above the totals: on wide
   screens the real one is in the same panel, so it shows on phones only,
   as the snippet's first version did */
.woocommerce .cart-collaterals .cart_totals > .wc-proceed-to-checkout:first-child { margin: 0 0 18px; }
@media (min-width: 961px) { .woocommerce .cart-collaterals .cart_totals > .wc-proceed-to-checkout:first-child { display: none; } }
/* snippet 9's cross-sells under the totals: a compact row each */
.woocommerce .cart_totals .cross-sells { margin-top: 28px; padding-top: 22px; background: var(--dotrule) 0 0 / 100% 4px no-repeat; }
.woocommerce .cart_totals .cross-sells > h2 { font-size: 20px; margin: 0 0 14px; }
.woocommerce .cart_totals .cross-sells ul.products { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.woocommerce .cart_totals .cross-sells ul.products[class] li.product { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; margin: 2px; padding: 10px; box-shadow: 0 0 0 2px var(--line); }
.woocommerce .cart_totals .cross-sells li.product a.woocommerce-loop-product__link { display: contents; }
.woocommerce .cart_totals .cross-sells li.product a img { grid-row: 1 / 3; width: 64px; height: 64px; margin: 0; }
.woocommerce .cart_totals .cross-sells li.product .woocommerce-loop-product__title { grid-column: 2; font-size: 17px; padding: 0; }
.woocommerce .cart_totals .cross-sells li.product .price { grid-column: 2; font-size: 18.75px; }
.woocommerce .cart_totals .cross-sells li.product .price del { font-size: 15px; }
.woocommerce .cart_totals .cross-sells li.product .button { grid-column: 3; grid-row: 1 / 3; margin: 4px; min-height: 40px; padding: 0 14px; font-size: 14px; }
.woocommerce .cart_totals .cross-sells li.product .custom-learn-more, .woocommerce .cart_totals .cross-sells li.product .onsale { display: none; }
.woocommerce-cart .cart-empty { font-size: 20px; }
/* a page with both cart and checkout (/checkout-landing/): WooCommerce leaves
   the cart totals out there, the checkout summary has them */
.woocommerce .cart-collaterals:not(:has(*)) { display: none; }
/* there, WooCommerce's cart script copies the checkout's "Returning customer?"
   and "Have a coupon?" lines into the cart's notices after an update */
.woocommerce-notices-wrapper .woocommerce-info:has(.showlogin, .showcoupon) { display: none; }
.woocommerce-cart .return-to-shop .button { background: var(--btn); }

/* ----- checkout -----
   The coupon form must stay outside the checkout form, so the columns are
   built on the outer box: the checkout form lends its two wrappers to that
   grid (display: contents) and the coupon lines up under the summary. */
.woocommerce-checkout:not(.woocommerce-order-received) .woo-body > .woocommerce:has(.kc-co-main) {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-rows: repeat(7, auto) 1fr; column-gap: 56px; align-items: start;
}
.woocommerce:has(> form.checkout .kc-co-main) > *, .woocommerce:has(> form.checkout .kc-co-main) > form.checkout > * { grid-column: 1 / -1; }
.woocommerce:has(> form.checkout .kc-co-main) > form.checkout { display: contents; }
.woocommerce:has(> form.checkout .kc-co-main) > .woocommerce-notices-wrapper { grid-row: 1; }
.woocommerce:has(> form.checkout .kc-co-main) > .woocommerce-form-login-toggle { grid-row: 2; }
.woocommerce:has(> form.checkout .kc-co-main) > form.woocommerce-form-login { grid-row: 3; }
.woocommerce:has(> form.checkout .kc-co-main) > form.checkout > .woocommerce-NoticeGroup { grid-row: 4; }
.woocommerce:has(> form.checkout .kc-co-main) > form.checkout > .kc-co-main { grid-column: 1; grid-row: 5 / -1; }
.woocommerce:has(> form.checkout .kc-co-main) > form.checkout > .kc-co-side { grid-column: 2; grid-row: 5; }
.woocommerce:has(> form.checkout .kc-co-main) > .woocommerce-form-coupon-toggle { grid-column: 2; grid-row: 6; position: relative; z-index: 1; }
.woocommerce:has(> form.checkout .kc-co-main) > form.checkout_coupon { grid-column: 2; grid-row: 7; position: relative; z-index: 1; }

.kc-co-side { margin: 4px 4px 0; padding: 24px 24px 12px; box-shadow: var(--frame-soft); }
.woocommerce:has(> form.checkout .kc-co-main) > .woocommerce-form-coupon-toggle { margin: 0 4px; padding: 0 24px 20px; background: var(--alt); box-shadow: 0 4px 0 0 var(--line), -4px 0 0 0 var(--line), 4px 0 0 0 var(--line); }
.woocommerce:has(> form.checkout .kc-co-main) > .woocommerce-form-coupon-toggle .woocommerce-info { margin: 0; padding: 18px 0 0; background: var(--dotrule) 0 0 / 100% 4px no-repeat; box-shadow: none; font-size: 16px; }
.woocommerce:has(> form.checkout .kc-co-main) > .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
.woocommerce:has(> form.checkout .kc-co-main) > form.checkout_coupon { margin: 0 4px; padding: 0 24px 24px; border: 0; border-radius: 0; background: var(--alt); box-shadow: 0 4px 0 0 var(--line), -4px 0 0 0 var(--line), 4px 0 0 0 var(--line); }
.woocommerce:has(> form.checkout .kc-co-main) > .woocommerce-form-coupon-toggle:has(+ form.checkout_coupon[style*="block"]) { padding-bottom: 12px; box-shadow: -4px 0 0 0 var(--line), 4px 0 0 0 var(--line); }
.woocommerce form.checkout_coupon { display: flex; flex-wrap: wrap; gap: 10px; }
.woocommerce form.checkout_coupon[style*="none"] { display: none; }
.woocommerce form.checkout_coupon .form-row { float: none; width: auto; margin: 0; }
.woocommerce form.checkout_coupon .form-row-first { flex: 1 1 160px; }
.woocommerce form.checkout_coupon .form-row-first .input-text { width: calc(100% - 6px); }
.woocommerce form.checkout_coupon .clear { display: none; }
.woocommerce form.checkout_coupon .coupon-error-notice { flex-basis: 100%; color: var(--brand); font-size: 15px; }
.woocommerce form.woocommerce-form-login { max-width: 560px; margin: 0 0 28px; padding: 24px; border: 0; border-radius: 0; background: var(--alt); box-shadow: var(--frame-soft); }

.kc-co-main #customer_details { display: block; }
.kc-co-main .col2-set .col-1, .kc-co-main .col2-set .col-2 { float: none; width: auto; }
.kc-co-main h3, .kc-pay-h { font-size: 26px; line-height: 1.2; margin: 0 0 18px; }
.kc-co-main .woocommerce-billing-fields__field-wrapper, .kc-co-main .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 16px; }
.woocommerce form .kc-co-main .form-row { grid-column: 1 / -1; width: auto; float: none; }
.woocommerce form .kc-co-main .form-row-first, .woocommerce form .kc-co-main .form-row-last { float: none; width: auto; grid-column: span 3; }
.kc-co-main #billing_postcode_field, .kc-co-main #billing_city_field, .kc-co-main #billing_state_field, .kc-co-main #shipping_postcode_field, .kc-co-main #shipping_city_field, .kc-co-main #shipping_state_field { grid-column: span 2; }
.kc-co-main .woocommerce-billing-fields__field-wrapper:has(#billing_state_field[style*="none"]) #billing_city_field, .kc-co-main .woocommerce-shipping-fields__field-wrapper:has(#shipping_state_field[style*="none"]) #shipping_city_field { grid-column: span 4; }
.kc-co-main #ship-to-different-address { margin: 8px 0 18px; font-size: 17px; font-weight: 400; }
.kc-co-main #ship-to-different-address label { display: flex; align-items: center; cursor: pointer; }
.kc-co-main .woocommerce-additional-fields > h3 { display: none; }
.kc-co-main .woocommerce-additional-fields, .kc-co-main .woocommerce-account-fields { margin-top: 8px; }
.kc-co-main .woocommerce-shipping-fields, .kc-co-main .woocommerce-additional-fields { padding-top: 8px; }
.kc-pay-h { margin-top: 28px; padding-top: 32px; background: var(--dotrule) 0 0 / 100% 4px no-repeat; }
.woocommerce-checkout #payment { margin: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.woocommerce-checkout #payment ul.payment_methods { margin: 3px; padding: 0; border: 0; background: #ffffff; box-shadow: var(--frame-field); }
.woocommerce-checkout #payment ul.payment_methods li { margin: 0; padding: 16px 18px; line-height: 1.4; border-top: 2px solid var(--line); font-size: 17px; }
.woocommerce-checkout #payment ul.payment_methods li:first-child { border-top: 0; }
.woocommerce-checkout #payment ul.payment_methods li > label { display: inline; font-weight: 700; cursor: pointer; }
.woocommerce-checkout #payment ul.payment_methods li img { max-height: 26px; vertical-align: middle; margin-left: 8px; }
.woocommerce-checkout #payment div.payment_box { margin: 14px 0 0; padding: 14px 16px; background: var(--alt); border-radius: 0; color: var(--ink); font-size: 16px; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.form-row { margin: 0; padding: 22px 0 0; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text, .woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { font-size: 15px; color: var(--muted); }
.woocommerce-checkout #payment #place_order { float: none; display: flex; width: calc(100% - 8px); margin: 18px 4px 4px; min-height: 64px; font-size: 20px; }

.woocommerce .kc-co-side table.woocommerce-checkout-review-order-table { display: block; margin: 0; width: 100%; background: none; box-shadow: none; }
.woocommerce .kc-co-side table.woocommerce-checkout-review-order-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.woocommerce .kc-co-side table.woocommerce-checkout-review-order-table tbody, .woocommerce .kc-co-side table.woocommerce-checkout-review-order-table tfoot { display: block; }
.woocommerce .kc-co-side table.woocommerce-checkout-review-order-table tr.cart_item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 16px; }
.woocommerce .kc-co-side table.woocommerce-checkout-review-order-table tbody tr:last-child { margin-bottom: 8px; padding-bottom: 20px; background: var(--dotrule) 0 100% / 100% 4px no-repeat; }
.woocommerce .kc-co-side table.woocommerce-checkout-review-order-table td, .woocommerce .kc-co-side table.woocommerce-checkout-review-order-table th { display: block; padding: 0; border: 0; background: none; }
.woocommerce .kc-co-side table.woocommerce-checkout-review-order-table td.product-name { display: flex; align-items: center; gap: 16px; min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.woocommerce .kc-co-side table.woocommerce-checkout-review-order-table .product-quantity { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.kc-thumb { position: relative; flex: none; width: 64px; height: 64px; background: #ffffff; box-shadow: 0 0 0 2px var(--line); }
.kc-thumb img { display: block; width: 64px; height: 64px; object-fit: cover; }
.kc-qty { position: absolute; top: -10px; right: -10px; min-width: 24px; height: 24px; padding: 0 5px; display: grid; place-items: center; background: var(--ink); color: #ffffff; font: 400 12.5px/1 var(--font-num); }
.woocommerce .kc-co-side table.woocommerce-checkout-review-order-table td.product-total { text-align: right; }
.woocommerce .kc-co-side table.woocommerce-checkout-review-order-table tfoot th { font-size: 17px; font-weight: 400; }
.woocommerce .kc-co-side table.woocommerce-checkout-review-order-table tfoot td { text-align: right; }
.woocommerce .kc-co-side table.woocommerce-checkout-review-order-table tr.cart-discount td { color: var(--brand); }
.woocommerce .kc-co-side .woocommerce-remove-coupon { font-size: 14px; }
.kc-sum-toggle { display: none; }

/* ----- order received ----- */
.woocommerce-order { display: flex; flex-direction: column; gap: 8px; padding-top: 48px; }
.woocommerce-order .woocommerce-thankyou-order-received, .woocommerce-order .woocommerce-notice--success { margin: 0 0 12px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.15; }
.woocommerce ul.order_details, .woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 18px 40px; margin: 4px 4px 28px; padding: 22px 24px !important; list-style: none; background: var(--alt); box-shadow: var(--frame-soft); }
.woocommerce ul.order_details li { float: none; margin: 0; padding: 0; border: 0; font-family: var(--font-px); font-size: 13px; text-transform: uppercase; color: var(--muted); }
.woocommerce ul.order_details li strong { display: block; margin-top: 6px; font-family: var(--font); font-size: 18px; text-transform: none; color: var(--ink); }
.woocommerce ul.order_details li strong .amount { font-family: var(--font-num); font-size: 25px; }
.woocommerce .woocommerce-order-details__title, .woocommerce .woocommerce-column__title, .woocommerce-customer-details h2 { font-size: 26px; margin: 24px 0 16px; }
.woocommerce .woocommerce-customer-details address { padding: 20px 24px; border: 0; border-radius: 0; background: var(--alt); box-shadow: var(--frame-soft); font-style: normal; }
.woocommerce .woocommerce-customer-details .col2-set .col-1, .woocommerce .woocommerce-customer-details .col2-set .col-2 { margin-bottom: 20px; }

/* ----- my account ----- */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px 56px; align-items: start; }
.woocommerce-account .woocommerce > * { grid-column: 1 / -1; }
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; float: none; width: auto; }
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; float: none; width: auto; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 0; font-family: var(--font-px); font-size: 14px; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { box-shadow: inset 4px 0 0 var(--brand); padding-left: 14px; }
.woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.woocommerce-account .u-columns.col2-set::before, .woocommerce-account .u-columns.col2-set::after { display: none; }
.woocommerce-account .u-columns .u-column1, .woocommerce-account .u-columns .u-column2 { float: none; width: auto; }
.woocommerce form.login, .woocommerce form.register, .woocommerce form.lost_reset_password { margin: 4px; padding: 24px; border: 0; border-radius: 0; background: var(--alt); box-shadow: var(--frame-soft); }
.woocommerce-account h2 { font-size: 30px; margin-bottom: 18px; }
.woocommerce .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; margin: 0 16px 0 0; }
.woocommerce-LostPassword { margin-top: 12px; font-size: 16px; }

/* the Code Snippets pop-ups at checkout (battery, second KeyChainino) */
#batteryModal .modal-content, #kcModal .modal-content { width: min(560px, 90%); border-radius: 0; background: #ffffff; font-family: var(--font); box-shadow: var(--frame), 12px 12px 0 0 rgba(0, 0, 0, .25); }
#batteryModal .modal-header, #kcModal .modal-header { background: var(--btn); color: #000000; padding: 22px 28px; font-family: var(--font-px); font-size: 22px; text-transform: uppercase; }
#batteryModal .modal-body, #kcModal .modal-body { font-size: 18px; }
#batteryModal .modal-body strong, #kcModal .modal-body strong { font-family: var(--font-num); font-size: 25px; color: var(--brand); font-weight: 400; }
#batteryModal .modal-footer .button, #kcModal .modal-footer .button { background: var(--btn); }
#batteryModal .close, #kcModal .close { color: #000000; padding: 10px 14px; }
#batteryModal .button-footer_nointerest, #kcModal .no-offer { color: var(--muted); }

@media (max-width: 960px) {
	.woocommerce div.product { grid-template-columns: minmax(0, 1fr); }
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce-cart .woo-body > .woocommerce:has(.woocommerce-cart-form) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.woocommerce-cart .woo-body > .woocommerce > .woocommerce-cart-form, .woocommerce-cart .woo-body > .woocommerce > .cart-collaterals { grid-column: 1; grid-row: auto; }
	.woocommerce-cart .woo-body > .woocommerce > .cart-collaterals { margin-top: 36px; }
	.woocommerce .cart-collaterals .cart_totals { position: static; }
	.woocommerce-checkout:not(.woocommerce-order-received) .woo-body > .woocommerce:has(.kc-co-main) { grid-template-columns: minmax(0, 1fr); }
	.woocommerce:has(> form.checkout .kc-co-main) > form.checkout > .kc-co-side { grid-column: 1; grid-row: 5; }
	.woocommerce:has(> form.checkout .kc-co-main) > .woocommerce-form-coupon-toggle, .woocommerce:has(> form.checkout .kc-co-main) > form.checkout_coupon { grid-column: 1; }
	.woocommerce:has(> form.checkout .kc-co-main) > form.checkout > .kc-co-main { grid-column: 1; grid-row: 8; margin-top: 36px; }
	.kc-sum-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border: 0; background: none; color: var(--ink); font: 700 18px/1.3 var(--font); cursor: pointer; text-align: left; }
	.kc-sum-toggle .kc-sum-total { font: 400 25px/1 var(--font-num); }
	.kc-sum-toggle .kc-sum-label::after { content: " ▾"; }
	.kc-co-side.is-open .kc-sum-toggle .kc-sum-label::after { content: " ▴"; }
	.kc-co-side:not(.is-open) #order_review_heading, .kc-co-side:not(.is-open) #order_review { display: none; }
	.kc-co-side.is-open .kc-sum-toggle { margin-bottom: 18px; }
	.kc-co-side.has-toggle { padding-bottom: 20px; }
	.woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 1; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
	.woocommerce-account .u-columns.col2-set { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
	/* WooCommerce's small-screen table (labels from data-title, hidden photos) is replaced by the rows above */
	.woocommerce table.shop_table_responsive.cart tr td, .woocommerce-page table.shop_table_responsive.cart tr td { text-align: left !important; }
	.woocommerce table.shop_table_responsive.cart tr td.product-subtotal { text-align: right !important; }
	.woocommerce table.shop_table_responsive.cart tr td::before, .woocommerce .cart_totals table.shop_table_responsive tr td::before { display: none; }
	.woocommerce table.shop_table_responsive.cart thead { display: none; }
	.woocommerce-page table.cart td.product-thumbnail, .woocommerce table.cart td.product-thumbnail { display: block; }
	.woocommerce table.shop_table_responsive.cart tr:nth-child(2n) td, .woocommerce .cart_totals table.shop_table_responsive tr:nth-child(2n) td { background: none; }
	.woocommerce .cart_totals table.shop_table_responsive tbody th { display: block; }
	.woocommerce .cart_totals table.shop_table_responsive tr td { text-align: right !important; }
	.woocommerce .cart_totals tr.woocommerce-shipping-totals td { text-align: left !important; }
	.woocommerce table.shop_table.cart tr { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "thumb name total" "thumb price price" "thumb qty remove"; row-gap: 6px; column-gap: 14px; }
	.woocommerce table.shop_table.cart td.product-thumbnail a, .woocommerce table.shop_table.cart td.product-thumbnail img { width: 72px; height: 72px; }
	.woocommerce table.shop_table.cart .product-quantity { justify-self: start; }
	.woocommerce table.shop_table.cart .product-remove { justify-self: end; }
	.woocommerce table.shop_table.cart td.actions .coupon { flex-basis: 100%; }
	.woocommerce table.shop_table.cart td.actions .coupon .input-text { max-width: none; }
}
@media (max-width: 560px) {
	.woocommerce ul.products { grid-template-columns: minmax(0, 1fr); }
	.woocommerce form .kc-co-main .form-row-first, .woocommerce form .kc-co-main .form-row-last { grid-column: 1 / -1; }
	.kc-co-main #billing_postcode_field, .kc-co-main #shipping_postcode_field { grid-column: span 2; }
	.kc-co-main #billing_city_field, .kc-co-main #shipping_city_field { grid-column: span 4; }
	.kc-co-main #billing_state_field, .kc-co-main #shipping_state_field { grid-column: 1 / -1; }
	.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 37.5px; }
	.woocommerce div.product form.cart .button { flex-basis: 100%; }
	.woocommerce ul.order_details, .woocommerce-order-overview { flex-direction: column; }
}

/* ---------- footer ---------- */
.site-foot .foot { padding-block: 56px 36px; display: flex; flex-direction: column; gap: 40px; }
.fgrid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.fcol { display: flex; flex-direction: column; gap: 10px; font-size: 17px; }
.fcol a { text-decoration: none; }
.fcol .logo { margin-bottom: 8px; }
.site-foot .wordmark { color: var(--brand); }
.fbot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--font-px); font-size: 13px; text-transform: uppercase; color: #b3b3b3; }
.site-foot.focus .fbot { padding-block: 28px; }
.legal { font-size: 15px; color: #b3b3b3; }
.legal a { color: #ffffff; }

/* ---------- small screens ---------- */
@media (max-width: 960px) {
	.hero, .sim, .sec-head, .honest, .kgrid, .os, .story, .split, .two, .choose { grid-template-columns: minmax(0, 1fr); }
	.games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.posts, .steps3 { grid-template-columns: minmax(0, 1fr); }
	.fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sec, .sim, .kgrid { padding-block: 72px; }
	.lib { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sk { grid-template-columns: minmax(0, 1fr); }
	.step:not(.box) { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.end { justify-self: start; }
	.wordmark { font-size: 22px; }
	.js .menu-toggle {
		display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 10px 12px; border: 0; background: var(--surface); color: var(--ink); cursor: pointer;
		font-family: var(--font-px); font-size: 14px; text-transform: uppercase; box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink);
	}
	.js .menu-toggle span { width: 18px; height: 12px; border-block: 3px solid currentColor; position: relative; }
	.js .menu-toggle span::after { content: ""; position: absolute; left: 0; right: 0; top: 1.5px; height: 3px; background: currentColor; }
	.js .menu { display: none; flex-basis: 100%; order: 3; }
	.js .menu.open { display: block; }
	.menu-list { flex-direction: column; gap: 0; }
	.menu-list a { padding: 14px 0; background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 12px) 0 100% / 100% 4px no-repeat; }
	.navr { order: 2; }
}
@media (max-width: 560px) {
	body { font-size: 18px; }
	.lead { font-size: 20px; }
	.prose { font-size: 19px; }
	.games, .lib { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fgrid { grid-template-columns: minmax(0, 1fr); }
	.navr { flex-basis: 100%; justify-content: space-between; } /* the cart stays reachable on phones */
	.tools { gap: 12px; }
	.hud-v { font-size: 37.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.blink { animation: none; }
	html { scroll-behavior: auto; }
}