/**
 * Extension detail – PX Image Optimizer animated hero (html/com_content/article/ext-hero/px-image-optimizer.php,
 * js/px-ext-imageopt.js). Same frame as the PX File Manager hero: a Media Manager window with the uploaded photo and the
 * optimizer steps, a Saved card and an "On your page" card overlapping its lower edge. Scoped under .pxim.
 */
.tp-ext-detail .txd-hero .visual.pxt { background: none; padding: 0; border-radius: 0; display: block; overflow: visible; }

.pxim {
	--pxim-navy: var(--tp-navy, #050038);
	--pxim-green: var(--ds-green, #22c55e);
	--pxim-ink: var(--ds-green-ink, #0f6b31);
	--pxim-soft: var(--ds-green-soft, #e6f8ec);
	--pxim-line: #eef1f5;
	--pxim-mute: #8a93a6;
	--pxim-text: #3b4256;
	position: relative; padding: 8px 0 30px; font-size: 12px; line-height: 1.35; color: var(--pxim-navy);
	font-family: Inter, "SF Pro Text", system-ui, -apple-system, sans-serif; text-align: left;
}
.pxim *, .pxim *::before, .pxim *::after { box-sizing: border-box; }

/* window */
.pxim-win { position: relative; width: 100%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(5,0,56,.07), 0 10px 26px rgba(5,0,56,.10); }
.pxim-bar { display: flex; align-items: stretch; background: #f7f9fb; border-bottom: 1px solid #e3e7ee; white-space: nowrap; overflow: hidden; }
.pxim-app { display: flex; align-items: center; gap: 6px; padding: 9px 13px; font-weight: 700; border-right: 1px solid #e3e7ee; }
.pxim-app i { color: #f5b301; }
.pxim-crumb { display: flex; align-items: center; gap: 6px; padding: 9px 12px; color: var(--pxim-text); }
.pxim-crumb s { text-decoration: none; color: #b0b7c5; }
.pxim-upl { margin: 6px 10px 6px auto; display: flex; align-items: center; gap: 5px; padding: 0 10px; border-radius: 6px; background: var(--pxim-navy); color: #fff; font-weight: 600; font-size: 11px; transition: transform .15s; }
.pxim-upl.is-press { transform: scale(.94); }

.pxim-body { display: grid; grid-template-columns: 44% 1fr; gap: 14px; padding: 14px 14px 82px; }
.pxim-h { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pxim-mute); margin: 0 0 6px 2px; }
.pxim-h b { width: 7px; height: 7px; border-radius: 2px; background: var(--pxim-green); }

/* the photo (drawn in CSS) */
.pxim-photo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pxim-pic { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #8ec5ff 0%, #c9e4ff 55%, #ffe3b8 100%); box-shadow: inset 0 0 0 1px rgba(5,0,56,.06); transition: transform .5s ease, filter .5s; }
.pxim-sun { position: absolute; right: 18%; top: 16%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: #ffd166; box-shadow: 0 0 24px #ffd16699; }
.pxim-hill { position: absolute; left: -10%; right: 30%; bottom: -30%; height: 75%; border-radius: 50% 50% 0 0; background: #34a76a; }
.pxim-hill2 { position: absolute; left: 35%; right: -15%; bottom: -35%; height: 70%; border-radius: 50% 50% 0 0; background: #1f7a4c; }
.pxim-pic.is-big { transform: scale(1.06); filter: saturate(1.15) contrast(1.05); }
.pxim-name { font-weight: 600; color: var(--pxim-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxim-size { display: flex; align-items: baseline; gap: 6px; font-weight: 700; }
.pxim-old { color: #a0a8b8; transition: color .3s; }
.pxim-old.is-current { text-decoration: none; color: var(--pxim-navy); }
.pxim-new { color: var(--pxim-ink); transition: opacity .3s; }
.pxim-prog { height: 5px; border-radius: 9px; background: #eef1f5; overflow: hidden; }
.pxim-prog span { display: block; height: 100%; width: 100%; background: var(--pxim-green); border-radius: 9px; transition: width .9s ease-out; }

/* optimizer steps */
.pxim-steps { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pxim-step { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 8px; border-radius: 8px; color: var(--pxim-text); font-weight: 500; transition: background .25s, opacity .25s; }
.pxim-step i { flex: none; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; background: #f1f3f7; color: transparent; transition: background .25s, color .25s; }
.pxim-step span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxim-step small { display: block; font-size: 10px; color: var(--pxim-mute); }
.pxim-step.is-done i { background: var(--pxim-green); color: #fff; }
.pxim-step.is-run { background: var(--pxim-soft); }
.pxim-step.is-run i { background: #fff; box-shadow: inset 0 0 0 2px var(--pxim-green); }
.pxim-step.is-wait { opacity: .45; }
.pxim-keep { margin-top: 4px; display: flex; align-items: center; gap: 6px; padding: 5px 9px; width: max-content; max-width: 100%; border-radius: 99px; background: #f1f3f7; color: var(--pxim-text); font-weight: 600; font-size: 10.5px; white-space: nowrap; transition: opacity .3s; }
.pxim-keep i { font-size: 9px; color: var(--pxim-ink); }

/* cards */
.pxim-cards { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: 14px; align-items: start; margin: -64px 18px 0 18px; }
.pxim-card { background: #fff; border-radius: 14px; padding: 13px 14px 14px; box-shadow: 0 0 0 1px rgba(5,0,56,.06), 0 10px 24px rgba(5,0,56,.13); min-width: 0; }
.pxim-pct { display: flex; align-items: baseline; gap: 2px; font-size: 34px; font-weight: 800; line-height: 1; margin: 2px 0 8px 2px; }
.pxim-pct small { font-size: 11px; font-weight: 600; color: var(--pxim-mute); margin-left: 6px; }
.pxim-bl { display: grid; grid-template-columns: 40px 1fr 50px; align-items: center; gap: 6px; height: 18px; font-size: 10.5px; }
.pxim-bl em { font-style: normal; color: var(--pxim-mute); font-weight: 600; }
.pxim-bl b { text-align: right; font-weight: 700; color: var(--pxim-text); }
.pxim-b { height: 7px; border-radius: 9px; background: #eef1f5; overflow: hidden; }
.pxim-b i { display: block; height: 100%; border-radius: 9px; background: #cfd5df; transition: width .9s ease-out; }
.pxim-b.is-after i { background: var(--pxim-green); }
.pxim-b.is-after.is-pending i { background: #cfd5df; }

.pxim-code { font: 500 10.5px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--pxim-text); }
.pxim-code .pxim-h { font-family: Inter, "SF Pro Text", system-ui, -apple-system, sans-serif; line-height: 1.35; }
.pxim-cl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s, max-height .3s, background .3s; max-height: 2em; }
.pxim-code .k { color: #b42318; }
.pxim-code .a { color: #1d4ed8; }
.pxim-code .v { color: var(--pxim-ink); }
.pxim-wrap.is-off { opacity: 0; max-height: 0; }
.pxim-wrap.is-new { background: var(--pxim-soft); border-radius: 4px; }
.pxim-ind.is-off { display: none; }

.pxim .is-hidden { opacity: 0; }

.pxim-rp { all: unset; position: absolute; right: 2px; bottom: 6px; cursor: pointer; color: var(--pxim-mute); font-size: 12px; padding: 4px; }
.pxim-rp:hover, .pxim-rp:focus-visible { color: var(--pxim-ink); }

@media (max-width: 640px) {
	.pxim { font-size: 11px; }
	.pxim-body { grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 16px; }
	.pxim-step small { display: none; }
	.pxim-cards { grid-template-columns: 1fr; margin: 10px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
	.pxim *, .pxim *::after { animation: none !important; transition: none !important; }
}