/* SPICE Catalog™ product visual (markup in template-parts/fig-catalog.php). Sizes are in em off a
   container-relative base, so the flow keeps the picture's proportions at any width.
   data-stage on .fg-catalog-flow (1–5) is how far the item has got; 5 shows everything. */
.fg-catalog{--navy:#13203d;--ink:#141a2e;--mute:#6b7387;--line:#e5e8ef;--ok:#22b45a;--grey:#c9ccd4;
  --grad:linear-gradient(135deg,#ff8a1a,#ff3d3d 55%,#e0157a);
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7.5 12.3 3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  container:fgca/inline-size;max-width:1400px;margin:0 auto;color:var(--ink);-webkit-font-smoothing:antialiased}
.fg-catalog *{box-sizing:border-box}
.fg-catalog-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fg-catalog svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fg-catalog a{color:inherit;text-decoration:none}
.fg-catalog a:focus-visible,.fg-catalog button:focus-visible{outline:2px solid #ff6a1a;outline-offset:2px}
:where(.fg-catalog) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
.fg-catalog h4,.fg-catalog h5,.fg-catalog ul,.fg-catalog dl,.fg-catalog dd{margin:0;padding:0}
.fg-catalog ul{list-style:none}

.fg-catalog-flow{position:relative;font-size:1cqw;display:grid;
  grid-template-columns:14.7em 2.3em 14.7em 2.3em 14.7em 2.3em 14.7em 2.3em 17.6em 4.2em minmax(0,1fr);
  align-items:stretch;padding:7.6em 0 1em}
.fg-catalog-logo{position:absolute;right:0;top:0;display:block;padding:.9em 1.2em;border-radius:.6em;background:var(--navy)}
.fg-catalog-logo svg{display:block;width:10em;height:auto}

/* step headers and cards */
.fg-catalog-step{position:relative;display:flex;flex-direction:column;min-width:0}
.fg-catalog .fg-catalog-head{position:relative;display:flex;align-items:flex-end;justify-content:center;height:5.6em;padding:0 .6em .9em;border-radius:.9em .9em 0 0;background:var(--navy);color:#fff;
  font-size:1.5em;font-weight:800;line-height:1.05;letter-spacing:.01em;text-transform:uppercase;text-align:center;transition:background .25s}
.fg-catalog-step[data-s="1"] .fg-catalog-head{font-size:1.35em}
.fg-catalog-head:hover{background:#1d2d55}
.fg-catalog-num{position:absolute;left:50%;top:-1.25em;transform:translateX(-50%);display:grid;place-items:center;width:1.85em;height:1.85em;border-radius:50%;
  background:var(--grad);border:.12em solid #fff;font-size:1.25em;font-weight:800;box-shadow:0 .3em .9em rgba(255,60,60,.35);transition:transform .3s}
.fg-catalog-card{flex:1;margin:-.3em .3em 0;padding:1.2em 1.1em;background:#fff;border:1px solid var(--line);border-radius:.8em;box-shadow:0 .5em 1.6em -.6em rgba(17,24,47,.25);
  min-height:34em;transition:box-shadow .35s,transform .35s}
.fg-catalog-card h4{font-size:1.3em;font-weight:600;margin-bottom:.7em}
.fg-catalog-step.is-active .fg-catalog-card{box-shadow:0 0 0 .18em rgba(255,90,40,.55),0 .8em 2em -.6em rgba(255,60,60,.35);transform:translateY(-.25em)}
.fg-catalog-step.is-active .fg-catalog-num{transform:translateX(-50%) scale(1.12)}

.fg-catalog-arrow{align-self:center;justify-self:center;width:2em;height:5.6em;margin-top:7em;background:var(--grad);clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%);opacity:.85}
.fg-catalog-arrow:nth-of-type(2){background:linear-gradient(135deg,#ff5a2a,#ff1f6a)}
.fg-catalog-arrow:nth-of-type(3){background:linear-gradient(135deg,#ff2a5a,#e0157a)}
.fg-catalog-arrow:nth-of-type(4){background:linear-gradient(135deg,#e0157a,#c3127f)}

/* 1 submission form */
.fg-catalog-lbl{display:block;margin:.55em 0 .3em;font-size:.9em;font-weight:600}
.fg-catalog-lbl i{font-style:normal;color:#e8203a}
.fg-catalog-in{display:flex;align-items:center;justify-content:space-between;min-height:2.4em;padding:.4em .7em;border:1px solid #d3d7e0;border-radius:.35em;font-size:.88em;line-height:1.35}
.fg-catalog-in svg.i{font-size:1.2em}
.fg-catalog-imgs{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:.5em;height:8.2em}
.fg-catalog-imgs span{display:grid;place-items:center;border:1px solid var(--line);border-radius:.4em;background:#f7f7f8;overflow:hidden}
.fg-catalog-imgs .fg-catalog-big{grid-row:1/3}
.fg-catalog-imgs svg{width:80%;height:80%}
.fg-catalog-submit{display:block;width:100%;margin-top:1em;height:3em;border-radius:.5em;background:linear-gradient(90deg,#ff6a1a,#e8203a 70%,#d4145a);color:#fff;font-size:1.05em;font-weight:600;
  box-shadow:0 .4em 1em rgba(232,32,58,.3);transition:transform .2s}
.fg-catalog-submit:hover{transform:translateY(-.1em)}

/* 2 validation */
.fg-catalog-checks{padding:1em .9em}
.fg-catalog-grp+.fg-catalog-grp{margin-top:.8em;padding-top:.8em;border-top:1px solid var(--line)}
.fg-catalog-grp h5{display:flex;align-items:center;gap:.6em;font-size:1em;font-weight:700;margin-bottom:.45em}
.fg-catalog-gi{font-size:1.7em;color:#ff4a1a}
.fg-catalog-grp:nth-child(2) .fg-catalog-gi{color:#e8203a}
.fg-catalog-grp:nth-child(3) .fg-catalog-gi{color:#e8203a}
.fg-catalog-up{margin-left:auto;font-size:1.1em;color:#4b5366}
.fg-catalog-checks li,.fg-catalog-ok li{display:flex;align-items:center;gap:.7em;padding:.22em 0 .22em .4em;font-size:.9em;color:#3a4256}
.fg-catalog-checks li::before,.fg-catalog-ok li::before{content:'';flex:none;width:1.35em;height:1.35em;border-radius:50%;background:var(--tick) center/100% no-repeat,var(--ok);transition:background-color .3s,transform .3s}

/* 3 collaboration */
.fg-catalog-chat{display:flex;flex-direction:column;padding:0 0 .8em}
.fg-catalog-ctabs{display:flex;gap:2.4em;padding:1em 1.1em 0;border-bottom:1px solid var(--line);font-size:.95em;color:#4b5366}
.fg-catalog-ctabs span{padding-bottom:.7em}
.fg-catalog-ctabs .is-on{color:#e8203a;font-weight:600;border-bottom:.16em solid #e8203a}
.fg-catalog-msgs{display:flex;flex-direction:column;gap:1.05em;padding:1.2em .8em .9em}
.fg-catalog-msgs li{display:flex;gap:.6em;transition:opacity .4s,transform .4s}
.fg-catalog-av{flex:none;display:grid;place-items:center;width:2.9em;height:2.9em;border-radius:50%;font-size:.82em;font-weight:700;color:#fff}
.fg-catalog-av.is-ds{background:linear-gradient(135deg,#ff8a3d,#e8203a)}
.fg-catalog-av.is-sp{background:linear-gradient(135deg,#3c5a9a,#13203d)}
.fg-catalog-mb{display:grid;grid-template-columns:1fr auto;gap:.15em .4em;min-width:0}
.fg-catalog-mb b{font-size:.8em}
.fg-catalog-mb time{font-size:.75em;color:var(--mute)}
.fg-catalog-mb>span{grid-column:1/-1;padding:.55em .7em;border-radius:.5em;background:#eef1f6;font-size:.84em;line-height:1.4}
.fg-catalog-type{display:flex;align-items:center;justify-content:space-between;margin:auto .8em 0;padding:.6em .7em;border:1px solid #d3d7e0;border-radius:.4em;font-size:.85em;color:#8a90a0}
.fg-catalog-type svg.i{font-size:1.3em;color:#4b5366}

/* 4 approval */
.fg-catalog-item{display:flex;gap:.9em;align-items:flex-start}
.fg-catalog-item .fg-catalog-big{flex:none;display:grid;place-items:center;width:5.4em;height:6.4em;border:1px solid var(--line);border-radius:.4em;background:#f7f7f8}
.fg-catalog-item .fg-catalog-big svg{width:80%;height:85%}
.fg-catalog-item b{display:block;font-size:1.2em;font-weight:800;color:var(--navy);line-height:1.15;margin:.2em 0 .5em}
.fg-catalog-item dl{display:grid;grid-template-columns:auto 1fr;gap:.25em .9em;font-size:.82em}
.fg-catalog-item dt{color:var(--mute)}
.fg-catalog-ok{margin:1.1em 0 .4em;padding-bottom:.7em;border-bottom:1px solid var(--line)}
.fg-catalog-approve{display:flex;align-items:center;justify-content:center;gap:.6em;margin-top:1.1em;height:3em;border-radius:.4em;background:#2fa84f;color:#fff;font-size:1.15em;font-weight:600;box-shadow:0 .4em 1em rgba(34,180,90,.3);transition:transform .3s}
.fg-catalog-approve svg.i{font-size:1.3em;color:#fff}

/* 5 synchronize */
.fg-catalog-sync .fg-catalog-head{font-size:1.5em}
.fg-catalog-master{margin:1.6em .4em 0;padding:.25em;border-radius:1em;background:var(--grad);box-shadow:0 0 1.6em rgba(255,60,90,.35);transition:opacity .4s,filter .4s}
.fg-catalog-mt{display:block;padding:.7em 0 .8em;text-align:center;color:#fff;font-size:1.45em;font-weight:800;text-transform:uppercase}
.fg-catalog-mc{background:#fff;border-radius:.8em;padding:1.2em 1.1em 1.4em}
.fg-catalog-mc .fg-catalog-item .fg-catalog-big{width:6em;height:8em;border:0;background:none}
.fg-catalog-mc .fg-catalog-item b{font-size:1.25em;color:var(--ink)}
.fg-catalog-badge{display:inline-flex;align-items:center;gap:.4em;padding:.4em .8em;border-radius:.35em;background:#2fa84f;color:#fff;font-size:1em;font-weight:600;transition:opacity .3s,transform .3s}
.fg-catalog-badge svg.i{font-size:1.15em}
.fg-catalog-mc>dl{display:grid;grid-template-columns:auto 1fr;gap:.6em 1em;margin-top:1em;font-size:.85em}
.fg-catalog-mc>dl dt{color:#4b5366}
.fg-catalog-dest{grid-column:10/12;position:relative;margin-top:6.5em;padding-left:4.2em;align-self:start}
.fg-catalog-fork{position:absolute;left:0;top:0;width:4.2em;height:100%;overflow:visible}
.fg-catalog-fork path{stroke-dasharray:6 4;animation:fg-catalog-flow 1.2s linear infinite}
@keyframes fg-catalog-flow{to{stroke-dashoffset:-20}}
.fg-catalog-outs{display:grid;grid-auto-rows:1fr;gap:1.4em}
.fg-catalog .fg-catalog-outs a{display:flex;flex-direction:column;align-items:center;text-align:center;padding:.9em .5em 1em;border-radius:.8em;background:#fff;box-shadow:0 .5em 1.6em -.6em rgba(17,24,47,.25);transition:transform .2s,box-shadow .2s,opacity .4s}
.fg-catalog-outs a:hover{transform:translateY(-.15em);box-shadow:0 .8em 2em -.6em rgba(255,60,60,.35)}
.fg-catalog-oc{display:grid;place-items:center;width:4.2em;height:4.2em;border-radius:50%;background:var(--navy);color:#ff5a2a;font-size:1em;margin-bottom:.5em}
.fg-catalog-oc svg.i{font-size:2.1em;stroke-width:1.8}
.fg-catalog-outs b{font-size:1.15em;font-weight:800;line-height:1.1}
.fg-catalog-outs small{margin-top:.3em;font-size:.85em;color:#4b5366;line-height:1.3}

/* replay states: what hasn't happened yet waits in grey */
.fg-catalog-flow[data-stage="1"] .fg-catalog-checks li::before{background-color:var(--grey);transform:scale(.85)}
.fg-catalog-flow:is([data-stage="1"],[data-stage="2"]) .fg-catalog-msgs li{opacity:0;transform:translateY(.5em)}
.fg-catalog-flow:is([data-stage="1"],[data-stage="2"],[data-stage="3"]) .fg-catalog-ok li::before{background-color:var(--grey);transform:scale(.85)}
.fg-catalog-flow:is([data-stage="1"],[data-stage="2"],[data-stage="3"]) .fg-catalog-approve{opacity:.55}
.fg-catalog-flow:not([data-stage="5"]) .fg-catalog-master{opacity:.45;filter:saturate(.3)}
.fg-catalog-flow:not([data-stage="5"]) .fg-catalog-badge{opacity:0;transform:scale(.8)}
.fg-catalog-flow:not([data-stage="5"]) .fg-catalog-fork path{stroke:var(--grey);animation:none}
.fg-catalog-flow:not([data-stage="5"]) .fg-catalog-outs a{opacity:.45}
.fg-catalog-checks li:nth-child(2)::before,.fg-catalog-ok li:nth-child(2)::before{transition-delay:.1s}
.fg-catalog-checks li:nth-child(3)::before,.fg-catalog-ok li:nth-child(3)::before{transition-delay:.2s}
.fg-catalog-checks li:nth-child(4)::before,.fg-catalog-ok li:nth-child(4)::before{transition-delay:.3s}
.fg-catalog-checks li:nth-child(5)::before{transition-delay:.4s}
.fg-catalog-checks li:nth-child(6)::before{transition-delay:.5s}
.fg-catalog-msgs li:nth-child(2){transition-delay:.35s}
.fg-catalog-msgs li:nth-child(3){transition-delay:.7s}
.fg-catalog-msgs li:nth-child(4){transition-delay:1.05s}
.fg-catalog-outs li:nth-child(2) a{transition-delay:.2s}
.fg-catalog-outs li:nth-child(3) a{transition-delay:.4s}

/* narrow columns and phones: the steps stack and the arrows point down */
@container fgca (max-width:860px){
  .fg-catalog-flow{font-size:13px;grid-template-columns:1fr;padding:64px 0 0;row-gap:0}
  .fg-catalog-logo{padding:8px 12px}
  .fg-catalog-logo svg{width:80px}
  .fg-catalog-step{margin-top:22px}
  .fg-catalog .fg-catalog-head,.fg-catalog .fg-catalog-step[data-s="1"] .fg-catalog-head,.fg-catalog .fg-catalog-sync .fg-catalog-head{height:auto;padding:22px 12px 12px;font-size:17px}
  .fg-catalog-num{top:-16px;font-size:15px}
  .fg-catalog-card{min-height:0;margin:-4px 6px 0}
  .fg-catalog-arrow{width:44px;height:22px;margin:10px auto 0;clip-path:polygon(0 0,50% 55%,100% 0,100% 45%,50% 100%,0 45%)}
  .fg-catalog-imgs{height:120px;max-width:260px}
  .fg-catalog-master{margin:12px 6px 0}
  .fg-catalog-fork{display:none}
  .fg-catalog-dest{grid-column:1;margin:14px 0 0;padding:0}
  .fg-catalog-outs{grid-auto-flow:column;grid-auto-columns:1fr;grid-auto-rows:auto;gap:8px}
  .fg-catalog-outs li{flex:1;min-width:0}
  .fg-catalog-outs a{height:100%;padding:12px 6px}
  .fg-catalog-oc{width:44px;height:44px}
  .fg-catalog-oc svg.i{font-size:22px}
  .fg-catalog-outs b{font-size:13px}
  .fg-catalog-outs small{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.fg-catalog *,.fg-catalog *::before{animation:none!important;transition:none!important}}